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! <[email protected]>

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>

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>

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}