Created basic documentation site as a placeholder (#2)

RobotPajamas · Dec 6, 2024 · 984c4d6 · 984c4d6
1 parent faaca6c
commit 984c4d6
Show file tree

Hide file tree

Showing 19 changed files with 221 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.49.0",
-    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.9.0",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="h-full bg-black" lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />

diff --git a/src/lib/field/Field.svelte b/src/lib/field/Field.svelte
@@ -2,10 +2,10 @@
   import type { Component, Snippet } from "svelte";
   import { useId } from "../../hooks/use-id";
 
-  import { getAllContexts, getContext } from "svelte";
+  import { getAllContexts, getContext, setContext } from "svelte";
 
-  const contexts = getAllContexts();
-  console.log(contexts);
+  // const contexts = getAllContexts();
+  // console.log(contexts);
 
   type Props = {
     /** The element or component the checkbox should render as. */
@@ -21,6 +21,7 @@
   };
 
   let providedDisabled = getContext<boolean>("headlessui-disabled-context");
+  console.log("Field: Incoming disabled context:", providedDisabled);
 
   let {
     id = `headlessui-control-${useId()}`,
@@ -43,6 +44,8 @@
   let dataAttributes: DataAttributes<SnippetProps> = {
     "data-disabled": disabled,
   };
+
+  setContext("headlessui-disabled-context", disabled);
 </script>
 
 {#if typeof as === "string"}

diff --git a/src/lib/fieldset/Fieldset.svelte b/src/lib/fieldset/Fieldset.svelte
@@ -15,6 +15,7 @@
   };
 
   let providedDisabled = getContext<boolean>("headlessui-disabled-context");
+  console.log("Fieldset: Incoming disabled context:", providedDisabled);
   let {
     as = "fieldset",
     disabled = providedDisabled || false,
@@ -43,6 +44,9 @@
   };
 
   setContext("headlessui-disabled-context", disabled);
+
+  let value = $state({ count: 0 });
+  setContext("counter", value);
 </script>
 
 {#if typeof as === "string"}

diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Nav from "./nav.svelte";
+
+  let { children } = $props();
+  import "../../app.css";
+</script>
+
+<div>
+  <div class="relative">
+    <main class="bg-black/80 px-4 sm:px-6">
+      <div class="mx-auto flex max-w-7xl">
+        <div class="sticky top-0 hidden h-screen w-[17rem] shrink-0 lg:block lg:pr-px xl:pr-[2px]">
+          <div class="h-full overflow-y-auto pb-[calc(80px+4rem)]">
+            <Nav />
+          </div>
+        </div>
+        <main class="flex min-w-0 flex-1 pt-16">
+          <div class="mx-auto max-w-[46rem] min-w-0 flex-1 px-2 md:px-8">
+            {@render children()}
+          </div>
+        </main>
+      </div>
+    </main>
+  </div>
+</div>
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Nav from "./nav.svelte";
+</script>
+
+<div class="prose"><h1>HeadlessUI Svelte</h1></div>
+<div class="lg:hidden">
+  <Nav />
+</div>
diff --git a/src/routes/(main)/[component]/+page.svelte b/src/routes/(main)/[component]/+page.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import Nav from "../nav.svelte";
+  const pageName = $derived($page.url.pathname.replace(/^\/|\/$/g, ""));
+</script>
+
+<div class="prose text-white"><h1>{pageName}</h1></div>
+<div class="prose mt-4 mb-6">
+  <p class="text-base/7"></p>
+</div>
+
+<div
+  class="relative mt-8 mb-12 flex flex-col items-center justify-center overflow-hidden"
+  style="height: 400px"
+>
+  <div class="size-full bg-white/5">
+    <iframe
+      src="examples/{pageName}"
+      class="size-full [color-scheme:auto]"
+      title="Button example"
+    ></iframe>
+  </div>
+</div>
+
+<div class="lg:hidden">
+  <Nav />
+</div>
diff --git a/src/routes/(main)/nav.svelte b/src/routes/(main)/nav.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  const components = ["button", "checkbox", "fieldset", "input", "switch"];
+</script>
+
+<nav>
+  <div class="border-t border-white/[7.5%] py-7">
+    <h3 class="px-4 pb-4 font-mono text-xs font-semibold uppercase tracking-widest text-white/50">
+      Forms
+    </h3>
+    <div class="flex flex-col gap-4 px-4">
+      {#each components as component}
+        <!-- data-active={$page.url.pathname === component} -->
+        <a
+          class="group block whitespace-nowrap py-2 px-6 text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:py-0 lg:px-0 lg:text-sm"
+          href="/{component}"
+        >{component}</a>
+      {/each}
+    </div>
+  </div>
+</nav>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -0,0 +1 @@
+<h1>Womp womp</h1>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
diff --git a/src/routes/examples/+layout.svelte b/src/routes/examples/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import "../../app.css";
+
+  let { children } = $props();
+</script>
+
+<div class="relative bg-white/5">
+  <div class="absolute inset-[35%] block rounded-full bg-white/15 blur-2xl"></div>
+  <div class="relative flex min-h-screen w-full flex-col items-center justify-center">
+    {@render children()}
+  </div>
+</div>
diff --git a/src/routes/examples/button/+page.svelte b/src/routes/examples/button/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Button from "$lib/button/Button.svelte";
+</script>
+
+<Button
+  class="inline-flex items-center gap-2 rounded-md bg-gray-700 py-1.5 px-3 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-600 data-[open]:bg-gray-700 data-[focus]:outline-1 data-[focus]:outline-white"
+>Save changes
+</Button>
diff --git a/src/routes/examples/checkbox/+page.svelte b/src/routes/examples/checkbox/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Checkbox from "$lib/checkbox/Checkbox.svelte";
+</script>
+
+<p class="text-white">TODO</p>
+
+<!-- <Checkbox
+    checked={enabled}
+    onChange={setEnabled}
+    className="group size-6 rounded-md bg-white/10 p-1 ring-1 ring-white/15 ring-inset data-[checked]:bg-white"
+>
+    <CheckIcon
+        className="hidden size-4 fill-black group-data-[checked]:block"
+    />
+</Checkbox> -->
diff --git a/src/routes/examples/fieldset/+page.svelte b/src/routes/examples/fieldset/+page.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import Field from "$lib/field/Field.svelte";
+  import Fieldset from "$lib/fieldset/Fieldset.svelte";
+  import Input from "$lib/input/Input.svelte";
+</script>
+
+<div class="w-full max-w-lg px-4">
+  <Fieldset class="space-y-6 rounded-xl bg-white/5 p-6 sm:p-10">
+    <p class="text-base/7 font-semibold text-white">Shipping details</p>
+    <Field>
+      <p class="text-sm/6 font-medium text-white">Street address</p>
+      <Input
+        class="mt-3 block w-full rounded-lg border-none bg-white/5 py-1.5 px-3 text-sm/6 text-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
+      />
+    </Field>
+    [TODO Select]
+    <!-- <Field>
+        <p class="text-sm/6 font-medium text-white">Country</p>
+        <p class="text-sm/6 text-white/50">We currently only ship to North America.</p>
+        <div class="relative">
+          <Select
+            class={clsx(
+              'mt-3 block w-full appearance-none rounded-lg border-none bg-white/5 py-1.5 px-3 text-sm/6 text-white',
+              'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
+              // Make the text of each option black on Windows
+              '*:text-black'
+            )}
+          >
+            <option>Canada</option>
+            <option>Mexico</option>
+            <option>United States</option>
+          </Select>
+          <ChevronDownIcon
+            class="group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60"
+            aria-hidden="true"
+          />
+        </div>
+      </Field> -->
+    <Field>
+      <p class="text-sm/6 font-medium text-white">Delivery notes</p>
+      <p class="text-sm/6 text-white/50">
+        If you have a tiger, we'd like to know about it.
+      </p>
+      [TODO: TextArea]
+      <!-- <Textarea
+          class={clsx(
+            'mt-3 block w-full resize-none rounded-lg border-none bg-white/5 py-1.5 px-3 text-sm/6 text-white',
+            'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25'
+          )}
+          rows={3}
+        /> -->
+    </Field>
+  </Fieldset>
+</div>
diff --git a/src/routes/examples/input/+page.svelte b/src/routes/examples/input/+page.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Field from "$lib/field/Field.svelte";
+  import Input from "$lib/input/Input.svelte";
+</script>
+
+<div class="w-full max-w-md px-4">
+  <Field>
+    <p class="text-sm/6 font-medium text-white">Name</p>
+    <p class="text-sm/6 text-white/50">
+      Use your real name so people will recognize you.
+    </p>
+    <Input
+      class="mt-3 block w-full rounded-lg border-none bg-white/5 py-1.5 px-3 text-sm/6 text-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
+    />
+  </Field>
+</div>
diff --git a/src/routes/examples/switch/+page.svelte b/src/routes/examples/switch/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Switch from "$lib/switch/Switch.svelte";
+</script>
+
+<!-- checked={enabled}
+    onChange={setEnabled} -->
+<Switch
+  class="group relative flex h-7 w-14 cursor-pointer rounded-full bg-white/10 p-1 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white data-[checked]:bg-white/10"
+>
+  <span
+    aria-hidden="true"
+    class="pointer-events-none inline-block size-5 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-7"
+  />
+</Switch>
diff --git a/svelte.config.js b/svelte.config.js
@@ -1,19 +1,11 @@
-import adapter from "@sveltejs/adapter-auto";
+import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // TODO: Need to investigate whether accessors and/or dev are necessary
-  // compilerOptions: {
-  //   accessors: true,
-  //   dev: true,
-  //   discloseVersion: false,
-  //   runes: true,
-  // },
   compilerOptions: {
     runes: true,
   },
-
   kit: {
     adapter: adapter(),
   },