expose RawLayer and tweak docs

MIERUNE · Nov 29, 2024 · 14fb32c · 14fb32c
1 parent f74eb6f
commit 14fb32c
Show file tree

Hide file tree

Showing 53 changed files with 83 additions and 126 deletions.
diff --git a/src/content/CodeBlock.svelte b/src/content/CodeBlock.svelte
@@ -1,18 +1,31 @@
 <script lang="ts" module>
-	import type { HighlighterCore } from 'shiki';
+	import {
+		createHighlighterCoreSync,
+		createOnigurumaEngine,
+		createJavaScriptRegexEngine,
+		type HighlighterCore
+	} from 'shiki';
+	import svelte from 'shiki/langs/svelte.mjs';
+	import dark from 'shiki/themes/github-dark-default.mjs';
+	import { browser } from '$app/environment';
+
+	const shiki2 = createHighlighterCoreSync({
+		themes: [dark],
+		langs: [svelte],
+		// Use the WASM version of Oniguruma on the browser, and the JS engine on the server
+		engine: browser ? await createOnigurumaEngine(import('shiki/wasm')) : createJavaScriptRegexEngine()
+	});
 </script>
 
 <script lang="ts">
 	let {
-		content,
-		shiki
+		content
 	}: {
 		content: string;
-		shiki: HighlighterCore;
 	} = $props();
 
 	const highlighted = $derived.by(() => {
-		return shiki.codeToHtml(content.trim(), { lang: 'svelte', theme: 'github-dark-default' });
+		return shiki2.codeToHtml(content.replaceAll('\t', '  ').trim(), { lang: 'svelte', theme: 'github-dark-default' });
 	});
 </script>
 
@@ -36,6 +49,6 @@
 		margin-right: 1.5rem;
 		display: inline-block;
 		text-align: right;
-		color: rgba(115, 138, 148, 0.4);
+		color: rgba(115, 138, 148, 0.5);
 	}
 </style>
diff --git a/src/content/examples/animate-images/AnimateImages.svelte b/src/content/examples/animate-images/AnimateImages.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
 	zoom={5}
 	center={[-76, 43]}

diff --git a/src/content/examples/animate-images/content.svelte.md b/src/content/examples/animate-images/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/basestyle/BaseStyle.svelte b/src/content/examples/basestyle/BaseStyle.svelte
@@ -41,7 +41,7 @@
 	</div>
 </div>
 
-<MapLibre class="h-[60vh] min-h-[300px]" style={styleUrl} zoom={4} maxPitch={80} center={{ lng: 137, lat: 36 }}>
+<MapLibre class="h-[55vh] min-h-[300px]" style={styleUrl} zoom={4} maxPitch={80} center={{ lng: 137, lat: 36 }}>
 	<Projection type={globe ? 'globe' : undefined} />
 	<Light anchor="map" />
 	<Sky

diff --git a/src/content/examples/basestyle/content.svelte.md b/src/content/examples/basestyle/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/canvas-source/Canvas.svelte b/src/content/examples/canvas-source/Canvas.svelte
@@ -36,7 +36,7 @@
 <canvas bind:this={canvas} class="hidden" width={SIZE} height={SIZE}>Canvas not supported</canvas>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={2}
 	center={{ lng: 135, lat: 35 }}

diff --git a/src/content/examples/canvas-source/content.svelte.md b/src/content/examples/canvas-source/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/clusters/Clusters.svelte b/src/content/examples/clusters/Clusters.svelte
@@ -28,7 +28,7 @@
 </div>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
 	zoom={2}
 	center={{ lng: 180, lat: 35 }}

diff --git a/src/content/examples/clusters/content.svelte.md b/src/content/examples/clusters/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/complex/Complex.svelte b/src/content/examples/complex/Complex.svelte
@@ -134,7 +134,7 @@
 </div>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	bind:map
 	bind:zoom
 	bind:center

diff --git a/src/content/examples/complex/content.svelte.md b/src/content/examples/complex/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/contour/Contour.svelte b/src/content/examples/contour/Contour.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json"
 	zoom={12}
 	minZoom={10}

diff --git a/src/content/examples/contour/content.svelte.md b/src/content/examples/contour/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/custom-control/CustomControl.svelte b/src/content/examples/custom-control/CustomControl.svelte
@@ -26,7 +26,7 @@
 	});
 </script>
 
-<MapLibre class="h-[50vh] min-h-[200px]" style={mapStyle} zoom={12} pitch={40} maxPitch={85} bind:center>
+<MapLibre class="h-[55vh] min-h-[200px]" style={mapStyle} zoom={12} pitch={40} maxPitch={85} bind:center>
 	<!-- inject IControl (useful for plugin) -->
 	<CustomControl position="top-left" control={myControl} />
 

diff --git a/src/content/examples/custom-control/content.svelte.md b/src/content/examples/custom-control/content.svelte.md
@@ -7,9 +7,8 @@ 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} {shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/custom-layer/CustomLayer.svelte b/src/content/examples/custom-layer/CustomLayer.svelte
@@ -46,8 +46,6 @@
 			const berlin = maplibregl.MercatorCoordinate.fromLngLat({ lng: 13.403, lat: 52.562 });
 			const kyiv = maplibregl.MercatorCoordinate.fromLngLat({ lng: 30.498, lat: 50.541 });
 
-			console.log(helsinki, berlin, kyiv);
-
 			// create and initialize a WebGLBuffer to store vertex and color data
 			this.buffer = gl.createBuffer();
 			gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
@@ -79,7 +77,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={3}
 	center={[20, 58]}

diff --git a/src/content/examples/custom-layer/content.svelte.md b/src/content/examples/custom-layer/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/custom-protocol/CustomProtocol.svelte b/src/content/examples/custom-protocol/CustomProtocol.svelte
@@ -43,7 +43,7 @@
 <Protocol scheme="myprotocol" loadFn={myProtocolLoadFn} />
 
 <!-- Use custom protocols -->
-<MapLibre class="h-[50vh] min-h-[200px]" zoom={6} center={{ lng: 140.0, lat: 37.5 }}>
+<MapLibre class="h-[55vh] min-h-[200px]" zoom={6} center={{ lng: 140.0, lat: 37.5 }}>
 	<VectorTileSource url="pmtiles://https://tile.openstreetmap.jp/static/planet.pmtiles">
 		<LineLayer sourceLayer="transportation" paint={{ 'line-color': 'orange' }} />
 		<FillLayer sourceLayer="water" paint={{ 'fill-color': 'dodgerblue' }} />

diff --git a/src/content/examples/custom-protocol/content.svelte.md b/src/content/examples/custom-protocol/content.svelte.md
@@ -7,9 +7,8 @@ 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} {shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/deckgl-overlay/DeckGL.svelte b/src/content/examples/deckgl-overlay/DeckGL.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={15}
 	pitch={60}

diff --git a/src/content/examples/deckgl-overlay/content.svelte.md b/src/content/examples/deckgl-overlay/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/dynamic-image/DynamicImage.svelte b/src/content/examples/dynamic-image/DynamicImage.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={4}
 	center={{ lng: 137, lat: 36 }}

diff --git a/src/content/examples/dynamic-image/content.svelte.md b/src/content/examples/dynamic-image/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/fullscreen/Fullscreen.svelte b/src/content/examples/fullscreen/Fullscreen.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px] border-8 border-slate-500"
+	class="h-[55vh] min-h-[300px] border-8 border-slate-500"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 >
 	<FullScreenControl position="top-left" />

diff --git a/src/content/examples/fullscreen/content.svelte.md b/src/content/examples/fullscreen/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/geolocate/Geolocate.svelte b/src/content/examples/geolocate/Geolocate.svelte
@@ -7,7 +7,7 @@
 	}
 </script>
 
-<div class="flex h-[60vh] min-h-[300px] overflow-hidden rounded-md">
+<div class="flex h-[55vh] min-h-[300px] overflow-hidden rounded-md">
 	<pre class="m-0 flex-1 rounded-none">{logString}</pre>
 	<MapLibre class="flex-1" style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json">
 		<GeolocateControl

diff --git a/src/content/examples/geolocate/content.svelte.md b/src/content/examples/geolocate/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/hover-styles/HoverStyles.svelte b/src/content/examples/hover-styles/HoverStyles.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
 	zoom={2}
 	center={{ lng: -100.486052, lat: 37.830348 }}

diff --git a/src/content/examples/hover-styles/content.svelte.md b/src/content/examples/hover-styles/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/image-loader/Images.svelte b/src/content/examples/image-loader/Images.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={1.5}
 	center={{ lng: -10.0, lat: -20 }}

diff --git a/src/content/examples/image-loader/content.svelte.md b/src/content/examples/image-loader/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/limit-interaction/LimitInteraction.svelte b/src/content/examples/limit-interaction/LimitInteraction.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <MapLibre
-	class="relative h-[60vh] min-h-[300px]"
+	class="relative h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={5}
 	center={{ lng: 137, lat: 36 }}

diff --git a/src/content/examples/limit-interaction/content.svelte.md b/src/content/examples/limit-interaction/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />
diff --git a/src/content/examples/plain/Plain.svelte b/src/content/examples/plain/Plain.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={3.5}
 	center={{ lng: 137, lat: 36 }}

diff --git a/src/content/examples/plain/content.svelte.md b/src/content/examples/plain/content.svelte.md
@@ -7,9 +7,8 @@ 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} shiki={shiki} />
+<CodeBlock content={demoRaw} />