astro-tractstack 2.0.0-rc.9 → 2.0.1

package/templates/src/components/codehooks/FeaturedArticleSetup.tsx

@@ -0,0 +1,318 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { useStore } from '@nanostores/react';
+import { Combobox } from '@ark-ui/react';
+import { createListCollection } from '@ark-ui/react/collection';
+import { ChevronUpDownIcon, CheckIcon } from '@heroicons/react/20/solid';
+import { fullContentMapStore, viewportKeyStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { cloneDeep } from '@/utils/helpers';
+import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import type { PaneNode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
+
+interface FeaturedArticleSetupProps {
+  params: Record<string, string>;
+  nodeId: string;
+  config: BrandConfig;
+}
+
+const comboboxItemStyles = `
+  .combo-item .check-indicator {
+    display: none;
+  }
+  .combo-item[data-state="checked"] .check-indicator {
+    display: flex;
+  }
+`;
+
+const FeaturedArticleSetup = ({
+  params,
+  nodeId,
+  config,
+}: FeaturedArticleSetupProps) => {
+  const $contentMap = useStore(fullContentMapStore);
+  const $viewportKey = useStore(viewportKeyStore);
+  const isInitialMount = useRef(true);
+  const ctx = getCtx();
+
+  const availableStories = useMemo(
+    () =>
+      $contentMap.filter(
+        (item) =>
+          item.type === 'StoryFragment' &&
+          item.description &&
+          item.panes &&
+          item.panes.length > 0 &&
+          item.thumbSrc
+      ),
+    [$contentMap]
+  );
+
+  const initialSlug = params?.slug || '';
+  const initialStory = availableStories.find(
+    (story) => story.slug === initialSlug
+  );
+
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [selectedSlug, setSelectedSlug] = useState(initialSlug);
+  const [query, setQuery] = useState(initialStory?.title || '');
+  const [bgColor, setBgColor] = useState(params?.bgColor || '');
+
+  const selectedStory = useMemo(
+    () => availableStories.find((story) => story.slug === selectedSlug),
+    [availableStories, selectedSlug]
+  );
+
+  const collection = useMemo(() => {
+    const filtered =
+      query === '' || query === selectedStory?.title
+        ? availableStories
+        : availableStories.filter((story) =>
+            story.title.toLowerCase().includes(query.toLowerCase())
+          );
+    return createListCollection({
+      items: filtered,
+      itemToValue: (item) => item.slug,
+      itemToString: (item) => item.title,
+    });
+  }, [availableStories, query, selectedStory]);
+
+  const updatePaneNode = () => {
+    if (!nodeId) return;
+    const allNodes = ctx.allNodes.get();
+    const paneNode = cloneDeep(allNodes.get(nodeId)) as PaneNode;
+    if (paneNode) {
+      const updatedNode = {
+        ...paneNode,
+        codeHookTarget: 'featured-article',
+        codeHookPayload: {
+          options: JSON.stringify({
+            slug: selectedSlug,
+            bgColor: bgColor,
+          }),
+        },
+        bgColour: bgColor || undefined,
+        isChanged: true,
+      };
+
+      // If bgColor is empty, remove the property
+      if (!bgColor) {
+        delete updatedNode.bgColour;
+      }
+
+      ctx.modifyNodes([updatedNode]);
+    }
+  };
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    const timeoutId = setTimeout(updatePaneNode, 500);
+    return () => clearTimeout(timeoutId);
+  }, [selectedSlug, bgColor]);
+
+  const handleSelection = (details: { value: string[] }) => {
+    const slug = details.value[0] || '';
+    setSelectedSlug(slug);
+    const story = availableStories.find((s) => s.slug === slug);
+    if (story) {
+      setQuery(story.title);
+    } else {
+      setQuery('');
+    }
+  };
+
+  const renderPreview = () => {
+    if (!selectedStory) return null;
+
+    const topics = selectedStory.topics && selectedStory.topics.length > 0 && (
+      <div className="flex flex-wrap gap-2 pt-2">
+        {selectedStory.topics.map((topic) => (
+          <span
+            key={topic}
+            className="inline-flex items-center rounded-full bg-cyan-100 px-3 py-1 text-sm font-bold text-cyan-800"
+          >
+            {topic}
+          </span>
+        ))}
+      </div>
+    );
+
+    // Mobile is the default, single-column layout
+    if ($viewportKey.value === 'mobile') {
+      return (
+        <div className="flex flex-col gap-8 pt-4">
+          <div className="w-full">
+            <p className="font-action text-md mb-4 font-bold uppercase text-gray-500">
+              Featured Article
+            </p>
+            <div className="space-y-6">
+              <h2 className="text-4xl font-bold leading-snug">
+                {selectedStory.title}
+              </h2>
+              <p className="text-lg leading-loose text-gray-700">
+                {selectedStory.description}
+              </p>
+              {topics}
+            </div>
+          </div>
+          <div className="w-full">
+            <img
+              src={selectedStory.thumbSrc}
+              srcSet={selectedStory.thumbSrcSet}
+              alt={`Preview of ${selectedStory.title}`}
+              className="w-full rounded-lg shadow-lg"
+              style={{ aspectRatio: '1200 / 630' }}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    // Tablet and Desktop share the same two-column layout
+    return (
+      <div className="flex flex-row items-center gap-12 pt-4">
+        <div className="w-3/5">
+          <p className="font-action text-md mb-4 font-bold uppercase text-gray-500">
+            Featured Article
+          </p>
+          <div className="space-y-6">
+            <h2 className="text-5xl font-bold leading-snug">
+              {selectedStory.title}
+            </h2>
+            <p className="text-lg leading-loose text-gray-700">
+              {selectedStory.description}
+            </p>
+            {topics}
+          </div>
+        </div>
+        <div className="w-2/5">
+          <img
+            src={selectedStory.thumbSrc}
+            srcSet={selectedStory.thumbSrcSet}
+            alt={`Preview of ${selectedStory.title}`}
+            className="w-full rounded-lg shadow-lg"
+            style={{ aspectRatio: '1200 / 630' }}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  if (!isPanelOpen) {
+    return (
+      <div className="flex min-h-[200px] w-full flex-col items-center justify-center space-y-6 rounded-lg bg-slate-50 p-6">
+        <button
+          onClick={() => setIsPanelOpen(true)}
+          className="rounded-lg bg-cyan-600 px-6 py-3 font-bold text-white shadow-md transition-colors hover:bg-cyan-700"
+        >
+          {selectedStory
+            ? 'Edit Featured Article'
+            : 'Configure Featured Article'}
+        </button>
+        {selectedStory && (
+          <div className="mt-3 text-center text-sm text-gray-600">
+            Currently featuring:
+            <br />
+            <span className="font-bold">{selectedStory.title}</span>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full space-y-6 bg-slate-50 p-6">
+      <style>{comboboxItemStyles}</style>
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-bold text-gray-900">
+          Configure Featured Article
+        </h2>
+        <button
+          onClick={() => setIsPanelOpen(false)}
+          className="rounded bg-gray-200 px-4 py-2 font-bold text-gray-800 transition-colors hover:bg-gray-300"
+        >
+          Close
+        </button>
+      </div>
+
+      <div className="rounded-lg bg-white p-4 shadow">
+        <label className="block text-sm font-bold text-gray-700">
+          Select an Article
+        </label>
+        <p className="mt-1 text-xs text-gray-500">
+          Only articles with a description, content, and thumbnail will be
+          shown.
+        </p>
+        <Combobox.Root
+          collection={collection}
+          value={selectedSlug ? [selectedSlug] : []}
+          inputValue={query}
+          onValueChange={handleSelection}
+          onInputValueChange={(details) => setQuery(details.inputValue)}
+          className="mt-2"
+        >
+          <div className="relative">
+            <Combobox.Input
+              className="w-full rounded-md border border-gray-300 py-2 pl-3 pr-10 text-sm focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
+              placeholder="Search for an article..."
+            />
+            <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronUpDownIcon
+                className="h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </Combobox.Trigger>
+          </div>
+          <Combobox.Content className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            {collection.items.map((item) => (
+              <Combobox.Item
+                key={item.slug}
+                item={item}
+                className="combo-item relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+              >
+                <span className="block truncate">{item.title}</span>
+                <span className="check-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                  <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                </span>
+              </Combobox.Item>
+            ))}
+          </Combobox.Content>
+        </Combobox.Root>
+      </div>
+
+      <div className="rounded-lg bg-white p-4 shadow">
+        <div className="border-b border-gray-200 pb-4">
+          <h3 className="text-lg font-bold text-gray-900">Display Settings</h3>
+        </div>
+        <div className="space-y-4 pt-4">
+          <div>
+            <ColorPickerCombo
+              title="Background Color"
+              defaultColor={bgColor}
+              onColorChange={(color: string) => setBgColor(color)}
+              config={config!}
+              allowNull={true}
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              Set a background color for the featured article section
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {selectedStory && (
+        <div className="rounded-lg bg-white p-4 shadow">
+          <h3 className="border-b border-gray-200 pb-2 text-lg font-bold">
+            Live Preview
+          </h3>
+          {renderPreview()}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FeaturedArticleSetup;

package/templates/src/components/codehooks/ListContent.astro

@@ -22,6 +22,8 @@ try {
     topics: '',
     excludedIds: '',
     pageSize: 10,
+    title: '',
+    bgColor: '',
   };
 }
 
@@ -30,6 +32,8 @@ const excludedIdsArray = parsedOptions.excludedIds
   : [];
 const topicsArray = parsedOptions.topics ? parsedOptions.topics.split(',') : [];
 const pageSize = parseInt(parsedOptions.pageSize || '10');
+const title = parsedOptions.title;
+const bgColor = parsedOptions.bgColor || '';
 
 // Filter for valid stories to display
 const validPages = contentMap.filter(
@@ -52,50 +56,25 @@ if (topicsArray.length > 0) {
   filteredStories = validPages;
 }
 
-// The server now ONLY sorts by recent. 'Popular' sort is handled on the client.
-const sortedByRecent = [...filteredStories].sort((a, b) => {
+// Simple sort by date - most recent first
+const sortedStories = [...filteredStories].sort((a, b) => {
   const dateA = a.changed ? new Date(a.changed).getTime() : 0;
   const dateB = b.changed ? new Date(b.changed).getTime() : 0;
   return dateB - dateA;
 });
 
-// The initial display will always be the most recent stories.
-const initialStories = sortedByRecent.slice(0, pageSize);
-const totalPages = Math.ceil(sortedByRecent.length / pageSize);
-
-// Date formatting helper
-function formatDate(dateString: string | null): string {
-  if (!dateString) return 'Unknown';
-  const date = new Date(dateString);
-  return new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  }).format(date);
-}
+// The initial display
+const initialStories = sortedStories.slice(0, pageSize);
+const totalPages = Math.ceil(sortedStories.length / pageSize);
 ---
 
-<div class="mx-auto max-w-7xl p-4 py-12">
-  <div
-    id="toggle-container"
-    class="mb-4 flex justify-center"
-    style="display: none;"
-  >
-    <div class="inline-flex rounded-md shadow-sm" role="group">
-      <button
-        id="recent-toggle"
-        class="rounded-l-md border border-cyan-600 bg-cyan-600 px-4 py-2 text-sm font-bold text-white transition-colors"
-      >
-        Newest
-      </button>
-      <button
-        id="popular-toggle"
-        class="rounded-r-md border border-cyan-600 bg-white px-4 py-2 text-sm font-bold text-gray-800 transition-colors hover:bg-gray-100"
-      >
-        Most Active
-      </button>
-    </div>
-  </div>
+<div
+  class="mx-auto max-w-7xl p-4 py-24"
+  style={bgColor ? `background-color: ${bgColor}` : ''}
+>
+  <h2 class="mb-8 text-center text-3xl font-bold text-gray-900">
+    {title || `Recent Articles`}
+  </h2>
 
   {
     initialStories.length === 0 && (
@@ -113,9 +92,10 @@ function formatDate(dateString: string | null): string {
             {story.thumbSrc && (
               <img
                 src={story.thumbSrc}
+                srcset={story.thumbSrcSet}
                 alt={story.title}
-                style="width: 100px; height: auto;"
-                class="rounded-md"
+                style="aspect-ratio: 1200 / 630;"
+                class="w-36 flex-shrink-0 rounded-md md:w-48 xl:w-72"
               />
             )}
             <div class="flex-1">
@@ -128,7 +108,7 @@ function formatDate(dateString: string | null): string {
                 </p>
               )}
               {story.topics && story.topics.length > 0 && (
-                <div class="mt-1 flex flex-wrap gap-1">
+                <div class="mt-4 flex flex-wrap gap-1">
                   {story.topics.slice(0, 3).map((topic: string) => (
                     <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
                       {topic}
@@ -136,9 +116,6 @@ function formatDate(dateString: string | null): string {
                   ))}
                 </div>
               )}
-              <p class="mt-1 text-xs text-gray-600">
-                {story.changed && formatDate(story.changed)}
-              </p>
             </div>
           </div>
         </a>
@@ -157,9 +134,10 @@ function formatDate(dateString: string | null): string {
                 {story.thumbSrc && (
                   <img
                     src={story.thumbSrc}
+                    srcset={story.thumbSrcSet}
                     alt={story.title}
-                    style="width: 100px; height: auto;"
-                    class="rounded-md"
+                    style="aspect-ratio: 1200 / 630;"
+                    class="w-36 flex-shrink-0 rounded-md md:w-48 xl:w-72"
                   />
                 )}
                 <div class="flex-1">
@@ -180,9 +158,6 @@ function formatDate(dateString: string | null): string {
                       ))}
                     </div>
                   )}
-                  <p class="mt-1 text-xs text-gray-600">
-                    {story.changed && formatDate(story.changed)}
-                  </p>
                 </div>
               </div>
             </a>
@@ -199,9 +174,10 @@ function formatDate(dateString: string | null): string {
                 {story.thumbSrc && (
                   <img
                     src={story.thumbSrc}
+                    srcset={story.thumbSrcSet}
                     alt={story.title}
-                    style="width: 100px; height: auto;"
-                    class="rounded-md"
+                    style="aspect-ratio: 1200 / 630;"
+                    class="w-36 flex-shrink-0 rounded-md md:w-48 xl:w-72"
                   />
                 )}
                 <div class="flex-1">
@@ -222,9 +198,6 @@ function formatDate(dateString: string | null): string {
                       ))}
                     </div>
                   )}
-                  <p class="mt-1 text-xs text-gray-600">
-                    {story.changed && formatDate(story.changed)}
-                  </p>
                 </div>
               </div>
             </a>
@@ -264,100 +237,30 @@ function formatDate(dateString: string | null): string {
 <script
   is:inline
   define:vars={{
-    sortedByRecent,
+    sortedStories,
     pageSize,
   }}
 >
   // === CLIENT-SIDE STATE ===
   let currentPage = 1;
-  let currentMode = 'recent'; // Default mode is always 'recent' on initial load
-  let sortedByPopular = []; // This will be populated by the fetch function
 
   // === DOM ELEMENTS ===
   const mobileContainer = document.getElementById('mobile-content');
   const desktopContainer = document.getElementById('desktop-content');
-  const toggleContainer = document.getElementById('toggle-container');
-  const recentToggle = document.getElementById('recent-toggle');
-  const popularToggle = document.getElementById('popular-toggle');
   const prevPageBtn = document.getElementById('prev-page');
   const nextPageBtn = document.getElementById('next-page');
 
-  // === DATA FETCHING & PROCESSING ===
-  async function fetchHotContent() {
-    let retryCount = 0;
-    const maxRetries = 2;
-
-    const attemptFetch = async () => {
-      try {
-        const goBackend =
-          window.location.protocol + '//' + window.location.host;
-        const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
-        const response = await fetch(
-          `${goBackend}/api/v1/analytics/content-summary`,
-          {
-            method: 'GET',
-            headers: {
-              'Content-Type': 'application/json',
-              'X-Tenant-ID': tenantId,
-            },
-          }
-        );
-
-        if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
-
-        const data = await response.json();
-
-        if (data.hotContent && data.hotContent.length > 0) {
-          // On success, create the popular sort array
-          const viewsMap = new Map(
-            data.hotContent.map((item) => [item.id, item.totalEvents])
-          );
-          sortedByPopular = [...sortedByRecent].sort((a, b) => {
-            const aViews = viewsMap.get(a.id) || 0;
-            const bViews = viewsMap.get(b.id) || 0;
-            if (bViews === aViews) {
-              const dateA = a.changed ? new Date(a.changed).getTime() : 0;
-              const dateB = b.changed ? new Date(b.changed).getTime() : 0;
-              return dateB - dateA;
-            }
-            return bViews - aViews;
-          });
-
-          // Show the toggle buttons
-          if (toggleContainer) toggleContainer.style.display = 'flex';
-        } else if (retryCount < maxRetries) {
-          retryCount++;
-          setTimeout(attemptFetch, retryCount * 3000);
-        }
-      } catch (error) {
-        console.warn('Could not fetch hot content:', error);
-        if (retryCount < maxRetries) {
-          retryCount++;
-          setTimeout(attemptFetch, retryCount * 3000);
-        }
-      }
-    };
-    await attemptFetch();
-  }
-
   // === DOM UPDATING ===
   function createStoryItem(story) {
-    const formattedDate = story.changed
-      ? new Intl.DateTimeFormat('en-US', {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric',
-        }).format(new Date(story.changed))
-      : 'Unknown';
     const imageHtml = story.thumbSrc
-      ? `<img src="${story.thumbSrc}" alt="${story.title}" style="width: 100px; height: auto;" class="rounded-md">`
+      ? `<img src="${story.thumbSrc}" srcset="${story.thumbSrcSet || ''}" alt="${story.title}" style="aspect-ratio: 1200 / 630;" class="w-36 flex-shrink-0 rounded-md md:w-48 xl:w-72">`
       : '';
     const descriptionHtml = story.description
       ? `<p class="text-sm text-gray-800 line-clamp-2">${story.description}</p>`
       : '';
     const topicsHtml =
       story.topics && story.topics.length > 0
-        ? `<div class="mt-1 flex flex-wrap gap-1">${story.topics
+        ? `<div class="mt-4 flex flex-wrap gap-1">${story.topics
             .slice(0, 3)
             .map(
               (topic) =>
@@ -374,7 +277,6 @@ function formatDate(dateString: string | null): string {
             <h3 class="text-lg font-bold text-black transition-colors group-hover:text-gray-900">${story.title}</h3>
             ${descriptionHtml}
             ${topicsHtml}
-            <p class="mt-1 text-xs text-gray-600">${formattedDate}</p>
           </div>
         </div>
       </a>
@@ -382,13 +284,10 @@ function formatDate(dateString: string | null): string {
   }
 
   function updateDisplayedContent() {
-    const currentData =
-      currentMode === 'recent' ? sortedByRecent : sortedByPopular;
-    const totalPages = Math.ceil(currentData.length / pageSize);
-
+    const totalPages = Math.ceil(sortedStories.length / pageSize);
     const startIdx = (currentPage - 1) * pageSize;
     const endIdx = startIdx + pageSize;
-    const pageData = currentData.slice(startIdx, endIdx);
+    const pageData = sortedStories.slice(startIdx, endIdx);
 
     if (mobileContainer)
       mobileContainer.innerHTML = pageData.map(createStoryItem).join('');
@@ -413,28 +312,6 @@ function formatDate(dateString: string | null): string {
   }
 
   // === EVENT LISTENERS ===
-  function switchMode(newMode) {
-    if (currentMode === newMode) return;
-    currentMode = newMode;
-    currentPage = 1;
-
-    recentToggle.classList.toggle('bg-cyan-600', newMode === 'recent');
-    recentToggle.classList.toggle('text-white', newMode === 'recent');
-    recentToggle.classList.toggle('bg-white', newMode !== 'recent');
-    recentToggle.classList.toggle('text-gray-800', newMode !== 'recent');
-
-    popularToggle.classList.toggle('bg-cyan-600', newMode === 'popular');
-    popularToggle.classList.toggle('text-white', newMode === 'popular');
-    popularToggle.classList.toggle('bg-white', newMode !== 'popular');
-    popularToggle.classList.toggle('text-gray-800', newMode !== 'popular');
-
-    updateDisplayedContent();
-  }
-
-  if (recentToggle)
-    recentToggle.addEventListener('click', () => switchMode('recent'));
-  if (popularToggle)
-    popularToggle.addEventListener('click', () => switchMode('popular'));
   if (prevPageBtn)
     prevPageBtn.addEventListener('click', () => {
       if (currentPage > 1) {
@@ -444,17 +321,10 @@ function formatDate(dateString: string | null): string {
     });
   if (nextPageBtn)
     nextPageBtn.addEventListener('click', () => {
-      const currentData =
-        currentMode === 'recent' ? sortedByRecent : sortedByPopular;
-      const totalPages = Math.ceil(currentData.length / pageSize);
+      const totalPages = Math.ceil(sortedStories.length / pageSize);
       if (currentPage < totalPages) {
         currentPage++;
         updateDisplayedContent();
       }
     });
-
-  // === INITIALIZATION ===
-  document.addEventListener('DOMContentLoaded', () => {
-    fetchHotContent();
-  });
 </script>