astro-tractstack 2.1.2 → 2.2.0

package/templates/src/lib/session.ts

@@ -1,13 +1,22 @@
+const VERBOSE = false;
+
 /**
  * Calls the backend's /api/v1/auth/visit endpoint to create a new session.
  * This function is decoupled from Astro-specific objects.
  * @param tenantId The tenant ID to use for the backend request.
- * @returns A promise that resolves to the new session ID from the backend.
+ * @returns A promise that resolves to the new session object from the backend.
  */
-export async function createBackendSession(tenantId: string): Promise<string> {
+export async function createBackendSession(
+  tenantId: string
+): Promise<{ sessionId: string; fingerprintId?: string }> {
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
+  if (VERBOSE)
+    console.log(
+      `[session.ts] createBackendSession called for tenant: ${tenantId}`
+    );
+
   try {
     const response = await fetch(`${goBackend}/api/v1/auth/visit`, {
       method: 'POST',
@@ -28,18 +37,20 @@ export async function createBackendSession(tenantId: string): Promise<string> {
     }
 
     const result = await response.json();
+    if (VERBOSE)
+      console.log(`[session.ts] createBackendSession success:`, result);
+
     if (!result.sessionId) {
       console.error('Backend did not return a sessionId on warming', result);
       throw new Error('Backend did not return a sessionId');
     }
-    return result.sessionId;
+    return {
+      sessionId: result.sessionId,
+      fingerprintId: result.fingerprint,
+    };
   } catch (error) {
-    console.warn(
-      'Backend session creation failed, using client-side SSR fallback for session ID'
-    );
-    return `ssr-fallback-${Date.now()}-${Math.random()
-      .toString(36)
-      .substring(2, 11)}`;
+    console.error('Failed to initialize backend session:', error);
+    throw error;
   }
 }
 
@@ -58,10 +69,26 @@ export async function getOrSetSessionId(
 ): Promise<string> {
   // Check if we already have a session ID in the cookie
   let sessionId = astro.cookies.get('tractstack_session_id')?.value;
+  const fingerprintId = astro.cookies.get('tractstack_fingerprint')?.value;
+
+  if (VERBOSE)
+    console.log(`[session.ts] getOrSetSessionId - Cookies Found:`, {
+      sessionId,
+      fingerprintId,
+    });
 
   if (sessionId) {
     // Validate session exists in backend before using it
-    const isValid = await validateSessionWithBackend(sessionId, tenantId);
+    // We pass fingerprintId to allow the backend to restore the session from DB if RAM is empty
+    const isValid = await validateSessionWithBackend(
+      sessionId,
+      tenantId,
+      fingerprintId
+    );
+
+    if (VERBOSE)
+      console.log(`[session.ts] Session Validation Result:`, isValid);
+
     if (!isValid) {
       console.warn(`Session ${sessionId} invalid, creating new session`);
       sessionId = ''; // Force new session creation
@@ -69,8 +96,12 @@ export async function getOrSetSessionId(
   }
 
   if (!sessionId) {
+    if (VERBOSE)
+      console.log(`[session.ts] No valid session found. Creating new one...`);
+
     // Call backend to generate collision-free session ID AND warm session
-    sessionId = await createBackendSession(tenantId);
+    const sessionData = await createBackendSession(tenantId);
+    sessionId = sessionData.sessionId;
 
     // Set cookie with backend-provided session ID
     astro.cookies.set('tractstack_session_id', sessionId, {
@@ -81,9 +112,20 @@ export async function getOrSetSessionId(
       maxAge: 60 * 60 * 24, // 24 hours
     });
 
-    //  console.log(`Created new session: ${sessionId}`);
-    //} else {
-    //  console.log(`Using existing session: ${sessionId}`);
+    if (sessionData.fingerprintId) {
+      astro.cookies.set('tractstack_fingerprint', sessionData.fingerprintId, {
+        httpOnly: false,
+        secure: import.meta.env.PROD,
+        sameSite: 'lax',
+        path: '/',
+        maxAge: 60 * 60 * 24 * 365, // 1 year persistence
+      });
+    }
+    if (VERBOSE)
+      console.log(`[session.ts] New Cookies Set:`, {
+        sessionId,
+        fingerprintId: sessionData.fingerprintId,
+      });
   }
 
   return sessionId;
@@ -95,13 +137,19 @@ export async function getOrSetSessionId(
  */
 async function validateSessionWithBackend(
   sessionId: string,
-  tenantId: string
+  tenantId: string,
+  fingerprintId?: string
 ): Promise<boolean> {
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
+  if (VERBOSE)
+    console.log(`[session.ts] Validating session with backend...`, {
+      sessionId,
+      fingerprintId,
+    });
+
   try {
-    // Use a lightweight endpoint to check if session exists
     const response = await fetch(`${goBackend}/api/v1/auth/visit`, {
       method: 'POST',
       headers: {
@@ -110,10 +158,16 @@ async function validateSessionWithBackend(
       },
       body: JSON.stringify({
         sessionId: sessionId,
+        fingerprintId: fingerprintId, // Explicitly pass for restoration (fixes SSR Cookie Gap)
       }),
     });
 
     if (!response.ok) {
+      if (VERBOSE)
+        console.log(
+          `[session.ts] Validation returned non-200 status:`,
+          response.status
+        );
       return false;
     }
 
@@ -121,6 +175,7 @@ async function validateSessionWithBackend(
     return result.success === true;
   } catch (error) {
     console.warn('Session validation failed:', error);
+    if (VERBOSE) console.log(`[session.ts] Validation network error:`, error);
     return false;
   }
 }

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

@@ -2,7 +2,6 @@
 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 { getOrSetSessionId } from '@/lib/session';
 import { getStoryData } from '@/lib/storyData';
@@ -23,11 +22,10 @@ if (slug && (slug.startsWith('images/') || slug.startsWith('media/'))) {
 }
 
 const lookup = slug || '';
-const sessionId = await getOrSetSessionId(Astro, tenantId);
-const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
-let storyData;
+let storyData, sessionId;
 try {
+  sessionId = await getOrSetSessionId(Astro, tenantId);
   storyData = await getStoryData(Astro, lookup, sessionId, tenantId);
 } catch (error) {
   if (error instanceof Response && error.status === 404) {
@@ -52,47 +50,7 @@ if (paneIds.length === 0) {
   return Astro.redirect('/storykeep');
 }
 
-let fragmentsData: Record<string, string> = {};
-try {
-  const batchResponse = await fetch(`${goBackend}/api/v1/fragments/panes`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'X-Tenant-ID': tenantId,
-      'X-StoryFragment-ID': storyfragmentId,
-      'X-TractStack-Session-ID': sessionId,
-    },
-    body: JSON.stringify({ paneIds }),
-  });
-
-  if (batchResponse.ok) {
-    const batchData = await batchResponse.json();
-    fragmentsData = batchData.fragments || {};
-    if (batchData.errors) {
-      Object.entries(batchData.errors).forEach(([paneId, error]) => {
-        fragmentsData[paneId] =
-          `<div class="error">Failed to load pane ${paneId}: ${error}</div>`;
-      });
-    }
-  } else {
-    const failedFragmentsResponse = await handleFailedResponse(
-      batchResponse,
-      goBackend,
-      tenantId,
-      Astro.url.pathname
-    );
-    if (failedFragmentsResponse) {
-      return failedFragmentsResponse;
-    }
-  }
-} catch (error) {
-  console.error('Error fetching fragments:', error);
-  return Astro.redirect(
-    `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
-  );
-}
-
-if (!fragmentsData) {
+if (!storyData.fragments) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
   );
@@ -158,6 +116,7 @@ paneIds.forEach((paneId: string) => {
                 <div class="relative overflow-hidden">
                   <CodeHook
                     target={codeHookTargets[paneId]}
+                    paneId={paneId}
                     options={(() => {
                       const optionsStr =
                         codeHookTargets[paneId + '-' + codeHookTargets[paneId]];
@@ -202,7 +161,7 @@ paneIds.forEach((paneId: string) => {
                   </div>
                 </div>
               ) : (
-                <Fragment set:html={fragmentsData[paneId] || ''} />
+                <Fragment set:html={storyData.fragments[paneId] || ''} />
               )}
             </div>
           </div>

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

@@ -0,0 +1,149 @@
+import type { APIRoute } from '@/types/astro';
+import { createTailwindcss } from '@mhsdesign/jit-browser-tailwindcss';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import postcss, { type Rule, type AtRule } from 'postcss';
+import selectorParser, {
+  type Root,
+  type ClassName,
+} from 'postcss-selector-parser';
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const { html, css: userCss } = await request.json();
+
+    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 tailwindCss = createTailwindcss({
+      tailwindConfig: {
+        ...tailwindConfig,
+        content: [{ raw: html, extension: 'html' }],
+        corePlugins: { preflight: false },
+      },
+    });
+
+    const generatedCss = await tailwindCss.generateStylesFromContent(
+      `@tailwind utilities;`,
+      [html]
+    );
+
+    const combinedCss = `${generatedCss}\n${userCss || ''}`;
+
+    const classMap: Record<string, string> = {};
+    const ruleMap: Record<string, string> = {};
+    const cssBuffer: { hash: string; body: string }[] = [];
+    const mediaBuckets: { minWidth: number; hash: string; body: string }[] = [];
+
+    const hashString = (str: string) => {
+      let hash = 5381,
+        i = str.length;
+      while (i) hash = (hash * 33) ^ str.charCodeAt(--i);
+      return (hash >>> 0).toString(16);
+    };
+
+    const hashPlugin = () => {
+      return {
+        postcssPlugin: 'hash-styles',
+        Root(root: any) {
+          root.walkRules((rule: Rule) => {
+            const ruleHash = `t8k-${hashString(rule.toString())}`;
+
+            const transformSelector = selectorParser((selectors: Root) => {
+              selectors.walkClasses((classNode: ClassName) => {
+                const rawClass = classNode.value;
+
+                if (!classMap[rawClass]) {
+                  classMap[rawClass] = ruleHash;
+                } else if (!classMap[rawClass].includes(ruleHash)) {
+                  classMap[rawClass] += ' ' + ruleHash;
+                }
+
+                classNode.value = ruleHash;
+              });
+            });
+
+            try {
+              rule.selector = transformSelector.processSync(rule.selector);
+            } catch (e) {
+              // Skip invalid selectors from user input
+              return;
+            }
+
+            ruleMap[ruleHash] = rule.toString();
+
+            let bucketWidth: number | undefined;
+            if (
+              rule.parent &&
+              rule.parent.type === 'atrule' &&
+              (rule.parent as AtRule).name === 'media'
+            ) {
+              const params = (rule.parent as AtRule).params;
+              const match = params.match(/min-width:\s*(\d+)px/);
+              if (match) bucketWidth = parseInt(match[1], 10);
+            }
+
+            const ruleEntry = {
+              hash: ruleHash,
+              body: rule.toString(),
+            };
+
+            if (bucketWidth !== undefined) {
+              mediaBuckets.push({ minWidth: bucketWidth, ...ruleEntry });
+            } else {
+              cssBuffer.push(ruleEntry);
+            }
+          });
+        },
+      };
+    };
+    hashPlugin.postcss = true;
+
+    const result = await postcss([hashPlugin()]).process(combinedCss, {
+      from: undefined,
+    });
+
+    const generateSnapshot = (targetBreakPoint: number) => {
+      const applicableMedia = mediaBuckets
+        .filter((b) => b.minWidth <= targetBreakPoint)
+        .sort((a, b) => a.minWidth - b.minWidth);
+
+      return [...cssBuffer, ...applicableMedia]
+        .map((r) => r.body)
+        .join('\n')
+        .replace(/(\d*\.?\d+)(vw|vh)/gi, (_, n) => `${n}%`);
+    };
+
+    const viewportCss = {
+      xs: generateSnapshot(0),
+      md: generateSnapshot(801),
+      xl: generateSnapshot(1367),
+    };
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        css: result.css,
+        viewportCss,
+        classMap,
+        ruleMap,
+      }),
+      { status: 200, headers: { 'Content-Type': 'application/json' } }
+    );
+  } catch (error) {
+    console.error('CSS Compilation 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/context/[...contextSlug].astro

@@ -126,6 +126,7 @@ if (!brandConfig.SITE_INIT) {
         codeHookTarget ? (
           <CodeHook
             target={codeHookTarget}
+            paneId={paneId}
             resourcesPayload={resourcesPayload}
             fullContentMap={fullContentMap}
           />

package/templates/src/pages/maint.astro

@@ -27,7 +27,7 @@ const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
     <link rel="stylesheet" href="/styles/storykeep.css" />
   </head>
   <body class="h-full">
-    <div class="sm:px-6 lg:px-8 flex min-h-full flex-col justify-center py-12">
+    <div class="flex min-h-full flex-col justify-center py-12 md:px-6 xl:px-8">
       <div class="mx-auto pb-6">
         <div class="flex flex-col items-center justify-center gap-4">
           <div class="h-16 w-auto">

package/templates/src/pages/storykeep/login.astro

@@ -48,7 +48,7 @@ const mainStylesUrl = isDev
     <link rel="stylesheet" href={mainStylesUrl} />
   </head>
   <body class="h-full">
-    <div class="sm:px-6 lg:px-8 flex min-h-full flex-col justify-center py-12">
+    <div class="flex min-h-full flex-col justify-center py-12 md:px-6 xl:px-8">
       <div class="mx-auto pb-6">
         <!-- Logo and Wordmark -->
         <div class="flex flex-col items-center justify-center gap-4">
@@ -123,7 +123,7 @@ const mainStylesUrl = isDev
                   name="password"
                   type="password"
                   required
-                  class="sm:text-sm sm:leading-6 block w-full rounded-md border-0 px-3 py-1.5 text-mydarkgrey shadow-sm ring-1 ring-inset ring-mylightgrey placeholder:text-mylightgrey focus:ring-2 focus:ring-inset focus:ring-myorange"
+                  class="block w-full rounded-md border-0 px-3 py-1.5 text-mydarkgrey shadow-sm ring-1 ring-inset ring-mylightgrey placeholder:text-mylightgrey focus:ring-2 focus:ring-inset focus:ring-myorange md:text-sm md:leading-6"
                 />
               </div>
             </div>