replace PrevNextElement.svelte with PrevNext from svelte-zoo

update deps
set tsconfig moduleResolution='bundler'

.github/workflows/gh-pages.yml

@@ -30,7 +30,7 @@ jobs:
           cache-dependency-path: package.json
 
       - name: Install dependencies
-        run: npm install
+        run: npm install --force
 
       - name: Build site
         run: npm run build

.github/workflows/test.yml

@@ -24,7 +24,7 @@ jobs:
 
       - name: Install dependencies
         run: |
-          npm install
+          npm install --force
           npx playwright install chromium
 
       - name: Run tests
@@ -47,7 +47,7 @@ jobs:
 
       - name: Build package and publish to NPM
         run: |
-          npm install
+          npm install --force
           npm run package
           npm publish
         env:

package.json

@@ -31,8 +31,8 @@
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
-    "svelte": "^3.56.0",
-    "svelte-multiselect": "^8.4.0"
+    "svelte": "^3.57.0",
+    "svelte-multiselect": "^8.5.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.31.2",
@@ -44,13 +44,13 @@
     "@types/d3-scale": "^4.0.3",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
-    "@vitest/coverage-c8": "^0.29.2",
-    "eslint": "^8.35.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "@vitest/coverage-c8": "^0.29.3",
+    "eslint": "^8.36.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
-    "jsdom": "^21.1.0",
+    "jsdom": "^21.1.1",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
     "prettier": "^2.8.4",
@@ -59,14 +59,14 @@
     "rehype-katex-svelte": "^1.1.2",
     "rehype-slug": "^5.1.0",
     "remark-math": "3.0.0",
-    "svelte-check": "^3.1.0",
-    "svelte-preprocess": "^5.0.1",
-    "svelte-toc": "^0.5.2",
-    "svelte-zoo": "^0.3.4",
-    "svelte2tsx": "^0.6.3",
-    "typescript": "^4.9.5",
+    "svelte-check": "^3.1.4",
+    "svelte-preprocess": "^5.0.2",
+    "svelte-toc": "^0.5.3",
+    "svelte-zoo": "^0.4.3",
+    "svelte2tsx": "^0.6.10",
+    "typescript": "5.0.1-rc",
     "vite": "^4.1.4",
-    "vitest": "^0.29.2"
+    "vitest": "^0.29.3"
   },
   "keywords": [
     "svelte",

src/lib/ElementTile.svelte

@@ -114,7 +114,7 @@
   }
   .element-tile.active,
   .element-tile:hover {
-    border: 1px solid;
+    border: var(--elem-tile-hover-border, 1px solid);
   }
   .last-active {
     border: 1px dotted;

src/routes/+layout.svelte

@@ -1,29 +1,38 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
+  import { element_data } from '$lib'
   import { repository } from '$root/package.json'
   import { Footer } from '$site'
+  import { demos } from '$site/stores'
   import { CmdPalette } from 'svelte-multiselect'
   import { GitHubCorner } from 'svelte-zoo'
   import '../app.css'
-  import { element_data } from '../lib'
 
-  const file_routes = Object.keys(import.meta.glob(`./**/+page.{svx,svelte,md}`)).map(
+  const routes = Object.keys(import.meta.glob(`./**/+page.{svx,svelte,md}`)).map(
     (filename) => {
       const parts = filename.split(`/`).filter((part) => !part.startsWith(`(`)) // remove hidden route segments
-      return parts.slice(1, -1).join(`/`)
+      return { route: `/${parts.slice(1, -1).join(`/`)}`, filename }
     }
   )
 
+  if (routes.length < 3) {
+    console.error(`Too few demo routes found: ${routes.length}`)
+  }
+
+  $demos = routes
+    .filter(({ filename }) => filename.includes(`/(demos)/`))
+    .map(({ route }) => route)
+
   const actions = element_data
     .map(({ name }) => name)
-    .concat(file_routes.filter((name) => !name.includes(`[slug]`)))
+    .concat(routes.map(({ route }) => route))
     .map((name) => {
       return { label: name, action: () => goto(name.toLowerCase()) }
     })
 </script>
 
-<CmdPalette {actions} span_style="text-transform: capitalize;" />
+<CmdPalette {actions} placeholder="Go to..." span_style="text-transform: capitalize;" />
 
 <GitHubCorner href={repository} />
 

src/routes/+layout.ts

@@ -1,9 +1,8 @@
 import { redirect } from '@sveltejs/kit'
-import type { LayoutLoad } from './$types'
 
 export const prerender = true
 
-export const load: LayoutLoad = ({ url }) => {
+export const load = ({ url }) => {
   if (url.pathname.endsWith(`.md`)) {
     throw redirect(307, url.pathname.replace(/\.md$/, ``))
   }

src/routes/[slug]/+page.server.ts

@@ -1,21 +1,12 @@
 import { element_data } from '$lib'
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 
-export const load: PageServerLoad = ({ params }) => {
+export const load = ({ params }) => {
   const { slug } = params
 
-  const idx = element_data.findIndex((elem) => elem.name.toLowerCase() === slug)
-  if (idx === -1) {
-    throw error(404, `Page '${slug}' not found`)
-  }
-  // wrap around start/end of array
-  const prev_idx = (idx - 1 + element_data.length) % element_data.length
-  const next_idx = (idx + 1) % element_data.length
+  const element = element_data.find((elem) => elem.name.toLowerCase() === slug)
 
-  const prev_elem = element_data[prev_idx]
-  const next_elem = element_data[next_idx]
-  const element = element_data[idx]
+  if (!element) throw error(404, `Page '${slug}' not found`)
 
-  return { prev_elem, element, next_elem }
+  return { element }
 }

src/routes/[slug]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { page } from '$app/stores'
   import type { ChemicalElement } from '$lib'
   import {
     BohrAtom,
@@ -13,10 +14,10 @@
   } from '$lib'
   import { pretty_num, property_labels } from '$lib/labels'
   import { active_element, heatmap_key } from '$lib/stores'
-  import { PrevNextElement } from '$site'
-  import type { PageData, Snapshot } from './$types'
+  import ElementTile from '$root/src/lib/ElementTile.svelte'
+  import { PrevNext } from 'svelte-zoo'
 
-  export let data: PageData
+  export let data
 
   $: [$active_element, element] = [data.element, data.element]
 
@@ -67,7 +68,7 @@
   let color_scale: string
   let selected: string[]
 
-  export const snapshot: Snapshot = {
+  export const snapshot = {
     capture: () => ({ selected }),
     restore: (values) => ({ selected } = values),
   }
@@ -179,7 +180,29 @@
     {/each}
   </section>
 
-  <PrevNextElement prev={data.prev_elem} next={data.next_elem} />
+  <PrevNext
+    items={element_data.map((elem) => [elem.name.toLowerCase(), elem])}
+    current={$page.url.pathname.slice(1)}
+    let:item
+    let:kind
+  >
+    <a href={item.name.toLowerCase()} style="display: flex; flex-direction: column;">
+      <h3>
+        {#if kind == `next`}
+          Next
+          <Icon icon="carbon:next-filled" inline />
+        {:else}
+          <Icon icon="carbon:previous-filled" inline />Previous
+        {/if}
+      </h3>
+      <ElementPhoto element={item} style="width: 200px; border-radius: 4pt;" />
+      <ElementTile
+        element={item}
+        style="width: 70px; position: absolute; bottom: 0;"
+        --elem-tile-hover-border="1px solid transparent"
+      />
+    </a>
+  </PrevNext>
 </main>
 
 <style>

src/routes/acknowledgements/+page.svx

@@ -1,5 +1,5 @@
 <script>
-  import img_sources from '../../../static/img-sources.json';
+  import img_sources from '$static/img-sources.json';
   import { dev } from '$app/environment'
   import { homepage } from '$root/package.json'
 </script>
@@ -14,7 +14,7 @@
 
 ## Element Images
 
-Big thanks to the element image providers listed below. Each image caption links back to the source website.
+Big thanks to the element image providers listed below. Each image caption links back to the source website. See [`fetch-elem-images.ts`](https://github.com/janosh/elementari/blob/-/src/fetch-elem-images.ts) for details.
 
 <ul class="elem-img">
 {#each Object.entries(img_sources) as [key, href]}

src/site/DemoNav.svelte

@@ -1,14 +1,9 @@
 <script lang="ts">
   import { page } from '$app/stores'
+  import { demos } from './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])
+  export let routes = $demos
 
-  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`
     return undefined

src/site/index.ts

@@ -1,3 +1,2 @@
 export { default as DemoNav } from './DemoNav.svelte'
 export { default as Footer } from './Footer.svelte'
-export { default as PrevNextElement } from './PrevNextElement.svelte'

src/site/stores.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export const demos = writable<string[]>([])

svelte.config.js

@@ -31,6 +31,7 @@ export default {
     alias: {
       $root: `.`,
       $site: `src/site`,
+      $static: `static`,
     },
 
     prerender: {

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.