Skip to content
v0.2.7

Component Page

A foundational reference-page frame for showing a rendered preview, usage source, named variants, and consumer-owned guidance.

Reference composition Rendered example

Deployments

A page identity and one clear action establish the reference surface before examples begin.

Preview Rendered component state, using the same page-owned layout as the production docs.
Source Copyable Go and templ code remains next to the rendered evidence.
Guidance The consumer decides intent, content, and the right component states.
Usage Example 
@componentpage.Page(componentpage.Config{
    Title:       "Button",
    Description: "Trigger an action with a clear accessible label.",
    Primary: componentpage.Example{
        PreviewLabel: "Default",
        Preview:      button.Button(),
        Code:         "@button.Button() { Continue }",
    },
})

Named states

Keep meaningful variants close to the default example so readers can compare the component contract without leaving the page.

Named states Rendered example

Button

A named secondary example keeps an unavailable state explicit.

Each example can add its own description, preview, source block, and stable heading anchor.

Named states 
Sections: []componentpage.Example{{
    Title:       "Disabled",
    Description: "Keep unavailable states explicit in the reference page.",
    Preview:     button.Button(button.Disabled()),
    Code:        "@button.Button(button.Disabled()) { Continue }",
}}

Install and compose

Install 
go get github.com/araihu/goshtoso-app-shells/[email protected]

componentpage renders an embedded page frame. Its document shell owns runtime and asset mounting.

Consumer boundary

The frame owns order, labels, spacing, and code presentation. The consumer owns every preview, code sample, description, control, and follow-up section.