action tiles on main admin page

.air.toml

@@ -0,0 +1,46 @@
+root = "."
+testdata_dir = "testdata"
+tmp_dir = "tmp"
+
+[build]
+  args_bin = ["web"]
+  bin = "./tmp/main"
+  cmd = "go build -o ./tmp/main owl-blogs/cmd/owl"
+  delay = 1000
+  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
+  exclude_file = []
+  exclude_regex = ["_test.go"]
+  exclude_unchanged = false
+  follow_symlink = false
+  full_bin = ""
+  include_dir = []
+  include_ext = ["go", "tpl", "tmpl", "html", "css"]
+  include_file = []
+  kill_delay = "0s"
+  log = "build-errors.log"
+  poll = false
+  poll_interval = 0
+  post_cmd = []
+  pre_cmd = []
+  rerun = false
+  rerun_delay = 500
+  send_interrupt = false
+  stop_on_error = false
+
+[color]
+  app = ""
+  build = "yellow"
+  main = "magenta"
+  runner = "green"
+  watcher = "cyan"
+
+[log]
+  main_only = false
+  time = false
+
+[misc]
+  clean_on_exit = false
+
+[screen]
+  clear_on_rebuild = false
+  keep_scroll = true

.gitignore

@@ -27,3 +27,4 @@ users/
 
 
 *.db
+tmp/

domain/model/siteconfig.go

@@ -23,6 +23,7 @@ type SiteConfig struct {
 	Title              string
 	SubTitle           string
 	HeaderColor        string
+	PrimaryColor       string
 	AuthorName         string
 	Me                 []MeLinks
 	Lists              []EntryList

render/templates/base.tmpl

@@ -13,11 +13,26 @@
         <link rel='stylesheet' href='/static/style.css'>        
         <style>
             :root {
-                --color-primary: {{.SiteConfig.HeaderColor}};
+                --primary: {{.SiteConfig.PrimaryColor}};
+                --primary-hover: color-mix(in srgb,var(--primary),#000 20%);
+                --primary-focus: color-mix(in srgb,var(--primary),#fff 40%);
+                --primary-inverse: #FFF;
+                --background: {{.SiteConfig.HeaderColor}};
+                --background-dark: color-mix(in srgb,var(--background),#000 50%);
+                --background-light: color-mix(in srgb,var(--background),#fff 50%);
             }
 
+            [data-theme="light"],
+            :root:not([data-theme="dark"]) {
+            --primary: {{.SiteConfig.PrimaryColor}};
+            --primary-hover: color-mix(in srgb,var(--primary),#000 20%);
+            --primary-focus: color-mix(in srgb,var(--primary),#fff 40%);
+            --primary-inverse: #FFF;
+            }
+
+
             header {
-                background-color: var(--color-primary);
+                background-color: var(--background);
                 padding-bottom: 1rem !important;
             }
 

render/templates/views/admin.tmpl

@@ -1,31 +1,40 @@
 {{define "title"}}Admin{{end}}
 
 {{define "main"}}
-<h2>Write</h2>
+<h2 style="margin-bottom: 1rem;">Write</h2>
 
 <div class="action-tile-list">
     {{range .Types}}
-    <div class="action-tile"><a href="/editor/new/{{.}}/">{{.}}</a></div>
+    <a class="action-tile" href="/editor/new/{{.}}/">{{.}}</a>
     {{end}}
 </div>
+<br>
+<br>
 
-<h2>Content</h2>
-<ul>
-    <li><a href="/admin/binaries/">Files</a></li>
-    <li><a href="/admin/drafts/">Drafts</a></li>
-</ul>
+<h2 style="margin-bottom: 1rem;">Content</h2>
+<div class="action-tile-list">
+    <a class="action-tile" href="/admin/binaries/">Files</a>
+    <a class="action-tile" href="/admin/drafts/">Drafts</a>
+</div>
+<br>
+<br>
 
-<h2>Configurations</h2>
-<ul>
-    <li><a href="/site-config">Site Settings</a></li>
-    <li><a href="/site-config/me">Me Links</a></li>
-    <li><a href="/site-config/lists">Lists</a></li>
-    <li><a href="/site-config/menus">Menus</a></li>
-    <li>Modules</li>
-    <ul>
-        {{ range .Configs }}
-            <li><a href="/admin/config/{{.Name}}">{{.Name}}</a></li>
-        {{ end }}
-    </ul>
-</ul>
+<h2 style="margin-bottom: 1rem;">Configurations</h2>
+<div class="action-tile-list">
+    <a class="action-tile" href="/site-config">Site Settings</a>
+    <a class="action-tile" href="/site-config/me">Me Links</a>
+    <a class="action-tile" href="/site-config/lists">Lists</a>
+    <a class="action-tile" href="/site-config/menus">Menus</a>
+</div>
+<br>
+<br>
+
+<h3>Module Configuration</h3>
+<div class="action-tile-list">
+    {{ range .Configs }}
+        <a class="action-tile" href="/admin/config/{{.Name}}">{{.Name}}</a>
+    {{ end }}
+</div>
+<br>
+<br>
 {{end}}

render/templates/views/site_config.tmpl

@@ -16,6 +16,9 @@
     <label for="HeaderColor">HeaderColor</label>
     <input type="color" name="HeaderColor" id="HeaderColor" value="{{.HeaderColor}}"/>
 
+    <label for="PrimaryColor">PrimaryColor</label>
+    <input type="color" name="PrimaryColor" id="PrimaryColor" value="{{.PrimaryColor}}"/>
+
     <label for="AuthorName">AuthorName</label>
     <input type="text" name="AuthorName" id="AuthorName" value="{{.AuthorName}}"/>
 

tmp/build-errors.log

@@ -0,0 +1 @@
+exit status 1

web/siteconfig_handler.go

@@ -44,6 +44,7 @@ func (h *SiteConfigHandler) HandlePost(c *fiber.Ctx) error {
 	siteConfig.Title = c.FormValue("Title")
 	siteConfig.SubTitle = c.FormValue("SubTitle")
 	siteConfig.HeaderColor = c.FormValue("HeaderColor")
+	siteConfig.PrimaryColor = c.FormValue("PrimaryColor")
 	siteConfig.AuthorName = c.FormValue("AuthorName")
 	siteConfig.AvatarUrl = c.FormValue("AvatarUrl")
 	siteConfig.FullUrl = c.FormValue("FullUrl")

web/static/style.css

@@ -5,12 +5,16 @@
 } 
 
 .action-tile {
-    border: 1px solid var(--color-primary);
+    border: 1px solid var(--background-dark);
     padding: 20px;
     flex: 1 1 0px;
     margin: 6px;
     min-width: 20%;
     text-align: center;
-    background: var(--color-primary);
+    background: var(--background);
     border-radius: 4px;
 }
+
+.action-tile:hover {
+    background: var(--background-light);
+}