@lickle/docs 0.0.0-dev.1

package/src/ui/components/Sidebar.tsx

@@ -0,0 +1,107 @@
+import { For, Show, createMemo, createSignal } from 'solid-js'
+import { A, useLocation } from '@solidjs/router'
+
+import { createSlot, useProject, type Types } from '../context/index.ts'
+import { Type } from './Type.tsx'
+
+type Node = Types.RouteNode
+
+export const Sidebar = createSlot('sidebar', (props: { onNavigate?: () => void; class?: string }) => {
+  const project = useProject()
+  const routes = createMemo(() => project().routes.filter((r) => r.sidebar))
+
+  return (
+    <aside class={`text-[0.8125rem] ${props.class ?? ''}`}>
+      <nav class="pt-5 pb-10 px-2.5 space-y-0.5">
+        <NavList nodes={routes()} depth={0} onNavigate={props.onNavigate} />
+      </nav>
+    </aside>
+  )
+})
+
+/** A list of sibling routes, with a `group` header inserted whenever it changes. */
+const NavList = (props: { nodes: Node[]; depth: number; onNavigate?: () => void }) => (
+  <For each={props.nodes}>
+    {(node, i) => (
+      <>
+        <Show when={node.group && node.group !== props.nodes[i() - 1]?.group}>
+          <GroupHeader label={node.group!} depth={props.depth} />
+        </Show>
+        <NavNode node={node} depth={props.depth} onNavigate={props.onNavigate} />
+      </>
+    )}
+  </For>
+)
+
+const GroupHeader = (props: { label: string; depth: number }) => (
+  <div
+    class="pt-4 pb-1 px-2 text-[0.7rem] uppercase tracking-wider font-semibold text-mute first:pt-1"
+    style={{ 'padding-left': indent(props.depth) }}
+  >
+    {props.label}
+  </div>
+)
+
+type NodeProps = { node: Node; depth: number; onNavigate?: () => void }
+
+const NavNode = (props: NodeProps) => {
+  const loc = useLocation()
+  const kids = createMemo(() => props.node.children.filter((c) => c.sidebar))
+  const hasChildren = () => kids().length > 0
+  const isActive = () => loc.pathname === `/${props.node.slug}`
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <div>
+      <div class="flex items-center" style={{ 'padding-left': indent(props.depth) }}>
+        <Show when={hasChildren()} fallback={<span class="w-5 shrink-0" />}>
+          <button
+            type="button"
+            aria-label={open() ? 'Collapse' : 'Expand'}
+            aria-expanded={open()}
+            onClick={() => setOpen((v) => !v)}
+            class="p-1 rounded-md text-mute hover:bg-hover hover:text-fg transition-colors cursor-pointer"
+          >
+            <Chevron open={open()} />
+          </button>
+        </Show>
+        <A
+          href={`/${props.node.slug}`}
+          class="flex-1 flex items-center gap-2 rounded-md px-1.5 py-1 text-mute hover:bg-hover hover:text-fg transition-colors min-w-0"
+          classList={{ '!text-fg !bg-hover font-medium': isActive() }}
+          onClick={() => props.onNavigate?.()}
+        >
+          <KindCue node={props.node} />
+          <span class="font-mono truncate">{props.node.label}</span>
+        </A>
+      </div>
+      <Show when={hasChildren() && open()}>
+        <NavList nodes={kids()} depth={props.depth + 1} onNavigate={props.onNavigate} />
+      </Show>
+    </div>
+  )
+}
+
+const indent = (depth: number): string => `${depth * 0.75}rem`
+
+const KindCue = (props: { node: Node }) => {
+  const project = useProject()
+  const kind = () => {
+    const page = props.node.page
+    if (page.kind === 'markdown') return undefined
+    return project().byId(page.id)?.kind
+  }
+  return <Show when={kind()}>{(k) => <Type.KindBadge kind={k()} class="text-[0.7rem]! w-3.5 shrink-0" />}</Show>
+}
+
+const Chevron = (props: { open: boolean }) => (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 12 12"
+    class={`shrink-0 text-mute transition-transform ${props.open ? 'rotate-90' : ''}`}
+    aria-hidden="true"
+  >
+    <path d="M4 2.5 7.5 6 4 9.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" />
+  </svg>
+)

package/src/ui/components/Syntax.tsx

@@ -0,0 +1,10 @@
+export namespace Syntax {
+  /** Muted punctuation — brackets, commas, `=`, etc. */
+  export const Punct = (p: { children: string }) => <span class="text-mute">{p.children}</span>
+
+  /** Accent keyword — `const`, `type`, `extends`, intrinsics. */
+  export const Kw = (p: { children: string }) => <span class="text-accent">{p.children}</span>
+
+  /** Default-styled identifier. */
+  export const Name = (p: { children: string }) => <span>{p.children}</span>
+}

package/src/ui/components/ThemeToggle.tsx

@@ -0,0 +1,50 @@
+import { useTheme, type ThemeMode } from '../context/theme.tsx'
+import { For } from 'solid-js'
+
+const ICONS: Record<ThemeMode, string> = {
+  light:
+    'M12 4V2M12 22v-2M4 12H2m20 0h-2M5.6 5.6 4.2 4.2m15.6 15.6-1.4-1.4M5.6 18.4 4.2 19.8M19.8 4.2l-1.4 1.4M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z',
+  dark: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z',
+  system: 'M3 6h18v10H3z M8 20h8 M12 16v4',
+}
+
+const LABELS: Record<ThemeMode, string> = { light: 'Light', dark: 'Dark', system: 'System' }
+
+export const ThemeToggle = () => {
+  const { mode, setMode } = useTheme()
+  const order: ThemeMode[] = ['system', 'light', 'dark']
+
+  return (
+    <div role="radiogroup" aria-label="Theme" class="inline-flex items-center gap-0.5">
+
+      <For each={order}>
+        {(m) => (
+          <button
+            type="button"
+            role="radio"
+            aria-checked={mode() === m}
+            title={LABELS[m]}
+            onClick={() => setMode(m)}
+            class="px-2 py-1 rounded-[5px] transition-colors duration-150 text-mute hover:text-fg cursor-pointer"
+            classList={{
+              'bg-hover text-fg': mode() === m,
+            }}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d={ICONS[m]} />
+            </svg>
+          </button>
+        )}
+      </For>
+    </div>
+  )
+}