fix: simplify routes structure (kitbook will automatically updates ro…

…utes as needed according to future changes)

* feat: add buttons to create variants and markdown files from kitbook

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +1,2 @@
 - [ ] Lint the project with `pnpm lint`
-
-### Changesets
-
-- [ ] If your PR makes a change that should be noted in the changelogs, generate a changeset by running `pnpx changeset` and following the prompts.
+- [ ] Write your commits using [Convential Commits](https://www.conventionalcommits.org/en/v1.0.0/).

.vscode/settings.json

@@ -6,16 +6,17 @@
     "titleBar.inactiveForeground": "#e7e7e799"
   },
   "files.associations": {
-    "*.svx": "svelte"
+    "*.svx": "svelte",
+    "*.composition": "svelte"
   },
+  "foam.completion.label": "title",
   "foam.edit.linkReferenceDefinitions": "withExtensions",
   "foam.files.ignore": [
     "**/node_modules/**/*",
-    "**/package/**/*",
     "**/.svelte-kit/**/*",
-    "**/dist/**/*",
+    "**/dist/**/*"
   ],
-  "foam.completion.label": "title",
+  "foam.files.notesExtensions": "composition",
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "prettier.enable": false,
   "editor.formatOnSave": false,
@@ -47,8 +48,31 @@
     "yaml"
   ],
   "eslint.experimental.useFlatConfig": true,
+  "unocss.root": "packages/kitbook",
   "svelte.plugin.svelte.compilerWarnings": {
     "a11y-click-events-have-key-events": "ignore",
-  },
-  "unocss.root": "packages/kitbook"
+    "a11y-aria-attributes": "ignore",
+    "a11y-incorrect-aria-attribute-type": "ignore",
+    "a11y-unknown-aria-attribute": "ignore",
+    "a11y-hidden": "ignore",
+    "a11y-misplaced-role": "ignore",
+    "a11y-unknown-role": "ignore",
+    "a11y-no-abstract-role": "ignore",
+    "a11y-no-redundant-roles": "ignore",
+    "a11y-role-has-required-aria-props": "ignore",
+    "a11y-accesskey": "ignore",
+    "a11y-autofocus": "ignore",
+    "a11y-misplaced-scope": "ignore",
+    "a11y-positive-tabindex": "ignore",
+    "a11y-invalid-attribute": "ignore",
+    "a11y-missing-attribute": "ignore",
+    "a11y-img-redundant-alt": "ignore",
+    "a11y-label-has-associated-control": "ignore",
+    "a11y-media-has-caption": "ignore",
+    "a11y-distracting-elements": "ignore",
+    "a11y-structure": "ignore",
+    "a11y-mouse-events-have-key-events": "ignore",
+    "a11y-missing-content": "ignore",
+    "a11y-no-static-element-interactions": "ignore"
+  }
 }

eslint.config.js

@@ -20,6 +20,8 @@ export default antfu(
     ignores: [
       'examples/**',
       '**/.svelte-kit**',
+      '**/package/**',
+      '**/src/routes/kitbook/**',
     ],
   },
 )

packages/kitbook/src/docs/1-variants/DefaultSlot.md

@@ -1,5 +1,3 @@
-# Pass a Default Slot
-
 It would be great to support dynamic slots for variants, but it would be error-prone until Svelte officially supports that. However, we can support an optional default slot of a string (you can pass html) or a component as seen in the variants below.
 
 Possible dynamic slot options to research further: 

packages/kitbook/src/docs/2-compositions/BottomSheet.example.composition

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { ShowHide, Button, BottomSheet } from "svelte-pieces";
+
+  export let max = 10
+  export let start = 40 
+  export let contentHeight = 500
+  export let duration = 150
+</script>
+
+<ShowHide let:show let:toggle>
+  <Button size="sm" onclick={toggle} form="filled">Toggle Show</Button>
+  <Button size="sm" onclick={() => { max = 10}} active={max === 10}>Top max</Button>
+  <Button size="sm" onclick={() => { max = 40}} active={max === 40}>Middle max</Button>
+  <Button size="sm" onclick={() => { max = 85}} active={max === 85}>Bottom max</Button>
+  <Button size="sm" onclick={() => { start = 10}} active={start === 10}>Top Start</Button>
+  <Button size="sm" onclick={() => { start = 40}} active={start === 40}>Middle Start</Button>
+  <Button size="sm" onclick={() => { start = 85}} active={start === 85}>Bottom Start</Button>
+  <Button size="sm" onclick={() => { contentHeight = 500}} active={contentHeight === 500}>Tall Content</Button>
+  <Button size="sm" onclick={() => { contentHeight = 250}} active={contentHeight === 250}>Med Content</Button>
+  <Button size="sm" onclick={() => { contentHeight = 100}} active={contentHeight === 100}>Short Content</Button>
+  {#if show}
+    <BottomSheet on:close={toggle} {max} {start} {duration}>
+      <div slot="header">
+        Title
+        <Button
+          size="sm"
+          form="simple"
+          onclick={() => { contentHeight = 250}}
+          active={contentHeight === 250}>Med Content</Button>
+        <Button
+          size="sm"
+          form="simple"
+          onclick={() => { contentHeight = 100}}
+          active={contentHeight === 100}>Short Content</Button>
+      </div>
+      <p class="bg-gray-100" style="height: {contentHeight}px">Content</p>
+    </BottomSheet>
+  {/if}
+</ShowHide>

packages/kitbook/src/docs/2-compositions/EarthquakeClusters.example.composition

@@ -0,0 +1,80 @@
+<script lang="ts">
+  // @ts-expect-error
+  import Map from '$lib/maps/mapbox/map/Map.svelte';
+  // @ts-expect-error
+  import GeoJSONSource from '$lib/maps/mapbox/sources/GeoJSONSource.svelte';
+  // @ts-expect-error
+  import Layer from '$lib/maps/mapbox/map/Layer.svelte';
+
+  // export let height = 350;
+  const clustersId = 'clusters';
+</script>
+
+<Map let:map>
+  <GeoJSONSource
+    data="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
+    options={{ cluster: true, clusterMaxZoom: 14, clusterRadius: 50 }}
+    let:source
+  >
+    <Layer
+      id={clustersId}
+      options={{
+        type: 'circle',
+        filter: ['has', 'point_count'],
+        paint: {
+          'circle-color': [
+            'step',
+            ['get', 'point_count'],
+            '#51bbd6',
+            100,
+            '#f1f075',
+            750,
+            '#f28cb1',
+          ],
+          'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
+        },
+      }}
+      on:click={({ detail }) => {
+        const features = map.queryRenderedFeatures(detail.point, {
+          layers: [clustersId],
+        });
+        const clusterId = features[0].properties.cluster_id;
+        source.getClusterExpansionZoom(clusterId, (err, zoom) => {
+          if (err) return;
+          map.easeTo({
+            center: features[0].geometry.coordinates,
+            zoom,
+          });
+        });
+      }}
+      on:mouseenter={() => (map.getCanvas().style.cursor = 'pointer')}
+      on:mouseleave={() => (map.getCanvas().style.cursor = '')}
+    />
+    <Layer
+      options={{
+        type: 'symbol',
+        filter: ['has', 'point_count'],
+        layout: {
+          'text-field': '{point_count_abbreviated}',
+          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+          'text-size': 12,
+        },
+      }}
+    />
+    <Layer
+      options={{
+        type: 'circle',
+        filter: ['!', ['has', 'point_count']],
+        paint: {
+          'circle-color': '#11b4da',
+          'circle-radius': 4,
+          'circle-stroke-width': 1,
+          'circle-stroke-color': '#fff',
+        },
+      }}
+      on:click={() => alert('point clicked')}
+      on:mouseenter={() => (map.getCanvas().style.cursor = 'pointer')}
+      on:mouseleave={() => (map.getCanvas().style.cursor = '')}
+    />
+  </GeoJSONSource>
+</Map>

packages/kitbook/src/docs/2-compositions/complex-examples.md

@@ -0,0 +1,21 @@
+## Complex User Interaction
+
+**NOTE: This page is in construction as compositions are under construction - you can ignore it for now.**
+
+Sometimes building components is more about testing interaction than they are about mocking various component states. In the `BottomSheet` component found in the [svelte-pieces](https://github.com/jacob-8/kitbook/tree/main/packages/svelte-pieces) package also in this monorepo. A Story component was set up that allowed for quick adjustment of some opening height props such that the component can be tested in a variety of conditions.
+
+[[./BottomSheet.example.composition]]
+
+Note especially the use of the helper `ShowHide` component. As a Story is just Svelte, you can do anything, even use `setContext` in your stories file.
+
+## Conglomeration of many components
+
+Sometimes you may want to prototype an arrangement of multiple components together. The following example combines a `Map`, `GeoJSONSource`, and `Layer` component from the [Living Dictionaries repo](https://github.com/livingtongues/living-dictionaries) into a display of earthquake clusters.
+
+
+[[./EarthquakeClusters.example.composition]]
+
+[//begin]: # "Autogenerated link references for markdown compatibility"
+[./BottomSheet.example.composition]: BottomSheet.example.composition "BottomSheet.example"
+[./EarthquakeClusters.example.composition]: EarthquakeClusters.example.composition "EarthquakeClusters.example"
+[//end]: # "Autogenerated link references"

packages/kitbook/src/lib/components/EditInGithub.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
-  import type { KitbookSettings } from 'kitbook'
-  import { getContext } from 'svelte'
-
   export let path: string
-  const settings = getContext<KitbookSettings>('kitbook-settings')
+  export let githubURL: string
 </script>
 
-{#if settings?.githubURL && path}
+{#if githubURL && path}
   <a
-    href={settings.githubURL + path}
-    class="text-blue-500 hover:text-blue-600 flex items-center my-5"
+    href={githubURL + path}
+    class="text-blue-500 hover:text-blue-600 inline-block items-center my-5"
     target="_blank"
     rel="noopener noreferrer">
     <span class="i-iconoir-page-edit text-lg mr-1" />Edit page on GitHub</a>

packages/kitbook/src/lib/components/EditInGithub.variants.ts

@@ -1,15 +1,13 @@
+import type { Variant } from 'kitbook'
 import type Component from './EditInGithub.svelte'
-import type { Variants } from '$lib'
 
-export const variants: Variants<Component> = [
+export const variants: Variant<Component>[] = [
   {
     name: 'With githubUrl context',
     props: {
       path: '/src/lib/components/EditInGithub.svelte',
+      githubURL: 'https://github.com/jacob-8/kitbook/tree/main/packages/kitbook',
     },
-    contexts: [
-      { key: 'githubUrl', context: 'https://github.com/jacob-8/kitbook/tree/main/packages/kitbook' },
-    ],
   },
   {
     name: 'Without githubUrl context',

packages/kitbook/src/lib/index.ts

@@ -1,4 +1,4 @@
-export type { KitbookSettings, Language, ViewerOptions, Viewport, Folder, Modules, Variant, Variants, GroupedPage, GroupedPageMap, LoadedModules, UngroupedPage, VariantsModule } from './kitbook-types'
+export type { KitbookSettings, Language, ViewerOptions, Viewport, Folder, Modules, Variant, GroupedPage, GroupedPageMap, LoadedModules, UngroupedPage, VariantsModule } from './kitbook-types'
 
 export { default as Layout } from './layout/Layout.svelte'
 export { layoutLoad } from './layout/layoutLoad'