feat: Copy code button (#8995)

* Push

* Bump site-kit

* Add headers to primary snippets

* Update deps

* Bump deos

* redploy

* Back to normal

* Push

* Bump deps

* site: fix rendering of promise in deprecation warning (#9191)

* copy: true

* Bump site-kit

* Use cache

documentation/docs/02-template-syntax/03-logic-blocks.md

@@ -5,14 +5,17 @@ title: Logic blocks
 ## {#if ...}
 
 ```svelte
+<!--- copy: false  --->
 {#if expression}...{/if}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#if expression}...{:else if expression}...{/if}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#if expression}...{:else}...{/if}
 ```
 
@@ -41,22 +44,27 @@ Additional conditions can be added with `{:else if expression}`, optionally endi
 ## {#each ...}
 
 ```svelte
+<!--- copy: false  --->
 {#each expression as name}...{/each}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#each expression as name, index}...{/each}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#each expression as name (key)}...{/each}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#each expression as name, index (key)}...{/each}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#each expression as name}...{:else}...{/each}
 ```
 
@@ -125,18 +133,22 @@ Since Svelte 4 it is possible to iterate over iterables like `Map` or `Set`. Ite
 ## {#await ...}
 
 ```svelte
+<!--- copy: false  --->
 {#await expression}...{:then name}...{:catch name}...{/await}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#await expression}...{:then name}...{/await}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#await expression then name}...{/await}
 ```
 
 ```svelte
+<!--- copy: false  --->
 {#await expression catch name}...{/await}
 ```
 
@@ -186,6 +198,7 @@ Similarly, if you only want to show the error state, you can omit the `then` blo
 ## {#key ...}
 
 ```svelte
+<!--- copy: false  --->
 {#key expression}...{/key}
 ```
 

documentation/docs/02-template-syntax/04-special-tags.md

@@ -5,6 +5,7 @@ title: Special tags
 ## {@html ...}
 
 ```svelte
+<!--- copy: false --->
 {@html expression}
 ```
 
@@ -24,10 +25,12 @@ The expression should be valid standalone HTML — `{@html "<div>"}content{@html
 ## {@debug ...}
 
 ```svelte
+<!--- copy: false --->
 {@debug}
 ```
 
 ```svelte
+<!--- copy: false --->
 {@debug var1, var2, ..., varN}
 ```
 
@@ -65,6 +68,7 @@ The `{@debug}` tag without any arguments will insert a `debugger` statement that
 ## {@const ...}
 
 ```svelte
+<!--- copy: false --->
 {@const assignment}
 ```
 

documentation/docs/02-template-syntax/05-element-directives.md

@@ -7,10 +7,12 @@ As well as attributes, elements can have _directives_, which control the element
 ## on:_eventname_
 
 ```svelte
+<!--- copy: false --->
 on:eventname={handler}
 ```
 
 ```svelte
+<!--- copy: false --->
 on:eventname|modifiers={handler}
 ```
 
@@ -72,7 +74,6 @@ If the `on:` directive is used without a value, the component will _forward_ the
 It's possible to have multiple event listeners for the same event:
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	let counter = 0;
 	function increment() {
@@ -91,6 +92,7 @@ It's possible to have multiple event listeners for the same event:
 ## bind:_property_
 
 ```svelte
+<!--- copy: false --->
 bind:property={variable}
 ```
 
@@ -186,6 +188,8 @@ Elements with the `contenteditable` attribute support the following bindings:
 
 There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
 
+<!-- for some reason puts the comment and html on same line -->
+<!-- prettier-ignore -->
 ```svelte
 <div contenteditable="true" bind:innerHTML={html} />
 ```
@@ -273,13 +277,13 @@ Block-level elements have 4 read-only bindings, measured using a technique simil
 ## bind:group
 
 ```svelte
+<!--- copy: false --->
 bind:group={variable}
 ```
 
 Inputs that work together can use `bind:group`.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	let tortilla = 'Plain';
 
@@ -304,13 +308,13 @@ Inputs that work together can use `bind:group`.
 ## bind:this
 
 ```svelte
+<!--- copy: false --->
 bind:this={dom_node}
 ```
 
 To get a reference to a DOM node, use `bind:this`.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	import { onMount } from 'svelte';
 
@@ -329,10 +333,12 @@ To get a reference to a DOM node, use `bind:this`.
 ## class:_name_
 
 ```svelte
+<!--- copy: false --->
 class:name={value}
 ```
 
 ```svelte
+<!--- copy: false --->
 class:name
 ```
 
@@ -393,14 +399,17 @@ When `style:` directives are combined with `style` attributes, the directives wi
 ## use:_action_
 
 ```svelte
+<!--- copy: false --->
 use:action
 ```
 
 ```svelte
+<!--- copy: false --->
 use:action={parameters}
 ```
 
 ```ts
+/// copy: false
 // @noErrors
 action = (node: HTMLElement, parameters: any) => {
 	update?: (parameters: any) => void,
@@ -411,7 +420,6 @@ action = (node: HTMLElement, parameters: any) => {
 Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	/** @type {import('svelte/action').Action}  */
 	function foo(node) {
@@ -433,7 +441,6 @@ An action can have a parameter. If the returned value has an `update` method, it
 > Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	export let bar;
 
@@ -461,30 +468,37 @@ Read more in the [`svelte/action`](/docs/svelte-action) page.
 ## transition:_fn_
 
 ```svelte
+<!--- copy: false --->
 transition:fn
 ```
 
 ```svelte
+<!--- copy: false --->
 transition:fn={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 transition:fn|global
 ```
 
 ```svelte
+<!--- copy: false --->
 transition:fn|global={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 transition:fn|local
 ```
 
 ```svelte
+<!--- copy: false --->
 transition:fn|local={params}
 ```
 
 ```js
+/// copy: false
 // @noErrors
 transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
 	delay?: number,
@@ -544,7 +558,6 @@ The `t` argument passed to `css` is a value between `0` and `1` after the `easin
 The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	import { elasticOut } from 'svelte/easing';
 
@@ -644,50 +657,62 @@ An element with transitions will dispatch the following events in addition to an
 ## in:_fn_/out:_fn_
 
 ```svelte
+<!--- copy: false --->
 in:fn
 ```
 
 ```svelte
+<!--- copy: false --->
 in:fn={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 in:fn|global
 ```
 
 ```svelte
+<!--- copy: false --->
 in:fn|global={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 in:fn|local
 ```
 
 ```svelte
+<!--- copy: false --->
 in:fn|local={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:fn
 ```
 
 ```svelte
+<!--- copy: false --->
 out:fn={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:fn|global
 ```
 
 ```svelte
+<!--- copy: false --->
 out:fn|global={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:fn|local
 ```
 
 ```svelte
+<!--- copy: false --->
 out:fn|local={params}
 ```
 
@@ -704,14 +729,17 @@ Unlike with `transition:`, transitions applied with `in:` and `out:` are not bid
 ## animate:_fn_
 
 ```svelte
+<!--- copy: false --->
 animate:name
 ```
 
 ```svelte
+<!--- copy: false --->
 animate:name={params}
 ```
 
 ```js
+/// copy: false
 // @noErrors
 animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
 	delay?: number,
@@ -723,6 +751,7 @@ animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) =>
 ```
 
 ```ts
+/// copy: false
 // @noErrors
 DOMRect {
 	bottom: number,
@@ -772,7 +801,6 @@ The function is called repeatedly _before_ the animation begins, with different
 <!-- TODO: Types -->
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	import { cubicOut } from 'svelte/easing';
 
@@ -806,7 +834,6 @@ A custom animation function can also return a `tick` function, which is called _
 > If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	import { cubicOut } from 'svelte/easing';
 

documentation/docs/02-template-syntax/06-component-directives.md

@@ -5,28 +5,24 @@ title: Component directives
 ## on:_eventname_
 
 ```svelte
+<!--- copy: false --->
 on:eventname={handler}
 ```
 
 Components can emit events using [`createEventDispatcher`](/docs/svelte#createeventdispatcher) or by forwarding DOM events.
 
 ```svelte
-<!-- SomeComponent.svelte -->
 <script>
-  import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 </script>
 
 <!-- programmatic dispatching -->
-<button on:click={() => dispatch('hello')}>
-  one
-</button>
+<button on:click={() => dispatch('hello')}> one </button>
 
 <!-- declarative event forwarding -->
-<button on:click>
-  two
-</button>
+<button on:click> two </button>
 ```
 
 Listening for component events looks the same as listening for DOM events:
@@ -44,6 +40,7 @@ As with DOM events, if the `on:` directive is used without a value, the event wi
 ## --style-props
 
 ```svelte
+<!--- copy: false --->
 --style-props="anycssvalue"
 ```
 
@@ -78,7 +75,6 @@ For SVG namespace, the example above desugars into using `<g>` instead:
 Svelte's CSS Variables support allows for easily themeable components:
 
 ```svelte
-<!-- Slider.svelte -->
 <style>
 	.potato-slider-rail {
 		background-color: var(--rail-color, var(--theme-color, 'purple'));
@@ -118,6 +114,7 @@ While Svelte props are reactive without binding, that reactivity only flows down
 ## bind:this
 
 ```svelte
+<!--- copy: false --->
 bind:this={component_instance}
 ```
 

documentation/docs/02-template-syntax/07-special-elements.md

@@ -198,7 +198,6 @@ If `this` is the name of a [void element](https://developer.mozilla.org/en-US/do
 <script>
 	let tag = 'div';
 
-	/** @type {(e: MouseEvent) => void} */
 	export let handler;
 </script>
 

documentation/docs/03-runtime/02-svelte-store.md

@@ -61,9 +61,7 @@ Note that the value of a `writable` is lost when it is destroyed, for example wh
 
 Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
 
-```js
-<!--- file: App.svelte --->
-// ---cut---
+```ts
 import { readable } from 'svelte/store';
 
 const time = readable(new Date(), (set) => {
@@ -114,7 +112,7 @@ The callback can set a value asynchronously by accepting a second argument, `set
 
 In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` or `update` is first called. If no initial value is specified, the store's initial value will be `undefined`.
 
-```js
+```ts
 // @filename: ambient.d.ts
 import { type Writable } from 'svelte/store';
 
@@ -129,13 +127,17 @@ export {};
 // ---cut---
 import { derived } from 'svelte/store';
 
-const delayed = derived(a, ($a, set) => {
-	setTimeout(() => set($a), 1000);
-}, 2000);
+const delayed = derived(
+	a,
+	($a, set) => {
+		setTimeout(() => set($a), 1000);
+	},
+	2000
+);
 
 const delayedIncrement = derived(a, ($a, set, update) => {
 	set($a);
-	setTimeout(() => update(x => x + 1), 1000);
+	setTimeout(() => update((x) => x + 1), 1000);
 	// every time $a produces a value, this produces two
 	// values, $a immediately and then $a + 1 a second later
 });
@@ -143,7 +145,7 @@ const delayedIncrement = derived(a, ($a, set, update) => {
 
 If you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.
 
-```js
+```ts
 // @filename: ambient.d.ts
 import { type Writable } from 'svelte/store';
 
@@ -224,7 +226,7 @@ Generally, you should read the value of a store by subscribing to it and using t
 
 > This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
 
-```js
+```ts
 // @filename: ambient.d.ts
 import { type Writable } from 'svelte/store';
 

documentation/docs/03-runtime/04-svelte-transition.md

@@ -9,14 +9,17 @@ The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `
 > EXPORT_SNIPPET: svelte/transition#fade
 
 ```svelte
+<!--- copy: false --->
 transition:fade={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 in:fade={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:fade={params}
 ```
 
@@ -45,14 +48,17 @@ You can see the `fade` transition in action in the [transition tutorial](https:/
 > EXPORT_SNIPPET: svelte/transition#blur
 
 ```svelte
+<!--- copy: false --->
 transition:blur={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 in:blur={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:blur={params}
 ```
 
@@ -81,14 +87,17 @@ Animates a `blur` filter alongside an element's opacity.
 > EXPORT_SNIPPET: svelte/transition#fly
 
 ```svelte
+<!--- copy: false --->
 transition:fly={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 in:fly={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:fly={params}
 ```
 
@@ -126,14 +135,17 @@ You can see the `fly` transition in action in the [transition tutorial](https://
 > EXPORT_SNIPPET: svelte/transition#slide
 
 ```svelte
+<!--- copy: false --->
 transition:slide={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 in:slide={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:slide={params}
 ```
 
@@ -165,14 +177,17 @@ Slides an element in and out.
 > EXPORT_SNIPPET: svelte/transition#scale
 
 ```svelte
+<!--- copy: false --->
 transition:scale={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 in:scale={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:scale={params}
 ```
 
@@ -204,14 +219,17 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
 > EXPORT_SNIPPET: svelte/transition#draw
 
 ```svelte
+<!--- copy: false --->
 transition:draw={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 in:draw={params}
 ```
 
 ```svelte
+<!--- copy: false --->
 out:draw={params}
 ```
 

documentation/docs/03-runtime/05-svelte-animate.md

@@ -9,6 +9,7 @@ The `svelte/animate` module exports one function for use with Svelte [animations
 > EXPORT_SNIPPET: svelte/animate#flip
 
 ```svelte
+<!--- copy: false --->
 animate:flip={params}
 ```
 

documentation/docs/03-runtime/07-svelte-action.md

@@ -5,7 +5,6 @@ title: svelte/action
 Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	/** @type {import('svelte/action').Action}  */
 	function foo(node) {
@@ -27,7 +26,6 @@ An action can have a parameter. If the returned value has an `update` method, it
 > Don't worry that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	/** @type {string} */
 	export let bar;
@@ -56,7 +54,6 @@ An action can have a parameter. If the returned value has an `update` method, it
 Sometimes actions emit custom events and apply custom attributes to the element they are applied to. To support this, actions typed with `Action` or `ActionReturn` type can have a last parameter, `Attributes`:
 
 ```svelte
-<!--- file: App.svelte --->
 <script>
 	/**
 	 * @type {import('svelte/action').Action<HTMLDivElement, { prop: any }, { 'on:emit': (e: CustomEvent<string>) => void }>}

documentation/docs/04-compiler-and-api/01-svelte-compiler.md

@@ -90,7 +90,7 @@ Each `markup`, `script` or `style` function must return an object (or a Promise
 
 > Preprocessor functions should return a `map` object whenever possible or else debugging becomes harder as stack traces can't link to the original code correctly.
 
-```js
+```ts
 // @filename: ambient.d.ts
 declare global {
 	var source: string;
@@ -128,6 +128,7 @@ const { code } = await preprocess(
 If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) and [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
 
 ```ts
+/// file: preprocess-sass.js
 // @filename: ambient.d.ts
 declare global {
 	var source: string;
@@ -204,6 +205,7 @@ Multiple preprocessors can be used together. The output of the first becomes the
 > In Svelte 3, all `markup` functions ran first, then all `script` and then all `style` preprocessors. This order was changed in Svelte 4.
 
 ```js
+/// file: multiple-preprocessor.js
 // @errors: 2322
 // @filename: ambient.d.ts
 declare global {
@@ -255,6 +257,7 @@ The `walk` function provides a way to walk the abstract syntax trees generated b
 The walker takes an abstract syntax tree to walk and an object with two optional methods: `enter` and `leave`. For each node, `enter` is called (if present). Then, unless `this.skip()` is called during `enter`, each of the children are traversed, and then `leave` is called on the node.
 
 ```js
+/// file: compiler-walk.js
 // @filename: ambient.d.ts
 declare global {
 	var ast: import('estree').Node;

documentation/docs/04-compiler-and-api/02-client-side-component-api.md

@@ -67,6 +67,7 @@ Whereas children of `target` are normally left alone, `hydrate: true` will cause
 The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.
 
 ```ts
+/// file: index.js
 // @filename: ambient.d.ts
 import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 
@@ -150,6 +151,7 @@ Causes the `callback` function to be called whenever the component dispatches an
 A function is returned that will remove the event listener when called.
 
 ```ts
+/// file: index.js
 // @filename: ambient.d.ts
 import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 
@@ -231,6 +233,7 @@ If a component is compiled with `accessors: true`, each instance will have gette
 By default, `accessors` is `false`, unless you're compiling as a custom element.
 
 ```js
+/// file: index.js
 // @filename: ambient.d.ts
 import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 

documentation/docs/05-misc/03-typescript.md

@@ -144,17 +144,17 @@ Since Svelte version 4.2 / `svelte-check` version 3.5 / VS Code extension versio
 
 ```ts
 /// file: additional-svelte-typings.d.ts
-import { HTMLButtonAttributes } from 'svelte/elements'
+import { HTMLButtonAttributes } from 'svelte/elements';
 
 declare module 'svelte/elements' {
-    export interface SvelteHTMLElements {
-        'custom-button': HTMLButtonAttributes;
-    }
+	export interface SvelteHTMLElements {
+		'custom-button': HTMLButtonAttributes;
+	}
 
 	// allows for more granular control over what element to add the typings to
-    export interface HTMLButtonAttributes {
-        'veryexperimentalattribute'?: string;
-    }
+	export interface HTMLButtonAttributes {
+		veryexperimentalattribute?: string;
+	}
 }
 
 export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented

sites/svelte.dev/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.4.15",
-    "@supabase/supabase-js": "^2.33.1",
+    "@supabase/supabase-js": "^2.33.2",
     "@sveltejs/repl": "0.6.0",
     "cookie": "^0.5.0",
     "devalue": "^4.3.2",
@@ -29,31 +29,31 @@
   "devDependencies": {
     "@resvg/resvg-js": "^2.4.1",
     "@sveltejs/adapter-vercel": "^3.0.3",
-    "@sveltejs/kit": "^1.24.0",
-    "@sveltejs/site-kit": "6.0.0-next.36",
-    "@sveltejs/vite-plugin-svelte": "^2.4.5",
-    "@types/cookie": "^0.5.1",
-    "@types/node": "^20.5.3",
+    "@sveltejs/kit": "^1.24.1",
+    "@sveltejs/site-kit": "6.0.0-next.45",
+    "@sveltejs/vite-plugin-svelte": "^2.4.6",
+    "@types/cookie": "^0.5.2",
+    "@types/node": "^20.5.9",
     "browserslist": "^4.21.10",
     "degit": "^2.8.4",
     "dotenv": "^16.3.1",
     "jimp": "^0.22.10",
-    "lightningcss": "^1.21.7",
+    "lightningcss": "^1.21.8",
     "magic-string": "^0.30.3",
-    "marked": "^7.0.5",
-    "prettier": "^3.0.2",
+    "marked": "^9.0.0",
+    "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
-    "sass": "^1.66.1",
-    "satori": "^0.10.3",
+    "sass": "^1.67.0",
+    "satori": "^0.10.4",
     "satori-html": "^0.3.2",
     "shelljs": "^0.8.5",
-    "shiki": "^0.14.3",
+    "shiki": "^0.14.4",
     "shiki-twoslash": "^3.1.2",
     "svelte": "workspace:*",
-    "svelte-check": "^3.5.0",
+    "svelte-check": "^3.5.1",
     "svelte-preprocess": "^5.0.4",
     "tiny-glob": "^0.2.9",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-imagetools": "^5.0.8"
   }

sites/svelte.dev/src/routes/+page.svelte

@@ -92,7 +92,7 @@
 		]
 	}}
 >
-	<span slot="copyright">
+	<span slot="license">
 		Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
 		under the MIT license
 	</span>

sites/svelte.dev/src/routes/blog/[slug]/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/stores';
+	import { copy_code_descendants } from '@sveltejs/site-kit/actions';
 	import { setupDocsHovers } from '@sveltejs/site-kit/docs';
 
 	export let data;
@@ -19,7 +20,7 @@
 	<meta name="og:image" content="https://svelte.dev/blog/{$page.params.slug}/card.png" />
 </svelte:head>
 
-<article class="post listify text">
+<article class="post listify text" use:copy_code_descendants>
 	<h1>{data.post.title}</h1>
 	<p class="standfirst">{data.post.description}</p>
 

sites/svelte.dev/src/routes/content.json/content.server.js

@@ -36,7 +36,10 @@ export async function content() {
 		const slug = match[1];
 
 		const filepath = `${base}/docs/${file}`;
-		const markdown = replaceExportTypePlaceholders(await readFile(filepath, 'utf-8'), modules);
+		const markdown = await replaceExportTypePlaceholders(
+			await readFile(filepath, 'utf-8'),
+			modules
+		);
 
 		const { body, metadata } = extractFrontmatter(markdown);
 
@@ -45,7 +48,7 @@ export async function content() {
 		const rank = +metadata.rank || undefined;
 
 		blocks.push({
-			breadcrumbs: [...breadcrumbs, removeMarkdown(remove_TYPE(metadata.title) ?? '')],
+			breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title ?? '')],
 			href: get_href([slug]),
 			content: await plaintext(intro),
 			rank
@@ -61,11 +64,7 @@ export async function content() {
 			const intro = subsections.shift().trim();
 
 			blocks.push({
-				breadcrumbs: [
-					...breadcrumbs,
-					removeMarkdown(remove_TYPE(metadata.title)),
-					remove_TYPE(removeMarkdown(h2))
-				],
+				breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title), removeMarkdown(h2)],
 				href: get_href([slug, normalizeSlugify(h2)]),
 				content: await plaintext(intro),
 				rank
@@ -78,9 +77,9 @@ export async function content() {
 				blocks.push({
 					breadcrumbs: [
 						...breadcrumbs,
-						removeMarkdown(remove_TYPE(metadata.title)),
-						removeMarkdown(remove_TYPE(h2)),
-						removeMarkdown(remove_TYPE(h3))
+						removeMarkdown(metadata.title),
+						removeMarkdown(h2),
+						removeMarkdown(h3)
 					],
 					href: get_href([slug, normalizeSlugify(h2) + '-' + normalizeSlugify(h3)]),
 					content: await plaintext(lines.join('\n').trim()),
@@ -93,11 +92,6 @@ export async function content() {
 	return blocks;
 }
 
-/** @param {string} str */
-function remove_TYPE(str) {
-	return str?.replace(/^\[TYPE\]:\s+(.+)/, '$1') ?? '';
-}
-
 /** @param {string} markdown */
 async function plaintext(markdown) {
 	/** @param {unknown} text */

sites/svelte.dev/src/routes/docs/[slug]/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { page } from '$app/stores';
 	import { Icon } from '@sveltejs/site-kit/components';
+	import { copy_code_descendants } from '@sveltejs/site-kit/actions';
 	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
 
 	export let data;
@@ -21,7 +22,7 @@
 	<meta name="Description" content="{data.page.title} • Svelte documentation" />
 </svelte:head>
 
-<div class="text" id="docs-content">
+<div class="text" id="docs-content" use:copy_code_descendants>
 	<a
 		class="edit"
 		href="https://github.com/sveltejs/svelte/edit/master/documentation/docs/{data.page.file}"

sites/svelte.dev/src/routes/nav.json/+server.js

@@ -26,7 +26,7 @@ async function get_nav_list() {
 
 	const processed_blog_list = [
 		{
-			title: 'Blog',
+			title: '',
 			sections: blog_list.map(({ title, slug, date }) => ({
 				title,
 				path: '/blog/' + slug,
@@ -49,13 +49,23 @@ async function get_nav_list() {
 			title: 'Docs',
 			prefix: 'docs',
 			pathname: '/docs/introduction',
-			sections: processed_docs_list
+			sections: [
+				{
+					title: 'DOCS',
+					sections: processed_docs_list
+				}
+			]
 		},
 		{
 			title: 'Examples',
 			prefix: 'examples',
 			pathname: '/examples',
-			sections: processed_examples_list
+			sections: [
+				{
+					title: 'EXAMPLES',
+					sections: processed_examples_list
+				}
+			]
 		},
 		{
 			title: 'REPL',
@@ -66,7 +76,12 @@ async function get_nav_list() {
 			title: 'Blog',
 			prefix: 'blog',
 			pathname: '/blog',
-			sections: processed_blog_list
+			sections: [
+				{
+					title: 'BLOG',
+					sections: processed_blog_list
+				}
+			]
 		}
 	];
 }