keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,301 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Link01, Copy01 } from '@untitledui/icons';
+import { Badge, BadgeGroup, Button, Form, Input, Avatar, Breadcrumb, MarkdownRenderer, PhotoWithFallback } from '../elements';
+import { extractTableOfContents } from '../../utils/markdown-toc';
+import type { BlogPost } from '../../types/api/blog-post';
+
+interface BlogPostSectionProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+    // Blog post data from SSR
+    blogPost?: BlogPost | null;
+    // Related posts
+    relatedPosts?: BlogPost[] | null;
+}
+
+export const BlogPostSection = ({
+    config,
+    blogPost,
+    relatedPosts: relatedPostsData,
+}: BlogPostSectionProps) => {
+    const relatedPosts = Array.isArray(relatedPostsData) ? relatedPostsData.slice(0, 3) : [];
+
+    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';
+        }
+    };
+
+    // Extract table of contents from markdown
+    const tableOfContents = blogPost?.content_markdown 
+        ? extractTableOfContents(blogPost.content_markdown)
+        : [];
+
+    const [copied, setCopied] = useState(false);
+
+    const handleCopyLink = async () => {
+        try {
+            await navigator.clipboard.writeText(window.location.href);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+
+    const handleShareLink = () => {
+        if (navigator.share) {
+            navigator.share({
+                title: blogPost?.title,
+                url: window.location.href,
+            }).catch((err) => {
+                console.error('Error sharing:', err);
+            });
+        } else {
+            // Fallback to copy if share is not available
+            handleCopyLink();
+        }
+    };
+
+    if (!blogPost) {
+        return (
+            <div className="text-center py-12">
+                <div className="text-gray-600 text-6xl mb-4">📝</div>
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">Blog Post Not Found</h3>
+                <p className="text-gray-600 mb-4">The blog post you're looking for doesn't exist.</p>
+                <Button href="/blog">View All Blog Posts</Button>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            {/* Breadcrumb - top left aligned */}
+            <section className="bg-primary 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>
+
+            {/* Blog Post Header with Image */}
+            <section className="bg-primary py-4 md:py-6">
+                <div className="relative mx-auto max-w-container gap-16 px-4 pb-16 md:gap-8 md:px-8 md:pt-16 md:pb-24 grid grid-cols-1 items-center md:grid-cols-2">
+                    <div className="flex max-w-180 flex-col items-start">
+                        <BadgeGroup 
+                            size="md" 
+                            addonText={(blogPost as any).category?.name || "Blog"} 
+                            color="brand" 
+                            theme="modern" 
+                            className="pr-3 mt-4" 
+                            iconTrailing={null}
+                        >
+                            {(blogPost as any).reading_time_minutes 
+                                ? `${(blogPost as any).reading_time_minutes} min read` 
+                                : (blogPost.published_at ? formatDate(blogPost.published_at) : 'Recent')}
+                        </BadgeGroup>
+                        
+                        <h1 className="mt-4 text-display-md font-semibold text-primary md:text-display-lg">
+                            {blogPost.title}
+                        </h1>
+                        {(blogPost as any).excerpt && (
+                            <p className="mt-4 text-lg text-tertiary md:mt-6 md:max-w-120 md:text-xl">
+                                {((blogPost as any).excerpt || (blogPost as any).excerpt_markdown?.replace(/[#*\[\]()]/g, '').trim() || '').replace(/[#*\[\]()]/g, '').trim()}
+                            </p>
+                        )}
+                    </div>
+
+                    {/* Hero Image - Always show with fallback support */}
+                    <PhotoWithFallback
+                        item={blogPost}
+                        fallbackId={blogPost.id}
+                        alt={blogPost.title}
+                        className="order-first -ml-4 h-36 w-screen max-w-none object-cover md:order-1 md:ml-0 md:h-96 md:w-full md:max-w-full rounded-2xl"
+                    />
+                </div>
+
+                {/* Content Section with Sidebar */}
+                {blogPost.content_markdown && (
+                    <div className="mx-auto max-w-container px-4 pb-16 md:px-8 md:pb-24">
+                        <div className="mx-auto flex justify-center gap-16">
+                            {/* Left sidebar - hidden on mobile */}
+                            <div className="hidden w-70 flex-col gap-8 lg:flex">
+                                {tableOfContents.length > 0 && (
+                                    <>
+                                        <div className="w-full border-t border-secondary" />
+                                        <div className="flex flex-col gap-4">
+                                            <p className="text-md font-semibold text-brand-secondary">Table of contents</p>
+                                            <ul className="flex flex-col gap-3">
+                                                {tableOfContents.map((item: any) => (
+                                                    <li key={item.id}>
+                                                        <Button 
+                                                            size="lg" 
+                                                            color="link-gray" 
+                                                            href={`#${item.id}`}
+                                                            className={`${item.level === 3 ? 'pl-4' : ''} w-full text-left whitespace-normal justify-start`}
+                                                        >
+                                                            <span className="break-words block w-full">{item.title}</span>
+                                                        </Button>
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                        <div className="w-full border-t border-secondary" />
+                                    </>
+                                )}
+                                {(blogPost as any).blog_post_authors && Array.isArray((blogPost as any).blog_post_authors) && (blogPost as any).blog_post_authors.length > 0 && (
+                                    <div className="flex flex-col gap-6">
+                                        <p className="text-md font-semibold text-brand-secondary">Author</p>
+                                        <div className="flex items-center gap-3">
+                                            {(() => {
+                                                const author = (blogPost as any).blog_post_authors[0];
+                                                return (
+                                                    <>
+                                                        <Avatar 
+                                                            src={author?.photo_attachments?.find((pa: any) => pa.featured)?.photo?.thumbnail_url ||
+                                                                 author?.photo_attachments?.[0]?.photo?.thumbnail_url ||
+                                                                 `https://ui-avatars.com/api/?name=${encodeURIComponent(author?.name || 'Author')}&background=random`}
+                                                            alt={author?.name || 'Author'}
+                                                            size="md"
+                                                        />
+                                                        <div>
+                                                            <p className="text-md font-semibold text-primary">{author?.name || 'Author'}</p>
+                                                            {author?.bio_markdown && (
+                                                                <p className="text-md text-tertiary">{author.bio_markdown.replace(/[#*\[\]()]/g, '').trim().substring(0, 100)}</p>
+                                                            )}
+                                                        </div>
+                                                    </>
+                                                );
+                                            })()}
+                                        </div>
+                                    </div>
+                                )}
+                                <div className="w-full border-t border-secondary" />
+                                <Form
+                                    onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                                        e.preventDefault();
+                                        const formData = new FormData(e.currentTarget);
+                                        console.log("Form data:", formData);
+                                    }}
+                                    className="flex flex-col gap-4"
+                                >
+                                    <label htmlFor="blog-email-input" className="text-md font-semibold text-brand-secondary">
+                                        Subscribe to our newsletter
+                                    </label>
+                                    <Input isRequired id="blog-email-input" name="email" type="email" placeholder="Enter your email" size="md" />
+                                    <Button type="submit" size="xl">
+                                        Subscribe
+                                    </Button>
+                                </Form>
+                                <div className="w-full border-t border-secondary" />
+                                <div className="flex gap-3">
+                                    <button
+                                        onClick={handleShareLink}
+                                        title="Share link"
+                                        className="inline-flex h-max cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3.5 py-2.5 text-sm font-semibold outline-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 bg-secondary text-primary hover:bg-secondary_hover"
+                                    >
+                                        <Link01 className="size-5 shrink-0" />
+                                    </button>
+                                    <button
+                                        onClick={handleCopyLink}
+                                        title={copied ? "Copied!" : "Copy link"}
+                                        className="inline-flex h-max cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3.5 py-2.5 text-sm font-semibold outline-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 bg-secondary text-fg-quaternary hover:bg-secondary_hover"
+                                    >
+                                        <Copy01 className="size-5 shrink-0" />
+                                    </button>
+                                </div>
+                            </div>
+
+                            {/* Main content */}
+                            <div className="max-w-prose lg:max-w-180">
+                                <div className="prose-centered-quote mx-auto prose md:prose-lg" id="content">
+                                    <MarkdownRenderer content={blogPost.content_markdown || ''} />
+                                </div>
+
+                                {/* Mobile-only contributors and social */}
+                                <div className="flex flex-col items-start justify-between gap-y-8 lg:hidden lg:flex-row mt-8">
+                                    {(blogPost as any).blog_post_authors && Array.isArray((blogPost as any).blog_post_authors) && (blogPost as any).blog_post_authors.length > 0 && (
+                                        <div className="flex flex-col gap-6">
+                                            <p className="text-md font-semibold text-brand-secondary">Author</p>
+                                            <div className="flex items-center gap-3">
+                                                {(() => {
+                                                    const author = (blogPost as any).blog_post_authors[0];
+                                                    return (
+                                                        <>
+                                                            <Avatar 
+                                                                src={author?.photo_attachments?.find((pa: any) => pa.featured)?.photo?.thumbnail_url ||
+                                                                   author?.photo_attachments?.[0]?.photo?.thumbnail_url ||
+                                                                   `https://ui-avatars.com/api/?name=${encodeURIComponent(author?.name || 'Author')}&background=random`}
+                                                                alt={author?.name || 'Author'}
+                                                                size="md"
+                                                            />
+                                                            <div>
+                                                                <p className="text-md font-semibold text-primary">{author?.name || 'Author'}</p>
+                                                                {author?.bio_markdown && (
+                                                                    <p className="text-md text-tertiary">{author.bio_markdown.replace(/[#*\[\]()]/g, '').trim().substring(0, 100)}</p>
+                                                                )}
+                                                            </div>
+                                                        </>
+                                                    );
+                                                })()}
+                                            </div>
+                                        </div>
+                                    )}
+                                    <div className="flex gap-3">
+                                        <button
+                                            onClick={handleShareLink}
+                                            title="Share link"
+                                            className="inline-flex h-max cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3.5 py-2.5 text-sm font-semibold outline-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 bg-secondary text-primary hover:bg-secondary_hover"
+                                        >
+                                            <Link01 className="size-5 shrink-0" />
+                                        </button>
+                                        <button
+                                            onClick={handleCopyLink}
+                                            title={copied ? "Copied!" : "Copy link"}
+                                            className="inline-flex h-max cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3.5 py-2.5 text-sm font-semibold outline-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 bg-secondary text-fg-quaternary hover:bg-secondary_hover"
+                                        >
+                                            <Copy01 className="size-5 shrink-0" />
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </section>
+
+            {/* Navigation */}
+            <section className="bg-primary pb-16 md:pb-24">
+                <div className="mx-auto max-w-container px-4 md:px-8">
+                    <div className="mx-auto max-w-prose md:max-w-180">
+                        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-end border-t border-secondary pt-8">
+                            {(blogPost as any).tags && Array.isArray((blogPost as any).tags) && (blogPost as any).tags.length > 0 && (
+                                <div className="flex flex-wrap gap-2">
+                                    {(blogPost as any).tags.map((tag: any, index: number) => (
+                                        <Badge key={index} color="gray" size="md" type="modern">
+                                            {tag.name || tag}
+                                        </Badge>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};

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

@@ -0,0 +1,101 @@
+"use client";
+
+import React from 'react';
+import { PhotoWithFallback } from '../elements';
+import type { BlogPost } from '../../types/api/blog-post';
+
+interface BlogSectionProps {
+    config: {
+        pages?: any[];
+    };
+    blogPosts?: BlogPost[] | null;
+    pageName?: string;
+    sectionKey?: string;
+}
+
+export const BlogSection = ({
+    config,
+    blogPosts: postsData,
+    pageName = 'Home',
+    sectionKey = 'home_page_section_5_blog',
+}: BlogSectionProps) => {
+    const blogSection = pageName === 'Home' 
+    const title = "Latest posts";
+    const maxPosts = 3;
+    
+    const postsArray = 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: 'long',
+                year: 'numeric'
+            });
+        } catch {
+            return 'Recent';
+        }
+    };
+
+    return (
+        <section>
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                <div className="mb-12">
+                    <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+                        {title}
+                    </h2>
+                </div>
+
+                {postsArray.length > 0 ? (
+                    <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+                        {postsArray.map((post: BlogPost) => {
+                            const excerpt = (post as any).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)' }}>
+                                        {formatDate(post.published_at)}
+                                    </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-section', 'aman', BlogSection);

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

@@ -0,0 +1,179 @@
+"use client";
+
+import React from 'react';
+import { ArrowLeft, ArrowRight, ArrowUpRight } from "@untitledui/icons";
+import { Carousel } from '../elements/carousel/carousel-base';
+import { Button, PhotoWithFallback, RoundButton } from '../elements';
+import { cx } from '../../utils/cx';
+import { getAvatarUrl } from '../../utils/photo-helpers';
+import type { BlogPost } from '../../types/api/blog-post';
+
+
+interface BlogSectionProps {
+    config: {
+        pages?: any[];
+    };
+    blogPosts: BlogPost[];
+    pageName?: string;
+    sectionKey?: string;
+}
+
+export const BlogSection = ({
+    config,
+    blogPosts: postsData,
+    pageName = 'Home',
+    sectionKey = 'home_page_section_5_blog',
+}: BlogSectionProps) => {
+    // Extract values from config
+    const blogSection = pageName === 'Home' 
+    const title = "Latest posts";
+    const subtitle = "Interviews, tips, guides, industry best practices, and news.";
+    const maxPosts = 8;
+    const backgroundColor = "bg-primary";
+    const showViewAll = undefined !== false;
+    
+    let postsArray = Array.isArray(postsData) ? postsData : [];
+    
+    // If this is a BlogPost page and use_related is true, filter to related posts
+    if (pageName === 'BlogPost' && undefined) {
+        const currentPath = typeof window !== 'undefined' ? window.location.pathname : '';
+        const currentSlug = currentPath.split('/').pop();
+        
+        postsArray = postsArray
+            .filter((post: BlogPost) => post.slug !== currentSlug)
+            .slice(0, maxPosts);
+    } else {
+        postsArray = postsArray.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 ${backgroundColor} 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">Latest posts</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>
+
+                    {showViewAll && (
+                        <div className="hidden gap-3 lg:flex">
+                            <Button size="xl" href="/blog">View all posts</Button>
+                        </div>
+                    )}
+                </div>
+
+                {postsArray.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">
+                                {postsArray.map((post: BlogPost, index: number) => {
+                                    const author = Array.isArray(post.blog_post_authors) && post.blog_post_authors.length > 0 
+                                        ? post.blog_post_authors[0] 
+                                        : null;
+                                    
+                                    const authorName = author?.name || 'Author';
+                                    const authorAvatarUrl = getAvatarUrl(author?.photo_attachments, author?.id, authorName);
+                                    
+                                    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>
+                        {showViewAll && (
+                            <div className="mt-12 flex flex-col gap-3 lg:hidden">
+                                <Button size="xl" href="/blog">View all posts</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/contact-home.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import ContactSection from "./contact-section";
+
+
+interface ContactHomeProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+}
+
+export const ContactHome = ({
+    config,
+}: ContactHomeProps) => {
+    // Extract values from config
+    
+    return (
+        <ContactSection
+            config={config}
+        />
+    );
+};
+
+