From 4b175edac6422c6dc343c08c78240e0e12c45c38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Caxzilla=E2=80=9D?= Date: Mon, 7 Oct 2024 17:00:05 +0200 Subject: [PATCH] change: improve docs layout --- CHANGELOG.md | 1 + README.md | 4 +-- assets/css/output.css | 44 +++++++++++++++++++++++++++ cmd/server/main.go | 2 +- internals/ui/components/footer.templ | 7 ++--- internals/ui/components/navbar.templ | 2 +- internals/ui/components/sidebar.templ | 2 +- internals/ui/layouts/base.templ | 11 +++---- internals/ui/layouts/docs.templ | 24 +++++++++------ internals/ui/pages/introduction.templ | 4 +-- internals/ui/pages/landing.templ | 12 +++++--- 11 files changed, 82 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eec9ade..eb61704 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Added: Accordion component - Added: Datepicker component - Changed: Improve documentation and introduction page +- Changed: Improve docs layout - Changed: Add button type prop - Changed: Use own input component on tabs example - Changed: Update all current components with library comments diff --git a/README.md b/README.md index 4d67685..7413ca3 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ # Goilerplate -Modern UI Components for Go, Templ, Alpine.js, and Tailwind CSS +Modern UI Components for Go & Templ Goilerplate Logo ## About -Goilerplate is a growing library of modern UI components designed specifically for Go and Templ, with Alpine.js for interactivity and Tailwind CSS for styling. It aims to bridge the gap between Go's server-side efficiency and modern, interactive front-end experiences. Whether you're building a small website or a large web application, Goilerplate provides the tools you need to create sleek, responsive interfaces with ease. +Goilerplate is a growing library of modern UI components designed specifically for Go and Templ. It leverages Alpine.js for enhanced interactivity and Tailwind CSS for effortless styling. Whether you're building a small website or a large web application, Goilerplate provides the tools you need to create sleek, responsive interfaces with ease. ## Features diff --git a/assets/css/output.css b/assets/css/output.css index c83c895..4afc82a 100644 --- a/assets/css/output.css +++ b/assets/css/output.css @@ -656,6 +656,10 @@ body { position: relative; } +.sticky { + position: sticky; +} + .inset-0 { inset: 0px; } @@ -779,6 +783,14 @@ body { margin-top: 1rem; } +.mt-auto { + margin-top: auto; +} + +.mt-\[100vh\] { + margin-top: 100vh; +} + .block { display: block; } @@ -847,6 +859,18 @@ body { height: 100%; } +.h-screen { + height: 100vh; +} + +.h-\[calc\(100vh-4rem\)\] { + height: calc(100vh - 4rem); +} + +.h-5 { + height: 1.25rem; +} + .\!max-h-\[501px\] { max-height: 501px !important; } @@ -855,6 +879,10 @@ body { min-height: 100vh; } +.min-h-full { + min-height: 100%; +} + .w-1\/3 { width: 33.333333%; } @@ -899,6 +927,10 @@ body { width: 100%; } +.w-5 { + width: 1.25rem; +} + .max-w-3xl { max-width: 48rem; } @@ -927,10 +959,18 @@ body { flex: 1 1 0%; } +.flex-shrink-0 { + flex-shrink: 0; +} + .shrink-0 { flex-shrink: 0; } +.flex-grow { + flex-grow: 1; +} + .-translate-x-1\/4 { --tw-translate-x: -25%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1965,6 +2005,10 @@ body { } @media (min-width: 768px) { + .md\:block { + display: block; + } + .md\:flex { display: flex; } diff --git a/cmd/server/main.go b/cmd/server/main.go index 18d023a..d3d8571 100644 --- a/cmd/server/main.go +++ b/cmd/server/main.go @@ -17,7 +17,7 @@ func main() { SetupAssetsRoutes(mux) mux.Handle("GET /", templ.Handler(pages.Landing())) - mux.Handle("GET /docs/components", http.RedirectHandler("/docs/components/button", http.StatusSeeOther)) + mux.Handle("GET /docs/components", http.RedirectHandler("/docs/components/accordion", http.StatusSeeOther)) mux.Handle("GET /docs/getting-started", http.RedirectHandler("/docs/introduction", http.StatusSeeOther)) mux.Handle("GET /docs/introduction", templ.Handler(pages.Introduction())) mux.Handle("GET /docs/how-to-use", templ.Handler(pages.HowToUse())) diff --git a/internals/ui/components/footer.templ b/internals/ui/components/footer.templ index f9105c2..de1e638 100644 --- a/internals/ui/components/footer.templ +++ b/internals/ui/components/footer.templ @@ -6,11 +6,8 @@ import "fmt" templ Footer() {