change: improve docs layout

2025-02-21 00:12:48 +00:00 · 2024-10-07 17:00:05 +02:00 · 2024-10-07 17:00:05 +02:00 · 4b175edac6
commit 4b175edac6
parent 86d5cb9934
11 changed files with 82 additions and 31 deletions
--- 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
--- 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

 <img src="./assets/img/gopher.svg" alt="Goilerplate Logo" width="200"/>

 ## 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

--- 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;
  }
--- 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()))
--- a/internals/ui/components/footer.templ
+++ b/internals/ui/components/footer.templ
@ -6,11 +6,8 @@ import "fmt"
 templ Footer() {
 	<footer class="py-4 text-center text-sm text-muted-foreground border-t">
 		<div class="container">
-			<p class="mb-2 font-semibold">
-				{ fmt.Sprintf("© %d goilerplate:", time.Now().Year()) }
-			</p>
-			<p class="pb-8">
-				Where Go meets UI, and sanity is optional. Use at your own risk. Stupid code not excluded.
+			<p class="mb-4 font-semibold">
+				{ fmt.Sprintf("© %d goilerplate.", time.Now().Year()) } Stupid code not excluded.
 			</p>
 			<div class="flex justify-center">
 				<a href="https://www.producthunt.com/posts/goilerplate-1?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-goilerplate-1" target="_blank">
--- a/internals/ui/components/navbar.templ
+++ b/internals/ui/components/navbar.templ
@ -23,7 +23,7 @@ templ Navbar() {
 					</svg>
 				}
 				@Button(ButtonProps{Size: "icon", Variant: "ghost", Href: "https://x.com/_axzilla", Target: "_blank"}) {
-					<svg class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+					<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 						<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
 					</svg>
 				}
--- a/internals/ui/components/sidebar.templ
+++ b/internals/ui/components/sidebar.templ
@ -3,7 +3,7 @@ package components
 import "github.com/axzilla/goilerplate/internals/shared"

 templ Sidebar() {
-	<aside class="h-full hidden md:flex border-r">
+	<aside class="h-full">
 		<div class="h-full overflow-y-auto">
 			<nav class="px-4 py-6">
 				<ul class="space-y-2">
--- a/internals/ui/layouts/base.templ
+++ b/internals/ui/layouts/base.templ
@ -4,7 +4,7 @@ import "github.com/axzilla/goilerplate/internals/config"

 templ BaseLayout() {
 	<!DOCTYPE html>
-	<html lang="en">
+	<html lang="en" class="h-full">
 		<head>
 			<title>Goilerplate - Modern UI Components for Go & Templ</title>
 			<meta charset="UTF-8"/>
@ -34,9 +34,6 @@ templ BaseLayout() {
 			<link rel="icon" href="/assets/img/gopher.svg" type="image/x-icon"/>
 			<!-- Tailwind CSS (local) -->
 			<link href="/assets/css/output.css" rel="stylesheet"/>
-			<!-- htmx 2.0 -->
-			// <script src="/assets/js/htmx.min.js"></script>
-			// <script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/loading-states.js"></script>
 			<!-- Alpine.js -->
 			<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
 			<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@ -56,11 +53,13 @@ templ BaseLayout() {
                    document.documentElement.classList.toggle('dark', this.theme === 'dark');
                }
            }"
-			class="min-h-screen flex flex-col transition-colors duration-200"
+			class="h-full flex flex-col transition-colors duration-200"
 			:class="{'bg-white text-black': theme === 'light', 'text-white': theme === 'dark'}"
 		>
 			<div class="page-loader">Loading...</div>
-			{ children... }
+			<div class="flex flex-col min-h-screen">
+				{ children... }
+			</div>
 		</body>
 	</html>
 }
--- a/internals/ui/layouts/docs.templ
+++ b/internals/ui/layouts/docs.templ
@ -4,16 +4,22 @@ import "github.com/axzilla/goilerplate/internals/ui/components"

 templ DocsLayout() {
 	@BaseLayout() {
-		@components.Navbar()
-		<div class="flex flex-1 overflow-hidden">
-			@components.Sidebar()
-			<main class="flex-1 overflow-auto">
-				<div class="container max-w-3xl mx-auto px-4 py-8">
-					{ children... }
+		<div class="flex flex-col h-screen">
+			<div class="flex-shrink-0">
+				@components.Navbar()
+			</div>
+			<div class="flex flex-1 overflow-hidden">
+				<div class="hidden md:block border-r overflow-y-auto h-full">
+					@components.Sidebar()
+				</div>
+				<main class="flex-1 overflow-y-auto h-full">
+					<div class="container max-w-3xl mx-auto px-4 py-8">
+						{ children... }
+					</div>
+				</main>
+				<div class="hidden lg:block border-l overflow-y-auto h-full">
+					@components.SidebarRight()
 				</div>
-			</main>
-			<div class="hidden lg:block">
-				@components.SidebarRight()
 			</div>
 		</div>
 		@components.Footer()
--- a/internals/ui/pages/introduction.templ
+++ b/internals/ui/pages/introduction.templ
@ -6,9 +6,9 @@ templ Introduction() {
 	@layouts.DocsLayout() {
 		<div class="text-muted-foreground">
 			<h1 class="text-4xl font-bold mb-6 text-primary">🎉 Goilerplate</h1>
-			<p class="mb-4 text-muted-foreground">Modern UI Components for Go, Templ, Alpine.js, and Tailwind CSS</p>
+			<p class="mb-4 text-muted-foreground">Modern UI Components for Go & Templ</p>
 			<p class="mb-8 text-muted-foreground">
-				Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js for enhanced client-side functionality and style it all with Tailwind CSS. Where server-side simplicity meets client-side dynamism.
+				Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js for enhanced client-side functionality and style effortlessly with Tailwind CSS. Where server-side simplicity meets client-side dynamism.
 			</p>
 			<section class="mb-12">
 				<h2 class="text-2xl font-semibold mb-4 text-primary">What's this madness?</h2>
--- a/internals/ui/pages/landing.templ
+++ b/internals/ui/pages/landing.templ
@ -21,13 +21,17 @@ templ Landing() {
 				<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-2 sm:mb-4">
 					<span class="block">Goilerplate</span>
 				</h1>
-				<p class="text-xl sm:text-2xl lg:text-3xl font-semibold text-gray-600 dark:text-gray-400 mb-4 sm:mb-8">Modern UI Components for Go & Templ</p>
+				<p class="text-xl sm:text-2xl lg:text-3xl font-semibold text-gray-600 dark:text-gray-400 mb-4 sm:mb-8">
+					Modern UI Components for Go & Templ
+				</p>
 				<p class="max-w-3xl mx-auto text-base sm:text-lg text-gray-700 dark:text-gray-300 mb-6 sm:mb-10">
-					Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js for enhanced client-side functionality. Goilerplate: Where server-side simplicity meets client-side dynamism.
+					Craft powerful, responsive web applications with Go and Templ. 
+					Enhance interactivity with Alpine.js and style effortlessly with Tailwind CSS. 
+					Goilerplate bridges the gap between backend robustness and frontend dynamism.
 				</p>
 				@components.Button(components.ButtonProps{
-					Text: "Get Started",
-					Href: "/docs/getting-started",
+					Text: "Explore Components",
+					Href: "/docs/components",
 					Size: "lg",
 				})
 			</div>