add __layout + __error pages

src/labels.ts

@@ -0,0 +1,12 @@
+import { Element } from './types'
+
+export const heatmap_labels: Record<string, keyof Element> = {
+  'Atomic Mass (u)': `atomic_mass`,
+  'Atomic Radius (Å)': `atomic_radius`,
+  'Covalent Radius (Å)': `covalent_radius`,
+  Electronegativity: `electronegativity`,
+  'Density (solid: g/cm³, gas: g/liter)': `density`,
+  'Boiling Point (K)': `boiling_point`,
+  'Melting Point (K)': `melting_point`,
+  'First Ionization Energy (eV)': `first_ionization`,
+}

src/routes/__error.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" context="module">
+  import { dev } from '$app/env'
+  import type { ErrorLoad } from '@sveltejs/kit'
+
+  export const load: ErrorLoad = ({ error, status, params: { slug } }) => ({
+    props: { error, status, slug },
+  })
+</script>
+
+<script lang="ts">
+  export let status: number
+  export let error: Error
+  export let slug: string
+</script>
+
+<svelte:head>
+  <title>{status}</title>
+</svelte:head>
+
+<div>
+  {#if status === 404}
+    <h1>⛔ &nbsp;{status}: Page '{slug}' not found</h1>
+    <p>
+      Back to
+      <a sveltekit:prefetch href="/">landing page</a>.
+    </p>
+  {:else}
+    <h1>⛔ &nbsp;{status}</h1>
+  {/if}
+
+  {#if dev && error?.stack}
+    <h2>Stack Trace</h2>
+    <pre>{error.stack}</pre>
+  {/if}
+</div>
+
+<style>
+  div {
+    font-size: 1.2em;
+    max-width: 45em;
+    padding: 5em 3em 1em;
+    margin: auto;
+    text-align: center;
+  }
+  h2 {
+    margin-top: 2em;
+  }
+  p {
+    text-align: center;
+    max-width: 35em;
+    margin: auto;
+  }
+  pre {
+    overflow: scroll;
+    font-size: 0.9em;
+    white-space: pre-wrap;
+    background: var(--accentBg);
+    padding: 5pt 1em;
+    border-radius: 3pt;
+  }
+</style>

src/routes/__layout.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import GitHubCorner from 'svelte-github-corner'
+  import '../app.css'
+</script>
+
+<GitHubCorner href="https://github.com/janosh/periodic-table" />
+
+<slot />
+
+<footer>
+  <a href="https://github.com/janosh/periodic-table/blob/main/license">
+    MIT License 2022
+  </a>
+</footer>
+
+<style>
+  :global(:root) {
+    --ghc-color: var(--page-bg);
+    --ghc-bg: white;
+    --sms-options-bg: black;
+    --sms-max-width: 22em;
+    --sms-border: 1px dotted teal;
+    --sms-focus-border: 1px dotted cornflowerblue;
+  }
+  :global(div.multiselect) {
+    margin: auto;
+  }
+  :global(div.multiselect input::placeholder) {
+    opacity: 0.7;
+    padding: 1ex;
+  }
+  footer {
+    margin: 6em 0 0;
+    text-align: center;
+  }
+</style>

src/routes/index.svelte

@@ -1,75 +1,34 @@
 <script lang="ts">
-  import GitHubCorner from 'svelte-github-corner'
   import Select from 'svelte-multiselect'
   import '../app.css'
+  import { heatmap_labels } from '../labels'
   import Table from '../lib/PeriodicTable.svelte'
+  import { heatmap } from '../stores'
   import { Element } from '../types'
 
   let selected_heatmap: (keyof Element)[] = []
   let windowWidth: number
 
-  const heatmap_options: Record<string, keyof Element> = {
-    'Atomic Mass (u)': `atomic_mass`,
-    'Atomic Radius (Å)': `atomic_radius`,
-    'Covalent Radius (Å)': `covalent_radius`,
-    Electronegativity: `electronegativity`,
-    'Density (solid: g/cm³, gas: g/liter)': `density`,
-    'Boiling Point (K)': `boiling_point`,
-    'Melting Point (K)': `melting_point`,
-    'First Ionization Energy (eV)': `first_ionization`,
-  }
-  $: heatmap_name = heatmap_options[selected_heatmap[0]] ?? null
+  $: $heatmap = heatmap_labels[selected_heatmap[0]] ?? null
 </script>
 
 <svelte:window bind:innerWidth={windowWidth} />
 
-<GitHubCorner href="https://github.com/janosh/periodic-table" />
-
-<main>
-  <h1>Periodic Table of Elements</h1>
-
-  <Select
-    options={Object.keys(heatmap_options)}
-    maxSelect={1}
-    bind:selected={selected_heatmap}
-    placeholder="Select a heat map"
-  />
+<h1>Periodic Table of Elements</h1>
 
-  <Table show_names={windowWidth > 1000} {heatmap_name} />
-</main>
+<Select
+  options={Object.keys(heatmap_labels)}
+  maxSelect={1}
+  bind:selected={selected_heatmap}
+  placeholder="Select a heat map"
+/>
 
-<footer>
-  <a href="https://github.com/janosh/periodic-table/blob/main/license">
-    MIT License 2022
-  </a>
-</footer>
+<Table show_names={windowWidth > 1000} />
 
 <style>
-  main {
-    width: 100%;
-  }
-  :global(:root) {
-    --ghc-color: var(--page-bg);
-    --ghc-bg: white;
-    --sms-options-bg: black;
-    --sms-max-width: 22em;
-    --sms-border: 1px dotted teal;
-    --sms-focus-border: 1px dotted cornflowerblue;
-  }
-  :global(div.multiselect) {
-    margin: auto;
-  }
-  :global(div.multiselect input::placeholder) {
-    opacity: 0.8;
-    padding: 1ex;
-  }
   h1 {
     text-align: center;
     line-height: 1.1;
     font-size: clamp(20pt, 5.5vw, 50pt);
   }
-  footer {
-    margin: 6em 0 0;
-    text-align: center;
-  }
 </style>