add cmd palette for keyboard-only site navigation (uses svelte-multis…

…elect)

clean up server code for post loading
del PrevNext.svelte, replaced with svelte-zoo component
update deps incl. TS v5 to use moduleResolution='bundler'

package.json

@@ -32,11 +32,11 @@
     "@iconify/svelte": "^3.1.0",
     "@rollup/plugin-yaml": "^4.0.1",
     "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.8.3",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
+    "@sveltejs/kit": "^1.12.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "devalue": "^4.3.0",
-    "eslint": "^8.34.0",
+    "eslint": "^8.36.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hast-util-from-string": "^2.0.0",
     "hast-util-select": "^5.0.5",
@@ -50,12 +50,14 @@
     "rehype-katex-svelte": "^1.1.2",
     "rehype-slug": "^5.1.0",
     "remark-math": "3.0.0",
-    "svelte": "^3.55.1",
-    "svelte-check": "^3.0.3",
-    "svelte-preprocess": "^5.0.1",
-    "svelte-preprocess-import-assets": "^0.2.5",
-    "svelte2tsx": "^0.6.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4"
+    "svelte": "^3.57.0",
+    "svelte-check": "^3.1.4",
+    "svelte-multiselect": "^8.5.0",
+    "svelte-preprocess": "^5.0.3",
+    "svelte-preprocess-import-assets": "^0.2.6",
+    "svelte-zoo": "^0.4.3",
+    "svelte2tsx": "^0.6.10",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.0"
   }
 }

src/app.css

@@ -2,7 +2,7 @@
   --night: #061e25;
   --text-color: rgb(208, 208, 208);
 
-  --toc-mobile-bg: #0d1a1d;
+  --toc-mobile-bg: #081011;
   --toc-mobile-shadow: 0 0 1em 0 black;
   --toc-title-padding: 0 0 0 3pt;
   --toc-li-padding: 4pt 1ex;
@@ -11,6 +11,8 @@
   --toc-min-width: 16em;
   --toc-active-bg: darkcyan;
 
+  --sms-options-bg: #081011;
+
   --zoo-github-corner-color: var(--night);
   --zoo-github-corner-bg: white;
 }

src/lib/index.ts

@@ -1,4 +1,3 @@
 export { default as DocsGrid } from './DocsGrid.svelte'
 export { default as Footer } from './Footer.svelte'
 export { default as Nav } from './Nav.svelte'
-export { default as PrevNext } from './PrevNext.svelte'

src/routes/+layout.server.ts

@@ -1 +1,17 @@
 export const prerender = true
+
+export const load = async ({ url }) => {
+  const posts = Object.entries(
+    // eslint-disable-next-line @typescript-eslint/quotes
+    import.meta.glob('./posts/*/+page.{md,svx,svelte}', { eager: true })
+  ).map(([file, post]) => ({
+    ...post.metadata,
+    slug: file.split(`/`)[2],
+    path: '/' + file.split(`/`).slice(1, -1).join(`/`),
+    file,
+  }))
+
+  const post = posts.find((post) => post.path === url.pathname)
+
+  return { posts, post }
+}

src/routes/+layout.svelte

@@ -1,9 +1,21 @@
 <script lang="ts">
+  import { goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { Footer } from '$lib'
+  import { CmdPalette } from 'svelte-multiselect'
   import '../app.css'
+
+  const actions = Object.keys(import.meta.glob(`./**/+page.{svx,svelte,md}`)).map(
+    (filename) => {
+      const parts = filename.split(`/`).filter((part) => !part.startsWith(`(`)) // remove hidden route segments
+      const route = `/${parts.slice(1, -1).join(`/`)}`
+      return { label: route, action: () => goto(route) }
+    }
+  )
 </script>
 
+<CmdPalette {actions} placeholder="Go to..." />
+
 {#if $page.url.pathname !== `/`}
   <a href="/" aria-label="Back to index page">&laquo; home</a>
 {/if}

src/routes/+page.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
-  import type { PageServerData } from './$types'
   import Physics from './physics/+page@.md'
   import Posts from './posts/+page@.svelte'
-
-  export let data: PageServerData
 </script>
 
 <img src="./janosh.jpg" alt="me" width="200" />
@@ -36,7 +33,7 @@
 
 <h2>Posts</h2>
 
-<Posts {data} />
+<Posts />
 
 <style>
   img[alt='me'] {

src/routes/posts/+layout.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
   import { dev } from '$app/environment'
-  import { PrevNext } from '$lib'
   import { repository } from '$root/package.json'
   import Icon from '@iconify/svelte'
-  import type { LayoutServerData } from '../physics/$types'
+  import { PrevNext } from 'svelte-zoo'
 
-  export let data: LayoutServerData
+  export let data
 
-  $: ({ post, prev, next } = data)
-  $: ({ title, cover, date, slug } = post)
+  $: ({ title, cover, date, slug } = data.post)
 </script>
 
 {#if dev}
-  {#await import(`./${slug}/${cover.img}`) then { default: src }}
-    <img {src} alt={title} />
+  {#await import(`./${slug}/${cover?.img?.replace('.svg', '')}.svg`) then { default: src }}
+    <img {src} alt={cover?.caption} />
   {/await}
 {:else}
   <img
@@ -30,7 +28,23 @@
 <main>
   <slot />
 
-  <PrevNext {prev} {next} />
+  <br />
+  <PrevNext
+    items={data.posts.map((post) => [post.slug, post])}
+    current={slug}
+    let:item
+    let:kind
+  >
+    <h3>
+      <a href={item.slug}>
+        {@html kind == `next` ? `Next &rarr;` : `&larr; Previous`}
+        <br />
+        <small>{item.title}</small>
+      </a>
+      <br />
+      <time>{new Date(item.date).toISOString().split?.(`T`)[0]}</time>
+    </h3>
+  </PrevNext>
 </main>
 
 <style>
@@ -41,6 +55,8 @@
     background: linear-gradient(-45deg, #5a6323, #2a355e, #642626);
   }
   time {
+    font-weight: lighter;
+    font-size: 10pt;
     text-align: center;
   }
 </style>

src/routes/posts/+page@.svelte

@@ -1,26 +1,23 @@
 <script lang="ts">
   import { dev } from '$app/environment'
+  import { page } from '$app/stores'
   import { repository } from '$root/package.json'
   import Icon from '@iconify/svelte'
-  import type { PageServerData } from './$types'
-
-  export let data: PageServerData
 </script>
 
 <img src="./blog-banner.svg" alt="Banner" />
 
 <ul>
-  {#each data.posts?.sort((p1, p2) => {
-    // sort by date descending
-    return p2.date.localeCompare(p1.date)
+  {#each $page.data?.posts?.sort((p1, p2) => {
+    return p2.date.localeCompare(p1.date) // sort by date descending
   }) ?? [] as post}
     {@const { cover, slug, title, tags, date } = post}
     {@const href = `/posts/${slug}`}
     <li>
       <h3><a {href}>{title}</a></h3>
       <a {href}>
         {#if dev}
-          {#await import(`./${slug}/${cover.img}`) then { default: src }}
+          {#await import(`./${slug}/${cover.img.replace('.svg', '')}.svg`) then { default: src }}
             <img {src} alt={title} />
           {/await}
         {:else}

src/routes/posts/normalizing-flows/+page.md

@@ -311,11 +311,11 @@ $$
 
 ## Further Reading
 
-Normalizing flows seem to really be taking off at the moment. Here's an incomplete list of awesome resources on the topic.
+To learn more about normalizing flows, here are some resources to take you further.
 
 - Ari Seff created a [super helpful 3blue1brown-style video](https://youtube.com/watch?v=i7LjDvsLWCg) explaining the basics of normalizing flows.
 - Some of the guys at DeepMind involved in the development of NFs [published a very thorough and very readable review article](https://arxiv.org/abs/1912.02762) on the subject just days after I published this post. (I updated this post with some of the insights I gained there.)
 - Andrej Karpathy created [a repo with PyTorch implementations of the most commonly used flows](https://github.com/karpathy/pytorch-normalizing-flows) (also just days after this post).
 - PyMC3 has a [very helpful notebook](https://docs.pymc.io/notebooks/normalizing_flows_overview.html) showcasing how to work with flows in practice and comparing it to their NUTS-based HMC implementation.
 
-I've also started compiling [a repo of helpful resources on NFs](https://github.com/janosh/awesome-normalizing-flows). Feel free to submit PRs to gather even more sources and advice on this topic.
+> I also started this much more up-to-date [collection on NFs](https://github.com/janosh/awesome-normalizing-flows) that's received an unexpected amount of attention. Feel free to submit PRs to gather even more sources/advice/applications.

static/prism-vsc-dark-plus.css

@@ -27,14 +27,6 @@ pre[class*='language-'] {
   hyphens: none;
 }
 
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
-  text-shadow: none;
-  background: rgba(29, 59, 83, 0.99);
-}
-
 pre[class*='language-']::selection,
 pre[class*='language-'] ::selection,
 code[class*='language-']::selection,

tsconfig.json

@@ -4,7 +4,7 @@
     "strict": true,
     "module": "esnext",
     "target": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
 
     // To have warnings/errors of the Svelte compiler at the correct position,
     // enable source maps by default.