astro-tractstack 2.3.5 → 2.4.0

package/templates/src/pages/[...slug].astro

@@ -1,10 +1,13 @@
 ---
 import Layout from '@/layouts/Layout.astro';
-import CodeHook from '@/custom/CodeHook.astro';
 import { getBrandConfig } from '@/utils/api/brandConfig';
 import { getFullContentMap } from '@/stores/analytics';
 import { getOrSetSessionId } from '@/lib/session';
 import { getStoryData } from '@/lib/storyData';
+import {
+  fetchCodeHookBladesForPanes,
+  resolveSSRFetchOrigin,
+} from '@/lib/codeHookHelper';
 import { preHealthCheck } from '@/utils/backend';
 
 const tenantId =
@@ -43,7 +46,6 @@ const storyfragmentId = storyData.id;
 const storyfragmentTitle = storyData.title || 'Untitled Story';
 const paneIds = storyData.paneIds || [];
 const codeHookTargets = storyData.codeHookTargets || {};
-const resourcesPayload = storyData.resourcesPayload || {};
 
 if (paneIds.length === 0) {
   console.log(`Empty Story Fragment. Redirecting to /storykeep`);
@@ -66,6 +68,14 @@ if (!brandConfig.SITE_INIT) {
   return Astro.redirect('/storykeep');
 }
 
+const codeHookHtml = await fetchCodeHookBladesForPanes({
+  paneIds,
+  codeHookTargets,
+  tenantId,
+  request: Astro.request,
+  origin: resolveSSRFetchOrigin(Astro.url, brandConfig.SITE_URL),
+});
+
 const ogImage =
   typeof storyData.socialImagePath === `string`
     ? storyData.socialImagePath
@@ -95,77 +105,73 @@ paneIds.forEach((paneId: string) => {
   <main id="main-content" class="w-full">
     <div class="panes-container">
       {
-        paneIds.map((paneId: string) => (
-          <div id={paneSlugLookup[paneId]}>
-            <div
-              id={`pane-${paneId}`}
-              data-pane-id={paneId}
-              class="pane-fragment-container"
-              style={
-                !codeHookTargets[paneId]
-                  ? undefined
-                  : !storyData.codeHookVisibility?.[paneId]
-                    ? 'display:none;'
-                    : 'display:block;'
-              }
-              hx-get={`/api/v1/fragments/panes/${paneId}`}
-              hx-trigger="refresh"
-              hx-swap="innerHTML scroll:none"
-            >
-              {codeHookTargets[paneId] ? (
-                <div class="relative overflow-hidden">
-                  <CodeHook
-                    target={codeHookTargets[paneId]}
-                    paneId={paneId}
-                    options={(() => {
-                      const optionsStr =
-                        codeHookTargets[paneId + '-' + codeHookTargets[paneId]];
-                      return optionsStr
-                        ? { params: { options: optionsStr } }
-                        : undefined;
-                    })()}
-                    fullContentMap={fullContentMap}
-                    resourcesPayload={resourcesPayload}
-                  />
-                  <div id={`pane-${paneId}-unset`}>
-                    {Array.isArray(storyData.codeHookVisibility?.[paneId]) && (
-                      <button
-                        type="button"
-                        class="absolute right-2 top-2 z-10 rounded-full bg-white p-1.5 text-mydarkgrey hover:bg-black hover:text-white"
-                        title="Go Back"
-                        hx-post="/api/v1/state"
-                        hx-trigger="click"
-                        hx-swap="none"
-                        hx-vals={JSON.stringify({
-                          unsetBeliefIds:
-                            storyData.codeHookVisibility[paneId].join(','),
-                          paneId: paneId,
-                        })}
-                        hx-preserve="true"
-                      >
-                        <svg
-                          class="h-6 w-6"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke-width="1.5"
-                          stroke="currentColor"
+        paneIds.map((paneId: string) => {
+          const hookId = codeHookTargets[paneId];
+          const isCodeHook = !!hookId;
+          return (
+            <div id={paneSlugLookup[paneId]}>
+              <div
+                id={`pane-${paneId}`}
+                data-pane-id={paneId}
+                class="pane-fragment-container"
+                style={
+                  !isCodeHook
+                    ? undefined
+                    : !storyData.codeHookVisibility?.[paneId]
+                      ? 'display:none;'
+                      : 'display:block;'
+                }
+                hx-get={
+                  !isCodeHook ? `/api/v1/fragments/panes/${paneId}` : undefined
+                }
+                hx-trigger={!isCodeHook ? 'refresh' : undefined}
+                hx-swap={!isCodeHook ? 'innerHTML scroll:none' : undefined}
+              >
+                {isCodeHook ? (
+                  <div class="relative overflow-hidden">
+                    <Fragment set:html={codeHookHtml[paneId] || ''} />
+                    <div id={`pane-${paneId}-unset`}>
+                      {Array.isArray(
+                        storyData.codeHookVisibility?.[paneId]
+                      ) && (
+                        <button
+                          type="button"
+                          class="absolute right-2 top-2 z-10 rounded-full bg-white p-1.5 text-mydarkgrey hover:bg-black hover:text-white"
+                          title="Go Back"
+                          hx-post="/api/v1/state"
+                          hx-trigger="click"
+                          hx-swap="none"
+                          hx-vals={JSON.stringify({
+                            unsetBeliefIds:
+                              storyData.codeHookVisibility[paneId].join(','),
+                            paneId: paneId,
+                          })}
+                          hx-preserve="true"
                         >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
-                          />
-                        </svg>
-                      </button>
-                    )}
+                          <svg
+                            class="h-6 w-6"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
+                            />
+                          </svg>
+                        </button>
+                      )}
+                    </div>
                   </div>
-                </div>
-              ) : (
-                <Fragment set:html={storyData.fragments[paneId] || ''} />
-              )}
+                ) : (
+                  <Fragment set:html={storyData.fragments[paneId] || ''} />
+                )}
+              </div>
             </div>
-          </div>
-        ))
+          );
+        })
       }
     </div>
   </main>

package/templates/src/pages/codehooks/[...hookId].astro

@@ -0,0 +1,18 @@
+---
+export const partial = true;
+const hookId = Astro.params.hookId || '';
+---
+
+<div class="my-4 w-full bg-gray-50 p-6">
+  <div
+    class="mb-4 rounded-lg border-2 border-dashed border-gray-300 bg-slate-50 p-6"
+  >
+    <h3 class="text-lg text-gray-700">
+      Code Hook:{' '}
+      <span class="font-action font-bold">{hookId || 'unknown'}</span>
+    </h3>
+    <p class="mt-2 text-sm text-gray-500">
+      CodeHook not activated for this install.
+    </p>
+  </div>
+</div>

package/templates/src/pages/codehooks/bunny-video.astro

@@ -0,0 +1,9 @@
+---
+export const partial = true;
+import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
+import { parseCodeHookBladeContext } from '@/lib/codeHookHelper';
+
+const { options } = parseCodeHookBladeContext(Astro.url.searchParams);
+---
+
+<BunnyVideoWrapper options={options} />

package/templates/src/pages/codehooks/custom-hero.astro

@@ -0,0 +1,6 @@
+---
+export const partial = true;
+import CustomHero from '@/custom/CustomHero.astro';
+---
+
+<CustomHero />

package/templates/src/pages/codehooks/epinet.astro

@@ -0,0 +1,15 @@
+---
+export const partial = true;
+import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
+import {
+  parseCodeHookBladeContext,
+  resolveCodeHookFullContentMap,
+} from '@/lib/codeHookHelper';
+
+const { tenantId } = parseCodeHookBladeContext(Astro.url.searchParams);
+const fullContentMap = await resolveCodeHookFullContentMap(tenantId);
+---
+
+<div style="min-height: 400px;">
+  <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
+</div>

package/templates/src/pages/codehooks/featured-article.astro

@@ -0,0 +1,13 @@
+---
+export const partial = true;
+import FeaturedArticle from '@/components/codehooks/FeaturedArticle.astro';
+import {
+  parseCodeHookBladeContext,
+  resolveCodeHookFullContentMap,
+} from '@/lib/codeHookHelper';
+
+const { tenantId, options } = parseCodeHookBladeContext(Astro.url.searchParams);
+const fullContentMap = await resolveCodeHookFullContentMap(tenantId);
+---
+
+<FeaturedArticle options={options} fullContentMap={fullContentMap} />

package/templates/src/pages/codehooks/get-crafting.astro

@@ -0,0 +1,8 @@
+---
+export const partial = true;
+import SandboxLauncher from '@/custom/SandboxLauncher';
+---
+
+<div style="min-height: 400px;">
+  <SandboxLauncher client:only="react" />
+</div>

package/templates/src/pages/codehooks/list-content.astro

@@ -0,0 +1,13 @@
+---
+export const partial = true;
+import ListContent from '@/components/codehooks/ListContent.astro';
+import {
+  parseCodeHookBladeContext,
+  resolveCodeHookFullContentMap,
+} from '@/lib/codeHookHelper';
+
+const { tenantId, options } = parseCodeHookBladeContext(Astro.url.searchParams);
+const fullContentMap = await resolveCodeHookFullContentMap(tenantId);
+---
+
+<ListContent options={options} fullContentMap={fullContentMap} />

package/templates/src/pages/codehooks/search-widget.astro

@@ -0,0 +1,13 @@
+---
+export const partial = true;
+import SearchWidget from '@/components/codehooks/SearchWidget.tsx';
+import {
+  parseCodeHookBladeContext,
+  resolveCodeHookFullContentMap,
+} from '@/lib/codeHookHelper';
+
+const { tenantId } = parseCodeHookBladeContext(Astro.url.searchParams);
+const fullContentMap = await resolveCodeHookFullContentMap(tenantId);
+---
+
+<SearchWidget fullContentMap={fullContentMap} client:load />

package/templates/src/pages/codehooks/shopify-product-grid.astro

@@ -0,0 +1,25 @@
+---
+export const partial = true;
+import ShopifyProductGrid from '@/custom/shopify/ShopifyProductGrid';
+import {
+  parseCodeHookBladeContext,
+  resolveCodeHookResources,
+} from '@/lib/codeHookHelper';
+
+const { tenantId, optionsStr, options } = parseCodeHookBladeContext(
+  Astro.url.searchParams
+);
+const resources = await resolveCodeHookResources(
+  tenantId,
+  optionsStr,
+  'shopify-product-grid'
+);
+---
+
+<div style="min-height: 400px;">
+  <ShopifyProductGrid
+    options={options}
+    resources={resources}
+    client:only="react"
+  />
+</div>

package/templates/src/pages/codehooks/shopify-service-list.astro

@@ -0,0 +1,25 @@
+---
+export const partial = true;
+import ShopifyServiceList from '@/custom/shopify/ShopifyServiceList';
+import {
+  parseCodeHookBladeContext,
+  resolveCodeHookResources,
+} from '@/lib/codeHookHelper';
+
+const { tenantId, optionsStr, options } = parseCodeHookBladeContext(
+  Astro.url.searchParams
+);
+const resources = await resolveCodeHookResources(
+  tenantId,
+  optionsStr,
+  'shopify-service-list'
+);
+---
+
+<div style="min-height: 300px;">
+  <ShopifyServiceList
+    options={options}
+    resources={resources}
+    client:only="react"
+  />
+</div>

package/templates/src/pages/context/[...contextSlug]/edit.astro

@@ -6,7 +6,7 @@ import { getFullContentMap } from '@/stores/analytics';
 import { getBrandConfig } from '@/utils/api/brandConfig';
 import { joinUrlPaths } from '@/utils/helpers';
 import { handleFailedResponse } from '@/utils/backend';
-import { components as codeHookComponents } from '@/custom/CodeHook.astro';
+import { availableCodeHookIds } from '@/custom/codehooks';
 import StoryKeepHeader from '@/components/edit/Header';
 import StoryKeepToolBar from '@/components/edit/ToolBar';
 import StoryKeepToolMode from '@/components/edit/ToolMode';
@@ -175,7 +175,7 @@ for (const [key, value] of Astro.url.searchParams) {
             fullContentMap={fullContentMap}
             fullCanonicalURL={canonicalURL}
             urlParams={urlParams}
-            availableCodeHooks={Object.keys(codeHookComponents)}
+            availableCodeHooks={availableCodeHookIds}
             client:only="react"
           />
         </div>
@@ -201,7 +201,7 @@ for (const [key, value] of Astro.url.searchParams) {
     <div class="pointer-events-auto max-h-full">
       <SettingsPanel
         config={brandConfig}
-        availableCodeHooks={Object.keys(codeHookComponents)}
+        availableCodeHooks={availableCodeHookIds}
         client:only="react"
       />
     </div>

package/templates/src/pages/context/[...contextSlug].astro

@@ -1,6 +1,12 @@
 ---
 import Layout from '@/layouts/Layout.astro';
 import { getBrandConfig } from '@/utils/api/brandConfig';
+import { getFullContentMap } from '@/stores/analytics';
+import {
+  buildCodeHookBladePath,
+  fetchCodeHookBladeHtml,
+  resolveSSRFetchOrigin,
+} from '@/lib/codeHookHelper';
 import { handleFailedResponse } from '@/utils/backend';
 import { preHealthCheck } from '@/utils/backend';
 
@@ -56,6 +62,8 @@ try {
 
 const paneId = contextPaneData.id;
 const paneTitle = contextPaneData.title || 'Context';
+const codeHookTarget = contextPaneData.codeHookTarget;
+const codeHookOptions = contextPaneData.codeHookPayload?.options;
 
 // Get rendered fragment for the context pane
 let fragmentData = '';
@@ -94,6 +102,23 @@ const brandConfig = await getBrandConfig(tenantId);
 if (!brandConfig.SITE_INIT) {
   return Astro.redirect('/storykeep');
 }
+
+// Warm the in-process content-map store before SSR-fetching the codehook blade.
+await getFullContentMap(tenantId);
+
+let codeHookBladeHtml = '';
+if (codeHookTarget) {
+  const bladePath = buildCodeHookBladePath(codeHookTarget, {
+    paneId,
+    tenantId,
+    optionsStr: codeHookOptions || '',
+  });
+  codeHookBladeHtml = await fetchCodeHookBladeHtml(
+    bladePath,
+    Astro.request,
+    resolveSSRFetchOrigin(Astro.url, brandConfig.SITE_URL)
+  );
+}
 ---
 
 <Layout
@@ -108,16 +133,28 @@ if (!brandConfig.SITE_INIT) {
   storyfragmentId={paneId}
 >
   <main id="main-content" class="w-full">
-    <div
-      id={`pane-${paneId}`}
-      data-pane-id={paneId}
-      class="context-pane-container"
-      hx-get={`/api/v1/fragments/panes/${paneId}`}
-      hx-trigger="refresh"
-      hx-swap="innerHTML scroll:none"
-    >
-      <Fragment set:html={fragmentData} />
-    </div>
+    {
+      codeHookTarget ? (
+        <div
+          id={`pane-${paneId}`}
+          data-pane-id={paneId}
+          class="context-pane-container"
+        >
+          <Fragment set:html={codeHookBladeHtml} />
+        </div>
+      ) : (
+        <div
+          id={`pane-${paneId}`}
+          data-pane-id={paneId}
+          class="context-pane-container"
+          hx-get={`/api/v1/fragments/panes/${paneId}`}
+          hx-trigger="refresh"
+          hx-swap="innerHTML scroll:none"
+        >
+          <Fragment set:html={fragmentData} />
+        </div>
+      )
+    }
 
     <div class="py-12 text-center text-2xl md:text-3xl">
       <button

package/templates/src/pages/sandbox.astro

@@ -5,9 +5,7 @@ import Layout from '@/layouts/Layout.astro';
 import Header from '@/components/Header.astro';
 import { getFullContentMap } from '@/stores/analytics';
 import { getBrandConfig } from '@/utils/api/brandConfig';
-import CodeHook, {
-  components as codeHookComponents,
-} from '@/custom/CodeHook.astro';
+import { availableCodeHookIds } from '@/custom/codehooks';
 import StoryKeepHeader from '@/components/edit/Header';
 import StoryKeepToolBar from '@/components/edit/ToolBar';
 import StoryKeepToolMode from '@/components/edit/ToolMode';
@@ -64,15 +62,6 @@ const sandboxToken = `${timestamp}.${signature}`;
   isStoryKeep={true}
   isEditor={true}
 >
-  <CodeHook
-    target="get-tractstack"
-    options={{
-      params: {
-        options: JSON.stringify({ isEmbedded: false }),
-      },
-    }}
-  />
-
   <Header
     title={title}
     slug="sandbox"
@@ -115,7 +104,7 @@ const sandboxToken = `${timestamp}.${signature}`;
             fullContentMap={fullContentMap}
             fullCanonicalURL="/sandbox"
             urlParams={urlParams}
-            availableCodeHooks={Object.keys(codeHookComponents)}
+            availableCodeHooks={availableCodeHookIds}
             isSandboxMode={true}
             sandboxToken={sandboxToken}
             client:only="react"
@@ -137,7 +126,7 @@ const sandboxToken = `${timestamp}.${signature}`;
 
     <div class="pointer-events-auto max-h-full">
       <SettingsPanel
-        availableCodeHooks={Object.keys(codeHookComponents)}
+        availableCodeHooks={availableCodeHookIds}
         client:only="react"
       />
     </div>