add copy buttons to all code blocks

janosh · May 28, 2023 · 7f3fb5c · 7f3fb5c
1 parent 6f675dd
commit 7f3fb5c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 */