astro-tractstack 2.0.0-rc.2 → 2.0.0-rc.21

package/templates/custom/minimal/CodeHook.astro

@@ -1,17 +1,16 @@
 ---
-// CodeHook Dispatcher - Minimal Version
-// Framework components are always available, custom components are commented for guidance
-
 import FeaturedContent from '@/components/codehooks/FeaturedContent.astro';
 import ListContent from '@/components/codehooks/ListContent.astro';
 import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
 import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
 import type { FullContentMapItem } from '@/types/tractstack';
+import type { ResourceNode } from '@/types/compositorTypes';
 // import CustomHero from './CustomHero.astro';  // Uncomment to add custom components
 
 export interface Props {
   target: string;
   fullContentMap: FullContentMapItem[];
+  resourcesPayload?: Record<string, ResourceNode[]>;
   options?: {
     params?: {
       options?: string;
@@ -19,7 +18,7 @@ export interface Props {
   };
 }
 
-const { target, options, fullContentMap } = Astro.props;
+const { target, options, fullContentMap /*, resourcesPayload */ } = Astro.props;
 
 export const components = {
   'featured-content': true,

package/templates/custom/minimal/CustomRoutes.astro

@@ -1,46 +1,40 @@
 ---
-// V2 Custom Routes - Minimal Version
-// This is a stub - implement your custom routes here
+//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
-};
-
-// Example implementation for collections:
-// const payload = resources; // V2 resources are already filtered by backend
+// 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/CodeHook.astro

@@ -1,17 +1,16 @@
 ---
-// V2 CodeHook Dispatcher - With Examples
-// Framework components and custom examples are available
-
 import CustomHero from './CustomHero.astro';
 import FeaturedContent from '@/components/codehooks/FeaturedContent.astro';
 import ListContent from '@/components/codehooks/ListContent.astro';
 import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
 import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
 import type { FullContentMapItem } from '@/types/tractstack';
+import type { ResourceNode } from '@/types/compositorTypes';
 
 export interface Props {
   target: string;
   fullContentMap: FullContentMapItem[];
+  resourcesPayload?: Record<string, ResourceNode[]>;
   options?: {
     params?: {
       options?: string;
@@ -19,7 +18,7 @@ export interface Props {
   };
 }
 
-const { target, options, fullContentMap } = Astro.props;
+const { target, options, fullContentMap /*, resourcesPayload */ } = Astro.props;
 
 export const components = {
   'custom-hero': true,

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

@@ -1,29 +1,25 @@
 ---
-// V2 Custom Routes - With Examples
-// Full Collections implementation included
-
 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,
 };
-
-// V2: Resources are already filtered by backend, no client-side extraction needed
-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/gitignore

@@ -0,0 +1,42 @@
+# Build output
+dist/
+*.tgz
+#*.d.ts
+
+# Dependencies
+node_modules/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# Temporary folders
+tmp/
+temp/

package/templates/prettierignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.astro/
+templates/css/
+templates/fonts/

package/templates/prettierrc

@@ -0,0 +1,19 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": [
+    "prettier-plugin-astro",
+    "prettier-plugin-tailwindcss"
+  ],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

package/templates/src/components/Footer.astro

@@ -176,7 +176,7 @@ const createdDate = created ? new Date(created) : new Date();
         >
           Tract Stack</a
         >
-        &ndash; no-code community engine from{` `}
+        &ndash; the &#8220;free web press&#8221; by{` `}
         <a
           href="https://atriskmedia.com/?utm_source=tractstack&utm_medium=www&utm_campaign=community"
           class="font-bold underline hover:text-black"

package/templates/src/components/Header.astro

@@ -160,12 +160,13 @@ const authStatus = {
 
       {/* Edit Icon */}
       {
-        isEditable ? (
+        isEditable &&
+        (authStatus.isAdmin || authStatus.userRole === 'editor') ? (
           <a
             data-astro-reload
             href={!isContext ? `/${slug}/edit` : `/context/${slug}/edit`}
             class="text-myblue/80 hover:text-myblue hover:rotate-6"
-            title={!isContext ? 'Edit this story' : 'Edit this pane'}
+            title={!isContext ? 'Edit this story' : 'Edit this page'}
           >
             <svg
               class="h-6 w-6"
@@ -335,7 +336,13 @@ const authStatus = {
 }
 
 <script>
-  document.addEventListener('DOMContentLoaded', function () {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupAdminModal);
+  } else {
+    setupAdminModal();
+  }
+
+  function setupAdminModal() {
     const logoutBtn = document.getElementById(
       'logout-btn'
     ) as HTMLButtonElement | null;
@@ -394,65 +401,61 @@ const authStatus = {
       });
     }
 
-    // Admin Modal JavaScript - Only runs when admin elements exist
-    const heartBtn = document.getElementById('admin-heart-btn');
-    const modal = document.getElementById('admin-modal');
-    const closeBtn = document.getElementById('admin-modal-close');
-    const iframe = document.getElementById('admin-sysop-iframe');
-
-    if (heartBtn && modal && closeBtn && iframe) {
-      // Open modal when heart icon is clicked
-      heartBtn.addEventListener('click', function (e) {
+    // Admin Modal JavaScript - Use event delegation
+    document.addEventListener('click', function (e) {
+      if (e.target && (e.target as Element).closest('#admin-heart-btn')) {
         e.preventDefault();
-        modal.classList.remove('hidden');
-        modal.setAttribute('aria-hidden', 'false');
-
-        // Focus management for accessibility
-        closeBtn.focus();
-
-        // Prevent body scroll when modal is open
-        document.body.style.overflow = 'hidden';
-      });
+        const modal = document.getElementById('admin-modal');
+        const closeBtn = document.getElementById('admin-modal-close');
+
+        if (modal && closeBtn) {
+          modal.classList.remove('hidden');
+          modal.setAttribute('aria-hidden', 'false');
+          closeBtn.focus();
+          document.body.style.overflow = 'hidden';
+        }
+        return;
+      }
 
-      // Close modal when X button is clicked
-      closeBtn.addEventListener('click', function (e) {
+      if (e.target && (e.target as Element).closest('#admin-modal-close')) {
         e.preventDefault();
         closeModal();
-      });
+        return;
+      }
 
-      // Close modal when clicking outside the iframe
-      modal.addEventListener('click', function (e) {
-        if (e.target === modal) {
-          closeModal();
-        }
-      });
+      if (e.target && (e.target as Element).id === 'admin-modal') {
+        closeModal();
+        return;
+      }
+    });
 
-      // Close modal with Escape key
-      document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') {
+        const modal = document.getElementById('admin-modal');
+        if (modal && !modal.classList.contains('hidden')) {
           closeModal();
         }
-      });
-
-      function closeModal() {
-        modal?.classList.add('hidden');
-        modal?.setAttribute('aria-hidden', 'true');
-
-        // Restore body scroll
-        document.body.style.overflow = '';
-
-        // Return focus to heart button for accessibility
-        heartBtn?.focus();
       }
+    });
 
-      // Handle iframe load events for better UX
-      //iframe.addEventListener('load', function () {
-      //  console.log('Admin panel loaded successfully');
-      //});
+    function closeModal() {
+      const modal = document.getElementById('admin-modal');
+      const heartBtn = document.getElementById('admin-heart-btn');
 
-      iframe.addEventListener('error', function () {
-        console.error('Failed to load admin panel');
-      });
+      modal?.classList.add('hidden');
+      modal?.setAttribute('aria-hidden', 'true');
+      document.body.style.overflow = '';
+      heartBtn?.focus();
     }
-  });
+
+    // iframe error handling
+    document.addEventListener('DOMContentLoaded', function () {
+      const iframe = document.getElementById('admin-sysop-iframe');
+      if (iframe) {
+        iframe.addEventListener('error', function () {
+          console.error('Failed to load admin panel');
+        });
+      }
+    });
+  }
 </script>