astro-tractstack 2.0.0-rc.20 → 2.0.0-rc.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.20",
+  "version": "2.0.0-rc.22",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/custom/minimal/CustomRoutes.astro

@@ -1,40 +1,40 @@
 ---
+//import Collections from './pages/Collections.astro';
+import type { ResourceNode } from '@/types/compositorTypes';
+
 export interface Props {
   route: string;
   slug: string;
-  resources: any[];
+  resources: ResourceNode[];
   variation?: string;
 }
 
-const { route, slug, resources } = Astro.props;
+const { route, slug /*, resources */ } = Astro.props;
 
-// Define available routes here
-export const routes = {
-  // collections: true,  // Uncomment to enable collections route
-};
+// list all here !
+export const routes = {};
 ---
 
 {
-  (
-    /* 
-  Uncomment and customize routes as needed:
-  
-  route === "collections" ? (
+  /*
+  route === 'collections' ? (
     <Collections route={route} slug={slug} resources={payload} />
-  ) : 
+  ) : (
   */
-    <div class="rounded-lg bg-gray-50 p-8 text-center">
-      <p class="text-gray-600">Custom route "{route}" not implemented</p>
-      <p class="mt-2 text-sm text-gray-500">
-        Edit <code>src/custom/CustomRoutes.astro</code> to add your custom
-        routes
-      </p>
-      <div class="mt-4 rounded border bg-white p-4 text-left text-xs">
-        <p class="mb-2 font-bold">Route Data:</p>
-        <p>Route: {route}</p>
-        <p>Slug: {slug}</p>
-        <p>Resources: {resources.length} items</p>
-      </div>
-    </div>
-  )
+}
+
+<div class="rounded-lg bg-gray-50 p-8 text-center">
+  <p class="text-gray-600">Custom route "{route}" not found</p>
+  <p class="mt-2 text-sm text-gray-500">Available routes: collections</p>
+  <div class="mt-4 rounded border bg-white p-4 text-left text-xs">
+    <p class="mb-2 font-bold">Route Data:</p>
+    <p>Route: {route}</p>
+    <p>Slug: {slug}</p>
+  </div>
+</div>
+
+{
+  /*
+) }
+*/
 }

package/templates/custom/with-examples/CustomRoutes.astro

@@ -1,25 +1,25 @@
 ---
 import Collections from './pages/Collections.astro';
+import type { ResourceNode } from '@/types/compositorTypes';
 
 export interface Props {
   route: string;
   slug: string;
-  resources: any[];
+  resources: ResourceNode[];
   variation?: string;
 }
 
 const { route, slug, resources } = Astro.props;
 
+// list all here !
 export const routes = {
   collections: true,
 };
-
-const payload = resources;
 ---
 
 {
   route === 'collections' ? (
-    <Collections route={route} slug={slug} resources={payload} />
+    <Collections route={route} slug={slug} resources={resources} />
   ) : (
     <div class="rounded-lg bg-gray-50 p-8 text-center">
       <p class="text-gray-600">Custom route "{route}" not found</p>

package/templates/custom/with-examples/pages/Collections.astro

@@ -1,110 +1,70 @@
 ---
-import Layout from '@/layouts/Layout.astro';
-//import type { MenuNode } from '@/types/tractstack';
+import CustomRoutes, { routes } from '@/custom/CustomRoutes.astro';
+import { preHealthCheck } from '@/utils/backend';
+//import type { ResourceNode } from '@/types/compositorTypes';
 
-export interface Props {
-  route: string;
-  slug: string;
-  variation?: string;
-  resources: any[];
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
 }
 
-const { route, slug, resources } = Astro.props;
+const { param1 } = Astro.params;
+// this needs to match the url path
+const route = `collections`;
 
-// uncomment if you add a menu id
-//
-//let menuPayload: MenuNode | null = null;
-//const hardcodedMenuId = '';
-//const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-//try {
-//  const menuResponse = await fetch(`${goBackend}/api/v1/nodes/menus/${hardcodedMenuId}`);
-//  if (menuResponse.ok) {
-//    menuPayload = await menuResponse.json();
-//  }
-//} catch (error) {
-//  console.error('Error fetching menu:', error);
-//}
+// Check if route is enabled
+if (!param1 || !routes[route]) {
+  return new Response(null, {
+    status: 404,
+    statusText: 'Not Found',
+  });
+}
 
-const targetSlug = `${route}-${slug}`;
-const categoryResources = resources || [];
-const activeResource = categoryResources.find(
-  (resource: any) => resource.slug === targetSlug
-);
+// include all resource categories here
+const CATEGORIES = [`collections`];
 
-const pageTitle = `${route}=${slug}`;
----
+let resources = [];
+const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
-<Layout title={pageTitle}>
-  <div class="border-b bg-gray-100 p-4">
-    <h1 class="text-2xl font-bold">{pageTitle}</h1>
-    <p class="text-sm text-gray-600">
-      Collections page - slug: {slug}
-    </p>
-  </div>
+try {
+  const resourcesResponse = await fetch(`${goBackend}/api/v1/nodes/resources`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+    body: JSON.stringify({ categories: CATEGORIES }),
+  });
 
-  <main id="main-content" class="min-h-screen w-full">
-    <div class="bg-white p-8">
-      {
-        slug ? (
-          <div class="mx-auto max-w-4xl">
-            <h2 class="mb-4 text-xl font-bold">
-              Collection: {route}={slug}
-            </h2>
+  if (resourcesResponse.ok) {
+    const responseData = await resourcesResponse.json();
+    if (responseData.resources) {
+      resources = responseData.resources;
+    }
+  }
+} catch (error) {
+  console.error('Error fetching resources:', error);
+  return new Response(null, {
+    status: 500,
+    statusText: 'Internal Server Error',
+  });
+}
 
-            {activeResource ? (
-              <div class="mb-6 rounded-lg bg-blue-50 p-6">
-                <h3 class="mb-2 text-lg font-bold text-blue-900">
-                  {activeResource.title}
-                </h3>
-                <p class="mb-2 text-blue-800">{activeResource.oneliner}</p>
-                <div class="text-sm text-blue-600">
-                  <p>ID: {activeResource.id}</p>
-                  <p>Slug: {activeResource.slug}</p>
-                  <p>Category: {activeResource.categorySlug || 'none'}</p>
-                </div>
-              </div>
-            ) : (
-              <div class="mb-6 rounded-lg bg-yellow-50 p-6">
-                <p class="text-yellow-800">
-                  No active resource found for slug: {targetSlug}
-                </p>
-              </div>
-            )}
+/*
+if (!resources.length) {
+  return new Response(null, {
+    status: 404,
+    statusText: 'Not Found',
+  });
+}
+*/
 
-            <div class="rounded-lg bg-gray-50 p-6">
-              <h3 class="mb-4 text-lg font-bold">
-                All Resources in Category ({categoryResources.length})
-              </h3>
-              {categoryResources.length > 0 ? (
-                <div class="grid gap-4 md:grid-cols-2">
-                  {categoryResources.map((resource: any) => (
-                    <div class="rounded border bg-white p-4">
-                      <h4 class="font-bold text-gray-900">{resource.title}</h4>
-                      <p class="mt-1 text-sm text-gray-600">
-                        {resource.oneliner}
-                      </p>
-                      <div class="mt-2 text-xs text-gray-500">
-                        <p>Slug: {resource.slug}</p>
-                        {resource.categorySlug && (
-                          <p>Category: {resource.categorySlug}</p>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p class="text-gray-500">
-                  No resources found in this category.
-                </p>
-              )}
-            </div>
-          </div>
-        ) : null
-      }
-    </div>
-  </main>
+const pageTitle = `${route} collection`;
+---
 
-  <div class="border-t bg-gray-100 p-4">
-    <p class="text-sm text-gray-600">Collections footer</p>
-  </div>
-</Layout>
+<div class="border-b bg-gray-100 p-4">
+  <h1 class="text-2xl font-bold">{pageTitle}</h1>
+  <p class="text-sm text-gray-600">
+    Collections page - slug: {param1}
+  </p>
+</div>

package/templates/src/components/compositor/nodes/Pane.tsx

@@ -27,12 +27,19 @@ const CodeHookContainer = ({
         {Object.entries(payload.params).map(
           ([key, value]) =>
             value && (
-              <div key={key} className="flex items-start">
+              <>
                 <span className="min-w-24 font-bold text-gray-600">{key}:</span>
-                <span className="ml-2 truncate text-gray-800">
-                  {JSON.stringify(value)}
-                </span>
-              </div>
+                <div className="ml-2 flex flex-wrap gap-1">
+                  {value.split('|').map((item, index) => (
+                    <span
+                      key={index}
+                      className="inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-800"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </>
             )
         )}
       </div>

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

@@ -133,10 +133,15 @@ if (!brandConfig.SITE_INIT) {
               <div class="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}
-                  noPaneId={true}
                 />
               </div>
             ) : (