From dbba1f58582ebb345b69e596fa344a0c57953927 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Mon, 1 Jul 2024 11:35:25 +0200
Subject: [PATCH] Remove InlineMarkdown component

---
 src/components/InlineMarkdown.svelte          | 42 -------------------
 .../projects/Source/ProjectNameHeader.svelte  | 11 ++++-
 2 files changed, 9 insertions(+), 44 deletions(-)
 delete mode 100644 src/components/InlineMarkdown.svelte

diff --git a/src/components/InlineMarkdown.svelte b/src/components/InlineMarkdown.svelte
deleted file mode 100644
index 47fe3ce72b..0000000000
--- a/src/components/InlineMarkdown.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import dompurify from "dompurify";
-
-  import markdown from "@app/lib/markdown";
-  import { twemoji } from "@app/lib/utils";
-  import { activeUnloadedRouteStore } from "@app/lib/router";
-  import { Renderer } from "@app/lib/markdown";
-
-  export let content: string;
-  export let fontSize: "tiny" | "small" | "regular" | "medium" | "large" =
-    "small";
-
-  const render = (content: string): string =>
-    dompurify.sanitize(
-      markdown.parseInline(content, {
-        renderer: new Renderer($activeUnloadedRouteStore),
-      }) as string,
-    );
-</script>
-
-<style>
-  .markdown :global(code) {
-    font-family: var(--font-family-monospace);
-    background-color: var(--color-fill-ghost);
-    border-radius: var(--border-radius-tiny);
-    padding: 0.125rem 0.25rem;
-  }
-  .markdown :global(strong) {
-    font-weight: var(--font-weight-semibold);
-  }
-</style>
-
-<span
-  class="markdown"
-  use:twemoji
-  class:txt-large={fontSize === "large"}
-  class:txt-medium={fontSize === "medium"}
-  class:txt-regular={fontSize === "regular"}
-  class:txt-small={fontSize === "small"}
-  class:txt-tiny={fontSize === "tiny"}>
-  {@html render(content)}
-</span>
diff --git a/src/views/projects/Source/ProjectNameHeader.svelte b/src/views/projects/Source/ProjectNameHeader.svelte
index ad59d211a0..ea045ffa59 100644
--- a/src/views/projects/Source/ProjectNameHeader.svelte
+++ b/src/views/projects/Source/ProjectNameHeader.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import type { BaseUrl, Project } from "@http-client";
 
+  import dompurify from "dompurify";
+  import { markdownWithExtensions } from "@app/lib/markdown";
   import { twemoji } from "@app/lib/utils";
 
   import Badge from "@app/components/Badge.svelte";
   import CloneButton from "@app/views/projects/Header/CloneButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Id from "@app/components/Id.svelte";
-  import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Link from "@app/components/Link.svelte";
   import SeedButton from "@app/views/projects/Header/SeedButton.svelte";
   import Share from "@app/views/projects/Share.svelte";
@@ -15,6 +16,12 @@
   export let project: Project;
   export let baseUrl: BaseUrl;
   export let seeding: boolean;
+
+  function render(content: string): string {
+    return dompurify.sanitize(
+      markdownWithExtensions.parseInline(content) as string,
+    );
+  }
 </script>
 
 <style>
@@ -94,5 +101,5 @@
   </div>
 </div>
 <div class="description" use:twemoji>
-  <InlineMarkdown fontSize="regular" content={project.description} />
+  {render(project.description)}
 </div>