feat: add pages and docs pages

Author: olliethedev

README.md

@@ -632,7 +632,6 @@ npm run test
 
 ## Roadmap
 
-- [ ] Documentation site for UI Builder with more hands-on examples
 - [ ] Add variable binding to layer children and not just props
 - [ ] Update to React 19
 - [ ] Update to latest Shadcn/ui + Tailwind CSS v4

app/(edit)/docs/[slug]/edit/layout.tsx

@@ -0,0 +1,3 @@
+export default function EditLayout({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}

app/docs/[slug]/edit/page.tsx renamed to app/(edit)/docs/[slug]/edit/page.tsx

@@ -1,7 +1,7 @@
 
 import {  notFound } from "next/navigation";
 import { DocEditor } from "@/app/platform/doc-editor";
-import { getDocPageForSlug } from "../../docs-data/data";
+import { getDocPageForSlug } from "../../../../docs/docs-data/data";
 
 export default async function DocEditPage({
     params,

app/docs/[slug]/page.tsx

@@ -1,59 +1,57 @@
-import { AppSidebar } from "@/app/platform/app-sidebar";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/components/ui/sidebar";
 import { Suspense } from "react";
 import { DocRenderer } from "@/app/platform/doc-renderer";
-import { getBreadcrumbsFromUrl, getDocPageForSlug } from "@/app/docs/docs-data/data";
-import { ThemeToggle } from "@/app/platform/theme-toggle";
-import {  notFound } from "next/navigation";
+import {
+  getDocPageForSlug,
+} from "@/app/docs/docs-data/data";
+import { notFound } from "next/navigation";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Metadata } from "next";
+
+export async function generateMetadata(
+  { params }: {
+    params: Promise<{slug: string}>,
+  }
+): Promise<Metadata> {
+  const slug = (await params).slug
+
+  console.log({slug});
+ 
+  const page = getDocPageForSlug(slug);
+  
+  return {
+    title: page?.name ? `${page.name} - UI Builder` : "Documentation - UI Builder",
+    description: page?.props["data-group"] ? `Learn about ${page.props["data-group"]} features of the UI Builder component.` : "Documentation - UI Builder",
+  }
+}
 
 export default async function DocPage({
-    params,
-  }: {
-    params: Promise<{ slug: string }>;
-  }){
-    const { slug } = await params;
-    const page = getDocPageForSlug(slug);
-    if (!page) {
-        notFound();
-    }
-    const breadcrumbs = getBreadcrumbsFromUrl(slug);
-    const currentPath = `/docs/${slug}`;
-    console.log({slug});
-    return <SidebarProvider>
-    <AppSidebar currentPath={currentPath} />
-    <SidebarInset>
-      <header className="flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4">
-        <SidebarTrigger className="-ml-1" />
-        <Breadcrumb className="flex-1">
-          <BreadcrumbList>
-            <BreadcrumbItem className="hidden md:block">
-              <BreadcrumbLink href={breadcrumbs.category.url}>
-                {breadcrumbs.category.title}
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator className="hidden md:block" />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{breadcrumbs.page.title}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-        <ThemeToggle />
-      </header>
-      <Suspense fallback={<div>Loading...</div>}>
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const page = getDocPageForSlug(slug);
+  if (!page) {
+    notFound();
+  }
+  
+  return (
+    <div className="flex-1 overflow-auto">
+      <Suspense fallback={<DocSkeleton />}>
         <DocRenderer className="max-w-6xl mx-auto my-8" page={page} />
       </Suspense>
-    </SidebarInset>
-  </SidebarProvider>
-}
+    </div>
+  );
+}
+
+function DocSkeleton() {
+  return (
+    <div className="flex-1 overflow-auto">
+      <div className="max-w-6xl mx-auto my-8 flex flex-col gap-4">
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-96 w-full" />
+        <Skeleton className="h-96 w-full" />
+      </div>
+    </div>
+  );
+}

app/docs/docs-data/data.ts

@@ -3,23 +3,13 @@ import { QUICK_START_LAYER } from "@/app/docs/docs-data/docs-page-layers/quick-s
 import { COMPONENT_REGISTRY_LAYER } from "@/app/docs/docs-data/docs-page-layers/component-registry";
 import { FIELD_OVERRIDES_LAYER } from "@/app/docs/docs-data/docs-page-layers/field-overrides";
 import { CUSTOM_COMPONENTS_LAYER } from "@/app/docs/docs-data/docs-page-layers/custom-components";
-import { CANVAS_EDITOR_LAYER } from "@/app/docs/docs-data/docs-page-layers/canvas-editor";
-import { PAGES_PANEL_LAYER } from "@/app/docs/docs-data/docs-page-layers/pages-panel";
-import { VARIABLES_PANEL_LAYER } from "@/app/docs/docs-data/docs-page-layers/variables-panel";
-import { PROPS_PANEL_LAYER } from "@/app/docs/docs-data/docs-page-layers/props-panel";
-import { APPEARANCE_PANEL_LAYER } from "@/app/docs/docs-data/docs-page-layers/appearance-panel";
-import { IMMUTABLE_PAGES_LAYER } from "@/app/docs/docs-data/docs-page-layers/immutable-pages";
 import { PANEL_CONFIGURATION_LAYER } from "@/app/docs/docs-data/docs-page-layers/panel-configuration";
 import { VARIABLES_LAYER } from "@/app/docs/docs-data/docs-page-layers/variables";
 import { VARIABLE_BINDING_LAYER } from "@/app/docs/docs-data/docs-page-layers/variable-binding";
 import { READ_ONLY_MODE_LAYER } from "@/app/docs/docs-data/docs-page-layers/read-only-mode";
-import { DATA_BINDING_LAYER } from "@/app/docs/docs-data/docs-page-layers/data-binding";
 import { LAYER_STRUCTURE_LAYER } from "@/app/docs/docs-data/docs-page-layers/layer-structure";
 import { PERSISTENCE_LAYER } from "@/app/docs/docs-data/docs-page-layers/persistence";
 import { RENDERING_PAGES_LAYER } from "@/app/docs/docs-data/docs-page-layers/rendering-pages";
-import { PAGE_THEMING_LAYER } from "@/app/docs/docs-data/docs-page-layers/page-theming";
-import { EDITOR_PANEL_CONFIG_LAYER } from "@/app/docs/docs-data/docs-page-layers/editor-panel-config";
-import { PROPS_PANEL_CUSTOMIZATION_LAYER } from "@/app/docs/docs-data/docs-page-layers/props-panel-customization";
 
 export const DOCS_PAGES = [
     // Core
@@ -30,31 +20,19 @@ export const DOCS_PAGES = [
     COMPONENT_REGISTRY_LAYER,
     CUSTOM_COMPONENTS_LAYER,
     FIELD_OVERRIDES_LAYER,
-    
-    // Editor Features
-    CANVAS_EDITOR_LAYER,
-    PAGES_PANEL_LAYER,
-    IMMUTABLE_PAGES_LAYER,
-    APPEARANCE_PANEL_LAYER,
-    PROPS_PANEL_LAYER,
-    VARIABLES_PANEL_LAYER,
     PANEL_CONFIGURATION_LAYER,
-    EDITOR_PANEL_CONFIG_LAYER,
-    PROPS_PANEL_CUSTOMIZATION_LAYER,
 
     // Data & Variables
     VARIABLES_LAYER,
     VARIABLE_BINDING_LAYER,
     READ_ONLY_MODE_LAYER,
-    DATA_BINDING_LAYER,
 
     // Layout & Persistence
     LAYER_STRUCTURE_LAYER,
     PERSISTENCE_LAYER,
 
     // Rendering
     RENDERING_PAGES_LAYER,
-    PAGE_THEMING_LAYER,
 
 ] as const;
 
@@ -89,58 +67,21 @@ export const MENU_DATA: DocPageNavItem[] = [
         title: "Component System",
         items: [
             {
-                title: "Getting Started with Components",
+                title: "Components Intro",
                 url: "/docs/component-registry",
             },
             {
-                title: "Creating Custom Components",
+                title: "Custom Components",
                 url: "/docs/custom-components",
             },
             {
-                title: "Advanced Component Configuration",
+                title: "Advanced Configuration",
                 url: "/docs/field-overrides",
-            }
-        ],
-    },
-    {
-        title: "Editor Features",
-        items: [
-            {
-                title: "Canvas Editor",
-                url: "/docs/canvas-editor",
-            },
-            {
-                title: "Pages Panel",
-                url: "/docs/pages-panel",
-            },
-            {
-                title: "Immutable Pages",
-                url: "/docs/immutable-pages",
-            },
-            {
-                title: "Appearance Panel",
-                url: "/docs/appearance-panel",
-            },
-            {
-                title: "Props Panel",
-                url: "/docs/props-panel",
-            },
-            {
-                title: "Variables Panel",
-                url: "/docs/variables-panel",
             },
             {
                 title: "Panel Configuration",
                 url: "/docs/panel-configuration",
-            },
-            {
-                title: "Editor Panel Config",
-                url: "/docs/editor-panel-config",
-            },
-            {
-                title: "Props Panel Customization",
-                url: "/docs/props-panel-customization",
-            },
+            }
         ],
     },
     {
@@ -155,13 +96,9 @@ export const MENU_DATA: DocPageNavItem[] = [
                 url: "/docs/variable-binding",
             },
             {
-                title: "Read Only Mode",
+                title: "Editing Restrictions",
                 url: "/docs/read-only-mode",
             },
-            {
-                title: "Data Binding",
-                url: "/docs/data-binding",
-            },
         ],
     },
     {
@@ -184,10 +121,6 @@ export const MENU_DATA: DocPageNavItem[] = [
                 title: "Rendering Pages",
                 url: "/docs/rendering-pages",
             },
-            {
-                title: "Page Theming",
-                url: "/docs/page-theming",
-            },
         ],
     }
 ] as const;
@@ -228,7 +161,7 @@ export function getBreadcrumbsFromUrl(url: string) {
             url: "#"
         },
         page: {
-            title: "Page",
+            title: "Home",
             url: url
         }
     };