Handle more cases, update tests

Author: davepagurek

src/content/tutorials/en/p5js-with-screen-reader.mdx

@@ -234,4 +234,4 @@ white circle
 
 The p5.js Web Editor has several features that make it easier to code while using a screen reader. Warning sounds can alert you to syntax errors while you code. Text descriptions of the canvas can help you to keep track of visual outputs. 
 
-Keep in mind that the features described above only work within the p5.js Web Editor while you code. Check out [How to Label Your p5.js Canvas](https://p5js.org/learn/labeling-canvases.html) for detailed guidance on p5.js code accessibility. This is an important step for making your project accessible when sharing it outside of the p5.js Web Editor.
+Keep in mind that the features described above only work within the p5.js Web Editor while you code. Check out [How to Label Your p5.js Canvas](./writing-accessible-canvas-descriptions) for detailed guidance on p5.js code accessibility. This is an important step for making your project accessible when sharing it outside of the p5.js Web Editor.

src/pages/_utils.ts

@@ -432,7 +432,7 @@ const getUrl = (
 export const rewriteRelativeLink = (url: string): string => {
   let updatedUrl: string;
 
-  if (/^(https?:\/)?\//.exec(url) || url.startsWith('mailto:')) {
+  if (/^((https?:\/)?)\//.exec(url) || url.startsWith('mailto:')) {
     // Leave absolute paths alone
     updatedUrl = url;
   } else if (url.startsWith('#')) {
@@ -448,14 +448,19 @@ export const rewriteRelativeLink = (url: string): string => {
     } else {
       updatedUrl = url;
     }
+
+    // Relative links to md files should be turned into pages
+    if (updatedUrl.endsWith('.md')) {
+      updatedUrl = updatedUrl.replace(/\.md$/, '');
+    }
   }
 
   // Add a trailing / if the link isn't to a file and does not have query params or a hash reference
   if (
-    !url.endsWith('/') &&
-    !/(\.\w+)$/.exec(url) &&
-    !url.includes('?') &&
-    !/#([\w\-]+)$/.exec(url)
+    !updatedUrl.endsWith('/') &&
+    !/(\.\w+)$/.exec(updatedUrl) &&
+    !updatedUrl.includes('?') &&
+    !/#([\w\-]+)$/.exec(updatedUrl)
   ) {
     updatedUrl += '/';
   }

src/scripts/utils.ts

@@ -277,8 +277,11 @@ export const rewriteRelativeMdLinks = (markdownText: string): string => {
    * 1. Text for the link
    * 2. Link url (but not the .md extension at the end)
    */
-  const regexPattern: RegExp = /\[([^\]]+)\]\((.?\/?[^)]+)\.md\)/g;
-  return markdownText.replace(regexPattern, (_match, linkText, url: string) => {
+  const regexPattern: RegExp = /(\!?)\[([^\]]+)\]\(([^\)]+)\)/g;
+  return markdownText.replace(regexPattern, (match, img, linkText, url: string) => {
+    // Don't convert images
+    if (img) return match;
+
     const updatedUrl = rewriteRelativeLink(url);
     return `[${linkText}](${updatedUrl})`;
   });

test/scripts/utils.test.ts

@@ -16,19 +16,25 @@ test("rewriteRelativeMdLinks", () => {
   - [Other](./folder/document.md)
   - [Other](folder/document.md)
   - [lol](./some-where-else/wow/)
+  - [absolute](/wow/)
+  - [no trailing slash](../test)
+  - [external](https://p5js.org/)
   `),
   ).toEqual(`
   # Title
   
   You can find more examples [here](https://p5xjs.org/examples.html) and
-  in the [guide](./the-guide/).
+  in the [guide](../the-guide/).
   
   ![image](./assets/image.jpg)
   
   ## Related Docs
-  - See [Access](./access/).
-  - [Other](./folder/document/)
-  - [Other](folder/document/)
-  - [lol](./some-where-else/wow/)
+  - See [Access](../access/).
+  - [Other](../folder/document/)
+  - [Other](../folder/document/)
+  - [lol](../some-where-else/wow/)
+  - [absolute](/wow/)
+  - [no trailing slash](../test/)
+  - [external](https://p5js.org/)
   `);
 });