Log In
Get
Docs
Showcase
Community

Web Templates, Assets, and Scripts

DeploySolo’s frontend lives in the web/ folder: templates for dynamic HTML, and public assets for static files like styles, scripts, and vendors. This setup integrates htmx for reactivity, WebAwesome for UI components, and minimal JS for extras like dark mode.

Templates

Templates are Go html/template files in web/templates/. Pages (full HTML) go in pages/, like index.html or todo.html. Partials (reusable snippets) in partials/, like head.tmpl and navbar.tmpl.

Load them in main.go with render.LoadTemplates(pb, "web/templates").

Render in handlers:

  • Full page: render.Render("todo.html", data)(e)
  • Partial block: render.RenderRaw("task", data)(e) (uses {{ define "task" }} in the template)

Example from todo.html:

{{ define "task" }}
  <div id="task-{{ .ID }}" class="wa-flank:end task">
    <wa-input value="{{ .Label }}" appearance="filled" disabled></wa-input>
    <wa-button hx-get="/tasks/{{ .ID }}" hx-target="#task-{{ .ID }}" appearance="plain">
      <wa-icon name="pencil"></wa-icon>
    </wa-button>
  </div>
{{ end }}

<!-- Full page HTML here, with htmx attributes like hx-post, hx-target -->
<body hx-boost="true">
  {{ template "navbar" . }}
  <!-- content with forms and dynamic elements -->
</body>

Use htmx attributes (e.g., hx-get, hx-swap) for AJAX interactions without JS. Enable hx-boost=“true” on body for app-wide boosting. Include partials with {{ template “head” . }}. Pass data from handlers to templates.

See Working with Templates for editing and adding.

Assets and Scripts

Static files in web/public/ are served at /public/. In main.go, add se.Router.GET("/public/{path...}", apis.Static(os.DirFS("web/public"), false)).

  • styles.css: Main stylesheet for custom CSS.
  • js/: Custom scripts.
    • app.js: General app logic (if needed).
    • components/darkmode.js: Handles light/dark theme switching.
  • vendor/: Third-party libraries.
    • fontawesome-free-7.1.0-web/: Icons
    • htmx.js: Core for htmx.
    • pocketbase.umd.js: Client-side PocketBase SDK (for JS interactions with DB if needed).
    • webawesome-3.1.0/: Web Awesome UI library—framework-agnostic web components Customizable with CSS, includes dark theme support.

Include assets in head.tmpl, e.g., <script src="/public/vendor/htmx.js"></script> and <link rel="stylesheet" href="/public/styles.css">. To extend: Add JS files to js/, CSS to styles.css, or new vendors. Use WebAwesome components in templates for consistent, accessible UI. This keeps your app lightweight—focus on HTML with htmx for interactivity, minimal JS.