chore: add pagefind & ignore code regions

Author: zettca

apps/docs/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "pagefind --site dist --output-path dist/_pagefind",
     "start": "npx serve dist"
   },
   "dependencies": {
@@ -30,6 +31,7 @@
     "@types/node": "^20.11.6",
     "@types/react": "^18.2.43",
     "@unocss/postcss": "^66.0.0",
+    "pagefind": "^1.3.0",
     "raw-loader": "^4.0.2",
     "rehype-mdx-code-props": "^3.0.1",
     "string-replace-loader": "^3.1.0",

apps/docs/src/components/code/DocsProvider.tsx

@@ -19,7 +19,7 @@ export const DocsProvider = ({
 
   return (
     // ensures docs container styles change according to theme
-    <div id={id} className={className}>
+    <div id={id} className={className} data-pagefind-ignore>
       <HvProvider
         themes={[pentahoPlus, ds5, ds3]}
         theme={docsTheme}

apps/docs/src/components/code/ExpandableLayout.tsx

@@ -30,7 +30,10 @@ export const ExpandableLayout = ({ scope, code }: ExpandableLayoutProps) => {
   });
 
   return (
-    <section className="relative mt-md border-border rounded-round">
+    <section
+      data-pagefind-ignore
+      className="relative mt-md border-border rounded-round"
+    >
       {/* Compact Controls */}
       <ExpandableControls
         onToggle={() => setIsExpanded((prev) => !prev)}
@@ -51,7 +54,7 @@ export const ExpandableLayout = ({ scope, code }: ExpandableLayoutProps) => {
 
       {/* Code Editor Section */}
       <div
-        className="max-h-400px overflow-auto rounded-b-inherit -mt-xxs transition-max-height border-color-inherit"
+        className="overflow-auto rounded-b-inherit -mt-xxs transition-max-height border-color-inherit"
         style={{
           maxHeight: isExpanded ? 400 : 0,
         }}

apps/docs/src/components/code/Playground.tsx

@@ -104,7 +104,11 @@ export const Playground = ({
   );
 
   return (
-    <section className="[&>*]:border-border" aria-label="Playground">
+    <section
+      data-pagefind-ignore
+      className="[&>*]:border-border"
+      aria-label="Playground"
+    >
       {/* Component preview and controls */}
       <div className="grid grid-cols-[2fr_1fr] border rounded-t-round">
         {/* Preview Area */}

apps/docs/src/components/code/PopupLayout.tsx

@@ -49,6 +49,7 @@ export const PopupLayout = ({ id, scope, code }: PopupLayoutProps) => {
   return (
     <section
       id={id}
+      data-pagefind-ignore
       className="bg-transparent relative border-border border-1 border-t-0 -ml-px h-full"
     >
       <HvDialog

apps/docs/src/components/code/ToggableLayout.tsx

@@ -37,8 +37,8 @@ export const ToggableLayout = ({ title, scope, code }: ToggableLayoutProps) => {
   };
 
   return (
-    <>
-      <div className={clsx("flex justify-between items-center mb-2")}>
+    <section data-pagefind-ignore>
+      <div className="flex justify-between items-center mb-xs">
         {/* Title */}
         <HvTypography variant="title4">{title}</HvTypography>
 
@@ -95,6 +95,6 @@ export const ToggableLayout = ({ title, scope, code }: ToggableLayoutProps) => {
           )}
         </>
       )}
-    </>
+    </section>
   );
 };