Docs

package docs

import "github.com/alternayte/gx"

var AsideFixtures = gx.Fixtures[AsideProps]{
	"Note":    {Kind: Note, Title: "Note", Children: gx.Text("A note.")},
	"Tip":     {Kind: Tip, Children: gx.Text("A tip.")},
	"Caution": {Kind: Caution, Children: gx.Text("Careful.")},
	"Danger":  {Kind: Danger, Title: "Danger", Children: gx.Text("Stop.")},
}

package docs

props {
  // Kind sets the tone of the callout: Note, Tip, Caution or Danger.
  Kind     Kind = Note
  // Title is the heading of the callout. Empty omits it.
  Title    string = ""
  // Children is the content of the callout.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<aside class={gx.Cx("gx-aside my-4 rounded-lg border border-border bg-muted/40 p-4 text-sm", kindClass[p.Kind])} {...p.Attrs}>
  if p.Title != "" {
    <p class="gx-aside-title m-0 mb-1 font-semibold">{p.Title}</p>
  }
  <div class="gx-aside-body [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">{p.Children}</div>
</aside>

package docs

import "github.com/alternayte/gx"

var BadgeFixtures = gx.Fixtures[BadgeProps]{
	"Default":     {Label: "Default"},
	"Secondary":   {Label: "Secondary", Variant: BadgeSecondary},
	"Destructive": {Label: "Destructive", Variant: BadgeDestructive},
	"Outline":     {Label: "Outline", Variant: BadgeOutline},
}

package docs

props {
  // Label is the text of the badge.
  Label   string
  // Variant sets the visual style: BadgeDefault, BadgeSecondary, BadgeDestructive or
  // BadgeOutline.
  Variant BadgeVariant = BadgeDefault
  // Attrs adds HTML attributes to the root element.
  Attrs   gx.Attrs = nil
}

<span class={gx.Cx("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium", badgeClass[p.Variant])} {...p.Attrs}>{p.Label}</span>

package docs

import "github.com/alternayte/gx"

var CardFixtures = gx.Fixtures[CardProps]{
	"TitleAndBody": {Title: "Card", Description: "A short description.", Children: gx.Text("Body text.")},
	"BodyOnly":     {Children: gx.Text("Body only.")},
	"TitleOnly":    {Title: "Title only"},
}

package docs

props {
  // Title is the heading of the card. Empty omits it.
  Title       string = ""
  // Description is the text below the title. Empty omits it.
  Description string = ""
  // Children is the content of the card. Nil omits the body.
  Children    gx.Node = nil
  // Attrs adds HTML attributes to the root element.
  Attrs       gx.Attrs = nil
}

<div class="gx-card my-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm" {...p.Attrs}>
  if p.Title != "" {
    <h3 class="m-0 text-base font-semibold leading-none tracking-tight">{p.Title}</h3>
  }
  if p.Description != "" {
    <p class="m-0 mt-1.5 text-sm text-muted-foreground">{p.Description}</p>
  }
  if p.Children != nil {
    <div class="gx-card-body mt-4">{p.Children}</div>
  }
</div>

package docs

import "github.com/alternayte/gx"

var CardGridFixtures = gx.Fixtures[CardGridProps]{
	"Two": {Children: gx.Frag(
		Card(CardProps{Title: "One", Children: gx.Text("First.")}),
		Card(CardProps{Title: "Two", Children: gx.Text("Second.")}),
	)},
}

package docs

props {
  // Children is the cards of the grid.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div class="gx-card-grid my-4 grid gap-4 sm:grid-cols-2" {...p.Attrs}>{p.Children}</div>

package docs

import "github.com/alternayte/gx"

// The fixtures show go.mod, a file every app has: the example code names it
// with gx.CodeFile.
var CodeFixtures = gx.Fixtures[CodeProps]{
	"Go":     {Code: gx.Code{File: "go.mod", Lang: "go", Source: "module app\n\ngo 1.25.0\n"}, Title: "go.mod"},
	"Marked": {Code: gx.Code{File: "go.mod", Lang: "go", Source: "module app\n\ngo 1.25.0\n"}, Marks: []int{1}},
}

package docs

import "github.com/alternayte/gx"
import "github.com/alternayte/gx/content"

props {
  // Code is the source to show. The compiler fills it at build time from a repository file.
  Code  gx.Code
  // Title is the text in the frame bar.
  Title string = ""
  // Wrap wraps long lines.
  Wrap  bool = false
  // Marks holds the 1-based numbers of the lines to highlight.
  Marks []int = nil
  // Ins holds the 1-based numbers of the lines to mark as inserted.
  Ins   []int = nil
  // Del holds the 1-based numbers of the lines to mark as deleted.
  Del   []int = nil
  // Words holds the 1-based numbers of the lines to outline.
  Words []int = nil
}

{content.Code(p.Code, content.CodeOptions{Title: p.Title, Wrap: p.Wrap, Marks: p.Marks, Ins: p.Ins, Del: p.Del, Words: p.Words})}

package docs

import "github.com/alternayte/gx"

var FileTreeFixtures = gx.Fixtures[FileTreeProps]{
	"Tree": {Items: []FileTreeItem{
		{Name: "app", Dir: true, Children: []FileTreeItem{
			{Name: "main.go", Comment: "the app entry"},
			{Name: "theme.css"},
		}},
		{Name: "go.mod"},
	}},
}

package docs

props {
  // Items holds the top-level files and directories of the tree.
  Items []FileTreeItem
  // Attrs adds HTML attributes to the root element.
  Attrs gx.Attrs = nil
}

<ul class="gx-file-tree my-4 list-none space-y-1 p-0 text-sm" {...p.Attrs}>
  for _, it := range p.Items {
    <FileTreeItemRow item={it} />
  }
</ul>

package docs

import "github.com/alternayte/gx"

var FileTreeItemRowFixtures = gx.Fixtures[FileTreeItemRowProps]{
	"File": {Item: FileTreeItem{Name: "main.go", Comment: "entry"}},
	"Dir": {Item: FileTreeItem{Name: "app", Dir: true, Children: []FileTreeItem{
		{Name: "main.go"},
	}}},
}

package docs

props {
  // Item is the file or directory of the row. Its children show as a nested list.
  Item FileTreeItem
}

<li class="gx-file-tree-item">
  <span class="flex items-center gap-2">
    if p.Item.Dir {
      <span class="font-medium text-foreground">{p.Item.Name}/</span>
    } else {
      <span>{p.Item.Name}</span>
    }
    if p.Item.Comment != "" {
      <span class="text-muted-foreground">{p.Item.Comment}</span>
    }
  </span>
  if len(p.Item.Children) > 0 {
    <ul class="mt-1 list-none space-y-1 border-l border-border p-0 pl-4">
      for _, child := range p.Item.Children {
        <FileTreeItemRow item={child} />
      }
    </ul>
  }
</li>

package docs

import "github.com/alternayte/gx"

var HeroFixtures = gx.Fixtures[HeroProps]{
	"Full":  {Title: "Gx", Tagline: "Server-rendered Go web apps.", Actions: gx.Raw(gx.SafeHTML(`<a href="/start">Get started</a>`))}, //gx:trusted a fixture is repository source (SI-12)
	"Title": {Title: "Title only"},
}

package docs

props {
  // Title is the heading of the hero.
  Title    string
  // Tagline is the text below the title. Empty omits it.
  Tagline  string = ""
  // Actions is the row of links or buttons below the tagline. Nil omits it.
  Actions  gx.Node = nil
  // Children is the content below the actions. Nil omits it.
  Children gx.Node = nil
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<header class="gx-hero my-8 text-center" {...p.Attrs}>
  <h1 class="m-0 text-4xl font-bold tracking-tight">{p.Title}</h1>
  if p.Tagline != "" {
    <p class="mx-auto mt-3 max-w-2xl text-lg text-muted-foreground">{p.Tagline}</p>
  }
  if p.Actions != nil {
    <div class="mt-6 flex flex-wrap items-center justify-center gap-3">{p.Actions}</div>
  }
  if p.Children != nil {
    <div class="gx-hero-body mt-8">{p.Children}</div>
  }
</header>

package docs

import "github.com/alternayte/gx"

var IconFixtures = gx.Fixtures[IconProps]{
	"Decorative": {Body: gx.SafeHTML(`<path d="M4 12h16" />`)},
	"Labelled":   {Body: gx.SafeHTML(`<path d="M4 12h16" />`), Label: "A dash"},
}

package docs

props {
  // Body is the inner markup of the svg, from a pinned icon pack.
  Body  gx.SafeHTML
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon(string(p.Body), gx.IconProps{Label: p.Label, Class: gx.Cx("inline-block size-5", p.Class)})}

package docs

import "github.com/alternayte/gx"

var LLMSkipFixtures = gx.Fixtures[LLMSkipProps]{
	"Default": {Children: gx.Text("Only for the page.")},
}

package docs

props {
  // Children is the content of the block. The component renders nothing; the block marks
  // Markdown that stays out of llms.txt.
  Children gx.Node = nil
}

package docs

import "github.com/alternayte/gx"

var LinkButtonFixtures = gx.Fixtures[LinkButtonProps]{
	"Primary":   {Href: gx.URL("/start"), Children: gx.Text("Get started")},
	"Secondary": {Href: gx.URL("/start"), Variant: ButtonSecondary, Children: gx.Text("Secondary")},
	"Outline":   {Href: gx.URL("/start"), Variant: ButtonOutline, Children: gx.Text("Outline")},
	"Ghost":     {Href: gx.URL("/start"), Variant: ButtonGhost, Children: gx.Text("Ghost")},
}

package docs

props {
  // Href is the link target.
  Href     gx.URL
  // Variant sets the visual style: ButtonPrimary, ButtonSecondary, ButtonOutline or
  // ButtonGhost.
  Variant  ButtonVariant = ButtonPrimary
  // Children is the button label.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<a href={p.Href} class={gx.Cx("gx-link-button my-2 inline-flex items-center rounded-md px-4 py-2 text-sm font-medium no-underline", buttonClass[p.Variant])} {...p.Attrs}>{p.Children}</a>

package docs

import "github.com/alternayte/gx"

var LinkCardFixtures = gx.Fixtures[LinkCardProps]{
	"Full":  {Href: gx.URL("/errors/GX1000"), Title: "Diagnostics", Description: "Every code has a page.", Children: gx.Text("Read on.")},
	"Short": {Href: gx.URL("/start"), Title: "Start"},
}

package docs

props {
  // Href is the link target.
  Href        gx.URL
  // Title is the heading of the card.
  Title       string
  // Description is the text below the title. Empty omits it.
  Description string = ""
  // Children is the content below the description. Nil omits it.
  Children    gx.Node = nil
  // Attrs adds HTML attributes to the root element.
  Attrs       gx.Attrs = nil
}

<a href={p.Href} class="gx-link-card my-4 block rounded-lg border border-border p-4 no-underline transition-colors hover:bg-accent" {...p.Attrs}>
  <span class="block font-medium text-foreground">{p.Title}</span>
  if p.Description != "" {
    <span class="mt-1 block text-sm text-muted-foreground">{p.Description}</span>
  }
  if p.Children != nil {
    <span class="gx-link-card-body mt-2 block text-sm">{p.Children}</span>
  }
</a>

package docs

import "github.com/alternayte/gx"

var StepsFixtures = gx.Fixtures[StepsProps]{
	"Three": {Children: gx.Raw(gx.SafeHTML(`<ol><li>First</li><li>Second</li><li>Third</li></ol>`))}, //gx:trusted a fixture is repository source (SI-12)
}

package docs

props {
  // Children is the ordered list of steps.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div class="gx-steps my-4 [&>ol]:m-0 [&>ol]:list-none [&>ol]:space-y-4 [&>ol]:p-0 [&>ol>li]:border-l-2 [&>ol>li]:border-border [&>ol>li]:pl-4" {...p.Attrs}>{p.Children}</div>

package docs

import "github.com/alternayte/gx"

var TabItemFixtures = gx.Fixtures[TabItemProps]{
	"Text": {Label: "Tab", Children: gx.Text("Panel body.")},
}

package docs

props {
  // Label is the text of the tab button. It must be unique inside one tab group.
  Label    string
  // Children is the content of the tab panel.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div class="gx-tab" data-gx-tab-item {...p.Attrs}>
  <button type="button" class="gx-tab-button -mb-px border-b-2 border-transparent px-3 py-1.5 text-sm font-medium text-muted-foreground hover:text-foreground data-[selected=true]:border-foreground data-[selected=true]:text-foreground" data-gx-tab={p.Label} aria-expanded="false">{p.Label}</button>
  <div class="gx-tab-panel pt-4" data-gx-tab-panel>{p.Children}</div>
</div>

package docs

import "github.com/alternayte/gx"

var TabsFixtures = gx.Fixtures[TabsProps]{
	"Two": {Children: gx.Frag(
		TabItem(TabItemProps{Label: "Postgres", Children: gx.Text("Postgres body.")}),
		TabItem(TabItemProps{Label: "SQL Server", Children: gx.Text("SQL Server body.")}),
	)},
	"Synced": {Sync: "db", Children: gx.Frag(
		TabItem(TabItemProps{Label: "Option A", Children: gx.Text("A.")}),
		TabItem(TabItemProps{Label: "Option B", Children: gx.Text("B.")}),
	)},
}

package docs

props {
  // Sync is the key that links tab groups. Groups with the same key switch together and
  // remember the chosen tab.
  Sync     string = ""
  // Default is the label of the tab that starts open. Empty opens the first tab.
  Default  string = ""
  // Children is the tab items.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div class="gx-tabs my-4" data-gx-tabs data-sync={p.Sync} data-default={p.Default} {...p.Attrs}>{p.Children}</div>

package docs

import "github.com/alternayte/gx"

// kindClass maps a callout tone to its accent classes (REQ-STY-05).
var kindClass = gx.Enum[Kind]{
	Note:    "",
	Tip:     "gx-aside-tip",
	Caution: "gx-aside-caution",
	Danger:  "gx-aside-danger",
}

// Kind is the tone of a docs callout (REQ-CNT-05).
type Kind string

// The tones of docs.Aside.
const (
	Note    Kind = "note"
	Tip     Kind = "tip"
	Caution Kind = "caution"
	Danger  Kind = "danger"
)

package docs

import "github.com/alternayte/gx"

// badgeClass maps a badge variant to its classes (REQ-STY-05).
var badgeClass = gx.Enum[BadgeVariant]{
	BadgeDefault:     "border-transparent bg-primary text-primary-foreground",
	BadgeSecondary:   "border-transparent bg-secondary text-secondary-foreground",
	BadgeDestructive: "border-transparent bg-destructive text-white",
	BadgeOutline:     "text-foreground",
}

// BadgeVariant is the visual style of a docs badge (REQ-CNT-05).
type BadgeVariant string

// The variants of docs.Badge.
const (
	BadgeDefault     BadgeVariant = "default"
	BadgeSecondary   BadgeVariant = "secondary"
	BadgeDestructive BadgeVariant = "destructive"
	BadgeOutline     BadgeVariant = "outline"
)

package docs

// FileTreeItem is one file or directory of docs.FileTree (REQ-CNT-05).
type FileTreeItem struct {
	// Name is the shown base name.
	Name string
	// Dir marks a directory.
	Dir bool
	// Comment adds a short note after the name.
	Comment string
	// Children holds the directory entries.
	Children []FileTreeItem
}

package docs

import "github.com/alternayte/gx"

// buttonClass maps a link-button variant to its classes (REQ-STY-05).
var buttonClass = gx.Enum[ButtonVariant]{
	ButtonPrimary:   "bg-primary text-primary-foreground hover:bg-primary/90",
	ButtonSecondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
	ButtonOutline:   "border border-border bg-transparent hover:bg-accent",
	ButtonGhost:     "bg-transparent hover:bg-accent",
}

// ButtonVariant is the visual style of a docs link button (REQ-CNT-05).
type ButtonVariant string

// The variants of docs.LinkButton.
const (
	ButtonPrimary   ButtonVariant = "primary"
	ButtonSecondary ButtonVariant = "secondary"
	ButtonOutline   ButtonVariant = "outline"
	ButtonGhost     ButtonVariant = "ghost"
)