29a53f1 Improve markdown footnotes — radicle-explorer

Radicle web interface

Improve markdown footnotes

Sebastian Martinez committed 2 years ago

commit 29a53f1ff6a7fc3dfdd83952f5f38e913b2e2b0d
parent 922b8edd73bf822818cce746cc1f088edb232b36

2 files changed +24 -13

modified src/components/Markdown.svelte

@@ -313,10 +313,22 @@

     font-weight: var(--font-weight-semibold);
   }
   .markdown :global(.footnote-ref > a),
   .markdown :global(a.ref-arrow) {
     border-bottom: none;
     color: unset;
   .markdown :global(.footnote-ref) {
     vertical-align: top;
     position: relative;
     top: -0.4rem;
   }
   .markdown :global(.footnote-ref),
   .markdown :global(.footnote > .marker),
   .markdown :global(.footnote > .ref-arrow) {
     color: var(--color-foreground-dim);
   }
   .markdown :global(.footnote-ref:hover),
   .markdown :global(.footnote .ref-arrow:hover) {
     color: var(--color-foreground);
   }
   .markdown :global(.footnote) {
     margin-bottom: 0;
   }
   .markdown :global(img) {

@@ -361,11 +373,10 @@

     padding: 0;
   }
   .markdown :global(a) {
     text-decoration: none;
     border-bottom: 1px solid currentColor;
     text-decoration: underline;
   }
   .markdown :global(a.no-underline) {
     border-bottom: none;
     text-decoration: none;
   }
   .markdown :global(hr) {

modified src/lib/markdown.ts

@@ -51,7 +51,7 @@ const footnoteReferenceMarkedExtension = {

     }
   },
   renderer: (token: Tokens.Generic): string =>
     `<sup class="footnote-ref" id="${referencePrefix}:${token.text}"><a href="#${footnotePrefix}:${token.text}">[${token.text}]</a></sup>`,
     `<sup class="txt-tiny footnote-ref" id="${referencePrefix}:${token.text}"><a href="#${footnotePrefix}:${token.text}">[${token.text}]</a></sup>`,
 };
 const footnoteMatch = /^\[\^([^\]]+)\]:\s([\S]*)/;
 const footnoteMarkedExtension = {

@@ -70,13 +70,13 @@ const footnoteMarkedExtension = {

     }
   },
   renderer: (token: Tokens.Generic): string =>
     `${
       token.reference === "0" ? "<hr />" : ""
     }<p class="txt-small" id="${footnotePrefix}:${token.reference}">${
     `<p class="txt-small footnote" id="${footnotePrefix}:${
       token.reference
     }. ${markedInstance.parseInline(
     }"><span class="marker">${
       token.reference
     }.</span> ${markedInstance.parseInline(
       token.text,
     )} <a class="txt-tiny ref-arrow" href="#${referencePrefix}:${
     )} <a class="txt-tiny ref-arrow no-underline" href="#${referencePrefix}:${
       token.reference
     }">↩</a></p>`,
 };