@nil-/doc 1.0.0 → 2.0.0

package/src/routes/4-Internals/1-Container/Content.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    let {
+        vertical,
+        b,
+        name
+    }: {
+        vertical: boolean;
+        b: boolean;
+        name: string;
+    } = $props()
+</script>
+
+<h1>{name} slot: {b ? "Secondary" : "Primary"}</h1>
+{#if !b}
+    <table>
+        <thead>
+            <tr>
+                <th>property</th>
+                <th>value</th>
+                <th>default</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>vertical</td>
+                <td>{vertical}</td>
+                <td>false</td>
+            </tr>
+            <tr>
+                <td>b (use as Primary)</td>
+                <td>{"A" !== name}</td>
+                <td>false</td>
+            </tr>
+        </tbody>
+    </table>
+{:else}
+    <p>Will collapse when divider is double clicked.</p>
+    <p>Visual indication should be visible on drag.</p>
+{/if}

package/src/routes/4-Internals/1-Container/MD.svx

@@ -0,0 +1,13 @@
+# Container
+
+Create a layout where in:
+- `A` slot is at top/left
+- `B` slot is at bottom/right
+- `A` slot is the main content until `b` flag is enabled
+- double clicking/tapping the divider will:
+    - show primary content
+    - hide secondary content
+- offset is the initial width/height of the secondary content
+- `vertical` indicates how the divider is oriented
+
+---

package/src/routes/4-Internals/2-Icons/1-Nil/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import NilIcon from "$lib/components/layout/icons/Nil.svelte";
+</script>
+
+<div>
+    <NilIcon />
+</div>
+
+<style>
+    div {
+        width: 500px;
+        height: 500px;
+    }
+</style>

package/src/routes/4-Internals/2-Icons/2-Theme/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import ThemeIcon from "$lib/components/layout/icons/Theme.svelte";
+
+    let dark = $state(true);
+</script>
+
+<div class:dark onclick={() => (dark = !dark)} onkeypress={null} role="none">
+    <ThemeIcon {dark} />
+</div>
+
+<style>
+    div {
+        width: 500px;
+        height: 500px;
+        color: hsl(0, 0%, 0%);
+        background-color: hsl(0, 0%, 100%);
+        border-radius: 50% 50%;
+        display: grid;
+
+        transition:
+            color 350ms,
+            background-color 350ms;
+    }
+
+    div.dark {
+        color: hsl(0, 0%, 80%);
+        background-color: hsl(0, 0%, 6%);
+    }
+</style>

package/src/routes/4-Internals/2-Icons/3-Position/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import Button from "$lib/components/block/icons/Button.svelte";
+    import Component from "$lib/components/block/icons/Position.svelte";
+
+    const positions = ["hidden", "bottom", "right"] as const;
+    let index = $state(0);
+</script>
+
+<div>
+    <Button onclick={() => (index = (index + 1) % 3)}>
+        <Component position={positions[index]} />
+    </Button>
+</div>
+<div>
+    {positions[index]}
+</div>
+
+<style>
+    div {
+        width: 500px;
+        height: 500px;
+    }
+</style>

package/src/routes/4-Internals/2-Icons/4-ControlView/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import Button from "$lib/components/block/icons/Button.svelte";
+    import ControlView from "$lib/components/block/icons/ControlView.svelte";
+
+    let index = $state(0);
+    const modes = ["props", "events"] as const;
+</script>
+
+<div>
+    <Button onclick={() => (index = (index + 1) % 2)}>
+        <ControlView mode={modes[index]} />
+    </Button>
+</div>
+<div>
+    {modes[index]}
+</div>
+
+<style>
+    div {
+        width: 500px;
+        height: 500px;
+    }
+</style>

package/src/routes/4-Internals/3-Fuzzy Match/+page.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { flip } from "svelte/animate";
+
+    import { score } from "$lib/components/navigation/utils/fuzz";
+    import { getContext } from "svelte";
+
+    import { split } from "./eval";
+
+    const urls = getContext<string[]>("urls");
+    let value = "";
+
+    let sorted = $derived(urls
+        .map((u) => [u, score(u, value)] as [string, readonly [number, number[]]])
+        .sort((l, r) => {
+            if ("" !== value) {
+                const lscore = l[1][0];
+                const rscore = r[1][0];
+                if (lscore < rscore) {
+                    return +1;
+                }
+                if (lscore > rscore) {
+                    return -1;
+                }
+            }
+            return l[0].localeCompare(r[0]);
+        })
+    );
+</script>
+
+<h1>Fuzzy Match</h1>
+
+<div class="top">
+    <div>
+        <input type="text" bind:value />
+        <table>
+            <thead>
+                <tr>
+                    <th>text</th>
+                    <th>score</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each sorted as [text, [value, matches]] (text)}
+                    {@const selected = 0 === matches[0] ? 0 : 1}
+                    <tr animate:flip={{ duration: 350 }}>
+                        <td>
+                            <a href={text}>
+                                {#each [...split(text, matches)] as t, i (i)}
+                                    <span class:selected={i % 2 === selected}>{t}</span>
+                                {/each}
+                            </a>
+                        </td>
+                        <td>{value}</td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<style>
+    a {
+        font-family: "Fira Code";
+    }
+
+    .top {
+        display: grid;
+        place-items: center;
+    }
+
+    input {
+        width: 100%;
+        margin: 0px;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+
+    span.selected {
+        background-color: red;
+        color: white;
+    }
+
+    td:nth-child(2) {
+        text-align: center;
+    }
+</style>

package/src/routes/4-Internals/3-Fuzzy Match/eval.ts

@@ -0,0 +1,40 @@
+const byPair = function* (data: number[]): Generator<[number, number]> {
+    const len = data.length;
+    for (let i = 1; i < len; ++i) {
+        yield [data[i - 1], data[i]];
+    }
+};
+
+const ranges = function* (matches: number[]): Generator<[number, number]> {
+    const count = matches.length;
+    if (1 === count) {
+        yield [matches[0], matches[0]];
+    }
+    if (1 < count) {
+        let ongoing = matches[0];
+        const last = matches[matches.length - 1];
+        for (const [l, r] of byPair(matches)) {
+            if (l + 1 !== r) {
+                yield [ongoing, l];
+                ongoing = r;
+            }
+            if (r === last) {
+                yield [ongoing, r];
+            }
+        }
+    }
+};
+
+export const split = function* (text: string, matches: number[]) {
+    let last = 0;
+    for (const [l, r] of ranges(matches)) {
+        if (l !== last) {
+            yield text.substring(last, l);
+        }
+        yield text.substring(l, r + 1);
+        last = r + 1;
+    }
+    if (last !== text.length) {
+        yield text.substring(last);
+    }
+};

package/src/routes/[...rest]/+page.ts

@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export const load = () => {
+    throw redirect(303, "/1-Motivation");
+};

package/src/static/assets/admonitions.css

@@ -0,0 +1,113 @@
+.admonition {
+    margin-bottom: 1em;
+    padding: 15px 30px 15px 15px;
+}
+
+.admonition h5 {
+    margin-top: 0;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+}
+
+.admonition-icon {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 0.2em;
+}
+
+.admonition-icon svg {
+    display: inline-block;
+    width: 22px;
+    height: 22px;
+    stroke-width: 0;
+}
+
+.admonition-content > :last-child {
+    margin-bottom: 0;
+}
+
+/* default for custom types */
+.admonition {
+    background-color: rgba(118, 51, 219, 0.1);
+    border-left: 8px solid #7633db;
+}
+
+.admonition h5 {
+    color: #7633db;
+}
+
+.admonition .admonition-icon svg {
+    stroke: #7633db;
+    fill: #7633db;
+}
+
+/** native types */
+.admonition-caution {
+    background-color: rgba(230, 126, 34, 0.1);
+    border-left: 8px solid #e67e22;
+}
+
+.admonition-caution h5 {
+    color: #e67e22;
+}
+
+.admonition-caution .admonition-icon svg {
+    stroke: #e67e22;
+    fill: #e67e22;
+}
+
+.admonition-tip {
+    background-color: rgba(46, 204, 113, 0.1);
+    border-left: 8px solid #2ecc71;
+}
+
+.admonition-tip h5 {
+    color: #2ecc71;
+}
+
+.admonition-tip .admonition-icon svg {
+    stroke: #2ecc71;
+    fill: #2ecc71;
+}
+
+.admonition-warning {
+    background-color: rgba(231, 76, 60, 0.1);
+    border-left: 8px solid #e74c3c;
+}
+
+.admonition-warning h5 {
+    color: #e74c3c;
+}
+
+.admonition-warning .admonition-icon svg {
+    stroke: #e74c3c;
+    fill: #e74c3c;
+}
+
+.admonition-important {
+    background-color: rgba(52, 152, 219, 0.1);
+    border-left: 8px solid #3498db;
+}
+
+.admonition-important h5 {
+    color: #3498db;
+}
+
+.admonition-important .admonition-icon svg {
+    stroke: #3498db;
+    fill: #3498db;
+}
+
+.admonition-note {
+    background-color: rgba(241, 196, 15, 0.1);
+    border-left: 8px solid #f1c40f;
+}
+
+.admonition-note h5 {
+    color: #f1c40f;
+}
+
+.admonition-note .admonition-icon svg {
+    stroke: #f1c40f;
+    fill: #f1c40f;
+}

package/src/static/assets/favicon.svg

@@ -0,0 +1,15 @@
+<svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-22 -22 44 44"
+    fill="transparent"
+    stroke="white"
+    stroke-width="2"
+>
+    <g transform="rotate(45 0 0)">
+        <path d="M 0 -15 L 15 -15 L 15 0 L 0 0 -9 0 A 6 8 135 0 1 9 0"/>
+    </g>
+    <g transform="rotate(225 0 0)">
+        <path d="M 0 -15 L 15 -15 L 15 0 L 0 0 -9 0 A 6 8 135 0 1 9 0"/>
+    </g>
+</svg>