534430b Fix relative markdown file links — radicle-explorer

Radicle web interface

Fix relative markdown file links

Sebastian Martinez committed 3 years ago

commit 534430b2ec1b30d6250db96ee8e67ef1f769f496
parent e5ec6e33fb584e0598ef27cb5a6df7d9e97fed88

2 files changed +30 -1

modified src/components/Markdown.svelte

@@ -5,7 +5,8 @@

   import { onMount } from "svelte";
   import { toDom } from "hast-util-to-dom";
   import { base } from "@app/lib/router";
   import * as utils from "@app/lib/utils";
   import { base, updateProjectRoute, activeRouteStore } from "@app/lib/router";
   import { isUrl, twemoji, scrollIntoView, canonicalize } from "@app/lib/utils";
   import { highlight } from "@app/lib/syntax";
   import {

@@ -30,6 +31,20 @@

     // eslint-disable-next-line @typescript-eslint/naming-convention
     dompurify.sanitize(marked.parse(content), { SANITIZE_DOM: false });
   function navigateToMarkdownLink(event: any) {
     if (event.target.matches(".file-link")) {
       event.preventDefault();
       if ($activeRouteStore.resource === "projects") {
         updateProjectRoute({
           path: utils.canonicalize(
             event.target.getAttribute("href"),
             $activeRouteStore.params.path ?? "",
           ),
         });
       }
     }
   }
   onMount(async () => {
     // Don't underline <a> tags that contain images.
     for (const e of container.querySelectorAll("a")) {

@@ -55,6 +70,11 @@

       }
     }
     const fileAnchorTags = document.querySelectorAll(".file-link");
     fileAnchorTags.forEach(anchorTag => {
       anchorTag.addEventListener("click", navigateToMarkdownLink);
     });
     // Replaces code blocks in the background with highlighted code.
     const prefix = "language-";
     const nodes = Array.from(document.body.querySelectorAll("pre code"));

modified src/lib/markdown.ts

@@ -1,6 +1,7 @@

 import emojis from "@app/lib/emojis";
 import katex from "katex";
 import { marked } from "marked";
 import { isUrl } from "./utils";
 const emojisMarkedExtension = {
   name: "emoji",

@@ -136,6 +137,14 @@ export const renderer = {

     )}</div>`;
     return `<li>${liContent}</li>`;
   },
   link(href: string, _title: string, text: string) {
     // If the link is not a URL nor starts with a #, we add the file-link class to it,
     // so we're able to query it in the Markdown component.
     if (!isUrl(href) && !href.startsWith("#")) {
       return `<a href="${href}" class="file-link">${text}</a>`;
     }
     return `<a href="${href}">${text}</a>`;
   },
 };
 export const markdownExtensions = [