Assets System

Overview

CCF includes an assets package that can optionally fingerprint and embed static files, such as Tailwind CSS or other resources. It rewrites file paths to include a hash for cache-busting.

Project Setup

A typical structure might include:

internal/
  web/
    public/
      styles.css
      script.js

You can embed or read these files by referencing the directory in Go:

package web

import (
    "embed"
    "github.com/labstack/echo/v4"
    "go.quinn.io/ccf/assets"
    "log"
    "os"
)

//go:embed public
var assetsFS embed.FS

func Run() {
    e := echo.New()

    // Attach the fingerprinted assets.
    assets.Attach(
        e,
        "public",               // URL prefix -> /public
        "internal/web/public",  // local directory path
        assetsFS,               // embedded FS
        os.Getenv("USE_EMBEDDED_ASSETS") == "true",
    )

    log.Fatal(e.Start(":3000"))
}

Using Assets in Templates

Inside your .templ files, you can reference assets.Path("filename.css") to get a fingerprinted path:

templ Index() {
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href={ assets.Path("styles.css") }/>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
    </html>
}

If styles.css is fingerprinted to styles.a1b2c3.css, the above call automatically produces <link rel="stylesheet" href="/public/styles.a1b2c3.css" /> at runtime.

Assets System

Overview

Project Setup

Using Assets in Templates

Assets System

Font Tool