Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Allow markdown in issue/patch titles
Rūdolfs Ošiņš committed 3 years ago
commit d54889cea1c478f0001c54c46fa933e3db27649f
parent 36746a8091bd9c4239f7f600715cc1ed924c8dbe
7 files changed +66 -25
added src/components/InlineMarkdown.svelte
@@ -0,0 +1,34 @@
+ 
<script lang="ts">
+ 
  import dompurify from "dompurify";
+ 
  import { marked } from "marked";
+
+ 
  import { renderer } from "@app/lib/markdown";
+ 
  import { twemoji } from "@app/lib/utils";
+
+ 
  export let content: string;
+ 
  export let fontSize: "small" | "medium" = "small";
+
+ 
  marked.use({ renderer });
+
+ 
  const render = (content: string): string =>
+ 
    // eslint-disable-next-line @typescript-eslint/naming-convention
+ 
    dompurify.sanitize(marked.parseInline(content), { SANITIZE_DOM: false });
+ 
</script>
+
+ 
<style>
+ 
  .markdown :global(code) {
+ 
    font-family: var(--font-family-monospace);
+ 
    color: var(--color-foreground-6);
+ 
    background-color: var(--color-foreground-3);
+ 
    border-radius: 0.5rem;
+ 
    padding: 0.125rem 0.25rem;
+ 
  }
+ 
</style>
+
+ 
<span
+ 
  class="markdown"
+ 
  use:twemoji
+ 
  class:txt-medium={fontSize === "medium"}
+ 
  class:txt-small={fontSize === "small"}>
+ 
  {@html render(content)}
+ 
</span>
modified src/components/Markdown.svelte
@@ -17,7 +17,7 @@
  export let content: string;

  export let hash: string | null = null;

  export let path: string = "/";
- 
  export let rawPath: string;
+ 
  export let rawPath: string | undefined = undefined;



  $: doc = matter(content);

  $: frontMatter = Object.entries(doc.data).filter(
@@ -57,16 +57,18 @@


    // Iterate over all images, and replace the source with a canonicalized URL

    // pointing at the projects /raw endpoint.
- 
    for (const i of container.querySelectorAll("img")) {
- 
      const imagePath = i.getAttribute("src");
-
- 
      // Make sure the source isn't a URL before trying to fetch it from the repo
- 
      if (
- 
        imagePath &&
- 
        !isUrl(imagePath) &&
- 
        !imagePath.startsWith(`${base}twemoji`)
- 
      ) {
- 
        i.setAttribute("src", `${rawPath}/${canonicalize(imagePath, path)}`);
+ 
    if (rawPath) {
+ 
      for (const i of container.querySelectorAll("img")) {
+ 
        const imagePath = i.getAttribute("src");
+
+ 
        // Make sure the source isn't a URL before trying to fetch it from the repo
+ 
        if (
+ 
          imagePath &&
+ 
          !isUrl(imagePath) &&
+ 
          !imagePath.startsWith(`${base}twemoji`)
+ 
        ) {
+ 
          i.setAttribute("src", `${rawPath}/${canonicalize(imagePath, path)}`);
+ 
        }

      }

    }
modified src/views/projects/Cob/CobHeader.svelte
@@ -5,6 +5,7 @@


  import Button from "@app/components/Button.svelte";

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

  import TextInput from "@app/components/TextInput.svelte";



  export let action: "create" | "edit" | "view" = "view";
@@ -67,7 +68,9 @@
        <TextInput transparent variant="form" bind:value={title} />

      {:else}

        {#if title}
- 
          <span class="txt-medium title">{title}</span>
+ 
          <div class="title">
+ 
            <InlineMarkdown fontSize="medium" content={title} />
+ 
          </div>

        {:else}

          <span class="txt-missing">No title</span>

        {/if}
modified src/views/projects/Commit.svelte
@@ -1,23 +1,16 @@
<script lang="ts">

  import type { Commit } from "@httpd-client";
- 
  import { formatCommit, twemoji } from "@app/lib/utils";
-
- 
  import * as router from "@app/lib/router";
+ 
  import { formatCommit } from "@app/lib/utils";



  import Changeset from "@app/views/projects/SourceBrowser/Changeset.svelte";

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

  import CommitAuthorship from "@app/views/projects/Commit/CommitAuthorship.svelte";
+ 
  import InlineMarkdown from "@app/components/InlineMarkdown.svelte";



  export let commit: Commit;



  const { commit: header } = commit;
- 
  const onBrowse = (event: { detail: string }) => {
- 
    router.updateProjectRoute({
- 
      view: { resource: "tree" },
- 
      path: event.detail,
- 
    });
- 
  };

</script>



<style>
@@ -56,7 +49,9 @@
<div class="commit">

  <div class="header">

    <div class="summary">
- 
      <div class="txt-medium txt-bold" use:twemoji>{header.summary}</div>
+ 
      <div class="txt-medium txt-bold">
+ 
        <InlineMarkdown fontSize="medium" content={header.summary} />
+ 
      </div>

      <div class="layout-desktop-flex txt-monospace sha1">

        <span>{header.id}</span>

        <Clipboard small text={header.id} />
modified src/views/projects/Commit/CommitTeaser.svelte
@@ -5,6 +5,7 @@


  import CommitAuthorship from "./CommitAuthorship.svelte";

  import Icon from "@app/components/Icon.svelte";
+ 
  import InlineMarkdown from "@app/components/InlineMarkdown.svelte";

  import ProjectLink from "@app/components/ProjectLink.svelte";



  export let commit: CommitHeader;
@@ -78,7 +79,7 @@
        search: undefined,

      }}>

      <div class="summary" use:twemoji>
- 
        {commit.summary}
+ 
        <InlineMarkdown content={commit.summary} />

      </div>

    </ProjectLink>

    <CommitAuthorship header={commit} />
modified src/views/projects/Issue/IssueTeaser.svelte
@@ -6,6 +6,7 @@
  import Authorship from "@app/components/Authorship.svelte";

  import Badge from "@app/components/Badge.svelte";

  import Icon from "@app/components/Icon.svelte";
+ 
  import InlineMarkdown from "@app/components/InlineMarkdown.svelte";

  import ProjectLink from "@app/components/ProjectLink.svelte";



  export let issue: Issue;
@@ -118,7 +119,9 @@
            params: { issue: issue.id },

          },

        }}>
- 
        <span class="issue-title">{issue.title}</span>
+ 
        <span class="issue-title">
+ 
          <InlineMarkdown content={issue.title} />
+ 
        </span>

      </ProjectLink>

      <span class="tags">

        {#each issue.tags.slice(0, 4) as tag}
modified src/views/projects/Patch/PatchTeaser.svelte
@@ -9,6 +9,7 @@
  import Badge from "@app/components/Badge.svelte";

  import DiffStatBadge from "@app/components/DiffStatBadge.svelte";

  import Icon from "@app/components/Icon.svelte";
+ 
  import InlineMarkdown from "@app/components/InlineMarkdown.svelte";

  import ProjectLink from "@app/components/ProjectLink.svelte";



  export let projectId: string;
@@ -127,7 +128,9 @@
            params: { patch: patch.id },

          },

        }}>
- 
        <span class="patch-title">{patch.title}</span>
+ 
        <span class="patch-title">
+ 
          <InlineMarkdown content={patch.title} />
+ 
        </span>

      </ProjectLink>

      <span class="tags">

        {#each patch.tags.slice(0, 4) as tag}