astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,216 @@
+---
+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 { slug } = Astro.params;
+if (!slug) 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 storyFragment;
+let title;
+let storyFragmentID;
+
+// Handle create mode
+if (slug === 'create') {
+  // Create empty storyfragment in memory
+  const emptyStoryFragment = {
+    id: ulid(),
+    nodeType: 'StoryFragment' as const,
+    parentId: null,
+    title: '',
+    slug: '',
+    paneIds: [],
+    isChanged: false,
+    created: new Date(),
+    changed: new Date(),
+  };
+
+  loadData = {
+    storyfragmentNodes: [emptyStoryFragment],
+  };
+
+  storyFragment = emptyStoryFragment;
+  title = 'Create New Page - TractStack Editor';
+  storyFragmentID = emptyStoryFragment.id;
+} else {
+  // Existing backend fetch logic
+  const endpoint = `${goBackend}/api/v1/nodes/storyfragments/slug/${slug}/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 storyfragment full payload:', error);
+    return Astro.redirect(
+      `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
+    );
+  }
+
+  // Extract data from the response
+  storyFragment = loadData?.storyfragmentNodes.at(0);
+  title = storyFragment?.title || `Editor`;
+  storyFragmentID = storyFragment?.id;
+}
+
+const canonicalURL = slug === brandConfig?.HOME_SLUG ? '/' : `/${slug}`;
+const fullCanonicalURL = brandConfig?.SITE_URL
+  ? canonicalURL.startsWith('/')
+    ? `${brandConfig.SITE_URL.replace(/\/$/, '')}${canonicalURL}`
+    : `${brandConfig.SITE_URL.replace(/\/$/, '')}/${canonicalURL}`
+  : canonicalURL;
+
+// Extract dates if available
+const pubDatetime = storyFragment?.created
+  ? new Date(storyFragment.created)
+  : undefined;
+const modDatetime = storyFragment?.changed
+  ? new Date(storyFragment.changed)
+  : null;
+
+// Social image from the story fragment
+const ogImage = storyFragment?.socialImagePath
+  ? joinUrlPaths(brandConfig?.SITE_URL || ``, storyFragment.socialImagePath)
+  : undefined;
+
+const fullContentMap = await getFullContentMap(
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default'
+);
+const urlParams: Record<string, string | boolean> = {};
+for (const [key, value] of Astro.url.searchParams) {
+  urlParams[key] = value === '' ? true : value;
+}
+---
+
+<Layout
+  title={title}
+  slug={slug}
+  canonicalURL={canonicalURL}
+  pubDatetime={pubDatetime}
+  modDatetime={modDatetime}
+  ogImage={ogImage}
+  brandConfig={brandConfig}
+  storyfragmentId={storyFragmentID}
+  isEditor={true}
+>
+  <!-- Standard Header (scrollable) -->
+  <Header
+    title={title}
+    slug={slug}
+    brandConfig={brandConfig}
+    isContext={false}
+    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={slug} isContext={false} client:only="react" />
+  </section>
+
+  <div class="flex min-h-screen">
+    <!-- Tool Navigation (mobile bottom, desktop side) -->
+    <StoryKeepToolMode isContext={false} 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={storyFragmentID}
+            nodes={loadData}
+            config={brandConfig}
+            fullContentMap={fullContentMap}
+            fullCanonicalURL={fullCanonicalURL}
+            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/[...slug].astro

@@ -0,0 +1,148 @@
+---
+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';
+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 { slug } = Astro.params || {};
+
+if (slug && (slug.startsWith('images/') || slug.startsWith('media/'))) {
+  return new Response(null, { status: 404, statusText: 'Not Found' });
+}
+
+const lookup = slug || '';
+const sessionId = await getOrSetSessionId(Astro, tenantId);
+const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+let storyData;
+try {
+  storyData = await getStoryData(Astro, lookup, sessionId, tenantId);
+} catch (error) {
+  if (error instanceof Response) {
+    return error;
+  }
+  console.error('Error fetching storyfragment:', error);
+  return Astro.redirect(
+    `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
+  );
+}
+
+const storyfragmentId = storyData.id;
+const storyfragmentTitle = storyData.title || 'Untitled Story';
+const paneIds = storyData.paneIds || [];
+const codeHookTargets = storyData.codeHookTargets || {};
+
+if (paneIds.length === 0) {
+  console.log(`Empty Story Fragment. Redirecting to /storykeep`);
+  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) {
+  return Astro.redirect(
+    `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
+  );
+}
+
+const fullContentMap = await getFullContentMap(tenantId);
+const brandConfig = await getBrandConfig(tenantId);
+
+if (!brandConfig.SITE_INIT) {
+  return Astro.redirect('/storykeep');
+}
+---
+
+<Layout
+  title={storyfragmentTitle}
+  slug={lookup || brandConfig.HOME_SLUG}
+  menu={storyData.menu || null}
+  created={storyData.created}
+  isContext={false}
+  isStoryKeep={false}
+  isEditable={true}
+  brandConfig={brandConfig}
+  sessionId={sessionId}
+  impressions={storyData.impressions || []}
+  storyfragmentId={storyfragmentId}
+>
+  <main id="main-content" class="min-h-screen w-full">
+    <div class="panes-container">
+      {
+        paneIds.map((paneId: string) => (
+          <div
+            id={`pane-${paneId}`}
+            data-pane-id={paneId}
+            class="pane-fragment-container"
+            hx-get={`/api/v1/fragments/panes/${paneId}`}
+            hx-trigger="refresh"
+            hx-swap="innerHTML"
+          >
+            {codeHookTargets[paneId] ? (
+              <div class="overflow-hidden">
+                <CodeHook
+                  target={codeHookTargets[paneId]}
+                  paneId={paneId}
+                  fullContentMap={fullContentMap}
+                  noPaneId={true}
+                />
+              </div>
+            ) : (
+              <Fragment set:html={fragmentsData[paneId] || ''} />
+            )}
+          </div>
+        ))
+      }
+    </div>
+  </main>
+</Layout>

package/templates/src/pages/api/auth/decode.ts

@@ -0,0 +1,101 @@
+import type { APIRoute } from '@/types/astro';
+
+export const GET: APIRoute = async ({ request }) => {
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+  const tenantId =
+    request.headers.get('X-Tenant-ID') ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
+
+  try {
+    // Get Authorization header from frontend
+    const authHeader = request.headers.get('Authorization');
+
+    if (!authHeader) {
+      return new Response(
+        JSON.stringify({
+          profile: null,
+        }),
+        {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+    }
+
+    // Create abort controller for request timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout
+
+    try {
+      // Forward request to Go backend
+      const response = await fetch(`${goBackend}/api/v1/auth/profile/decode`, {
+        method: 'GET',
+        headers: {
+          Authorization: authHeader,
+          'X-Tenant-ID': tenantId,
+        },
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      // Get response from Go backend
+      const data = await response.json();
+
+      // Return Go backend response as-is
+      return new Response(JSON.stringify(data), {
+        status: response.status,
+        headers: {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers':
+            'Content-Type, Authorization, X-Tenant-ID',
+        },
+      });
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error('Profile decode request timeout');
+        return new Response(
+          JSON.stringify({
+            profile: null,
+          }),
+          {
+            status: 408,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error) {
+    console.error('Profile decode API proxy error:', error);
+
+    return new Response(
+      JSON.stringify({
+        profile: null,
+      }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};
+
+// Handle OPTIONS for CORS preflight
+export const OPTIONS: APIRoute = async () => {
+  return new Response(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Headers':
+        'Content-Type, Authorization, X-Tenant-ID',
+    },
+  });
+};

package/templates/src/pages/api/auth/login.ts

@@ -0,0 +1,122 @@
+import type { APIRoute } from '@/types/astro';
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    // Parse request body
+    const body = await request.json();
+    const { password, redirect } = body;
+
+    if (!password) {
+      return new Response(
+        JSON.stringify({ success: false, error: 'Password is required' }),
+        {
+          status: 400,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+    }
+
+    // Get tenant info from environment
+    const tenantId =
+      request.headers.get('X-Tenant-ID') ||
+      import.meta.env.PUBLIC_TENANTID ||
+      'default';
+    const backendUrl =
+      import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+    // Prepare request to Go backend
+    const backendRequest = {
+      password,
+      tenantId,
+    };
+
+    // Create abort controller for request timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout
+
+    try {
+      // Call Go backend login endpoint
+      const response = await fetch(`${backendUrl}/api/v1/auth/login`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': tenantId,
+        },
+        body: JSON.stringify(backendRequest),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      const result = await response.json();
+
+      if (response.ok && result.status === 'ok') {
+        // Get Set-Cookie header from backend response
+        const setCookieHeader = response.headers.get('Set-Cookie');
+
+        // Build response headers
+        const responseHeaders: Record<string, string> = {
+          'Content-Type': 'application/json',
+        };
+
+        if (setCookieHeader) {
+          responseHeaders['Set-Cookie'] = setCookieHeader;
+        }
+
+        // Success response
+        return new Response(
+          JSON.stringify({
+            success: true,
+            role: result.role || 'authenticated',
+            redirect: redirect || '/storykeep',
+          }),
+          {
+            status: 200,
+            headers: responseHeaders,
+          }
+        );
+      } else {
+        // Login failed
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: result.error || 'Invalid credentials',
+          }),
+          {
+            status: 401,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+      }
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error('Login request timeout');
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: 'Request timeout - please try again',
+          }),
+          {
+            status: 408,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error) {
+    console.error('Login API error:', error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Internal server error',
+      }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};

package/templates/src/pages/api/auth/logout.ts

@@ -0,0 +1,37 @@
+import type { APIRoute } from '@/types/astro';
+
+export const POST: APIRoute = async ({ cookies }) => {
+  try {
+    // Clear admin and editor auth cookies
+    cookies.delete('admin_auth', {
+      path: '/',
+    });
+
+    cookies.delete('editor_auth', {
+      path: '/',
+    });
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        message: 'Logged out successfully',
+      }),
+      {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  } catch (error) {
+    console.error('Logout API error:', error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Logout failed',
+      }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};

package/templates/src/pages/api/auth/profile.ts

@@ -0,0 +1,76 @@
+import type { APIRoute } from '@/types/astro';
+
+export const POST: APIRoute = async ({ request }) => {
+  const GO_BACKEND =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    // Forward the request to the Go backend
+    const body = await request.text();
+
+    // Create abort controller for request timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout
+
+    try {
+      const response = await fetch(`${GO_BACKEND}/api/v1/auth/profile`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': import.meta.env.PUBLIC_TENANTID || 'default',
+          ...(request.headers.get('Authorization') && {
+            Authorization: request.headers.get('Authorization')!,
+          }),
+        },
+        body: body,
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      const data = await response.json();
+
+      // Return the response with the same status code
+      return new Response(JSON.stringify(data), {
+        status: response.status,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error('Profile request timeout');
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: 'Request timeout - please try again',
+          }),
+          {
+            status: 408,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error) {
+    console.error('Profile API proxy error:', error);
+
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Failed to connect to backend service',
+      }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+  }
+};