@xyd-js/components 0.1.0-build.168

package/src/pages/PageBlogHome/PageBlogHome.styles.tsx

@@ -0,0 +1,67 @@
+import { css } from "@linaria/core"
+
+export const PageBlogHome = css`
+    --page-blog-home-padding: calc(var(--xyd-nav-item-padding) + var(--xyd-nav-padding));
+    max-width: var(--page-bloghome-max-width, 800px);
+    margin: 0 auto;
+    padding: 48px var(--page-blog-home-padding) 0 var(--page-blog-home-padding);
+    display: flex;
+    flex-direction: column;
+
+    [part="posts"] {
+        --spacing: .25rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--spacing) * 80), 1fr));
+        grid-gap: calc(var(--spacing) * 12) calc(var(--spacing) * 8);
+        min-height: 430px;
+        
+        margin-top: 24px;
+        margin-bottom: 24px;
+    }
+
+    [part="pagination"] {
+        margin-top: 32px;
+    }
+
+    [part="card-content"] {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    [part="card-image"] {
+        width: 100%;
+        height: 180px;
+        overflow: hidden;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+    }
+
+    [part="card-author-row"] {
+        display: flex;
+        align-items: end;
+        flex: 1;
+        gap: 8px;
+        margin-top: 8px;
+    }
+
+    [part="card-author-avatar"] {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        object-fit: cover;
+        display: block;
+    }
+
+    xyd-guidecard {
+        [part="right"], [part="body"], [part="card-content"] {
+            height: 100%;
+        }
+    }
+`;

package/src/pages/PageBlogHome/PageBlogHome.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+
+import { Heading, NavLinks, Tabs, GuideCard, Text } from "../../writer"
+
+import * as cn from "./PageBlogHome.styles"
+import { PageBlogHomeProps, BlogPost, BlogTab } from "./types"
+
+export function PageBlogHome({
+    posts = [],
+    tabs = [],
+    initialTab,
+    heading,
+    subheading,
+    prevLink,
+    nextLink,
+    as = "",
+}: PageBlogHomeProps) {
+    const [tab, setTab] = React.useState(initialTab || (tabs && tabs[0]?.value) || "")
+
+    const filteredPosts = React.useMemo(() => {
+        if (tab === "everything") return posts
+        return posts?.filter(post => post.tag.toLowerCase() === tab)
+    }, [tab, posts])
+
+    return <page-blog-home className={cn.PageBlogHome}>
+        <Heading size={1} subtitle={subheading}>{heading}</Heading>
+        <Tabs value={tab} onChange={setTab}>
+            {tabs.map(t => (
+                <Tabs.Item as={as} href={t.href} value={t.value}>{t.label}</Tabs.Item>
+            ))}
+        </Tabs>
+        <div part="posts">
+            {filteredPosts.map(post => (
+                <GuideCard
+                    key={post.id}
+                    href={post.href}
+                    kind="secondary"
+                    size="md"
+                >
+                    <div part="card-content">
+                        <div part="card-image">
+                            <img src={post.image} alt={post.title} />
+                        </div>
+                        <Text size="small" kind="primary" as="span">{post.tag}</Text>
+                        <GuideCard.Title>
+                            <Text size="large" weight="bold" as="span">{post.title}</Text>
+                        </GuideCard.Title>
+                        <div part="card-author-row">
+                            <img src={post.author.avatar} alt={post.author.name} part="card-author-avatar" />
+                            <Text size="small" as="span">{post.author.name}</Text>
+                            <Text size="small" kind="secondary" as="span">{post.date}</Text>
+                        </div>
+                    </div>
+                </GuideCard>
+            ))}
+        </div>
+        <div part="pagination">
+            <NavLinks
+                prev={prevLink}
+                next={nextLink}
+            />
+        </div>
+    </page-blog-home>
+}

package/src/pages/PageBlogHome/index.ts

@@ -0,0 +1,3 @@
+export {
+    PageBlogHome,
+} from "./PageBlogHome"

package/src/pages/PageBlogHome/types.ts

@@ -0,0 +1,35 @@
+export interface BlogPostAuthor {
+    name: string;
+    avatar: string;
+}
+
+export interface BlogPost {
+    id: number;
+    title: string;
+    image: string;
+    tag: string;
+    author: BlogPostAuthor;
+    date: string;
+    href: string;
+}
+
+export interface BlogTab {
+    value: string;
+    label: string;
+    href?: string;
+}
+
+export interface BlogPaginationLink {
+    title: string;
+    href: string;
+}
+
+export interface PageBlogHomeProps {
+    posts: BlogPost[];
+    tabs: BlogTab[];
+    initialTab?: string;
+    heading?: string;
+    subheading?: string;
+    prevLink?: BlogPaginationLink;
+    nextLink?: BlogPaginationLink;
+} 

package/src/pages/PageBlogPost/PageBlogPost.styles.tsx

@@ -0,0 +1,4 @@
+import { css } from "@linaria/core"
+
+export const PageBlogPost = css`
+    `

package/src/pages/PageBlogPost/PageBlogPost.tsx

@@ -0,0 +1,9 @@
+import * as React from "react"
+
+import * as cn from "./PageBlogPost.styles"
+
+export function PageBlogPost() {
+    return <div className={cn.PageBlogPost}>
+        Blog Post
+    </div>
+}

package/src/pages/PageBlogPost/index.ts

@@ -0,0 +1,3 @@
+export {
+    PageBlogPost,
+} from "./PageBlogPost"

package/src/pages/PageFirstSlide/PageFirstSlide.styles.tsx

@@ -0,0 +1,134 @@
+import { css } from "@linaria/core";
+
+export const globals = css`
+    :global() {
+        @layer themedecorator {
+            xyd-layout-primary[data-layout="page"] {
+                [part="page-article-content"] {
+                    height: 100%;
+                }
+            }
+            @media (min-width: 1024px) {
+                xyd-layout-primary[data-layout="page"] {
+                    grid-template-rows: auto 1fr auto;
+                    grid-template-columns: 1fr;
+                    width: 100%;
+                    height: max-content;
+                    min-height: 100%;
+                    display: grid;
+                }
+            }
+            
+            body:has(xyd-layout-primary[data-layout="page"]) {
+                height: 100%;
+            }
+            html:has(body xyd-layout-primary[data-layout="page"]) {
+                height: 100%;
+            }
+            
+            [data-color-scheme="dark"] {
+                --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);
+            }
+            @media (prefers-color-scheme: dark) {
+                --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);
+            }
+            @media (prefers-color-scheme: dark) {
+                :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+                    --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);
+                }
+            }
+        }
+    }
+`
+
+export const PageFirstSlide = css`
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    gap: 60px;
+    align-items: center;
+    max-width: var(--page-first-slide-container-width, var(--page-home-container-width, 1200px));
+    margin: 0 auto;
+    padding: 50px;
+    height: 100%;
+
+    [part="left"] {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        h1 {
+            --special-text-color: var(--page-first-slide-special-text-color, #353535);
+            background-image: linear-gradient(180deg, var(--special-text-color) 0%, 
+        color-mix(in oklab, var(--special-text-color) 80%, transparent) 100%);
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            -webkit-background-clip: text;
+            font-size: var(--xyd-font-size-3xl);
+            line-height: var(--xyd-line-height-3xl);
+        }
+    }
+
+    [part="buttons"] {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        margin-top: 16px;
+
+        [data-button="true"] {
+            width: 100%;
+        }
+    }
+
+    [part="right"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 400px;
+
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        pre {
+            width: 100%;
+            max-width: 100%;
+            overflow-x: auto;
+        }
+    }
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+        gap: 40px;
+        padding: 40px 20px;
+        min-height: auto;
+
+        [part="left"] {
+            order: 1;
+            text-align: center;
+        }
+
+        [part="right"] {
+            order: 2;
+            min-height: 300px;
+        }
+
+        [part="buttons"] {
+            align-items: center;
+
+            [data-button="true"] {
+                width: 100%;
+                max-width: 300px;
+            }
+        }
+    }
+
+    xyd-codetabs {
+        width: 100%;
+    }
+
+    @media (max-width: 480px) {
+        padding: 20px 16px;
+        gap: 32px;
+    }
+`; 

package/src/pages/PageFirstSlide/PageFirstSlide.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+
+import {
+    Heading,
+    Button,
+} from "../../writer";
+
+import { PageFirstSlideProps } from "./types";
+
+import * as cn from "./PageFirstSlide.styles"
+
+export function PageFirstSlide(props: PageFirstSlideProps) {
+    return <page-first-slide className={cn.PageFirstSlide}>
+        <div part="left">
+            {props.content?.title && (
+                <Heading size={1}>
+                    {props.content.title}
+                </Heading>
+            )}
+
+            {props.content?.description && (
+                <Heading size={4} kind="muted">
+                    {props.content.description}
+                </Heading>
+            )}
+
+            <div part="buttons">
+                {props.content?.primaryButton && (
+                    <Button
+                        href={props.content.primaryButton.href}
+                        kind={props.content.primaryButton.kind || "primary"}
+                        size="lg"
+                        disabled={props.content.primaryButton.disabled}
+                    >
+                        {props.content.primaryButton.title}
+                    </Button>
+                )}
+
+                {props.content?.secondaryButton && (
+                    <Button
+                        href={props.content.secondaryButton.href}
+                        kind={props.content.secondaryButton.kind || "secondary"}
+                        size="lg"
+                        disabled={props.content.secondaryButton.disabled}
+                    >
+                        {props.content.secondaryButton.title}
+                    </Button>
+                )}
+            </div>
+        </div>
+
+        <div part="right">
+            {props.rightContent}
+        </div>
+    </page-first-slide>
+} 

package/src/pages/PageFirstSlide/index.ts

@@ -0,0 +1 @@
+export * from "./PageFirstSlide" 

package/src/pages/PageFirstSlide/types.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+/*
+* Props for the PageFirstSlide component.
+*/
+export interface PageFirstSlideProps {
+    /**
+     * The main content for the slide.
+     */
+    content?: PageFirstSlideContent;
+
+    /**
+     * Optional React node to display on the right side.
+     */
+    rightContent?: React.ReactNode;
+}
+
+/*
+* Represents a button displayed on the first slide page.
+*/
+export interface PageFirstSlideButton {
+    /*
+    * The button label.
+    */
+    title: string;
+
+    /**
+     * The URL the button links to.
+     */
+    href: string;
+
+    /**
+     * The visual style of the button.
+     */
+    kind?: "primary" | "secondary";
+
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+}
+
+/*
+* Content structure for the PageFirstSlide component.
+*/
+export interface PageFirstSlideContent {
+    /**
+     * The main title text.
+     */
+    title?: string;
+
+    /**
+     * The description text.
+     */
+    description?: string;
+
+    /**
+     * The primary action button.
+     */
+    primaryButton?: PageFirstSlideButton;
+
+    /**
+     * The secondary action button.
+     */
+    secondaryButton?: PageFirstSlideButton;
+}
+

package/src/pages/PageHome/PageHome.styles.tsx

@@ -0,0 +1,51 @@
+import { css } from "@linaria/core";
+
+export const globals = css`
+    :global() {
+        :root {
+            --page-home-hero-font-size: 50px;
+        }
+    }
+`;
+
+export const PageHome = css`
+    [part="hero"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 80px 50px;
+        background: var(--page-home-hero-background);
+
+        h1 {
+            font-size: var(--page-home-hero-font-size, 50px);
+            text-align: center;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: 400;
+        }
+
+        img {
+            width: auto;
+            max-height: 60px;
+            padding-bottom: 18px;
+        }
+
+        [data-button="true"] {
+            margin-top: var(--xyd-padding-xlarge);
+        }
+    }
+
+    [part="sections"] {
+        max-width: var(--page-home-container-width, 1300px);
+        margin: 0 auto;
+        padding: 30px 100px;
+    }
+
+    @media (max-width: 1024px) {
+        [part="sections"] {
+            padding: 25px;
+            padding-inline: var(--theme-sidebar-padding-total, 25px);
+        }
+    }
+`; 

package/src/pages/PageHome/PageHome.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+
+import {
+    Heading,
+    GuideCard,
+    List,
+    Button,
+} from "../../writer";
+
+
+import { PageHomeProps } from "./types";
+import { GridDecorator } from "../../content/GridDecorator";
+
+import * as cn from "./PageHome.styles"
+
+export function PageHome(props: PageHomeProps) {
+    return <page-home className={cn.PageHome}>
+        <div part="hero">
+            {props?.hero?.image ? <img src={props.hero.image} alt={props.hero.title} /> : null}
+            <Heading size={1}>
+                {props.hero?.title}
+            </Heading>
+            <Heading size={3} kind="muted">
+                {props.hero?.description}
+            </Heading>
+
+            {props?.hero?.button ? <Button href={props.hero.button.href}>{props.hero.button.title}</Button> : null}
+        </div>
+
+        <div part="sections">
+            {
+                props.sections?.map((section, index) => <React.Fragment key={`${section.title}-${index}`}>
+                    {
+                        section?.title ? <div part="section-title">
+                            <Heading size={3}>
+                                {section.title}
+                            </Heading>
+                        </div> : null
+                    }
+
+                    {
+                        section?.cards?.length ? <div part="section-cards">
+                            <GridDecorator cols={3}>
+                                <List>
+                                    <List.Item>
+                                        <List>
+                                            {section.cards?.map((card, index) => (
+                                                <List.Item key={`${card.title}-${index}`}>
+                                                    <GuideCard {...card} />
+                                                </List.Item>
+                                            ))}
+                                        </List>
+                                    </List.Item>
+                                </List>
+                            </GridDecorator>
+                        </div> : null
+                    }
+                </React.Fragment>)
+            }
+        </div>
+    </page-home>
+}

package/src/pages/PageHome/index.ts

@@ -0,0 +1,3 @@
+export {
+    PageHome,
+} from "./PageHome";

package/src/pages/PageHome/types.ts

@@ -0,0 +1,79 @@
+import { GuideCardProps } from "../../writer/GuideCard/GuideCard";
+
+/**
+ * Props for the PageHome component.
+ */
+export interface PageHomeProps {
+    /**
+     * Hero section content for the home page.
+     */
+    hero?: PageHomeHero;
+
+    /**
+     * Sections to display on the home page.
+     */
+    sections?: PageHomeSection[];
+}
+
+/**
+ * Button used in the hero section of the home page.
+ */
+export interface PageHomeHeroButton {
+    /**
+     * The button label.
+     */
+    title: string;
+
+    /**
+     * The URL the button links to.
+     */
+    href: string;
+}
+
+/**
+ * Hero section content for the home page.
+ */
+export interface PageHomeHero {
+    /**
+     * The main title text.
+     */
+    title?: string;
+
+    /**
+     * The description text.
+     */
+    description?: string;
+
+    /**
+     * The image URL for the hero section.
+     */
+    image?: string;
+
+    /**
+     * The main button for the hero section.
+     */
+    button?: PageHomeHeroButton;
+}
+
+/**
+ * Card displayed in a section on the home page. Extends GuideCardProps.
+ */
+export interface PageHomeCard extends GuideCardProps {
+
+}
+
+/**
+ * Section displayed on the home page.
+ */
+export interface PageHomeSection {
+    /**
+     * The section title.
+     */
+    title?: string;
+    
+    /**
+     * Cards to display in the section.
+     */
+    cards?: PageHomeCard[];
+}
+

package/src/pages/index.ts

@@ -0,0 +1,7 @@
+export * from "./PageBlogHome"
+
+export * from "./PageBlogPost"
+
+export * from "./PageHome"
+
+export * from "./PageFirstSlide"