From 3eefb299a0a5d090d4308c8370f2dc78e1b5aef9 Mon Sep 17 00:00:00 2001
From: Steven Clontz <steven.clontz@gmail.com>
Date: Tue, 24 Sep 2024 13:48:20 -0500
Subject: [PATCH] add button to show markdown source of files (#169)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add button to show markdown source of files

* conditional styling suggested by @danflapjax

* 🧹 lint
---
 .../viewer/src/components/Properties/Show.svelte |  6 +++++-
 .../viewer/src/components/Shared/Source.svelte   | 16 ++++++++++++++++
 packages/viewer/src/components/Shared/index.ts   |  1 +
 .../viewer/src/components/Spaces/Show.svelte     | 10 +++++++++-
 .../viewer/src/components/Theorems/Show.svelte   |  6 +++++-
 5 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 packages/viewer/src/components/Shared/Source.svelte

diff --git a/packages/viewer/src/components/Properties/Show.svelte b/packages/viewer/src/components/Properties/Show.svelte
index 768b7574..8f00b8ad 100644
--- a/packages/viewer/src/components/Properties/Show.svelte
+++ b/packages/viewer/src/components/Properties/Show.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Property } from '@/models'
-  import { Aliases, Link, References, Tabs, Typeset } from '../Shared'
+  import { Aliases, Link, References, Source, Tabs, Typeset } from '../Shared'
   import Spaces from './Spaces.svelte'
   import Theorems from './Theorems.svelte'
 
@@ -24,6 +24,10 @@
   <Typeset body={property.description} />
 </section>
 
+<section class="description-markdown">
+  <Source source={property.description} />
+</section>
+
 <Tabs {tabs} {tab} {rel} />
 
 {#if tab === 'spaces'}
diff --git a/packages/viewer/src/components/Shared/Source.svelte b/packages/viewer/src/components/Shared/Source.svelte
new file mode 100644
index 00000000..32b67095
--- /dev/null
+++ b/packages/viewer/src/components/Shared/Source.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let source: string
+  let showMarkdown = false
+</script>
+
+<button
+  class="btn btn-sm mb-3 {showMarkdown
+    ? 'btn-secondary'
+    : 'btn-outline-secondary'}"
+  on:click={_ => (showMarkdown = !showMarkdown)}
+>
+  {#if showMarkdown}Hide{:else}Show{/if} markdown
+</button>
+{#if showMarkdown}
+  <pre>{source}</pre>
+{/if}
diff --git a/packages/viewer/src/components/Shared/index.ts b/packages/viewer/src/components/Shared/index.ts
index 88623377..f7d893de 100644
--- a/packages/viewer/src/components/Shared/index.ts
+++ b/packages/viewer/src/components/Shared/index.ts
@@ -9,6 +9,7 @@ export { default as Link } from './Link'
 export { default as Loading } from './Loading.svelte'
 export { default as NotFound } from './NotFound.svelte'
 export { default as References } from './References.svelte'
+export { default as Source } from './Source.svelte'
 export { default as Tabs } from './Tabs.svelte'
 export { default as Title } from './Title.svelte'
 export { default as Typeset } from './Typeset.svelte'
diff --git a/packages/viewer/src/components/Spaces/Show.svelte b/packages/viewer/src/components/Spaces/Show.svelte
index dd355f64..b7e8107c 100644
--- a/packages/viewer/src/components/Spaces/Show.svelte
+++ b/packages/viewer/src/components/Spaces/Show.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Space } from 'src/models'
-  import { Aliases, Link, References, Tabs, Typeset } from '../Shared'
+  import { Aliases, Link, References, Source, Tabs, Typeset } from '../Shared'
   import Counterexamples from './Counterexamples.svelte'
   import Properties from './Properties.svelte'
 
@@ -8,6 +8,8 @@
   export let tab: 'properties' | 'theorems' | 'references'
   export let rel: string | undefined = undefined
 
+  let showMarkdown = false
+
   const tabs = ['properties', 'theorems', 'references'] as const
 </script>
 
@@ -24,6 +26,10 @@
   <Typeset body={space.description} />
 </section>
 
+<section class="description-markdown">
+  <Source source={space.description} />
+</section>
+
 <Tabs {tabs} {tab} {rel} />
 
 {#if tab === 'properties'}
@@ -32,4 +38,6 @@
   <Counterexamples {space} />
 {:else if tab === 'references'}
   <References references={space.refs} />
+{:else if tab === 'markdown'}
+  <pre>{space.description}</pre>
 {/if}
diff --git a/packages/viewer/src/components/Theorems/Show.svelte b/packages/viewer/src/components/Theorems/Show.svelte
index fe70a132..e2a8f895 100644
--- a/packages/viewer/src/components/Theorems/Show.svelte
+++ b/packages/viewer/src/components/Theorems/Show.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Theorem } from 'src/models'
-  import { Link, References, Tabs, Title, Typeset } from '../Shared'
+  import { Link, References, Tabs, Source, Typeset } from '../Shared'
   import Name from './Name.svelte'
   import Converse from './Converse.svelte'
 
@@ -21,6 +21,10 @@
   <Typeset body={theorem.description} />
 </section>
 
+<section class="description-markdown">
+  <Source source={theorem.description} />
+</section>
+
 <Tabs {tabs} {tab} {rel} />
 
 {#if tab === 'converse'}