only wrap ElementTile in <a> if passed href prop, else <div>

type element-data.ts as ChemicalElement[]
add missing keys 'cpk-hex' and period to type ChemicalElement
use global CSS to ensure div.periodic-table parent has container-type: inline-size;
increase orbital_period on element detail pages (electrons were too fast for comfort)

changelog.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. Dates are d
 
 <!-- auto-changelog-above -->
 
+#### [v0.1.1](https://github.com/janosh/periodic-table/compare/v0.1.0...v0.1.1)
+
+> 2023-01-03
+
+- only wrap ElementTile in &lt;a&gt; if passed href prop, else &lt;div&gt; [`73a61be`](https://github.com/janosh/periodic-table/commit/73a61be112f4fe1554b9e4e78c2ff65fddb96e35)
+
 #### 0.1.0
 
 > 2023-01-03

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/sveriodic-table",
   "repository": "https://github.com/janosh/sveriodic-table",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",

src/lib/ElementTile.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
   import type { ChemicalElement } from '.'
   import { pretty_num } from './labels'
+  import { last_element } from './stores'
 
   export let element: ChemicalElement
   export let bg_color: string | null = null
   export let show_symbol = true
   export let show_number = true
   export let show_name = true
-  export let value: number | undefined = undefined
+  export let value: number | false | undefined = undefined
   export let style = ``
   export let active = false
+  export let href: string | null = null
 
   $: category = element.category.replaceAll(` `, `-`)
   // background color defaults to category color (initialized in colors.ts, user editable in ColorCustomizer.ts)
 </script>
 
-<div
+<svelte:element
+  this={href ? 'a' : 'div'}
+  {href}
+  data-sveltekit-noscroll
   class="element-tile {category}"
   class:active
+  class:last-active={$last_element === element}
   style:background-color={bg_color ?? `var(--${category}-bg-color)`}
   {style}
   on:mouseenter
@@ -42,10 +48,10 @@
       {element.name}
     </span>
   {/if}
-</div>
+</svelte:element>
 
 <style>
-  div.element-tile {
+  .element-tile {
     position: relative;
     transition: background-color 0.4s;
     aspect-ratio: 1;
@@ -57,13 +63,16 @@
     width: 100%;
     box-sizing: border-box;
   }
-  div.element-tile span {
+  .element-tile span {
     line-height: 1em;
   }
-  div.element-tile.active,
-  div.element-tile:hover {
+  .element-tile.active,
+  .element-tile:hover {
     border: 1px solid white;
   }
+  .last-active {
+    border: 1px dotted white;
+  }
   .atomic-number {
     font-size: 1.1cqw;
     position: absolute;

src/lib/PeriodicTable.svelte

@@ -6,20 +6,22 @@
   import element_data from './element-data'
   import ElementPhoto from './ElementPhoto.svelte'
   import ElementTile from './ElementTile.svelte'
-  import { last_element } from './stores'
 
   export let show_names = true
   export let show_numbers = true
   export let show_symbols = true
   export let show_photo = true
   export let style = ``
-  export let disabled = false // disable hover and click events
+  export let disabled = false // disable hover and click events from updating active_element
   // either array of length 118 (one heat value for each element) or object with
   // element symbol as key and heat value as value
   export let heatmap_values: number[] = []
-  export let color_map: Record<number, string> | null = null
+  // links is either string with element property (name, symbol, number, ...) to use as link,
+  // or object with mapping element symbols to link
+  export let links: keyof ChemicalElement | Record<string, string> | null = null
+  export let color_map: keyof ChemicalElement | Record<number, string> | null = null
   export let log = false
-  export let color_scale: ScaleLinear<number, number, never> | null = null
+  export let color_scale: ScaleLinear<number, string, never> | null = null
   export let active_element: ChemicalElement | null = null
   export let active_category: Category | null = null
 
@@ -48,29 +50,27 @@
   <slot name="inset" />
 
   {#each element_data as element, idx}
-    {@const { column, row, category, name } = element}
-    {@const value = heatmap_values?.length && heatmap_values[idx]}
-    {@const heatmap_color = color_scale?.(value) ?? `transparent`}
+    {@const { column, row, category, name, symbol } = element}
+    {@const value = heatmap_values?.length > 0 && heatmap_values[idx]}
     {@const active =
       active_category === category.replaceAll(` `, `-`) || active_element?.name === name}
-    <a
-      href={name.toLowerCase()}
-      data-sveltekit-noscroll
+    <ElementTile
+      {element}
+      href={links
+        ? typeof links == `string`
+          ? `${element[links]}`.toLowerCase()
+          : links[symbol]
+        : null}
       style="grid-column: {column}; grid-row: {row};"
-      class:last-active={$last_element === element}
-    >
-      <ElementTile
-        {element}
-        show_name={show_names}
-        show_number={show_numbers}
-        show_symbol={show_symbols}
-        {value}
-        bg_color={value != false ? heatmap_color : null}
-        {active}
-        on:mouseenter={set_active_element(element)}
-        on:mouseleave={set_active_element(null)}
-      />
-    </a>
+      show_name={show_names}
+      show_number={show_numbers}
+      show_symbol={show_symbols}
+      {value}
+      bg_color={value != false ? color_scale?.(value) ?? `transparent` : null}
+      {active}
+      on:mouseenter={set_active_element(element)}
+      on:mouseleave={set_active_element(null)}
+    />
   {/each}
   <!-- provide vertical offset for lanthanides + actinides -->
   <div class="spacer" />
@@ -84,6 +84,10 @@
 </div>
 
 <style>
+  :global(:has(div.periodic-table)) {
+    /* needed for gap: 0.3cqw; below to work */
+    container-type: inline-size;
+  }
   div.periodic-table {
     display: grid;
     grid-template-columns: repeat(18, 1fr);
@@ -95,7 +99,4 @@
     grid-row: 8;
     aspect-ratio: 2;
   }
-  div.periodic-table > a.last-active {
-    filter: brightness(110%);
-  }
 </style>

src/lib/element-data.ts

@@ -1,7 +1,10 @@
 // data here is a combination of 2 sources
 // https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json
+
+import type { ChemicalElement } from '$lib'
+
 // https://gist.github.com/robertwb/22aa4dbfb6bcecd94f2176caa912b952
-export default [
+const element_data: ChemicalElement[] = [
   {
     name: `Hydrogen`,
     appearance: `colorless gas`,
@@ -5286,3 +5289,5 @@ export default [
     covalent_radius: null,
   },
 ]
+
+export default element_data

src/lib/index.ts

@@ -22,6 +22,7 @@ export type Category =
   | `actinide`
 
 export type ChemicalElement = {
+  'cpk-hex': string | null
   appearance: string
   atomic_mass: number
   atomic_radius: number
@@ -53,6 +54,7 @@ export type ChemicalElement = {
   nonmetal: boolean | null
   number_of_isotopes: number
   number: number
+  period: number
   phase: 'Gas' | 'Liquid' | 'Solid'
   radioactive: boolean | null
   row: number // != period for lanthanides and actinides

src/routes/+page.svelte

@@ -50,6 +50,7 @@
     bind:color_scale
     bind:active_element={$active_element}
     bind:active_category={$active_category}
+    links="name"
   >
     <TableInset slot="inset">
       {#if $heatmap_key}

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

@@ -81,10 +81,15 @@
 <main>
   <ElementHeading {element} />
 
-  {#if element?.discoverer && element?.year}
+  {#if element?.discoverer || element?.year}
     <p class="discovery">
-      Discovered by <strong>{element.discoverer}</strong> in
-      <strong>{element.year}</strong>
+      Discovered
+      {#if element?.discoverer}
+        by <strong>{element.discoverer}</strong>
+      {/if}
+      {#if typeof element?.year == `number`}
+        in <strong>{element.year}</strong>
+      {/if}
     </p>
   {/if}
 
@@ -118,6 +123,8 @@
       show_photo={false}
       disabled={true}
       style="width: 100%;  max-width: 350px;"
+      links="name"
+      active_element={$active_element}
     />
 
     <table>
@@ -148,7 +155,7 @@
       shells={element.shells}
       name={element.name}
       adapt_size={true}
-      orbital_period={Number(orbiting)}
+      orbital_period={orbiting ? 3 : 0}
       highlight_shell={active_shell}
       on:click={() => (orbiting = !orbiting)}
       style="max-width: 300px;"