record element image provider to static/img-sources.json in src/fetch…

…-elem-images.ts

add some more fallback URLs
thank element image providers on /acknowledgements page
fix element name Copernicium->Copernicum in src/lib/element-data.ts

src/fetch-elem-images.ts

@@ -8,45 +8,72 @@ import elements from './lib/element-data.ts'
 fs.mkdirSync(`./static/elements`, { recursive: true })
 
 const fallback_urls: Record<string, string> = {
-  '55 cesium': `https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Cesium.jpg/2560px-Cesium.jpg`,
-  '105 dubnium': `https://cdn.dribbble.com/users/3013/screenshots/10679769/media/8ad2ce46f162ae93ba7ba464482f65c8.png`,
-  '106 seaborgium': `https://periodiske-system.dk/img/images/lowRes/106.jpg`,
-  '107 bohrium': `https://periodiske-system.dk/img/images/lowRes/107.jpg`,
-  '108 hassium': `https://periodiske-system.dk/img/images/lowRes/108.jpg`,
-  '109 meitnerium': `https://periodiske-system.dk/img/images/lowRes/109.jpg`,
-  '110 darmstadtium': `https://periodiske-system.dk/img/images/lowRes/110.jpg`,
-  '111 roentgenium': `https://periodiske-system.dk/img/images/lowRes/111.jpg`,
+  '55-cesium': `https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Cesium.jpg/2560px-Cesium.jpg`,
+  '105-dubnium': `https://cdn.dribbble.com/users/3013/screenshots/10679769/media/8ad2ce46f162ae93ba7ba464482f65c8.png`,
+  '106-seaborgium': `https://periodiske-system.dk/img/images/lowRes/106.jpg`,
+  '107-bohrium': `https://periodiske-system.dk/img/images/lowRes/107.jpg`,
+  '108-hassium': `https://i0.wp.com/periodic-table.com/wp-content/uploads/2018/12/Hassium.png?w=225&ssl=1`,
+  '109-meitnerium': `https://www.rsc-cdn.org/www.rsc.org/periodic-table/content/Images/Elements/Meitnerium-L.jpg`,
+
+  // '109-meitnerium': `https://cdn1.byjus.com/wp-content/uploads/2018/08/Meitnerium-2.jpg`, // lower res but but looks more like raw crystal
+  '110-darmstadtium': `https://cdn1.byjus.com/wp-content/uploads/2018/08/Darmstadtium-2.jpg`,
+  '111-roentgenium': `https://cdn1.byjus.com/wp-content/uploads/2018/08/Roentgenium-2.jpg`,
+  '112-copernicum': `https://cdn1.byjus.com/wp-content/uploads/2018/08/Copernicum-2.jpg`,
 }
 
-async function download_elem_image(name: string, number: number) {
-  const url = `https://images-of-elements.com/s/${name}.jpg`
+async function download_elem_image(num_name: string) {
+  // default URL, this is where most of the element images come from
+  let url = `https://images-of-elements.com/s/${num_name.split(`-`)[1]}.jpg`
   let response = await fetch(url)
 
   if (!response.ok) {
-    const fallback_url = fallback_urls[`${number} ${name}`]
-    if (fallback_url) response = await fetch(fallback_url)
+    url = fallback_urls[num_name]
+    if (url) response = await fetch(url)
   }
 
   if (!response.ok) {
     return console.error(
-      `Error downloading image for ${number} ${name}: ${response.statusText}`
+      `Error downloading image for ${num_name}: ${response.statusText}`
     )
   }
   // check we got jpg or png mime type
   const content_type = response.headers.get(`content-type`)
   if (!content_type?.startsWith(`image/`)) {
     return console.error(
-      `Error downloading image for ${number} ${name}: unexpected content type ${content_type}`
+      `Error downloading image for ${num_name}: unexpected content type ${content_type}`
     )
   }
 
-  const buffer = await response.arrayBuffer()
-  fs.promises.writeFile(
-    `./static/elements/${number}-${name}.jpg`,
-    new Uint8Array(buffer)
-  )
+  const buffer = new Uint8Array(await response.arrayBuffer())
+  fs.writeFileSync(`./static/elements/${num_name}.jpg`, buffer)
+
+  return url
 }
 
+const action: 'report' | 'download' | 're-download' = `re-download`
+if (action.endsWith(`download`)) console.log(`Downloading images...`)
+if (action === `report`) console.log(`Missing images`)
+
 for (const { name, number } of elements) {
-  await download_elem_image(name.toLowerCase(), number)
+  const num_name = `${number}-${name.toLowerCase()}`
+  const have_img = fs.existsSync(`./static/elements/${num_name}.jpg`)
+
+  if (!have_img || action === `re-download`) {
+    if (action === `report`) {
+      console.log(num_name)
+    } else if (action.endsWith(`download`)) {
+      // download image
+      const url = await download_elem_image(num_name)
+
+      // update image source file
+      const img_src_out = `./static/img-sources.json`
+
+      const img_urls = fs.existsSync(img_src_out)
+        ? JSON.parse(fs.readFileSync(img_src_out, `utf8`))
+        : {}
+
+      img_urls[num_name] = url
+      fs.writeFileSync(img_src_out, JSON.stringify(img_urls, null, 2) + `\n`)
+    }
+  }
 }

src/lib/ElementPhoto.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { dev } from '$app/environment'
   import { homepage } from '$root/package.json'
   import { Icon, type ChemicalElement } from '.'
 
@@ -16,7 +17,7 @@
 
 {#if name && number}
   <img
-    src="{homepage}/{file}"
+    src="{dev ? '' : homepage}/{file}"
     alt={name}
     on:error={() => (hidden = true)}
     {style}

src/lib/element-data.ts

@@ -4981,7 +4981,7 @@ const element_data: ChemicalElement[] = [
     covalent_radius: null,
   },
   {
-    name: `Copernicium`,
+    name: `Copernicum`,
     appearance: null,
     atomic_mass: 285,
     category: `transition metal`,
@@ -4992,7 +4992,7 @@ const element_data: ChemicalElement[] = [
     period: 7,
     phase: `Solid`,
     spectral_img: null,
-    summary: `Copernicium is a chemical element with symbol Cn and atomic number 112. It is an extremely radioactive synthetic element that can only be created in a laboratory. The most stable known isotope, copernicium-285, has a half-life of approximately 29 seconds, but it is possible that this copernicium isotope may have a nuclear isomer with a longer half-life, 8.9 min.`,
+    summary: `Copernicum is a chemical element with symbol Cn and atomic number 112. It is an extremely radioactive synthetic element that can only be created in a laboratory. The most stable known isotope, copernicum-285, has a half-life of approximately 29 seconds, but it is possible that this copernicum isotope may have a nuclear isomer with a longer half-life, 8.9 min.`,
     symbol: `Cn`,
     shells: [2, 8, 18, 32, 32, 18, 2],
     electron_configuration: `1s2 2s2 2p6 3s2 3p6 4s2 3d10 4p6 5s2 4d10 5p6 6s2 4f14 5d10 6p6 7s2 5f14 6d10`,

src/routes/acknowledgements/+page.svx

@@ -1,19 +1,53 @@
+<script>
+  import img_sources from '../../../static/img-sources.json';
+  import { dev } from '$app/environment'
+  import { homepage } from '$root/package.json'
+</script>
+
+<main>
+
 # 🙏 &thinsp; Acknowledgements
 
 - Element properties in `src/lib/element-data.ts` were combined from [`Bowserinator/Periodic-Table-JSON`](https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json) under Creative Commons license and [`robertwb/Periodic Table of Elements.csv`](https://gist.github.com/robertwb/22aa4dbfb6bcecd94f2176caa912b952) (unlicensed).
 - Thanks to [Images of Elements](https://images-of-elements.com) for providing photos of elemental crystals and glowing excited gases.
 - Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to display animated Bohr model atoms and inset a scatter plot into the periodic table to visualize the periodic nature of elemental properties.
 
+## Element Images
+
+Big thanks to the element image providers listed below. Each image caption links back to the source website.
+
+<ul class="elem-img">
+{#each Object.entries(img_sources) as [key, href]}
+  {@const [number, name] = key.split('-')}
+  <li>
+    <a href="/{name}"><img src="{dev ? '' : homepage}/elements/{key}.jpg" alt={name}></a>
+    <a {href}>{number} {name}</a>
+  </li>
+{/each}
+</ul>
+</main>
+
 <style>
   h1 {
     text-align: center;
+    margin: 2em;
+  }
+  ul:first-of-type > li {
+    margin: 1em 0;
   }
-  ul {
-    line-height: 3ex;
-    max-width: 50em;
-    margin: 3em auto;
+  ul.elem-img {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
+    gap: 1em;
+    list-style: none;
+    padding: 0;
+  }
+  ul.elem-img > li {
+    text-transform: capitalize;
+    text-align: center;
   }
-  ul li {
-    margin-bottom: 1em;
+  ul.elem-img > li > a > img {
+    width: 100%;
+    border-radius: 3pt;
   }
 </style>

static/img-sources.json

@@ -0,0 +1,113 @@
+{
+  "1-hydrogen": "https://images-of-elements.com/s/hydrogen.jpg",
+  "2-helium": "https://images-of-elements.com/s/helium.jpg",
+  "3-lithium": "https://images-of-elements.com/s/lithium.jpg",
+  "4-beryllium": "https://images-of-elements.com/s/beryllium.jpg",
+  "5-boron": "https://images-of-elements.com/s/boron.jpg",
+  "6-carbon": "https://images-of-elements.com/s/carbon.jpg",
+  "7-nitrogen": "https://images-of-elements.com/s/nitrogen.jpg",
+  "8-oxygen": "https://images-of-elements.com/s/oxygen.jpg",
+  "9-fluorine": "https://images-of-elements.com/s/fluorine.jpg",
+  "10-neon": "https://images-of-elements.com/s/neon.jpg",
+  "11-sodium": "https://images-of-elements.com/s/sodium.jpg",
+  "12-magnesium": "https://images-of-elements.com/s/magnesium.jpg",
+  "13-aluminium": "https://images-of-elements.com/s/aluminium.jpg",
+  "14-silicon": "https://images-of-elements.com/s/silicon.jpg",
+  "15-phosphorus": "https://images-of-elements.com/s/phosphorus.jpg",
+  "16-sulfur": "https://images-of-elements.com/s/sulfur.jpg",
+  "17-chlorine": "https://images-of-elements.com/s/chlorine.jpg",
+  "18-argon": "https://images-of-elements.com/s/argon.jpg",
+  "19-potassium": "https://images-of-elements.com/s/potassium.jpg",
+  "20-calcium": "https://images-of-elements.com/s/calcium.jpg",
+  "21-scandium": "https://images-of-elements.com/s/scandium.jpg",
+  "22-titanium": "https://images-of-elements.com/s/titanium.jpg",
+  "23-vanadium": "https://images-of-elements.com/s/vanadium.jpg",
+  "24-chromium": "https://images-of-elements.com/s/chromium.jpg",
+  "25-manganese": "https://images-of-elements.com/s/manganese.jpg",
+  "26-iron": "https://images-of-elements.com/s/iron.jpg",
+  "27-cobalt": "https://images-of-elements.com/s/cobalt.jpg",
+  "28-nickel": "https://images-of-elements.com/s/nickel.jpg",
+  "29-copper": "https://images-of-elements.com/s/copper.jpg",
+  "30-zinc": "https://images-of-elements.com/s/zinc.jpg",
+  "31-gallium": "https://images-of-elements.com/s/gallium.jpg",
+  "32-germanium": "https://images-of-elements.com/s/germanium.jpg",
+  "33-arsenic": "https://images-of-elements.com/s/arsenic.jpg",
+  "34-selenium": "https://images-of-elements.com/s/selenium.jpg",
+  "35-bromine": "https://images-of-elements.com/s/bromine.jpg",
+  "36-krypton": "https://images-of-elements.com/s/krypton.jpg",
+  "37-rubidium": "https://images-of-elements.com/s/rubidium.jpg",
+  "38-strontium": "https://images-of-elements.com/s/strontium.jpg",
+  "39-yttrium": "https://images-of-elements.com/s/yttrium.jpg",
+  "40-zirconium": "https://images-of-elements.com/s/zirconium.jpg",
+  "41-niobium": "https://images-of-elements.com/s/niobium.jpg",
+  "42-molybdenum": "https://images-of-elements.com/s/molybdenum.jpg",
+  "43-technetium": "https://images-of-elements.com/s/technetium.jpg",
+  "44-ruthenium": "https://images-of-elements.com/s/ruthenium.jpg",
+  "45-rhodium": "https://images-of-elements.com/s/rhodium.jpg",
+  "46-palladium": "https://images-of-elements.com/s/palladium.jpg",
+  "47-silver": "https://images-of-elements.com/s/silver.jpg",
+  "48-cadmium": "https://images-of-elements.com/s/cadmium.jpg",
+  "49-indium": "https://images-of-elements.com/s/indium.jpg",
+  "50-tin": "https://images-of-elements.com/s/tin.jpg",
+  "51-antimony": "https://images-of-elements.com/s/antimony.jpg",
+  "52-tellurium": "https://images-of-elements.com/s/tellurium.jpg",
+  "53-iodine": "https://images-of-elements.com/s/iodine.jpg",
+  "54-xenon": "https://images-of-elements.com/s/xenon.jpg",
+  "55-cesium": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Cesium.jpg/2560px-Cesium.jpg",
+  "56-barium": "https://images-of-elements.com/s/barium.jpg",
+  "57-lanthanum": "https://images-of-elements.com/s/lanthanum.jpg",
+  "58-cerium": "https://images-of-elements.com/s/cerium.jpg",
+  "59-praseodymium": "https://images-of-elements.com/s/praseodymium.jpg",
+  "60-neodymium": "https://images-of-elements.com/s/neodymium.jpg",
+  "61-promethium": "https://images-of-elements.com/s/promethium.jpg",
+  "62-samarium": "https://images-of-elements.com/s/samarium.jpg",
+  "63-europium": "https://images-of-elements.com/s/europium.jpg",
+  "64-gadolinium": "https://images-of-elements.com/s/gadolinium.jpg",
+  "65-terbium": "https://images-of-elements.com/s/terbium.jpg",
+  "66-dysprosium": "https://images-of-elements.com/s/dysprosium.jpg",
+  "67-holmium": "https://images-of-elements.com/s/holmium.jpg",
+  "68-erbium": "https://images-of-elements.com/s/erbium.jpg",
+  "69-thulium": "https://images-of-elements.com/s/thulium.jpg",
+  "70-ytterbium": "https://images-of-elements.com/s/ytterbium.jpg",
+  "71-lutetium": "https://images-of-elements.com/s/lutetium.jpg",
+  "72-hafnium": "https://images-of-elements.com/s/hafnium.jpg",
+  "73-tantalum": "https://images-of-elements.com/s/tantalum.jpg",
+  "74-tungsten": "https://images-of-elements.com/s/tungsten.jpg",
+  "75-rhenium": "https://images-of-elements.com/s/rhenium.jpg",
+  "76-osmium": "https://images-of-elements.com/s/osmium.jpg",
+  "77-iridium": "https://images-of-elements.com/s/iridium.jpg",
+  "78-platinum": "https://images-of-elements.com/s/platinum.jpg",
+  "79-gold": "https://images-of-elements.com/s/gold.jpg",
+  "80-mercury": "https://images-of-elements.com/s/mercury.jpg",
+  "81-thallium": "https://images-of-elements.com/s/thallium.jpg",
+  "82-lead": "https://images-of-elements.com/s/lead.jpg",
+  "83-bismuth": "https://images-of-elements.com/s/bismuth.jpg",
+  "84-polonium": "https://images-of-elements.com/s/polonium.jpg",
+  "85-astatine": "https://images-of-elements.com/s/astatine.jpg",
+  "86-radon": "https://images-of-elements.com/s/radon.jpg",
+  "87-francium": "https://images-of-elements.com/s/francium.jpg",
+  "88-radium": "https://images-of-elements.com/s/radium.jpg",
+  "89-actinium": "https://images-of-elements.com/s/actinium.jpg",
+  "90-thorium": "https://images-of-elements.com/s/thorium.jpg",
+  "91-protactinium": "https://images-of-elements.com/s/protactinium.jpg",
+  "92-uranium": "https://images-of-elements.com/s/uranium.jpg",
+  "93-neptunium": "https://images-of-elements.com/s/neptunium.jpg",
+  "94-plutonium": "https://images-of-elements.com/s/plutonium.jpg",
+  "95-americium": "https://images-of-elements.com/s/americium.jpg",
+  "96-curium": "https://images-of-elements.com/s/curium.jpg",
+  "97-berkelium": "https://images-of-elements.com/s/berkelium.jpg",
+  "98-californium": "https://images-of-elements.com/s/californium.jpg",
+  "99-einsteinium": "https://images-of-elements.com/s/einsteinium.jpg",
+  "100-fermium": "https://images-of-elements.com/s/fermium.jpg",
+  "101-mendelevium": "https://images-of-elements.com/s/mendelevium.jpg",
+  "102-nobelium": "https://images-of-elements.com/s/nobelium.jpg",
+  "103-lawrencium": "https://images-of-elements.com/s/lawrencium.jpg",
+  "104-rutherfordium": "https://images-of-elements.com/s/rutherfordium.jpg",
+  "105-dubnium": "https://cdn.dribbble.com/users/3013/screenshots/10679769/media/8ad2ce46f162ae93ba7ba464482f65c8.png",
+  "106-seaborgium": "https://periodiske-system.dk/img/images/lowRes/106.jpg",
+  "107-bohrium": "https://periodiske-system.dk/img/images/lowRes/107.jpg",
+  "108-hassium": "https://i0.wp.com/periodic-table.com/wp-content/uploads/2018/12/Hassium.png?w=225&ssl=1",
+  "109-meitnerium": "https://www.rsc-cdn.org/www.rsc.org/periodic-table/content/Images/Elements/Meitnerium-L.jpg",
+  "110-darmstadtium": "https://cdn1.byjus.com/wp-content/uploads/2018/08/Darmstadtium-2.jpg",
+  "111-roentgenium": "https://cdn1.byjus.com/wp-content/uploads/2018/08/Roentgenium-2.jpg"
+}