add copy buttons to code fences

fix eslint per-commit hook

.pre-commit-config.yaml

@@ -19,7 +19,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0-alpha.6
+    rev: v3.0.0-alpha.9-for-vscode
     hooks:
       - id: prettier
         args: [--write] # edit files in-place
@@ -36,14 +36,14 @@ repos:
         args: [--ignore-words-list, falsy]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.38.0
+    rev: v8.42.0
     hooks:
       - id: eslint
         types: [file]
-        files: \.(svelte|js|ts)$
+        args: [--fix, --plugin, 'svelte3, @typescript-eslint']
+        files: \.(js|ts|svelte)$
         additional_dependencies:
           - eslint
-          - svelte
           - typescript
           - eslint-plugin-svelte3
           - '@typescript-eslint/eslint-plugin'

readme.md

@@ -37,6 +37,7 @@ More docs to come...
     CodeLinks, // link code fences to Svelte REPL, GitHub or StackBlitz for interactive sandboxing
     Confetti, // let confetti emoji rain across the screen to playfully show some event was triggered
     CopyButton, // add to code fences to allow copying its contents
+    FileDetails, // use HTML <details> to show/hide file contents
     GitHubCorner, // place an animated GitHub icon linking to your repo in the screen corner
     Icon, // used by the other components to render the occasional icon but can also be imported for outside use
     PrevNext, // links to previous and next posts/pages/items in a list

src/app.css

@@ -91,3 +91,20 @@ input[type='number'] {
 :where(h2, h3, h4, h5, h6):hover a[aria-hidden='true'] {
   opacity: 1;
 }
+
+button,
+a.btn {
+  color: var(--text-color);
+  cursor: pointer;
+  border: none;
+  border-radius: 3pt;
+  background-color: teal;
+  padding: 2pt 4pt;
+  line-height: initial;
+  transition: background-color 0.3s;
+}
+button:hover,
+a.btn:hover {
+  color: white;
+  background-color: darkcyan;
+}

src/routes/+layout.svelte

@@ -1,12 +1,28 @@
 <script lang="ts">
-  import { goto } from '$app/navigation'
+  import { afterNavigate, goto } from '$app/navigation'
   import { page } from '$app/stores'
-  import { GitHubCorner } from '$lib'
+  import { CopyButton, GitHubCorner } from '$lib'
   import { repository } from '$root/package.json'
   import { demos } from '$site/stores'
   import { CmdPalette } from 'svelte-multiselect'
   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: 9pt; right: 9pt;`,
+        },
+      })
+    }
+  })
+
   const routes = Object.keys(import.meta.glob(`./**/+page.{svelte,md}`))
 
   const actions = routes.map((filename) => {