Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add auto linking in Markdown components
Sebastian Martinez committed 2 years ago
commit e4a051b17ac0ffdf54df124a8061e4552894caef
parent 78b988af95b659e27798ceaacbec3db75fc436d4
4 files changed +38 -6
modified package-lock.json
@@ -20,6 +20,7 @@
        "lodash": "^4.17.21",

        "marked": "^5.1.0",

        "marked-katex-extension": "^3.0.0",
+ 
        "marked-linkify-it": "^3.1.0",

        "md5": "^2.3.0",

        "plausible-tracker": "^0.3.8",

        "sinon": "^15.2.0",
@@ -828,6 +829,11 @@
      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz",

      "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw=="

    },
+ 
    "node_modules/@types/linkify-it": {
+ 
      "version": "3.0.2",
+ 
      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+ 
      "integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA=="
+ 
    },

    "node_modules/@types/lodash": {

      "version": "4.14.195",

      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
@@ -2987,6 +2993,14 @@
        "node": ">=10"

      }

    },
+ 
    "node_modules/linkify-it": {
+ 
      "version": "4.0.1",
+ 
      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+ 
      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+ 
      "dependencies": {
+ 
        "uc.micro": "^1.0.1"
+ 
      }
+ 
    },

    "node_modules/local-pkg": {

      "version": "0.4.3",

      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -3090,6 +3104,18 @@
        "marked": "^4 || ^5"

      }

    },
+ 
    "node_modules/marked-linkify-it": {
+ 
      "version": "3.1.0",
+ 
      "resolved": "https://registry.npmjs.org/marked-linkify-it/-/marked-linkify-it-3.1.0.tgz",
+ 
      "integrity": "sha512-F7OcF+zvbPemwYTNW8n0C9rEhKMuWsmgTvBwblwDvMRgoK3VV5Ls+mlUzrMOCI8P3ThVq1/KVRV7MBmTWvx2lw==",
+ 
      "dependencies": {
+ 
        "@types/linkify-it": "^3.0.2",
+ 
        "linkify-it": "^4.0.1"
+ 
      },
+ 
      "peerDependencies": {
+ 
        "marked": "^4 || ^5"
+ 
      }
+ 
    },

    "node_modules/md5": {

      "version": "2.3.0",

      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -4421,6 +4447,11 @@
        "node": ">=14.17"

      }

    },
+ 
    "node_modules/uc.micro": {
+ 
      "version": "1.0.6",
+ 
      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+ 
      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+ 
    },

    "node_modules/ufo": {

      "version": "1.1.2",

      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz",
modified package.json
@@ -63,6 +63,7 @@
    "lodash": "^4.17.21",

    "marked": "^5.1.0",

    "marked-katex-extension": "^3.0.0",
+ 
    "marked-linkify-it": "^3.1.0",

    "md5": "^2.3.0",

    "plausible-tracker": "^0.3.8",

    "sinon": "^15.2.0",
modified src/lib/markdown.ts
@@ -2,6 +2,7 @@ import type { marked } from "marked";


import dompurify from "dompurify";

import katexMarkedExtension from "marked-katex-extension";
+ 
import markedLinkifyIt from "marked-linkify-it";

import { Marked, Renderer as BaseRenderer } from "marked";



import emojis from "@app/lib/emojis";
@@ -142,6 +143,7 @@ export class Renderer extends BaseRenderer {


const markedInstance = new Marked(

  katexMarkedExtension({ throwOnError: false }),
+ 
  markedLinkifyIt(),

  {

    extensions: [

      emojisMarkedExtension,
modified src/views/projects/ProjectMeta.svelte
@@ -1,9 +1,11 @@
<script lang="ts">

  import type { BaseUrl } from "@httpd-client";
- 
  import Clipboard from "@app/components/Clipboard.svelte";

  import dompurify from "dompurify";
+
+ 
  import Clipboard from "@app/components/Clipboard.svelte";

  import Link from "@app/components/Link.svelte";
+ 
  import markdown from "@app/lib/markdown";

  import { formatNodeId, twemoji } from "@app/lib/utils";



  export let baseUrl: BaseUrl;
@@ -11,10 +13,6 @@
  export let projectDescription: string;

  export let projectId: string;

  export let projectName: string;
-
- 
  const linkifyDescription = (text: string) => {
- 
    return text.replaceAll(/(https?:\/\/[^\s]+)/g, `<a href="$1">$1</a>`);
- 
  };

</script>



<style>
@@ -111,6 +109,6 @@
    <Clipboard small text={projectId} />

  </div>

  <div class="description" use:twemoji>
- 
    {@html dompurify.sanitize(linkifyDescription(projectDescription))}
+ 
    {@html dompurify.sanitize(markdown.parse(projectDescription))}

  </div>

</header>