Frontend: Layouts

How to use Dracory's layout system for consistent page structures.

Layouts

The internal/layouts package provides the shared page scaffolds used to compose pages in pure Go. All layouts accept a baselayouts.Options struct (from github.com/dracory/base/layouts) and render a complete HTML document via ToHTML().

Available Layouts

  • NewPageLayout(app, r, options) – the standard public page scaffold. It renders the site navbar (auth-aware), theme picker, and footer, and appends a section-aware suffix to the page title. Set options.DisableNavbar to true for pages that provide their own navigation.
  • NewBlankLayout(app, r, options) – a chrome-less layout without navbar or footer, used for auth pages and other standalone screens.
  • NewCmsLayout(app, r, options) – the layout used for CMS-rendered pages, integrating with cmsstore page content.
  • NewPageLayoutWithConfig(app, r, options, config) – the page layout with section overrides (custom navbar function, admin chrome). Section packages such as internal/controllers/admin/layout build on this.

Usage

import (
    "net/http"
    "project/internal/layouts"
    baselayouts "github.com/dracory/base/layouts"
    "github.com/dracory/hb"
)

func (c *controller) Handler(w http.ResponseWriter, r *http.Request) string {
    return layouts.NewPageLayout(c.app, r, baselayouts.Options{
        Title:   "My Page",
        Content: hb.Div().
            Class("my-content").
            Child(hb.H1().Text("Page Title")).
            Child(hb.P().Text("Page content goes here.")),
        Scripts: []string{"// Custom JavaScript"},
    }).ToHTML()
}

Useful baselayouts.Options fields include Title, MetaDescription, MetaKeywords, CanonicalURL, ImageURL, Content, ScriptURLs, Scripts, StyleURLs, Styles, and DisableNavbar.

Theme System

Pages ship with the Bootlegance theme system. The active theme is resolved per request from a theme cookie via layouts.ThemeName(r), falling back to layouts.ThemeDefault. Available themes are listed in layouts.BootleganceThemes and served from a pinned Bootlegance release on jsDelivr via layouts.ThemeStyleURL(theme).

  • Theme switching endpoint – GET /theme?theme=<name>&redirect=<path> stores the choice in a cookie and redirects back. Only local redirects are allowed.
  • layouts.ThemeDropdown(app, r) – renders the navbar theme picker wired to the /theme endpoint.

Admin Layouts

Admin screens use internal/controllers/admin/layout (adminlayout.New, adminlayout.NewCrud, adminlayout.Page), which wraps the shared page scaffold with the admin navbar and menus. See the Dashboard page for details.

layouts.NewUserBreadcrumbsSection(path) and layouts.NewWebsiteBreadcrumbsSection(path) render breadcrumb sections from []baselayouts.Breadcrumb / []bs.Breadcrumb slices respectively.