use redirect in layout.ts instead of ugly DOM href surgery to forward readme links to GH repo

update Footer

Author: janosh

examples/mp_bimodal_e_form.ipynb

@@ -58,7 +58,10 @@
     "fields = [\"material_id\", \"formula_pretty\", e_form_col, \"energy_type\"]\n",
     "\n",
     "e_form_all_mp = MPRester(use_document_model=False).thermo.search(\n",
-    "    fields=fields, thermo_types=None\n",
+    "    fields=fields,\n",
+    "    # thermo_types=None,\n",
+    "    thermo_types=[\"GGA_GGA+U_R2SCAN\"],\n",
+    "    chunk_size=200,\n",
     ")\n",
     "\n",
     "df_e_form = pd.DataFrame(e_form_all_mp).set_index(\"material_id\")\n",

readme.md

@@ -26,7 +26,9 @@ pip install pymatviz
 
 ## API Docs
 
-See <https://janosh.github.io/pymatviz/api>.
+See the [/api] page.
+
+[/api]: https://janosh.github.io/pymatviz/api
 
 ## Usage
 

site/package.json

@@ -16,25 +16,25 @@
   },
   "devDependencies": {
     "@iconify/svelte": "^3.0.1",
-    "@sveltejs/adapter-static": "^1.0.2",
-    "@sveltejs/kit": "^1.0.13",
+    "@sveltejs/adapter-static": "^1.0.4",
+    "@sveltejs/kit": "^1.1.1",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "eslint": "^8.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "eslint": "^8.32.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
     "highlight.js": "^11.7.0",
     "mdsvex": "^0.10.6",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
     "svelte": "^3.55.1",
     "svelte-check": "^3.0.2",
     "svelte-preprocess": "^5.0.0",
     "svelte-toc": "^0.5.2",
-    "svelte-zoo": "^0.2.0",
+    "svelte-zoo": "^0.2.2",
     "svelte2tsx": "^0.6.0",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",

site/src/app.css

@@ -14,8 +14,8 @@
   --toc-min-width: 16em;
   --toc-active-bg: darkcyan;
 
-  --ghc-color: var(--night);
-  --ghc-bg: white;
+  --zoo-github-corner-color: var(--night);
+  --zoo-github-corner-bg: white;
 }
 body {
   background: var(--night);

site/src/lib/Footer.svelte

@@ -4,10 +4,9 @@
 </script>
 
 <footer>
-  Maintained by Janosh Riebesell
+  Questions/feedback?
+  <a href="{repository}/issues"><Icon icon="octicon:mark-github" inline /></a>
   <a href="mailto:[email protected]"><Icon icon="mdi:email" inline /></a>
-  on
-  <a href={repository}><Icon icon="octicon:mark-github" inline /></a>
 </footer>
 
 <style>

site/src/routes/+error.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores'
-  import { homepage, name } from '../../package.json'
+  import { homepage, name } from '$site/package.json'
 
   let online: boolean
 </script>

site/src/routes/+layout.svelte

@@ -2,24 +2,13 @@
   import { page } from '$app/stores'
   import Footer from '$lib/Footer.svelte'
   import { repository } from '$site/package.json'
-  import { onMount } from 'svelte'
   import Toc from 'svelte-toc'
   import { GitHubCorner } from 'svelte-zoo'
   import '../app.css'
 
   $: headingSelector = `main :is(${
     $page.url.pathname === `/api` ? `h1, h2, h3, h4` : `h2`
   }):not(.toc-exclude)`
-
-  const site_url = `https://janosh.github.io/pymatviz`
-  onMount(() => {
-    for (const link of [
-      ...document.querySelectorAll(`a[href^='${site_url}']`),
-    ] as HTMLAnchorElement[]) {
-      link.href = link.href.replace(site_url, ``)
-      link.text = link.text.replace(site_url, ``)
-    }
-  })
 </script>
 
 <Toc {headingSelector} breakpoint={1250} warnOnEmpty={false} />

site/src/routes/+layout.ts

@@ -1 +1,11 @@
+import { redirect } from '@sveltejs/kit'
+import type { LayoutLoad } from './$types'
+
 export const prerender = true
+
+export const load: LayoutLoad = ({ url }) => {
+  if (url.pathname.match(`^/(examples|pymatviz)`)) {
+    const gh_file_url = `https://github.com/janosh/pymatviz/blob/main/${url.pathname}`
+    throw redirect(307, gh_file_url)
+  }
+}

site/src/routes/+page.svelte

@@ -1,16 +1,5 @@
 <script lang="ts">
   import Readme from '$root/readme.md'
-  import { repository } from '$site/package.json'
-  import { onMount } from 'svelte'
-
-  onMount(() => {
-    for (const link of [
-      ...document.querySelectorAll(`a:has(code)`),
-    ] as HTMLAnchorElement[]) {
-      const path = link.href.split(`/`).slice(-2).join(`/`)
-      link.href = `${repository}/blob/main/${path}`
-    }
-  })
 </script>
 
 <main>

site/src/routes/api/+page.svelte

@@ -1,6 +1,6 @@
-<h1 class="toc-exclude">API</h1>
-
 <main>
+  <h1 class="toc-exclude">API</h1>
+
   {#each Object.values(import.meta.glob(`./*.md`, { eager: true })) as file}
     <svelte:component this={file?.default} />
   {/each}

site/svelte.config.js

@@ -22,12 +22,18 @@ const rehypePlugins = [
   ],
 ]
 
+const { default: pkg } = await import(`./package.json`, {
+  assert: { type: `json` },
+})
+
 /** @type {import('@sveltejs/kit').Config} */
 export default {
   extensions: [`.svelte`, `.svx`, `.md`],
 
   preprocess: [
-    preprocess(),
+    // replace readme links to docs with site-internal links
+    // (which don't require browser navigation)
+    preprocess({ replace: [[pkg.homepage, ``]] }),
     mdsvex({
       rehypePlugins,
       extensions: [`.svx`, `.md`],
@@ -37,8 +43,10 @@ export default {
   kit: {
     adapter: adapter(),
 
-    prerender: {
-      handleHttpError: `warn`,
+    alias: {
+      $src: `./src`,
+      $site: `.`,
+      $root: `..`,
     },
   },
 }

site/vite.config.ts

@@ -1,20 +1,11 @@
 import { sveltekit } from '@sveltejs/kit/vite'
-import { resolve } from 'path'
 import type { UserConfig } from 'vite'
 
 const vite_config: UserConfig = {
   plugins: [sveltekit()],
 
-  resolve: {
-    alias: {
-      $src: resolve(`./src`),
-      $site: resolve(`.`),
-      $root: resolve(`..`),
-    },
-  },
-
   server: {
-    fs: { allow: [`../..`] }, // needed to import from $root
+    fs: { allow: [`..`] }, // needed to import from $root
     port: 3000,
   },