Dashboard
if len(rows) == 0 {
No items yet.
}
for _, row := range rows {
@Card.Call(CardProps{Title: row.Title, Tone: row.Tone}, CardSlots{
Children: ui.Text(row.Description),
Footer: ui.Fragment(itemFooter()),
})
}
}
templ dashboardPage(rows []Item, stylesheet string) {
@layout.Page.Call(layout.Props{Title: "Dashboard", Stylesheet: stylesheet},
layout.Slots{Children: ui.Fragment(dashboardBody(rows))})
}
```
- Private helpers such as `itemFooter` need no public definition. Add one only for
a reusable, validated contract.
- `ui.Text` wraps request text and escapes it.
- `ui.Fragment` adapts compiled markup. Never pass it strings.
- `ui.Group` combines fragments that are already typed.
## 4. Add the view and URL
### apps/dashboard/app.go
```go
package dashboard
import (
"context"
"log/slog"
"net/http"
"github.com/fauzaanu/cicadel"
"github.com/fauzaanu/cicadel/response"
"github.com/fauzaanu/cicadel/static"
"github.com/fauzaanu/cicadel/ui"
"github.com/fauzaanu/cicadel/urls"
)
type Item struct { Title, Description, Tone string }
type LoadItems func(context.Context) ([]Item, error)
func New(load LoadItems) cicadel.App {
return cicadel.App{
Name: "dashboard",
Components: []ui.Export{Card.Export(1)},
Routes: []urls.Route{urls.Path("GET", "/dashboard", "dashboard:index",
func(w http.ResponseWriter, r *http.Request) {
rows, err := load(r.Context())
if err != nil { response.Error(w, 500); return }
stylesheet, err := static.URL(r.Context(), "project", "app.css")
if err != nil { response.Error(w, 500); return }
err = (ui.Renderer{}).HTML(r.Context(), w, 200, ui.Fragment(dashboardPage(rows, stylesheet)))
if err != nil {
slog.ErrorContext(r.Context(), "render dashboard", "error", err)
if !ui.Committed(err) { response.Error(w, 500) }
}
}),
},
}
}
```
- The loader is explicit. It can query through your application's database.
- The component never discovers a request-wide map.
- `static.URL` resolves the project's compiled stylesheet to its content-hashed URL.
The handler passes it in as a prop. See [static files](https://cicadel.fauzaanu.com/en/dev/howto/static-files/index.md).
- Keep permissions in the handler and its query scope.
### Register the app: project/apps.go
For the runnable demo, replace the starter's empty app list with this loader:
```go
package project
import (
"context"
"example.com/componentguide/apps/dashboard"
"github.com/fauzaanu/cicadel"
"gorm.io/gorm"
)
func InstalledApps(_ *gorm.DB) ([]cicadel.App, error) {
return []cicadel.App{dashboard.New(func(ctx context.Context) ([]dashboard.Item, error) {
return []dashboard.Item{{Title: "Ready", Description: "Typed props and slots work.", Tone: "success"}}, ctx.Err()
})}, nil
}
```
In your own project, use your module's import path.
A direct call to `Card` uses that definition. For an overridable library, resolve it
through `ComponentRegistry` and inject the result into the page factory. See
[the override recipe](https://cicadel.fauzaanu.com/en/dev/sources/skills/cicadel-components/references/patterns.md#libraries-and-project-overrides).
## 5. Test the behavior
### apps/dashboard/app_test.go
```go
package dashboard
import (
"context"
"strings"
"testing"
"testing/fstest"
"github.com/fauzaanu/cicadel"
"github.com/fauzaanu/cicadel/apptest"
"github.com/fauzaanu/cicadel/ui"
)
func TestDashboard(t *testing.T) {
attack := ``
project := cicadel.App{Name: "project", Static: fstest.MapFS{"app.css": {Data: []byte("body{}")}}}
app := apptest.New(t, apptest.Settings(), []cicadel.App{project,
New(func(context.Context) ([]Item, error) {
return []Item{{Title: attack, Description: attack}}, nil
}),
})
stylesheet, err := app.Static().URL("project", "app.css")
if err != nil { t.Fatal(err) }
res := apptest.NewClient(app).Get(t, "/dashboard").Status(t, 200)
res.Contains(t, `rel="stylesheet"`).Contains(t, `href="`+stylesheet+`"`)
res.Contains(t, "Back to home").Contains(t, "border-slate-200")
if strings.Contains(string(res.Body), "