chore(templates): prettier plugin & tables

.gitignore

@@ -4,3 +4,4 @@ data/
 build/
 .direnv/
 cover.html
+node_modules

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-go-template"]
+}

package-lock.json

@@ -0,0 +1,55 @@
+{
+  "name": "antholume",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "antholume",
+      "version": "1.0.0",
+      "devDependencies": {
+        "prettier-plugin-go-template": "^0.0.15"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-go-template": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-go-template/-/prettier-plugin-go-template-0.0.15.tgz",
+      "integrity": "sha512-WqU92E1NokWYNZ9mLE6ijoRg6LtIGdLMePt2C7UBDjXeDH9okcRI3zRqtnWR4s5AloiqyvZ66jNBAa9tmRY5EQ==",
+      "dev": true,
+      "dependencies": {
+        "ulid": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "prettier": "^3.0.0"
+      }
+    },
+    "node_modules/ulid": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz",
+      "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
+      "dev": true,
+      "bin": {
+        "ulid": "bin/cli.js"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,7 @@
+{
+  "name": "antholume",
+  "version": "1.0.0",
+  "devDependencies": {
+    "prettier-plugin-go-template": "^0.0.15"
+  }
+}

shell.nix

@@ -3,6 +3,7 @@
 pkgs.mkShell {
   packages = with pkgs; [
     go
+    nodejs
     nodePackages.tailwindcss
     python311Packages.grip
   ];

templates/base.tmpl

@@ -61,7 +61,7 @@
         visibility: visible;
         opacity: 1;
       }
-      
+
       .css-button+div {
         visibility: hidden;
         opacity: 0;
@@ -85,8 +85,9 @@
       /* ----------------------------- */
       #mobile-nav-button span {
         transform-origin: 5px 0px;
-        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+        transition:
-          background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+          transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
+          background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
           opacity 0.55s ease;
       }
 
@@ -127,12 +128,13 @@
         padding-top: env(safe-area-inset-top);
         transform-origin: 0% 0%;
         transform: translate(-100%, 0);
-        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
+        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
       }
 
       @media (orientation: landscape) {
         #menu {
-          transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)), 0);
+          transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)),
+              0);
         }
       }
     </style>
@@ -152,61 +154,61 @@
           </div>
           <div>
             {{ $default := "flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4" }}
-            {{ $inactive := "border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100"}}
+            {{ $inactive := "border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100" }}
-            {{ $active := "border-purple-500 dark:text-white"}}
+            {{ $active := "border-purple-500 dark:text-white" }}
-            <a class="{{ $default }} {{ if eq .RouteName "home" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
+            <a class="{{ $default }} {{ if eq .RouteName "home" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
                href="/">
               {{ template "svg/home" (dict "Size" 20) }}
               <span class="mx-4 text-sm font-normal">Home</span>
             </a>
-            <a class="{{ $default }} {{ if eq .RouteName "documents" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
+            <a class="{{ $default }} {{ if eq .RouteName "documents" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
                href="/documents">
               {{ template "svg/documents" (dict "Size" 20) }}
               <span class="mx-4 text-sm font-normal">Documents</span>
             </a>
-            <a class="{{ $default }} {{ if eq .RouteName "progress" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
+            <a class="{{ $default }} {{ if eq .RouteName "progress" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
                href="/progress">
               {{ template "svg/activity" (dict "Size" 20) }}
               <span class="mx-4 text-sm font-normal">Progress</span>
             </a>
-            <a class="{{ $default }} {{ if eq .RouteName "activity" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
+            <a class="{{ $default }} {{ if eq .RouteName "activity" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
                href="/activity">
               {{ template "svg/activity" (dict "Size" 20) }}
               <span class="mx-4 text-sm font-normal">Activity</span>
             </a>
             {{ if .Config.SearchEnabled }}
-            <a class="{{ $default }} {{ if eq .RouteName "search" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
+            <a class="{{ $default }} {{ if eq .RouteName "search" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
                href="/search">
               {{ template "svg/search" (dict "Size" 20) }}
               <span class="mx-4 text-sm font-normal">Search</span>
             </a>
             {{ end }}
             {{ if .Authorization.IsAdmin }}
-            <div class="flex flex-col gap-4 p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{ if hasPrefix .RouteName "admin" }}dark:text-white border-purple-500{{ else if true }}border-transparent text-gray-400{{ end }}">
+            <div class="flex flex-col gap-4 p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{ if hasPrefix .RouteName "admin" }} dark:text-white border-purple-500 {{ else if true }} border-transparent text-gray-400 {{ end }}">
               <a href="/admin"
-                 class="flex justify-start w-full {{ if not (hasPrefix .RouteName "admin") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
+                 class="flex justify-start w-full {{ if not (hasPrefix .RouteName "admin") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
                 {{ template "svg/settings" (dict "Size" 20) }}
                 <span class="mx-4 text-sm font-normal">Admin</span>
               </a>
               {{ if hasPrefix .RouteName "admin" }}
               <a href="/admin"
                  style="padding-left: 1.75em"
-                 class="flex justify-start w-full {{ if not (eq .RouteName "admin") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
+                 class="flex justify-start w-full {{ if not (eq .RouteName "admin") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
                 <span class="mx-4 text-sm font-normal">General</span>
               </a>
               <a href="/admin/import"
                  style="padding-left: 1.75em"
-                 class="flex justify-start w-full {{ if not (eq .RouteName "admin-import") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
+                 class="flex justify-start w-full {{ if not (eq .RouteName "admin-import") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
                 <span class="mx-4 text-sm font-normal">Import</span>
               </a>
               <a href="/admin/users"
                  style="padding-left: 1.75em"
-                 class="flex justify-start w-full {{ if not (eq .RouteName "admin-users") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
+                 class="flex justify-start w-full {{ if not (eq .RouteName "admin-users") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
                 <span class="mx-4 text-sm font-normal">Users</span>
               </a>
               <a href="/admin/logs"
                  style="padding-left: 1.75em"
-                 class="flex justify-start w-full {{ if not (eq .RouteName "admin-logs") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
+                 class="flex justify-start w-full {{ if not (eq .RouteName "admin-logs") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
                 <span class="mx-4 text-sm font-normal">Logs</span>
               </a>
               {{ end }}
@@ -293,5 +295,13 @@
     <main class="relative overflow-hidden">
       <div id="container" class="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48">{{ block "content" . }}{{ end }}</div>
     </main>
+    <div class="absolute right-4 bottom-4">
+      {{ block "notifications" . }}{{ end }}
+      <!--
+      <div class="w-72 p-4 bg-red-500 rounded-xl">
+        <span>User Deleted</span>
+      </div>
+      -->
+    </div>
   </body>
 </html>

templates/components/activity.tmpl

@@ -0,0 +1,25 @@
+{{ template "base" . }}
+{{ define "title" }}Activity{{ end }}
+{{ define "header" }}<a href="./activity">Activity</a>{{ end }}
+{{ define "content" }}
+<div class="overflow-x-auto">
+  <div class="inline-block min-w-full overflow-hidden rounded shadow">
+    <!-- Table Component - Utilizes Template "table-cell" -->
+    {{ template "component/table" (dict
+"Columns" (slice "Document" "Time" "Duration" "Percent")
+"Keys" (slice "Document" "StartTime" "Duration" "EndPercentage")
+"Rows" .Data
+    )}}
+  </div>
+</div>
+{{ end }}
+<!-- Table Cell Definition -->
+{{ define "table-cell" }}
+{{ if eq .Name "Document" }}
+	<a href="./documents/{{ .Data.DocumentID }}">{{ .Data.Author }} - {{ .Data.Title }}</a>
+{{ else if eq .Name "EndPercentage" }}
+{{ index (fields .Data) .Name }}%
+{{ else }}
+{{ index (fields .Data) .Name }}
+{{ end }}
+{{ end }}

templates/components/button.tmpl

@@ -1,14 +1,21 @@
 <!-- Variant -->
 {{ $baseClass := "transition duration-100 ease-in font-medium w-full h-full px-2 py-1 text-white" }}
 {{ if eq .Variant "Secondary" }}
-{{ $baseClass = printf "bg-black shadow-md hover:text-black hover:bg-white %s" $baseClass }}
+  {{ $baseClass = printf "bg-black shadow-md hover:text-black hover:bg-white %s" $baseClass }}
 {{ else }}
-{{ $baseClass = printf "bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100 %s" $baseClass }}
+  {{ $baseClass = printf "bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100 %s" $baseClass }}
 {{ end }}
 <!-- Type -->
 {{ if eq .Type "Link" }}
-<a href="{{ .URL }}" class="text-center {{ $baseClass }}" type="submit">{{ .Title }}</a>
+  <a href="{{ .URL }}" class="text-center {{ $baseClass }}" type="submit"
+    >{{ .Title }}</a
+  >
 {{ else }}
-<button class="{{ $baseClass }}" type="submit" {{ if .FormName }} form="{{ .FormName}}" {{ end }}>{{ .Title }}
+  <button
-</button>
+    class="{{ $baseClass }}"
+    type="submit"
+    {{ if .FormName }}form="{{ .FormName }}"{{ end }}
+  >
+    {{ .Title }}
+  </button>
 {{ end }}

templates/components/table.tmpl

@@ -18,9 +18,7 @@
     {{ range $row := $rows }}
     <tr>
       {{ range $key := $keys }}
-      <td class="p-3 border-b border-gray-200">
+      <td class="p-3 border-b border-gray-200">{{ template "table-cell" (dict "Data" $row "Name" $key )}}</td>
-        <p>{{ index (fields $row) $key }}</p>
-      </td>
       {{ end }}
     </tr>
     {{ end }}

templates/pages/activity.tmpl

@@ -4,41 +4,22 @@
 {{ define "content" }}
 <div class="overflow-x-auto">
   <div class="inline-block min-w-full overflow-hidden rounded shadow">
-    <table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
+    <!-- Table Component - Utilizes Template "table-cell" -->
-      <thead class="text-gray-800 dark:text-gray-400">
+    {{ template "component/table" (dict
-        <tr>
+    "Columns" (slice "Document" "Time" "Duration" "Percent")
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
+    "Keys" (slice "Document" "StartTime" "Duration" "EndPercentage")
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Time</th>
+    "Rows" .Data
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Duration</th>
+    )}}
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Percent</th>
+  </div>
-        </tr>
-      </thead>
-      <tbody class="text-black dark:text-white">
-        {{ if not .Data }}
-        <tr>
-          <td class="text-center p-3" colspan="4">No Results</td>
-        </tr>
-        {{ end }}
-        {{ range $activity := .Data }}
-        <tr>
-          <td class="p-3 border-b border-gray-200">
-            <a href="./documents/{{ $activity.DocumentID }}">{{ $activity.Author }} - {{ $activity.Title }}
-            </p>
-          </a>
-        </td>
-        <td class="p-3 border-b border-gray-200">
-          <p>{{ $activity.StartTime }}</p>
-        </td>
-        <td class="p-3 border-b border-gray-200">
-          <p>{{ $activity.Duration }}</p>
-        </td>
-        <td class="p-3 border-b border-gray-200">
-          <p>{{ $activity.EndPercentage }}%</p>
-        </td>
-      </tr>
-      {{ end }}
-    </tbody>
-  </table>
-</div>
 </div>
 {{ end }}
+<!-- Table Cell Definition -->
+{{ define "table-cell" }}
+{{ if eq .Name "Document" }}
+<a href="./documents/{{ .Data.DocumentID }}">{{ .Data.Author }} - {{ .Data.Title }}</a>
+{{ else if eq .Name "EndPercentage" }}
+{{ index (fields .Data) .Name }}%
+{{ else }}
+{{ index (fields .Data) .Name }}
+{{ end }}
+{{ end }}

templates/pages/progress.tmpl

@@ -4,48 +4,22 @@
 {{ define "content" }}
 <div class="overflow-x-auto">
   <div class="inline-block min-w-full overflow-hidden rounded shadow">
-    <table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
+    <!-- Table Component - Utilizes Template "table-cell" -->
-      <thead class="text-gray-800 dark:text-gray-400">
+    {{ template "component/table" (dict
-        <tr>
+    "Columns" (slice "Document" "Device Name" "Percentage" "Created At")
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
+    "Keys" (slice "Document" "DeviceName" "Percentage" "CreatedAt")
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Device</th>
+    "Rows" .Data
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Percent</th>
+    )}}
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Time</th>
+  </div>
-        </tr>
-      </thead>
-      <tbody class="text-black dark:text-white">
-        {{ if not .Data }}
-        <tr>
-          <td class="text-center p-3" colspan="4">No Results</td>
-        </tr>
-        {{ end }}
-        {{ range $progress := .Data }}
-        <tr>
-          <td class="p-3 border-b border-gray-200">
-            <a href="./documents/{{ $progress.DocumentID }}">{{ $progress.Author }} - {{ $progress.Title }}
-            </p>
-          </a>
-        </td>
-        <td class="p-3 border-b border-gray-200">
-          <p>{{ $progress.DeviceName }}</p>
-        </td>
-        <td class="p-3 border-b border-gray-200">
-          <p>{{ $progress.Percentage }}%</p>
-        </td>
-        <td class="p-3 border-b border-gray-200">
-          <p>{{ $progress.CreatedAt }}</p>
-        </td>
-      </tr>
-      {{ end }}
-    </tbody>
-  </table>
-  <!--
-  {{ template "component/table" (dict
-  "Columns" (slice "Author" "Title" "Device Name" "Percentage" "Created At")
-  "Keys" (slice "Author" "Title" "DeviceName" "Percentage" "CreatedAt")
-  "Rows" .Data
-  )}}
-  -->
-</div>
 </div>
 {{ end }}
+<!-- Table Cell Definition -->
+{{ define "table-cell" }}
+{{ if eq .Name "Document" }}
+<a href="./documents/{{ .Data.DocumentID }}">{{ .Data.Author }} - {{ .Data.Title }}</a>
+{{ else if eq .Name "Percentage" }}
+{{ index (fields .Data) .Name }}%
+{{ else }}
+{{ index (fields .Data) .Name }}
+{{ end }}
+{{ end }}