imprensa 0.1.2 → 0.1.3

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];
+}