feat: Copy code button (#175)

* Push

* Mobile appropriate, visible at all times

* Allow for deprecated case

* Minor fix

* Fix

* FIx positioning

Author: PuruVJ

.changeset/itchy-bikes-allow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': minor
+---
+
+Copy code button

packages/site-kit/package.json

@@ -23,19 +23,19 @@
 		"svelte-local-storage-store": "^0.5.0"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^1.21.0",
-		"@sveltejs/package": "^2.1.0",
-		"@types/marked": "^5.0.0",
-		"@types/node": "^20.3.3",
+		"@sveltejs/kit": "^1.22.3",
+		"@sveltejs/package": "^2.2.0",
+		"@types/marked": "^5.0.1",
+		"@types/node": "^20.4.2",
 		"@types/prettier": "^2.7.3",
 		"flexsearch": "^0.7.31",
 		"magic-string": "^0.30.1",
-		"marked": "^5.1.0",
+		"marked": "^5.1.1",
 		"prettier": "^2.8.8",
 		"shiki-twoslash": "^3.1.2",
-		"svelte": "^4.0.4",
+		"svelte": "^4.0.5",
 		"typescript": "^5.1.6",
-		"vite": "^4.3.9"
+		"vite": "^4.4.4"
 	},
 	"publishConfig": {
 		"access": "public"

packages/site-kit/src/lib/actions/copy-code-descendants.js

@@ -0,0 +1,57 @@
+import DocsCopyCodeButton from '../docs/DocsCopyCodeButton.svelte';
+import { page } from '$app/stores';
+
+const map = new WeakMap();
+
+/** @type {import('svelte/action').Action} */
+export const copy_code_descendants = (node) => {
+	/** @type {NodeListOf<Element>} */
+	let code_blocks;
+
+	function update() {
+		code_blocks = node.querySelectorAll('.shiki');
+
+		// Add a button to each code block
+		for (const block of code_blocks) {
+			const parent_class = block.parentElement?.classList.toString() ?? '';
+
+			// Exclude the ts-block properties and stuff
+			if (/ts-block/.test(parent_class)) continue;
+
+			const code = block.querySelector('code')?.innerText ?? '';
+			if (!code) continue;
+
+			// This is to make sure that snippets with title get the button on their heading area
+			const target = /code-block/.test(parent_class) ? block.parentElement : block;
+			if (!target) continue;
+
+			map.set(
+				block,
+				new DocsCopyCodeButton({
+					target: target,
+					props: {
+						code
+					}
+				})
+			);
+		}
+	}
+
+	function destroy() {
+		for (const block of code_blocks) {
+			map.get(block)?.$destroy();
+			map.delete(block);
+		}
+	}
+
+	// Page changed. Update again
+	const unsubscribe = page.subscribe(update);
+
+	return {
+		update,
+		destroy() {
+			destroy();
+			unsubscribe();
+		}
+	};
+};

packages/site-kit/src/lib/actions/index.js

@@ -1,4 +1,5 @@
 export { click_outside } from './click-outside.js';
+export { copy_code_descendants } from './copy-code-descendants.js';
 export { focus_outside } from './focus-outside.js';
 export { focusable_children, trap } from './focus.js';
 export { root_scroll } from './root-scroll.js';

packages/site-kit/src/lib/components/Icons.svelte

@@ -199,5 +199,19 @@ Provides a list of svg icons that can be referenced through the `Icon` component
 				d="M224 44h-64a43.86 43.86 0 0 0-32 13.85A43.86 43.86 0 0 0 96 44H32a20 20 0 0 0-20 20v128a20 20 0 0 0 20 20h64a20 20 0 0 1 20 20a12 12 0 0 0 24 0a20 20 0 0 1 20-20h64a20 20 0 0 0 20-20V64a20 20 0 0 0-20-20ZM96 188H36V68h60a20 20 0 0 1 20 20v104.81A43.79 43.79 0 0 0 96 188Zm124 0h-60a43.71 43.71 0 0 0-20 4.83V88a20 20 0 0 1 20-20h60Z"
 			/>
 		</symbol>
+
+		<symbol viewBox="0 0 24 24" id="copy-to-clipboard-empty">
+			<path
+				fill="currentColor"
+				d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Zm0-2h9V4H9v12Zm0 0V4v12Z"
+			/>
+		</symbol>
+
+		<symbol viewBox="0 0 24 24" id="copy-to-clipboard-filled">
+			<path
+				fill="currentColor"
+				d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Z"
+			/>
+		</symbol>
 	</svg>
 </div>

packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte

@@ -0,0 +1,94 @@
+<script>
+	import Icon from '$lib/components/Icon.svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
+
+	/** @type {string} */
+	export let code;
+
+	let copying = false;
+
+	function copy() {
+		try {
+			navigator.clipboard.writeText(code);
+		} catch {
+			/**
+			 * This is the fallback deprecated way of copying text to the clipboard. Only runs if it can't find the clipboard API.
+			 * Taken from https://github.com/ghostdevv/svelte-copy/blob/main/src/lib/copy.ts
+			 */
+			const element = document.createElement('input');
+
+			element.type = 'text';
+			element.disabled = true;
+
+			element.style.cssText = `position: fixed;z-index: -100;pointer-events: none;opacity: 0;`;
+
+			element.value = code;
+
+			document.body.appendChild(element);
+
+			element.click();
+			element.select();
+			document.execCommand('copy');
+
+			document.body.removeChild(element);
+		} finally {
+			copying = true;
+
+			setTimeout(() => {
+				copying = false;
+			}, 1000);
+		}
+	}
+</script>
+
+<button id="copy-to-clipboard-button" on:click={copy}>
+	{#if copying}
+		<span transition:fade={{ easing: cubicOut, duration: 400 }}>
+			<Icon name="copy-to-clipboard-filled" />
+		</span>
+	{:else}
+		<span transition:fade={{ easing: cubicOut, duration: 400 }}>
+			<Icon name="copy-to-clipboard-empty" />
+		</span>
+	{/if}
+</button>
+
+<style>
+	:global(.code-block #copy-to-clipboard-button) {
+		top: 5px;
+	}
+
+	button {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+
+		display: grid;
+		place-items: center;
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr;
+
+		opacity: 0.8;
+
+		height: 2.4rem;
+		width: 2.4rem;
+
+		overflow: hidden;
+
+		transition: opacity 0.1s ease-in-out;
+	}
+
+	button:hover {
+		opacity: 1;
+	}
+
+	span {
+		grid-column: 1 / span 1;
+		grid-row: 1 / span 1;
+	}
+
+	button :global(svg) {
+		stroke-width: 0 !important;
+	}
+</style>

packages/site-kit/src/lib/styles/text.css

@@ -33,6 +33,7 @@
 }
 
 .text :where(pre) {
+	position: relative;
 	margin: 1em 0;
 	width: 100%;
 	padding: 1rem;
@@ -42,14 +43,17 @@
 	color: var(--sk-code-base);
 	border-radius: var(--sk-border-radius);
 	font-size: var(--sk-text-s);
-	overflow-x: auto;
+	overflow-x: hidden;
 }
 
 .text :where(pre code) {
+	display: block;
 	padding: 0;
 	margin: 0;
 	top: 0;
+	width: 100%;
 	background: transparent;
+	overflow-x: auto;
 }
 
 .text :where(p code) {