From de042c85403c3173950ba5639b6da6ed7f597b0d Mon Sep 17 00:00:00 2001
From: Steven Clontz <steven.clontz@gmail.com>
Date: Tue, 29 Oct 2024 14:48:08 -0500
Subject: [PATCH] External Markdown (#175)

* scaffold markdown modification

* Testing markdown

* Double curly braces markdown

* Lint  + hacky solution to the single surly braces

* fix single-curly markdown links

* Typo

* Hardcoded S/P/T for easier reading

* Added markdown button to preview

* Update packages/viewer/src/components/Shared/SeMarkdown.svelte

* Renamed SeMarkdown to ExtMarkdown, edited the preview

---------

Co-authored-by: abram! <115729028+Not-Abram@users.noreply.github.com>
---
 .../viewer/src/components/Dev/Preview.svelte  |  6 ++-
 .../src/components/Shared/ExtMarkdown.svelte  | 38 +++++++++++++++++++
 .../src/components/Shared/Source.svelte       |  4 ++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 packages/viewer/src/components/Shared/ExtMarkdown.svelte

diff --git a/packages/viewer/src/components/Dev/Preview.svelte b/packages/viewer/src/components/Dev/Preview.svelte
index d0e1b0ee..e4466a7e 100644
--- a/packages/viewer/src/components/Dev/Preview.svelte
+++ b/packages/viewer/src/components/Dev/Preview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Typeset } from '../Shared'
+  import { Typeset, Source } from '../Shared'
   import Example from './Example.svelte'
 
   let truncated = false
@@ -38,5 +38,9 @@
   </div>
   <div class="col-sm" data-testid="output">
     <Typeset {body} {truncated} />
+    <hr />
+    <section class="description-markdown">
+      <Source source={body} />
+    </section>
   </div>
 </div>
diff --git a/packages/viewer/src/components/Shared/ExtMarkdown.svelte b/packages/viewer/src/components/Shared/ExtMarkdown.svelte
new file mode 100644
index 00000000..7ce5b528
--- /dev/null
+++ b/packages/viewer/src/components/Shared/ExtMarkdown.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Ref } from '@pi-base/core'
+
+  export let source: string
+  const modify = (s: string) => {
+    const singlecurly = /{(?<type>[SPT])(?<id>\d+)}/g
+    const doublecurlies = /{{(?<prefix>\w+):(?<id>[^{]+)}}/g
+
+    // Replace double curly braces
+    s = s.replace(doublecurlies, (_, prefix, id) => {
+      // Perform replacement based on prefix and id
+      const ref = Ref.format({
+        kind: prefix,
+        id: id,
+      })
+      return `[${ref.title}](${ref.href})`
+    })
+
+    // Replace single curly braces
+    s = s.replace(singlecurly, (_, type, id) => {
+      // Perform replacement based on type and id
+      if (type === 'S') {
+        return `[S${id}](https://topology.pi-base.org/spaces/S${id})`
+      } else if (type === 'P') {
+        return `[P${id}](https://topology.pi-base.org/properties/P${id})`
+      } else {
+        return `[T${id}](https://topology.pi-base.org/theorems/T${id})`
+      }
+    })
+
+    return s
+  }
+</script>
+
+<h4>External Markdown</h4>
+<pre>
+{modify(source)}
+</pre>
diff --git a/packages/viewer/src/components/Shared/Source.svelte b/packages/viewer/src/components/Shared/Source.svelte
index 32b67095..27163340 100644
--- a/packages/viewer/src/components/Shared/Source.svelte
+++ b/packages/viewer/src/components/Shared/Source.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ExtMarkdown from './ExtMarkdown.svelte'
   export let source: string
   let showMarkdown = false
 </script>
@@ -12,5 +13,8 @@
   {#if showMarkdown}Hide{:else}Show{/if} markdown
 </button>
 {#if showMarkdown}
+  <h4>π-Base Markdown</h4>
   <pre>{source}</pre>
+  <hr />
+  <ExtMarkdown {source} />
 {/if}