astro-tractstack 2.0.0-rc.53 → 2.0.0-rc.55

package/dist/index.js

@@ -549,9 +549,9 @@ async function w(t, e, c) {
     },
     {
       src: t(
-        "../templates/src/components/compositor/preview/FeaturedContentPreview.tsx"
+        "../templates/src/components/compositor/preview/FeaturedArticlePreview.tsx"
       ),
-      dest: "src/components/compositor/preview/FeaturedContentPreview.tsx"
+      dest: "src/components/compositor/preview/FeaturedArticlePreview.tsx"
     },
     // Server side stores
     {
@@ -1216,17 +1216,21 @@ async function w(t, e, c) {
       src: t("../templates/src/components/codehooks/SankeyDiagram.tsx"),
       dest: "src/components/codehooks/SankeyDiagram.tsx"
     },
+    {
+      src: t("../templates/src/components/codehooks/SearchWidget.tsx"),
+      dest: "src/components/codehooks/SearchWidget.tsx"
+    },
     {
       src: t(
-        "../templates/src/components/codehooks/FeaturedContent.astro"
+        "../templates/src/components/codehooks/FeaturedArticle.astro"
       ),
-      dest: "src/components/codehooks/FeaturedContent.astro"
+      dest: "src/components/codehooks/FeaturedArticle.astro"
     },
     {
       src: t(
-        "../templates/src/components/codehooks/FeaturedContentSetup.tsx"
+        "../templates/src/components/codehooks/FeaturedArticleSetup.tsx"
       ),
-      dest: "src/components/codehooks/FeaturedContentSetup.tsx"
+      dest: "src/components/codehooks/FeaturedArticleSetup.tsx"
     },
     {
       src: t("../templates/src/components/codehooks/ListContent.astro"),
@@ -2087,7 +2091,7 @@ export default function Placeholder() {
 }` : t.endsWith(".ts") ? `// TractStack placeholder utility
 export const placeholder = "${t}";` : `# TractStack placeholder: ${t}`;
 }
-function S(t = {}) {
+function C(t = {}) {
   const { resolve: e } = b(import.meta.url);
   return {
     name: "astro-tractstack",
@@ -2169,5 +2173,5 @@ function S(t = {}) {
   };
 }
 export {
-  S as default
+  C as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.53",
+  "version": "2.0.0-rc.55",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/custom/minimal/CodeHook.astro

@@ -1,6 +1,7 @@
 ---
-import FeaturedContent from '@/components/codehooks/FeaturedContent.astro';
+import FeaturedArticle from '@/components/codehooks/FeaturedArticle.astro';
 import ListContent from '@/components/codehooks/ListContent.astro';
+import SearchWidget from '@/components/codehooks/SearchWidget.tsx';
 import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
 import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
 import type { FullContentMapItem } from '@/types/tractstack';
@@ -21,8 +22,10 @@ export interface Props {
 const { target, options, fullContentMap /*, resourcesPayload */ } = Astro.props;
 
 export const components = {
+  'featured-article': true,
   'featured-content': true,
   'list-content': true,
+  'search-widget': true,
   'bunny-video': import.meta.env.PUBLIC_ENABLE_BUNNY === 'true',
   epinet: true,
   // "custom-hero": true,  // Uncomment when you create CustomHero.astro
@@ -32,8 +35,10 @@ export const components = {
 {
   target === 'list-content' ? (
     <ListContent options={options} contentMap={fullContentMap} />
-  ) : target === 'featured-content' ? (
-    <FeaturedContent options={options} contentMap={fullContentMap} />
+  ) : target === 'featured-article' ? (
+    <FeaturedArticle options={options} contentMap={fullContentMap} />
+  ) : target === 'search-widget' ? (
+    <SearchWidget fullContentMap={fullContentMap} client:load />
   ) : target === 'bunny-video' && import.meta.env.PUBLIC_ENABLE_BUNNY ? (
     <BunnyVideoWrapper options={options} />
   ) : target === 'epinet' ? (
@@ -44,9 +49,6 @@ export const components = {
   ) : (
     <div class="rounded-lg bg-gray-50 p-8 text-center">
       <p class="text-gray-600">CodeHook target "{target}" not found</p>
-      <p class="mt-2 text-sm text-gray-500">
-        Available: list-content, featured-content, bunny-video, epinet
-      </p>
     </div>
   )
 }

package/templates/custom/with-examples/CodeHook.astro

@@ -1,6 +1,7 @@
 ---
 import CustomHero from './CustomHero.astro';
-import FeaturedContent from '@/components/codehooks/FeaturedContent.astro';
+import SearchWidget from '@/components/codehooks/SearchWidget.tsx';
+import FeaturedArticle from '@/components/codehooks/FeaturedArticle.astro';
 import ListContent from '@/components/codehooks/ListContent.astro';
 import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
 import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
@@ -22,8 +23,9 @@ const { target, options, fullContentMap /*, resourcesPayload */ } = Astro.props;
 
 export const components = {
   'custom-hero': true,
-  'featured-content': true,
+  'featured-article': true,
   'list-content': true,
+  'search-widget': true,
   'bunny-video': import.meta.env.PUBLIC_ENABLE_BUNNY === 'true',
   epinet: true,
 };
@@ -32,8 +34,10 @@ export const components = {
 {
   target === 'list-content' ? (
     <ListContent options={options} contentMap={fullContentMap} />
-  ) : target === 'featured-content' ? (
-    <FeaturedContent options={options} contentMap={fullContentMap} />
+  ) : target === 'featured-article' ? (
+    <FeaturedArticle options={options} contentMap={fullContentMap} />
+  ) : target === 'search-widget' ? (
+    <SearchWidget fullContentMap={fullContentMap} client:load />
   ) : target === 'bunny-video' && import.meta.env.PUBLIC_ENABLE_BUNNY ? (
     <BunnyVideoWrapper options={options} />
   ) : target === 'custom-hero' ? (

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

@@ -0,0 +1,109 @@
+---
+import type { FullContentMapItem } from '@/types/tractstack';
+
+export interface Props {
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+  contentMap: FullContentMapItem[];
+}
+
+const { options, contentMap } = Astro.props;
+
+// Parse component options
+let parsedOptions;
+try {
+  parsedOptions = JSON.parse(options?.params?.options || '{}');
+} catch (e) {
+  console.error('Invalid options for FeaturedArticle', e);
+  parsedOptions = { slug: '' };
+}
+
+const slug = parsedOptions.slug || '';
+
+// Find the featured story from the contentMap
+// It must have a description, panes, AND a thumbnail image to be valid
+const featuredStory = contentMap.find(
+  (item: FullContentMapItem) =>
+    item.slug === slug &&
+    item.type === 'StoryFragment' &&
+    item.description &&
+    item.panes &&
+    item.panes.length > 0 &&
+    item.thumbSrc
+);
+---
+
+{
+  featuredStory ? (
+    <div class="mx-auto w-full max-w-7xl px-8 py-24">
+      {/* A robust grid layout that ensures spacing and alignment */}
+      <div class="grid grid-cols-1 items-center gap-x-16 gap-y-12 md:grid-cols-2">
+        {/* --- TEXT COLUMN --- */}
+        <div class="w-full">
+          <a href={`/${featuredStory.slug}`} class="block">
+            {/* Constrained width for readability */}
+            <div class="max-w-lg pr-12">
+              <p class="font-action mb-4 text-lg font-bold uppercase text-gray-500">
+                Featured Article
+              </p>
+              <div class="space-y-6">
+                <h2 class="py-2 text-3xl font-bold leading-snug text-black transition-colors md:text-4xl xl:text-5xl">
+                  {featuredStory.title}
+                </h2>
+                {featuredStory.description && (
+                  <p class="text-sm leading-relaxed text-gray-700 md:text-lg xl:text-xl">
+                    {featuredStory.description}
+                  </p>
+                )}
+                {featuredStory.topics && featuredStory.topics.length > 0 && (
+                  <div class="flex flex-wrap gap-2 pb-6 pt-2">
+                    {featuredStory.topics.map((topic: string) => (
+                      <span class="inline-flex items-center rounded-full bg-cyan-100 px-3 py-1 text-sm font-bold text-cyan-800">
+                        {topic}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </a>
+        </div>
+
+        {/* --- IMAGE COLUMN --- */}
+        <div class="w-full py-6">
+          {/* Max width constraint on the image container */}
+          <div class="mx-auto max-w-2xl">
+            <a href={`/${featuredStory.slug}`}>
+              <img
+                src={featuredStory.thumbSrc}
+                srcset={featuredStory.thumbSrcSet}
+                sizes="(min-width: 768px) 50vw, 100vw"
+                alt={`Preview of ${featuredStory.title}`}
+                class="w-full rounded-lg shadow-lg"
+                style="aspect-ratio: 1200 / 630;"
+              />
+            </a>
+          </div>
+        </div>
+        <div class="md:py-6">
+          <a
+            href={`/${featuredStory.slug}`}
+            class="inline-block w-fit rounded-md bg-gray-100 px-5 py-3 text-sm font-bold text-gray-900 transition-colors hover:bg-gray-200"
+          >
+            Read More
+          </a>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div class="mx-auto max-w-7xl px-4 py-16">
+      <p class="italic text-cyan-600">
+        Featured article not found or is missing required content (description,
+        panes, thumbnail).
+      </p>
+    </div>
+  )
+}

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

@@ -0,0 +1,283 @@
+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 type { PaneNode } from '@/types/compositorTypes';
+
+interface FeaturedArticleSetupProps {
+  params?: Record<string, string>;
+  nodeId: string;
+}
+
+const comboboxItemStyles = `
+  .combo-item .check-indicator {
+    display: none;
+  }
+  .combo-item[data-state="checked"] .check-indicator {
+    display: flex;
+  }
+`;
+
+const FeaturedArticleSetup = ({
+  params,
+  nodeId,
+}: 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 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 }),
+        },
+        isChanged: true,
+      };
+      ctx.modifyNodes([updatedNode]);
+    }
+  };
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    const timeoutId = setTimeout(updatePaneNode, 500);
+    return () => clearTimeout(timeoutId);
+  }, [selectedSlug]);
+
+  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>
+
+      {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;