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:

   webpage := layouts.NewPageLayout(app, r, baselayouts.Options{
       Title:   "Welcome",
       Content: hb.Div().Class("container").Text("Page 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.