Merge pull request #44 from MIERUNE/shiki-cf

docs: Tweak syntax highlighter setup and cache-control
MIERUNE · Nov 29, 2024 · b5afda4 · b5afda4
2 parents c276558 + 23172cd
commit b5afda4
Show file tree

Hide file tree

Showing 26 changed files with 70 additions and 50 deletions.
diff --git a/src/content/CodeBlock.svelte b/src/content/CodeBlock.svelte
@@ -1,39 +1,25 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
-	import { createHighlighter, type Highlighter } from 'shiki';
-	import svelte from 'shiki/langs/svelte.mjs';
-	import dark from 'shiki/themes/github-dark-default.mjs';
+	// import { browser } from '$app/environment';
+	import type { HighlighterCore } from 'shiki';
+	// import svelte from 'shiki/langs/svelte.mjs';
+	// import dark from 'shiki/themes/github-dark-default.mjs';
 
 	let {
-		content
+		content,
+		shiki
 	}: {
 		content: string;
+		shiki: HighlighterCore;
 	} = $props();
 
-	let shiki: Promise<Highlighter> | undefined = $state.raw();
-	if (browser) {
-		shiki = createHighlighter({
-			themes: [dark],
-			langs: [svelte]
-		});
-	}
-
 	const _content = $derived.by(() => {
 		return content.replaceAll('\t', '  ').trim();
 	});
 </script>
 
 <div class="my-6 subpixel-antialiased">
-	{#if shiki}
-		{#await shiki then shiki}
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			{@html shiki.codeToHtml(_content, { lang: 'svelte', theme: 'github-dark-default' })}
-		{/await}
-	{:else}
-		<pre class="shiki"><code
-				>{#each _content.split('\n') as line}<span class="line">{line + '\n'}</span>{/each}</code
-			></pre>
-	{/if}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html shiki.codeToHtml(_content, { lang: 'svelte', theme: 'github-dark-default' })}
 </div>
 
 <style>

diff --git a/src/content/examples/animate-images/content.svelte.md b/src/content/examples/animate-images/content.svelte.md
@@ -7,8 +7,9 @@ description: Use a series of image sources to create an animation.
   import Demo from "./AnimateImages.svelte";
   import demoRaw from "./AnimateImages.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/basestyle/content.svelte.md b/src/content/examples/basestyle/content.svelte.md
@@ -7,8 +7,9 @@ description: Dynamic contents must be preserved when the base style is changed.
   import Demo from "./BaseStyle.svelte";
   import demoRaw from "./BaseStyle.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/canvas-source/content.svelte.md b/src/content/examples/canvas-source/content.svelte.md
@@ -7,8 +7,9 @@ description: Add a canvas source to the map.
   import Demo from "./Canvas.svelte";
   import demoRaw from "./Canvas.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/clusters/content.svelte.md b/src/content/examples/clusters/content.svelte.md
@@ -7,8 +7,9 @@ description: Use MapLibre's built-in functions to visualize points as clusters.
   import Demo from "./Clusters.svelte";
   import demoRaw from "./Clusters.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/complex/content.svelte.md b/src/content/examples/complex/content.svelte.md
@@ -7,8 +7,9 @@ description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiu
   import Demo from "./Complex.svelte";
   import demoRaw from "./Complex.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/contour/content.svelte.md b/src/content/examples/contour/content.svelte.md
@@ -7,8 +7,9 @@ description: Render contour lines from a raster DEM source using maplibre-contou
   import Demo from "./Contour.svelte";
   import demoRaw from "./Contour.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/custom-control/content.svelte.md b/src/content/examples/custom-control/content.svelte.md
@@ -7,8 +7,9 @@ description: Custom Control allows to easily create user defined controls.
   import Demo from "./CustomControl.svelte";
   import demoRaw from "./CustomControl.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/custom-layer/content.svelte.md b/src/content/examples/custom-layer/content.svelte.md
@@ -7,8 +7,9 @@ description: Use a custom style layer to render custom WebGL content.
   import Demo from "./CustomLayer.svelte";
   import demoRaw from "./CustomLayer.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/custom-protocol/content.svelte.md b/src/content/examples/custom-protocol/content.svelte.md
@@ -7,8 +7,9 @@ description: How to add custom protocols.
   import Demo from "./CustomProtocol.svelte";
   import demoRaw from "./CustomProtocol.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/deckgl-overlay/content.svelte.md b/src/content/examples/deckgl-overlay/content.svelte.md
@@ -7,8 +7,9 @@ description: Interleaving deck.gl with MapLibre layers
   import Demo from "./DeckGL.svelte";
   import demoRaw from "./DeckGL.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/dynamic-image/content.svelte.md b/src/content/examples/dynamic-image/content.svelte.md
@@ -7,8 +7,9 @@ description: Add an icon to the map that was generated at runtime.
   import Demo from "./DynamicImage.svelte";
   import demoRaw from "./DynamicImage.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/fullscreen/content.svelte.md b/src/content/examples/fullscreen/content.svelte.md
@@ -7,8 +7,9 @@ description: View a fullscreen map
   import Demo from "./Fullscreen.svelte";
   import demoRaw from "./Fullscreen.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/geolocate/content.svelte.md b/src/content/examples/geolocate/content.svelte.md
@@ -7,8 +7,9 @@ description: Locate the User
   import Demo from "./Geolocate.svelte";
   import demoRaw from "./Geolocate.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/hover-styles/content.svelte.md b/src/content/examples/hover-styles/content.svelte.md
@@ -7,8 +7,9 @@ description: Use events and feature states to create a per feature hover effect.
   import Demo from "./HoverStyles.svelte";
   import demoRaw from "./HoverStyles.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/image-loader/content.svelte.md b/src/content/examples/image-loader/content.svelte.md
@@ -7,8 +7,9 @@ description: Utility for loading images from URLs
   import Demo from "./Images.svelte";
   import demoRaw from "./Images.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/limit-interaction/content.svelte.md b/src/content/examples/limit-interaction/content.svelte.md
@@ -7,8 +7,9 @@ description: Set the zoom/pitch range and enable or disable UI handlers on the m
   import Demo from "./LimitInteraction.svelte";
   import demoRaw from "./LimitInteraction.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/plain/content.svelte.md b/src/content/examples/plain/content.svelte.md
@@ -7,8 +7,9 @@ description: Plain map.
   import Demo from "./Plain.svelte";
   import demoRaw from "./Plain.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/pmtiles/content.svelte.md b/src/content/examples/pmtiles/content.svelte.md
@@ -7,8 +7,9 @@ description: Uses the PMTiles plugin and protocol to present a map.
   import Demo from "./PMTiles.svelte";
   import demoRaw from "./PMTiles.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/side-by-side/content.svelte.md b/src/content/examples/side-by-side/content.svelte.md
@@ -7,8 +7,9 @@ description: Synchronize two maps.
   import Demo from "./SideBySide.svelte";
   import demoRaw from "./SideBySide.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+    let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/terrain/content.svelte.md b/src/content/examples/terrain/content.svelte.md
@@ -7,8 +7,9 @@ description: 3D terrain and the sky.
   import Demo from "./Terrain.svelte";
   import demoRaw from "./Terrain.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/threejs-model/content.svelte.md b/src/content/examples/threejs-model/content.svelte.md
@@ -8,8 +8,9 @@ original: https://maplibre.org/maplibre-gl-js/docs/examples/add-3d-model/
   import Demo from "./CustomLayer.svelte";
   import demoRaw from "./CustomLayer.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/content/examples/video-on-a-map/content.svelte.md b/src/content/examples/video-on-a-map/content.svelte.md
@@ -7,8 +7,9 @@ description: Display a video.
   import Demo from "./Video.svelte";
   import demoRaw from "./Video.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} {shiki} />
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
@@ -1,3 +1,3 @@
-// export async function load({ setHeaders }) {
-// 	setHeaders({ 'Cache-Control': 'max-age=7200, stale-while-revalidate=3600' });
-// }
+export async function load({ setHeaders }) {
+	setHeaders({ 'Cache-Control': 'max-age=300, stale-while-revalidate=300' });
+}
diff --git a/src/routes/examples/[slug]/+page.svelte b/src/routes/examples/[slug]/+page.svelte
@@ -11,7 +11,7 @@
 		</p>
 
 		<div class="prose max-w-none dark:prose-invert">
-			<data.Content />
+			<data.Content shiki={data.shiki} />
 		</div>
 	</div>
 	<aside class="sticky top-24 h-[calc(100vh-6rem)]">

diff --git a/src/routes/examples/[slug]/+page.ts b/src/routes/examples/[slug]/+page.ts
@@ -1,5 +1,16 @@
 import { error } from '@sveltejs/kit';
 import type { Component } from 'svelte';
+import { browser } from '$app/environment';
+
+import { createHighlighter, createJavaScriptRegexEngine, createOnigurumaEngine } from 'shiki';
+import svelte from 'shiki/langs/svelte.mjs';
+import dark from 'shiki/themes/github-dark-default.mjs';
+
+const shiki = createHighlighter({
+	themes: [dark],
+	langs: [svelte],
+	engine: browser ? createOnigurumaEngine(import('shiki/wasm')) : createJavaScriptRegexEngine()
+});
 
 export const load = async ({ params }) => {
 	const { slug } = params;
@@ -14,7 +25,8 @@ export const load = async ({ params }) => {
 		};
 		return {
 			Content: post.default,
-			meta: { ...post.metadata, slug }
+			meta: { ...post.metadata, slug },
+			shiki: await shiki
 		};
 	} catch {
 		error(404, `Example '${slug}' not found`);