From 7f3fb5c8d043309d097a400af7e267436e819880 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sun, 28 May 2023 07:55:38 -0700
Subject: [PATCH] add copy buttons to all code blocks

---
 src/app.css                           |  1 +
 src/lib/colors.ts                     |  2 +-
 src/routes/(demos)/structure/+page.md |  2 +-
 src/routes/+layout.svelte             | 20 ++++++++++++++++++--
 static/prism-vsc-dark-plus.css        |  2 --
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index 736ff54..56cb52e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -79,6 +79,7 @@ pre code {
   display: inline-block;
 }
 pre {
+  position: relative;
   border-radius: 4pt;
   font-size: 8pt;
   background-color: rgba(255, 255, 255, 0.05);
diff --git a/src/lib/colors.ts b/src/lib/colors.ts
index 8f434a5..38e0fee 100644
--- a/src/lib/colors.ts
+++ b/src/lib/colors.ts
@@ -127,7 +127,7 @@ export const jmol = {
   Bh: [224, 0, 56],
   Hs: [230, 0, 46],
   Mt: [235, 0, 38],
-} as const // Record<ElementSymbol, [number, number, number]>
+} as const
 
 export const vesta = {
   Ac: [112, 171, 250],
diff --git a/src/routes/(demos)/structure/+page.md b/src/routes/(demos)/structure/+page.md
index 105a903..934cecf 100644
--- a/src/routes/(demos)/structure/+page.md
+++ b/src/routes/(demos)/structure/+page.md
@@ -10,7 +10,7 @@
   let width
   let height
   $: href = `https://materialsproject.org/materials/${mp_id[0]}`
-  $: structure = structures.find((struct) => struct.id === mp_id[0])
+  $: structure = structures.find((struct) => struct.id === mp_id[0]) || {}
 </script>
 
 <form>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 17d4445..d3291e3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,14 +1,30 @@
 <script lang="ts">
-  import { goto } from '$app/navigation'
+  import { afterNavigate, 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 { CopyButton, GitHubCorner } from 'svelte-zoo'
   import '../app.css'
 
+  afterNavigate(() => {
+    for (const node of document.querySelectorAll('pre > code')) {
+      // skip if <pre> already contains a button (presumably for copy)
+      const pre = node.parentElement
+      if (!pre || pre.querySelector(`button`)) continue
+
+      new CopyButton({
+        target: pre,
+        props: {
+          content: node.textContent ?? '',
+          style: 'position: absolute; top: 1ex; right: 1ex;',
+        },
+      })
+    }
+  })
+
   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
diff --git a/static/prism-vsc-dark-plus.css b/static/prism-vsc-dark-plus.css
index e5dd1c1..0130638 100644
--- a/static/prism-vsc-dark-plus.css
+++ b/static/prism-vsc-dark-plus.css
@@ -41,14 +41,12 @@ pre[class*='language-'] {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
-  background: #1e1e1e;
 }
 
 :not(pre) > code[class*='language-'] {
   padding: 0.1em 0.3em;
   border-radius: 0.3em;
   color: #db4c69;
-  background: #f9f2f4;
 }
 
 /* Tokens */