Initial commit

2025-02-06 10:44:17 +00:00 · 2024-10-01 17:12:21 +02:00 · 2024-10-01 17:12:21 +02:00 · 9480341c3f
commit 9480341c3f
20 changed files with 1563 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,127 @@
+# Ignore node_modules folder
+node_modules
+
+# Ignore logs
+logs
+*.log
+npm-debug.log*
+
+# Ignore dotenv environment variable files
+.env
+
+# Ignore local development configuration files
+config/local.yml
+
+# Ignore temporary files and directories
+tmp/
+temp/
+*.tmp
+
+# Ignore build and cache directories
+build/
+dist/
+.cache/
+
+# Ignore OS generated files
+.DS_Store
+Thumbs.db
+
+# Ignore version control directories and files
+.git
+.gitignore
+.gitmodules
+.hg
+.hgignore
+.hgsubstate
+.svn
+.cvsignore
+
+# Ignore Python files
+*.pyc
+*.pyo
+__pycache__/
+
+# Ignore compiled source files
+*.o
+*.obj
+*.dll
+*.exe
+*.out
+
+# Ignore images and other binary files
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.bmp
+*.tiff
+*.ico
+
+# Ignore compressed files
+*.zip
+*.tar.gz
+*.rar
+*.7z
+*.bz2
+
+# Ignore various IDE project files
+.vscode/
+.idea/
+*.suo
+*.user
+*.userossc
+*.sln.docstates
+.project
+.classpath
+.settings/
+
+# Ignore documentation files
+*.md
+*.pdf
+
+# Ignore build output files
+*.war
+*.jar
+*.ear
+
+# Ignore Kubernetes and Docker Compose files
+k8s/
+docker-compose.yml
+docker-compose.override.yml
+
+# Ignore other sensitive files
+*.pem
+*.key
+*.crt
+*.kdb
+*.jks
+
+# Ignore IntelliJ IDEA files
+*.iml
+*.iws
+.idea/
+
+# Ignore JetBrains Rider files
+*.sln.iml
+.idea/
+
+# Ignore WebStorm files
+.idea/
+
+# Ignore Visual Studio Code files
+.vscode/
+
+# Ignore SASS cache files
+.sass-cache/
+
+# Ignore Bower files
+.bower/
+
+# Ignore Gulp files
+.gulp/
+
+# Ignore Grunt files
+.grunt/
+
+# Ignore Yeoman files
+.yeoman/
--- a/.env.example
+++ b/.env.example
@ -0,0 +1 @@
+GO_ENV=development
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,7 @@
+.DS_Store
+bin
+*_templ.go
+*_templ.txt
+node_modules
+tmp
+.env
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,15 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Go Server",
+      "type": "go",
+      "request": "launch",
+      "mode": "auto",
+      "program": "${workspaceFolder}/cmd/server",
+      "args": ["serve", "--dir", "./pb_data"],
+      "env": {},
+      "cwd": "${workspaceFolder}"
+    }
+  ]
+}
--- a/37
+++ b/37
@ -0,0 +1,37 @@
+# Build-Stage
+FROM golang:1.22-alpine AS build
+WORKDIR /app
+
+# Copy the source code
+COPY . .
+
+# Install templ
+RUN go install github.com/a-h/templ/cmd/templ@latest
+
+# Generate templ files
+RUN templ generate
+
+# Install build dependencies
+RUN apk add --no-cache gcc musl-dev
+
+# Build the application
+RUN CGO_ENABLED=1 GOOS=linux go build -o main ./cmd/server/main.go
+
+# Deploy-Stage
+FROM alpine:3.20.2
+WORKDIR /app
+
+# Install ca-certificates
+RUN apk add --no-cache ca-certificates
+
+# Set environment variable for runtime
+ENV GO_ENV=production
+
+# Copy the binary from the build stage
+COPY --from=build /app/main .
+
+# Expose the port your application runs on
+EXPOSE 8090
+
+# Command to run the application
+CMD ["./main"]
--- a/28
+++ b/28
@ -0,0 +1,28 @@
+# Run templ generation in watch mode to detect all .templ files and 
+# re-create _templ.txt files on change, then send reload event to browser. 
+# Default url: http://localhost:7331
+templ:
+	templ generate --watch --proxy="http://localhost:8090" --open-browser=false -v
+
+# Run air to detect any go file changes to re-build and re-run the server.
+server:
+	air \
+	--build.cmd "go build -o tmp/bin/main ./cmd/server" \
+	--build.bin "tmp/bin/main" \
+	--build.delay "100" \
+	--build.exclude_dir "node_modules" \
+	--build.include_ext "go" \
+	--build.stop_on_error "false" \
+	--misc.clean_on_exit true
+
+# Run tailwindcss to generate the styles.css bundle in watch mode.
+tailwind:
+	npx tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch
+
+# Start development server
+dev:
+	make -j3 templ server tailwind
+
+# Start development server in debug mode - It's needed to start launch.json in VSCode
+debug:
+	make -j2 templ tailwind
--- a/README.md
+++ b/README.md
@ -0,0 +1,30 @@
+# Goilerplate
+
+Modern UI Components for Go & Templ
+
+<img src="./assets/img/gopher.svg" alt="Goilerplate Logo" width="200"/>
+
+## About
+
+Goilerplate is a comprehensive UI component library designed specifically for Go developers using Templ. It provides a set of pre-built, customizable components that seamlessly integrate with Go backends and Templ templating, allowing for rapid development of modern, interactive web applications.
+
+## Features
+
+- **Go-native Implementation**: Optimized for Go developers and seamlessly integrates with Go backends.
+- **Templ-first Design**: Leverages the full power of Templ for type-safe, high-performance templating.
+- **Server-Side Rendering (SSR) Focus**: Excellent performance and SEO benefits out of the box.
+- **Optional HTMX Integration**: Easy integration for dynamic content without heavy JavaScript.
+- **Optional Alpine.js Support**: For enhanced client-side interactivity when needed.
+- **Tailwind CSS Styling**: Modern, utility-first styling that's highly customizable.
+- **Accessible Components**: Built with accessibility in mind, following WCAG guidelines.
+- **TypeSafe**: Utilizing Go's type system for robust, error-resistant development.
+
+## README TODO
+
+- [] Contributing
+- [] License
+- [] Support
+
+---
+
+Built with ❤️ by the Go community, for the Go community.
--- a/assets/assets.go
+++ b/assets/assets.go
@ -0,0 +1,6 @@
+package assets
+
+import "embed"
+
+//go:embed css/* img/*
+var Assets embed.FS
--- a/assets/css/input.css
+++ b/assets/css/input.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/assets/css/output.css
+++ b/assets/css/output.css
@ -0,0 +1,960 @@
+/*
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+.static {
+  position: static;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.min-h-\[calc\(100vh-64px\)\] {
+  min-height: calc(100vh - 64px);
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.space-y-12 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
+
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-purple-500 {
+  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-blue-600 {
+  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-pink-500 {
+  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
+}
+
+.to-cyan-500 {
+  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-white\/90 {
+  color: rgb(255 255 255 / 0.9);
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-purple-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-gray-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-purple-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-opacity-50:focus {
+  --tw-ring-opacity: 0.5;
+}
--- a/assets/img/gopher.svg
+++ b/assets/img/gopher.svg
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@ -0,0 +1,47 @@
+package main
+
+import (
+	"fmt"
+	"net/http"
+	"os"
+
+	"github.com/a-h/templ"
+	components "github.com/axzilla/goilerplate/internals/ui/pages"
+)
+
+func main() {
+	mux := http.NewServeMux()
+	isDevelopment := os.Getenv("GO_ENV") == "development"
+	SetupAssetsRoutes(mux, isDevelopment)
+
+	mux.Handle("GET /", templ.Handler(components.HeaderShowcase()))
+
+	fmt.Println("Server is running on http://localhost:8090")
+	http.ListenAndServe(":8090", mux)
+}
+
+func SetupAssetsRoutes(mux *http.ServeMux, isDevelopment bool) {
+	// We need this for Templ to work
+	disableCacheInDevMode := func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			if isDevelopment {
+				w.Header().Set("Cache-Control", "no-store")
+			}
+			next.ServeHTTP(w, r)
+		})
+	}
+
+	// Serve static files from the assets directory
+	var fs http.Handler
+	if isDevelopment {
+		fs = http.FileServer(http.Dir("./assets"))
+	} else {
+		// In production, use embed.FS (you'll need to set this up)
+		// fs = http.FileServer(http.FS(assets.Assets))
+		// For now, we'll use the same as development
+		fs = http.FileServer(http.Dir("./assets"))
+	}
+
+	// Handle requests for assets
+	mux.Handle("GET /assets/", disableCacheInDevMode(http.StripPrefix("/assets/", fs)))
+}
--- a/go.mod
+++ b/go.mod
@ -0,0 +1,7 @@
+module github.com/axzilla/goilerplate
+
+go 1.22.4
+
+require github.com/a-h/templ v0.2.747
+
+require github.com/joho/godotenv v1.5.1
--- a/go.sum
+++ b/go.sum
@ -0,0 +1,6 @@
+github.com/a-h/templ v0.2.747 h1:D0dQ2lxC3W7Dxl6fxQ/1zZHBQslSkTSvl5FxP/CfdKg=
+github.com/a-h/templ v0.2.747/go.mod h1:69ObQIbrcuwPCU32ohNaWce3Cb7qM5GMiqN1K+2yop4=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
--- a/internals/config/config.go
+++ b/internals/config/config.go
@ -0,0 +1,28 @@
+package config
+
+import (
+	"fmt"
+	"log"
+	"os"
+
+	"github.com/joho/godotenv"
+)
+
+type Config struct {
+	GoEnv string
+}
+
+var AppConfig *Config
+
+func LoadConfig() {
+	err := godotenv.Load()
+	if err != nil {
+		fmt.Println("Error loading .env file")
+	} else {
+		log.Println(".env file initialized.")
+	}
+
+	AppConfig = &Config{
+		GoEnv: os.Getenv("GO_ENV"),
+	}
+}
--- a/internals/ui/components/button.templ
+++ b/internals/ui/components/button.templ
@ -0,0 +1,88 @@
+package components
+
+type ButtonVariant string
+type ButtonSize string
+
+const (
+	Default   ButtonVariant = "default"
+	Primary   ButtonVariant = "primary"
+	Secondary ButtonVariant = "secondary"
+	Accent    ButtonVariant = "accent"
+	Ghost     ButtonVariant = "ghost"
+	Link      ButtonVariant = "link"
+
+	Small  ButtonSize = "sm"
+	Medium ButtonSize = "md"
+	Large  ButtonSize = "lg"
+)
+
+type ButtonProps struct {
+	Text      string
+	Variant   ButtonVariant
+	Size      ButtonSize
+	Disabled  bool
+	FullWidth bool
+	OnClick   templ.ComponentScript
+	HxGet     templ.SafeURL
+	HxPost    templ.SafeURL
+	HxTrigger string
+	HxTarget  string
+	Class     string
+}
+
+func getVariantClasses(variant ButtonVariant) string {
+	switch variant {
+	case Primary:
+		return "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-300"
+	case Secondary:
+		return "bg-gray-500 text-white hover:bg-gray-600 focus:ring-gray-300"
+	case Accent:
+		return "bg-purple-500 text-white hover:bg-purple-600 focus:ring-purple-300"
+	case Ghost:
+		return "bg-transparent hover:bg-gray-100 text-gray-700"
+	case Link:
+		return "bg-transparent text-blue-500 hover:underline"
+	default:
+		return "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-blue-300"
+	}
+}
+
+func getSizeClasses(size ButtonSize) string {
+	switch size {
+	case Small:
+		return "px-2 py-1 text-sm"
+	case Large:
+		return "px-6 py-3 text-lg"
+	default:
+		return "px-4 py-2 text-base"
+	}
+}
+
+templ Button(props ButtonProps) {
+	<button
+		class={
+			"font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-opacity-50",
+			getVariantClasses(props.Variant),
+			getSizeClasses(props.Size),
+			templ.KV("opacity-50 cursor-not-allowed", props.Disabled),
+			templ.KV("w-full", props.FullWidth),
+			props.Class,
+		}
+		disabled?={ props.Disabled }
+		onClick={ props.OnClick }
+		if props.HxGet != "" {
+			hx-get={ string(props.HxGet) }
+		}
+		if props.HxPost != "" {
+			hx-post={ string(props.HxPost) }
+		}
+		if props.HxTrigger != "" {
+			hx-trigger={ props.HxTrigger }
+		}
+		if props.HxTarget != "" {
+			hx-target={ props.HxTarget }
+		}
+	>
+		{ props.Text }
+	</button>
+}
--- a/internals/ui/layouts/base.templ
+++ b/internals/ui/layouts/base.templ
@ -0,0 +1,27 @@
+package layouts
+
+templ BaseLayout() {
+	<!DOCTYPE html>
+	<html lang="en" data-theme="fantasy">
+		<head>
+			<title>Goilerplate - Modern UI Components for Go & Templ</title>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<!-- Favicon -->
+			<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>
+		</head>
+		<body class="h-screen flex flex-col justify-between">
+			<div class="min-h-[calc(100vh-64px)]">
+				{ children... }
+			</div>
+		</body>
+	</html>
+}
--- a/internals/ui/pages/landing.templ
+++ b/internals/ui/pages/landing.templ
@ -0,0 +1,73 @@
+package components
+
+import (
+	"github.com/axzilla/goilerplate/internals/ui/layouts"
+	"github.com/axzilla/goilerplate/internals/ui/showcase"
+)
+
+type HeaderProps struct {
+	Title       string
+	Subtitle    string
+	Description string
+}
+
+templ Header(props HeaderProps) {
+	<header class="text-center py-16 bg-gradient-to-r from-blue-600 to-cyan-500">
+		<h1 class="text-5xl font-extrabold text-white mb-2">
+			{ props.Title }
+		</h1>
+		<p class="text-xl text-white font-light mb-4">
+			{ props.Subtitle }
+		</p>
+		<p class="text-md text-white/90 max-w-2xl mx-auto px-4">
+			{ props.Description }
+		</p>
+	</header>
+}
+
+templ GoilerplateHeader() {
+	@Header(HeaderProps{
+		Title:       "Goilerplate",
+		Subtitle:    "Modern UI Components for Go & Templ",
+		Description: "Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js and HTMX for enhanced client-side functionality. Goilerplate: Where server-side simplicity meets client-side dynamism.",
+	})
+}
+
+templ TechStack() {
+	<div class="bg-white py-8">
+		<div class="max-w-4xl mx-auto text-center">
+			<h2 class="text-2xl font-bold mb-4">Powered by</h2>
+			<div class="flex justify-center items-center space-x-8">
+				<div class="flex flex-col items-center">
+					<img src="assets/img/gopher.svg" alt="Go" class="h-16 w-16 mb-2"/>
+					<span class="font-medium">Go</span>
+				</div>
+				<div class="flex flex-col items-center">
+					<img src="https://templ.guide/img/logo.svg" alt="Templ" class="h-16 w-16 mb-2"/>
+					<span class="font-medium">Templ</span>
+				</div>
+				<div class="flex flex-col items-center opacity-70">
+					<img src="https://alpinejs.dev/alpine_long.svg" alt="Alpine.js" class="h-16 w-16 mb-2"/>
+					<span class="font-medium">Alpine.js (optional)</span>
+				</div>
+				<div class="flex flex-col items-center opacity-70">
+					<img src="https://svgmix.com/uploads/1370fe-htmx.svg" alt="HTMX" class="h-16 w-16 mb-2"/>
+					<span class="font-medium">HTMX (optional)</span>
+				</div>
+			</div>
+		</div>
+	</div>
+}
+
+templ HeaderShowcase() {
+	<div>
+		@layouts.BaseLayout() {
+			@GoilerplateHeader()
+			@TechStack()
+			<div class="max-w-3xl mx-auto py-8">
+				<h2 class="text-2xl font-bold mb-4">Button Showcase</h2>
+				@showcase.ButtonShowcase()
+			</div>
+		}
+	</div>
+}
--- a/internals/ui/showcase/button_showcase.templ
+++ b/internals/ui/showcase/button_showcase.templ
@ -0,0 +1,65 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/internals/ui/components"
+
+templ ButtonShowcase() {
+	<div class="space-y-8">
+		<div>
+			<h2 class="text-2xl font-bold mb-4">Button Variants</h2>
+			<div class="flex flex-wrap gap-2">
+				@components.Button(components.ButtonProps{Text: "Default", Variant: components.Default})
+				@components.Button(components.ButtonProps{Text: "Primary", Variant: components.Primary})
+				@components.Button(components.ButtonProps{Text: "Secondary", Variant: components.Secondary})
+				@components.Button(components.ButtonProps{Text: "Accent", Variant: components.Accent})
+				@components.Button(components.ButtonProps{Text: "Ghost", Variant: components.Ghost})
+				@components.Button(components.ButtonProps{Text: "Link", Variant: components.Link})
+			</div>
+		</div>
+		<div>
+			<h2 class="text-2xl font-bold mb-4">Button Sizes</h2>
+			<div class="flex flex-wrap items-center gap-2">
+				@components.Button(components.ButtonProps{Text: "Small", Size: components.Small, Variant: components.Primary})
+				@components.Button(components.ButtonProps{Text: "Medium", Size: components.Medium, Variant: components.Primary})
+				@components.Button(components.ButtonProps{Text: "Large", Size: components.Large, Variant: components.Primary})
+			</div>
+		</div>
+		<div>
+			<h2 class="text-2xl font-bold mb-4">Button States</h2>
+			<div class="flex flex-wrap gap-2">
+				@components.Button(components.ButtonProps{Text: "Disabled", Variant: components.Primary, Disabled: true})
+				@components.Button(components.ButtonProps{Text: "Full Width", Variant: components.Primary, FullWidth: true})
+			</div>
+		</div>
+		<div>
+			<h2 class="text-2xl font-bold mb-4">HTMX Integration</h2>
+			<div class="flex flex-wrap gap-2">
+				@components.Button(components.ButtonProps{
+					Text:      "Load Content",
+					Variant:   components.Primary,
+					HxGet:     templ.SafeURL("/api/content"),
+					HxTarget:  "#htmx-target",
+					HxTrigger: "click",
+				})
+				@components.Button(components.ButtonProps{
+					Text:      "Submit Form",
+					Variant:   components.Secondary,
+					HxPost:    templ.SafeURL("/api/submit"),
+					HxTarget:  "#htmx-result",
+					HxTrigger: "click",
+				})
+			</div>
+			<div id="htmx-target" class="mt-4 p-4 bg-gray-100 rounded"></div>
+			<div id="htmx-result" class="mt-4 p-4 bg-gray-100 rounded"></div>
+		</div>
+		<div>
+			<h2 class="text-2xl font-bold mb-4">Custom Styling</h2>
+			<div class="flex flex-wrap gap-2">
+				@components.Button(components.ButtonProps{
+					Text:    "Custom Button",
+					Variant: components.Primary,
+					Class:   "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
+				})
+			</div>
+		</div>
+	</div>
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./**/*.html", "./**/*.templ", "./**/*.go"],
+  theme: { extend: {} },
+  plugins: [],
+};