feat: move to sveltekit

Replacing svelte-router based routing. This commit makes a minimal
set of changes required to get things functional. We'll follow up
with other changes to move things around, make them more
idiomatically sveltekit, and start leveraging some of its features
a little better.

packages/core/package.json

@@ -33,7 +33,6 @@
     "micromark-util-types": "^1.0.2",
     "rehype-katex": "^6.0.3",
     "rehype-stringify": "^9.0.3",
-    "rehype-truncate": "^1.2.2",
     "remark": "^14.0.2",
     "remark-math": "^5.1.1",
     "remark-parse": "^10.0.1",
@@ -53,4 +52,4 @@
     "peggy": "^3.0.2",
     "ts-pegjs": "^4.1.0"
   }
-}
+}

packages/core/src/Bundle.ts

@@ -56,6 +56,7 @@ type FetchOpts = {
   branch: string
   host?: string
   etag?: string
+  fetch?: (input: RequestInfo, init?: RequestInit) => Promise<Response>
 }
 
 export function bundleUrl({ branch, host = defaultHost }: FetchOpts): string {
@@ -69,7 +70,8 @@ export async function fetch(
   if (opts.etag) {
     headers.append('If-None-Match', opts.etag)
   }
-  const response = await window.fetch(bundleUrl(opts), {
+  const fetch = opts.fetch || window.fetch
+  const response = await fetch(bundleUrl(opts), {
     method: 'GET',
     headers,
   })

packages/core/src/Parser.ts

@@ -4,12 +4,12 @@ import remarkParse from 'remark-parse'
 import remarkMath from 'remark-math'
 import remarkRehype from 'remark-rehype'
 import rehypeKatex from 'rehype-katex'
-import rehypeTruncate from 'rehype-truncate'
 import rehypeStringify from 'rehype-stringify'
 
 import { Linkers } from './Parser/types.js'
 import { links } from './Parser/links.js'
 import { references } from './Parser/references.js'
+import { truncate as truncator } from './Parser/truncate.js'
 import { unnest } from './Parser/unnest.js'
 
 export type Options = {
@@ -56,7 +56,7 @@ export function parser({
       // Convert math nodes to hast
       .use(rehypeKatex)
       // Optionally trim mdast to a minimal preview
-      .use(rehypeTruncate, {
+      .use(truncator, {
         maxChars: 100,
         disable: !truncate,
         ignoreTags: ['math', 'inline-math'],

packages/core/src/Parser/truncate.ts

@@ -0,0 +1,56 @@
+import { Root } from 'mdast'
+import { Transformer } from 'unified'
+
+type Opts = {
+  disable?: boolean
+  ellipses?: string
+  maxChars?: number
+  ignoreTags?: string[]
+}
+
+// Adapted from https://github.com/luk707/rehype-truncate
+export function truncate({
+  disable = false,
+  ellipses = '\u2026',
+  ignoreTags = [],
+  maxChars = 120,
+}: Opts = {}): Transformer<Root, Root> {
+  return truncator
+
+  function truncator(tree: Root) {
+    if (!disable) {
+      truncateNode(tree)
+    }
+  }
+
+  function truncateNode(node: any, tf = 0) {
+    let foundText = tf
+
+    if (node.type === 'text') {
+      foundText += node.value.length
+      if (foundText >= maxChars) {
+        node.value = `${node.value.slice(
+          0,
+          node.value.length - (foundText - maxChars),
+        )}${ellipses}`
+        return maxChars
+      }
+    }
+
+    if (node.type === 'root' || node.type === 'element') {
+      if (node.type === 'element' && ignoreTags.includes(node.tagName)) {
+        return foundText
+      }
+      for (let i = 0; i < node.children.length; i++) {
+        if (foundText === maxChars) {
+          node.children.splice(i, 1)
+          i--
+          continue
+        }
+        foundText = truncateNode(node.children[i], foundText)
+      }
+    }
+
+    return foundText
+  }
+}

packages/core/vite.config.ts

@@ -11,6 +11,10 @@ export default defineConfig({
     },
     outDir: './dist',
   },
+  // See https://stackoverflow.com/questions/75701724
+  resolve: {
+    preserveSymlinks: true,
+  },
   test: {
     coverage: {
       lines: 93.84,

packages/viewer/.gitignore

@@ -1,3 +1,4 @@
+/.svelte-kit
 /coverage/
 /cypress/screenshots/
 /cypress/videos/

packages/viewer/package.json

@@ -27,12 +27,13 @@
     "jquery": "1.9.1",
     "rehype-katex": "^6.0.3",
     "remark-rehype": "^10.1.0",
-    "svelte-routing": "1.6.0",
     "unified": "^10.1.2",
     "unist-util-is": "^5.2.1",
     "unist-util-visit": "^4.1.2"
   },
   "devDependencies": {
+    "@sveltejs/adapter-cloudflare": "^2.3.2",
+    "@sveltejs/kit": "^1.22.6",
     "@sveltejs/vite-plugin-svelte": "^2.2.0",
     "@tsconfig/svelte": "^3.0.0",
     "@types/debug": "^4.1.7",
@@ -46,4 +47,4 @@
     "svelte-preprocess": "^5.0.3",
     "tslib": "^2.5.0"
   }
-}
+}

packages/viewer/src/app.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+
+	  <title>π-Base</title>
+
+	  <meta name="author" content="James Dabbs" />
+	  <meta name="description"
+	  	content="A community database of topological theorems and spaces, with powerful search and automated proof deduction." />
+	  <meta property="og:type" content="website" />
+	  <meta property="og:site_name" content="π-Base" />
+	  <meta property="og:url" name="twitter:url" content="https://topology.pi-base.org" />
+	  <meta property="og:title" name="twitter:title" content="π-Base" />
+	  <meta property="og:description" name="twitter:description"
+	  	content="A community database of topological theorems and spaces, with powerful search and automated proof deduction." />
+	  <meta property="og:image" content="%sveltekit.assets%/pi-base.png" />
+	  <meta name="twitter:site" content="π-Base" />
+	  <meta name="twitter:creator" content="@jamesdabbs" />
+
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+
+	  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
+	  <link rel='stylesheet' href='/global.css'>
+
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

packages/viewer/src/components/Dev/Explore.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { Link } from 'svelte-routing'
   import context from '../../context'
   import Log from './Log.svelte'
 
@@ -33,13 +32,9 @@
     <tr>
       <td colspan="2">
         <Log>Log to Console</Log>
-        <Link
-          type="button"
-          getProps={() => ({ class: 'btn btn-outline-dark' })}
-          to="/dev/preview"
-        >
+        <a type="button" class="btn btn-outline-dark" href="/dev/preview">
           Editor Preview
-        </Link>
+        </a>
         <button type="button" class="btn btn-outline-dark" on:click={reset}>
           Reset
         </button>

packages/viewer/src/components/Home.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { Link } from 'svelte-routing'
   import Cite from './Shared/Cite.svelte'
 
   import { contributingUrl } from '../constants'
@@ -12,21 +11,21 @@
     <div class="ml-3 mt-4">
       <p>
         ➜ Search spaces by name/description:
-        <Link to="/spaces?text=compactification" class="text-info"
-          >compactifications</Link
+        <a href="/spaces?text=compactification" class="text-info"
+          >compactifications</a
         >
       </p>
       <p>
         ➜ Search spaces by properties:
-        <Link
-          to="/spaces?q=compact%20%2B%20connected%20%2B%20t_2%20%2B%20~metrizable"
-          class="text-info">non-metric continua</Link
+        <a
+          href="/spaces?q=compact%20%2B%20connected%20%2B%20t_2%20%2B%20~metrizable"
+          class="text-info">non-metric continua</a
         >
       </p>
       <p class="mb-0">
         ➜ Find counterexamples:
-        <Link to="/theorems/T000057" class="text-info"
-          >first countable spaces need not be locally pseudometrizable</Link
+        <a href="/theorems/T000057" class="text-info"
+          >first countable spaces need not be locally pseudometrizable</a
         >
       </p>
     </div>

packages/viewer/src/components/Nav.svelte

@@ -3,8 +3,6 @@
   import { contributingUrl, mainBranch } from '../constants'
   import Branch from './Shared/Icons/Branch.svelte'
 
-  import Link from './Nav/Link.svelte'
-
   const { showDev, source } = context()
 
   $: onMain = $source.branch === mainBranch
@@ -13,23 +11,23 @@
 
 <nav class="navbar navbar-expand-lg navbar-{bg} bg-{bg}">
   <div class="container">
-    <Link brand to="/">π-Base</Link>
+    <a class="navbar-brand" href="/">π-Base</a>
 
     <div class="navbar-nav mr-auto">
-      <Link to="/spaces">Explore</Link>
-      <Link to="/spaces/all">Spaces</Link>
-      <Link to="/properties">Properties</Link>
-      <Link to="/theorems">Theorems</Link>
+      <a class="nav-link" href="/spaces">Explore</a>
+      <a class="nav-link" href="/spaces/all">Spaces</a>
+      <a class="nav-link" href="/properties">Properties</a>
+      <a class="nav-link" href="/theorems">Theorems</a>
     </div>
 
     <div class="navbar-nav">
-      <Link to="/dev">
+      <a class="nav-link" href="/dev">
         {#if showDev || !onMain}
           <Branch /> {$source.branch}
         {:else}
           Advanced
         {/if}
-      </Link>
+      </a>
       <a class="nav-link" href={contributingUrl}>Contribute</a>
     </div>
   </div>

packages/viewer/src/components/Properties/List.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-  import { derived } from 'svelte/store'
+  import { derived, type Readable } from 'svelte/store'
 
-  import context from '../../context'
   import { list } from '../../stores'
 
   import { Filter, Link, Title, Typeset } from '../Shared'
+  import type { Collection, Property } from 'src/models'
+
+  export let properties: Readable<Collection<Property>>
 
   const index = list(
-    derived(context().properties, ps => ps.all),
+    derived(properties, ps => ps.all),
     {
       weights: { name: 0.7, aliases: 0.7, description: 0.3 },
       queryParam: 'filter',