Frontend: Home

Overview of Dracory's frontend architecture and components.

Key Features

• HB (HTML Builder): Templating system for building HTML in Go
• Layout System: Consistent page structures and reusable components
• Responsive Design: Built with Bootstrap 5 grid system
• Form Handling: Simplified form creation and processing
• AJAX Support: Easy API integration and dynamic content loading

Getting Started

1. Include frontend assets in your layout:

<link href="/assets/css/app.css" rel="stylesheet">
<script src="/assets/js/app.js" defer></script>

2. Pick your templating approach (we recommend HB for its pure-Go ergonomics, but any templating engine you prefer will work):

page := hb.Div().
    Child(hb.H1().Text("Welcome")).
    Child(hb.P().Text("This is a sample page"))

3. Extend base layouts for consistent UI:

content := hb.Div().Class("container")
webpage := layouts.NewUserLayout(app, r, content)

Recommended Structure

Dracory encourages a self-contained setup: keep the page, its sections, and any supporting assets together so the feature lives (and can be removed) as a single unit.

frontend/
└── home/
    ├── sections/      # HB fragments for each block on the page
    ├── assets/        # CSS/JS/Images scoped to this page
    └── page.go        # Entry point wiring the sections together

Use whatever naming best fits your project, but aim for this “one directory per feature” discipline to minimize cross-folder dependencies.