npm - astro-tractstack - Versions diffs - 2.0.0-rc.0 - Mend

astro-tractstack 2.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/templates/src/layouts/Layout.astro ADDED Viewed

@@ -0,0 +1,290 @@
+---
+import { ClientRouter } from 'astro:transitions';
+import Header from '@/components/Header.astro';
+import Footer from '@/components/Footer.astro';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+import { freshInstallStore } from '@/stores/backend';
+import type { MenuNode } from '@/types/tractstack';
+import type { ImpressionNode } from '@/types/compositorTypes';
+export interface Props {
+  title: string;
+  slug?: string;
+  menu?: MenuNode | null;
+  created?: string;
+  canonicalURL?: string;
+  pubDatetime?: Date;
+  modDatetime?: Date | null;
+  ogImage?: string;
+  isContext?: boolean;
+  isStoryKeep?: boolean;
+  isEditor?: boolean;
+  isEditable?: boolean;
+  brandConfig?: any;
+  storyfragmentId?: string;
+  sessionId?: string;
+  impressions?: ImpressionNode[];
+}
+const {
+  title,
+  description = '',
+  slug = '',
+  menu = null,
+  created,
+  canonicalURL = Astro.url.pathname,
+  pubDatetime,
+  modDatetime,
+  ogImage,
+  isContext = false,
+  isStoryKeep = false,
+  isEditor = false,
+  isEditable = false,
+  brandConfig: propBrandConfig,
+  storyfragmentId = '',
+  sessionId = '',
+  impressions = [],
+} = Astro.props;
+const isDev = import.meta.env.DEV;
+// Get site status from the store
+const isInitialized = !freshInstallStore.get().needsSetup;
+// Conditionally set asset paths based on initialization status
+const cssBasePath = isInitialized ? '/media/css' : '/styles';
+const fontBasePath = isInitialized ? '/media/fonts' : '/fonts';
+const mainStylesUrl =
+  isStoryKeep || isDev
+    ? `${cssBasePath}/storykeep.css`
+    : `${cssBasePath}/frontend.css`;
+const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+// Social media and SEO setup
+const brandConfig = propBrandConfig || (await getBrandConfig(tenantId));
+const defaultFavIcon = brandConfig.FAVICON || `/favicon.ico`;
+const defaultSocialImageURL = ogImage || brandConfig.OG || `/og.png`;
+const defaultSocialLogoURL = brandConfig.OGLOGO || `/oglogo.png`;
+const defaultSocialTitle =
+  typeof title === `string` && title
+    ? title
+    : typeof brandConfig.OGTITLE === `string`
+      ? brandConfig.OGTITLE
+      : `TractStack dynamic website`;
+const defaultSocialAuthor = brandConfig.OGAUTHOR || `TractStack`;
+const defaultSocialDesc =
+  description ||
+  brandConfig.OGDESC ||
+  `No-code website builder and content marketing platform`;
+const buildVersion = (() => {
+  if (modDatetime) return modDatetime.getTime();
+  if (pubDatetime) return pubDatetime.getTime();
+  return Date.now();
+})();
+const socialImageWithVersion = `${defaultSocialImageURL}?v=${buildVersion}`;
+const socialLogoWithVersion = `${defaultSocialLogoURL}?v=${buildVersion}`;
+const gtagId = brandConfig?.GTAG || false;
+const gtagUrl =
+  typeof gtagId === `string` && gtagId.length > 1
+    ? `https://www.googletagmanager.com/gtag/js?id=${gtagId}`
+    : null;
+const fullCanonicalUrl = brandConfig?.SITE_URL
+  ? canonicalURL.startsWith('/')
+    ? `${brandConfig.SITE_URL.replace(/\/$/, '')}${canonicalURL}`
+    : `${brandConfig.SITE_URL.replace(/\/$/, '')}/${canonicalURL}`
+  : canonicalURL;
+---
+<!doctype html>
+<html lang="en" class="motion-safe:scroll-smooth">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <meta name="description" content={defaultSocialDesc} />
+    <meta name="author" content={defaultSocialAuthor} />
+    <meta name="generator" content={Astro.generator} />
+    <link rel="icon" type="image/svg+xml" href={defaultFavIcon} />
+    <link rel="canonical" href={fullCanonicalUrl} />
+    <title>{defaultSocialTitle}</title>
+    <link rel="stylesheet" href={`${cssBasePath}/custom.css`} />
+    <link rel="stylesheet" href={mainStylesUrl} />
+    <link rel="sitemap" href="/sitemap.xml" />
+    <meta name="storyfragment-id" content={storyfragmentId} />
+    <meta name="session-id" content={sessionId} />
+    <meta name="title" content={defaultSocialTitle} />
+    <meta
+      property="og:site_name"
+      content={brandConfig?.OGAUTHOR || brandConfig?.OGTITLE || 'TractStack'}
+    />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta
+      property="og:image:alt"
+      content={`${defaultSocialTitle} - Social Preview Image`}
+    />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:title" content={defaultSocialTitle} />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content={defaultSocialDesc} />
+    <meta property="og:url" content={fullCanonicalUrl} />
+    <meta property="og:image" content={socialImageWithVersion} />
+    <meta property="og:logo" content={socialLogoWithVersion} />
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content={fullCanonicalUrl} />
+    <meta property="twitter:title" content={defaultSocialTitle} />
+    <meta property="twitter:description" content={defaultSocialDesc} />
+    <meta property="twitter:image" content={socialImageWithVersion} />
+    {
+      pubDatetime && (
+        <meta
+          property="article:published_time"
+          content={pubDatetime.toISOString()}
+        />
+      )
+    }
+    {
+      modDatetime && (
+        <meta
+          property="article:modified_time"
+          content={modDatetime.toISOString()}
+        />
+      )
+    }
+    {gtagUrl && <script async src={gtagUrl} is:inline />}
+    <script is:inline define:vars={{ gtagId: brandConfig?.GTAG || '' }}>
+      (function () {
+        if (gtagId && gtagId.length > 1) {
+          window.dataLayer = window.dataLayer || [];
+          window.gtag =
+            window.gtag ||
+            function () {
+              window.dataLayer.push(arguments);
+            };
+          window.gtag('js', new Date());
+          window.gtag('config', gtagId);
+          document.addEventListener('astro:after-swap', () => {
+            window.gtag('config', gtagId);
+          });
+        }
+      })();
+    </script>
+    <ClientRouter />
+    <script
+      is:inline
+      type="text/javascript"
+      src="//assets.mediadelivery.net/playerjs/player-0.1.0.min.js"></script>
+    <script
+      src="https://unpkg.com/htmx.org@2.0.4"
+      crossorigin="anonymous"
+      is:inline
+      is:persist></script>
+    <script
+      define:vars={{
+        goBackend,
+        tenantId,
+        fontBasePath,
+        storyfragmentId,
+        sessionId,
+      }}
+      is:inline
+    >
+      function createTractstackConfig() {
+        window.TRACTSTACK_CONFIG = {
+          configured: true,
+          backendUrl: goBackend,
+          tenantId: tenantId,
+          fontBasePath: fontBasePath,
+          storyfragmentId: storyfragmentId,
+          sessionId: sessionId,
+        };
+      }
+      function updateTractstackConfig() {
+        // Get current values from meta tags
+        const storyfragmentMeta = document.querySelector(
+          'meta[name="storyfragment-id"]'
+        );
+        const sessionMeta = document.querySelector('meta[name="session-id"]');
+        const currentStoryfragmentId = storyfragmentMeta
+          ? storyfragmentMeta.content
+          : null;
+        const currentSessionId = sessionMeta ? sessionMeta.content : sessionId;
+        if (window.TRACTSTACK_CONFIG && currentStoryfragmentId) {
+          window.TRACTSTACK_CONFIG.storyfragmentId = currentStoryfragmentId;
+          window.TRACTSTACK_CONFIG.sessionId = currentSessionId;
+        } else {
+          createTractstackConfig();
+        }
+      }
+      // Check if config exists.
+      // If not, create it. This handles the very first load.
+      if (!window.TRACTSTACK_CONFIG) {
+        createTractstackConfig();
+      }
+      // Update on subsequent loads, or set for the first time if script runs after initial setup
+      document.addEventListener('astro:page-load', updateTractstackConfig);
+    </script>
+  </head>
+  <body class="font-main w-full">
+    {
+      !isEditor && (
+        <Header
+          title={title}
+          slug={slug}
+          brandConfig={brandConfig}
+          isContext={isContext}
+          isStoryKeep={isStoryKeep}
+          isEditable={isEditable}
+          sessionId={sessionId}
+          menu={menu}
+          storyfragmentId={storyfragmentId}
+          impressions={impressions}
+        />
+      )
+    }
+    <div
+      id="loading-indicator"
+      class="bg-myorange fixed left-0 top-0 z-50 h-1 w-full scale-x-0 transform transition-transform duration-300 ease-out"
+    >
+    </div>
+    <div id="content" class="transition-opacity duration-300">
+      <slot />
+    </div>
+    {
+      !isEditor && (
+        <Footer
+          slug={slug}
+          brandConfig={brandConfig}
+          isContext={isContext}
+          menu={menu}
+          created={created}
+          backToTop={true}
+        />
+      )
+    }
+    <script type="module" is:inline is:persist>
+      import '/src/client/sse.js';
+      import '/src/client/belief-events.js';
+      import '/src/client/analytics-events.js';
+    </script>
+  </body>
+</html>

package/templates/src/lib/session.ts ADDED Viewed

@@ -0,0 +1,126 @@
+/**
+ * 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.
+ */
+export async function createBackendSession(tenantId: string): Promise<string> {
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+  try {
+    const response = await fetch(`${goBackend}/api/v1/auth/visit`, {
+      method: 'POST',
+      headers: {
+        'X-Tenant-ID': tenantId,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({}),
+    });
+    if (!response.ok) {
+      const errorBody = await response.text();
+      console.error(
+        `Backend session creation failed: ${response.status}`,
+        errorBody
+      );
+      throw new Error(`Backend session creation failed: ${response.status}`);
+    }
+    const result = await response.json();
+    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;
+  } 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)}`;
+  }
+}
+/**
+ * Get or create a session ID with proper validation
+ * This is the main function that should be used in [...slug].astro
+ */
+export async function getOrSetSessionId(
+  astro: {
+    cookies: {
+      get: (name: string) => { value?: string } | undefined;
+      set: (name: string, value: string, options?: any) => void;
+    };
+  },
+  tenantId: string
+): Promise<string> {
+  // Check if we already have a session ID in the cookie
+  let sessionId = astro.cookies.get('tractstack_session_id')?.value;
+  if (sessionId) {
+    // Validate session exists in backend before using it
+    const isValid = await validateSessionWithBackend(sessionId, tenantId);
+    if (!isValid) {
+      console.warn(`Session ${sessionId} invalid, creating new session`);
+      sessionId = ''; // Force new session creation
+    }
+  }
+  if (!sessionId) {
+    // Call backend to generate collision-free session ID AND warm session
+    sessionId = await createBackendSession(tenantId);
+    // Set cookie with backend-provided session ID
+    astro.cookies.set('tractstack_session_id', sessionId, {
+      httpOnly: false, // Client needs to read for SSE handshake
+      secure: import.meta.env.PROD,
+      sameSite: 'lax',
+      path: '/',
+      maxAge: 60 * 60 * 24, // 24 hours
+    });
+    //  console.log(`Created new session: ${sessionId}`);
+    //} else {
+    //  console.log(`Using existing session: ${sessionId}`);
+  }
+  return sessionId;
+}
+/**
+ * Validate that a session exists in the backend cache
+ * This prevents using stale session IDs after server restarts
+ */
+async function validateSessionWithBackend(
+  sessionId: string,
+  tenantId: string
+): Promise<boolean> {
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+  try {
+    // Use a lightweight endpoint to check if session exists
+    const response = await fetch(`${goBackend}/api/v1/auth/visit`, {
+      method: 'POST',
+      headers: {
+        'X-Tenant-ID': tenantId,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        sessionId: sessionId,
+      }),
+    });
+    if (!response.ok) {
+      return false;
+    }
+    const result = await response.json();
+    return result.success === true;
+  } catch (error) {
+    console.warn('Session validation failed:', error);
+    return false;
+  }
+}

package/templates/src/lib/storyData.ts ADDED Viewed

@@ -0,0 +1,56 @@
+import { handleFailedResponse } from '@/utils/backend';
+import type { ImpressionNode } from '@/types/compositorTypes';
+export interface StoryData {
+  id: string;
+  title: string;
+  slug: string;
+  paneIds: string[];
+  codeHookTargets: Record<string, string>;
+  impressions: ImpressionNode[];
+  fragments: Record<string, string>;
+  menu: any;
+  isHome: boolean;
+  created: string;
+}
+export async function getStoryData(
+  astro: any,
+  lookup: string,
+  sessionId: string,
+  tenantId: string
+): Promise<StoryData> {
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+  const endpoint = lookup
+    ? `${goBackend}/api/v1/nodes/storyfragments/slug/${lookup}/personalized-payload`
+    : `${goBackend}/api/v1/nodes/storyfragments/home/personalized-payload`;
+  const response = await fetch(endpoint, {
+    headers: {
+      'X-Tenant-ID': tenantId,
+      'X-TractStack-Session-ID': sessionId,
+    },
+  });
+  const failedResponse = await handleFailedResponse(
+    response,
+    goBackend,
+    tenantId,
+    astro.url.pathname
+  );
+  if (failedResponse) {
+    throw new Response(null, {
+      status: failedResponse.status,
+      statusText: failedResponse.statusText,
+    });
+  }
+  const storyData = await response.json();
+  if (storyData.isHome && lookup !== '') {
+    throw astro.redirect('/');
+  }
+  return storyData;
+}

package/templates/src/middleware.ts ADDED Viewed

@@ -0,0 +1,52 @@
+import type { APIContext, MiddlewareNext } from '@/types/astro';
+interface Locals {
+  tenant?: {
+    id: string;
+    domain: string | null;
+    isMultiTenant: boolean;
+    isLocalhost: boolean;
+  };
+}
+export async function onRequest(
+  context: APIContext & { locals: Locals },
+  next: MiddlewareNext
+) {
+  const isMultiTenantEnabled =
+    import.meta.env.PUBLIC_ENABLE_MULTI_TENANT === 'true';
+  // Only set tenant in locals if we have a trusted subdomain (production multi-tenant)
+  if (isMultiTenantEnabled && !import.meta.env.DEV) {
+    const hostname =
+      context.request.headers.get('x-forwarded-host') ||
+      context.request.headers.get('host');
+    if (hostname) {
+      // Parse production subdomain pattern: {tenantId}.sandbox.{platform}.com
+      const parts = hostname.split('.');
+      if (
+        parts.length >= 4 &&
+        parts[1] === 'sandbox' &&
+        ['freewebpress', 'tractstack'].includes(parts[2]) &&
+        parts[3] === 'com'
+      ) {
+        // Only set locals.tenant when we have a trusted subdomain
+        context.locals.tenant = {
+          id: parts[0],
+          domain: hostname,
+          isMultiTenant: true,
+          isLocalhost: false,
+        };
+        // Set header for backend communication
+        context.request.headers.set('X-Tenant-ID', parts[0]);
+      }
+    }
+  }
+  // If no trusted subdomain detected, leave locals.tenant undefined
+  // This allows the cascading check to fall through to PUBLIC_TENANTID
+  return next();
+}

package/templates/src/pages/404.astro ADDED Viewed

@@ -0,0 +1,54 @@
+---
+const { pathname } = Astro.url;
+if (pathname.startsWith('/.')) {
+  return new Response(null, { status: 404, statusText: 'Not Found' });
+}
+const assetExtensions = [
+  '.webp',
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.svg',
+  '.css',
+  '.js',
+  '.woff',
+  '.woff2',
+  '.ttf',
+];
+const isAsset = assetExtensions.some((ext) => pathname.endsWith(ext));
+if (isAsset || pathname === '/') {
+  // For a missing asset, we can send a minimal 404 response.
+  // The browser will handle the error gracefully (e.g., not display the image).
+  if (isAsset) {
+    return new Response(null, { status: 404, statusText: 'Not Found' });
+  }
+  // For a 404 at the root, we show the simple error page below.
+} else {
+  // If it's not an asset and not the homepage, it's a missing page.
+  // Redirect to the homepage.
+  return Astro.redirect('/');
+}
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>404 - Page Not Found</title>
+  </head>
+  <body>
+    <div
+      style="text-align: center; padding: 50px; font-family: Arial, sans-serif;"
+    >
+      <h1>404 - Page Not Found</h1>
+      <p>The page could not be found.</p>
+      <a href="/" style="color: #0066cc;">Go to Home</a>
+    </div>
+  </body>
+</html>