idcmd 0.0.11 → 0.0.12

package/src/search/index.ts

@@ -11,19 +11,16 @@ import {
   slugFromContentFile,
 } from "../content/paths";
 
-export const SEARCH_INDEX_VERSION = 1 as const;
-
-export interface SearchIndexDocumentV1 {
+export interface SearchIndexDocument {
   url: string;
   title: string;
   description: string;
   body: string;
 }
 
-export interface SearchIndexV1 {
-  version: typeof SEARCH_INDEX_VERSION;
+export interface SearchIndex {
   generatedAt: string;
-  documents: SearchIndexDocumentV1[];
+  documents: SearchIndexDocument[];
 }
 
 const SEARCH_INDEX_PATH = "public/search-index.json";
@@ -67,7 +64,7 @@ const isEligibleDocument = (
   hidden: boolean | undefined
 ): boolean => !hidden && slug !== "404";
 
-const sortDocuments = (documents: SearchIndexDocumentV1[]): void => {
+const sortDocuments = (documents: SearchIndexDocument[]): void => {
   documents.sort((a, b) => {
     if (a.url === "/") {
       return -1;
@@ -84,7 +81,7 @@ const buildDocumentFromFile = async (
   bodyMaxChars: number,
   contentDir: string,
   siteConfig: SiteConfig
-): Promise<SearchIndexDocumentV1 | null> => {
+): Promise<SearchIndexDocument | null> => {
   const slug = slugFromContentFile(file);
   const markdown = await Bun.file(`${contentDir}/${file}`).text();
   const parsed = parseFrontmatter(markdown);
@@ -117,11 +114,11 @@ export interface GenerateSearchIndexOptions {
 
 export const generateSearchIndexFromContent = async (
   options: GenerateSearchIndexOptions
-): Promise<SearchIndexV1> => {
+): Promise<SearchIndex> => {
   const { bodyMaxChars = DEFAULT_BODY_MAX_CHARS, siteConfig } = options;
   const generatedAt = options.generatedAt ?? new Date().toISOString();
 
-  const documents: SearchIndexDocumentV1[] = [];
+  const documents: SearchIndexDocument[] = [];
   const contentDir = await getContentDir();
 
   for await (const file of scanContentFiles()) {
@@ -141,13 +138,12 @@ export const generateSearchIndexFromContent = async (
   return {
     documents,
     generatedAt,
-    version: SEARCH_INDEX_VERSION,
   };
 };
 
-const isSearchIndexDocumentV1 = (
+const isSearchIndexDocument = (
   value: unknown
-): value is SearchIndexDocumentV1 => {
+): value is SearchIndexDocument => {
   if (!value || typeof value !== "object") {
     return false;
   }
@@ -161,28 +157,27 @@ const isSearchIndexDocumentV1 = (
   );
 };
 
-const isSearchIndexV1 = (value: unknown): value is SearchIndexV1 => {
+const isSearchIndex = (value: unknown): value is SearchIndex => {
   if (!value || typeof value !== "object") {
     return false;
   }
 
   const record = value as Record<string, unknown>;
   return (
-    record.version === SEARCH_INDEX_VERSION &&
     isNonEmptyString(record.generatedAt) &&
     Array.isArray(record.documents) &&
-    record.documents.every((doc) => isSearchIndexDocumentV1(doc))
+    record.documents.every((doc) => isSearchIndexDocument(doc))
   );
 };
 
-let indexCache: SearchIndexV1 | null = null;
+let indexCache: SearchIndex | null = null;
 
 export interface LoadSearchIndexOptions {
   forceRefresh?: boolean;
   siteConfig: SiteConfig;
 }
 
-const tryLoadSearchIndexFromDisk = async (): Promise<SearchIndexV1 | null> => {
+const tryLoadSearchIndexFromDisk = async (): Promise<SearchIndex | null> => {
   const file = Bun.file(SEARCH_INDEX_PATH);
   if (!(await file.exists())) {
     return null;
@@ -190,7 +185,7 @@ const tryLoadSearchIndexFromDisk = async (): Promise<SearchIndexV1 | null> => {
 
   try {
     const parsed = (await file.json()) as unknown;
-    return isSearchIndexV1(parsed) ? parsed : null;
+    return isSearchIndex(parsed) ? parsed : null;
   } catch {
     return null;
   }
@@ -198,7 +193,7 @@ const tryLoadSearchIndexFromDisk = async (): Promise<SearchIndexV1 | null> => {
 
 export const loadSearchIndex = async (
   options: LoadSearchIndexOptions
-): Promise<SearchIndexV1> => {
+): Promise<SearchIndex> => {
   const { forceRefresh = false, siteConfig } = options;
   if (indexCache && !forceRefresh) {
     return indexCache;
@@ -216,7 +211,7 @@ export const loadSearchIndex = async (
 };
 
 const getScopeHaystack = (
-  document: SearchIndexDocumentV1,
+  document: SearchIndexDocument,
   scope: SearchScope
 ): string => {
   if (scope === "title") {
@@ -231,7 +226,7 @@ const getScopeHaystack = (
 };
 
 const matchesAllTokens = (
-  document: SearchIndexDocumentV1,
+  document: SearchIndexDocument,
   tokens: readonly string[],
   scope: SearchScope
 ): boolean => {
@@ -239,14 +234,14 @@ const matchesAllTokens = (
   return tokens.every((token) => haystack.includes(token));
 };
 
-const toSearchResult = (document: SearchIndexDocumentV1): SearchResult => ({
+const toSearchResult = (document: SearchIndexDocument): SearchResult => ({
   description: document.description,
   slug: document.url,
   title: document.title,
 });
 
 export const search = (
-  index: SearchIndexV1,
+  index: SearchIndex,
   query: string,
   scope: SearchScope
 ): SearchResult[] => {

package/src/search/page.tsx

@@ -1,9 +1,9 @@
-import type { JSX } from "preact";
-
-import { render as renderToString } from "preact-render-to-string";
+/* eslint-disable react/jsx-key */
 
 import type { SearchResult } from "./contract";
 
+const escapeText = (value: string): string => Bun.escapeHTML(value);
+
 export interface TopPageLink {
   href: string;
   title: string;
@@ -24,9 +24,11 @@ const ResultItem = ({ result }: { result: SearchResult }): JSX.Element => (
       href={result.slug}
       class="font-medium underline decoration-border underline-offset-4"
     >
-      {result.title}
+      {escapeText(result.title)}
     </a>
-    <p class="mt-1 text-sm text-muted-foreground">{result.description}</p>
+    <p class="mt-1 text-sm text-muted-foreground">
+      {escapeText(result.description)}
+    </p>
   </li>
 );
 
@@ -44,12 +46,12 @@ const EmptyState = ({
         <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}>
+            <li>
               <a
                 href={page.href}
                 class="underline decoration-border underline-offset-4"
               >
-                {page.title}
+                {escapeText(page.title)}
               </a>
             </li>
           ))}
@@ -74,8 +76,8 @@ const SearchPage = ({
       {showResults ? (
         <p class="mt-2 text-sm text-muted-foreground">
           {results.length === 0
-            ? `No matches for "${trimmed}".`
-            : `Found ${results.length} result(s) for "${trimmed}".`}
+            ? `No matches for "${escapeText(trimmed)}".`
+            : `Found ${results.length} result(s) for "${escapeText(trimmed)}".`}
         </p>
       ) : (
         <div class="mt-2">
@@ -86,7 +88,7 @@ const SearchPage = ({
       {showResults ? (
         <ul class="mt-4 space-y-2">
           {results.map((result) => (
-            <ResultItem key={result.slug} result={result} />
+            <ResultItem result={result} />
           ))}
         </ul>
       ) : null}
@@ -95,4 +97,4 @@ const SearchPage = ({
 };
 
 export const renderSearchPageContent: RenderSearchPageContent = (props) =>
-  renderToString(<SearchPage {...props} />);
+  `${<SearchPage {...props} />}`;

package/src/server/user-routes.ts

@@ -141,7 +141,7 @@ const loadOneRoute = async (
   const pathname = pathnameFromRouteRelativePath(relativeFile);
   if (hasUnsupportedDynamicSegment(pathname)) {
     throw new Error(
-      `Unsupported dynamic route segment in ${routesDir}/${relativeFile} (computed pathname: ${pathname}). V1 does not support [param] or :param routes.`
+      `Unsupported dynamic route segment in ${routesDir}/${relativeFile} (computed pathname: ${pathname}). Dynamic [param] and :param routes are not supported.`
     );
   }
 

package/templates/default/.github/workflows/ci.yml

@@ -19,6 +19,3 @@ jobs:
         run: bun install
       - name: Run checks
         run: bun run check
-      - name: Run smoke
-        timeout-minutes: 15
-        run: bun run smoke

package/templates/default/README.md

@@ -11,11 +11,10 @@ bun install
 bun run dev
 ```
 
-## CI Smoke
+## Validation
 
 ```bash
 bun run check
-bun run smoke
 ```
 
 ## Layout

package/templates/default/package.json

@@ -8,7 +8,6 @@
     "preview": "idcmd preview",
     "deploy": "idcmd deploy",
     "check": "bun run scripts/check.ts",
-    "smoke": "bun run scripts/smoke.ts",
     "test": "bun test",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "fix": "ultracite fix"

package/templates/default/src/server.ts

@@ -1,4 +1,4 @@
 // Optional: this file is here as the obvious place to put server-side code.
-// V1 runs the built-in idcmd server; add custom endpoints via `src/routes/**`.
+// Runs the built-in idcmd server; add custom endpoints via `src/routes/**`.
 
 export const serverPlaceholder = true;

package/templates/default/src/ui/layout.tsx

@@ -1,18 +1,15 @@
-import type { LayoutProps } from "idcmd/client";
-/* eslint-disable react/no-danger */
-import type { JSX } from "preact";
+/* eslint-disable react/jsx-key */
 
-import { render } from "preact-render-to-string";
+import type { LayoutProps } from "idcmd/client";
 
 import { RightRail } from "./right-rail";
 
 type NavItem = LayoutProps["navigation"][number]["items"][number];
 
+const escapeText = (value: string): string => Bun.escapeHTML(value);
+
 const Icon = ({ svg }: { svg: string }): JSX.Element => (
-  <span
-    class="inline-flex h-[18px] w-[18px]"
-    dangerouslySetInnerHTML={{ __html: svg }}
-  />
+  <span class="inline-flex h-[18px] w-[18px]">{svg}</span>
 );
 
 const isActiveLink = (item: NavItem, currentPath: string): boolean =>
@@ -36,19 +33,18 @@ const Sidebar = ({
         data-prefetch="hover"
       >
         <span class="text-muted-foreground">~/</span>
-        {siteName}
+        {escapeText(siteName)}
       </a>
     </div>
     <div class="sidebar-content">
       {navigation.map((group) => (
-        <div key={group.id} class="py-2">
+        <div class="py-2">
           <p class="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            {group.label}
+            {escapeText(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 ${
@@ -58,7 +54,7 @@ const Sidebar = ({
                 }`}
               >
                 <Icon svg={item.iconSvg} />
-                <span>{item.title}</span>
+                <span>{escapeText(item.title)}</span>
               </a>
             ))}
           </nav>
@@ -74,19 +70,20 @@ const SearchForm = ({ query }: { query?: string }): JSX.Element => (
     action="/search/"
     class="flex w-full items-center"
     role="search"
-    noValidate
+    novalidate
   >
-    <label htmlFor="site-search" class="sr-only">
+    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+    <label for="site-search" class="sr-only">
       Search pages
     </label>
     <input
       id="site-search"
       name="q"
       type="search"
-      autoComplete="off"
+      autocomplete="off"
       spellcheck={false}
       placeholder="Search..."
-      defaultValue={query ?? ""}
+      value={escapeText(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>
@@ -108,7 +105,7 @@ const TopNavbar = ({
           data-prefetch="hover"
         >
           <span class="text-muted-foreground">~/</span>
-          {siteName}
+          {escapeText(siteName)}
         </a>
         <div class="not-prose ml-auto w-full max-w-xs">
           <SearchForm query={query} />
@@ -170,14 +167,16 @@ const Layout = ({
       <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}
+        <title>{escapeText(title)}</title>
+        {description ? (
+          <meta name="description" content={escapeText(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"
+          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"
@@ -208,8 +207,10 @@ const Layout = ({
                 class={`prose min-w-0 flex-1${
                   currentPath === "/" ? " prose-home" : ""
                 }`}
-                dangerouslySetInnerHTML={{ __html: content }}
-              />
+              >
+                {/* content is pre-rendered markdown HTML */}
+                {content}
+              </article>
               {shouldShowRightRail ? (
                 <RightRail
                   canonicalUrl={canonicalUrl}
@@ -221,12 +222,12 @@ const Layout = ({
             </div>
           </main>
           <footer class="site-footer">
-            Built with Preact SSR + Tailwind &nbsp;|&nbsp; Zero JavaScript on
+            Built with idcmd SSR + Tailwind &nbsp;|&nbsp; Zero JavaScript on
             content pages
           </footer>
         </div>
         {scriptPaths.map((scriptPath) => (
-          <script key={scriptPath} defer src={scriptPath} />
+          <script defer src={scriptPath} />
         ))}
       </body>
     </html>
@@ -234,4 +235,4 @@ const Layout = ({
 };
 
 export const renderLayout = (props: LayoutProps): string =>
-  `<!DOCTYPE html>${render(<Layout {...props} />)}`;
+  `<!DOCTYPE html>${<Layout {...props} />}`;

package/templates/default/src/ui/right-rail.tsx

@@ -1,5 +1,8 @@
+/* eslint-disable react/jsx-key */
+
 import type { RightRailProps } from "idcmd/client";
-import type { JSX } from "preact";
+
+const escapeText = (value: string): string => Bun.escapeHTML(value);
 
 const CaretDownIcon = (): JSX.Element => (
   <svg
@@ -173,13 +176,13 @@ const OnThisPage = ({
       <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" : ""}>
+            <li class={item.level >= 3 ? "pl-3" : ""}>
               <a
                 href={`#${encodeURIComponent(item.id)}`}
                 class="hover:text-foreground"
                 data-toc-link="1"
               >
-                {item.text}
+                {escapeText(item.text)}
               </a>
             </li>
           ))}

package/templates/default/src/ui/search-page.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable react/jsx-key */
+
 import type { SearchPageProps } from "idcmd/client";
-import type { JSX } from "preact";
 
-import { render as renderToString } from "preact-render-to-string";
+const escapeText = (value: string): string => Bun.escapeHTML(value);
 
 const ResultItem = ({
   result,
@@ -13,9 +14,11 @@ const ResultItem = ({
       href={result.slug}
       class="font-medium underline decoration-border underline-offset-4"
     >
-      {result.title}
+      {escapeText(result.title)}
     </a>
-    <p class="mt-1 text-sm text-muted-foreground">{result.description}</p>
+    <p class="mt-1 text-sm text-muted-foreground">
+      {escapeText(result.description)}
+    </p>
   </li>
 );
 
@@ -33,12 +36,12 @@ const EmptyState = ({
         <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}>
+            <li>
               <a
                 href={page.href}
                 class="underline decoration-border underline-offset-4"
               >
-                {page.title}
+                {escapeText(page.title)}
               </a>
             </li>
           ))}
@@ -63,8 +66,8 @@ const SearchPage = ({
       {showResults ? (
         <p class="mt-2 text-sm text-muted-foreground">
           {results.length === 0
-            ? `No matches for "${trimmed}".`
-            : `Found ${results.length} result(s) for "${trimmed}".`}
+            ? `No matches for "${escapeText(trimmed)}".`
+            : `Found ${results.length} result(s) for "${escapeText(trimmed)}".`}
         </p>
       ) : (
         <div class="mt-2">
@@ -75,7 +78,7 @@ const SearchPage = ({
       {showResults ? (
         <ul class="mt-4 space-y-2">
           {results.map((result) => (
-            <ResultItem key={result.slug} result={result} />
+            <ResultItem result={result} />
           ))}
         </ul>
       ) : null}
@@ -84,4 +87,4 @@ const SearchPage = ({
 };
 
 export const renderSearchPageContent = (props: SearchPageProps): string =>
-  renderToString(<SearchPage {...props} />);
+  `${<SearchPage {...props} />}`;

package/templates/default/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "preact",
+    "jsxImportSource": "@kitajs/html",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "target": "ESNext",
     "module": "Preserve",