add copy buttons to all code fences

src/app.css

@@ -41,7 +41,7 @@ a.btn {
   cursor: pointer;
   border: none;
   border-radius: 3pt;
-  background-color: darkcyan;
+  background-color: teal;
   padding: 2pt 4pt;
   font-size: 12pt;
   line-height: initial;
@@ -72,6 +72,7 @@ pre code {
   font-size: 10pt;
 }
 pre {
+  position: relative;
   border-radius: 4pt;
   background-color: rgba(255, 255, 255, 0.05);
   padding: 1em;

src/routes/+layout.svelte

@@ -1,13 +1,29 @@
 <script lang="ts">
-  import { goto } from '$app/navigation'
+  import { afterNavigate, goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { CmdPalette } from '$lib'
   import { repository } from '$root/package.json'
   import { Footer } from '$site'
   import { demos } from '$site/stores'
-  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