idcmd 0.0.5 → 0.0.7

package/templates/default/site/code/ui/layout.tsx

@@ -0,0 +1,237 @@
+import type { LayoutProps } from "idcmd/client";
+/* eslint-disable react/no-danger */
+import type { JSX } from "preact";
+
+import { render } from "preact-render-to-string";
+
+import { RightRail } from "./right-rail";
+
+type NavItem = LayoutProps["navigation"][number]["items"][number];
+
+const Icon = ({ svg }: { svg: string }): JSX.Element => (
+  <span
+    class="inline-flex h-[18px] w-[18px]"
+    dangerouslySetInnerHTML={{ __html: svg }}
+  />
+);
+
+const isActiveLink = (item: NavItem, currentPath: string): boolean =>
+  currentPath === item.href ||
+  (item.href !== "/" && currentPath.startsWith(item.href));
+
+const Sidebar = ({
+  siteName,
+  navigation,
+  currentPath,
+}: {
+  siteName: LayoutProps["siteName"];
+  navigation: LayoutProps["navigation"];
+  currentPath: LayoutProps["currentPath"];
+}): JSX.Element => (
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <a
+        href="/"
+        class="text-sm font-medium tracking-tight"
+        data-prefetch="hover"
+      >
+        <span class="text-muted-foreground">~/</span>
+        {siteName}
+      </a>
+    </div>
+    <div class="sidebar-content">
+      {navigation.map((group) => (
+        <div key={group.id} class="py-2">
+          <p class="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {group.label}
+          </p>
+          <nav class="space-y-1">
+            {group.items.map((item) => (
+              <a
+                key={item.href}
+                href={item.href}
+                data-prefetch="hover"
+                class={`flex items-center gap-3 px-3 py-1.5 text-sm transition-colors hover:text-sidebar-foreground ${
+                  isActiveLink(item, currentPath)
+                    ? "border-l-2 border-sidebar-primary font-medium text-sidebar-foreground"
+                    : "border-l-2 border-transparent"
+                }`}
+              >
+                <Icon svg={item.iconSvg} />
+                <span>{item.title}</span>
+              </a>
+            ))}
+          </nav>
+        </div>
+      ))}
+    </div>
+  </aside>
+);
+
+const SearchForm = ({ query }: { query?: string }): JSX.Element => (
+  <form
+    method="get"
+    action="/search/"
+    class="flex w-full items-center"
+    role="search"
+    noValidate
+  >
+    <label htmlFor="site-search" class="sr-only">
+      Search pages
+    </label>
+    <input
+      id="site-search"
+      name="q"
+      type="search"
+      autoComplete="off"
+      spellcheck={false}
+      placeholder="Search..."
+      defaultValue={query ?? ""}
+      class="w-full border-b border-input bg-transparent px-1 py-1.5 text-sm placeholder:text-muted-foreground focus:border-foreground focus:outline-none transition-colors"
+    />
+  </form>
+);
+
+const TopNavbar = ({
+  query,
+  siteName,
+}: {
+  query?: LayoutProps["searchQuery"];
+  siteName: LayoutProps["siteName"];
+}): JSX.Element => (
+  <header class="sticky top-0 z-30 border-b border-border bg-background/80 backdrop-blur-sm">
+    <div class="mx-auto max-w-6xl px-8 py-3">
+      <div class="flex items-center gap-4">
+        <a
+          href="/"
+          class="text-sm font-mono font-medium tracking-tight md:hidden"
+          data-prefetch="hover"
+        >
+          <span class="text-muted-foreground">~/</span>
+          {siteName}
+        </a>
+        <div class="not-prose ml-auto w-full max-w-xs">
+          <SearchForm query={query} />
+        </div>
+      </div>
+    </div>
+  </header>
+);
+
+const buildHtmlClass = (
+  smoothScroll: LayoutProps["rightRail"]["smoothScroll"]
+): string => (smoothScroll ? "dark smooth-scroll" : "dark");
+
+const buildScrollSpyDataset = (props: {
+  isScrollSpyEnabled: boolean;
+  rightRail: LayoutProps["rightRail"];
+}): {
+  scrollspy?: string;
+  scrollspyCenter?: string;
+  scrollspyUpdateHash?: string;
+} =>
+  props.isScrollSpyEnabled
+    ? {
+        scrollspy: "1",
+        scrollspyCenter: props.rightRail.scrollSpy.centerActiveItem
+          ? "1"
+          : undefined,
+        scrollspyUpdateHash: props.rightRail.scrollSpy.updateHash,
+      }
+    : {};
+
+const Layout = ({
+  title,
+  siteName,
+  description,
+  canonicalUrl,
+  content,
+  cssPath,
+  inlineCss,
+  currentPath,
+  navigation,
+  scriptPaths = [],
+  searchQuery,
+  showRightRail = true,
+  rightRail,
+  tocItems,
+}: LayoutProps): JSX.Element => {
+  const resolvedCssPath = inlineCss ? undefined : (cssPath ?? "/styles.css");
+  const shouldShowRightRail = showRightRail && rightRail.enabled;
+  const isScrollSpyEnabled =
+    shouldShowRightRail && rightRail.scrollSpy.enabled && tocItems.length > 0;
+  const scrollSpyDataset = buildScrollSpyDataset({
+    isScrollSpyEnabled,
+    rightRail,
+  });
+
+  return (
+    <html lang="en" class={buildHtmlClass(rightRail.smoothScroll)}>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{title}</title>
+        {description ? <meta name="description" content={description} /> : null}
+        {canonicalUrl ? <link rel="canonical" href={canonicalUrl} /> : null}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+          rel="stylesheet"
+        />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        {inlineCss ? <style>{inlineCss}</style> : null}
+        {resolvedCssPath ? (
+          <link rel="stylesheet" href={resolvedCssPath} />
+        ) : null}
+      </head>
+      <body
+        class="bg-background font-sans text-foreground"
+        data-scrollspy={scrollSpyDataset.scrollspy}
+        data-scrollspy-center={scrollSpyDataset.scrollspyCenter}
+        data-scrollspy-update-hash={scrollSpyDataset.scrollspyUpdateHash}
+      >
+        <Sidebar
+          siteName={siteName}
+          navigation={navigation}
+          currentPath={currentPath}
+        />
+        <div class="main-wrapper">
+          <TopNavbar query={searchQuery} siteName={siteName} />
+          <main class="main-content">
+            <div class="mx-auto flex w-full max-w-6xl items-start gap-10">
+              <article
+                class={`prose min-w-0 flex-1${
+                  currentPath === "/" ? " prose-home" : ""
+                }`}
+                dangerouslySetInnerHTML={{ __html: content }}
+              />
+              {shouldShowRightRail ? (
+                <RightRail
+                  canonicalUrl={canonicalUrl}
+                  currentPath={currentPath}
+                  tocItems={tocItems}
+                  rightRailConfig={rightRail}
+                />
+              ) : null}
+            </div>
+          </main>
+          <footer class="site-footer">
+            Built with Preact SSR + Tailwind &nbsp;|&nbsp; Zero JavaScript on
+            content pages
+          </footer>
+        </div>
+        {scriptPaths.map((scriptPath) => (
+          <script key={scriptPath} defer src={scriptPath} />
+        ))}
+      </body>
+    </html>
+  );
+};
+
+export const renderLayout = (props: LayoutProps): string =>
+  `<!DOCTYPE html>${render(<Layout {...props} />)}`;

package/templates/default/site/code/ui/right-rail.tsx

@@ -0,0 +1,246 @@
+import type { RightRailProps } from "idcmd/client";
+import type { JSX } from "preact";
+
+const CaretDownIcon = (): JSX.Element => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M7 10l5 5 5-5"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+const CopyIcon = (): JSX.Element => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M9 9h10v12H9V9z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+const buildSlugFromCurrentPath = (currentPath: string): string => {
+  if (currentPath === "/") {
+    return "index";
+  }
+
+  const trimmed = currentPath.replaceAll(/^\/+|\/+$/g, "");
+  return trimmed || "index";
+};
+
+const buildAskUrls = ({
+  canonicalUrl,
+  currentPath,
+}: {
+  canonicalUrl?: string;
+  currentPath: string;
+}): { chatgptUrl: string; claudeUrl: string; markdownPath: string } => {
+  const slug = buildSlugFromCurrentPath(currentPath);
+  const markdownPath = `/${slug}.md`;
+  const markdownUrl = canonicalUrl
+    ? new URL(markdownPath, canonicalUrl).toString()
+    : markdownPath;
+
+  const llmsTxtUrl = canonicalUrl
+    ? new URL("/llms.txt", canonicalUrl).toString()
+    : "/llms.txt";
+
+  const prompt = `Investigate this document and explain it to the user: ${markdownUrl}\ndirectory for further exploration: ${llmsTxtUrl}`;
+
+  const chatgpt = new URL("https://chatgpt.com/");
+  chatgpt.searchParams.set("prompt", prompt);
+
+  const claude = new URL("https://claude.ai/new");
+  claude.searchParams.set("q", prompt);
+
+  return {
+    chatgptUrl: chatgpt.toString(),
+    claudeUrl: claude.toString(),
+    markdownPath,
+  };
+};
+
+const AskInDropdown = ({
+  claudeUrl,
+  chatgptUrl,
+  markdownPath,
+}: {
+  claudeUrl: string;
+  chatgptUrl: string;
+  markdownPath: string;
+}): JSX.Element => (
+  <details class="llm-menu relative">
+    <summary class="flex w-full cursor-pointer select-none items-center justify-between gap-3 rounded-full border border-white/20 bg-card/30 px-4 py-2 text-sm shadow-sm hover:border-white/30 hover:bg-card/40">
+      <span class="flex items-center gap-2">
+        <img
+          src="/openai-white.svg"
+          alt=""
+          width={18}
+          height={18}
+          class="shrink-0"
+        />
+        <span>Ask in ChatGPT</span>
+      </span>
+      <span class="text-muted-foreground">
+        <CaretDownIcon />
+      </span>
+    </summary>
+
+    <div class="absolute left-0 right-0 z-50 mt-2 rounded-xl border border-border bg-popover p-1 shadow-sm">
+      <a
+        href={chatgptUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-muted"
+      >
+        <img
+          src="/openai-white.svg"
+          alt=""
+          width={18}
+          height={18}
+          class="shrink-0"
+        />
+        <span>Ask in ChatGPT</span>
+      </a>
+      <a
+        href={claudeUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-muted"
+      >
+        <img
+          src="/anthropic-white.svg"
+          alt=""
+          width={18}
+          height={18}
+          class="shrink-0"
+        />
+        <span>Ask in Claude</span>
+      </a>
+      <a
+        href={markdownPath}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-copy-markdown="1"
+        class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm hover:bg-muted"
+      >
+        <span class="shrink-0 text-muted-foreground">
+          <CopyIcon />
+        </span>
+        <span data-copy-markdown-label="1">Copy Markdown to Clipboard</span>
+      </a>
+    </div>
+  </details>
+);
+
+const OnThisPage = ({
+  items,
+}: {
+  items: RightRailProps["tocItems"];
+}): JSX.Element => (
+  <section class="flex min-h-0 flex-1 flex-col" data-toc-root="1">
+    <div class="px-0.5 pb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+      On this page
+    </div>
+    <nav aria-label="Table of contents" class="min-h-0 flex flex-1 flex-col">
+      <div class="toc-scroll min-h-0 flex-1" data-toc-scroll-container="1">
+        <ul class="space-y-2 text-sm text-muted-foreground">
+          {items.map((item) => (
+            <li key={item.id} class={item.level >= 3 ? "pl-3" : ""}>
+              <a
+                href={`#${encodeURIComponent(item.id)}`}
+                class="hover:text-foreground"
+                data-toc-link="1"
+              >
+                {item.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  </section>
+);
+
+const getVisibilityClass = (
+  visibleFrom: RightRailProps["rightRailConfig"]["visibleFrom"]
+): string => {
+  switch (visibleFrom) {
+    case "always": {
+      return "block";
+    }
+    case "never": {
+      return "hidden";
+    }
+    case "md": {
+      return "hidden md:block";
+    }
+    case "lg": {
+      return "hidden lg:block";
+    }
+    default: {
+      return "hidden xl:block";
+    }
+  }
+};
+
+const getPanelClass = (
+  placement: RightRailProps["rightRailConfig"]["placement"]
+): string =>
+  placement === "viewport"
+    ? "fixed top-24 bottom-0 right-8 z-20 w-64 flex flex-col gap-6 min-h-0"
+    : "sticky top-24 h-[calc(100vh-6rem)] flex flex-col gap-6 min-h-0";
+
+export const RightRail = ({
+  canonicalUrl,
+  currentPath,
+  tocItems,
+  rightRailConfig,
+}: RightRailProps): JSX.Element => {
+  const { chatgptUrl, claudeUrl, markdownPath } = buildAskUrls({
+    canonicalUrl,
+    currentPath,
+  });
+
+  return (
+    <aside
+      class={`${getVisibilityClass(rightRailConfig.visibleFrom)} w-64 shrink-0`}
+    >
+      <div class={getPanelClass(rightRailConfig.placement)}>
+        <AskInDropdown
+          chatgptUrl={chatgptUrl}
+          claudeUrl={claudeUrl}
+          markdownPath={markdownPath}
+        />
+        {tocItems.length > 0 ? <OnThisPage items={tocItems} /> : null}
+      </div>
+    </aside>
+  );
+};

package/templates/default/site/code/ui/search-page.tsx

@@ -0,0 +1,87 @@
+import type { SearchPageProps } from "idcmd/client";
+import type { JSX } from "preact";
+
+import { render as renderToString } from "preact-render-to-string";
+
+const ResultItem = ({
+  result,
+}: {
+  result: SearchPageProps["results"][number];
+}): JSX.Element => (
+  <li class="rounded-md border border-border p-3">
+    <a
+      href={result.slug}
+      class="font-medium underline decoration-border underline-offset-4"
+    >
+      {result.title}
+    </a>
+    <p class="mt-1 text-sm text-muted-foreground">{result.description}</p>
+  </li>
+);
+
+const EmptyState = ({
+  minQueryLength,
+  topPages,
+}: {
+  minQueryLength: number;
+  topPages: SearchPageProps["topPages"];
+}): JSX.Element => (
+  <div class="text-sm text-muted-foreground">
+    <p>{`Type at least ${minQueryLength} characters to search.`}</p>
+    {topPages.length > 0 ? (
+      <>
+        <p class="mt-4 font-medium text-foreground">Popular pages</p>
+        <ul class="mt-2 space-y-1">
+          {topPages.map((page) => (
+            <li key={page.href}>
+              <a
+                href={page.href}
+                class="underline decoration-border underline-offset-4"
+              >
+                {page.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </>
+    ) : null}
+  </div>
+);
+
+const SearchPage = ({
+  query,
+  minQueryLength,
+  results,
+  topPages,
+}: SearchPageProps): JSX.Element => {
+  const trimmed = query.trim();
+  const showResults = trimmed.length >= minQueryLength;
+
+  return (
+    <section class="not-prose rounded-lg border border-border bg-card/30 p-4">
+      <h1 class="text-lg font-semibold">Search</h1>
+      {showResults ? (
+        <p class="mt-2 text-sm text-muted-foreground">
+          {results.length === 0
+            ? `No matches for "${trimmed}".`
+            : `Found ${results.length} result(s) for "${trimmed}".`}
+        </p>
+      ) : (
+        <div class="mt-2">
+          <EmptyState minQueryLength={minQueryLength} topPages={topPages} />
+        </div>
+      )}
+
+      {showResults ? (
+        <ul class="mt-4 space-y-2">
+          {results.map((result) => (
+            <ResultItem key={result.slug} result={result} />
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+};
+
+export const renderSearchPageContent = (props: SearchPageProps): string =>
+  renderToString(<SearchPage {...props} />);

package/templates/default/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "target": "ESNext",
     "module": "Preserve",
     "moduleDetection": "force",

package/templates/default/site/client/layout.tsx

@@ -1,2 +0,0 @@
-export { renderLayout } from "idcmd/client";
-export type { LayoutProps } from "idcmd/client";

package/templates/default/site/client/right-rail.tsx

@@ -1 +0,0 @@
-export { RightRail } from "idcmd/client";

package/templates/default/site/client/search-page.tsx

@@ -1 +0,0 @@
-export { renderSearchPageContent } from "idcmd/client";