astro-tractstack 2.3.4 → 2.4.0

package/templates/src/components/storykeep/state/FetchAnalytics.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useRef } from 'react';
 import { useStore } from '@nanostores/react';
-import { epinetCustomFilters } from '@/stores/analytics';
+import {
+  epinetCustomFilters,
+  getEpinetCustomFilters,
+  setEpinetCustomFilters,
+} from '@/stores/analytics';
 import { TractStackAPI } from '@/utils/api';
 
 const VERBOSE = false;
@@ -252,7 +256,7 @@ class AnalyticsService {
       this.setCachedResponse(cacheKey, analyticsData);
       onUpdate(analyticsData);
 
-      epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
+      setEpinetCustomFilters(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
         ...filters,
         availableFilters: data.availableFilters || [],
       });
@@ -298,9 +302,9 @@ class AnalyticsService {
     if (VERBOSE) console.log('🏁 Initializing analytics filters');
     const nowUTC = new Date();
     const oneWeekAgoUTC = new Date(nowUTC.getTime() - 7 * 24 * 60 * 60 * 1000);
-    const current = epinetCustomFilters.get();
+    const current = getEpinetCustomFilters();
     if (!current.enabled) {
-      epinetCustomFilters.set(tenantId, {
+      setEpinetCustomFilters(tenantId, {
         enabled: true,
         visitorType: 'all',
         selectedUserId: null,

package/templates/src/components/storykeep/widgets/Wizard.tsx

@@ -139,7 +139,7 @@ export default function Wizard({
     const buildWizardData = async () => {
       try {
         const homePage = activeContentMap.find(
-          (item) => item.slug === homeSlug
+          (item: FullContentMapItem) => item.slug === homeSlug
         );
 
         let homeData = null;
@@ -173,7 +173,9 @@ export default function Wizard({
           hasPanes: !!homePage?.panes?.length,
           hasSeo: !!homePage?.description,
           hasMenu: !!homeData?.menuId,
-          hasAnyMenu: activeContentMap.some((item) => item.type === 'Menu'),
+          hasAnyMenu: activeContentMap.some(
+            (item: FullContentMapItem) => item.type === 'Menu'
+          ),
         };
 
         setWizardData(data);

package/templates/src/lib/codeHookHelper.ts

@@ -0,0 +1,156 @@
+import { getCachedFullContentMap, getFullContentMap } from '@/stores/analytics';
+import { getCodeHookResources } from '@/lib/resources';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+export interface CodeHookBladeContext {
+  tenantId: string;
+  paneId: string;
+  optionsStr: string;
+  options?: { params: { options: string } };
+}
+
+export interface CodeHookResourceFilters {
+  categories: string[];
+  slugs: string[];
+}
+
+export function parseCodeHookBladeContext(
+  searchParams: URLSearchParams
+): CodeHookBladeContext {
+  const tenantId = searchParams.get('tenantId') || 'default';
+  const paneId = searchParams.get('paneId') || '';
+  const optionsStr = searchParams.get('options') || '';
+  const options = optionsStr ? { params: { options: optionsStr } } : undefined;
+  return { tenantId, paneId, optionsStr, options };
+}
+
+export async function resolveCodeHookFullContentMap(
+  tenantId: string
+): Promise<any[]> {
+  let fullContentMap = getCachedFullContentMap(tenantId);
+  if (!fullContentMap.length) {
+    fullContentMap = await getFullContentMap(tenantId);
+  }
+  return fullContentMap;
+}
+
+export function parseCodeHookResourceFilters(
+  optionsStr: string,
+  logLabel?: string
+): CodeHookResourceFilters {
+  const categories: string[] = [];
+  const slugs: string[] = [];
+  if (!optionsStr) {
+    return { categories, slugs };
+  }
+  try {
+    const parsed = JSON.parse(optionsStr);
+    if (typeof parsed.category === 'string' && parsed.category) {
+      categories.push(...parsed.category.split('|'));
+    }
+    if (typeof parsed.slugs === 'string' && parsed.slugs) {
+      slugs.push(...parsed.slugs.split(','));
+    }
+    if (typeof parsed.slug === 'string' && parsed.slug) {
+      slugs.push(parsed.slug);
+    }
+  } catch (e) {
+    console.error(`Invalid options for ${logLabel ?? 'codehook resources'}`, e);
+  }
+  return { categories, slugs };
+}
+
+export async function resolveCodeHookResources(
+  tenantId: string,
+  optionsStr: string,
+  logLabel?: string
+): Promise<ResourceNode[]> {
+  const { categories, slugs } = parseCodeHookResourceFilters(
+    optionsStr,
+    logLabel
+  );
+  return getCodeHookResources(tenantId, categories, slugs);
+}
+
+export function buildCodeHookBladePath(
+  hookId: string,
+  ctx: Pick<CodeHookBladeContext, 'paneId' | 'tenantId' | 'optionsStr'>
+): string {
+  const params = new URLSearchParams({
+    paneId: ctx.paneId,
+    tenantId: ctx.tenantId,
+  });
+  if (ctx.optionsStr) {
+    params.set('options', ctx.optionsStr);
+  }
+  return `/codehooks/${hookId}?${params.toString()}`;
+}
+
+export function resolveSSRFetchOrigin(pageUrl: URL, siteUrl?: string): string {
+  if (siteUrl) {
+    try {
+      return new URL(siteUrl).origin;
+    } catch {
+      // fall through to page origin
+    }
+  }
+  return pageUrl.origin;
+}
+
+export async function fetchCodeHookBladeHtml(
+  bladePath: string,
+  request: Request,
+  origin: string
+): Promise<string> {
+  try {
+    const url = new URL(bladePath, origin);
+    const res = await fetch(url, {
+      headers: {
+        cookie: request.headers.get('cookie') ?? '',
+        accept: 'text/html',
+      },
+    });
+    if (!res.ok) {
+      console.error(
+        `Failed to SSR-fetch codehook blade ${bladePath}. Status: ${res.status}`
+      );
+      return '';
+    }
+    return res.text();
+  } catch (error) {
+    console.error(`Error SSR-fetching codehook blade ${bladePath}:`, error);
+    return '';
+  }
+}
+
+export async function fetchCodeHookBladesForPanes(options: {
+  paneIds: string[];
+  codeHookTargets: Record<string, string>;
+  tenantId: string;
+  request: Request;
+  origin: string;
+}): Promise<Record<string, string>> {
+  const { paneIds, codeHookTargets, tenantId, request, origin } = options;
+  const result: Record<string, string> = {};
+
+  await Promise.all(
+    paneIds
+      .filter((paneId) => codeHookTargets[paneId])
+      .map(async (paneId) => {
+        const hookId = codeHookTargets[paneId];
+        const optionsStr = codeHookTargets[`${paneId}-${hookId}`] || '';
+        const bladePath = buildCodeHookBladePath(hookId, {
+          paneId,
+          tenantId,
+          optionsStr,
+        });
+        result[paneId] = await fetchCodeHookBladeHtml(
+          bladePath,
+          request,
+          origin
+        );
+      })
+  );
+
+  return result;
+}

package/templates/src/lib/resources.ts

@@ -1,6 +1,47 @@
 import { headerResourcesStore, HEADER_RESOURCES_TTL } from '@/stores/resources';
 import type { ResourceNode } from '@/types/compositorTypes';
 
+// Stateless resource fetch for codehook blades. POSTs categories/slugs to the
+// nodes/resources endpoint, unwraps the { resources, count } envelope, and
+// returns the FLAT ResourceNode[] (the API shape) unchanged - no grouping.
+// Components that need a keyed view reshape internally. No cache.
+export async function getCodeHookResources(
+  tenantId: string,
+  categories: string[] = [],
+  slugs: string[] = []
+): Promise<ResourceNode[]> {
+  if (categories.length === 0 && slugs.length === 0) {
+    return [];
+  }
+
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    const response = await fetch(`${goBackend}/api/v1/nodes/resources`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+      },
+      body: JSON.stringify({ categories, slugs }),
+    });
+
+    if (!response.ok) {
+      console.error(
+        `Failed to fetch codehook resources. Status: ${response.status}`
+      );
+      return [];
+    }
+
+    const payload = await response.json();
+    return (payload.resources as ResourceNode[]) || [];
+  } catch (error) {
+    console.error('Error fetching codehook resources:', error);
+    return [];
+  }
+}
+
 export async function getHeaderResources(
   tenantId: string,
   categories: string[],

package/templates/src/lib/storyData.ts

@@ -1,5 +1,5 @@
 import { handleFailedResponse } from '@/utils/backend';
-import type { ImpressionNode, ResourceNode } from '@/types/compositorTypes';
+import type { ImpressionNode } from '@/types/compositorTypes';
 
 export interface StoryData {
   id: string;
@@ -8,7 +8,6 @@ export interface StoryData {
   paneIds: string[];
   codeHookTargets: Record<string, string>;
   codeHookVisibility: Record<string, boolean | string[]>;
-  resourcesPayload: Record<string, ResourceNode[]>;
   impressions: ImpressionNode[];
   fragments: Record<string, string>;
   menu: any;

package/templates/src/pages/[...slug]/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';
@@ -188,7 +188,7 @@ for (const [key, value] of Astro.url.searchParams) {
             fullContentMap={fullContentMap}
             fullCanonicalURL={fullCanonicalURL}
             urlParams={urlParams}
-            availableCodeHooks={Object.keys(codeHookComponents)}
+            availableCodeHooks={availableCodeHookIds}
             client:only="react"
           />
         </div>
@@ -213,7 +213,7 @@ for (const [key, value] of Astro.url.searchParams) {
     }
     <div class="pointer-events-auto max-h-full">
       <SettingsPanel
-        availableCodeHooks={Object.keys(codeHookComponents)}
+        availableCodeHooks={availableCodeHookIds}
         client:only="react"
       />
     </div>

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>