keystone-design-bootstrap 1.0.3

package/src/design_system/sections/blog-gallery.aman.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { BlogPost } from '../../types/api/blog-post';
+
+interface BlogGalleryProps {
+  config: {
+    pages?: any[];
+  };
+  blogPosts?: BlogPost[] | null;
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const BlogGallery = ({
+  config,
+  blogPosts: postsData,
+  pageName = 'Blog',
+  sectionKey = 'blog_page_section_2_gallery',
+}: BlogGalleryProps) => {
+  const posts = Array.isArray(postsData) ? postsData : [];
+
+  return (
+    <section>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        {posts.length > 0 ? (
+          <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+            {posts.map((post: any) => {
+              const excerpt = post.summary || post.content_markdown?.replace(/[#*\[\]()]/g, '').trim().substring(0, 150) || '';
+              
+              return (
+                <div key={post.id} className="flex flex-col">
+                  <div className="w-full h-64 mb-6 overflow-hidden">
+                    <PhotoWithFallback
+                      item={post}
+                      fallbackId={post.id}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  
+                  <p className="text-xs font-body font-normal uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                    {new Date(post.published_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+                  </p>
+                  
+                  <h3 className="font-display text-2xl font-normal text-fg-primary mb-4">
+                    {post.title}
+                  </h3>
+                  
+                  {excerpt && (
+                    <p className="font-body text-base leading-relaxed text-tertiary mb-6 flex-grow">
+                      {excerpt}
+                    </p>
+                  )}
+                  
+                  <a
+                    href={`/blog/${post.slug}`}
+                    className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                    style={{ color: 'var(--color-text-brand-accent)' }}
+                  >
+                    Read more
+                  </a>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="font-body text-base text-tertiary">No posts available</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('blog-gallery', 'aman', BlogGallery);

package/src/design_system/sections/blog-gallery.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import React, { useState } from 'react';
+import { ArrowUpRight } from '@untitledui/icons';
+import { Avatar, Select, SelectItem, PaginationPageDefault, PhotoWithFallback } from '../elements';
+import { BlogCardVertical } from './blog-cards';
+import { useBreakpoint } from '../../lib/hooks/use-breakpoint';
+import { cx } from '../../utils/cx';
+import { getAvatarUrl } from '../../utils/photo-helpers';
+import type { BlogPost } from '../../types/api/blog-post';
+
+interface BlogGalleryProps {
+    config: {
+        pages?: any[];
+    };
+    blogPosts?: BlogPost[] | null;
+}
+
+const defaultSortByOptions = [
+    { id: "recent", label: "Most recent" },
+    { id: "popular", label: "Most popular" },
+    { id: "viewed", label: "Most viewed" },
+];
+
+export const BlogGallery = ({
+    config,
+    blogPosts: postsData,
+}: BlogGalleryProps) => {
+    const blogPage = config.pages?.find((p: any) => p.library_reference_name === 'Blog');
+    const blogPageSection = blogPage?.sections?.blog_page_section_2_blog;
+    const heroSection = blogPage?.sections?.blog_page_section_1_hero;
+
+    const label = undefined;
+    const title = 'Latest Articles';
+    const subtitle = 'Browse our collection of articles below.';
+    const postsPerPage = 12;
+    const sortByOptions = defaultSortByOptions;
+    const backgroundColor = "bg-primary";
+    const className = "";
+
+    const posts = Array.isArray(postsData) ? postsData : [];
+    const isDesktop = useBreakpoint("lg");
+    const [currentPage, setCurrentPage] = useState(1);
+    const [sortBy, setSortBy] = useState(sortByOptions[0].id);
+
+    // Sort posts based on sortBy
+    let sortedPosts = [...posts];
+    if (sortBy === 'recent') {
+        sortedPosts.sort((a, b) => {
+            const dateA = a.published_at ? new Date(a.published_at).getTime() : 0;
+            const dateB = b.published_at ? new Date(b.published_at).getTime() : 0;
+            return dateB - dateA;
+        });
+    }
+    // TODO: Add popular and viewed sorting when those fields are available
+
+    // Get featured post (first post with featured: true or first post)
+    const featuredPost = sortedPosts.find((post) => post.featured) || sortedPosts[0];
+    const nonFeaturedPosts = sortedPosts.filter((post) => post.id !== featuredPost?.id);
+    
+    // Calculate pagination for non-featured posts
+    const totalPages = Math.ceil(nonFeaturedPosts.length / postsPerPage);
+    const startIndex = (currentPage - 1) * postsPerPage;
+    const endIndex = startIndex + postsPerPage;
+    const paginatedNonFeaturedPosts = nonFeaturedPosts.slice(startIndex, endIndex);
+
+    // Reset to page 1 when sort changes
+    React.useEffect(() => {
+        setCurrentPage(1);
+    }, [sortBy]);
+
+    return (
+        <div className={`${backgroundColor} ${className}`}>
+            {/* Hero Section */}
+            <section className={`${backgroundColor} py-16 md:py-24`}>
+                <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                    <div className="flex w-full max-w-3xl flex-col">
+                        {label && (
+                            <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
+                        )}
+                        <h2 className="mt-3 text-display-md font-semibold text-primary md:text-display-lg">
+                            {title}
+                        </h2>
+                        <p className="mt-4 text-lg text-tertiary md:mt-6 md:text-xl">
+                            {subtitle}
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* Main Content */}
+            <main className="mx-auto flex w-full max-w-container flex-col gap-12 px-4 pb-16 md:gap-16 md:px-8 md:pb-24">
+                {posts.length > 0 ? (
+                    <>
+                        {/* Featured Post - Desktop */}
+                        {featuredPost && (
+                            <a
+                                href={`/blog/${featuredPost.slug}`}
+                                className="relative hidden w-full overflow-hidden rounded-2xl outline-focus-ring select-none focus:outline-2 focus:outline-offset-4 md:block md:h-145 lg:h-180"
+                            >
+                                <PhotoWithFallback
+                                    item={featuredPost}
+                                    fallbackId={featuredPost.id}
+                                    alt={featuredPost.title || 'Featured post'}
+                                    className="absolute inset-0 size-full object-cover"
+                                />
+
+                                {featuredPost && (() => {
+                                    const author = Array.isArray(featuredPost.blog_post_authors) && featuredPost.blog_post_authors.length > 0 
+                                        ? featuredPost.blog_post_authors[0] 
+                                        : null;
+                                    const authorName = author?.name || 'Author';
+                                    const authorAvatarUrl = getAvatarUrl(author?.photo_attachments, author?.id, authorName);
+                                    const publishedAt = featuredPost.published_at 
+                                        ? new Date(featuredPost.published_at).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' })
+                                        : 'Recent';
+                                    const summary = featuredPost.excerpt_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+                                    
+                                    return (
+                                        <div className="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/40 to-transparent pt-24">
+                                            <div className="flex w-full flex-col gap-6 p-8">
+                                                <div className="flex flex-col gap-2">
+                                                    <div className="flex gap-4">
+                                                        <p className="flex-1 text-display-xs font-semibold text-white">{featuredPost.title || 'Untitled Post'}</p>
+                                                        <ArrowUpRight className="size-6 shrink-0 text-fg-white" />
+                                                    </div>
+                                                    <p className="line-clamp-2 text-md text-white">{summary}</p>
+                                                </div>
+                                                <div className="flex gap-6">
+                                                    <div className="flex flex-1 gap-8">
+                                                        <div className="flex flex-col gap-2">
+                                                            <p className="text-sm font-semibold text-white">Written by</p>
+                                                            <div className="flex items-center gap-2">
+                                                                <Avatar focusable size="md" src={authorAvatarUrl} alt={authorName} />
+                                                                <p className="text-sm font-semibold text-white">{authorName}</p>
+                                                            </div>
+                                                        </div>
+                                                        <div className="flex flex-col gap-2">
+                                                            <p className="text-sm font-semibold text-white">Published on</p>
+                                                            <div className="flex h-10 items-center">
+                                                                <p className="text-md font-semibold text-white">{publishedAt}</p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                                })()}
+                            </a>
+                        )}
+
+                        {/* Featured Post - Mobile */}
+                        {featuredPost && (
+                            <div className="md:hidden">
+                                <BlogCardVertical article={featuredPost} />
+                            </div>
+                        )}
+
+                        {/* Sort Controls */}
+                        <div className="flex flex-col items-end gap-8 md:flex-row">
+                            <div className="relative w-full md:max-w-44">
+                                <Select
+                                    aria-label="Sort by"
+                                    size="md"
+                                    selectedKey={sortBy}
+                                    onSelectionChange={(value: any) => setSortBy(value as string)}
+                                    items={sortByOptions}
+                                >
+                                    {(item: any) => <SelectItem id={item.id}>{item.label}</SelectItem>}
+                                </Select>
+                            </div>
+                        </div>
+
+                        {/* Posts Grid */}
+                        {paginatedNonFeaturedPosts.length > 0 && (
+                            <ul className="grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-12 lg:grid-cols-3">
+                                {paginatedNonFeaturedPosts.map((post) => (
+                                    <li key={post.id} className={cx(!isDesktop && "nth-[n+7]:hidden")}>
+                                        <BlogCardVertical article={post} />
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+
+                        {/* Pagination */}
+                        {totalPages > 1 && (
+                            <PaginationPageDefault 
+                                rounded 
+                                page={currentPage}
+                                total={totalPages}
+                                onPageChange={setCurrentPage}
+                            />
+                        )}
+                    </>
+                ) : (
+                    <div className="text-center py-12">
+                        <p className="text-gray-500">No blog posts available</p>
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+};

package/src/design_system/sections/blog-home.aman.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { BlogPost } from '../../types/api/blog-post';
+
+interface BlogHomeProps {
+  config: {
+    pages?: any[];
+  };
+  blogPosts?: BlogPost[] | null;
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const BlogHome = ({
+  config,
+  blogPosts: postsData,
+  pageName = 'Blog',
+  sectionKey = 'blog_page_section_1_posts',
+}: BlogHomeProps) => {
+  const posts = Array.isArray(postsData) ? postsData : [];
+  const title = 'Latest Posts';
+
+  return (
+    <section>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        <div className="mb-12 text-center">
+          <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+            {title}
+          </h2>
+        </div>
+
+        {posts.length > 0 ? (
+          <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+            {posts.map((post: any) => {
+              const excerpt = post.summary || post.content_markdown?.replace(/[#*\[\]()]/g, '').trim().substring(0, 150) || '';
+              
+              return (
+                <div key={post.id} className="flex flex-col">
+                  <div className="w-full h-64 mb-6 overflow-hidden">
+                    <PhotoWithFallback
+                      item={post}
+                      fallbackId={post.id}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  
+                  <p className="text-xs font-body font-normal uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                    {new Date(post.published_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+                  </p>
+                  
+                  <h3 className="font-display text-2xl font-normal text-fg-primary mb-4">
+                    {post.title}
+                  </h3>
+                  
+                  {excerpt && (
+                    <p className="font-body text-base leading-relaxed text-tertiary mb-6 flex-grow">
+                      {excerpt}
+                    </p>
+                  )}
+                  
+                  <a
+                    href={`/blog/${post.slug}`}
+                    className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                    style={{ color: 'var(--color-text-brand-accent)' }}
+                  >
+                    Read more
+                  </a>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="font-body text-base text-tertiary">No posts available</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('blog-home', 'aman', BlogHome);

package/src/design_system/sections/blog-home.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { ArrowUpRight, ArrowLeft, ArrowRight } from "@untitledui/icons";
+import { Button, PhotoWithFallback, RoundButton } from '../elements';
+import { Carousel } from '../elements/carousel/carousel-base';
+import { cx } from '../../utils/cx';
+import type { BlogPost } from '../../types/api/blog-post';
+
+interface BlogHomeProps {
+    config: {
+        pages?: any[];
+    };
+    blogPosts?: BlogPost[] | null;
+}
+
+export const BlogHome = ({
+    config,
+    blogPosts: postsData,
+}: BlogHomeProps) => {
+    const label = "Latest posts";
+    const title = "Latest posts";
+    const subtitle = "";
+    const maxPosts = 6;
+    const viewAllHref = "/blog";
+    const viewAllText = "View all posts";
+    
+    const posts = Array.isArray(postsData) ? postsData.slice(0, maxPosts) : [];
+    
+    const formatDate = (dateString?: string) => {
+        if (!dateString) return 'Recent';
+        try {
+            return new Date(dateString).toLocaleDateString('en-US', {
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric'
+            });
+        } catch {
+            return 'Recent';
+        }
+    };
+
+    return (
+        <section className="overflow-hidden bg-primary py-16 md:py-24">
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                <div className="flex flex-col items-start justify-between lg:flex-row">
+                    <div className="max-w-3xl">
+                        <p className="text-sm font-semibold text-brand-secondary md:text-md">{label}</p>
+                        <h2 className="mt-3 text-display-sm font-semibold text-primary md:text-display-md">
+                            {title}
+                        </h2>
+                        <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                            {subtitle}
+                        </p>
+                    </div>
+
+                    {viewAllHref && (
+                        <div className="hidden gap-3 lg:flex">
+                            <Button size="xl" href={viewAllHref}>{viewAllText}</Button>
+                        </div>
+                    )}
+                </div>
+
+                {posts && posts.length > 0 ? (
+                    <>
+                        <Carousel.Root
+                            className="mt-12 md:mt-16"
+                            opts={{
+                                align: "start",
+                            }}
+                        >
+                            <Carousel.Content overflowHidden={false} className="gap-6 pr-4 md:gap-8 md:pr-8">
+                                {posts.map((post, index) => {
+                                    const author = post.blog_post_authors?.[0];
+                                    const excerpt = post.excerpt_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+                                    
+                                    return (
+                                        <Carousel.Item key={post.id || index} className="max-w-xs md:max-w-96">
+                                            <article className={cx("flex flex-col gap-4")}>
+                                                <div className="relative">
+                                                    <a href={`/blog/${post.slug || post.id}`} className="w-full" tabIndex={-1}>
+                                                        <PhotoWithFallback
+                                                            item={post}
+                                                            fallbackId={post.id || index}
+                                                            alt={post.title || 'Blog post'}
+                                                            className={cx("aspect-[1.5] w-full object-cover")}
+                                                        />
+                                                    </a>
+                                                    <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
+                                                        <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30 md:p-5">
+                                                            <div>
+                                                                <a
+                                                                    href={author?.slug ? `/blog/author/${author.slug}` : '/blog'}
+                                                                    className="block rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                                                                >
+                                                                    {author?.name || 'Author'}
+                                                                </a>
+                                                                <time className="block text-sm text-white">
+                                                                    {formatDate(post.published_at)}
+                                                                </time>
+                                                            </div>
+                                                            <a
+                                                                href="/blog"
+                                                                className="rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                                                            >
+                                                                Blog
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="flex flex-col gap-2">
+                                                    <a
+                                                        href={`/blog/${post.slug || post.id}`}
+                                                        className="group/title flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                                                    >
+                                                        {post.title || 'Untitled Post'}
+                                                        <ArrowUpRight
+                                                            className="mt-0.5 size-6 shrink-0 text-fg-quaternary transition duration-100 ease-linear group-hover/title:text-fg-quaternary_hover"
+                                                            aria-hidden="true"
+                                                        />
+                                                    </a>
+                                                    {excerpt && (
+                                                        <p className="line-clamp-2 text-md text-tertiary">{excerpt}</p>
+                                                    )}
+                                                </div>
+                                            </article>
+                                        </Carousel.Item>
+                                    );
+                                })}
+                            </Carousel.Content>
+                            <div className="mt-8 flex gap-4 md:gap-8">
+                                <Carousel.PrevTrigger asChild>
+                                    <RoundButton icon={ArrowLeft} />
+                                </Carousel.PrevTrigger>
+                                <Carousel.NextTrigger asChild>
+                                    <RoundButton icon={ArrowRight} />
+                                </Carousel.NextTrigger>
+                            </div>
+                        </Carousel.Root>
+                        {viewAllHref && (
+                            <div className="mt-12 flex flex-col gap-3 lg:hidden">
+                                <Button size="xl" href={viewAllHref}>{viewAllText}</Button>
+                            </div>
+                        )}
+                    </>
+                ) : (
+                    <div className="mt-12 text-center md:mt-16">
+                        <p className="text-gray-500">No blog posts available</p>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};

package/src/design_system/sections/blog-post.aman.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { PhotoWithFallback, Button, Breadcrumb } from '../elements';
+import MarkdownRenderer from '../elements/markdown-renderer/MarkdownRenderer';
+import type { BlogPost } from '../../types/api/blog-post';
+
+interface BlogPostSectionProps {
+  config: {
+    pages?: any[];
+  };
+  blogPost?: BlogPost | null;
+}
+
+export const BlogPostSection = ({
+  config,
+  blogPost,
+}: BlogPostSectionProps) => {
+  if (!blogPost) {
+    return (
+      <div className="bg-primary text-center py-12">
+        <div className="text-6xl mb-4">📝</div>
+        <h3 className="font-display text-xl font-normal text-fg-primary mb-2">Blog Post Not Found</h3>
+        <p className="font-body text-tertiary mb-4">The blog post you're looking for doesn't exist.</p>
+        <Button href="/blog">View All Blog Posts</Button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <section className="py-2 md:py-2">
+        <div className="mx-auto max-w-container px-4 md:px-8">
+          <Breadcrumb 
+            backHref="/blog" 
+            backLabel="Blog" 
+            currentLabel={blogPost.title} 
+          />
+        </div>
+      </section>
+
+      <section>
+        <div className="mx-auto max-w-3xl px-4 md:px-8">
+          <div className="mb-8">
+            {blogPost.published_at && (
+              <p className="text-xs font-body font-normal uppercase tracking-widest text-secondary mb-4">
+                {new Date(blogPost.published_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+              </p>
+            )}
+            
+            <h1 className="font-display text-5xl font-normal leading-tight text-fg-primary md:text-6xl">
+              {blogPost.title}
+            </h1>
+          </div>
+
+          <div className="aspect-video w-full mb-12">
+            <PhotoWithFallback
+              item={blogPost}
+              fallbackId={blogPost.id}
+              alt={blogPost.title}
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          <div className="prose prose-lg max-w-none font-display text-tertiary">
+            <MarkdownRenderer content={blogPost.content_markdown || ''} />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('blog-post', 'aman', BlogPostSection);