mirror of
https://github.com/axzilla/templui.git
synced 2025-03-13 16:55:05 +00:00
chore: rename brandname
This commit is contained in:
axzilla
parent
a5fdbf9604
commit
993855f3db
@ -1,17 +1,17 @@
|
||||
# Contributing to TemplUI
|
||||
# Contributing to templUI
|
||||
|
||||
First off, thank you for considering contributing to TemplUI! We're excited to have you join our community.
|
||||
First off, thank you for considering contributing to templUI! We're excited to have you join our community.
|
||||
|
||||
## Our Vision and Your Contributions
|
||||
|
||||
TemplUI is an open-source project that aims to provide value to the Go community. We want to be transparent about our long-term vision:
|
||||
templUI is an open-source project that aims to provide value to the Go community. We want to be transparent about our long-term vision:
|
||||
|
||||
1. We may explore opportunities to monetize aspects of TemplUI or offer premium services related to it in the future.
|
||||
1. We may explore opportunities to monetize aspects of templUI or offer premium services related to it in the future.
|
||||
2. All contributions to this repository are subject to the MIT License, which allows for commercial use.
|
||||
3. By contributing to TemplUI, you agree that your contributions may be used in both open-source and potential future commercial aspects of the project.
|
||||
3. By contributing to templUI, you agree that your contributions may be used in both open-source and potential future commercial aspects of the project.
|
||||
4. We value every contribution and will always strive to maintain a strong, open-source core that benefits the entire community.
|
||||
|
||||
We believe this approach allows us to sustainably develop and maintain TemplUI while keeping it open and accessible to all. If you have any questions or concerns about this, please reach out to us before contributing.
|
||||
We believe this approach allows us to sustainably develop and maintain templUI while keeping it open and accessible to all. If you have any questions or concerns about this, please reach out to us before contributing.
|
||||
|
||||
## How Can I Contribute?
|
||||
|
||||
@ -25,7 +25,7 @@ We believe this approach allows us to sustainably develop and maintain TemplUI w
|
||||
|
||||
- Use a clear and descriptive title for the issue to identify the suggestion.
|
||||
- Provide a step-by-step description of the suggested enhancement in as many details as possible.
|
||||
- Explain why this enhancement would be useful to most TemplUI users.
|
||||
- Explain why this enhancement would be useful to most templUI users.
|
||||
|
||||
### Pull Requests
|
||||
|
||||
@ -60,6 +60,6 @@ This section lists the labels we use to help us track and manage issues and pull
|
||||
|
||||
## Recognition
|
||||
|
||||
We're committed to giving proper credit and recognition to all contributors. Your contributions, whether they're improvements to documentation, bug fixes, or new features, are invaluable to the growth and success of TemplUI.
|
||||
We're committed to giving proper credit and recognition to all contributors. Your contributions, whether they're improvements to documentation, bug fixes, or new features, are invaluable to the growth and success of templUI.
|
||||
|
||||
Thank you for contributing to TemplUI and helping make it a great tool for the Go community!
|
||||
Thank you for contributing to templUI and helping make it a great tool for the Go community!
|
||||
|
||||
12
README.md
12
README.md
@ -1,13 +1,13 @@
|
||||
# TemplUI
|
||||
# templUI
|
||||
|
||||
[](https://github.com/sponsors/axzilla)
|
||||
|
||||
The UI Toolkit for Go & Templ
|
||||
The UI Kit for templ
|
||||
<img src="./assets/img/readme.png" />
|
||||
|
||||
## About
|
||||
|
||||
TemplUI is an enterprise-ready library of UI components designed specifically for Go and Templ. It leverages Alpine.js for enhanced interactivity and Tailwind CSS for elegant styling. Built with CSP compliance and modern development practices in mind, TemplUI provides everything you need to create professional web applications.
|
||||
templUI is an enterprise-ready library of UI components designed specifically for templ. It leverages Alpine.js for enhanced interactivity and Tailwind CSS for elegant styling. Built with CSP compliance and modern development practices in mind, templUI provides everything you need to create professional web applications.
|
||||
|
||||
## Features
|
||||
|
||||
@ -32,13 +32,13 @@ Explore our growing list of components in the [components documentation](https:/
|
||||
|
||||
## Inspiration
|
||||
|
||||
TemplUI draws inspiration from several popular UI libraries and frameworks:
|
||||
templUI draws inspiration from several popular UI libraries and frameworks:
|
||||
|
||||
- [shadcn/ui](https://ui.shadcn.com/)
|
||||
- [Pines UI](https://devdojo.com/pines)
|
||||
- [daisyUI](https://daisyui.com/)
|
||||
|
||||
We're exploring whether to make TemplUI a strict port of shadcn/ui or to create a unique blend of various inspirations. The project is still evolving, and community feedback will play a crucial role in shaping its direction.
|
||||
We're exploring whether to make templUI a strict port of shadcn/ui or to create a unique blend of various inspirations. The project is still evolving, and community feedback will play a crucial role in shaping its direction.
|
||||
|
||||
## Current Status
|
||||
|
||||
@ -53,7 +53,7 @@ We welcome contributions from the community! Whether it's adding new components,
|
||||
|
||||
## License
|
||||
|
||||
TemplUI is open-source software licensed under the [MIT license](LICENSE).
|
||||
templUI is open-source software licensed under the [MIT license](LICENSE).
|
||||
|
||||
## Support
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import 'tailwindcss';
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@ -87,4 +87,5 @@
|
||||
"rlig" 1,
|
||||
"calt" 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1074,8 +1074,8 @@
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.gap-x-8 {
|
||||
column-gap: calc(var(--spacing) * 8);
|
||||
.gap-x-4 {
|
||||
column-gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.space-y-1 {
|
||||
:where(& > :not(:last-child)) {
|
||||
@ -1994,13 +1994,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:opacity-70 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
opacity: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:opacity-80 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
|
||||
@ -34,7 +34,7 @@ templ BaseLayout() {
|
||||
<html lang="en" class="h-full">
|
||||
<head>
|
||||
// Meta Tags
|
||||
<title>TemplUI - Modern UI Components for Go & Templ</title>
|
||||
<title>templUI - The UI Kit for templ</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<style>
|
||||
|
||||
@ -199,8 +199,8 @@ templ HowToUse() {
|
||||
<p class="text-sm mt-2">For installation instructions, visit <a href="https://golang.org/dl" class="text-primary underline" target="_blank">golang.org/dl</a>.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">2. Templ (v0.3.833 or later)</h3>
|
||||
<p class="mb-2">Install the Templ CLI:</p>
|
||||
<h3 class="text-xl font-semibold mb-2">2. templ (v0.3.833 or later)</h3>
|
||||
<p class="mb-2">Install the templ CLI:</p>
|
||||
@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
|
||||
{ installTempl }
|
||||
}
|
||||
@ -235,7 +235,7 @@ templ HowToUse() {
|
||||
</section>
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Base Configuration</h2>
|
||||
<p class="mb-4">TemplUI provides pre-configured styles and themes. You'll need these files in your project:</p>
|
||||
<p class="mb-4">templUI provides pre-configured styles and themes. You'll need these files in your project:</p>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">1. CSS Configuration file + Base Styles</h3>
|
||||
@ -258,7 +258,7 @@ templ HowToUse() {
|
||||
</div>
|
||||
<div class="border-l-4 border-info pl-4 mt-4">
|
||||
<p class="font-medium">Enhanced Security Installation</p>
|
||||
<p class="mb-2 text-sm">TemplUI is built to be CSP-compliant. If your application requires strict Content Security Policy (CSP):</p>
|
||||
<p class="mb-2 text-sm">templUI is built to be CSP-compliant. If your application requires strict Content Security Policy (CSP):</p>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="text-sm mb-2">1. Use Alpine.js CSP build instead:</p>
|
||||
@ -282,7 +282,7 @@ templ HowToUse() {
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Development Tools</h2>
|
||||
<div class="bg-muted p-4 rounded-lg mb-6">
|
||||
<p class="mb-2">
|
||||
Here's our recommended development setup for Go and Templ projects, adapted from official documentation and community best practices:
|
||||
Here's our recommended development setup for Go and templ projects, adapted from official documentation and community best practices:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 space-y-1">
|
||||
<li>Hot reloading for Go, Templ, and Tailwind</li>
|
||||
@ -290,7 +290,7 @@ templ HowToUse() {
|
||||
<li>Automated file watching and rebuilding</li>
|
||||
</ul>
|
||||
<p class="mt-2 text-sm">
|
||||
The Makefile configuration is based on the <a href="https://templ.guide" class="text-primary underline" target="_blank">Templ documentation</a> and adapted for our use case.
|
||||
The Makefile configuration is based on the <a href="https://templ.guide" class="text-primary underline" target="_blank">templ documentation</a> and adapted for our use case.
|
||||
While there are many ways to set up your development environment, this configuration provides a solid starting point.
|
||||
</p>
|
||||
</div>
|
||||
@ -325,13 +325,13 @@ templ HowToUse() {
|
||||
}
|
||||
<p class="text-sm mt-2">This will:</p>
|
||||
<ul class="list-disc pl-6 text-sm space-y-1">
|
||||
<li>Watch and compile Templ files</li>
|
||||
<li>Watch and compile templ files</li>
|
||||
<li>Start the Go server with hot reload via Air</li>
|
||||
<li>Watch and compile Tailwind CSS changes</li>
|
||||
</ul>
|
||||
<p class="text-sm mt-2">Or run services individually:</p>
|
||||
<ul class="list-disc pl-6 text-sm space-y-1">
|
||||
<li>{ `make templ` } - Watch Templ files only</li>
|
||||
<li>{ `make templ` } - Watch templ files only</li>
|
||||
<li>{ `make server` } - Run Go server only</li>
|
||||
<li>{ `make tailwind` } - Watch Tailwind CSS only</li>
|
||||
</ul>
|
||||
|
||||
@ -6,13 +6,13 @@ templ Introduction() {
|
||||
@layouts.DocsLayout() {
|
||||
<div>
|
||||
<div class="mb-16">
|
||||
<h1 class="text-3xl font-bold mb-2">🎉 TemplUI</h1>
|
||||
<p class="mb-4 text-muted-foreground">The UI Toolkit for Go & Templ.</p>
|
||||
<h1 class="text-3xl font-bold mb-2">🎉 templUI</h1>
|
||||
<p class="mb-4 text-muted-foreground">The UI Kit for templ.</p>
|
||||
</div>
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Welcome to TemplUI</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Welcome to templUI</h2>
|
||||
<p class="mb-4">
|
||||
TemplUI brings modern, enterprise-grade UI components to the Go ecosystem. Built with Go and Templ, enhanced with Alpine.js, and styled with Tailwind CSS - it's where robust server-side rendering meets elegant client-side interactions.
|
||||
templUI brings modern, enterprise-grade UI components to the Go ecosystem. Built with Go and Templ, enhanced with Alpine.js, and styled with Tailwind CSS - it's where robust server-side rendering meets elegant client-side interactions.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Our mission is to provide Go developers with a comprehensive toolkit for building beautiful, interactive web applications without compromising on type safety or developer experience.
|
||||
@ -30,7 +30,7 @@ templ Introduction() {
|
||||
</p>
|
||||
</section>
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Why TemplUI?</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Why templUI?</h2>
|
||||
<p class="mb-4">
|
||||
Drawing inspiration from modern UI libraries like
|
||||
<a href="https://ui.shadcn.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">
|
||||
@ -45,22 +45,22 @@ templ Introduction() {
|
||||
we've crafted a solution that brings enterprise-ready, customizable components to the Go ecosystem.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Our components are built with CSP compliance, accessibility, and customization in mind. Each component can be used as-is or adapted to your specific needs, making TemplUI suitable for both rapid prototyping and production applications.
|
||||
Our components are built with CSP compliance, accessibility, and customization in mind. Each component can be used as-is or adapted to your specific needs, making templUI suitable for both rapid prototyping and production applications.
|
||||
</p>
|
||||
</section>
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Vision & Roadmap</h2>
|
||||
<p class="mb-4">
|
||||
While we draw inspiration from established UI libraries, TemplUI is charting its own course in the Go ecosystem. Our focus is on creating a toolkit that embraces Go's strengths while delivering modern web capabilities.
|
||||
While we draw inspiration from established UI libraries, templUI is charting its own course in the Go ecosystem. Our focus is on creating a toolkit that embraces Go's strengths while delivering modern web capabilities.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
We're committed to maintaining a balance between powerful features and simplicity, ensuring that TemplUI remains both capable and approachable. Our roadmap includes expanding our component library, enhancing enterprise features, and continuing to optimize for developer experience.
|
||||
We're committed to maintaining a balance between powerful features and simplicity, ensuring that templUI remains both capable and approachable. Our roadmap includes expanding our component library, enhancing enterprise features, and continuing to optimize for developer experience.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Built on Strong Foundations</h2>
|
||||
<p class="mb-4">
|
||||
TemplUI builds upon and extends these excellent technologies:
|
||||
templUI builds upon and extends these excellent technologies:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 space-y-2">
|
||||
<li><a href="https://golang.org/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">Go</a> - Type-safe, efficient server-side development</li>
|
||||
|
||||
@ -15,40 +15,30 @@ templ Landing() {
|
||||
</div>
|
||||
<header class="flex flex-col items-center justify-center w-full calc(100vh - 65px) h-full">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
|
||||
<p class="tracking-tight text-4xl md:text-5xl font-extrabold mb-4 sm:mb-8">
|
||||
The UI Toolkit for
|
||||
<br/>
|
||||
<span>
|
||||
Go & Templ
|
||||
</span>
|
||||
</p>
|
||||
<p class="max-w-3xl mx-auto text-base sm:text-lg mb-6">
|
||||
Enterprise-grade UI components with Developer Experience in mind. Built with
|
||||
<a href="https://go.dev" class="hover:opacity-70 font-bold hover:underline">Go</a> and
|
||||
<a href="https://templ.guide" class="hover:opacity-70 font-bold hover:underline">Templ</a>,
|
||||
styled with <a href="https://tailwindcss.com" class="hover:opacity-70 font-bold hover:underline">Tailwind CSS</a>,
|
||||
enhanced with <a href="https://alpinejs.dev" class="hover:opacity-70 font-bold hover:underline">Alpine.js</a>
|
||||
– everything you need for modern, type-safe web apps.
|
||||
</p>
|
||||
<div class="flex flex-col items-center gap-4 mb-8">
|
||||
<div class="flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm text-muted-foreground">
|
||||
<div class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="text-primary">⚡️</span> Enterprise Ready
|
||||
@components.Badge(components.BadgeProps{
|
||||
IconBefore: wrappedicons.Tailwind(16),
|
||||
Text: "TailwindCSS",
|
||||
Variant: components.BadgeVariantSecondary,
|
||||
})
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="text-primary">🛡️</span> CSP Compliant
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="text-primary">🔄</span> HTMX Optimized
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="text-primary">🧩</span> Component Driven
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="text-primary">🎨</span> Fully Customizable
|
||||
@components.Badge(components.BadgeProps{
|
||||
IconBefore: wrappedicons.Alpine(16),
|
||||
Text: "Alpine.js",
|
||||
Variant: components.BadgeVariantSecondary,
|
||||
})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tracking-tight text-4xl md:text-5xl font-extrabold mb-4 sm:mb-8">
|
||||
The UI Kit for templ
|
||||
</p>
|
||||
<p class="max-w-xl mx-auto text-base sm:text-lg mb-6 text-muted-foreground">
|
||||
Professional UI components for templ that transform how you build web applications. Modern, typesafe and designed to make development a joy.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-center flex-wrap">
|
||||
@components.Button(components.ButtonProps{
|
||||
Text: "Explore Components",
|
||||
|
||||
@ -28,7 +28,7 @@ templ AccountTab() {
|
||||
Account
|
||||
}
|
||||
@components.CardDescription() {
|
||||
Make changes to your account here. Click save when you're done.
|
||||
Make changes to your account here. Click save when you are done.
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
@ -62,7 +62,7 @@ templ PasswordTab() {
|
||||
Password
|
||||
}
|
||||
@components.CardDescription() {
|
||||
Change your password here. After saving, you'll be logged out.
|
||||
Change your password here. After saving, you will be logged out.
|
||||
}
|
||||
}
|
||||
@components.CardContent() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user