Added templ, tailwind and frankenui

.gitignore

@@ -1,2 +1,6 @@
 tmp/
 projectreshoot
+node_modules/
+static/css/output.css
+view/*/*_templ.go
+view/*/*_templ.txt

Makefile

@@ -0,0 +1,21 @@
+# Makefile
+.PHONY: build
+
+BINARY_NAME=projectreshoot
+
+# build builds the tailwind css sheet, and compiles the binary into a usable thing.
+build:
+	go mod tidy && \
+   	templ generate && \
+	go generate && \
+	go build -ldflags="-w -s" -o ${BINARY_NAME}
+
+# dev runs the development server where it builds the tailwind css sheet,
+# and compiles the project whenever a file is changed.
+dev:
+	npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch &\
+	templ generate --watch --cmd="go generate" &\
+	templ generate --watch --cmd="go run ."
+
+clean:
+	go clean

go.mod

@@ -1,3 +1,5 @@
 module projectreshoot
 
 go 1.23.5
+
+require github.com/a-h/templ v0.3.833

go.sum

@@ -0,0 +1,4 @@
+github.com/a-h/templ v0.3.833 h1:L/KOk/0VvVTBegtE0fp2RJQiBm7/52Zxv5fqlEHiQUU=
+github.com/a-h/templ v0.3.833/go.mod h1:cAu4AiZhtJfBjMY0HASlyzvkrtjnHWPeEsyGK2YYmfk=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=

handlers/index.go

@@ -1,8 +1,8 @@
 package handlers
 
 import (
-	"html/template"
 	"net/http"
+	"projectreshoot/view/page"
 )
 
 func HandleRoot() http.Handler {
@@ -12,8 +12,7 @@ func HandleRoot() http.Handler {
 				http.NotFound(w, r)
 				return
 			}
-			templ := template.Must(template.ParseFiles("templates/index.html"))
+			page.Index().Render(r.Context(), w)
-			templ.Execute(w, nil)
 		},
 	)
 }

handlers/static.go

@@ -0,0 +1,36 @@
+package handlers
+
+import (
+	"net/http"
+	"os"
+)
+
+type justFilesFilesystem struct {
+	fs http.FileSystem
+}
+
+type neuteredReaddirFile struct {
+	http.File
+}
+
+func (fs justFilesFilesystem) Open(name string) (http.File, error) {
+	f, err := fs.fs.Open(name)
+	if err != nil {
+		return nil, err
+	}
+	return neuteredReaddirFile{f}, nil
+}
+
+func (f neuteredReaddirFile) Readdir(count int) ([]os.FileInfo, error) {
+	return nil, nil
+}
+
+func HandleStatic() http.Handler {
+	return http.HandlerFunc(
+		func(w http.ResponseWriter, r *http.Request) {
+			nfs := justFilesFilesystem{http.Dir("static")}
+			fs := http.FileServer(nfs)
+			fs.ServeHTTP(w, r)
+		},
+	)
+}

main.go

@@ -2,26 +2,28 @@ package main
 
 import (
 	"context"
+	"embed"
 	"fmt"
 	"io"
 	"net"
 	"net/http"
 	"os"
 	"os/signal"
+	"projectreshoot/server"
 	"sync"
 	"time"
 )
 
-func run(ctx context.Context, w io.Writer, args []string) error {
+func run(ctx context.Context, w io.Writer) error {
 	ctx, cancel := signal.NotifyContext(ctx, os.Interrupt)
 	defer cancel()
 
-	config := &Config{
+	config := &server.Config{
 		Host: "",
 		Port: "3333",
 	}
 
-	srv := NewServer(config)
+	srv := server.NewServer()
 	httpServer := &http.Server{
 		Addr:    net.JoinHostPort(config.Host, config.Port),
 		Handler: srv,
@@ -51,9 +53,12 @@ func run(ctx context.Context, w io.Writer, args []string) error {
 	return nil
 }
 
+//go:embed static/*
+var static embed.FS
+
 func main() {
 	ctx := context.Background()
-	if err := run(ctx, os.Stdout, os.Args); err != nil {
+	if err := run(ctx, os.Stdout); err != nil {
 		fmt.Fprintf(os.Stderr, "%s\n", err)
 		os.Exit(1)
 	}

package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.17"
+  },
+  "dependencies": {
+    "franken-ui": "^1.1.0",
+    "postcss": "^8.5.1"
+  }
+}

postcss.config.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+	plugins: [
+		require('tailwindcss'),
+		require('franken-ui/postcss/sort-media-queries')({
+			sort: 'mobile-first'
+		}),
+		require('franken-ui/postcss/combine-duplicated-selectors')({
+			removeDuplicatedProperties: true
+		})
+	]
+};

server/routes.go

@@ -1,4 +1,4 @@
-package main
+package server
 
 import (
 	"net/http"
@@ -7,7 +7,7 @@ import (
 
 func addRoutes(
 	mux *http.ServeMux,
-	config Config,
 ) {
+	mux.Handle("GET /static/", http.StripPrefix("/static/", handlers.HandleStatic()))
 	mux.Handle("GET /", handlers.HandleRoot())
 }

server/server.go

@@ -1,4 +1,4 @@
-package main
+package server
 
 import (
 	"net/http"
@@ -10,13 +10,10 @@ type Config struct {
 	Port string
 }
 
-func NewServer(
+func NewServer() http.Handler {
-	config *Config,
-) http.Handler {
 	mux := http.NewServeMux()
 	addRoutes(
 		mux,
-		*config,
 	)
 	var handler http.Handler = mux
 	handler = middleware.Logging(handler)

static/css/input.css

@@ -0,0 +1,67 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --warning: 34.95 76.98% 49.41%;
+  --warning-foreground: 240 22.73% 8.63%;
+  --success: 109.23 57.64% 39.8%;
+  --success-foreground: 240 22.73% 8.63%;
+  --chart-green: 109.23 57.64% 39.8%;
+  --chart-blue: 197.07 96.57% 45.69%;
+  --chart-yellow: 34.95 76.98% 49.41%;
+  --chart-orange: 21.98 99.18% 51.96%;
+  --chart-red: 347.08 86.67% 44.12%;
+  --background: 220 23.08% 94.9%;
+  --foreground: 233.79 16.02% 35.49%;
+  --card: 220 21.95% 91.96%;
+  --card-foreground: 233.79 16.02% 35.49%;
+  --popover: 220 20.69% 88.63%;
+  --popover-foreground: 233.79 16.02% 35.49%;
+  --primary: 219.91 91.49% 53.92%;
+  --primary-foreground: 0 0% 96.08%;
+  --secondary: 226.67 12.16% 70.98%;
+  --secondary-foreground: 240 22.73% 8.63%;
+  --muted: 225 13.56% 76.86%;
+  --muted-foreground: 240 21.05% 14.9%;
+  --accent: 230.94 97.2% 71.96%;
+  --accent-foreground: 240 22.73% 8.63%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 233.79 16.02% 35.49%;
+  --input: 226.67 12.16% 70.98%;
+  --ring: 197.07 96.57% 45.69%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 240 21.05% 14.9%;
+  --foreground: 226.15 63.93% 88.04%;
+  --card: 0 0% 7.84%;
+  --card-foreground: 226.15 63.93% 88.04%;
+  --popover: 240 22.73% 8.63%;
+  --popover-foreground: 226.15 63.93% 88.04%;
+  --primary: 217.17 91.87% 75.88%;
+  --primary-foreground: 240 22.73% 8.63%;
+  --secondary: 232.5 12% 39.22%;
+  --secondary-foreground: 226.15 63.93% 88.04%;
+  --muted: 236.84 16.24% 22.94%;
+  --muted-foreground: 226.15 63.93% 88.04%;
+  --accent: 115.45 54.1% 76.08%;
+  --accent-foreground: 240 22.73% 8.63%;
+  --destructive: 343 81.2% 74.9%;
+  --destructive-foreground: 240 22.73% 8.63%;
+  --border: 236.84 16.24% 22.94%;
+  --input: 232.5 12% 39.22%;
+  --ring: 189.18 71.01% 72.94%;
+  --radius: 0.5rem;
+  --warning: 223.64 89.19% 92.75%;
+  --warning-foreground: 0 0% 0%;
+  --success: 223.73 91.09% 51.57%;
+  --success-foreground: 221.74 92% 95.1%;
+  --chart-green: 115.45 54.1% 76.08%;
+  --chart-blue: 198.5 75.95% 69.02%;
+  --chart-yellow: 41.35 86.05% 83.14%;
+  --chart-orange: 22.96 92% 75.49%;
+  --chart-red: 343.27 81.25% 74.9%;
+}

tailwind.config.js

@@ -0,0 +1,78 @@
+import franken from "franken-ui/shadcn-ui/preset-quick";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [
+    franken({
+      customPalette: {
+        ".ux-theme-catppuccin": {
+          "--background": "220 23.08% 94.9%",
+          "--foreground": "233.79 16.02% 35.49%",
+          "--card": "220 21.95% 91.96%",
+          "--card-foreground": "233.79 16.02% 35.49%",
+          "--popover": "220 20.69% 88.63%",
+          "--popover-foreground": "233.79 16.02% 35.49%",
+          "--primary": "219.91 91.49% 53.92%",
+          "--primary-foreground": "0 0% 96.08%",
+          "--secondary": "226.67 12.16% 70.98%",
+          "--secondary-foreground": "240 22.73% 8.63%",
+          "--muted": "225 13.56% 76.86%",
+          "--muted-foreground": "240 21.05% 14.9%",
+          "--accent": "230.94 97.2% 71.96%",
+          "--accent-foreground": "240 22.73% 8.63%",
+          "--destructive": "0 84.2% 60.2%",
+          "--destructive-foreground": "210 40% 98%",
+          "--border": "233.79 16.02% 35.49%",
+          "--input": "226.67 12.16% 70.98%",
+          "--ring": "197.07 96.57% 45.69%",
+        },
+        ".dark.ux-theme-catppuccin": {
+          "--background": "240 21.05% 14.9%",
+          "--foreground": "226.15 63.93% 88.04%",
+          "--card": "0 0% 7.84%",
+          "--card-foreground": "226.15 63.93% 88.04%",
+          "--popover": "240 22.73% 8.63%",
+          "--popover-foreground": "226.15 63.93% 88.04%",
+          "--primary": "217.17 91.87% 75.88%",
+          "--primary-foreground": "240 22.73% 8.63%",
+          "--secondary": "232.5 12% 39.22%",
+          "--secondary-foreground": "226.15 63.93% 88.04%",
+          "--muted": "236.84 16.24% 22.94%",
+          "--muted-foreground": "226.15 63.93% 88.04%",
+          "--accent": "115.45 54.1% 76.08%",
+          "--accent-foreground": "240 22.73% 8.63%",
+          "--destructive": "343 81.2% 74.9%",
+          "--destructive-foreground": "240 22.73% 8.63%",
+          "--border": "236.84 16.24% 22.94%",
+          "--input": "232.5 12% 39.22%",
+          "--ring": "189.18 71.01% 72.94%",
+        },
+      },
+    }),
+  ],
+  content: ["./view/**/*.templ"],
+  safelist: [
+    {
+      pattern: /^uk-/,
+    },
+    "ProseMirror",
+    "ProseMirror-focused",
+    "tiptap",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        warning: "hsl(var(--warning))",
+        "warning-foreground": "hsl(var(--warning-foreground))",
+        success: "hsl(var(--success))",
+        "success-foreground": "hsl(var(--success-foreground))",
+        "chart-green": "hsl(var(--chart-green)",
+        "chart-blue": "hsl(var(--chart-blue)",
+        "chart-yellow": "hsl(var(--chart-yellow)",
+        "chart-orange": "hsl(var(--chart-orange)",
+        "chart-red": "hsl(var(--chart-red)",
+      },
+    },
+  },
+  plugins: [],
+};

templates/index.html

@@ -1,7 +0,0 @@
-<!doctype html>
-<head>
-  <title>My site!!</title>
-</head>
-<body>
-  It's been far too long since i wrote raw HTML and honestly I kind of miss it
-</body>

view/component/navbar.templ

@@ -0,0 +1,5 @@
+package component
+
+templ Navbar() {
+	<nav>Test</nav>
+}

view/layout/global.templ

@@ -0,0 +1,45 @@
+package layout
+
+import "projectreshoot/view/component"
+
+templ Global() {
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Project Reshoot</title>
+    <link href="/static/css/output.css" rel="stylesheet" />
+    <script src="https://unpkg.com/franken-ui@1.1.0/dist/js/core.iife.js" type="module"></script>
+    <script src="https://unpkg.com/franken-ui@1.1.0/dist/js/icon.iife.js" type="module"></script>
+    <script src="https://unpkg.com/htmx.org@2.0.4"
+        integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
+        crossorigin="anonymous"></script>
+    <script>
+        const htmlElement = document.documentElement;
+
+        if (
+            localStorage.getItem("mode") === "dark" ||
+            (!("mode" in localStorage) &&
+                window.matchMedia("(prefers-color-scheme: dark)").matches)
+        ) {
+            htmlElement.classList.add("dark");
+        } else {
+            htmlElement.classList.remove("dark");
+        }
+
+        htmlElement.classList.add(
+            localStorage.getItem("theme") || "uk-theme-catppuccin",
+        );
+    </script>
+</head>
+
+<body class="bg-background text-foreground">
+    @component.Navbar()
+    <h1 class="text-3xl text-foreground font-bold underline">Hello world! </h1>
+    { children... }
+</body>
+
+</html>
+}

view/page/index.templ

@@ -0,0 +1,9 @@
+package page
+
+import "projectreshoot/view/layout"
+
+templ Index() {
+	@layout.Global() {
+		This is my index page
+	}
+}