https://github.com/guilycst/goatth-penguinui
Server Side Rendering for go backends using Go + Alpine.js + Tailwind + Templ and HTMX
https://github.com/guilycst/goatth-penguinui
alpine alpinejs go golang serverside-rendering tailwindcss template
Last synced: 2 months ago
JSON representation
Server Side Rendering for go backends using Go + Alpine.js + Tailwind + Templ and HTMX
- Host: GitHub
- URL: https://github.com/guilycst/goatth-penguinui
- Owner: guilycst
- Created: 2026-03-13T01:50:43.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-24T00:43:39.000Z (2 months ago)
- Last Synced: 2026-04-24T01:17:59.331Z (2 months ago)
- Topics: alpine, alpinejs, go, golang, serverside-rendering, tailwindcss, template
- Language: HTML
- Homepage:
- Size: 71.4 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Agents: agents.md
Awesome Lists containing this project
README
# GoATTH PenguinUI
⚠️ Work-In-Progress
There is still lots of rough edeges to iron out, most related to preserving Alpine.js state when a wired component is swapped in by HTMX.
**GoATTH**: Go + Templ + Tailwind CSS + HTMX + Alpine.js
## About This Fork
This is a hard fork of [Penguin UI](https://www.penguinui.com) by Salar Houshvand ([source here](https://github.com/SalarHoushvand/penguinui-components)), transformed from static HTML/Alpine.js components into a complete Go web component library.
### What's Changed?
| Original | GoATTH Fork |
|----------|-------------|
| Static HTML | Go + Templ templates |
| CDN assets | Configurable (CDN/Embedded/Custom) |
| Copy-paste | `go get` importable |
| Alpine.js only | HTMX + Alpine.js + Go backend |
## Credits
- **Original**: [Penguin UI](https://www.penguinui.com) by [Salar Houshvand](https://x.com/salar_houshvand)
- **License**: MIT (preserved from original)
## CSS Integration
GoATTH ships a CLI tool that extracts the pre-built Tailwind CSS from the embedded assets. Client applications use this instead of manually copying CSS files.
```bash
# Via go tool (recommended — version-pinned in go.mod)
go tool goatth -out=css/goatth-base.css
# Or via go run (for one-off use)
go run github.com/guilycst/GoATTH-penguinui/cmd/goatth@latest -out=goatth-base.css
```
Then import it in your Tailwind entry point:
```css
@import "tailwindcss";
@import "./goatth-base.css";
```
See [docs/USAGE.md](docs/USAGE.md) for full setup instructions.
## Project Structure
```
GoATTH-penguinui/
├── cmd/
│ ├── server/ # Demo server
│ └── goatth/ # CSS extraction CLI tool
├── components/ # GoATTH component library (32 components)
│ └── badge/
│ ├── types.go # Configuration types
│ └── badge.templ # Templ component
├── assets/
│ ├── embed.go # Embedded assets + StylesCSS() accessor
│ ├── styles.css # Compiled Tailwind CSS
│ ├── js/ # Alpine.js, HTMX, plugins
│ └── fonts/ # TOTVS brand fonts
├── internal/
│ └── pages/demo/ # Demo pages
├── tests/e2e/ # Playwright E2E tests
└── docs/ # Integration guides
```
## Running the Demo
### Quick Start (Recommended: Air with Live Reload)
```bash
# Install dependencies (including Air)
make install
make install-air
# Run with live reload (auto-rebuilds on file changes)
make dev-air
# Server will start on http://localhost:8090
# Accordion Demo: http://localhost:8090/components/accordion
# Button Demo: http://localhost:8090/components/button
```
### Standard Development
```bash
# Install dependencies
make install
# Run the demo server
make dev
# or
go run cmd/server/main.go
# Server will start on http://localhost:8090
# - Original PenguinUI: http://localhost:8090/original/
# - GoATTH Components: http://localhost:8090/gottha/
```
## Running E2E Tests
E2E tests use [playwright-go](https://github.com/playwright-community/playwright-go) (following the tks-console pattern) for Go-based browser automation.
```bash
# Using just (from repo root)
just gp-test-e2e # Run all E2E tests
just gp-test-e2e-one TestButton # Run specific test
# Or directly
go test ./GoATTH-penguinui/tests/e2e/... -v
# First time setup - install Playwright browsers
just gp-install-playwright
# or
go install github.com/playwright-community/playwright-go/cmd/playwright@v0.5700.1
playwright install chromium
```
### Test Results
Tests automatically:
- Start the demo server
- Run browser automation tests
- Capture screenshots on failures to `test-results/screenshots/`
- Verify both Original PenguinUI and GoATTH component rendering
### Current Test Coverage
- **Button Component**: Verifies all 8 variants render correctly, HTMX attributes, Alpine.js integration
- **Screenshots**: Auto-captured for visual debugging
## Component Usage
### Button Component
```go
import "github.com/guilycst/GoATTH-penguinui/components/button"
// Basic button
@button.Button(button.Config{
Variant: button.Primary,
Type: "button",
}) {
Click Me
}
// With HTMX
@button.Button(button.Config{
Variant: button.Primary,
HTMX: &button.HTMXConfig{
Post: "/api/action",
Target: "#result",
Swap: "innerHTML",
},
}) {
Submit
}
// With Alpine.js
@button.Button(button.Config{
Variant: button.Primary,
Alpine: &button.AlpineConfig{
OnClick: "modalIsOpen = true",
},
}) {
Open Modal
}
```
## Development
### Building
```bash
make build
```
### Generating Templ Files
```bash
make generate
```
### Testing
```bash
# Go tests
make test
# E2E tests
make test-e2e
```
## License
MIT License - See original [Penguin UI](https://www.penguinui.com/docs/license) for details.