Monorepo for Tangled tangled.org

appview: setup tailwind and htmx

Also gets rid of unused old templates.

+1
.gitignore
··· 2 tmp 3 *.db 4 .bin/
··· 2 tmp 3 *.db 4 .bin/ 5 + appview/pages/static/
+10 -1
appview/pages/pages.go
··· 7 "io" 8 "io/fs" 9 "log" 10 "path" 11 "strings" 12 ··· 15 "github.com/sotangled/tangled/types" 16 ) 17 18 - //go:embed templates/* 19 var files embed.FS 20 21 type Pages struct { ··· 239 func (p *Pages) RepoBlob(w io.Writer, params RepoBlobParams) error { 240 return p.executeRepo("repo/blob", w, params) 241 }
··· 7 "io" 8 "io/fs" 9 "log" 10 + "net/http" 11 "path" 12 "strings" 13 ··· 16 "github.com/sotangled/tangled/types" 17 ) 18 19 + //go:embed templates/* static/* 20 var files embed.FS 21 22 type Pages struct { ··· 240 func (p *Pages) RepoBlob(w io.Writer, params RepoBlobParams) error { 241 return p.executeRepo("repo/blob", w, params) 242 } 243 + 244 + func (p *Pages) Static() http.Handler { 245 + sub, err := fs.Sub(files, "static") 246 + if err != nil { 247 + log.Fatalf("no static dir found? that's crazy: %v", err) 248 + } 249 + return http.StripPrefix("/static/", http.FileServer(http.FS(sub))) 250 + }
+19 -21
appview/pages/templates/layouts/base.html
··· 1 {{ define "layouts/base" }} 2 - <!doctype html> 3 - <html lang="en"> 4 - <head> 5 - <meta charset="UTF-8" /> 6 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 - <script 8 - src="https://unpkg.com/htmx.org@2.0.4" 9 - integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" 10 - crossorigin="anonymous" 11 - ></script> 12 - <title>{{block "title" .}}tangled{{end}}</title> 13 - </head> 14 - <body> 15 - <header class="topbar"> 16 - {{ block "topbar" .}} 17 - {{ template "layouts/topbar" . }} 18 - {{end}} 19 - </header> 20 - <main class="content">{{block "content" .}}{{end}}</main> 21 - </body> 22 - </html> 23 {{ end }}
··· 1 {{ define "layouts/base" }} 2 + <!doctype html> 3 + <html lang="en"> 4 + <head> 5 + <meta charset="UTF-8" /> 6 + <meta 7 + name="viewport" 8 + content="width=device-width, initial-scale=1.0" 9 + /> 10 + <title>{{ block "title" . }}tangled{{ end }}</title> 11 + </head> 12 + <body> 13 + <header class="topbar"> 14 + {{ block "topbar" . }} 15 + {{ template "layouts/topbar" . }} 16 + {{ end }} 17 + </header> 18 + <main class="content">{{ block "content" . }}{{ end }}</main> 19 + </body> 20 + </html> 21 {{ end }}
-37
appview/pages/templates/layouts/head.html
··· 1 - <head> 2 - <meta charset="utf-8" /> 3 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 4 - <link rel="stylesheet" href="/static/style.css" type="text/css" /> 5 - <link rel="icon" type="image/png" size="32x32" href="/static/legit.png" /> 6 - <script src="https://unpkg.com/htmx.org@2.0.4"></script> 7 - <meta name="htmx-config" content='{"selfRequestsOnly":false}' /> 8 - 9 - {{ if .parent }} 10 - <title> 11 - {{ .meta.Title }} &mdash; {{ .name }} ({{ .ref }}): {{ .parent }}/ 12 - </title> 13 - 14 - {{ else if .path }} 15 - <title> 16 - {{ .meta.Title }} &mdash; {{ .name }} ({{ .ref }}): {{ .path }} 17 - </title> 18 - {{ else if .files }} 19 - <title>{{ .meta.Title }} &mdash; {{ .name }} ({{ .ref }})</title> 20 - {{ else if .commit }} 21 - <title>{{ .meta.Title }} &mdash; {{ .name }}: {{ .commit.This }}</title> 22 - {{ else if .branches }} 23 - <title>{{ .meta.Title }} &mdash; {{ .name }}: refs</title> 24 - {{ else if .commits }} {{ if .log }} 25 - <title>{{ .meta.Title }} &mdash; {{ .name }}: log</title> 26 - {{ else }} 27 - <title>{{ .meta.Title }} &mdash; {{ .name }}</title> 28 - {{ end }} {{ else }} 29 - <title>{{ .meta.Title }}</title> 30 - {{ end }} {{ if and .servername .gomod }} 31 - <meta 32 - name="go-import" 33 - content="{{ .servername}}/{{ .name }} git https://{{ .servername }}/{{ .name }}" 34 - /> 35 - {{ end }} 36 - <!-- other meta tags here --> 37 - </head>
···
-13
appview/pages/templates/layouts/nav.html
··· 1 - {{ define "nav" }} 2 - <nav> 3 - <ul> 4 - {{ if .name }} 5 - <li><a href="/{{ .name }}">summary</a></li> 6 - <li><a href="/{{ .name }}/refs">refs</a> {{ if .ref }}</li> 7 - 8 - <li><a href="/{{ .name }}/tree/{{ .ref }}/">tree</a></li> 9 - <li><a href="/{{ .name }}/log/{{ .ref }}">log</a> {{ end }}</li> 10 - {{ end }} 11 - </ul> 12 - </nav> 13 - {{ end }}
···
-11
appview/pages/templates/layouts/repo-header.html
··· 1 - {{ define "repo-header" }} 2 - <header> 3 - <h2> 4 - <a href="/">all repos</a> 5 - &mdash; {{ .displayname }} {{ if .ref }} 6 - <span class="ref">@ {{ .ref }}</span> 7 - {{ end }} 8 - </h2> 9 - <h3 class="desc">{{ .desc }}</h3> 10 - </header> 11 - {{ end }}
···
+1 -2
appview/pages/templates/layouts/repoBase.html appview/pages/templates/layouts/repobase.html
··· 24 25 {{ end }} 26 27 - {{ define "layouts/repoBase" }} 28 29 {{ template "layouts/base" . }} 30 31 {{ end }} 32 -
··· 24 25 {{ end }} 26 27 + {{ define "layouts/repobase" }} 28 29 {{ template "layouts/base" . }} 30 31 {{ end }}
-5
appview/pages/templates/layouts/test.html
··· 1 - <p>Hello world!</p> 2 - <div class="example"> 3 - <h1>Welcome</h1> 4 - <p>This is a simple HTML example</p> 5 - </div>
···
+35 -26
appview/pages/templates/user/login.html
··· 1 {{ define "user/login" }} 2 - <!doctype html> 3 - <html lang="en"> 4 - <head> 5 - <meta charset="UTF-8" /> 6 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 - <script 8 - src="https://unpkg.com/htmx.org@2.0.4" 9 - integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" 10 - crossorigin="anonymous" 11 - ></script> 12 - <title>login</title> 13 - </head> 14 - <body> 15 - <main class="content"> 16 - <h1>login</h1> 17 - <form method="POST" action="/login"> 18 - <label for="handle">handle</label> 19 - <input type="text" id="handle" name="handle" required /> 20 21 - <label for="app_password">app password</label> 22 - <input type="password" id="app_password" name="app_password" required /> 23 - 24 - <button type="submit">login</button> 25 - </form> 26 - </main> 27 - </body> 28 - </html> 29 30 {{ end }}
··· 1 {{ define "user/login" }} 2 + <!doctype html> 3 + <html lang="en"> 4 + <head> 5 + <meta charset="UTF-8" /> 6 + <meta 7 + name="viewport" 8 + content="width=device-width, initial-scale=1.0" 9 + /> 10 + <script src="/static/htmx.min.js"></script> 11 + <link rel="stylesheet" href="/static/tw.css" type="text/css" /> 12 + <title>login</title> 13 + </head> 14 + <body> 15 + <main class="content"> 16 + <h1>login</h1> 17 + <form method="POST" action="/login"> 18 + <label for="handle">handle</label> 19 + <input type="text" id="handle" name="handle" required /> 20 21 + <label for="app_password">app password</label> 22 + <input 23 + type="password" 24 + id="app_password" 25 + name="app_password" 26 + required 27 + /> 28 29 + <button 30 + class="bg-blue-500 text-white font-bold py-2 px-4 rounded" 31 + type="submit" 32 + > 33 + login 34 + </button> 35 + </form> 36 + </main> 37 + </body> 38 + </html> 39 {{ end }}
+2
appview/state/state.go
··· 618 func (s *State) StandardRouter() http.Handler { 619 r := chi.NewRouter() 620 621 r.Get("/", s.Timeline) 622 623 r.Get("/login", s.Login)
··· 618 func (s *State) StandardRouter() http.Handler { 619 r := chi.NewRouter() 620 621 + r.Handle("/static/*", s.pages.Static()) 622 + 623 r.Get("/", s.Timeline) 624 625 r.Get("/login", s.Login)
+1
flake.nix
··· 53 pkgs.indigo-lexgen 54 pkgs.litecli 55 pkgs.websocat 56 ]; 57 }; 58 });
··· 53 pkgs.indigo-lexgen 54 pkgs.litecli 55 pkgs.websocat 56 + pkgs.tailwindcss 57 ]; 58 }; 59 });
+21
input.css
···
··· 1 + @tailwind base; 2 + @tailwind components; 3 + @tailwind utilities; 4 + @layer base { 5 + @font-face { 6 + font-family: "Inter"; 7 + font-style: normal; 8 + font-weight: 400; 9 + font-display: swap; 10 + } 11 + h1 { 12 + @apply text-2xl; 13 + @apply font-sans; 14 + @apply text-gray-900; 15 + } 16 + ::selection { 17 + @apply bg-green-400; 18 + @apply text-gray-900; 19 + @apply bg-opacity-30; 20 + } 21 + }
+22
tailwind.config.js
···
··· 1 + /** @type {import('tailwindcss').Config} */ 2 + module.exports = { 3 + content: ["./appview/pages/templates/**/*.html"], 4 + theme: { 5 + container: { 6 + padding: "2rem", 7 + center: true, 8 + screens: { 9 + sm: "540px", 10 + md: "650px", 11 + lg: "900px", 12 + xl: "1100px", 13 + "2xl": "1300x", 14 + }, 15 + }, 16 + extend: { 17 + fontFamily: { 18 + sans: ["Inter", "system-ui", "sans-serif", "ui-sans-serif"], 19 + }, 20 + }, 21 + }, 22 + };