astro-tractstack 2.0.0-rc.0

package/templates/src/pages/api/orphan-analysis.ts

@@ -0,0 +1,106 @@
+import type { APIRoute } from '@/types/astro';
+
+export const prerender = false;
+
+export const GET: APIRoute = async ({ request }) => {
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    // Forward authentication cookies to the backend
+    const cookieHeader = request.headers.get('cookie') || '';
+
+    // Create abort controller for request timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 30000); // 30s timeout for analysis
+
+    try {
+      const goResponse = await fetch(
+        `${goBackend}/api/v1/admin/orphan-analysis`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Cookie: cookieHeader,
+            'X-Tenant-ID': request.headers.get('X-Tenant-ID') || 'default',
+            Origin: request.headers.get('Origin') || 'http://localhost:4321',
+          },
+          signal: controller.signal,
+        }
+      );
+
+      clearTimeout(timeoutId);
+
+      if (!goResponse.ok) {
+        console.error(
+          'Orphan Analysis API: Go backend error:',
+          goResponse.status
+        );
+
+        // Handle authentication errors
+        if (goResponse.status === 401 || goResponse.status === 403) {
+          return new Response(
+            JSON.stringify({
+              error: 'Authentication required',
+              status: 'error',
+            }),
+            {
+              status: goResponse.status,
+              headers: { 'Content-Type': 'application/json' },
+            }
+          );
+        }
+
+        return new Response(
+          JSON.stringify({
+            error: 'Backend error',
+            status: 'error',
+          }),
+          {
+            status: goResponse.status,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+      }
+
+      const responseData = await goResponse.json();
+
+      return new Response(JSON.stringify(responseData), {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'public, max-age=300', // Cache for 5 minutes
+        },
+      });
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error('Orphan analysis request timeout');
+        return new Response(
+          JSON.stringify({
+            error: 'Analysis timeout - this may indicate a large dataset',
+            status: 'error',
+          }),
+          {
+            status: 408,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error) {
+    console.error('Orphan Analysis API Proxy: Error:', error);
+    return new Response(
+      JSON.stringify({
+        error: 'Proxy error',
+        status: 'error',
+      }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};

package/templates/src/pages/api/tailwind.ts

@@ -0,0 +1,116 @@
+import type { APIRoute } from '@/types/astro';
+import { createTailwindcss } from '@mhsdesign/jit-browser-tailwindcss';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const { dirtyPaneIds, dirtyClasses } = await request.json();
+
+    const tenantId =
+      request.headers.get('X-Tenant-ID') ||
+      import.meta.env.PUBLIC_TENANTID ||
+      'default';
+    const isMultiTenant =
+      import.meta.env.PUBLIC_ENABLE_MULTI_TENANT === 'true' &&
+      tenantId !== 'default';
+
+    if (isMultiTenant) {
+      return new Response('CSS generation disabled in multi-tenant mode', {
+        status: 403,
+      });
+    }
+
+    // Read tailwind config from project root
+    const configPath = path.join(process.cwd(), 'tailwind.config.cjs');
+    const configContent = await fs.readFile(configPath, 'utf-8');
+    const tailwindConfig = new Function(
+      'module',
+      'exports',
+      configContent + '; return module.exports;'
+    )({ exports: {} }, {});
+
+    const goBackend =
+      import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+    // Authenticate with Go backend
+    const authResponse = await fetch(`${goBackend}/api/v1/auth/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+      },
+      body: JSON.stringify({
+        password: import.meta.env.ADMIN_PASSWORD || 'letmein',
+      }),
+    });
+
+    if (!authResponse.ok) {
+      throw new Error('Failed to authenticate with Go backend');
+    }
+
+    const { token } = await authResponse.json();
+
+    // Get classes from Go backend (includes whitelist + clean panes)
+    const classesResponse = await fetch(
+      `${goBackend}/api/v1/tailwind/classes`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+          'X-Tenant-ID': tenantId,
+        },
+        body: JSON.stringify({ excludePaneIds: dirtyPaneIds || [] }),
+      }
+    );
+
+    if (!classesResponse.ok) {
+      throw new Error(
+        `Failed to get classes from Go backend: ${classesResponse.status}`
+      );
+    }
+
+    const { classes: cleanClasses } = await classesResponse.json();
+
+    // Combine clean classes from backend with dirty classes from frontend
+    const allClasses = [
+      ...new Set([...(cleanClasses || []), ...(dirtyClasses || [])]),
+    ];
+
+    // Generate CSS using JIT
+    const tailwindCss = createTailwindcss({ tailwindConfig });
+    const htmlContent = [`<span class="${allClasses.join(' ')}"></span>`];
+    const generatedCss = await tailwindCss.generateStylesFromContent(
+      `@tailwind base; @tailwind utilities;`,
+      htmlContent
+    );
+
+    // Return result (SaveModal will handle the update call logging)
+    return new Response(
+      JSON.stringify({
+        success: true,
+        classes: allClasses.length,
+        frontend: generatedCss.length,
+        stylesVer: Date.now(), // Simple version for demo
+        generatedCss, // Include actual CSS for potential update call
+      }),
+      {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  } catch (error) {
+    console.error('Tailwind Error:', error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+      }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};

package/templates/src/pages/collections/[param1].astro

@@ -0,0 +1,65 @@
+---
+import CustomRoutes, { routes } from '@/custom/CustomRoutes.astro';
+import { preHealthCheck } from '@/utils/backend';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
+}
+
+const { param1 } = Astro.params;
+const route = `collections`;
+
+// Check if route is enabled
+if (!param1 || !routes[route]) {
+  return new Response(null, {
+    status: 404,
+    statusText: 'Not Found',
+  });
+}
+
+const CATEGORIES = [`collections`];
+
+let resources = [];
+const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+try {
+  const resourcesResponse = await fetch(`${goBackend}/api/v1/nodes/resources`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ categories: CATEGORIES }),
+  });
+
+  if (resourcesResponse.ok) {
+    const { resources: fetchedResources } = await resourcesResponse.json();
+    resources = fetchedResources || [];
+  }
+} catch (error) {
+  console.error('Error fetching resources:', error);
+  return new Response(null, {
+    status: 500,
+    statusText: 'Internal Server Error',
+  });
+}
+
+// Check if the specific resource exists
+const targetSlug = `${route}-${param1}`;
+console.log(`check category vs categorySlug`, resources);
+const resourceExists = resources.some(
+  (resource: ResourceNode) =>
+    resource.category === route && resource.slug === targetSlug
+);
+
+if (!resourceExists) {
+  return new Response(null, {
+    status: 404,
+    statusText: 'Not Found',
+  });
+}
+---
+
+<CustomRoutes route={route} slug={param1} resources={resources} />

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

@@ -0,0 +1,207 @@
+---
+import { ulid } from 'ulid';
+import Layout from '@/layouts/Layout.astro';
+import Header from '@/components/Header.astro';
+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 StoryKeepHeader from '@/components/edit/Header';
+import StoryKeepToolBar from '@/components/edit/ToolBar';
+import StoryKeepToolMode from '@/components/edit/ToolMode';
+import SettingsPanel from '@/components/edit/SettingsPanel';
+import { Compositor } from '@/components/compositor/Compositor';
+import { requireAdminOrEditor } from '@/utils/auth';
+import { preHealthCheck } from '@/utils/backend';
+
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
+}
+
+const { contextSlug } = Astro.params;
+if (!contextSlug) return Astro.redirect('/404');
+
+// Authentication check - redirect to login if not authenticated
+const authCheck = requireAdminOrEditor(Astro);
+if (authCheck) {
+  return authCheck;
+}
+
+const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+const brandConfig = await getBrandConfig(tenantId);
+if (!brandConfig.SITE_INIT) {
+  return Astro.redirect('/storykeep');
+}
+
+let loadData;
+let contextPane;
+let title;
+let contextPaneID;
+
+// Handle create mode
+if (contextSlug === 'create') {
+  // Create empty context pane in memory
+  const emptyContextPane = {
+    id: ulid(),
+    nodeType: 'Pane' as const,
+    parentId: null,
+    title: '',
+    slug: '',
+    isContextPane: true,
+    created: new Date(),
+    changed: new Date(),
+    isDecorative: false,
+  };
+
+  loadData = {
+    paneNodes: [emptyContextPane],
+  };
+
+  contextPane = emptyContextPane;
+  title = 'Create New Context Page - TractStack Editor';
+  contextPaneID = emptyContextPane.id;
+} else {
+  // Existing backend fetch logic - use full-payload endpoint
+  const endpoint = `${goBackend}/api/v1/nodes/panes/slug/${contextSlug}/full-payload`;
+
+  try {
+    const response = await fetch(endpoint, {
+      headers: {
+        'X-Tenant-ID': tenantId,
+        Cookie: Astro.request.headers.get('cookie') || '',
+      },
+    });
+
+    const failedResponse = await handleFailedResponse(
+      response,
+      goBackend,
+      tenantId,
+      Astro.url.pathname
+    );
+    if (failedResponse) {
+      return failedResponse;
+    }
+
+    loadData = await response.json();
+  } catch (error) {
+    console.error('Error fetching context pane full payload:', error);
+    return Astro.redirect(
+      `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
+    );
+  }
+
+  // Extract data from the response (same pattern as storyfragment)
+  contextPane = loadData?.paneNodes?.at(0);
+  title = contextPane?.title || `Context Editor`;
+  contextPaneID = contextPane?.id;
+}
+
+const canonicalURL = `/context/${contextSlug}`;
+
+// Extract dates if available
+const pubDatetime = contextPane?.created
+  ? new Date(contextPane.created)
+  : undefined;
+const modDatetime = contextPane?.changed ? new Date(contextPane.changed) : null;
+
+// Social image from the context pane
+const ogImage = contextPane?.socialImagePath
+  ? joinUrlPaths(brandConfig?.SITE_URL || ``, contextPane.socialImagePath)
+  : undefined;
+
+const fullContentMap = await getFullContentMap(tenantId);
+const urlParams: Record<string, string | boolean> = {};
+for (const [key, value] of Astro.url.searchParams) {
+  urlParams[key] = value === '' ? true : value;
+}
+---
+
+<Layout
+  title={title}
+  slug={contextSlug}
+  canonicalURL={canonicalURL}
+  pubDatetime={pubDatetime}
+  modDatetime={modDatetime}
+  ogImage={ogImage}
+  brandConfig={brandConfig}
+  storyfragmentId={contextPaneID}
+  isEditor={true}
+>
+  <!-- Standard Header (scrollable) -->
+  <Header
+    title={title}
+    slug={contextSlug}
+    brandConfig={brandConfig}
+    isContext={true}
+    isStoryKeep={true}
+    isEditable={false}
+    menu={null}
+  />
+
+  <!-- StoryKeep Editor Header (scroll-aware positioning) -->
+  <section
+    id="storykeepHeader"
+    role="banner"
+    class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
+  >
+    <StoryKeepHeader slug={contextSlug} isContext={true} client:only="react" />
+  </section>
+
+  <div class="flex min-h-screen">
+    <!-- Tool Navigation (mobile bottom, desktop side) -->
+    <StoryKeepToolMode isContext={true} client:only="react" />
+
+    <!-- Main Content Area -->
+    <main id="mainContent" class="relative flex-1">
+      <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
+        <div
+          class="h-fit min-h-screen"
+          style={{
+            backgroundImage:
+              'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
+          }}
+        >
+          <Compositor
+            id={contextPaneID}
+            nodes={loadData}
+            config={brandConfig}
+            fullContentMap={fullContentMap}
+            fullCanonicalURL={canonicalURL}
+            urlParams={urlParams}
+            availableCodeHooks={Object.keys(codeHookComponents)}
+            client:only="react"
+          />
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Floating Controls (Settings Panel & HUD OR ToolBar) -->
+  <aside
+    id="settingsControls"
+    class="z-101 pointer-events-none fixed bottom-24 right-0 flex max-h-screen flex-col items-end gap-2 overflow-y-auto p-4 md:bottom-0"
+  >
+    <div class="pointer-events-auto">
+      <StoryKeepToolBar client:only="react" />
+    </div>
+    <div class="pointer-events-auto">
+      <SettingsPanel
+        config={brandConfig}
+        availableCodeHooks={['featured-content', 'list-content', 'bunny-video']}
+        client:only="react"
+      />
+    </div>
+  </aside>
+</Layout>
+
+<script>
+  import { setupLayoutObservers, setupLayoutStyles } from '@/utils/layout';
+  setupLayoutStyles();
+  setupLayoutObservers();
+</script>

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

@@ -0,0 +1,161 @@
+---
+import Layout from '@/layouts/Layout.astro';
+import CodeHook from '@/custom/CodeHook.astro';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+import { handleFailedResponse } from '@/utils/backend';
+import { getFullContentMap } from '@/stores/analytics';
+import { preHealthCheck } from '@/utils/backend';
+
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
+}
+
+const { contextSlug } = Astro.params || {};
+
+const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+// Get context pane data by slug
+let contextPaneData;
+try {
+  const response = await fetch(
+    `${goBackend}/api/v1/nodes/panes/slug/${contextSlug}`,
+    {
+      headers: {
+        'X-Tenant-ID': tenantId,
+      },
+    }
+  );
+
+  const failedResponse = await handleFailedResponse(
+    response,
+    goBackend,
+    tenantId,
+    Astro.url.pathname
+  );
+  if (failedResponse) {
+    return failedResponse;
+  }
+
+  contextPaneData = await response.json();
+
+  // Verify this is actually a context pane
+  if (!contextPaneData.isContextPane) {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Not Found - Not a context pane',
+    });
+  }
+} catch (error) {
+  console.error('Error fetching context pane:', error);
+  return Astro.redirect(
+    `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
+  );
+}
+
+const paneId = contextPaneData.id;
+const paneTitle = contextPaneData.title || 'Context';
+const codeHookTarget = contextPaneData.codeHookTarget || null;
+
+// Get rendered fragment for the context pane
+let fragmentData = '';
+try {
+  const fragmentResponse = await fetch(
+    `${goBackend}/api/v1/fragments/panes/${paneId}/static`,
+    {
+      headers: {
+        'X-Tenant-ID': tenantId,
+      },
+    }
+  );
+
+  if (fragmentResponse.ok) {
+    fragmentData = await fragmentResponse.text();
+  } else {
+    const failedFragmentResponse = await handleFailedResponse(
+      fragmentResponse,
+      goBackend,
+      tenantId,
+      Astro.url.pathname
+    );
+    if (failedFragmentResponse) {
+      return failedFragmentResponse;
+    }
+  }
+} catch (error) {
+  console.error('Error fetching context fragment:', error);
+  return Astro.redirect(
+    `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
+  );
+}
+
+// Get supporting data
+const fullContentMap = await getFullContentMap(tenantId);
+const brandConfig = await getBrandConfig(tenantId);
+
+if (!brandConfig.SITE_INIT) {
+  return Astro.redirect('/storykeep');
+}
+---
+
+<Layout
+  title={paneTitle}
+  slug={contextSlug}
+  menu={null}
+  created={contextPaneData.created}
+  isContext={true}
+  isStoryKeep={false}
+  isEditable={true}
+  brandConfig={brandConfig}
+  storyfragmentId={paneId}
+>
+  <main id="main-content" class="min-h-screen 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"
+    >
+      {
+        codeHookTarget ? (
+          <CodeHook target={codeHookTarget} fullContentMap={fullContentMap} />
+        ) : (
+          <Fragment set:html={fragmentData} />
+        )
+      }
+    </div>
+
+    <div class="py-12 text-center text-2xl md:text-3xl">
+      <button
+        id="context-close-btn"
+        class="rounded-lg bg-black px-3.5 py-2.5 text-white transition-all duration-200 hover:rotate-1 hover:bg-orange-500"
+      >
+        Close
+      </button>
+    </div>
+  </main>
+</Layout>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const closeBtn = document.getElementById('context-close-btn');
+
+    if (closeBtn) {
+      closeBtn.addEventListener('click', function () {
+        // Check if we have history to go back to
+        if (window.history.length > 1 && document.referrer) {
+          // Go back to previous page
+          window.history.back();
+        } else {
+          // Fallback to home page
+          window.location.href = '/';
+        }
+      });
+    }
+  });
+</script>