add button to show markdown source of files (#169)

* add button to show markdown source of files

* conditional styling suggested by @danflapjax

* 🧹 lint

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'}

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}

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'

packages/viewer/src/components/Spaces/Show.svelte

@@ -1,13 +1,15 @@
 <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'
 
  export let space: Space
  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}

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'}