astro-tractstack 2.0.0-rc.8 → 2.0.0

package/templates/src/components/Menu.tsx

@@ -2,7 +2,8 @@ import { Menu } from '@ark-ui/react';
 import { Portal } from '@ark-ui/react/portal';
 import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';
 import { lispLexer } from '@/utils/actions/lispLexer';
-import { preParseAction } from '@/utils/actions//preParse_Action';
+import { preParseAction } from '@/utils/actions/preParse_Action';
+import type { LispToken } from '@/types/compositorTypes';
 
 // CSS to style the menu items with hover and selection states
 const menuStyles = `
@@ -46,9 +47,10 @@ interface MenuDatum {
   optionsPayload: MenuLink[];
 }
 
-interface MenuLinkDatum extends MenuLink {
-  to: string;
-  internal: boolean;
+interface ProcessedMenuLinkDatum extends MenuLink {
+  renderAs: 'a' | 'button' | 'span';
+  href?: string;
+  htmxVals?: string;
 }
 
 interface MenuProps {
@@ -62,7 +64,75 @@ const MenuComponent = (props: MenuProps) => {
   const { payload, slug, isContext, brandConfig } = props;
   const thisPayload = payload.optionsPayload;
 
-  // Process featured and additional links
+  function processMenuLink(e: MenuLink): ProcessedMenuLinkDatum {
+    const item = { ...e } as ProcessedMenuLinkDatum;
+    const actionLisp = item.actionLisp?.trim();
+
+    if (!actionLisp) {
+      item.renderAs = 'span';
+      return item;
+    }
+
+    try {
+      if (actionLisp.startsWith('(goto')) {
+        const tokens = lispLexer(actionLisp);
+        const to = preParseAction(tokens, slug, isContext, brandConfig);
+        item.renderAs = 'a';
+        item.href = to || '#';
+        return item;
+      }
+
+      const [lispTokens] = lispLexer(actionLisp);
+
+      if (lispTokens && lispTokens.length > 0) {
+        // Deconstruct the nested structure: e.g., ['declare', ['HotLead', 'BELIEVES_YES']]
+        const tokens = lispTokens[0] as LispToken[];
+
+        if (
+          (tokens[0] === 'declare' || tokens[0] === 'identifyAs') &&
+          Array.isArray(tokens[1]) &&
+          tokens[1].length >= 2
+        ) {
+          const command = tokens[0] as string;
+          const params = tokens[1] as (string | number)[];
+          const beliefId = params[0] as string;
+          const value = params[1] as string;
+
+          let hxValsMap: { [key: string]: string } = {};
+
+          if (command === 'declare') {
+            hxValsMap = {
+              beliefId: beliefId,
+              beliefType: 'Belief',
+              beliefValue: value,
+            };
+          } else if (command === 'identifyAs') {
+            hxValsMap = {
+              beliefId: beliefId,
+              beliefType: 'Belief',
+              beliefVerb: 'IDENTIFY_AS',
+              beliefObject: value,
+            };
+          }
+
+          if (Object.keys(hxValsMap).length > 0) {
+            item.renderAs = 'button';
+            item.htmxVals = JSON.stringify(hxValsMap);
+            return item;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(
+        `Failed to process menu item for action: ${actionLisp}`,
+        error
+      );
+    }
+
+    item.renderAs = 'span';
+    return item;
+  }
+
   const featuredLinks = thisPayload
     .filter((e: MenuLink) => e.featured)
     .map(processMenuLink);
@@ -70,19 +140,46 @@ const MenuComponent = (props: MenuProps) => {
     .filter((e: MenuLink) => !e.featured)
     .map(processMenuLink);
 
-  // Helper function to process menu links
-  function processMenuLink(e: MenuLink): MenuLinkDatum {
-    const item = { ...e } as MenuLinkDatum;
-    const thisPayload = lispLexer(e.actionLisp);
-    const to = preParseAction(thisPayload, slug, isContext, brandConfig);
-    if (typeof to === `string`) {
-      item.to = to;
-      item.internal = true;
-    } else if (typeof to === `object`) {
-      item.to = to[0];
+  const InteractiveMenuItem = ({ item }: { item: ProcessedMenuLinkDatum }) => {
+    if (item.renderAs === 'button') {
+      return (
+        <button
+          type="button"
+          className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
+          title={item.description}
+          aria-label={`${item.name} - ${item.description}`}
+          hx-post="/api/v1/state"
+          hx-swap="none"
+          hx-vals={item.htmxVals}
+        >
+          {item.name}
+        </button>
+      );
+    }
+
+    if (item.renderAs === 'a') {
+      return (
+        <a
+          href={item.href}
+          className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
+          title={item.description}
+          aria-label={`${item.name} - ${item.description}`}
+        >
+          {item.name}
+        </a>
+      );
     }
-    return item;
-  }
+
+    return (
+      <span
+        className="text-mydarkgrey block text-2xl font-bold leading-6 opacity-50"
+        title={item.description}
+        aria-label={`${item.name} - ${item.description}`}
+      >
+        {item.name}
+      </span>
+    );
+  };
 
   return (
     <>
@@ -90,16 +187,9 @@ const MenuComponent = (props: MenuProps) => {
 
       {/* Desktop Navigation */}
       <nav className="font-action ml-6 hidden flex-wrap items-center justify-end space-x-3 md:flex md:space-x-6">
-        {featuredLinks.map((item: MenuLinkDatum) => (
+        {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
           <div key={item.name} className="relative py-1.5">
-            <a
-              href={item.to}
-              className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
-              title={item.description}
-              aria-label={`${item.name} - ${item.description}`}
-            >
-              {item.name}
-            </a>
+            <InteractiveMenuItem item={item} />
           </div>
         ))}
       </nav>
@@ -122,21 +212,42 @@ const MenuComponent = (props: MenuProps) => {
                   <div className="text-md ring-mydarkgrey/5 flex-auto overflow-hidden rounded-3xl bg-white p-4 leading-6 shadow-lg ring-1">
                     {/* Featured Links Section */}
                     <div className="px-8">
-                      {featuredLinks.map((item: MenuLinkDatum) => (
+                      {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
                         <Menu.Item
                           key={item.name}
                           value={item.name}
                           className="menu-item hover:bg-mygreen/20 group relative flex gap-x-6 rounded-lg p-4"
                         >
                           <div>
-                            <a
-                              href={item.to}
-                              className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
-                              aria-label={`${item.name} - ${item.description}`}
-                            >
-                              {item.name}
-                              <span className="absolute inset-0" />
-                            </a>
+                            {item.renderAs === 'button' ? (
+                              <button
+                                type="button"
+                                className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
+                                aria-label={`${item.name} - ${item.description}`}
+                                hx-post="/api/v1/state"
+                                hx-swap="none"
+                                hx-vals={item.htmxVals}
+                              >
+                                {item.name}
+                                <span className="absolute inset-0" />
+                              </button>
+                            ) : item.renderAs === 'a' ? (
+                              <a
+                                href={item.href}
+                                className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
+                                aria-label={`${item.name} - ${item.description}`}
+                              >
+                                {item.name}
+                                <span className="absolute inset-0" />
+                              </a>
+                            ) : (
+                              <span
+                                className="font-action text-myblack text-xl opacity-50"
+                                aria-label={`${item.name} - ${item.description}`}
+                              >
+                                {item.name}
+                              </span>
+                            )}
                             <p className="text-mydarkgrey mt-1">
                               {item.description}
                             </p>
@@ -161,24 +272,49 @@ const MenuComponent = (props: MenuProps) => {
                           className="mt-6 space-y-6"
                           aria-labelledby="additional-links-heading"
                         >
-                          {additionalLinks.map((item: MenuLinkDatum) => (
-                            <li key={item.name} className="relative">
-                              <Menu.Item
-                                value={item.name}
-                                className="menu-item block w-full text-left"
-                              >
-                                <a
-                                  href={item.to}
-                                  className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
-                                  title={item.description}
-                                  aria-label={`${item.name} - ${item.description}`}
+                          {additionalLinks.map(
+                            (item: ProcessedMenuLinkDatum) => (
+                              <li key={item.name} className="relative">
+                                <Menu.Item
+                                  value={item.name}
+                                  className="menu-item block w-full text-left"
                                 >
-                                  {item.name}
-                                  <span className="absolute inset-0" />
-                                </a>
-                              </Menu.Item>
-                            </li>
-                          ))}
+                                  {item.renderAs === 'button' ? (
+                                    <button
+                                      type="button"
+                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
+                                      title={item.description}
+                                      aria-label={`${item.name} - ${item.description}`}
+                                      hx-post="/api/v1/state"
+                                      hx-swap="none"
+                                      hx-vals={item.htmxVals}
+                                    >
+                                      {item.name}
+                                      <span className="absolute inset-0" />
+                                    </button>
+                                  ) : item.renderAs === 'a' ? (
+                                    <a
+                                      href={item.href}
+                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
+                                      title={item.description}
+                                      aria-label={`${item.name} - ${item.description}`}
+                                    >
+                                      {item.name}
+                                      <span className="absolute inset-0" />
+                                    </a>
+                                  ) : (
+                                    <span
+                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 opacity-50"
+                                      title={item.description}
+                                      aria-label={`${item.name} - ${item.description}`}
+                                    >
+                                      {item.name}
+                                    </span>
+                                  )}
+                                </Menu.Item>
+                              </li>
+                            )
+                          )}
                         </ul>
                       </div>
                     )}

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

@@ -20,8 +20,8 @@ import type {
 
 interface BunnyVideoSetupProps {
   nodeId: string;
-  params?: any;
-  config?: BrandConfig;
+  params: any;
+  config: BrandConfig;
 }
 
 interface Chapter extends VideoMoment {

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

@@ -45,11 +45,13 @@ interface ContentMapItem {
 interface EpinetDurationSelectorProps {
   fullContentMap?: ContentMapItem[];
   isLoading?: boolean;
+  hourlyNodeActivity?: any;
 }
 
 const EpinetDurationSelector = ({
   fullContentMap,
   isLoading,
+  hourlyNodeActivity,
 }: EpinetDurationSelectorProps = {}) => {
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
@@ -185,22 +187,12 @@ const EpinetDurationSelector = ({
     const startUTCTime = createUTCDateTime(startDate, localFilters.startHour);
     const endUTCTime = createUTCDateTime(endDate, localFilters.endHour);
 
-    if (endUTCTime <= startUTCTime) {
+    if (endUTCTime < startUTCTime) {
       setErrorMessage('End time must be after start time.');
       return;
     }
 
     const nowUTC = new Date();
-    const maxPastTime = new Date(
-      nowUTC.getTime() - MAX_ANALYTICS_HOURS * 60 * 60 * 1000
-    );
-
-    if (startUTCTime < maxPastTime) {
-      setErrorMessage(
-        `Start time cannot be more than ${MAX_ANALYTICS_HOURS} hours in the past.`
-      );
-      return;
-    }
 
     if (endUTCTime > nowUTC) {
       setErrorMessage('End time cannot be in the future.');
@@ -549,7 +541,7 @@ const EpinetDurationSelector = ({
 
   return (
     <>
-      <div className="space-y-4">
+      <div className="space-y-4 overflow-visible">
         {$epinetCustomFilters.enabled && (
           <div
             className={`space-y-4 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50 p-4`}
@@ -865,7 +857,10 @@ const EpinetDurationSelector = ({
                           </Select.Control>
                           <Portal>
                             <Select.Positioner>
-                              <Select.Content className="z-10 mt-2 max-h-96 w-[var(--trigger-width)] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                              <Select.Content
+                                className="z-10 mt-2 max-h-96 overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                                style={{ width: 'var(--trigger-width)' }}
+                              >
                                 {paginatedUserCounts.length > 0 ? (
                                   [
                                     <Select.Item
@@ -930,6 +925,7 @@ const EpinetDurationSelector = ({
               <EpinetTableView
                 fullContentMap={fullContentMap || []}
                 isLoading={isLoading}
+                hourlyNodeActivity={hourlyNodeActivity}
               />
             )}
           </div>

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

@@ -53,13 +53,17 @@ interface ContentMapItem {
   type: string;
 }
 
+interface Props {
+  fullContentMap: ContentMapItem[];
+  isLoading?: boolean;
+  hourlyNodeActivity?: any;
+}
+
 const EpinetTableView = ({
   fullContentMap,
   isLoading = false,
-}: {
-  fullContentMap: ContentMapItem[];
-  isLoading?: boolean;
-}) => {
+  hourlyNodeActivity,
+}: Props) => {
   const $epinetCustomFilters = useStore(epinetCustomFilters);
   const [currentDay, setCurrentDay] = useState<string | null>(null);
   const [availableDays, setAvailableDays] = useState<string[]>([]);
@@ -174,7 +178,7 @@ const EpinetTableView = ({
   };
 
   useEffect(() => {
-    const hourlyActivity = $epinetCustomFilters.hourlyNodeActivity || {};
+    const hourlyActivity = hourlyNodeActivity || {};
     const hourKeys = Object.keys(hourlyActivity);
 
     if (hourKeys.length === 0) {
@@ -192,7 +196,7 @@ const EpinetTableView = ({
     setAvailableDays(days);
     setCurrentDay(days[0] || null);
     setCurrentDayIndex(0);
-  }, [$epinetCustomFilters.hourlyNodeActivity]);
+  }, [hourlyNodeActivity]);
 
   const navigateDay = (direction: 'prev' | 'next') => {
     const newIndex =
@@ -213,7 +217,7 @@ const EpinetTableView = ({
     if (!currentDay)
       return { data: [], dailyTotal: 0, dailyVisitors: 0, maxHourlyTotal: 0 };
 
-    const hourlyActivity = $epinetCustomFilters.hourlyNodeActivity || {};
+    const hourlyActivity = hourlyNodeActivity || {};
     const result: HourData[] = [];
     let emptyRangeStart: number | null = null;
     let dailyTotal = 0;

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

@@ -414,6 +414,7 @@ const EpinetWrapper = ({
           <EpinetDurationSelector
             fullContentMap={fullContentMap}
             isLoading={isLoading || status === 'loading'}
+            hourlyNodeActivity={$epinetCustomFilters.hourlyNodeActivity}
           />
         </div>
       </ErrorBoundary>

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

@@ -0,0 +1,105 @@
+---
+import type { FullContentMapItem } from '@/types/tractstack';
+
+export interface Props {
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+  contentMap: FullContentMapItem[];
+}
+
+const { options, contentMap } = Astro.props;
+
+let parsedOptions;
+try {
+  parsedOptions = JSON.parse(options?.params?.options || '{}');
+} catch (e) {
+  console.error('Invalid options for FeaturedArticle', e);
+  parsedOptions = { slug: '' };
+}
+
+const slug = parsedOptions.slug || '';
+
+const featuredStory = contentMap.find(
+  (item: FullContentMapItem) =>
+    item.slug === slug &&
+    item.type === 'StoryFragment' &&
+    item.description &&
+    item.panes &&
+    item.panes.length > 0 &&
+    item.thumbSrc
+);
+const bgColor = parsedOptions.bgColor || '';
+---
+
+{
+  featuredStory ? (
+    <div
+      class="mx-auto w-full max-w-7xl px-8 py-12"
+      style={bgColor ? `background-color: ${bgColor}` : ''}
+    >
+      <div class="grid grid-cols-1 items-center md:grid-cols-2 md:gap-y-12">
+        <div class="w-full">
+          <a href={`/${featuredStory.slug}`} class="block">
+            <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>
+
+        <div class="w-full py-6">
+          <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>
+  )
+}