astro-tractstack 2.0.0-rc.0

package/templates/src/components/compositor/preview/ListContentPreview.tsx

@@ -0,0 +1,213 @@
+import { useState, useMemo, type ReactNode } from 'react';
+
+// Define interfaces for Story and Analytics
+interface Story {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  changed: string;
+  topics?: string[];
+}
+
+interface Analytics {
+  id: string;
+  total_actions: number;
+}
+
+// Fake data for stories
+const fakeStories: Story[] = Array.from({ length: 12 }, (_, i) => ({
+  id: `story-${i + 1}`,
+  title: `Sample Story ${i + 1}`,
+  description: `Description for sample story ${i + 1}.`,
+  slug: `sample-story-${i + 1}`,
+  changed: new Date(2023, 0, i + 1).toISOString(),
+  topics: i % 2 === 0 ? ['topic1', 'topic2'] : ['topic3'],
+}));
+
+// Fake analytics data for sorting by popularity
+const fakeAnalytics: Analytics[] = fakeStories.map((story) => ({
+  id: story.id,
+  total_actions: Math.floor(Math.random() * 100),
+}));
+
+// Utility function to format dates
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(date);
+};
+
+// StoryItem component for reusable story rendering
+const StoryItem = ({
+  story,
+  showTopics = false,
+}: {
+  story: Story;
+  showTopics?: boolean;
+}): ReactNode => (
+  <div className="flex items-start space-x-4 rounded-md p-2">
+    {/* Placeholder for story image */}
+    <div
+      style={{ width: '100px', height: '100px', backgroundColor: '#d0d0d0' }}
+      className="rounded-md"
+    />
+    <div className="flex-1">
+      <h3 className="text-lg font-bold text-black">{story.title}</h3>
+      {story.description && (
+        <p className="text-myblack line-clamp-2 text-sm">{story.description}</p>
+      )}
+      {showTopics && story.topics && story.topics.length > 0 && (
+        <div className="mt-1 flex flex-wrap gap-1">
+          {story.topics.slice(0, 3).map((topic) => (
+            <span
+              key={topic}
+              className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800"
+            >
+              {topic}
+            </span>
+          ))}
+        </div>
+      )}
+      <p className="text-mydarkgrey mt-1 text-xs">
+        {formatDate(story.changed)}
+      </p>
+    </div>
+  </div>
+);
+
+// Component definition
+const ListContentPreview = ({
+  bgColour = '#ffffff',
+}: {
+  bgColour: string;
+}): ReactNode => {
+  const [currentMode, setCurrentMode] = useState<'recent' | 'popular'>(
+    'recent'
+  );
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 10;
+
+  // Sort stories based on mode
+  const sortedStories = useMemo(() => {
+    if (currentMode === 'recent') {
+      return [...fakeStories].sort(
+        (a, b) => new Date(b.changed).getTime() - new Date(a.changed).getTime()
+      );
+    } else {
+      return [...fakeStories].sort((a, b) => {
+        const aViews =
+          fakeAnalytics.find((anal) => anal.id === a.id)?.total_actions || 0;
+        const bViews =
+          fakeAnalytics.find((anal) => anal.id === b.id)?.total_actions || 0;
+        if (bViews === aViews) {
+          return new Date(b.changed).getTime() - new Date(a.changed).getTime();
+        }
+        return bViews - aViews;
+      });
+    }
+  }, [currentMode]);
+
+  // Pagination logic
+  const totalPages = Math.ceil(sortedStories.length / pageSize);
+  const startIdx = (currentPage - 1) * pageSize;
+  const endIdx = startIdx + pageSize;
+  const displayedStories = sortedStories.slice(startIdx, endIdx);
+
+  const leftColumn = displayedStories.slice(
+    0,
+    Math.ceil(displayedStories.length / 2)
+  );
+  const rightColumn = displayedStories.slice(
+    Math.ceil(displayedStories.length / 2)
+  );
+  return (
+    <div
+      className="mx-auto max-w-7xl p-4 py-12"
+      style={{ backgroundColor: bgColour }}
+    >
+      {/* Toggle Buttons */}
+      <div className="mb-4 flex justify-center">
+        <div className="inline-flex rounded-md shadow-sm" role="group">
+          <button
+            className={`px-4 py-2 text-sm font-bold ${
+              currentMode === 'recent'
+                ? 'bg-myblue text-white'
+                : 'text-myblack bg-white hover:bg-gray-100'
+            } border-myblue rounded-l-md border transition-colors`}
+            onClick={() => {
+              setCurrentMode('recent');
+              setCurrentPage(1);
+            }}
+          >
+            Newest
+          </button>
+          <button
+            className={`px-4 py-2 text-sm font-bold ${
+              currentMode === 'popular'
+                ? 'bg-myblue text-white'
+                : 'text-myblack bg-white hover:bg-gray-100'
+            } border-myblue rounded-r-md border transition-colors`}
+            onClick={() => {
+              setCurrentMode('popular');
+              setCurrentPage(1);
+            }}
+          >
+            Most Active
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Layout */}
+      <div className="block space-y-6 p-4 md:hidden">
+        {displayedStories.map((story) => (
+          <StoryItem key={story.id} story={story} showTopics={true} />
+        ))}
+      </div>
+
+      {/* Desktop Layout */}
+      <div className="hidden p-4 md:flex md:space-x-6">
+        <div className="space-y-6 md:w-1/2">
+          {leftColumn.map((story) => (
+            <StoryItem key={story.id} story={story} showTopics={true} />
+          ))}
+        </div>
+        <div className="space-y-6 md:w-1/2">
+          {rightColumn.map((story) => (
+            <StoryItem key={story.id} story={story} showTopics={true} />
+          ))}
+        </div>
+      </div>
+
+      {/* Pagination */}
+      {sortedStories.length > pageSize && (
+        <div className="mt-8 flex justify-center">
+          <nav
+            className="inline-flex rounded-md shadow-sm"
+            aria-label="Pagination"
+          >
+            <button
+              className="text-myblack rounded-l-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={currentPage <= 1}
+              onClick={() => setCurrentPage((prev) => prev - 1)}
+            >
+              Previous
+            </button>
+            <button
+              className="hover:bg-myblue-dark border-myblue bg-myblue rounded-r-md border px-4 py-2 text-sm font-bold text-white disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={currentPage >= totalPages}
+              onClick={() => setCurrentPage((prev) => prev + 1)}
+            >
+              Next
+            </button>
+          </nav>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ListContentPreview;

package/templates/src/components/compositor/preview/OgImagePreview.tsx

@@ -0,0 +1,223 @@
+import { useState, useEffect, useRef } from 'react';
+import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import { setPendingImageOperation } from '@/stores/storykeep';
+import type { BrandConfig } from '@/types/tractstack';
+
+const OG_IMAGE_WIDTH = 1200;
+const OG_IMAGE_HEIGHT = 630;
+const OG_ASPECT_RATIO = OG_IMAGE_WIDTH / OG_IMAGE_HEIGHT;
+const TEXT_MARGIN = 80;
+
+interface OgImagePreviewProps {
+  nodeId: string;
+  title: string;
+  socialImagePath: string | null;
+  config: BrandConfig;
+  onColorChange?: (textColor: string, bgColor: string) => void;
+}
+
+const OgImagePreview = ({
+  nodeId,
+  title,
+  socialImagePath,
+  config,
+  onColorChange,
+}: OgImagePreviewProps) => {
+  const [fontSize, setFontSize] = useState<number>(48);
+  const [textColor, setTextColor] = useState('#ffffff');
+  const [bgColor, setBgColor] = useState('#1f2937');
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!title) return;
+
+    const baseSize = 48;
+    const titleLength = title.length;
+    let calculatedSize = baseSize;
+
+    if (titleLength > 50) calculatedSize = 32;
+    else if (titleLength > 30) calculatedSize = 40;
+    else if (titleLength > 15) calculatedSize = 44;
+
+    setFontSize(calculatedSize);
+  }, [title, nodeId]);
+
+  const generateCanvasImage = async () => {
+    if (socialImagePath || !title) return;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) return;
+
+    canvas.width = OG_IMAGE_WIDTH;
+    canvas.height = OG_IMAGE_HEIGHT;
+
+    // Fill background
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Set up text
+    ctx.fillStyle = textColor;
+    ctx.font = `bold ${fontSize}px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.shadowColor = 'rgba(0,0,0,0.2)';
+    ctx.shadowBlur = 4;
+    ctx.shadowOffsetY = 2;
+
+    // Calculate available width for text
+    const maxWidth = OG_IMAGE_WIDTH - TEXT_MARGIN * 2;
+    const centerX = OG_IMAGE_WIDTH / 2;
+    const centerY = OG_IMAGE_HEIGHT / 2;
+
+    // Simple word wrapping
+    const words = title.split(' ');
+    const lines: string[] = [];
+    let currentLine = '';
+
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const metrics = ctx.measureText(testLine);
+
+      if (metrics.width <= maxWidth) {
+        currentLine = testLine;
+      } else {
+        if (currentLine) {
+          lines.push(currentLine);
+          currentLine = word;
+        } else {
+          // Single word is too long, just use it
+          lines.push(word);
+        }
+      }
+    }
+
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    // Draw text lines
+    const lineHeight = fontSize * 1.2;
+    const totalHeight = lines.length * lineHeight;
+    const startY = centerY - totalHeight / 2 + lineHeight / 2;
+
+    lines.forEach((line, index) => {
+      const y = startY + index * lineHeight;
+      ctx.fillText(line, centerX, y);
+    });
+
+    // Convert to base64
+    const base64Data = canvas.toDataURL('image/png', 0.9);
+
+    // Add to pending operations
+    setPendingImageOperation(nodeId, {
+      type: 'upload',
+      data: base64Data,
+      path: `/images/og/${nodeId}-generated-${Date.now()}.png`,
+      filename: `${nodeId}-generated-${Date.now()}.png`,
+    });
+  };
+
+  // Generate image when title or colors change
+  useEffect(() => {
+    generateCanvasImage();
+  }, [title, textColor, bgColor, socialImagePath, fontSize, nodeId]);
+
+  const handleTextColorChange = (color: string) => {
+    setTextColor(color);
+    onColorChange?.(color, bgColor);
+  };
+
+  const handleBgColorChange = (color: string) => {
+    setBgColor(color);
+    onColorChange?.(textColor, color);
+  };
+
+  const previewWidth = 480;
+  const previewHeight = previewWidth / OG_ASPECT_RATIO;
+  const scaledFontSize = fontSize
+    ? (fontSize * previewWidth) / OG_IMAGE_WIDTH
+    : 24;
+
+  return (
+    <div className="w-full space-y-6">
+      <div className="flex w-full flex-col space-y-4">
+        <div
+          className="relative overflow-hidden rounded-md border border-gray-300"
+          style={{
+            width: `${previewWidth}px`,
+            height: `${previewHeight}px`,
+          }}
+        >
+          {socialImagePath ? (
+            <img
+              src={socialImagePath}
+              alt="Open Graph preview"
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <div
+              className="flex h-full w-full items-center justify-center"
+              style={{ backgroundColor: bgColor }}
+            >
+              <div
+                className="px-8 text-center"
+                style={{
+                  color: textColor,
+                  fontSize: `${scaledFontSize}px`,
+                  fontWeight: 'bold',
+                  lineHeight: 1.2,
+                  maxWidth: `${previewWidth - ((TEXT_MARGIN * previewWidth) / OG_IMAGE_WIDTH) * 2}px`,
+                  textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                }}
+              >
+                {title || 'Your page title will appear here'}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <p className="mt-2 text-xs text-gray-500">
+          Images must be exactly {OG_IMAGE_WIDTH}x{OG_IMAGE_HEIGHT} pixels (JPG
+          or PNG)
+        </p>
+      </div>
+
+      {!socialImagePath && (
+        <div className="grid max-w-md grid-cols-1 gap-6 md:grid-cols-2">
+          <ColorPickerCombo
+            title="Text Color"
+            defaultColor={textColor}
+            onColorChange={handleTextColorChange}
+            config={config}
+          />
+          <ColorPickerCombo
+            title="Background Color"
+            defaultColor={bgColor}
+            onColorChange={handleBgColorChange}
+            config={config}
+          />
+        </div>
+      )}
+
+      <div className="mt-2 text-sm text-gray-600">
+        <p>
+          The Open Graph image will be shown when your page is shared on social
+          media.
+        </p>
+        {!socialImagePath && (
+          <p className="mt-1">
+            An image will be automatically generated using your page title and
+            these colors.
+          </p>
+        )}
+      </div>
+
+      {/* Hidden canvas for image generation */}
+      <canvas ref={canvasRef} style={{ display: 'none' }} />
+    </div>
+  );
+};
+
+export default OgImagePreview;

package/templates/src/components/compositor/preview/PaneSnapshotGenerator.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from 'react';
+import * as htmlToImage from 'html-to-image';
+import type { BrandConfig } from '@/types/tractstack';
+
+export type SnapshotData = {
+  imageData: string;
+  height: number;
+};
+
+export interface PaneSnapshotGeneratorProps {
+  id: string;
+  htmlString: string;
+  onComplete: (id: string, data: SnapshotData) => void;
+  onError?: (id: string, error: string) => void;
+  config?: BrandConfig;
+  outputWidth?: number;
+}
+
+const snapshotCache = new Map<string, SnapshotData>();
+
+export const PaneSnapshotGenerator = ({
+  id,
+  htmlString,
+  onComplete,
+  onError,
+  config,
+  outputWidth = 800,
+}: PaneSnapshotGeneratorProps) => {
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  useEffect(() => {
+    if (!htmlString || isGenerating) return;
+
+    const cacheKey = `${id}-${htmlString.length}-${outputWidth}`;
+    if (snapshotCache.has(cacheKey)) {
+      const cached = snapshotCache.get(cacheKey)!;
+      onComplete(id, cached);
+      return;
+    }
+
+    const generateSnapshot = async () => {
+      setIsGenerating(true);
+
+      try {
+        const iframe = document.createElement('iframe');
+        iframe.style.position = 'absolute';
+        iframe.style.left = '-99999px';
+        iframe.style.top = '0px';
+        iframe.style.width = '1500px';
+        iframe.style.height = '2000px';
+        iframe.style.border = 'none';
+        iframe.style.background = '#ffffff';
+
+        document.body.appendChild(iframe);
+
+        await new Promise<void>((resolve) => {
+          iframe.onload = () => resolve();
+          if (iframe.contentDocument) {
+            resolve();
+          }
+        });
+
+        const iframeDoc =
+          iframe.contentDocument || iframe.contentWindow?.document;
+        if (!iframeDoc) {
+          throw new Error('Could not access iframe document');
+        }
+
+        const cssBasePath = '/media/css';
+        const customCssUrl = `${cssBasePath}/custom.css`;
+        const storykeepCssUrl = `${cssBasePath}/storykeep.css`;
+
+        const brandColors = config?.BRAND_COLOURS?.split(',') || [];
+
+        // Get all existing CSS links from current document
+        const existingCssLinks = Array.from(
+          document.querySelectorAll('link[rel="stylesheet"]')
+        )
+          .map((link) => (link as HTMLLinkElement).href)
+          .filter((href) => href);
+
+        const fullHtml = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Snapshot Preview</title>
+  <link rel="stylesheet" href="${customCssUrl}">
+  <link rel="stylesheet" href="${storykeepCssUrl}">
+  ${existingCssLinks.map((href) => `<link rel="stylesheet" href="${href}">`).join('\n')}
+  ${
+    config
+      ? `
+  <style>
+    :root {
+      --brand-primary: ${brandColors[0] || '#000000'};
+      --brand-secondary: ${brandColors[1] || '#666666'};
+      --brand-accent: ${brandColors[2] || '#cccccc'};
+    }
+  </style>
+  `
+      : ''
+  }
+  <style>
+    body { 
+      margin: 0; 
+      padding: 0;
+      font-family: system-ui, -apple-system, sans-serif; 
+      width: 1500px; 
+      overflow-x: hidden;
+    }
+    * { box-sizing: border-box; }
+  </style>
+</head>
+<body>
+  ${htmlString}
+</body>
+</html>`;
+
+        iframeDoc.open();
+        (iframeDoc as any).write(fullHtml);
+        iframeDoc.close();
+
+        // Wait for CSS to load
+        await new Promise((resolve) => {
+          if (iframeDoc.readyState === 'complete') {
+            resolve(void 0);
+          } else {
+            iframe.onload = () => resolve(void 0);
+          }
+        });
+
+        // Additional wait for rendering
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        const iframeBody = iframeDoc.body;
+        if (!iframeBody) {
+          throw new Error('Iframe body not found');
+        }
+
+        const contentHeight = iframeBody.scrollHeight;
+
+        const dataUrl = await htmlToImage.toPng(iframeBody, {
+          width: 1500,
+          height: contentHeight,
+          pixelRatio: 1,
+          backgroundColor: '#ffffff',
+          quality: 0.95,
+          skipFonts: true,
+          skipAutoScale: true,
+        });
+
+        const scaleFactor = outputWidth / 1500;
+        const scaledHeight = Math.round(contentHeight * scaleFactor);
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) {
+          throw new Error('Could not get canvas context');
+        }
+
+        canvas.width = outputWidth;
+        canvas.height = scaledHeight;
+
+        const img = new Image();
+        await new Promise<void>((resolve, reject) => {
+          img.onload = () => {
+            ctx.drawImage(img, 0, 0, outputWidth, scaledHeight);
+            resolve();
+          };
+          img.onerror = reject;
+          img.src = dataUrl;
+        });
+
+        const finalImageData = canvas.toDataURL('image/png');
+
+        document.body.removeChild(iframe);
+
+        const snapshotData: SnapshotData = {
+          imageData: finalImageData,
+          height: scaledHeight,
+        };
+
+        snapshotCache.set(cacheKey, snapshotData);
+        onComplete(id, snapshotData);
+      } catch (error) {
+        console.error(`Snapshot generation failed for ${id}:`, error);
+        onError?.(id, error instanceof Error ? error.message : 'Unknown error');
+      } finally {
+        setIsGenerating(false);
+      }
+    };
+
+    generateSnapshot();
+  }, [id, htmlString, isGenerating, onComplete, onError, config, outputWidth]);
+
+  return null;
+};