docs: more flexible example sorting

gka · gka · commit e706fe77b16b · 2025-06-03T08:34:26.000+02:00
diff --git a/src/lib/ui/ExamplesGrid.svelte b/src/lib/ui/ExamplesGrid.svelte
@@ -36,7 +36,7 @@
             border: 1px solid #88888822;
             border-radius: 2px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-            padding: 1.5ex;
+            padding: 1.5ex 1.5ex 0.4ex 1.5ex;
         }
 
         &:hover {
diff --git a/src/routes/examples/+page.svelte b/src/routes/examples/+page.svelte
@@ -15,7 +15,7 @@
     ];
 </script>
 
-<script>
+<script lang="ts">
     import { groupBy } from 'es-toolkit';
     import { SVELTEPRESS_CONTEXT_KEY } from '@sveltepress/theme-default/context';
     import { getContext } from 'svelte';
@@ -24,7 +24,14 @@
 
     const pages = import.meta.glob('./**/*.svelte', {
         eager: true
-    });
+    }) as Record<
+        string,
+        {
+            title: string;
+            description?: string;
+            sortKey?: number;
+        }
+    >;
 
     const paths = groupBy(
         Object.keys(pages).filter(
@@ -66,6 +73,12 @@
                 ]?.replace('/static', '')
             }))
     );
+
+    function sortPages(a: string, b: string) {
+        const sortA = pages[a].sortKey ?? 10;
+        const sortB = pages[b].sortKey ?? 10;
+        return sortA - sortB;
+    }
 </script>
 
 <p>
@@ -87,7 +100,9 @@
                     ].title}</a>
             </h3>
             <ul>
-                {#each groupPages.filter((p) => !p.endsWith('/_index.svelte')) as page (page)}
+                {#each groupPages
+                    .sort(sortPages)
+                    .filter((p) => !p.endsWith('/_index.svelte')) as page (page)}
                     <li>
                         <a
                             href={page
diff --git a/src/routes/examples/[group]/+page.svelte b/src/routes/examples/[group]/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { page } from '$app/state';
 
     import { SVELTEPRESS_CONTEXT_KEY } from '@sveltepress/theme-default/context';
@@ -9,7 +9,14 @@
 
     const pages = import.meta.glob('../**/*.svelte', {
         eager: true
-    });
+    }) as Record<
+        string,
+        {
+            title: string;
+            description?: string;
+            sortKey?: number;
+        }
+    >;
 
     const screenshots = import.meta.glob(
         '/static/examples/**/*.png',
@@ -46,6 +53,11 @@
             .filter(
                 (page) => !page.endsWith('/_index.svelte')
             )
+            .sort((a, b) => {
+                const sortA = pages[a].sortKey ?? 10;
+                const sortB = pages[b].sortKey ?? 10;
+                return sortA - sortB;
+            })
             .map((page) => ({
                 page,
                 title: pages[page].title,
diff --git a/src/routes/examples/axis/datawrapper-ticks.svelte b/src/routes/examples/axis/datawrapper-ticks.svelte
@@ -1,6 +1,6 @@
 <script module>
     export const title = 'Datawrapper-style ticks';
-    export const description = 'Foobar';
+    export const sortKey = 99;
 </script>
 
 <script>
diff --git a/src/routes/examples/geo/us-choropleth-canvas.svelte b/src/routes/examples/geo/us-choropleth-canvas.svelte
@@ -2,6 +2,7 @@
     export const title = 'US choropleth map (canvas)';
     export const description =
         'See also the <a href="/examples/geo/us-choropleth">SVG version</a>';
+    export const sortKey = 2;
 </script>
 
 <script>
diff --git a/src/routes/examples/geo/us-choropleth.svelte b/src/routes/examples/geo/us-choropleth.svelte
@@ -2,6 +2,7 @@
     export const title = 'US choropleth map';
     export const description =
         'See also the <a href="/examples/geo/us-choropleth-canvas">Canvas version</a>';
+    export const sortKey = 1;
 </script>
 
 <script>

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`border: 1px solid #88888822;`
`37`	`37`	`border-radius: 2px;`
`38`	`38`	`box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);`
`39`		`- padding: 1.5ex;`
	`39`	`+ padding: 1.5ex 1.5ex 0.4ex 1.5ex;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`&:hover {`