chore(templates): prettier plugin & tables

2024-06-16 17:08:10 -04:00 · 2024-06-16 17:08:10 -04:00 · f37bff365f
commit f37bff365f
parent 77527bfb05
12 changed files with 168 additions and 106 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,3 +4,4 @@ data/
 build/
 .direnv/
 cover.html
+node_modules
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-go-template"]
+}
--- a/assets/style.css
+++ b/assets/style.css
--- a/package-lock.json
+++ b/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"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,7 @@
+{
+  "name": "antholume",
+  "version": "1.0.0",
+  "devDependencies": {
+    "prettier-plugin-go-template": "^0.0.15"
+  }
+}
--- a/shell.nix
+++ b/shell.nix
@ -3,6 +3,7 @@
 pkgs.mkShell {
  packages = with pkgs; [
    go
+    nodejs
    nodePackages.tailwindcss
    python311Packages.grip
  ];
--- a/templates/base.tmpl
+++ b/templates/base.tmpl
@ -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),
-          background 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),
+          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>
@ -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>
--- a/templates/components/activity.tmpl
+++ b/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 }}
--- a/templates/components/button.tmpl
+++ b/templates/components/button.tmpl
@ -7,8 +7,15 @@
 {{ 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
+    class="{{ $baseClass }}"
+    type="submit"
+    {{ if .FormName }}form="{{ .FormName }}"{{ end }}
+  >
+    {{ .Title }}
  </button>
 {{ end }}
--- a/templates/components/table.tmpl
+++ b/templates/components/table.tmpl
@ -18,9 +18,7 @@
    {{ range $row := $rows }}
    <tr>
      {{ range $key := $keys }}
-      <td class="p-3 border-b border-gray-200">
-        <p>{{ index (fields $row) $key }}</p>
-      </td>
+      <td class="p-3 border-b border-gray-200">{{ template "table-cell" (dict "Data" $row "Name" $key )}}</td>
      {{ end }}
    </tr>
    {{ end }}
--- a/templates/pages/activity.tmpl
+++ b/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">
-      <thead class="text-gray-800 dark:text-gray-400">
-        <tr>
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Time</th>
-          <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>
-        </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>
+    <!-- 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 }}
--- a/templates/pages/progress.tmpl
+++ b/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">
-      <thead class="text-gray-800 dark:text-gray-400">
-        <tr>
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
-          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Device</th>
-          <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>
-        </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>
-  <!--
+    <!-- Table Component - Utilizes Template "table-cell" -->
    {{ template "component/table" (dict
-  "Columns" (slice "Author" "Title" "Device Name" "Percentage" "Created At")
-  "Keys" (slice "Author" "Title" "DeviceName" "Percentage" "CreatedAt")
+    "Columns" (slice "Document" "Device Name" "Percentage" "Created At")
+    "Keys" (slice "Document" "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 }}