stropress 0.0.1

package/dist/theme-default/src/pages/og/[...slug].png.ts

@@ -0,0 +1,70 @@
+import type { APIRoute } from "astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+import { getResolvedSiteConfig } from "../../lib/config";
+import { renderOgPng } from "../../lib/og";
+
+interface OgRouteProps {
+  title: string;
+  description: string;
+  siteTitle: string;
+  routePath: string;
+}
+
+export const prerender = true;
+
+export const getStaticPaths = async () => {
+  const docs = await getCollection("docs");
+
+  return docs.map((entry) => {
+    const routePath = getRoutePathFromEntry(entry);
+
+    return {
+      params: {
+        slug: routePathToOgSlug(routePath),
+      },
+      props: {
+        title: entry.data.title,
+        description: entry.data.description || "",
+        siteTitle: getResolvedSiteConfig(routePath).siteTitle,
+        routePath,
+      } satisfies OgRouteProps,
+    };
+  });
+};
+
+export const GET: APIRoute = async ({ props }) => {
+  const data = props as OgRouteProps;
+  const png = await renderOgPng({
+    title: data.title,
+    description: data.description,
+    siteTitle: data.siteTitle,
+    routePath: data.routePath,
+  });
+
+  return new Response(Buffer.from(png), {
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": "public, max-age=31536000, immutable",
+    },
+  });
+};
+
+const getRoutePathFromEntry = (entry: CollectionEntry<"docs">) => {
+  if (entry.id === "index") {
+    return "/";
+  }
+
+  if (entry.id.endsWith("/index")) {
+    return `/${entry.id.slice(0, -"/index".length)}`;
+  }
+
+  return `/${entry.id}`;
+};
+
+const routePathToOgSlug = (routePath: string) => {
+  if (routePath === "/") {
+    return "index";
+  }
+
+  return routePath.slice(1);
+};

package/dist/theme-default/src/scripts/code-copy.ts

@@ -0,0 +1,54 @@
+import copy from "copy-to-clipboard";
+
+const COPY_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+const COPIED_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 15 2 2 4-4"/><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+
+const attachCopyButtons = () => {
+  const blocks = document.querySelectorAll(".markdown-content pre > code");
+
+  for (const code of blocks) {
+    const pre = code.parentElement;
+    if (!(pre instanceof HTMLElement) || pre.dataset.copyReady === "true") {
+      continue;
+    }
+
+    pre.dataset.copyReady = "true";
+    pre.classList.add("code-block");
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "code-copy-button";
+    button.innerHTML = COPY_SVG;
+    button.setAttribute("aria-label", "Copy code to clipboard");
+
+    button.addEventListener("click", () => {
+      const source = code.textContent ?? "";
+      if (!source) {
+        return;
+      }
+
+      copy(source);
+      button.innerHTML = COPIED_SVG;
+      button.classList.add("is-copied");
+
+      window.setTimeout(() => {
+        button.innerHTML = COPY_SVG;
+        button.classList.remove("is-copied");
+      }, 1200);
+    });
+
+    pre.appendChild(button);
+  }
+};
+
+export const setupCodeCopyButtons = () => {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", attachCopyButtons, {
+      once: true,
+    });
+  } else {
+    attachCopyButtons();
+  }
+
+  document.addEventListener("astro:page-load", attachCopyButtons);
+};

package/dist/theme-default/src/scripts/doc-toc.ts

@@ -0,0 +1,109 @@
+type TocItem = HTMLElement & { dataset: DOMStringMap };
+
+let initialized = false;
+let cleanup: (() => void) | null = null;
+
+const activateFromViewport = (items: TocItem[], headings: HTMLElement[]) => {
+  if (headings.length === 0) {
+    return;
+  }
+
+  const offset = 140;
+  let currentId = headings[0].id;
+
+  for (const heading of headings) {
+    if (heading.getBoundingClientRect().top - offset <= 0) {
+      currentId = heading.id;
+    } else {
+      break;
+    }
+  }
+
+  for (const item of items) {
+    const isActive = item.dataset.targetId === currentId;
+    item.dataset.state = isActive ? "active" : "inactive";
+    item
+      .querySelector<HTMLAnchorElement>(".doc-toc-link")
+      ?.setAttribute("aria-current", isActive ? "location" : "false");
+  }
+};
+
+const mountToc = () => {
+  cleanup?.();
+
+  const items = Array.from(document.querySelectorAll<TocItem>(".doc-toc-item"));
+  if (items.length === 0) {
+    cleanup = null;
+    return;
+  }
+
+  const headings = items
+    .map((item) => item.dataset.targetId)
+    .filter((id): id is string => Boolean(id))
+    .map((id) => document.getElementById(id))
+    .filter(
+      (heading): heading is HTMLElement => heading instanceof HTMLElement,
+    );
+
+  if (headings.length === 0) {
+    cleanup = null;
+    return;
+  }
+
+  let rafId = 0;
+  const onScroll = () => {
+    if (rafId) {
+      return;
+    }
+
+    rafId = window.requestAnimationFrame(() => {
+      rafId = 0;
+      activateFromViewport(items, headings);
+    });
+  };
+
+  const onHashChange = () => {
+    const hash = window.location.hash;
+    if (!hash) {
+      return;
+    }
+
+    const id = decodeURIComponent(hash.slice(1));
+    for (const item of items) {
+      const isActive = item.dataset.targetId === id;
+      item.dataset.state = isActive ? "active" : "inactive";
+      item
+        .querySelector<HTMLAnchorElement>(".doc-toc-link")
+        ?.setAttribute("aria-current", isActive ? "location" : "false");
+    }
+  };
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onScroll);
+  window.addEventListener("hashchange", onHashChange);
+
+  onHashChange();
+  activateFromViewport(items, headings);
+
+  cleanup = () => {
+    if (rafId) {
+      window.cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+
+    window.removeEventListener("scroll", onScroll);
+    window.removeEventListener("resize", onScroll);
+    window.removeEventListener("hashchange", onHashChange);
+  };
+};
+
+export const setupDocToc = () => {
+  mountToc();
+
+  if (initialized) {
+    return;
+  }
+
+  initialized = true;
+  document.addEventListener("astro:page-load", mountToc);
+};

package/dist/theme-default/src/scripts/search.ts

@@ -0,0 +1,329 @@
+import MiniSearch from "minisearch";
+
+export interface SearchDocument {
+  id: string;
+  title: string;
+  description: string;
+  body: string;
+  url: string;
+}
+
+type ResultDocument = SearchDocument & {
+  score: number;
+};
+
+let initialized = false;
+let cleanup: (() => void) | null = null;
+
+const normalizeText = (value: string) =>
+  value
+    .replace(/```[\s\S]*?```/g, " ")
+    .replace(/`[^`]+`/g, " ")
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, " ")
+    .replace(/\[[^\]]+\]\([^)]*\)/g, "$1")
+    .replace(/[#>*_~\-]/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+
+const sliceSummary = (value: string, maxLength = 120) => {
+  if (value.length <= maxLength) {
+    return value;
+  }
+
+  return `${value.slice(0, maxLength - 1).trimEnd()}...`;
+};
+
+const renderResultItem = (doc: ResultDocument) => {
+  const item = document.createElement("li");
+  item.className = "site-search-result-item";
+
+  const link = document.createElement("a");
+  link.className = "site-search-result-link";
+  link.href = doc.url;
+
+  const title = document.createElement("span");
+  title.className = "site-search-result-title";
+  title.textContent = doc.title;
+
+  const description = document.createElement("span");
+  description.className = "site-search-result-desc";
+  description.textContent = doc.description || sliceSummary(doc.body);
+
+  link.append(title, description);
+  item.append(link);
+  return item;
+};
+
+const toSafeResult = (
+  source: Partial<SearchDocument> & { score?: number },
+  fallbackId: string,
+): ResultDocument => ({
+  id: source.id || fallbackId,
+  title: source.title || "Untitled",
+  description: source.description || "",
+  body: source.body || "",
+  url: source.url || "#",
+  score: source.score || 0,
+});
+
+const buildSearch = (documents: SearchDocument[]) => {
+  const docs = documents.map((doc) => ({
+    ...doc,
+    title: normalizeText(doc.title),
+    description: normalizeText(doc.description),
+    body: normalizeText(doc.body),
+  }));
+
+  const miniSearch = new MiniSearch<SearchDocument>({
+    fields: ["title", "description", "body"],
+    storeFields: ["id", "title", "description", "body", "url"],
+    searchOptions: {
+      prefix: true,
+      fuzzy: 0.2,
+      boost: {
+        title: 3,
+        description: 2,
+      },
+    },
+  });
+
+  miniSearch.addAll(docs);
+  return miniSearch;
+};
+
+const searchLocal = (
+  index: MiniSearch<SearchDocument>,
+  sourceDocuments: SearchDocument[],
+  query: string,
+): ResultDocument[] => {
+  const docById = new Map(sourceDocuments.map((doc) => [doc.id, doc]));
+
+  return index
+    .search(query, {
+      combineWith: "AND",
+      prefix: true,
+      fuzzy: 0.2,
+    })
+    .map((hit, i) => {
+      const id = String(hit.id);
+      const source = docById.get(id);
+
+      return toSafeResult(
+        {
+          id,
+          title: source?.title,
+          description: source?.description,
+          body: source?.body,
+          url: source?.url,
+          score: hit.score,
+        },
+        `local-${i}`,
+      );
+    });
+};
+
+const mountSearch = (documents: SearchDocument[]) => {
+  cleanup?.();
+
+  const modal = document.querySelector<HTMLElement>("[data-search-modal]");
+  const triggerButton = document.querySelector<HTMLButtonElement>(
+    "[data-search-trigger]",
+  );
+  const openButtons = Array.from(
+    document.querySelectorAll<HTMLElement>("[data-search-open]"),
+  );
+  const closeButtons = Array.from(
+    document.querySelectorAll<HTMLElement>("[data-search-close]"),
+  );
+  const input = document.querySelector<HTMLInputElement>("[data-search-input]");
+  const results = document.querySelector<HTMLUListElement>(
+    "[data-search-results]",
+  );
+  const empty = document.querySelector<HTMLElement>("[data-search-empty]");
+
+  if (!modal || !triggerButton || !input || !results || !empty) {
+    cleanup = null;
+    return;
+  }
+
+  const index = buildSearch(documents);
+  let selectedIndex = -1;
+  let searchToken = 0;
+
+  const setModalOpen = (open: boolean) => {
+    modal.dataset.state = open ? "open" : "closed";
+    modal.setAttribute("aria-hidden", open ? "false" : "true");
+    document.body.style.overflow = open ? "hidden" : "";
+
+    if (open) {
+      window.setTimeout(() => {
+        input.focus();
+        input.select();
+      }, 0);
+      return;
+    }
+
+    input.value = "";
+    selectedIndex = -1;
+    results.innerHTML = "";
+    empty.hidden = true;
+    triggerButton.blur();
+  };
+
+  const paintResults = async (query: string) => {
+    results.innerHTML = "";
+    selectedIndex = -1;
+    const token = ++searchToken;
+
+    const normalizedQuery = query.trim();
+    if (!normalizedQuery) {
+      empty.hidden = false;
+      empty.textContent = "Start typing to search docs.";
+      return;
+    }
+
+    let matches: ResultDocument[] = [];
+
+    try {
+      matches = searchLocal(index, documents, normalizedQuery);
+    } catch (error) {
+      console.error("[stropress] Search query failed:", error);
+      matches = searchLocal(index, documents, normalizedQuery);
+    }
+
+    if (token !== searchToken) {
+      return;
+    }
+
+    if (matches.length === 0) {
+      empty.hidden = false;
+      empty.textContent = "No results found.";
+      return;
+    }
+
+    empty.hidden = true;
+    matches.slice(0, 8).forEach((match) => {
+      results.append(renderResultItem(match));
+    });
+  };
+
+  const moveHighlight = (direction: 1 | -1) => {
+    const items = Array.from(
+      results.querySelectorAll<HTMLLIElement>(".site-search-result-item"),
+    );
+
+    if (items.length === 0) {
+      return;
+    }
+
+    selectedIndex += direction;
+    if (selectedIndex < 0) {
+      selectedIndex = items.length - 1;
+    }
+    if (selectedIndex >= items.length) {
+      selectedIndex = 0;
+    }
+
+    items.forEach((item, indexItem) => {
+      item.dataset.state = indexItem === selectedIndex ? "active" : "inactive";
+    });
+
+    items[selectedIndex]?.scrollIntoView({ block: "nearest" });
+  };
+
+  const openSelectedResult = () => {
+    const items = Array.from(
+      results.querySelectorAll<HTMLLIElement>(".site-search-result-item"),
+    );
+    const activeItem = items[selectedIndex];
+    activeItem?.querySelector<HTMLAnchorElement>("a")?.click();
+  };
+
+  const onTriggerClick = () => setModalOpen(true);
+  const onCloseClick = () => setModalOpen(false);
+  const onInput = () => {
+    paintResults(input.value);
+  };
+
+  const onInputKeydown = (event: KeyboardEvent) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveHighlight(1);
+      return;
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveHighlight(-1);
+      return;
+    }
+
+    if (event.key === "Enter") {
+      const hasSelection = selectedIndex >= 0;
+      if (hasSelection) {
+        event.preventDefault();
+        openSelectedResult();
+      }
+    }
+  };
+
+  const onGlobalKeydown = (event: KeyboardEvent) => {
+    const commandPressed = event.metaKey || event.ctrlKey;
+
+    if (commandPressed && event.key.toLowerCase() === "k") {
+      event.preventDefault();
+      setModalOpen(true);
+      return;
+    }
+
+    if (event.key === "Escape") {
+      if (modal.dataset.state === "open") {
+        event.preventDefault();
+        setModalOpen(false);
+      }
+    }
+  };
+
+  triggerButton.addEventListener("click", onTriggerClick);
+  input.addEventListener("input", onInput);
+  input.addEventListener("keydown", onInputKeydown);
+  document.addEventListener("keydown", onGlobalKeydown);
+
+  openButtons.forEach((button) => {
+    button.addEventListener("click", onTriggerClick);
+  });
+
+  closeButtons.forEach((button) => {
+    button.addEventListener("click", onCloseClick);
+  });
+
+  cleanup = () => {
+    triggerButton.removeEventListener("click", onTriggerClick);
+    input.removeEventListener("input", onInput);
+    input.removeEventListener("keydown", onInputKeydown);
+    document.removeEventListener("keydown", onGlobalKeydown);
+
+    openButtons.forEach((button) => {
+      button.removeEventListener("click", onTriggerClick);
+    });
+
+    closeButtons.forEach((button) => {
+      button.removeEventListener("click", onCloseClick);
+    });
+
+    document.body.style.overflow = "";
+  };
+};
+
+export const setupSearch = (documents: SearchDocument[]) => {
+  mountSearch(documents);
+
+  if (initialized) {
+    return;
+  }
+
+  initialized = true;
+  document.addEventListener("astro:page-load", () => {
+    mountSearch(documents);
+  });
+};

package/dist/theme-default/src/styles/global.css

@@ -0,0 +1,70 @@
+@import "@fontsource/inter/400.css";
+@import "@fontsource/inter/700.css";
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/700.css";
+
+:root {
+  color-scheme: light;
+  --background-color: 255 255 255;
+  --foreground-color: 17 17 17;
+  --primary-color: 10 10 10;
+  --primary-foreground-color: 255 255 255;
+  --secondary-color: rgba(255, 255, 255, 0.9);
+  --muted-color: 102 102 102;
+  --accent-color: 242 242 242;
+  --border-color: 224 224 224;
+
+  --color-alert-note: 37 99 235;
+  --color-alert-tip: 5 150 105;
+  --color-alert-warning: 217 119 6;
+  --color-alert-important: 147 51 234;
+  --color-alert-caution: 220 38 38;
+
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono:
+    "JetBrains Mono", ui-monospace, SF Mono, SF Mono-Regular, Consolas,
+    "Liberation Mono", Menlo, Courier, monospace;
+  --border-radius: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  overscroll-behavior: none;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: rgba(var(--foreground-color) / 1);
+  background-color: rgba(var(--background-color) / 1);
+  font-family: var(--font-sans);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}