svelteplot
diff --git a/‎screenshot-examples.js
Lines changed: 4 additions & 2 deletions b/‎screenshot-examples.js
Lines changed: 4 additions & 2 deletions
diff --git a/‎src/routes/examples/[group]/[page]/+page.svelte
Lines changed: 10 additions & 3 deletions b/‎src/routes/examples/[group]/[page]/+page.svelte
Lines changed: 10 additions & 3 deletions
diff --git a/‎static/examples/axis/datawrapper-ticks.dark.png
222 Bytes b/‎static/examples/axis/datawrapper-ticks.dark.png
222 Bytes
diff --git a/‎static/examples/axis/datawrapper-ticks.png
216 Bytes b/‎static/examples/axis/datawrapper-ticks.png
216 Bytes
diff --git a/‎static/examples/axis/major-minor.dark.png
127 Bytes b/‎static/examples/axis/major-minor.dark.png
127 Bytes
diff --git a/‎static/examples/axis/major-minor.png
126 Bytes b/‎static/examples/axis/major-minor.png
126 Bytes
diff --git a/‎static/examples/axis/tick-count.dark.png
157 Bytes b/‎static/examples/axis/tick-count.dark.png
157 Bytes
diff --git a/‎static/examples/axis/tick-count.png
134 Bytes b/‎static/examples/axis/tick-count.png
134 Bytes
diff --git a/‎static/examples/axis/tick-interval.dark.png
135 Bytes b/‎static/examples/axis/tick-interval.dark.png
135 Bytes
diff --git a/‎static/examples/axis/tick-interval.png
135 Bytes b/‎static/examples/axis/tick-interval.png
135 Bytes
@@ -94,7 +94,9 @@ const takeScreenshot = async (page, urlPath, outputPath, isDarkMode = false) =>
     const finalOutputPath = outputPath.replace('.png', `${themeSuffix}.png`);
 
     // Wait for the Plot component to be rendered
-    await page.waitForSelector('.content > figure.svelteplot', { timeout: 10000 });
+    await page.waitForSelector('.content figure.svelteplot ', {
+        timeout: 10000
+    });
 
     // Toggle dark mode if needed
     if (isDarkMode) {
@@ -112,7 +114,7 @@ const takeScreenshot = async (page, urlPath, outputPath, isDarkMode = false) =>
 
     // Get the Plot SVG element
     const elementHandle = await page.evaluateHandle(() =>
-        document.querySelector('.content > figure.svelteplot > .plot-body > svg')
+        document.querySelector('.content .screenshot')
     );
 
     // Take a screenshot of the element
 
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { page } from '$app/state';
     import { HighlightSvelte } from 'svelte-highlight';
     import codeStyleLight from 'svelte-highlight/styles/atom-one-light';
@@ -56,14 +56,21 @@
     <h1 class="page-title">{mod.title}</h1>
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {#if mod.description}<p>{@html mod.description}</p>{/if}
-    <mod.default />
+
+    <div class="screenshot">
+        <mod.default />
+    </div>
 
     <div class="svp-code-block-wrapper">
         <div class="svp-code-block">
             <HighlightSvelte
                 lang="svelte"
                 code={pagesSrc[plotKey].substring(
-                    pagesSrc[plotKey].indexOf('<Plot')
+                    pagesSrc[plotKey].indexOf(
+                        pages[plotKey].fullCode
+                            ? '<script lang="ts">'
+                            : '<Plot'
+                    )
                 )} />
         </div>
     </div>