add(web): basic layout and ui
This commit is contained in:
parent
fd14d22fed
commit
80df48284c
17 changed files with 9288 additions and 4 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -25,6 +25,7 @@ go.work.sum
|
|||
# env file
|
||||
.env
|
||||
|
||||
tmp/
|
||||
|
||||
*.db
|
||||
**/*_templ.go
|
||||
|
|
|
|||
24
Makefile
Normal file
24
Makefile
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
templ:
|
||||
templ generate --watch --proxy="http://localhost:3032" --open-browser=false
|
||||
|
||||
server:
|
||||
air \
|
||||
--build.cmd "go build -o tmp/bin/maot-shortner ./cmd/maot-shortner" \
|
||||
--build.bin "tmp/bin/maot-shortner" \
|
||||
--build.delay "100" \
|
||||
--build.exclude_dir "node_modules" \
|
||||
--build.include_ext "go" \
|
||||
--build.stop_on_error "false" \
|
||||
--misc.clean_on_exit true
|
||||
|
||||
tailwind-clean:
|
||||
tailwindcss -i ./web/resources/css/input.css -o ./web/static/css/output.css --clean
|
||||
|
||||
# Run tailwindcss to generate the styles.css bundle in watch mode.
|
||||
tailwind-watch:
|
||||
tailwindcss -i ./web/resources/css/input.css -o ./web/static/css/output.css --watch
|
||||
|
||||
# Start development server
|
||||
dev:
|
||||
make tailwind-clean
|
||||
make -j3 tailwind-watch templ server
|
||||
|
|
@ -24,13 +24,15 @@ func NewServer(db *database.Database) *Server {
|
|||
func createMux(db *database.Database) http.Handler {
|
||||
r := http.NewServeMux()
|
||||
|
||||
linkHandler := handlers.NewLinkHandler(db)
|
||||
|
||||
r.HandleFunc("POST /api/link", linkHandler.CreateLink)
|
||||
r.HandleFunc("GET /{id}", linkHandler.GetUrl)
|
||||
// Home page
|
||||
r.HandleFunc("/", handlers.HandleHomePage)
|
||||
|
||||
// Static content
|
||||
r.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static"))))
|
||||
|
||||
linkHandler := handlers.NewLinkHandler(db)
|
||||
r.HandleFunc("POST /api/link", linkHandler.CreateLink)
|
||||
r.HandleFunc("GET /{id}", linkHandler.GetUrl)
|
||||
|
||||
return handlers.LogMiddleware(r)
|
||||
}
|
||||
|
|
|
|||
15
internal/handlers/pages.go
Normal file
15
internal/handlers/pages.go
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
package handlers
|
||||
|
||||
import (
|
||||
"maot-shortner/web/templates/pages"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
type PagesHandler interface {
|
||||
HandleHomePage(w http.ResponseWriter, r *http.Request)
|
||||
}
|
||||
|
||||
func HandleHomePage(w http.ResponseWriter, r *http.Request) {
|
||||
homePage := pages.Home()
|
||||
homePage.Render(r.Context(), w)
|
||||
}
|
||||
1
web/resources/assets/js/input.min.js
vendored
Normal file
1
web/resources/assets/js/input.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
(()=>{(function(){function s(t){t.hasAttribute("data-initialized")||(t.setAttribute("data-initialized","true"),t.addEventListener("click",function(){let n=t.getAttribute("data-tui-input-toggle-password"),e=document.getElementById(n);if(e){let d=t.querySelector(".icon-open"),o=t.querySelector(".icon-closed");e.type==="password"?(e.type="text",d.classList.add("hidden"),o.classList.remove("hidden")):(e.type="password",d.classList.remove("hidden"),o.classList.add("hidden"))}}))}function i(t=document){t.querySelectorAll("[data-tui-input-toggle-password]:not([data-initialized])").forEach(e=>{s(e)})}window.templUI=window.templUI||{},window.templUI.input={init:i},document.addEventListener("DOMContentLoaded",()=>i())})();})();
|
||||
1
web/resources/assets/js/label.min.js
vendored
Normal file
1
web/resources/assets/js/label.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
(()=>{(function(){function a(t){if(!t||t.hasAttribute("data-initialized")||(t.setAttribute("data-initialized","true"),!t.hasAttribute("for")||!t.hasAttribute("data-tui-label-disabled-style")))return;let e=t.getAttribute("for"),i=e?document.getElementById(e):null,s=t.getAttribute("data-tui-label-disabled-style");if(!s)return;let n=s.split(" ").filter(Boolean);function d(){i&&i.disabled?t.classList.add(...n):t.classList.remove(...n)}i&&new MutationObserver(u=>{for(let r of u)r.type==="attributes"&&r.attributeName==="disabled"&&d()}).observe(i,{attributes:!0,attributeFilter:["disabled"]}),d()}function l(t=document){t instanceof Element&&t.matches("label[for][data-tui-label-disabled-style]")&&a(t);for(let e of t.querySelectorAll("label[for][data-tui-label-disabled-style]:not([data-initialized])"))a(e)}document.addEventListener("DOMContentLoaded",()=>l())})();})();
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
||||
@layer properties;
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
|
|
@ -10,6 +11,20 @@
|
|||
--color-green-500: oklch(72.3% 0.219 149.579);
|
||||
--color-blue-500: oklch(62.3% 0.214 259.815);
|
||||
--color-gray-300: oklch(87.2% 0.01 258.338);
|
||||
--spacing: 0.25rem;
|
||||
--container-2xl: 42rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-base: 1rem;
|
||||
--text-base--line-height: calc(1.5 / 1);
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--default-font-family: var(--font-sans);
|
||||
--default-mono-font-family: var(--font-mono);
|
||||
}
|
||||
|
|
@ -160,15 +175,390 @@
|
|||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.top-1 {
|
||||
top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
.right-0 {
|
||||
right: calc(var(--spacing) * 0);
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
@media (width >= 1600px) {
|
||||
max-width: 1600px;
|
||||
}
|
||||
@media (width >= 2000px) {
|
||||
max-width: 2000px;
|
||||
}
|
||||
@media (width >= 40rem) {
|
||||
max-width: 40rem;
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
max-width: 48rem;
|
||||
}
|
||||
@media (width >= 64rem) {
|
||||
max-width: 64rem;
|
||||
}
|
||||
@media (width >= 80rem) {
|
||||
max-width: 80rem;
|
||||
}
|
||||
@media (width >= 96rem) {
|
||||
max-width: 96rem;
|
||||
}
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
.size-9 {
|
||||
width: calc(var(--spacing) * 9);
|
||||
height: calc(var(--spacing) * 9);
|
||||
}
|
||||
.h-6 {
|
||||
height: calc(var(--spacing) * 6);
|
||||
}
|
||||
.h-8 {
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
.h-9 {
|
||||
height: calc(var(--spacing) * 9);
|
||||
}
|
||||
.h-10 {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.h-12 {
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
.h-24 {
|
||||
height: calc(var(--spacing) * 24);
|
||||
}
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.w-6 {
|
||||
width: calc(var(--spacing) * 6);
|
||||
}
|
||||
.w-12 {
|
||||
width: calc(var(--spacing) * 12);
|
||||
}
|
||||
.w-24 {
|
||||
width: calc(var(--spacing) * 24);
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.max-w-2xl {
|
||||
max-width: var(--container-2xl);
|
||||
}
|
||||
.min-w-0 {
|
||||
min-width: calc(var(--spacing) * 0);
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.-translate-y-1 {
|
||||
--tw-translate-y: calc(var(--spacing) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1\/2 {
|
||||
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.scale-3d {
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
|
||||
}
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
.columns-2 {
|
||||
columns: 2;
|
||||
}
|
||||
.columns-3 {
|
||||
columns: 3;
|
||||
}
|
||||
.columns-4 {
|
||||
columns: 4;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.gap-1 {
|
||||
gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
.gap-1\.5 {
|
||||
gap: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
}
|
||||
.border {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-destructive {
|
||||
border-color: var(--destructive);
|
||||
}
|
||||
.border-input {
|
||||
border-color: var(--input);
|
||||
}
|
||||
.bg-background {
|
||||
background-color: var(--background);
|
||||
}
|
||||
.bg-destructive {
|
||||
background-color: var(--destructive);
|
||||
}
|
||||
.bg-gray-300 {
|
||||
background-color: var(--color-gray-300);
|
||||
}
|
||||
.bg-green-500 {
|
||||
background-color: var(--color-green-500);
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
.bg-red-500 {
|
||||
background-color: var(--color-red-500);
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
.px-3 {
|
||||
padding-inline: calc(var(--spacing) * 3);
|
||||
}
|
||||
.px-4 {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
.px-6 {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
.py-1 {
|
||||
padding-block: calc(var(--spacing) * 1);
|
||||
}
|
||||
.py-2 {
|
||||
padding-block: calc(var(--spacing) * 2);
|
||||
}
|
||||
.py-4 {
|
||||
padding-block: calc(var(--spacing) * 4);
|
||||
}
|
||||
.pr-8 {
|
||||
padding-right: calc(var(--spacing) * 8);
|
||||
}
|
||||
.pb-8 {
|
||||
padding-bottom: calc(var(--spacing) * 8);
|
||||
}
|
||||
.text-4xl {
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
.text-base {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
}
|
||||
.text-sm {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
.text-xl {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
}
|
||||
.leading-none {
|
||||
--tw-leading: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.font-medium {
|
||||
--tw-font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text-destructive {
|
||||
color: var(--destructive);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--primary);
|
||||
}
|
||||
.text-primary-foreground {
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
.text-secondary-foreground {
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.underline-offset-4 {
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.opacity-50 {
|
||||
opacity: 50%;
|
||||
}
|
||||
.shadow-xs {
|
||||
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.ring-destructive {
|
||||
--tw-ring-color: var(--destructive);
|
||||
}
|
||||
.ring-destructive\/20 {
|
||||
--tw-ring-color: var(--destructive);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
|
||||
}
|
||||
}
|
||||
.outline {
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
}
|
||||
.transition-\[color\,box-shadow\] {
|
||||
transition-property: color,box-shadow;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.outline-none {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
}
|
||||
.selection\:bg-primary {
|
||||
& *::selection {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
&::selection {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
.selection\:text-primary-foreground {
|
||||
& *::selection {
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
&::selection {
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
}
|
||||
.file\:inline-flex {
|
||||
&::file-selector-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
.file\:h-7 {
|
||||
&::file-selector-button {
|
||||
height: calc(var(--spacing) * 7);
|
||||
}
|
||||
}
|
||||
.file\:border-0 {
|
||||
&::file-selector-button {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 0px;
|
||||
}
|
||||
}
|
||||
.file\:bg-transparent {
|
||||
&::file-selector-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.file\:text-sm {
|
||||
&::file-selector-button {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
}
|
||||
.file\:font-medium {
|
||||
&::file-selector-button {
|
||||
--tw-font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
.file\:text-foreground {
|
||||
&::file-selector-button {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
.placeholder\:text-muted-foreground {
|
||||
&::placeholder {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
.hover\:bg-accent {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-blue-500 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
|
|
@ -176,6 +566,215 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-destructive\/90 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--destructive);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-primary\/90 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--primary);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-secondary\/80 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--secondary);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-accent-foreground {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--accent-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:underline {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.focus-visible\:border-ring {
|
||||
&:focus-visible {
|
||||
border-color: var(--ring);
|
||||
}
|
||||
}
|
||||
.focus-visible\:ring-\[3px\] {
|
||||
&:focus-visible {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
.focus-visible\:ring-destructive\/20 {
|
||||
&:focus-visible {
|
||||
--tw-ring-color: var(--destructive);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.focus-visible\:ring-ring\/50 {
|
||||
&:focus-visible {
|
||||
--tw-ring-color: var(--ring);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.disabled\:pointer-events-none {
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.disabled\:cursor-not-allowed {
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.disabled\:opacity-50 {
|
||||
&:disabled {
|
||||
opacity: 50%;
|
||||
}
|
||||
}
|
||||
.has-\[\>svg\]\:px-2\.5 {
|
||||
&:has(>svg) {
|
||||
padding-inline: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
.has-\[\>svg\]\:px-3 {
|
||||
&:has(>svg) {
|
||||
padding-inline: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
.has-\[\>svg\]\:px-4 {
|
||||
&:has(>svg) {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.aria-invalid\:border-destructive {
|
||||
&[aria-invalid="true"] {
|
||||
border-color: var(--destructive);
|
||||
}
|
||||
}
|
||||
.aria-invalid\:ring-destructive\/20 {
|
||||
&[aria-invalid="true"] {
|
||||
--tw-ring-color: var(--destructive);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.md\:text-sm {
|
||||
@media (width >= 48rem) {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
}
|
||||
.dark\:border-input {
|
||||
&:where(.dark, .dark *) {
|
||||
border-color: var(--input);
|
||||
}
|
||||
}
|
||||
.dark\:bg-destructive\/60 {
|
||||
&:where(.dark, .dark *) {
|
||||
background-color: var(--destructive);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-input\/30 {
|
||||
&:where(.dark, .dark *) {
|
||||
background-color: var(--input);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--input) 30%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:ring-destructive\/40 {
|
||||
&:where(.dark, .dark *) {
|
||||
--tw-ring-color: var(--destructive);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:bg-accent\/50 {
|
||||
&:where(.dark, .dark *) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--accent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--accent) 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:bg-input\/50 {
|
||||
&:where(.dark, .dark *) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--input);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--input) 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:focus-visible\:ring-destructive\/40 {
|
||||
&:where(.dark, .dark *) {
|
||||
&:focus-visible {
|
||||
--tw-ring-color: var(--destructive);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:aria-invalid\:ring-destructive\/40 {
|
||||
&:where(.dark, .dark *) {
|
||||
&[aria-invalid="true"] {
|
||||
--tw-ring-color: var(--destructive);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.\[\&_svg\]\:pointer-events-none {
|
||||
& svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.\[\&_svg\]\:shrink-0 {
|
||||
& svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
|
||||
& svg:not([class*='size-']) {
|
||||
width: calc(var(--spacing) * 4);
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--radius: 0.65rem;
|
||||
|
|
@ -263,3 +862,146 @@
|
|||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
@property --tw-translate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-translate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-translate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-scale-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-leading {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-shadow-alpha {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-inset-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-inset-shadow-alpha {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-ring-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ring-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-inset-ring-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-inset-ring-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-ring-inset {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ring-offset-width {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 0px;
|
||||
}
|
||||
@property --tw-ring-offset-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: #fff;
|
||||
}
|
||||
@property --tw-ring-offset-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-outline-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-translate-z: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-scale-z: 1;
|
||||
--tw-border-style: solid;
|
||||
--tw-leading: initial;
|
||||
--tw-font-weight: initial;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
--tw-shadow-alpha: 100%;
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-color: initial;
|
||||
--tw-inset-shadow-alpha: 100%;
|
||||
--tw-ring-color: initial;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-inset-ring-color: initial;
|
||||
--tw-inset-ring-shadow: 0 0 #0000;
|
||||
--tw-ring-inset: initial;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-outline-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
147
web/templates/components/button/button.templ
Normal file
147
web/templates/components/button/button.templ
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
// templui component button - version: v0.85.0 installed by templui v0.85.0
|
||||
package button
|
||||
|
||||
import (
|
||||
"maot-shortner/web/resources/utils"
|
||||
"strings"
|
||||
)
|
||||
|
||||
type Variant string
|
||||
type Size string
|
||||
type Type string
|
||||
|
||||
const (
|
||||
VariantDefault Variant = "default"
|
||||
VariantDestructive Variant = "destructive"
|
||||
VariantOutline Variant = "outline"
|
||||
VariantSecondary Variant = "secondary"
|
||||
VariantGhost Variant = "ghost"
|
||||
VariantLink Variant = "link"
|
||||
)
|
||||
|
||||
const (
|
||||
TypeButton Type = "button"
|
||||
TypeReset Type = "reset"
|
||||
TypeSubmit Type = "submit"
|
||||
)
|
||||
|
||||
const (
|
||||
SizeDefault Size = "default"
|
||||
SizeSm Size = "sm"
|
||||
SizeLg Size = "lg"
|
||||
SizeIcon Size = "icon"
|
||||
)
|
||||
|
||||
type Props struct {
|
||||
ID string
|
||||
Class string
|
||||
Attributes templ.Attributes
|
||||
Variant Variant
|
||||
Size Size
|
||||
FullWidth bool
|
||||
Href string
|
||||
Target string
|
||||
Disabled bool
|
||||
Type Type
|
||||
}
|
||||
|
||||
templ Button(props ...Props) {
|
||||
{{ var p Props }}
|
||||
if len(props) > 0 {
|
||||
{{ p = props[0] }}
|
||||
}
|
||||
if p.Type == "" {
|
||||
{{ p.Type = TypeButton }}
|
||||
}
|
||||
if p.Href != "" && !p.Disabled {
|
||||
<a
|
||||
if p.ID != "" {
|
||||
id={ p.ID }
|
||||
}
|
||||
href={ templ.SafeURL(p.Href) }
|
||||
if p.Target != "" {
|
||||
target={ p.Target }
|
||||
}
|
||||
class={
|
||||
utils.TwMerge(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all",
|
||||
"disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
|
||||
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"cursor-pointer",
|
||||
p.variantClasses(),
|
||||
p.sizeClasses(),
|
||||
p.modifierClasses(),
|
||||
p.Class,
|
||||
),
|
||||
}
|
||||
{ p.Attributes... }
|
||||
>
|
||||
{ children... }
|
||||
</a>
|
||||
} else {
|
||||
<button
|
||||
if p.ID != "" {
|
||||
id={ p.ID }
|
||||
}
|
||||
class={
|
||||
utils.TwMerge(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all",
|
||||
"disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
|
||||
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"cursor-pointer",
|
||||
p.variantClasses(),
|
||||
p.sizeClasses(),
|
||||
p.modifierClasses(),
|
||||
p.Class,
|
||||
),
|
||||
}
|
||||
if p.Type != "" {
|
||||
type={ string(p.Type) }
|
||||
}
|
||||
disabled?={ p.Disabled }
|
||||
{ p.Attributes... }
|
||||
>
|
||||
{ children... }
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
||||
func (b Props) variantClasses() string {
|
||||
switch b.Variant {
|
||||
case VariantDestructive:
|
||||
return "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
|
||||
case VariantOutline:
|
||||
return "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
||||
case VariantSecondary:
|
||||
return "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
|
||||
case VariantGhost:
|
||||
return "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
|
||||
case VariantLink:
|
||||
return "text-primary underline-offset-4 hover:underline"
|
||||
default:
|
||||
return "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
|
||||
}
|
||||
}
|
||||
|
||||
func (b Props) sizeClasses() string {
|
||||
switch b.Size {
|
||||
case SizeSm:
|
||||
return "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"
|
||||
case SizeLg:
|
||||
return "h-10 rounded-md px-6 has-[>svg]:px-4"
|
||||
case SizeIcon:
|
||||
return "size-9"
|
||||
default: // SizeDefault
|
||||
return "h-9 px-4 py-2 has-[>svg]:px-3"
|
||||
}
|
||||
}
|
||||
|
||||
func (b Props) modifierClasses() string {
|
||||
classes := []string{}
|
||||
if b.FullWidth {
|
||||
classes = append(classes, "w-full")
|
||||
}
|
||||
return strings.Join(classes, " ")
|
||||
}
|
||||
117
web/templates/components/icon/icon.go
Normal file
117
web/templates/components/icon/icon.go
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
// templui component icon - version: v0.85.0 installed by templui v0.85.0
|
||||
package icon
|
||||
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"io"
|
||||
"sync"
|
||||
|
||||
"github.com/a-h/templ"
|
||||
)
|
||||
|
||||
// iconContents caches the fully generated SVG strings for icons that have been used,
|
||||
// keyed by a composite key of name and props to handle different stylings.
|
||||
var (
|
||||
iconContents = make(map[string]string)
|
||||
iconMutex sync.RWMutex
|
||||
)
|
||||
|
||||
// Props defines the properties that can be set for an icon.
|
||||
type Props struct {
|
||||
Size int
|
||||
Color string
|
||||
Fill string
|
||||
Stroke string
|
||||
StrokeWidth string // Stroke Width of Icon, Usage: "2.5"
|
||||
Class string
|
||||
}
|
||||
|
||||
// Icon returns a function that generates a templ.Component for the specified icon name.
|
||||
func Icon(name string) func(...Props) templ.Component {
|
||||
return func(props ...Props) templ.Component {
|
||||
var p Props
|
||||
if len(props) > 0 {
|
||||
p = props[0]
|
||||
}
|
||||
|
||||
// Create a unique key for the cache based on icon name and all relevant props.
|
||||
// This ensures different stylings of the same icon are cached separately.
|
||||
cacheKey := fmt.Sprintf("%s|s:%d|c:%s|f:%s|sk:%s|sw:%s|cl:%s",
|
||||
name, p.Size, p.Color, p.Fill, p.Stroke, p.StrokeWidth, p.Class)
|
||||
|
||||
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
|
||||
iconMutex.RLock()
|
||||
svg, cached := iconContents[cacheKey]
|
||||
iconMutex.RUnlock()
|
||||
|
||||
if cached {
|
||||
_, err = w.Write([]byte(svg))
|
||||
return err
|
||||
}
|
||||
|
||||
// Not cached, generate it
|
||||
// The actual generation now happens once and is cached.
|
||||
generatedSvg, err := generateSVG(name, p) // p (Props) is passed to generateSVG
|
||||
if err != nil {
|
||||
// Provide more context in the error message
|
||||
return fmt.Errorf("failed to generate svg for icon '%s' with props %+v: %w", name, p, err)
|
||||
}
|
||||
|
||||
iconMutex.Lock()
|
||||
iconContents[cacheKey] = generatedSvg
|
||||
iconMutex.Unlock()
|
||||
|
||||
_, err = w.Write([]byte(generatedSvg))
|
||||
return err
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// generateSVG creates an SVG string for the specified icon with the given properties.
|
||||
// This function is called when an icon-prop combination is not yet in the cache.
|
||||
func generateSVG(name string, props Props) (string, error) {
|
||||
// Get the raw, inner SVG content for the icon name from our internal data map.
|
||||
content, err := getIconContent(name) // This now reads from internalSvgData
|
||||
if err != nil {
|
||||
return "", err // Error from getIconContent already includes icon name
|
||||
}
|
||||
|
||||
size := props.Size
|
||||
if size <= 0 {
|
||||
size = 24 // Default size
|
||||
}
|
||||
|
||||
fill := props.Fill
|
||||
if fill == "" {
|
||||
fill = "none" // Default fill
|
||||
}
|
||||
|
||||
stroke := props.Stroke
|
||||
if stroke == "" {
|
||||
stroke = props.Color // Fallback to Color if Stroke is not set
|
||||
}
|
||||
if stroke == "" {
|
||||
stroke = "currentColor" // Default stroke color
|
||||
}
|
||||
|
||||
strokeWidth := props.StrokeWidth
|
||||
if strokeWidth == "" {
|
||||
strokeWidth = "2" // Default stroke width
|
||||
}
|
||||
|
||||
// Construct the final SVG string.
|
||||
// The data-lucide attribute helps identify these as Lucide icons if needed.
|
||||
return fmt.Sprintf("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"%d\" height=\"%d\" viewBox=\"0 0 24 24\" fill=\"%s\" stroke=\"%s\" stroke-width=\"%s\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"%s\" data-lucide=\"icon\">%s</svg>",
|
||||
size, size, fill, stroke, strokeWidth, props.Class, content), nil
|
||||
}
|
||||
|
||||
// getIconContent retrieves the raw inner SVG content for a given icon name.
|
||||
// It reads from the pre-generated internalSvgData map from icon_data.go.
|
||||
func getIconContent(name string) (string, error) {
|
||||
content, exists := internalSvgData[name]
|
||||
if !exists {
|
||||
return "", fmt.Errorf("icon '%s' not found in internalSvgData map", name)
|
||||
}
|
||||
return content, nil
|
||||
}
|
||||
6289
web/templates/components/icon/icondata.go
Normal file
6289
web/templates/components/icon/icondata.go
Normal file
File diff suppressed because it is too large
Load diff
1595
web/templates/components/icon/icondefs.go
Normal file
1595
web/templates/components/icon/icondefs.go
Normal file
File diff suppressed because it is too large
Load diff
123
web/templates/components/input/input.templ
Normal file
123
web/templates/components/input/input.templ
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
// templui component input - version: v0.85.0 installed by templui v0.85.0
|
||||
package input
|
||||
|
||||
import (
|
||||
"maot-shortner/web/templates/components/button"
|
||||
"maot-shortner/web/templates/components/icon"
|
||||
"maot-shortner/web/resources/utils"
|
||||
)
|
||||
|
||||
type Type string
|
||||
|
||||
const (
|
||||
TypeText Type = "text"
|
||||
TypePassword Type = "password"
|
||||
TypeEmail Type = "email"
|
||||
TypeNumber Type = "number"
|
||||
TypeTel Type = "tel"
|
||||
TypeURL Type = "url"
|
||||
TypeSearch Type = "search"
|
||||
TypeDate Type = "date"
|
||||
TypeTime Type = "time"
|
||||
TypeFile Type = "file"
|
||||
)
|
||||
|
||||
type Props struct {
|
||||
ID string
|
||||
Class string
|
||||
Attributes templ.Attributes
|
||||
Name string
|
||||
Type Type
|
||||
Placeholder string
|
||||
Value string
|
||||
Disabled bool
|
||||
Readonly bool
|
||||
Required bool
|
||||
FileAccept string
|
||||
HasError bool
|
||||
NoTogglePassword bool
|
||||
}
|
||||
|
||||
templ Input(props ...Props) {
|
||||
{{ var p Props }}
|
||||
if len(props) > 0 {
|
||||
{{ p = props[0] }}
|
||||
}
|
||||
if p.Type == "" {
|
||||
{{ p.Type = TypeText }}
|
||||
}
|
||||
if p.ID == "" {
|
||||
{{ p.ID = utils.RandomID() }}
|
||||
}
|
||||
<div class="relative w-full">
|
||||
<input
|
||||
id={ p.ID }
|
||||
type={ string(p.Type) }
|
||||
if p.Name != "" {
|
||||
name={ p.Name }
|
||||
}
|
||||
if p.Placeholder != "" {
|
||||
placeholder={ p.Placeholder }
|
||||
}
|
||||
if p.Value != "" {
|
||||
value={ p.Value }
|
||||
}
|
||||
if p.Type == TypeFile && p.FileAccept != "" {
|
||||
accept={ p.FileAccept }
|
||||
}
|
||||
disabled?={ p.Disabled }
|
||||
readonly?={ p.Readonly }
|
||||
required?={ p.Required }
|
||||
if p.HasError {
|
||||
aria-invalid="true"
|
||||
}
|
||||
class={
|
||||
utils.TwMerge(
|
||||
// Base styles
|
||||
"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
|
||||
// Dark mode background
|
||||
"dark:bg-input/30",
|
||||
// Selection styles
|
||||
"selection:bg-primary selection:text-primary-foreground",
|
||||
// Placeholder
|
||||
"placeholder:text-muted-foreground",
|
||||
// File input styles
|
||||
"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
|
||||
// Focus styles
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
// Disabled styles
|
||||
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
||||
// Error/Invalid styles
|
||||
"aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40",
|
||||
utils.If(p.HasError, "border-destructive ring-destructive/20 dark:ring-destructive/40"),
|
||||
utils.If(p.Type == TypePassword && !p.NoTogglePassword, "pr-8"),
|
||||
p.Class,
|
||||
),
|
||||
}
|
||||
{ p.Attributes... }
|
||||
/>
|
||||
if p.Type == TypePassword && !p.NoTogglePassword {
|
||||
@button.Button(button.Props{
|
||||
Size: button.SizeIcon,
|
||||
Variant: button.VariantGhost,
|
||||
Class: "absolute right-0 top-1/2 -translate-y-1/2 opacity-50 cursor-pointer",
|
||||
Attributes: templ.Attributes{"data-tui-input-toggle-password": p.ID},
|
||||
}) {
|
||||
<span class="icon-open block">
|
||||
@icon.Eye(icon.Props{
|
||||
Size: 18,
|
||||
})
|
||||
</span>
|
||||
<span class="icon-closed hidden">
|
||||
@icon.EyeOff(icon.Props{
|
||||
Size: 18,
|
||||
})
|
||||
</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
templ Script() {
|
||||
<script defer src="/web/static/js/input.min.js"></script>
|
||||
}
|
||||
42
web/templates/components/label/label.templ
Normal file
42
web/templates/components/label/label.templ
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// templui component label - version: v0.85.0 installed by templui v0.85.0
|
||||
package label
|
||||
|
||||
import "maot-shortner/web/resources/utils"
|
||||
|
||||
type Props struct {
|
||||
ID string
|
||||
Class string
|
||||
Attributes templ.Attributes
|
||||
For string
|
||||
Error string
|
||||
}
|
||||
|
||||
templ Label(props ...Props) {
|
||||
{{ var p Props }}
|
||||
if len(props) > 0 {
|
||||
{{ p = props[0] }}
|
||||
}
|
||||
<label
|
||||
if p.ID != "" {
|
||||
id={ p.ID }
|
||||
}
|
||||
if p.For != "" {
|
||||
for={ p.For }
|
||||
}
|
||||
class={
|
||||
utils.TwMerge(
|
||||
"text-sm font-medium leading-none inline-block",
|
||||
utils.If(len(p.Error) > 0, "text-destructive"),
|
||||
p.Class,
|
||||
),
|
||||
}
|
||||
data-tui-label-disabled-style="opacity-50 cursor-not-allowed"
|
||||
{ p.Attributes... }
|
||||
>
|
||||
{ children... }
|
||||
</label>
|
||||
}
|
||||
|
||||
templ Script() {
|
||||
<script defer src="/web/static/js/label.min.js"></script>
|
||||
}
|
||||
29
web/templates/layouts/main.templ
Normal file
29
web/templates/layouts/main.templ
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
package layouts
|
||||
|
||||
import (
|
||||
"maot-shortner/web/templates/components/input"
|
||||
"maot-shortner/web/templates/components/label"
|
||||
"maot-shortner/web/templates/modules"
|
||||
)
|
||||
|
||||
templ MainLayout() {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full dark">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="/static/css/output.css" rel="stylesheet"/>
|
||||
<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico"/>
|
||||
@input.Script()
|
||||
@label.Script()
|
||||
</head>
|
||||
<body class="h-full">
|
||||
<div class="h-full flex flex-col">
|
||||
@modules.Navbar()
|
||||
<main class="flex-1">
|
||||
{ children... }
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
34
web/templates/modules/navbar.templ
Normal file
34
web/templates/modules/navbar.templ
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
|
||||
package modules
|
||||
|
||||
import "maot-shortner/web/templates/components/icon"
|
||||
import "maot-shortner/web/templates/components/button"
|
||||
|
||||
templ Github() {
|
||||
@button.Button(button.Props{
|
||||
Variant: button.VariantGhost,
|
||||
Href: "https://git.maot.dev/maot/maot-shortner",
|
||||
}) {
|
||||
<span class="font-bold">
|
||||
repo
|
||||
</span>
|
||||
@icon.GitMerge(icon.Props{Class: "w-6 h-6"})
|
||||
}
|
||||
}
|
||||
|
||||
templ Navbar() {
|
||||
<nav class="py-1">
|
||||
<div class="px-6 flex justify-between items-center relative">
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="flex items-center gap-1.5">
|
||||
@icon.Link(icon.Props{Class: "w-6 h-6"})
|
||||
<span class="text-xl font-bold">s.maot.dev</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex gap-1 items-center justify-center">
|
||||
@ThemeSwitcher()
|
||||
@Github()
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
91
web/templates/modules/themeswitcher.templ
Normal file
91
web/templates/modules/themeswitcher.templ
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
package modules
|
||||
|
||||
import (
|
||||
"maot-shortner/web/templates/components/button"
|
||||
"maot-shortner/web/templates/components/icon"
|
||||
)
|
||||
|
||||
type ThemeSwitcherProps struct {
|
||||
Class string
|
||||
}
|
||||
|
||||
templ ThemeSwitcher(props ...ThemeSwitcherProps) {
|
||||
{{ var p ThemeSwitcherProps }}
|
||||
if len(props) > 0 {
|
||||
{{ p = props[0] }}
|
||||
}
|
||||
<script nonce={ templ.GetNonce(ctx) }>
|
||||
(function() {
|
||||
// Get current theme preference (system, light, or dark)
|
||||
function getThemePreference() {
|
||||
return localStorage.getItem('themePreference') || 'system';
|
||||
}
|
||||
|
||||
// Apply theme based on preference
|
||||
function applyTheme() {
|
||||
const preference = getThemePreference();
|
||||
let isDark = false;
|
||||
|
||||
if (preference === 'system') {
|
||||
// Use system preference
|
||||
isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
} else {
|
||||
// Use explicit preference
|
||||
isDark = preference === 'dark';
|
||||
}
|
||||
|
||||
document.documentElement.classList.toggle('dark', isDark);
|
||||
|
||||
// Dispatch event for compatibility
|
||||
document.dispatchEvent(new CustomEvent('theme-changed'));
|
||||
}
|
||||
|
||||
// Toggle between light and dark (system only on initial state)
|
||||
function cycleTheme() {
|
||||
const current = getThemePreference();
|
||||
let next;
|
||||
|
||||
if (current === 'system') {
|
||||
// First click from system state - determine based on current appearance
|
||||
const isDarkNow = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
next = isDarkNow ? 'light' : 'dark';
|
||||
} else {
|
||||
// Toggle between light and dark
|
||||
next = current === 'light' ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
localStorage.setItem('themePreference', next);
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
// Initialize theme
|
||||
applyTheme();
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if (getThemePreference() === 'system') {
|
||||
applyTheme();
|
||||
}
|
||||
});
|
||||
|
||||
// Use event delegation for click handling
|
||||
document.addEventListener('click', (e) => {
|
||||
const themeSwitcher = e.target.closest('[data-theme-switcher]');
|
||||
if (themeSwitcher) {
|
||||
e.preventDefault();
|
||||
cycleTheme();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@button.Button(button.Props{
|
||||
Size: button.SizeIcon,
|
||||
Variant: button.VariantGhost,
|
||||
Class: p.Class,
|
||||
Attributes: templ.Attributes{
|
||||
"data-theme-switcher": "true",
|
||||
},
|
||||
}) {
|
||||
@icon.Eclipse(icon.Props{Size: 20})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
package pages
|
||||
|
||||
import (
|
||||
"maot-shortner/web/templates/components/button"
|
||||
"maot-shortner/web/templates/components/icon"
|
||||
"maot-shortner/web/templates/components/input"
|
||||
"maot-shortner/web/templates/layouts"
|
||||
)
|
||||
|
||||
templ Home() {
|
||||
@layouts.MainLayout() {
|
||||
<div class="h-full flex justify-center items-center flex-col">
|
||||
@icon.Link(icon.Props{Class: "w-24 h-24"})
|
||||
<h2 class="text-4xl font-bold py">shorten your urls...</h2>
|
||||
<div class="flex gap-4 items-center justify-center mt-4 px-4 w-full max-w-2xl">
|
||||
@input.Input(input.Props{
|
||||
ID: "URL",
|
||||
Type: input.TypeURL,
|
||||
Placeholder: "https://very-long-url.com/",
|
||||
})
|
||||
@button.Button(button.Props{
|
||||
ID: "Shorten",
|
||||
Variant: button.VariantGhost,
|
||||
Type: button.TypeSubmit,
|
||||
}) {
|
||||
@icon.Send(icon.Props{Size: 20})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue