astro-tractstack 2.0.0-rc.40 → 2.0.0-rc.42

package/package.json

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

package/templates/src/components/Footer.astro

@@ -153,7 +153,7 @@ const createdDate = created ? new Date(created) : new Date();
     <div
       class="text-myblue xs:flex-row my-2 flex flex-col items-center justify-center"
     >
-      <div class="px-12 text-center text-2xl">
+      <div class="px-4 text-center text-2xl md:px-12">
         Copyright &#169; {createdDate.getFullYear()}{
           createdDate.getFullYear() !== new Date().getFullYear()
             ? `-${new Date().getFullYear()}`
@@ -164,9 +164,9 @@ const createdDate = created ? new Date(created) : new Date();
       </div>
     </div>
     <div
-      class="text-myblue xs:flex-row my-2 flex flex-col items-center justify-center"
+      class="text-myblue my-2 flex flex-row items-center justify-center md:flex-col"
     >
-      <div class="px-12 text-center text-lg">
+      <div class="px-4 text-center text-lg md:px-12">
         pressed with
         <a
           href="https://tractstack.com/?utm_source=tractstack&utm_medium=www&utm_campaign=community"

package/templates/src/components/search/SearchModal.tsx

@@ -1,4 +1,10 @@
-import { useState, useEffect, useRef } from 'react';
+import {
+  useState,
+  useEffect,
+  useRef,
+  type ChangeEvent,
+  type KeyboardEvent,
+} from 'react';
 import { Dialog } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
@@ -49,7 +55,7 @@ export default function SearchModal({
     }
   }, [query, executeSearch, clearResults]);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setQuery(e.target.value);
   };
 
@@ -59,7 +65,7 @@ export default function SearchModal({
     onClose();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       handleClose();
     }
@@ -72,17 +78,13 @@ export default function SearchModal({
     >
       <Portal>
         <Dialog.Backdrop className="fixed inset-0 z-50 bg-black bg-opacity-50 backdrop-blur-sm" />
-        <Dialog.Positioner className="fixed inset-0 z-50 flex items-start justify-center p-4 pt-16">
+        <Dialog.Positioner className="fixed inset-0 z-50 mx-auto max-w-3xl p-2 pt-16 md:p-4">
           <Dialog.Content
-            className="bg-mywhite w-full max-w-5xl overflow-hidden rounded-lg shadow-2xl"
-            style={{ height: '80vh', display: 'flex', flexDirection: 'column' }}
+            className="bg-mywhite mx-auto w-full overflow-hidden rounded-lg shadow-2xl"
+            style={{ height: '80vh' }}
           >
             {/* Fixed Header */}
-            <div
-              className="flex items-center gap-4 border-b border-gray-200 p-6"
-              style={{ flexShrink: 0 }}
-            >
-              <MagnifyingGlassIcon className="text-mydarkgrey h-6 w-6" />
+            <div className="relative w-full border-b border-gray-200 p-4">
               <input
                 ref={inputRef}
                 type="text"
@@ -90,11 +92,11 @@ export default function SearchModal({
                 onChange={handleInputChange}
                 onKeyDown={handleKeyDown}
                 placeholder="Search content..."
-                className="text-mydarkgrey flex-1 border-none bg-transparent px-4 text-xl placeholder-gray-500 outline-none"
+                className="text-mydarkgrey w-full border-none bg-transparent px-6 py-2 text-xl placeholder-gray-500 outline-none"
               />
               <button
                 onClick={handleClose}
-                className="text-mydarkgrey hover:text-myblue rounded-lg p-2 transition-colors hover:bg-gray-100"
+                className="text-mydarkgrey hover:text-myblue absolute right-4 top-6 rounded-lg p-2 transition-colors hover:bg-gray-100"
                 aria-label="Close search"
               >
                 <XMarkIcon className="h-6 w-6" />
@@ -102,9 +104,12 @@ export default function SearchModal({
             </div>
 
             {/* Scrollable Content Area */}
-            <div className="overflow-y-auto" style={{ flex: 1 }}>
+            <div
+              className="w-full overflow-y-auto"
+              style={{ height: 'calc(80vh - 80px)' }}
+            >
               {query.length < 3 && (
-                <div className="p-8 text-center text-gray-500">
+                <div className="w-full p-8 text-center text-gray-500">
                   <MagnifyingGlassIcon className="mx-auto mb-4 h-16 w-16 text-gray-300" />
                   <p className="text-lg">Search across all content</p>
                   <p className="mt-2 text-sm">
@@ -115,14 +120,14 @@ export default function SearchModal({
               )}
 
               {query.length >= 3 && isLoading && (
-                <div className="p-8 text-center">
+                <div className="w-full p-8 text-center">
                   <div className="border-myblue inline-block h-8 w-8 animate-spin rounded-full border-b-2"></div>
                   <p className="text-mydarkgrey mt-4">Searching...</p>
                 </div>
               )}
 
               {query.length >= 3 && error && (
-                <div className="p-8 text-center text-red-600">
+                <div className="w-full p-8 text-center text-red-600">
                   <p>Search failed: {error}</p>
                   <button
                     onClick={() => executeSearch(query.trim())}
@@ -137,7 +142,7 @@ export default function SearchModal({
                 !isLoading &&
                 !error &&
                 totalResults === 0 && (
-                  <div className="p-8 text-center text-gray-500">
+                  <div className="w-full p-8 text-center text-gray-500">
                     <p className="text-lg">No results found for "{query}"</p>
                     <p className="mt-2 text-sm">
                       Try different keywords or check your spelling

package/templates/src/components/search/SearchResults.tsx

@@ -150,7 +150,7 @@ export default function SearchResults({
   return (
     <div className="p-6">
       <div className="mb-6">
-        <h2 className="text-mydarkgrey text-lg font-semibold">
+        <h2 className="text-mydarkgrey text-lg font-bold">
           {allResultItems.length} result{allResultItems.length !== 1 ? 's' : ''}{' '}
           found
         </h2>
@@ -165,12 +165,12 @@ export default function SearchResults({
         {paginatedItems.map((item) => (
           <div
             key={item.id}
-            className="hover:border-myblue rounded-lg border border-gray-200 p-4 transition-colors"
+            className="rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-100"
           >
             <a href={item.url} onClick={onResultClick} className="group block">
               <div className="flex items-start gap-4">
                 <div
-                  className="bg-mydarkgrey flex-shrink-0 overflow-hidden rounded-lg"
+                  className="bg-mydarkgrey hidden flex-shrink-0 overflow-hidden rounded-lg md:block"
                   style={{ width: '120px', height: '67.5px' }}
                 >
                   <img
@@ -185,7 +185,7 @@ export default function SearchResults({
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex-1">
                       <div className="mb-2">
-                        <h3 className="text-mydarkgrey group-hover:text-myblue line-clamp-2 font-semibold transition-colors">
+                        <h3 className="text-mydarkgrey group-hover:text-myblue line-clamp-2 font-bold transition-colors">
                           {item.title}
                         </h3>
                       </div>
@@ -219,7 +219,7 @@ export default function SearchResults({
                       </p>
                     </div>
 
-                    <div className="flex-shrink-0 text-right">
+                    <div className="hidden flex-shrink-0 text-right md:block">
                       <div className="mb-2">
                         {getResultBadge(item.type, item.categorySlug)}
                       </div>

package/templates/src/lib/storyData.ts

@@ -13,6 +13,7 @@ export interface StoryData {
   menu: any;
   isHome: boolean;
   created: string;
+  socialImagePath?: string | null;
 }
 
 export async function getStoryData(

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

@@ -102,11 +102,17 @@ const brandConfig = await getBrandConfig(tenantId);
 if (!brandConfig.SITE_INIT) {
   return Astro.redirect('/storykeep');
 }
+
+const ogImage =
+  typeof storyData.socialImagePath === `string`
+    ? storyData.socialImagePath
+    : undefined;
 ---
 
 <Layout
   title={storyfragmentTitle}
   slug={lookup || brandConfig.HOME_SLUG}
+  ogImage={ogImage}
   menu={storyData.menu || null}
   created={storyData.created}
   isContext={false}