imprensa 0.1.1 → 0.1.3

package/src/components/search.tsx

@@ -0,0 +1,140 @@
+/** @jsxImportSource ilha */
+import { Button, Icon, LinkButton } from "areia";
+import ilha from "ilha";
+import { Command, Monitor, Moon, Search, Sun } from "lucide";
+import { applyThemeToHtml, getStoredTheme, setStoredTheme } from "imprensa/runtime";
+
+export { getSearchResults, type SearchResult } from "./search-core";
+export {
+  closeSearch,
+  closeSearch as closeSearchDialog,
+  openSearch,
+  searchOpen,
+  searchQuery,
+  searchStore,
+  toggleSearch,
+  type ImprensaSearchState,
+  type SearchBindAccessors,
+} from "./search-store";
+
+export function LogoButton() {
+  return (
+    <LinkButton href="/" class="font-semibold" icon={<img src="/logo.svg" class="size-6" />}>
+      Imprensa
+    </LinkButton>
+  );
+}
+
+export const ThemeToggle = ilha
+  .state("mode", "system" as "light" | "dark" | "system")
+  .onMount(({ state }) => {
+    const mode = getStoredTheme();
+    state.mode(mode);
+
+    const applySystem = () =>
+      applyThemeToHtml(window.matchMedia("(prefers-color-scheme: dark)").matches);
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      if (state.mode() === "system") applySystem();
+    };
+    mq.addEventListener("change", handler);
+
+    if (mode === "system") applySystem();
+    else applyThemeToHtml(mode === "dark");
+
+    return () => mq.removeEventListener("change", handler);
+  })
+  .on("button@click", ({ state }) => {
+    const next = state.mode() === "light" ? "dark" : state.mode() === "dark" ? "system" : "light";
+    state.mode(next);
+    setStoredTheme(next);
+    if (next === "system")
+      applyThemeToHtml(window.matchMedia("(prefers-color-scheme: dark)").matches);
+    else applyThemeToHtml(next === "dark");
+  })
+  .render(({ state }) => (
+    <Button
+      shape="square"
+      aria-label={
+        state.mode() === "light"
+          ? "Switch to dark theme"
+          : state.mode() === "dark"
+            ? "Switch to system theme"
+            : "Switch to light theme"
+      }
+      icon={
+        <Icon icon={state.mode() === "light" ? Sun : state.mode() === "dark" ? Moon : Monitor} />
+      }
+    />
+  ));
+
+/**
+ * @deprecated Replaced by `GlobalSearch` (body-mounted in `createImprensa().init()`).
+ * Kept so the vite plugin island registry stays stable.
+ */
+export const SearchOverlay = ilha.render(() => <></>);
+
+export function SearchTriggerButton(props: { class?: string }) {
+  return (
+    <Button
+      type="button"
+      data-search-trigger
+      aria-label="Search documentation"
+      icon={<Icon icon={Search} />}
+      class={props.class}
+    />
+  );
+}
+
+export function SearchSidebarTrigger() {
+  return (
+    <div class="relative inline-flex w-full min-w-0">
+      <Button
+        type="button"
+        data-search-trigger
+        aria-label="Search documentation"
+        icon={<Icon icon={Search} />}
+        class="w-10 justify-center sm:w-full sm:justify-start"
+      >
+        <span class="hidden sm:inline">Search</span>
+        <kbd class="ml-auto hidden items-center border border-areia-border py-px px-1 rounded-full md:flex">
+          <Icon icon={Command} class="size-3" />
+          <span>K</span>
+        </kbd>
+      </Button>
+    </div>
+  );
+}
+
+export function SearchMobileTriggerButton() {
+  return (
+    <Button
+      type="button"
+      shape="square"
+      data-search-trigger
+      aria-label="Search documentation"
+      icon={<Icon icon={Search} />}
+      class="shrink-0"
+    />
+  );
+}
+
+export function SearchNavbarTrigger() {
+  return (
+    <div class="relative inline-flex min-w-0">
+      <Button
+        type="button"
+        data-search-trigger
+        aria-label="Search documentation"
+        icon={<Icon icon={Search} />}
+        class="w-10 shrink-0 justify-center sm:w-auto sm:min-w-[7.5rem] sm:justify-start sm:gap-2 sm:px-3"
+      >
+        <span class="hidden sm:inline">Search</span>
+        <kbd class="ml-auto hidden items-center border border-areia-border py-px px-1 rounded-full md:inline-flex">
+          <Icon icon={Command} class="size-3" />
+          <span>K</span>
+        </kbd>
+      </Button>
+    </div>
+  );
+}

package/src/components/sidebar-layout.ts

@@ -0,0 +1,53 @@
+export const SIDEBAR_STORAGE_KEY = "imprensa:sidebar-layout";
+export const DEFAULT_SIDEBAR_LAYOUT: [number, number] = [20, 80];
+
+export function readSidebarLayout(): [number, number] {
+  if (typeof localStorage === "undefined") return DEFAULT_SIDEBAR_LAYOUT;
+  try {
+    const layout = JSON.parse(localStorage.getItem(SIDEBAR_STORAGE_KEY) ?? "null");
+    if (
+      Array.isArray(layout) &&
+      layout.length === 2 &&
+      layout.every((size) => typeof size === "number")
+    ) {
+      return [layout[0], layout[1]];
+    }
+  } catch {
+    // ignore corrupt storage
+  }
+  return DEFAULT_SIDEBAR_LAYOUT;
+}
+
+export function writeSidebarLayout(layout: number[]) {
+  try {
+    localStorage.setItem(SIDEBAR_STORAGE_KEY, JSON.stringify(layout));
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+/** Injected into index.html so the saved split applies before first paint. */
+export const SIDEBAR_LAYOUT_BOOT_SCRIPT = `<script>
+(function () {
+  try {
+    var raw = localStorage.getItem(${JSON.stringify(SIDEBAR_STORAGE_KEY)});
+    if (!raw) return;
+    var layout = JSON.parse(raw);
+    if (!Array.isArray(layout) || layout.length !== 2) return;
+    var a = layout[0], b = layout[1];
+    if (typeof a !== "number" || typeof b !== "number") return;
+    var root = document.documentElement;
+    root.dataset.imprensaSidebarLayout = "1";
+    root.style.setProperty("--imprensa-sidebar-pct", String(a));
+    root.style.setProperty("--imprensa-content-pct", String(b));
+  } catch (e) {}
+})();
+</script>
+<style id="imprensa-sidebar-layout-boot">
+  html[data-imprensa-sidebar-layout] [data-slot="resizable"] > [data-slot="resizable-panel"]:first-child {
+    flex-grow: var(--imprensa-sidebar-pct) !important;
+  }
+  html[data-imprensa-sidebar-layout] [data-slot="resizable"] > [data-slot="resizable-panel"]:last-child {
+    flex-grow: var(--imprensa-content-pct) !important;
+  }
+</style>`;

package/src/components/sidebar.tsx

@@ -0,0 +1,76 @@
+/** @jsxImportSource ilha */
+import { useRoute } from "@ilha/router";
+import { Collapsible, Icon, LinkButton } from "areia";
+import ilha from "ilha";
+import { ExternalLink } from "lucide";
+import { contentTree, type ContentTreeNode } from "imprensa/mdx";
+import { LogoButton, SearchSidebarTrigger } from "./search";
+import { NavFooterBar } from "./nav-footer-bar";
+import type { ImprensaUiTree } from "./ilha-ui";
+import { cx } from "./classes";
+import { treeIndentClass } from "./tree-indent";
+
+const ACTIVE_LINK_CLASS =
+  "border-areia-primary text-areia-primary ring-1 ring-inset ring-areia-primary/30";
+
+function renderTree(nodes: ContentTreeNode[], currentPath: string, depth = 0): ImprensaUiTree[] {
+  return nodes.map((node) => {
+    const href = node.type === "link" ? node.link : node.path;
+    const active =
+      node.path && node.type !== "link"
+        ? (node.path.replace(/\/$/, "") || "/") === currentPath
+        : false;
+    const link = href ? (
+      <LinkButton
+        href={href}
+        external={node.external}
+        variant={active ? "outline" : "ghost"}
+        class={cx(
+          "w-full justify-start",
+          node.type === "link" && node.external && "justify-between",
+          active && ACTIVE_LINK_CLASS,
+        )}
+      >
+        <span class="min-w-0 truncate">{node.title}</span>
+        {node.type === "link" && node.external ? (
+          <Icon icon={ExternalLink} class="size-3.5 shrink-0" />
+        ) : null}
+      </LinkButton>
+    ) : (
+      <span class="text-sm font-medium text-areia-subtle">{node.title}</span>
+    );
+    return (
+      <div class={cx("mt-px flex flex-col gap-1", treeIndentClass(depth))}>
+        {node.children.length > 0 ? (
+          <Collapsible defaultOpen>
+            <Collapsible.Trigger class="w-full rounded-md px-2 py-1 text-left hover:bg-areia-control-hover">
+              {link}
+            </Collapsible.Trigger>
+            <Collapsible.Panel class="mt-1 flex flex-col p-px">
+              {renderTree(node.children, currentPath, node.path ? depth + 1 : depth)}
+            </Collapsible.Panel>
+          </Collapsible>
+        ) : (
+          link
+        )}
+      </div>
+    );
+  });
+}
+
+export const Sidebar = ilha.render(() => {
+  const { path } = useRoute();
+  const currentPath = path().replace(/\/$/, "") || "/";
+  return (
+    <div class="flex h-full min-h-0 flex-col gap-2 p-2">
+      <div class="flex items-center">
+        <LogoButton />
+      </div>
+      <SearchSidebarTrigger />
+      <nav class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-y-contain px-0.5">
+        {renderTree(contentTree, currentPath)}
+      </nav>
+      <NavFooterBar class="mt-auto" />
+    </div>
+  );
+});

package/src/components/snippet.tsx

@@ -0,0 +1,38 @@
+/** @jsxImportSource ilha */
+import ilha from "ilha";
+import { shikiThemes } from "imprensa/config";
+import type { ImprensaShikiHighlighter } from "../core/shiki-types";
+
+const WRAPPER_CLASS =
+  "max-w-full overflow-x-auto rounded-xl border border-areia-border text-xs leading-relaxed [&_pre]:min-w-max [&_pre]:p-4 [&_pre]:text-xs [&_pre]:leading-relaxed [&_pre]:!m-0";
+
+function escapeHtml(code: string) {
+  return code.replace(/&/g, "&amp;").replace(/</g, "&lt;");
+}
+
+export const Snippet = ilha
+  .input<{ code: string; lang: string }>()
+  .onMount(({ host, input }) => {
+    const mount = host.querySelector<HTMLElement>("[data-imprensa-snippet]")!;
+    if (mount.querySelector(".shiki")) return;
+
+    const { code, lang } = input;
+    mount.replaceChildren();
+
+    const pre = document.createElement("pre");
+    pre.className =
+      "rounded-lg bg-areia-surface-muted border border-areia-border p-4 overflow-x-auto text-xs leading-relaxed";
+    pre.innerHTML = `<code>${escapeHtml(code)}</code>`;
+    mount.appendChild(pre);
+
+    void import("imprensa/shiki").then(async ({ shiki }) => {
+      const h = shiki as ImprensaShikiHighlighter;
+      await h.loadLanguage(lang);
+      const div = document.createElement("div");
+      div.innerHTML = h.codeToHtml(code, { lang, themes: shikiThemes });
+      const highlighted = div.firstElementChild;
+      if (!highlighted) return;
+      mount.replaceChildren(highlighted);
+    });
+  })
+  .render(() => <div class={WRAPPER_CLASS} data-imprensa-snippet />);

package/src/components/tree-indent.ts

@@ -0,0 +1,14 @@
+/** Sidebar / mobile nav tree depth → Tailwind class from `imprensa/default.css`. */
+const TREE_INDENT = [
+  "imprensa-tree-indent-0",
+  "imprensa-tree-indent-1",
+  "imprensa-tree-indent-2",
+  "imprensa-tree-indent-3",
+  "imprensa-tree-indent-4",
+  "imprensa-tree-indent-5",
+  "imprensa-tree-indent-6",
+] as const;
+
+export function treeIndentClass(depth: number): string {
+  return TREE_INDENT[Math.min(Math.max(depth, 0), TREE_INDENT.length - 1)] ?? TREE_INDENT[6];
+}