set up sass and htmx

.air.toml

@@ -5,7 +5,7 @@ tmp_dir = "tmp"
 [build]
   args_bin = []
   bin = "./tmp/main"
-  cmd = "templ generate && go build -o ./tmp/main ."
+  cmd = "sass web/sass/site.scss web/static/site.css && templ generate && go build -o ./tmp/main ."
   delay = 1000
   exclude_dir = ["assets", "tmp", "vendor", "testdata"]
   exclude_file = []
@@ -14,7 +14,7 @@ tmp_dir = "tmp"
   follow_symlink = false
   full_bin = ""
   include_dir = []
-  include_ext = ["go", "tpl", "tmpl", "templ", "html"]
+  include_ext = ["go", "scss", "tpl", "tmpl", "templ", "html"]
   include_file = []
   kill_delay = "0s"
   log = "build-errors.log"

.gitignore

@@ -1,6 +1,12 @@
 # --> custom test files
 test.db
 
+# --> generated files
+web/*_templ.go
+web/static/*.css
+web/static/*.css.map
+.sass-cache/*
+
 # --> nix
 .direnv/
 .envrc

flake.nix

@@ -75,6 +75,7 @@
           default = pkgs.mkShell {
             buildInputs = with pkgs; [ 
               air # live go app reloading
+              sass
               go
               gopls
               gotools

web/router.go

@@ -25,6 +25,7 @@ func WebRouter() http.Handler {
 	r := chi.NewRouter()
 	r.Get("/", getIndex)
     r.Get("/hello", getHello)
+    r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
 	return r
 }
 

web/sass/catpuccin.scss

@@ -0,0 +1,115 @@
+
+///latte
+$latte-base: #eff1f5;
+$latte-text: #4c4f69;
+$latte-pink: #ea76cb;
+$latte-mauve: #8839ef;
+$latte-red: #d20f39;
+$latte-maroon: #e64553;
+$latte-peach: #fe640b;
+$latte-yellow: #df8e1d;
+$latte-green: #40a02b;
+$latte-teal: #179299;
+$latte-sky: #04a5e5;
+$latte-sapphire: #209fb5;
+$latte-blue: #1e66f5;
+$latte-lavender: #7287fd;
+$latte-text: #4c4f69;
+$latte-subtext1: #5c5f77;
+$latte-subtext0: #6c6f85;
+$latte-overlay2: #7c7f93;
+$latte-overlay1: #8c8fa1;
+$latte-overlay0: #9ca0b0;
+$latte-surface2: #acb0be;
+$latte-surface1: #bcc0cc;
+$latte-surface0: #ccd0da;
+$latte-base: #eff1f5;
+$latte-mantle: #e6e9ef;
+$latte-crust: #dce0e8;
+///frappé
+$frappe-base: #303446;
+$frappe-text: #c6d0f5;
+$frappe-pink: #f4b8e4;
+$frappe-mauve: #ca9ee6;
+$frappe-red: #e78284;
+$frappe-maroon: #ea999c;
+$frappe-peach: #ef9f76;
+$frappe-yellow: #e5c890;
+$frappe-green: #a6d189;
+$frappe-teal: #81c8be;
+$frappe-sky: #99d1db;
+$frappe-sapphire: #85c1dc;
+$frappe-blue: #8caaee;
+$frappe-lavender: #babbf1;
+$frappe-text: #c6d0f5;
+$frappe-subtext1: #b5bfe2;
+$frappe-subtext0: #a5adce;
+$frappe-overlay2: #949cbb;
+$frappe-overlay1: #838ba7;
+$frappe-overlay0: #737994;
+$frappe-surface2: #626880;
+$frappe-surface1: #51576d;
+$frappe-surface0: #414559;
+$frappe-base: #303446;
+$frappe-mantle: #292c3c;
+$frappe-crust: #232634;
+///macchiato
+$macchiato-base: #24273a;
+$macchiato-text: #cad3f5;
+$macchiato-pink: #f5bde6;
+$macchiato-mauve: #c6a0f6;
+$macchiato-red: #ed8796;
+$macchiato-maroon: #ee99a0;
+$macchiato-peach: #f5a97f;
+$macchiato-yellow: #eed49f;
+$macchiato-green: #a6da95;
+$macchiato-teal: #8bd5ca;
+$macchiato-sky: #91d7e3;
+$macchiato-sapphire: #7dc4e4;
+$macchiato-blue: #8aadf4;
+$macchiato-lavender: #b7bdf8;
+$macchiato-text: #cad3f5;
+$macchiato-subtext1: #b8c0e0;
+$macchiato-subtext0: #a5adcb;
+$macchiato-overlay2: #939ab7;
+$macchiato-overlay1: #8087a2;
+$macchiato-overlay0: #6e738d;
+$macchiato-surface2: #5b6078;
+$macchiato-surface1: #494d64;
+$macchiato-surface0: #363a4f;
+$macchiato-base: #24273a;
+$macchiato-mantle: #1e2030;
+$macchiato-crust: #181926;
+///mocha
+$mocha-base: #1e1e2e;
+$mocha-text: #cdd6f4;
+$mocha-pink: #f5c2e7;
+$mocha-mauve: #cba6f7;
+$mocha-red: #f38ba8;
+$mocha-maroon: #eba0ac;
+$mocha-peach: #fab387;
+$mocha-yellow: #f9e2af;
+$mocha-green: #a6e3a1;
+$mocha-teal: #94e2d5;
+$mocha-sky: #89dceb;
+$mocha-sapphire: #74c7ec;
+$mocha-blue: #89b4fa;
+$mocha-lavender: #b4befe;
+$mocha-text: #cdd6f4;
+$mocha-subtext1: #bac2de;
+$mocha-subtext0: #a6adc8;
+$mocha-overlay2: #9399b2;
+$mocha-overlay1: #7f849c;
+$mocha-overlay0: #6c7086;
+$mocha-surface2: #585b70;
+$mocha-surface1: #45475a;
+$mocha-surface0: #313244;
+$mocha-base: #1e1e2e;
+$mocha-mantle: #181825;
+$mocha-crust: #11111b;
+
+
+
+/// scss file using the themes from
+/// Catppuccin : https://github.com/catppuccin/catppuccin
+/// Claquettes

web/sass/site.scss

@@ -0,0 +1,5 @@
+@import 'catpuccin';
+
+body {
+    background-color: $latte-base;
+}

web/static/index.js

@@ -0,0 +1,6 @@
+
+function say_hello() {
+    console.log("Hello World");
+}
+
+export {say_hello};

web/templates/index.html

@@ -3,10 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/static/site.css">
+    <script src="/static/htmx.min.js"></script>
     <title>{{.Title}}</title>
 </head>
 <body>
+        <div>
+                
+        </div>
         <h1>Hello World!</h1>
-    <a href="/hello">Hello you!</a>
+        <button hx-get="/hello" hx-trigger="click" hx-target="#hello" hx-swap="outerHtml">Hello you!</button>
+
+        <div id="hello">
+
+        </div>
+        <script type="module" src="/static/index.js"></script>
+        <script type="module">
+        import {say_hello} from "/static/index.js";
+        say_hello();
+        </script>
 </body>
 </html>