tmpl,just: process SVGs with svgo

justfile

@@ -47,3 +47,9 @@ dbstart:
 # stop pg.
 dbstop:
 	podman stop pg
+
+# process svg template assets.
+svgo:
+	svgo -i templates/svg-"*".tmpl
+
+#  vim: set ts=2 ft=just syntax=make fenc=utf-8 ff=unix :

svgo.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  multipass: true,
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeViewBox: false
+        }
+      }
+    },
+    'removeStyleElement',
+    'removeScriptElement',
+    {
+      name: 'removeAttrs',
+      params: {
+        attrs: ['xmlns', 'id', 'class', 'data-name', 'fill', 'transform', 'href', 'clip-path', 'clip-rule']
+      }
+    },
+    {
+      name: 'addClassesToSVGElement',
+      params: {classNames: ['w-6 h-6 mx-3 text-gray-300 dark:text-gray-500 fill-none stroke-current stroke-2']}
+    },
+  ]
+}

templates/navbar.tmpl

@@ -7,7 +7,10 @@
 		<div class="group/navbar">
 			<button type="button" class="inline-flex items-center p-2 ml-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" data-collapse-toggle="navbar">
 				<span class="sr-only">Main menu</span>
-				{{ template "svg-hamburger.tmpl" }}
+				<svg aria-hidden="true" alt="main menu icon" viewBox="0 0 20 20" class="w-6 h-6 fill-current"><path fill-rule="evenodd" d="M3 5a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H4a1 1 0 0
+1-1-1zm0 5a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1zm0 5a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H4a1 1 0 0
+1-1-1z"/></svg>
+				</span>
 			</button>
 			<div class="hidden group-hover/navbar:block fixed z-50 right-[3.2rem] top-2 overflow-y-auto max-w-10 md:block md:w-auto" id="navbar">
 				<ul class="flex flex-col items-center font-medium p-4 md:p-0 mt-2 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">

templates/signin.tmpl

@@ -16,14 +16,14 @@
 				<form method="post" class="w-full lg:max-w-xl">
 					<!-- username field -->
 					<div class="relative flex items-center">
-						<span class="absolute">
+						<span class="absolute" role="img" aria-label="person outline icon for username">
 							{{ template "svg-user.tmpl" }}
 						</span>
 						<input name="username" type="username" placeholder="Username" class="block w-full py-3 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
 					</div>
 					<!-- password field -->
 					<div class="relative flex items-center mt-4">
-						<span class="absolute">
+						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
 						<input name="password" type="password" placeholder="Password" class="block w-full px-10 py-3 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">

templates/signup.tmpl

@@ -15,14 +15,14 @@
 				<form method="post" class="w-full lg:max-w-xl">
 					<input type="hidden" name="_csrf" value="{{- .CSRF -}}">
 					<div class="relative flex items-center">
-						<span class="absolute">
+						<span class="absolute" role="img" aria-label="person outline icon for username">
 							{{ template "svg-user.tmpl" }}
 						</span>
 						<input name="username" type="username" placeholder="Username" class="block w-full py-3 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
 					</div>
 					<div class="relative flex items-center mt-4">
 						<!-- <label class="block"> -->
-						<span class="absolute">
+						<span class="absolute" role="img" aria-label="email icon">
 							{{ template "svg-email.tmpl" }}
 						</span>
 						<input name="email" type="email" placeholder="Email address" class="peer block w-full px-10 py-3 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
@@ -32,7 +32,7 @@
 						<!-- </label> -->
 					</div>
 					<div class="relative flex items-center mt-4">
-						<span class="absolute">
+						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
 						<input name="password" type="password" placeholder="Password" class="block w-full px-10 py-3 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">

templates/svg-email.tmpl

@@ -1,3 +1 @@
- <svg alt="email icon" class="w-6 h-6 mx-3 text-gray-300 dark:text-gray-500 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+<svg viewBox="0 0 24 24" class="w-6 h-6 mx-3 text-gray-300 dark:text-gray-500 fill-none stroke-current stroke-2"><path d="m3 8 7.89 5.26a2 2 0 0 0 2.22 0L21 8M5 19h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2z"/></svg>
-	<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
- </svg>

templates/svg-hamburger.tmpl

@@ -1,3 +0,0 @@
-<svg class="w-6 h-6 fill-current" aria-hidden="true" viewBox="0 0 20 20">
-	<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
-</svg>

templates/svg-password.tmpl

@@ -1,3 +1 @@
-<svg alt="password lock icon" class="w-6 h-6 mx-3 text-gray-300 dark:text-gray-500 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+<svg viewBox="0 0 24 24" class="w-6 h-6 mx-3 text-gray-300 dark:text-gray-500 fill-none stroke-current stroke-2"><path d="M12 15v2m-6 4h12a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm10-10V7a4 4 0 0 0-8 0v4h8z"/></svg>
-	<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-</svg>

templates/svg-user.tmpl

@@ -1,3 +1 @@
-<svg alt="user icon" class="w-6 h-6 mx-3 text-gray-300 dark:text-gray-500 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+<svg viewBox="0 0 24 24" class="w-6 h-6 mx-3 text-gray-300 dark:text-gray-500 fill-none stroke-current stroke-2"><path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
-	<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
-</svg>