@sudajs/cli 0.10.4 → 0.12.0

package/templates/theme/src/sections.tsx

@@ -1,5 +1,11 @@
 import type { SudaComponentConfig, SudaLucideIconName } from "@sudajs/theme-engine";
-import { resolveAsset, SudaLucideIcon, type ThemeRenderMetadata } from "@sudajs/theme-engine/runtime";
+import {
+  getPostResource,
+  resolveAsset,
+  SudaLucideIcon,
+  type ThemePostResourceQuery,
+  type ThemeRenderMetadata,
+} from "@sudajs/theme-engine/runtime";
 
 import { t } from "./i18n.js";
 import { themeAsset } from "./theme-asset.js";
@@ -32,6 +38,12 @@ type CallToActionProps = {
   buttonLabel?: string;
   buttonHref?: string;
 };
+type FeaturedPostsProps = {
+  id?: string;
+  title?: string;
+  description?: string;
+  postList?: ThemePostResourceQuery;
+} & PuckExtras;
 
 export const Hero: SudaComponentConfig<HeroProps> = {
   label: t("sections.hero.label"),
@@ -209,4 +221,63 @@ export const CallToAction: SudaComponentConfig<CallToActionProps> = {
   ),
 };
 
-export const SECTION_COMPONENTS = { Hero, FeatureGrid, Testimonial, CallToAction };
+export const FeaturedPosts: SudaComponentConfig<FeaturedPostsProps> = {
+  label: t("sections.featuredPosts.label"),
+  ai: {
+    instructions:
+      "Reusable post resource section for ordinary pages such as home, services, cases, or insights teasers. " +
+      "Use it when a page should show dynamic CMS posts such as latest articles, featured posts, or posts from a specific tag. " +
+      "Set the posts field prop; do not generate static article cards.",
+  },
+  fields: {
+    title: { type: "text", label: t("sections.featuredPosts.fields.title") },
+    description: { type: "textarea", label: t("sections.featuredPosts.fields.description") },
+    postList: { type: "posts", label: t("sections.featuredPosts.fields.postList") },
+  },
+  defaultProps: {
+    title: "Featured insights",
+    description: "Highlight recent or strategically important posts from the CMS.",
+    postList: { strategy: "featured", limit: 3 },
+  },
+  render: ({ id, title, description, puck }) => {
+    const resource = getPostResource(puck?.metadata, {
+      componentId: id,
+      fieldKey: "postList",
+    });
+    const posts = resource.posts;
+    return (
+      <section className="__SUDA_THEME_KEY__-section">
+        <h2>{title}</h2>
+        <p>{description}</p>
+        <div className="__SUDA_THEME_KEY__-grid" style={{ "--__SUDA_THEME_KEY__-columns": 3 }}>
+          {posts.length > 0 ? (
+            posts.map((post) => (
+              <article className="__SUDA_THEME_KEY__-card" key={post.id}>
+                <p className="__SUDA_THEME_KEY__-eyebrow">
+                  {post.tags[0]?.name ?? "Post"}
+                </p>
+                <h3>{post.title}</h3>
+                <p>{post.excerpt}</p>
+                <a href={post.url}>{post.title}</a>
+              </article>
+            ))
+          ) : (
+            <article className="__SUDA_THEME_KEY__-card">
+              <p className="__SUDA_THEME_KEY__-eyebrow">CMS</p>
+              <h3>No posts yet</h3>
+              <p>Create and publish posts in SudaCloud to populate this section.</p>
+            </article>
+          )}
+        </div>
+      </section>
+    );
+  },
+};
+
+export const SECTION_COMPONENTS = {
+  Hero,
+  FeatureGrid,
+  FeaturedPosts,
+  Testimonial,
+  CallToAction,
+};

package/templates/theme/src/styles.css

@@ -3,22 +3,22 @@
 
 .__SUDA_THEME_KEY__-root {
   font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-  color: #111827;
-  background: #ffffff;
+  color: var(--suda-color-foreground, #111827);
+  background: var(--suda-color-background, #ffffff);
 }
 .__SUDA_THEME_KEY__-header,
 .__SUDA_THEME_KEY__-footer {
   padding: 20px clamp(20px, 5vw, 64px);
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--suda-color-muted, #e5e7eb);
 }
 .__SUDA_THEME_KEY__-footer {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px 20px;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--suda-color-muted, #e5e7eb);
   border-bottom: 0;
-  color: #6b7280;
+  color: var(--suda-color-muted-foreground, #6b7280);
 }
 .__SUDA_THEME_KEY__-footer a {
   display: inline-flex;
@@ -35,19 +35,19 @@
   padding: 64px clamp(20px, 5vw, 64px);
 }
 .__SUDA_THEME_KEY__-hero {
-  background: #f8fafc;
+  background: var(--suda-color-accent, #f8fafc);
 }
 .__SUDA_THEME_KEY__-hero-logo {
   width: 64px;
   height: 64px;
-  border-radius: 14px;
+  border-radius: var(--suda-radius-card, 14px);
   margin-bottom: 24px;
 }
 .__SUDA_THEME_KEY__-eyebrow {
   text-transform: uppercase;
   letter-spacing: 0.08em;
   font-size: 12px;
-  color: #2563eb;
+  color: var(--suda-color-primary, #2563eb);
   font-weight: 700;
 }
 .__SUDA_THEME_KEY__-section h1 {
@@ -65,16 +65,16 @@
 .__SUDA_THEME_KEY__-section p {
   max-width: 680px;
   line-height: 1.7;
-  color: #4b5563;
+  color: var(--suda-color-muted-foreground, #4b5563);
 }
 .__SUDA_THEME_KEY__-button {
   display: inline-flex;
   align-items: center;
   min-height: 42px;
   padding: 0 18px;
-  border-radius: 8px;
-  background: #111827;
-  color: #ffffff;
+  border-radius: var(--suda-radius-button, 8px);
+  background: var(--suda-color-primary, #111827);
+  color: var(--suda-color-primary-foreground, #ffffff);
   text-decoration: none;
   font-weight: 700;
 }
@@ -85,14 +85,14 @@
   margin-top: 28px;
 }
 .__SUDA_THEME_KEY__-card {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--suda-color-muted, #e5e7eb);
+  border-radius: var(--suda-radius-card, 8px);
   padding: 20px;
 }
 .__SUDA_THEME_KEY__-card-icon {
   width: 24px;
   height: 24px;
-  color: #2563eb;
+  color: var(--suda-color-primary, #2563eb);
 }
 .__SUDA_THEME_KEY__-quote blockquote {
   max-width: 780px;
@@ -101,15 +101,15 @@
   margin: 0 0 16px;
 }
 .__SUDA_THEME_KEY__-cta {
-  background: #111827;
-  color: #ffffff;
+  background: var(--suda-color-foreground, #111827);
+  color: var(--suda-color-background, #ffffff);
 }
 .__SUDA_THEME_KEY__-cta p {
-  color: #d1d5db;
+  color: var(--suda-color-muted, #d1d5db);
 }
 .__SUDA_THEME_KEY__-cta .__SUDA_THEME_KEY__-button {
-  background: #ffffff;
-  color: #111827;
+  background: var(--suda-color-background, #ffffff);
+  color: var(--suda-color-foreground, #111827);
 }
 @media (max-width: 760px) {
   .__SUDA_THEME_KEY__-grid {

package/templates/theme/src/templates.ts

@@ -1,10 +1,10 @@
-import type { ThemeStarterPage } from "@sudajs/theme-engine";
+import type { ThemeCmsTemplates, ThemeStarterPage } from "@sudajs/theme-engine";
 
 import { themeAsset } from "./theme-asset.js";
 
 export const starterPages: ThemeStarterPage[] = [
   {
-    slug: "home",
+    slug: "index",
     title: "Home",
     isHome: true,
     data: {
@@ -35,6 +35,15 @@ export const starterPages: ThemeStarterPage[] = [
             ],
           },
         },
+        {
+          type: "FeaturedPosts",
+          props: {
+            id: "FeaturedPosts-1",
+            title: "Featured posts",
+            description: "Use CMS posts to keep the homepage fresh without manual card editing.",
+            postList: { strategy: "featured", limit: 3 },
+          },
+        },
         {
           type: "CallToAction",
           props: {
@@ -42,14 +51,71 @@ export const starterPages: ThemeStarterPage[] = [
             title: "Launch your first page",
             description: "Customize this starter template or let an agent generate a new draft.",
             buttonLabel: "Get in touch",
-            buttonHref: "/contact",
+            buttonHref: "/contact-us",
+          },
+        },
+      ],
+    },
+  },
+  {
+    slug: "services",
+    title: "Services",
+    data: {
+      root: { props: {} },
+      content: [
+        {
+          type: "Hero",
+          props: {
+            id: "Hero-Services",
+            eyebrow: "Services",
+            title: "Show what you offer",
+            description: "Use this page to explain core services, packages, or capabilities.",
+            primaryLabel: "Contact us",
+            primaryHref: "/contact-us",
+          },
+        },
+        {
+          type: "FeatureGrid",
+          props: {
+            id: "FeatureGrid-Services",
+            title: "Service highlights",
+            description: "Replace these cards with the most important ways you help customers.",
           },
         },
       ],
     },
   },
   {
-    slug: "about",
+    slug: "team",
+    title: "Team",
+    data: {
+      root: { props: {} },
+      content: [
+        {
+          type: "Hero",
+          props: {
+            id: "Hero-Team",
+            eyebrow: "Team",
+            title: "Introduce the people behind the work",
+            description: "Share experience, roles, and the human story behind the project.",
+            primaryLabel: "Work with us",
+            primaryHref: "/contact-us",
+          },
+        },
+        {
+          type: "Testimonial",
+          props: {
+            id: "Testimonial-Team",
+            quote: "Use this block for a founder note, client quote, or team philosophy.",
+            author: "Team lead",
+            role: "Founder",
+          },
+        },
+      ],
+    },
+  },
+  {
+    slug: "about-us",
     title: "About",
     data: {
       root: { props: {} },
@@ -62,7 +128,7 @@ export const starterPages: ThemeStarterPage[] = [
             title: "A clean starting point for your story",
             description: "Use this page to introduce the project, audience, and promise.",
             primaryLabel: "Contact us",
-            primaryHref: "/contact",
+            primaryHref: "/contact-us",
           },
         },
         {
@@ -78,7 +144,7 @@ export const starterPages: ThemeStarterPage[] = [
     },
   },
   {
-    slug: "contact",
+    slug: "contact-us",
     title: "Contact",
     data: {
       root: { props: {} },
@@ -108,3 +174,82 @@ export const starterPages: ThemeStarterPage[] = [
     },
   },
 ];
+
+export const cmsTemplates: ThemeCmsTemplates = {
+  posts: {
+    title: "Posts",
+    data: {
+      root: { props: {} },
+      content: [
+        {
+          type: "Hero",
+          props: {
+            id: "Hero-Posts",
+            eyebrow: "Articles",
+            title: "Latest updates",
+            description: "Browse news, articles, and practical insights.",
+            primaryLabel: "View tags",
+            primaryHref: "/tags",
+          },
+        },
+      ],
+    },
+  },
+  post: {
+    title: "Post",
+    data: {
+      root: { props: {} },
+      content: [
+        {
+          type: "Hero",
+          props: {
+            id: "Hero-Post",
+            eyebrow: "Article",
+            title: "Article detail",
+            description: "This template renders a single published post.",
+            primaryLabel: "Back to posts",
+            primaryHref: "/posts",
+          },
+        },
+      ],
+    },
+  },
+  tags: {
+    title: "Tags",
+    data: {
+      root: { props: {} },
+      content: [
+        {
+          type: "Hero",
+          props: {
+            id: "Hero-Tags",
+            eyebrow: "Topics",
+            title: "Browse by topic",
+            description: "Explore tags used across published posts.",
+            primaryLabel: "View posts",
+            primaryHref: "/posts",
+          },
+        },
+      ],
+    },
+  },
+  tag: {
+    title: "Tag",
+    data: {
+      root: { props: {} },
+      content: [
+        {
+          type: "Hero",
+          props: {
+            id: "Hero-Tag",
+            eyebrow: "Topic",
+            title: "Topic posts",
+            description: "This template renders posts filtered by the current tag.",
+            primaryLabel: "All posts",
+            primaryHref: "/posts",
+          },
+        },
+      ],
+    },
+  },
+};