group demo routes

update deps

package.json

@@ -25,13 +25,13 @@
   "devDependencies": {
     "@iconify/svelte": "^3.0.1",
     "@playwright/test": "^1.29.2",
-    "@sveltejs/adapter-static": "1.0.1",
-    "@sveltejs/kit": "1.0.7",
+    "@sveltejs/adapter-static": "^1.0.2",
+    "@sveltejs/kit": "^1.1.0",
     "@sveltejs/package": "1.0.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "@vitest/coverage-c8": "^0.26.3",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "@vitest/coverage-c8": "^0.27.1",
     "eslint": "^8.31.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
@@ -43,17 +43,16 @@
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte": "^3.55.0",
-    "svelte-check": "^3.0.1",
-    "svelte-github-corner": "^0.2.0",
+    "svelte": "^3.55.1",
+    "svelte-check": "^3.0.2",
     "svelte-preprocess": "^5.0.0",
-    "svelte-toc": "^0.5.1",
-    "svelte-zoo": "^0.1.4",
+    "svelte-toc": "^0.5.2",
+    "svelte-zoo": "^0.2.0",
     "svelte2tsx": "^0.6.0",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
-    "vitest": "^0.26.3"
+    "vitest": "^0.27.1"
   },
   "keywords": [
     "svelte",

src/routes/(demos)/+layout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { name } from '$root/package.json'
+  import { DemoNav } from '$site'
+</script>
+
+<h1>
+  <img src="favicon.svg" alt={name} height="50" width="50" />&ensp;Svelte MultiSelect
+</h1>
+
+<main>
+  <DemoNav style="place-content: center;" />
+
+  <slot />
+</main>
+
+<style>
+  h1 {
+    text-align: center;
+    display: flex;
+    place-content: center;
+    place-items: center;
+  }
+</style>

src/routes/allow-user-options/+page.svx → src/routes/(demos)/allow-user-options/+page.svx

@@ -1,7 +1,7 @@
 <script lang="ts">
   import MultiSelect from '$lib'
   import { foods, languages } from '$src/options'
-  import LanguageSlot from '$src/site/LanguageSlot.svelte'
+  import { LanguageSlot } from '$site'
 
   let selected_empty = []
 </script>
@@ -35,7 +35,7 @@
 <script>
   import MultiSelect from '$lib'
   import { languages } from '$src/options'
-  import LanguageSlot from '$src/site/LanguageSlot.svelte'
+  import { LanguageSlot } from '$site'
 
   let selected_append = ['Haskell', 'TypeScript']
 </script>

src/routes/form/+page.svx → src/routes/(demos)/form/+page.svx

@@ -7,7 +7,7 @@ This example shows the JavaScript way of handling MultiSelect fields in form sub
 ```svelte example stackblitz
 <script lang="ts">
   import MultiSelect from '$lib'
-  import ColorSlot from '$src/site/ColorSlot.svelte'
+  import { ColorSlot } from '$site'
   import { colors } from '$src/options'
 
   async function handle_submit(event: SubmitEvent) {

src/routes/kit-form-actions/+page.svx → src/routes/(demos)/kit-form-actions/+page.svx

@@ -15,7 +15,7 @@ HTML.
 ```svelte example stackblitz
 <script lang="ts">
   import MultiSelect from '$lib'
-  import ColorSlot from '$src/site/ColorSlot.svelte'
+  import { ColorSlot } from '$site'
   import { colors } from '$src/options'
   import { repository } from '$root/package.json'
   import type { ActionData, PageServerData } from './$types'
@@ -92,7 +92,7 @@ HTML.
 
 ### +page.server.ts
 
-The above codes needs to be in a `+page.svelte` file with the following `+page.server.ts` file in the same directory next to it.
+The above code needs to be in a `+page.svelte` file with the following `+page.server.ts` file in the same directory next to it.
 
 ```ts
 import { invalid } from '@sveltejs/kit'

src/routes/min-max-select/+page.svx → src/routes/(demos)/min-max-select/+page.svx

@@ -6,7 +6,7 @@
 <script lang="ts">
   import MultiSelect from '$lib'
   import { languages } from '$src/options'
-  import LanguageSlot from '$src/site/LanguageSlot.svelte'
+  import { LanguageSlot } from '$site'
 </script>
 
 <MultiSelect
@@ -46,7 +46,7 @@ When setting an integer value for `maxSelect` Multiselect will
 
 <br />
 
-Of course you can combine `maxSelect={n}` and `required={m}` where `n>=m`.
+Of course, you can combine `maxSelect={n}` and `required={m}` where `n>=m`.
 
 ```svelte example stackblitz
 <script lang="ts">

src/routes/persistent/+page.svx → src/routes/(demos)/persistent/+page.svx

@@ -14,7 +14,7 @@
 <script>
   import MultiSelect from '$lib'
   import { languages } from '$src/options'
-  import LanguageSlot from '$src/site/LanguageSlot.svelte'
+  import { LanguageSlot } from '$site'
   import { language_store } from '$src/stores'
 </script>
 

src/routes/slots/+page.svx → src/routes/(demos)/slots/+page.svx

@@ -6,9 +6,8 @@
 <script>
   import MultiSelect from '$lib'
   import { languages } from '$src/options'
-  import LanguageSlot from '$src/site/LanguageSlot.svelte'
+  import { LanguageSlot, MinusIcon } from '$site'
   import { Icon } from 'svelte-zoo'
-  import MinusIcon from '$src/site/MinusIcon.svelte'
 </script>
 
 <MultiSelect
@@ -30,7 +29,7 @@
 <script>
   import MultiSelect from '$lib'
   import { languages } from '$src/options'
-  import LanguageSlot from '$src/site/LanguageSlot.svelte'
+  import { LanguageSlot } from '$site'
   import { Icon } from 'svelte-zoo'
 
   // local variable used in CollapseIcon on:click callback to close dropdown

src/routes/+layout.svelte

@@ -1,67 +1,19 @@
 <script lang="ts">
   import { page } from '$app/stores'
   import { repository } from '$root/package.json'
-  import GitHubCorner from 'svelte-github-corner'
+  import { GitHubCorner } from 'svelte-zoo'
   import '../app.css'
-  import { _demo_routes } from './+layout'
-
-  $: is_current = (path: string) => {
-    if (path === $page.url.pathname) return `page`
-    if (path !== `/` && $page.url.pathname.includes(path)) return `page`
-    return undefined
-  }
 </script>
 
 <GitHubCorner href={repository} />
 
 {#if !$page.error && $page.url.pathname !== `/`}
   <a href="." aria-label="Back to index page">&laquo; home</a>
 {/if}
-{#if _demo_routes.some((route) => $page.url.pathname.endsWith(route))}
-  <h1>
-    <img src="favicon.svg" alt="Svelte MultiSelect" height="50" width="50" />&ensp;Svelte
-    MultiSelect Examples
-  </h1>
-
-  <nav>
-    {#each _demo_routes as route, idx}
-      {#if idx > 0}<strong>&bull;</strong>{/if}
-      <a href={route} aria-current={is_current(route)}>{route}</a>
-    {/each}
-  </nav>
 
-  <main>
-    <slot />
-  </main>
-{:else}
-  <!-- handles non-svx routes index.svelte and +error.svelte -->
-  <slot />
-{/if}
+<slot />
 
 <style>
-  h1 {
-    text-align: center;
-    display: flex;
-    place-content: center;
-    place-items: center;
-  }
-  nav {
-    display: flex;
-    gap: 1em 1ex;
-    place-content: center;
-    margin: 1em auto 3em;
-    max-width: 45em;
-    flex-wrap: wrap;
-  }
-  nav > a {
-    padding: 0 4pt;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 3pt;
-    transition: 0.2s;
-  }
-  nav > a[aria-current='page'] {
-    color: mediumseagreen;
-  }
   a[href='.'] {
     font-size: 15pt;
     position: absolute;

src/routes/+layout.ts

@@ -3,16 +3,6 @@ import type { LayoutLoad } from './$types'
 
 export const prerender = true
 
-export const _demo_routes = Object.keys(
-  import.meta.glob(`./*/+page.{svx,md,svelte}`)
-)
-  .map((filename) => filename.split(`/`)[1])
-  .filter((name) => ![`contributing`, `changelog`].includes(name))
-
-if (_demo_routes.length < 5) {
-  throw new Error(`Too few demo routes found: ${_demo_routes.length}`)
-}
-
 export const load: LayoutLoad = ({ url }) => {
   if (url.pathname.endsWith(`.md`)) {
     throw redirect(307, url.pathname.replace(/\.md$/, ``))

src/routes/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import Readme from '$root/readme.md'
+  import { DemoNav, Examples } from '$site'
   import Toc from 'svelte-toc'
-  import Examples from '../site/Examples.svx'
-  import { _demo_routes } from './+layout'
 </script>
 
 <main>
@@ -14,29 +13,14 @@
         Some more in-depth examples for specific features of
         <code>svelte-multiselect</code>:
       </p>
-      <nav>
-        {#each _demo_routes as route, idx}
-          {#if idx > 0}<strong>&bull;</strong>{/if}
-          <a href={route}>{route}</a>
-        {/each}
-      </nav>
+      <DemoNav />
     </svelte:fragment>
   </Readme>
 </main>
 
 <Toc headingSelector="main > :where(h2, h3)" breakpoint={1250} />
 
 <style>
-  nav {
-    display: flex;
-    gap: 2ex 1ex;
-    flex-wrap: wrap;
-  }
-  nav a {
-    padding: 1pt 4pt;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 3pt;
-  }
   @media (max-width: 600px) {
     :global(h1[align='center']) {
       display: flex;

src/site/DemoNav.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+
+  export let style: string | null = null
+
+  const routes = Object.keys(
+    // eslint-disable-next-line @typescript-eslint/quotes
+    import.meta.glob('/src/routes/\\(demos\\)/*/+page*.{svx,md,svelte}')
+  ).map((filename) => filename.split(`/`)[4])
+
+  if (routes.length < 3) {
+    throw new Error(`Too few demo routes found: ${routes.length}`)
+  }
+  $: is_current = (path: string) => {
+    if (path === $page.url.pathname) return `page`
+    if (path !== `/` && $page.url.pathname.includes(path)) return `page`
+    return undefined
+  }
+</script>
+
+<nav {style}>
+  {#each routes as href, idx}
+    {#if idx > 0}<strong>&bull;</strong>{/if}
+    <a {href} aria-current={is_current(href)}>{href}</a>
+  {/each}
+</nav>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1em 1ex;
+    flex-wrap: wrap;
+  }
+  nav > a {
+    padding: 0 4pt;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 3pt;
+    transition: 0.2s;
+  }
+  nav > a[aria-current='page'] {
+    color: mediumseagreen;
+  }
+</style>

src/site/index.ts

@@ -0,0 +1,7 @@
+export { default as ColorSlot } from './ColorSlot.svelte'
+export { default as DemoNav } from './DemoNav.svelte'
+export { default as Examples } from './Examples.svx'
+export { default as IconifySlot } from './IconifySlot.svelte'
+export { default as LanguageSlot } from './LanguageSlot.svelte'
+export { default as MinusIcon } from './MinusIcon.svelte'
+export { default as RepoSlot } from './RepoSlot.svelte'

svelte.config.js

@@ -2,14 +2,14 @@ import adapter from '@sveltejs/adapter-static'
 import { s } from 'hastscript'
 import { mdsvex } from 'mdsvex'
 import examples from 'mdsvexamples'
-import linkHeadings from 'rehype-autolink-headings'
-import headingSlugs from 'rehype-slug'
+import link_headings from 'rehype-autolink-headings'
+import heading_slugs from 'rehype-slug'
 import preprocess from 'svelte-preprocess'
 
 const rehypePlugins = [
-  headingSlugs,
+  heading_slugs,
   [
-    linkHeadings,
+    link_headings,
     {
       behavior: `append`,
       test: [`h2`, `h3`, `h4`, `h5`, `h6`], // don't auto-link <h1>
@@ -30,7 +30,6 @@ const defaults = {
   pkg: pkg.name,
   repo: pkg.repository,
 }
-
 const remarkPlugins = [[examples, { defaults }]]
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -44,6 +43,12 @@ export default {
 
   kit: {
     adapter: adapter(),
+
+    alias: {
+      $root: `.`,
+      $src: `./src`,
+      $site: `./src/site`,
+    },
   },
 
   package: {

vite.config.ts

@@ -1,6 +1,5 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import examples from 'mdsvexamples/vite'
-import { resolve } from 'path'
 import type { UserConfig } from 'vite'
 import type { UserConfig as VitestConfig } from 'vitest'
 
@@ -15,13 +14,6 @@ const vite_config: UserConfig & { test: VitestConfig } = {
     },
   },
 
-  resolve: {
-    alias: {
-      $src: resolve(`./src`),
-      $root: resolve(`.`),
-    },
-  },
-
   server: {
     fs: { allow: [`..`] }, // needed to import from $root
     port: 3000,