Skip to content

use pico.css for html encoding #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

use pico.css for html encoding #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
49db047
fix: add doctype to page templates
dolanor Oct 15, 2025
b825039
fix: use idField helper for getting ID
dolanor Oct 15, 2025
51ad113
feat: add pico.css
dolanor Oct 15, 2025
58e347c
fix: convert all ID to string
dolanor Oct 15, 2025
3cadcd3
feat: improve semantic HTML
dolanor Oct 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions encoding/html/templates/entity_page.gotpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{{ define "entity_page" }}
<!doctype html>
<html>
<head>
{{ template "entity_header" }}
Expand Down
13 changes: 8 additions & 5 deletions examples/html-template/templates/entity.gotpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,25 @@
{{ with .Entity }}
<p>
<!-- TODO use fieldset -->
<div class="entity" id="entity-{{ .ID }}" hx-target="this" hx-select=".entity" hx-swap="outerHTML">
<div class="entity" id="entity-{{ . | idField }}" hx-target="this" hx-select=".entity" hx-swap="outerHTML">
<fieldset>
{{- range $v := .Fields }}
{{ if eq $v.Key "ID" }}
<div><label>{{ $v.Key }}</label>: <a href="{{ $v.Value }}">{{ $v.Value }}</a></div>
{{ if $v.IsID }}
<div role="group"><label>{{ $v.Key }}</label><a href="{{ $v.Value }}">{{ $v.Value }}</a></div>
{{ else }}
{{ if eq $v.Type "time.Time" }}
<div><label>{{ $v.Key }}</label>: <time datetime="{{ $v.Value }}">{{$v.Value}}<time></div>
<div role="group"><label>{{ $v.Key }}</label><time datetime="{{ $v.Value }}">{{$v.Value}}<time></div>
{{ else }}
<div><label>{{ $v.Key }}</label>: {{ $v.Value }}</div>
<div role="group"><label>{{ $v.Key }}</label>{{ $v.Value }}</div>
{{ end }}
{{ end }}
{{- end }}
</fieldset>

<button hx-get="{{ $pathPrefix }}{{ .ID }}?{{ editModeQueryParam }}" hx-headers='{"Accept": "text/html"}' class="btn btn-primary" style="font-size: 2em;">&#9998;</button>
<button hx-delete="{{ $pathPrefix }}{{ .ID }}" hx-confirm="Are you sure you want to delete it?" class="btn btn-primary" style="font-size: 2em;">&#128465;</button>
</div>
<hr />
</p>
{{ end }}
{{ end }}
30 changes: 16 additions & 14 deletions examples/html-template/templates/entity_form.gotpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,33 @@
{{ $pathPrefix := .PathPrefix }}
{{ $method := "put" }}
{{ with .Entity }}
{{ $id := (.ID | toString) }}

{{ if eq .ID 0 }}
{{ if eq $id "" }}
{{ $method = "post" }}
<form class="entity" id="entity-{{ .ID }}" method="{{ $method }}" target="{{ $pathPrefix }}">
<form class="entity" id="entity-{{ $id }}" method="{{ $method }}" target="{{ $pathPrefix }}">
{{ else }}
<form class="entity" id="entity-{{ .ID }}" hx-{{ $method }}="{{ $pathPrefix }}{{ .ID }}" hx-headers='{"Accept": "text/html"}' hx-target="this" hx-select=".entity" hx-swap="outerHTML">
<form class="entity" id="entity-{{ $id }}" hx-{{ $method }}="{{ $pathPrefix }}{{ $id }}" hx-headers='{"Accept": "text/html"}' hx-target="this" hx-select=".entity" hx-swap="outerHTML">
{{ end }}
<fieldset>
{{- range $f := .Fields }}
{{ if ne $f.Key "ID" }}
{{ if ne ($f.Value | toString) "0" }}
<div >
<label>{{ $f.Key }}</label>:
<input type="text" name="{{ $f.Key }}" value="{{ $f.Value }}">
</div>
{{ end }}
{{ if not $f.IsID }}
<div role="group">
<label>{{ $f.Key }}</label>
<input type="text" name="{{ $f.Key }}" value="{{ $f.Value }}">
</div>
{{ else }}
{{ if ne ($f.Value | toString) "0" }}
<a href="{{ $f.Value }}"><div><label>{{ $f.Key }}</label>: {{ $f.Value }}</div></a>
<div role="group">
<label>{{ $f.Key }}</label>
<a href="{{ $f.Value }}">{{ $f.Value }}</a>
</div>
<input type="hidden" name="{{ $f.Key }}" value="{{ $f.Value }}">
{{ end }}
{{ end }}
{{- end }}
</fieldset>

<button class="btn btn-primary">Submit</button>
<button hx-get="{{ $pathPrefix }}{{ .ID }}" hx-headers='{"Accept": "text/html"}' class="btn">Cancel</button>
<button hx-get="{{ $pathPrefix }}{{ $id }}" hx-headers='{"Accept": "text/html"}' class="btn">Cancel</button>
</form>
{{ end }}
{{ end }}
4 changes: 3 additions & 1 deletion examples/html-template/templates/entity_form_page.gotpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
{{ template "entity_header" }}
</head>
<body>
<h2 id="entity-name"><a href="{{ $pathPrefix }}">{{ .Name }}</a></h2>
<header>
<h1 id="entity-name"><a href="{{ .PathPrefix }}">{{ .Name }}</a></h1>
</header>
{{ template "entity_form" . }}

</body>
Expand Down
14 changes: 3 additions & 11 deletions examples/html-template/templates/entity_header.gotpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
{{ define "entity_header" }}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<script src="/js/htmx.min.js"></script>
<style type="text/css">
label {
font-weight: bold;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.jade.min.css" >

.entity {
padding: 2rem 1rem;
border-radius: 20px;
background: rgb(255,0,0);
background: linear-gradient(217deg, rgba(255,0,0,1) 0%, rgba(32,173,215,1) 100%);
}
</style>
{{ end }}
21 changes: 14 additions & 7 deletions examples/html-template/templates/entity_list.gotpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
{{ define "entity_list" }}
{{ $pathPrefix := .PathPrefix }}
<h2 id="entity-name">
<a href="{{ $pathPrefix }}">{{ .EntityName }}</a>
<form method="get" action="{{ $pathPrefix }}?mode=edit">
<input type="hidden" name="mode" value="edit">
<button type="submit" style="font-size: 2em;">+</button>
</form>
</h2>
<header>
<h1 id="entity-name">
<a href="{{ $pathPrefix }}">{{ .EntityName }}</a>
</h1>
</header>

<main>
{{ range $k, $v := .Entities }}
{{ $wrapped := wrapMetadata $pathPrefix $v }}
{{ template "entity" $wrapped }}
{{ end }}
</main>

<footer>
<form method="get" action="{{ $pathPrefix }}?mode=edit">
<input type="hidden" name="mode" value="edit">
<button type="submit" style="font-size: 2em;">+</button>
</form>
</footer>

{{ end }}
11 changes: 9 additions & 2 deletions examples/html-template/templates/entity_page.gotpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
{{ define "entity_page" }}
<!doctype html>
<html>
<head>
{{ template "entity_header" }}
</head>
<body>
<h2 id="entity-name"><a href="{{ .PathPrefix }}">{{ .Name }}</a></h2>
{{ template "entity" . }}
<header>
<h1 id="entity-name"><a href="{{ .PathPrefix }}">{{ .Name }}</a></h1>
</header>
<section class="section">
<div class="container">
{{ template "entity" . }}
</div>
</section>
</body>
</html>
{{ end }}