add katex math rendering to markdown and mdsvex

move code from root layout to demo layout
add DemoNav.svelte

package.json

@@ -31,8 +31,8 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.29.2",
-    "@sveltejs/adapter-static": "1.0.1",
-    "@sveltejs/kit": "1.0.11",
+    "@sveltejs/adapter-static": "^1.0.1",
+    "@sveltejs/kit": "^1.0.11",
     "@sveltejs/package": "^1.0.2",
     "@types/d3-array": "^3.0.4",
     "@types/d3-color": "^3.1.0",
@@ -51,7 +51,9 @@
     "prettier": "^2.8.2",
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
+    "rehype-katex-svelte": "^1.1.2",
     "rehype-slug": "^5.1.0",
+    "remark-math": "3.0.0",
     "svelte": "^3.55.1",
     "svelte-check": "^3.0.2",
     "svelte-multiselect": "^8.2.4",

src/app.html

@@ -17,6 +17,11 @@
 
     <link rel="icon" href="favicon.svg" />
     <link rel="stylesheet" href="prism-vsc-dark-plus.css" />
+    <!-- math display -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"
+    />
 
     %sveltekit.head%
   </head>

src/routes/(demos)/+layout.svelte

@@ -1,3 +1,23 @@
+<script lang="ts">
+  import { name } from '$root/package.json'
+  import DemoNav from '$site/DemoNav.svelte'
+</script>
+
+<h1>
+  <img src="favicon.svg" alt={name} height="50" width="50" />&ensp;Examples
+</h1>
+
+<DemoNav />
+
 <main>
   <slot />
 </main>
+
+<style>
+  h1 {
+    text-align: center;
+    display: flex;
+    place-content: center;
+    place-items: center;
+  }
+</style>

src/routes/(demos)/bohr-atoms/+page@.svelte

@@ -1,29 +1,11 @@
 <script lang="ts">
   import { BohrAtom, element_data } from '$lib'
+  import Desc from './desc.md'
 
   let orbital_period = 2
 </script>
 
-<h1>Bohr Atoms</h1>
-<p>
-  This solar-system-like visualization of the elements is known as the Bohr model. It was
-  proposed by Niels Bohr in 1913. It should not be viewed as an accurate picture of
-  reality. Quantum mechanics has shown that electrons are really unlocalized wave
-  functions still centered around the nucleus but with much more complicated shapes
-  determined by their quantum numbers n, l, m and s. n is the shell number, l is the
-  orbital angular, m is the magnetic moment and s is the spin.
-</p>
-<p>
-  In fact this 2d visualization is a simplification even of the incorrect Bohr model in
-  which electrons really orbit in 3d around the nucleus. Yet this animation gives an
-  intuitive understanding of how electrons are placed into shells and how electron
-  energies decrease with increasing shell number. To be precise, the radius of electron
-  orbitals increases with the square of the shell number (shown here as linear due to page
-  width constraints). Meanwhile, the 'kinetic energy' of the electrons decreases linearly
-  with shell number. The orbital period T is proportional Z^2 / n^3, where Z is the atomic
-  number. Shown here is sqrt(T) / Z (the the root of the period scaled by atomic number)
-  as else inner-shell electrons of large atoms would be invisibly fast.
-</p>
+<Desc />
 
 <label>
   Electron Orbital Period:
@@ -43,15 +25,6 @@
 </ol>
 
 <style>
-  h1,
-  p {
-    text-align: center;
-    max-width: 50em;
-    margin: 2em auto;
-  }
-  p {
-    text-align: justify;
-  }
   label {
     display: flex;
     place-content: center;

src/routes/(demos)/bohr-atoms/desc.md

@@ -0,0 +1,22 @@
+## Bohr Atoms
+
+<main>
+
+This solar-system-like visualization of the elements is known as the Bohr model. It was proposed by Niels Bohr in 1913. It should not be viewed as an accurate picture of reality. Quantum mechanics has shown that electrons are really unlocalized wave functions still centered around the nucleus but with much more complicated shapes determined by their quantum numbers $n$, $l$, $m$ and $s$.
+
+- $n$ is the shell number
+- $l$ is the orbital angular number
+- $m$ is the magnetic moment number
+- $s$ is the spin
+
+In fact this 2d visualization is a simplification even of the incorrect Bohr model in which electrons really orbit in 3d around the nucleus. Yet this animation gives an intuitive understanding of how electrons are placed into shells and how electron energies decrease with increasing shell number. To be precise, the radius of electron orbitals increases with the square of the shell number (shown here as linear due to page width constraints). Meanwhile, the 'kinetic energy' of the electrons decreases linearly with shell number. The orbital period $T$ is proportional $Z^2 / n^3$, where $Z$ is the atomic number. Shown here is $\sqrt(T) / Z$ (the root of the period scaled by atomic number) as else inner-shell electrons of large atoms would be invisibly fast.
+
+</main>
+<style>
+  h2 {
+    text-align: center;
+  }
+  p {
+    text-align: justify;
+  }
+</style>

src/routes/+layout.svelte

@@ -1,77 +1,22 @@
 <script lang="ts">
   import { page } from '$app/stores'
-  import { name, repository } from '$root/package.json'
+  import { repository } from '$root/package.json'
   import { Footer } from '$site'
   import { GitHubCorner } from 'svelte-zoo'
   import '../app.css'
-  import { _demo_routes } from './+layout'
-
-  $: is_current = (path: string) => {
-    if (path === $page.url.pathname) return `page`
-    if (path !== `/` && $page.url.pathname.includes(path)) return `page`
-    return undefined
-  }
 </script>
 
 <GitHubCorner href={repository} />
 
 {#if !$page.error && $page.url.pathname !== `/`}
   <a href="." aria-label="Back to index page">&laquo; home</a>
 {/if}
-{#if _demo_routes.some((route) => $page.url.pathname.endsWith(route))}
-  <h1>
-    <img src="favicon.svg" alt={name} height="50" width="50" />&ensp;Examples
-  </h1>
-
-  <nav>
-    {#each _demo_routes as href, idx}
-      {#if idx > 0}<strong>&bull;</strong>{/if}
-      <a {href} aria-current={is_current(href)}>{href}</a>
-    {/each}
-  </nav>
-
-  <slot />
-{:else}
-  <!-- handles non-svx routes index.svelte and +error.svelte -->
-  <slot />
 
-  <h2>More Demos</h2>
-
-  <nav>
-    {#each _demo_routes as href, idx}
-      {#if idx > 0}<strong>&bull;</strong>{/if}
-      <a {href} aria-current={is_current(href)}>{href}</a>
-    {/each}
-  </nav>
-{/if}
+<slot />
 
 <Footer />
 
 <style>
-  h1,
-  h2 {
-    text-align: center;
-    display: flex;
-    place-content: center;
-    place-items: center;
-  }
-  nav {
-    display: flex;
-    gap: 1em 1ex;
-    place-content: center;
-    margin: 1em auto 3em;
-    max-width: 45em;
-    flex-wrap: wrap;
-  }
-  nav > a {
-    padding: 0 4pt;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 3pt;
-    transition: 0.2s;
-  }
-  nav > a[aria-current='page'] {
-    color: mediumseagreen;
-  }
   a[href='.'] {
     font-size: 15pt;
     position: absolute;

src/routes/+layout.ts

@@ -3,15 +3,6 @@ import type { LayoutLoad } from './$types'
 
 export const prerender = true
 
-export const _demo_routes = Object.keys(
-  // eslint-disable-next-line @typescript-eslint/quotes
-  import.meta.glob('./\\(demos\\)/*/+page*.{svx,md,svelte}')
-).map((filename) => filename.split(`/`)[2])
-
-if (_demo_routes.length < 3) {
-  throw new Error(`Too few demo routes found: ${_demo_routes.length}`)
-}
-
 export const load: LayoutLoad = ({ url }) => {
   if (url.pathname.endsWith(`.md`)) {
     throw redirect(307, url.pathname.replace(/\.md$/, ``))

src/routes/+page.svelte

@@ -11,6 +11,7 @@
   import { property_labels } from '$lib/labels'
   import { active_category, active_element, heatmap_key, last_element } from '$lib/stores'
   import { PropertySelect } from '$site'
+  import DemoNav from '$site/DemoNav.svelte'
   import type { ScaleLinear } from 'd3-scale'
 
   let window_width: number
@@ -66,11 +67,18 @@
   <ColorCustomizer collapsible={false} />
 {/if}
 
+<h2>More Demos</h2>
+
+<DemoNav />
+
 <style>
   h1 {
     text-align: center;
     font-size: clamp(20pt, 5.5vw, 42pt);
   }
+  h2 {
+    text-align: center;
+  }
   a[href='bohr-atoms'] {
     position: absolute;
     top: 8%;

src/site/DemoNav.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+
+  const routes = Object.keys(
+    // eslint-disable-next-line @typescript-eslint/quotes
+    import.meta.glob('/src/routes/\\(demos\\)/*/+page*.{svx,md,svelte}')
+  ).map((filename) => filename.split(`/`)[4])
+
+  if (routes.length < 3) {
+    throw new Error(`Too few demo routes found: ${routes.length}`)
+  }
+  $: is_current = (path: string) => {
+    if (path === $page.url.pathname) return `page`
+    if (path !== `/` && $page.url.pathname.includes(path)) return `page`
+    return undefined
+  }
+</script>
+
+<nav>
+  {#each routes as href, idx}
+    {#if idx > 0}<strong>&bull;</strong>{/if}
+    <a {href} aria-current={is_current(href)}>{href}</a>
+  {/each}
+</nav>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1em 1ex;
+    place-content: center;
+    margin: 1em auto 3em;
+    max-width: 45em;
+    flex-wrap: wrap;
+  }
+  nav > a {
+    padding: 0 4pt;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 3pt;
+    transition: 0.2s;
+  }
+  nav > a[aria-current='page'] {
+    color: mediumseagreen;
+  }
+</style>

svelte.config.js

@@ -1,6 +1,8 @@
 import adapter from '@sveltejs/adapter-static'
 import { mdsvex } from 'mdsvex'
 import examples from 'mdsvexamples'
+import katex from 'rehype-katex-svelte'
+import math from 'remark-math'
 import preprocess from 'svelte-preprocess'
 
 const { default: pkg } = await import(`./package.json`, {
@@ -11,15 +13,16 @@ const defaults = {
   pkg: pkg.name,
   repo: pkg.repository,
 }
-const remarkPlugins = [[examples, { defaults }]]
+const remarkPlugins = [[examples, { defaults }], math]
+const rehypePlugins = [katex]
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
   extensions: [`.svelte`, `.svx`, `.md`],
 
   preprocess: [
     preprocess(),
-    mdsvex({ remarkPlugins, extensions: [`.svx`, `.md`] }),
+    mdsvex({ remarkPlugins, rehypePlugins, extensions: [`.svx`, `.md`] }),
   ],
 
   kit: {