Refactor documentation components and update deployment configuration: modified component pages to streamline code formatting, adjusted deployment script for Cloudflare, and updated ignored files in biome.json to include new directories.

Author: nizarfadlan

.github/workflows/deploy-docs.yml

@@ -46,7 +46,7 @@ jobs:
           VITE_STORYBOOK_URL: ${{ vars.STORYBOOK_URL || 'https://storybook.solidcn.nizarfadlan.dev' }}
 
       - name: Deploy to Cloudflare Pages
-        run: pnpm exec wrangler pages deploy apps/docs/.output/public --project-name=solidcn-docs
+        run: pnpm exec wrangler pages deploy apps/docs/.output/public --project-name=solidcn
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

apps/docs/src/components/ui/CodeBlock.tsx

@@ -154,10 +154,7 @@ export const CodeBlock: Component<CodeBlockProps> = (props) => {
             </pre>
           }
         >
-          <div
-            class={variant() === "figure" ? shikiPreFigure : shikiPreCard}
-            innerHTML={html()}
-          />
+          <div class={variant() === "figure" ? shikiPreFigure : shikiPreCard} innerHTML={html()} />
         </Show>
 
         <Show when={!props.filename}>
@@ -175,7 +172,11 @@ export const CodeBlock: Component<CodeBlockProps> = (props) => {
                 when={copied()}
                 fallback={<Copy class="size-3.5 shrink-0" stroke-width={2} aria-hidden="true" />}
               >
-                <Check class="size-3.5 shrink-0 text-green-600 dark:text-green-400" stroke-width={2} aria-hidden="true" />
+                <Check
+                  class="size-3.5 shrink-0 text-green-600 dark:text-green-400"
+                  stroke-width={2}
+                  aria-hidden="true"
+                />
               </Show>
             </Show>
             <Show when={variant() !== "figure"}>{copied() ? "Copied!" : "Copy"}</Show>

apps/docs/src/components/ui/ComponentDemo.tsx

@@ -17,9 +17,7 @@ export const ComponentDemo: Component<ComponentDemoProps> = (props) => {
   const [codeOpen, setCodeOpen] = createSignal(false);
 
   return (
-    <div
-      class={`rounded-lg border border-border bg-card shadow-sm ${props.class ?? ""}`}
-    >
+    <div class={`rounded-lg border border-border bg-card shadow-sm ${props.class ?? ""}`}>
       {/* Preview — bottom border is the seam the pill straddles */}
       <div class="flex min-h-[200px] items-center justify-center rounded-t-lg border-b border-border bg-background/80 p-8">
         {props.preview}

apps/docs/src/components/ui/DocPage.tsx

@@ -149,11 +149,7 @@ export const DocPage: Component<DocPageProps> = (props) => {
     <DocLayout toc={toc}>
       <Show when={props.docPath} keyed>
         {(path) => (
-          <DocsSeo
-            title={`${props.title} — solidcn`}
-            description={props.description}
-            path={path}
-          />
+          <DocsSeo title={`${props.title} — solidcn`} description={props.description} path={path} />
         )}
       </Show>
       <div class="space-y-10 pb-16">
@@ -171,7 +167,10 @@ export const DocPage: Component<DocPageProps> = (props) => {
                 onClick={() => void copyPageMarkdown()}
                 class="inline-flex items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground"
               >
-                <Show when={pageCopied()} fallback={<Clipboard class="h-3.5 w-3.5" stroke-width={2} />}>
+                <Show
+                  when={pageCopied()}
+                  fallback={<Clipboard class="h-3.5 w-3.5" stroke-width={2} />}
+                >
                   <Check class="h-3.5 w-3.5 text-green-600 dark:text-green-400" stroke-width={2} />
                 </Show>
                 {pageCopied() ? "Copied" : "Copy page"}

apps/docs/src/components/ui/DocPager.tsx

@@ -1,5 +1,5 @@
 import { A } from "@solidjs/router";
-import { Show, type Component } from "solid-js";
+import { type Component, Show } from "solid-js";
 import type { NavItem } from "../../lib/nav.js";
 
 export interface DocPagerProps {
@@ -21,7 +21,9 @@ export const DocPager: Component<DocPagerProps> = (props) => {
               class="group flex w-full max-w-md flex-col justify-center rounded-lg border border-border bg-card px-4 py-3 text-left transition-colors hover:bg-muted/50"
             >
               <span class="text-xs font-medium text-muted-foreground">Previous</span>
-              <span class="mt-0.5 font-medium text-foreground group-hover:underline">{p().title}</span>
+              <span class="mt-0.5 font-medium text-foreground group-hover:underline">
+                {p().title}
+              </span>
             </A>
           )}
         </Show>
@@ -34,7 +36,9 @@ export const DocPager: Component<DocPagerProps> = (props) => {
               class="group flex w-full max-w-md flex-col items-end justify-center rounded-lg border border-border bg-card px-4 py-3 text-right transition-colors hover:bg-muted/50"
             >
               <span class="text-xs font-medium text-muted-foreground">Next</span>
-              <span class="mt-0.5 font-medium text-foreground group-hover:underline">{n().title}</span>
+              <span class="mt-0.5 font-medium text-foreground group-hover:underline">
+                {n().title}
+              </span>
             </A>
           )}
         </Show>

apps/docs/src/lib/build-doc-markdown.ts

@@ -32,7 +32,14 @@ export function buildDocPageMarkdown(input: BuildDocMarkdownInput): string {
   if (input.componentName ?? input.manualInstall) {
     lines.push("## Installation", "");
     if (input.componentName) {
-      lines.push("### CLI", "", "```bash", `npx solidcn@latest add ${input.componentName}`, "```", "");
+      lines.push(
+        "### CLI",
+        "",
+        "```bash",
+        `npx solidcn@latest add ${input.componentName}`,
+        "```",
+        "",
+      );
     }
     if (input.manualInstall) {
       lines.push("### Manual", "", "```bash", input.manualInstall, "```", "");
@@ -67,6 +74,6 @@ export function buildDocPageMarkdown(input: BuildDocMarkdownInput): string {
     lines.push("");
   }
 
-  lines.push("---", "", `_Exported from solidcn docs._`, "");
+  lines.push("---", "", "_Exported from solidcn docs._", "");
   return lines.join("\n");
 }

apps/docs/src/lib/nav.ts

@@ -14,9 +14,10 @@ export function getFlatNavItems(): NavItem[] {
   return navigation.flatMap((g) => g.items);
 }
 
-export function getDocNeighbors(
-  href: string,
-): { prev: NavItem | undefined; next: NavItem | undefined } {
+export function getDocNeighbors(href: string): {
+  prev: NavItem | undefined;
+  next: NavItem | undefined;
+} {
   const items = getFlatNavItems();
   const i = items.findIndex((item) => item.href === href);
   if (i < 0) {

apps/docs/src/routes/docs/components/accordion.tsx

@@ -29,17 +29,17 @@ function AccordionDemo() {
 export default function AccordionPage() {
   return (
     <DocPage
-        docPath="/docs/components/accordion"
-        title="Accordion"
-        description="A vertically stacked set of interactive headings that reveal/hide associated content. Built on Kobalte Accordion."
-        phase="Core Primitives"
-        componentName="accordion"
-        manualInstall="npm install @solidcn/core"
-        examples={[
-          {
-            title: "Single (collapsible)",
-            preview: <AccordionDemo />,
-            code: `import {
+      docPath="/docs/components/accordion"
+      title="Accordion"
+      description="A vertically stacked set of interactive headings that reveal/hide associated content. Built on Kobalte Accordion."
+      phase="Core Primitives"
+      componentName="accordion"
+      manualInstall="npm install @solidcn/core"
+      examples={[
+        {
+          title: "Single (collapsible)",
+          preview: <AccordionDemo />,
+          code: `import {
   Accordion, AccordionContent,
   AccordionItem, AccordionTrigger,
 } from "~/components/ui/accordion";
@@ -58,22 +58,22 @@ export default function AccordionPage() {
     </AccordionContent>
   </AccordionItem>
 </Accordion>`,
-          },
-          {
-            title: "Multiple open",
-            preview: (
-              <Accordion multiple class="w-full max-w-md">
-                <AccordionItem value="a">
-                  <AccordionTrigger>Section A</AccordionTrigger>
-                  <AccordionContent>Content for section A.</AccordionContent>
-                </AccordionItem>
-                <AccordionItem value="b">
-                  <AccordionTrigger>Section B</AccordionTrigger>
-                  <AccordionContent>Content for section B.</AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            ),
-            code: `<Accordion multiple class="w-full">
+        },
+        {
+          title: "Multiple open",
+          preview: (
+            <Accordion multiple class="w-full max-w-md">
+              <AccordionItem value="a">
+                <AccordionTrigger>Section A</AccordionTrigger>
+                <AccordionContent>Content for section A.</AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="b">
+                <AccordionTrigger>Section B</AccordionTrigger>
+                <AccordionContent>Content for section B.</AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          ),
+          code: `<Accordion multiple class="w-full">
   <AccordionItem value="a">
     <AccordionTrigger>Section A</AccordionTrigger>
     <AccordionContent>Content for section A.</AccordionContent>
@@ -83,33 +83,33 @@ export default function AccordionPage() {
     <AccordionContent>Content for section B.</AccordionContent>
   </AccordionItem>
 </Accordion>`,
-          },
-        ]}
-        props={[
-          {
-            name: "collapsible",
-            type: "boolean",
-            default: "false",
-            description: "Allow closing the open item",
-          },
-          {
-            name: "multiple",
-            type: "boolean",
-            default: "false",
-            description: "Allow multiple items open simultaneously",
-          },
-          { name: "value", type: "string | string[]", description: "Controlled open item(s)" },
-          {
-            name: "defaultValue",
-            type: "string | string[]",
-            description: "Default open item(s) (uncontrolled)",
-          },
-          {
-            name: "onChange",
-            type: "(value: string | string[]) => void",
-            description: "Callback on value change",
-          },
-        ]}
-      />
+        },
+      ]}
+      props={[
+        {
+          name: "collapsible",
+          type: "boolean",
+          default: "false",
+          description: "Allow closing the open item",
+        },
+        {
+          name: "multiple",
+          type: "boolean",
+          default: "false",
+          description: "Allow multiple items open simultaneously",
+        },
+        { name: "value", type: "string | string[]", description: "Controlled open item(s)" },
+        {
+          name: "defaultValue",
+          type: "string | string[]",
+          description: "Default open item(s) (uncontrolled)",
+        },
+        {
+          name: "onChange",
+          type: "(value: string | string[]) => void",
+          description: "Callback on value change",
+        },
+      ]}
+    />
   );
 }

apps/docs/src/routes/docs/components/badge.tsx

@@ -4,45 +4,45 @@ import { DocPage } from "../../../components/ui/DocPage.js";
 export default function BadgePage() {
   return (
     <DocPage
-        docPath="/docs/components/badge"
-        title="Badge"
-        description="A small label used to highlight status, category, or count."
-        phase="Core Primitives"
-        componentName="badge"
-        manualInstall="npm install @solidcn/core"
-        examples={[
-          {
-            title: "Default",
-            preview: <Badge>Badge</Badge>,
-            code: `import { Badge } from "~/components/ui/badge";
+      docPath="/docs/components/badge"
+      title="Badge"
+      description="A small label used to highlight status, category, or count."
+      phase="Core Primitives"
+      componentName="badge"
+      manualInstall="npm install @solidcn/core"
+      examples={[
+        {
+          title: "Default",
+          preview: <Badge>Badge</Badge>,
+          code: `import { Badge } from "~/components/ui/badge";
 
 <Badge>Badge</Badge>`,
-          },
-          {
-            title: "Variants",
-            preview: (
-              <div class="flex flex-wrap gap-2">
-                <Badge variant="default">Default</Badge>
-                <Badge variant="secondary">Secondary</Badge>
-                <Badge variant="destructive">Destructive</Badge>
-                <Badge variant="outline">Outline</Badge>
-              </div>
-            ),
-            code: `<Badge variant="default">Default</Badge>
+        },
+        {
+          title: "Variants",
+          preview: (
+            <div class="flex flex-wrap gap-2">
+              <Badge variant="default">Default</Badge>
+              <Badge variant="secondary">Secondary</Badge>
+              <Badge variant="destructive">Destructive</Badge>
+              <Badge variant="outline">Outline</Badge>
+            </div>
+          ),
+          code: `<Badge variant="default">Default</Badge>
 <Badge variant="secondary">Secondary</Badge>
 <Badge variant="destructive">Destructive</Badge>
 <Badge variant="outline">Outline</Badge>`,
-          },
-        ]}
-        props={[
-          {
-            name: "variant",
-            type: '"default" | "secondary" | "destructive" | "outline"',
-            default: '"default"',
-            description: "Visual style",
-          },
-          { name: "class", type: "string", description: "Additional CSS classes" },
-        ]}
-      />
+        },
+      ]}
+      props={[
+        {
+          name: "variant",
+          type: '"default" | "secondary" | "destructive" | "outline"',
+          default: '"default"',
+          description: "Visual style",
+        },
+        { name: "class", type: "string", description: "Additional CSS classes" },
+      ]}
+    />
   );
 }