From ae5c7c2083b16e8f69e9995d74f8be7fffbe6ea5 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Sun, 13 Aug 2023 11:57:02 +0100
Subject: [PATCH] feat: add headerTitle and headerPath APIs

---
 apps/demo/app/[...puckPath]/client.tsx  |  1 +
 packages/core/components/Puck/index.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/demo/app/[...puckPath]/client.tsx b/apps/demo/app/[...puckPath]/client.tsx
index 0334e3e4ce..3900a345c1 100644
--- a/apps/demo/app/[...puckPath]/client.tsx
+++ b/apps/demo/app/[...puckPath]/client.tsx
@@ -52,6 +52,7 @@ export function Client({
             localStorage.setItem(key, JSON.stringify(data));
           }}
           plugins={[headingAnalyzer]}
+          headerPath={path}
           renderHeaderActions={() => (
             <>
               <Button href={path} newTab variant="secondary">
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index ea2edad903..c1a3000564 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -60,6 +60,8 @@ export function Puck({
   plugins = [],
   renderHeader,
   renderHeaderActions,
+  headerTitle,
+  headerPath,
 }: {
   config: Config;
   data: Data;
@@ -75,6 +77,8 @@ export function Puck({
     data: Data;
     setData: (data: Data) => void;
   }) => ReactElement;
+  headerTitle?: string;
+  headerPath?: string;
 }) {
   const [data, setData] = useState(initialData);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
@@ -256,7 +260,12 @@ export function Puck({
                   }}
                 >
                   <Heading rank={2} size="xs">
-                    {data.root.title || "Page"}
+                    {headerTitle || data.root.title || "Page"}
+                    {headerPath && (
+                      <small style={{ fontWeight: 400, marginLeft: 4 }}>
+                        <code>{headerPath}</code>
+                      </small>
+                    )}
                   </Heading>
                 </div>
                 <div