tmpl,just: process SVGs with svgo
All checks were successful
continuous-integration/drone/push Build is passing
6
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 :
|
||||
|
25
svgo.config.js
Normal file
@ -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']}
|
||||
},
|
||||
]
|
||||
}
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
<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>
|
||||
<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>
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 239 B |
@ -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>
|
Before Width: | Height: | Size: 284 B |
@ -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">
|
||||
<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>
|
||||
<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>
|
Before Width: | Height: | Size: 308 B After Width: | Height: | Size: 238 B |
@ -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">
|
||||
<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>
|
||||
<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>
|
Before Width: | Height: | Size: 343 B After Width: | Height: | Size: 282 B |