docs: make "custom" the only demo framework

measuredco · Aug 14, 2023 · 2ffb3ce · 2ffb3ce
1 parent acb7a96
commit 2ffb3ce
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 47 deletions.
diff --git a/.../app/[framework]/[...puckPath]/client.tsx → apps/demo/app/[...puckPath]/client.tsx b/.../app/[framework]/[...puckPath]/client.tsx → apps/demo/app/[...puckPath]/client.tsx
@@ -3,7 +3,7 @@
 import { Data } from "@measured/puck/types/Config";
 import { Puck } from "@measured/puck/components/Puck";
 import { Render } from "@measured/puck/components/Render";
-import { Framework } from "../../Framework";
+import { Framework } from "../Framework";
 import { useEffect, useState } from "react";
 import { Button } from "@measured/puck/components/Button";
 import headingAnalyzer from "@measured/puck-plugin-heading-analyzer/src/HeadingAnalyzer";
@@ -19,8 +19,8 @@ export function Client({
   isEdit: boolean;
   framework: Framework;
 }) {
-  const config = require(`../../configs/${framework}/`).default;
-  const initialData = require(`../../configs/${framework}/`).initialData || {};
+  const config = require(`../configs/${framework}/`).default;
+  const initialData = require(`../configs/${framework}/`).initialData || {};
 
   const key = `puck-demo:${framework}:${path}`;
 
@@ -54,7 +54,7 @@ export function Client({
           plugins={[headingAnalyzer]}
           renderHeaderActions={() => (
             <>
-              <Button href={`/${framework}/${path}`} newTab variant="secondary">
+              <Button href={path} newTab variant="secondary">
                 View page
               </Button>
             </>

diff --git a/...mo/app/[framework]/[...puckPath]/page.tsx → apps/demo/app/[...puckPath]/page.tsx b/...mo/app/[framework]/[...puckPath]/page.tsx → apps/demo/app/[...puckPath]/page.tsx
@@ -1,8 +1,6 @@
 import dynamic from "next/dynamic";
-import { notFound } from "next/navigation";
 import resolvePuckPath from "./resolve-puck-path";
 import { Metadata } from "next";
-import { Framework, validFrameworks } from "../../Framework";
 
 const Client = dynamic(() => import("./client"), {
   ssr: false,
@@ -33,15 +31,5 @@ export default async function Page({
 }) {
   const { isEdit, path } = resolvePuckPath(params.puckPath);
 
-  if (validFrameworks.indexOf(params.framework) === -1) {
-    return notFound();
-  }
-
-  return (
-    <Client
-      isEdit={isEdit}
-      path={path}
-      framework={params.framework as Framework}
-    />
-  );
+  return <Client isEdit={isEdit} path={path} framework={"custom"} />;
 }
diff --git a/...ework]/[...puckPath]/resolve-puck-path.ts → ...mo/app/[...puckPath]/resolve-puck-path.ts b/...ework]/[...puckPath]/resolve-puck-path.ts → ...mo/app/[...puckPath]/resolve-puck-path.ts
diff --git a/apps/demo/app/[framework]/page.tsx b/apps/demo/app/[framework]/page.tsx
diff --git a/apps/demo/app/configs/custom/index.tsx b/apps/demo/app/configs/custom/index.tsx
@@ -54,7 +54,7 @@ export const initialData: Record<string, Data> = {
             },
             {
               label: "Edit this page",
-              href: "/custom/edit",
+              href: "/edit",
               variant: "secondary",
             },
           ],
@@ -289,7 +289,7 @@ export const initialData: Record<string, Data> = {
             },
             {
               label: "Edit this page",
-              href: "/custom/edit",
+              href: "/edit",
               variant: "secondary",
             },
           ],

diff --git a/apps/demo/app/configs/custom/root.tsx b/apps/demo/app/configs/custom/root.tsx
@@ -11,11 +11,11 @@ export type RootProps = {
 const NavItem = ({ label, href }: { label: string; href: string }) => {
   const navPath = window.location.pathname.replace("/edit", "") || "/";
 
-  const isActive = navPath === href.replace("/edit", "");
+  const isActive = navPath === (href.replace("/edit", "") || "/");
 
   return (
     <a
-      href={href}
+      href={href || "/"}
       style={{
         textDecoration: "none",
         color: isActive
@@ -54,15 +54,12 @@ function Root({ children, editMode }: RootProps) {
             LOGO
           </div>
           <nav style={{ display: "flex", marginLeft: "auto", gap: 32 }}>
-            <NavItem label="Home" href={`/custom${editMode ? "/edit" : ""}`} />
+            <NavItem label="Home" href={`${editMode ? "/edit" : ""}`} />
             <NavItem
               label="Pricing"
-              href={`/custom/pricing${editMode ? "/edit" : ""}`}
-            />
-            <NavItem
-              label="About"
-              href={`/custom/about${editMode ? "/edit" : ""}`}
+              href={`/pricing${editMode ? "/edit" : ""}`}
             />
+            <NavItem label="About" href={`/about${editMode ? "/edit" : ""}`} />
           </nav>
         </div>
       </header>

diff --git a/apps/demo/app/page.tsx b/apps/demo/app/page.tsx
@@ -1,19 +1,2 @@
-export default async function Page() {
-  return (
-    <div className="Page">
-      <h1 className="">Puck demo</h1>
-      <h2>Choose a demo framework</h2>
-      <div className="Frameworks">
-        <a className="Framework" href="/antd/edit">
-          Ant Design
-        </a>
-        <a className="Framework" href="/material-ui/edit">
-          Material UI
-        </a>
-        <a className="Framework" href="/custom/edit">
-          Custom example
-        </a>
-      </div>
-    </div>
-  );
-}
+export { default } from "./[...puckPath]/page";
+export * from "./[...puckPath]/page";