H0llyW00dzZ/templui
H0llyW00dzZ/templui
1
0
Fork 0
mirror of https://github.com/axzilla/templui.git synced 2025-02-21 00:32:58 +00:00
Code

docs: update docs and more

Browse Source
This commit is contained in:
“axzilla” 2024-10-09 19:35:33 +02:00
parent ac1ff38a70
commit 71eccf4ff9
3 changed files with 126 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
README.md
View File

@ -6,7 +6,7 @@ Modern UI Components for Go & Templ
## About
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 are 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
@ -18,6 +18,41 @@ Goilerplate is a growing library of modern UI components designed specifically f
- **Accessible Components**: Built with accessibility in mind, following WCAG guidelines.
- **TypeSafe**: Utilizing Go's type system for robust, error-resistant development.
## Getting Started
There are two main ways to use Goilerplate in your projects:
1. **Use as a Package Library**
Install Goilerplate as a Go package:
```
go get github.com/axzilla/goilerplate
```
Then import and use components in your Templ files:
```go
import "github.com/axzilla/goilerplate/pkg/components"
// In your Templ files
@components.Button(components.ButtonProps{Text: "Click me"})
```
2. **Copy Components to Your Codebase**
Visit our [components documentation](https://goilerplate.com/docs/components) to find and copy the components you need directly into your project.
You can also mix and match these approaches based on your project needs.
For a quick start, check out our [Goilerplate Quickstart](https://github.com/axzilla/goilerplate-quickstart) template, which provides a pre-configured setup using Goilerplate as a package library.
For detailed setup instructions and examples, visit our [Getting Started guide](https://goilerplate.com/docs/getting-started).
## Components
Explore our growing list of components in the [Components documentation](https://goilerplate.com/docs/components). Each component comes with usage examples and code snippets.
## Inspiration
Goilerplate draws inspiration from several popular UI libraries and frameworks:
@ -30,15 +65,10 @@ We're exploring whether to make Goilerplate a strict port of shadcn/ui or to cre
## Current Status
- **Heavy Development**: The project is under active development. Expect frequent breaking changes until we reach a stable version.
- **Heavy Development**: The project is under active development. Expect frequent updates and potential breaking changes until we reach a stable version.
- Actively growing component library
- Regular updates and bug fixes
- Continuous development based on community feedback
- Check our [Components page](https://goilerplate.com/docs/components) for the latest list of available components
## Getting Started
Visit our website at [https://goilerplate.com/docs/getting-started](https://goilerplate.com/docs/getting-started) to get started with Goilerplate. You'll find documentation, examples, and guides to help you integrate Goilerplate into your Go projects.
## Changelog
@ -50,7 +80,7 @@ We welcome contributions from the community! Whether it's adding new components,
## Feedback
Your feedback is crucial in shaping the future of Goilerplate. If you have suggestions, feature requests, or encounter any issues, please open an issue on our GitHub repository or reach out to us through our website.
Your feedback is crucial in shaping the future of Goilerplate. If you have suggestions, feature requests, or encounter any issues, please [open an issue](https://github.com/axzilla/goilerplate/issues) on our GitHub repository or reach out to us through our website.
## License

9
assets/css/output.css
View File

@ -1252,6 +1252,11 @@ body {
background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@ -1417,10 +1422,6 @@ body {
padding-bottom: 1rem;
}
.pl-4 {
padding-left: 1rem;
}
.pl-6 {
padding-left: 1.5rem;
}

184
internals/ui/pages/howto.templ
View File

@ -6,121 +6,103 @@ templ HowToUse() {
@layouts.DocsLayout() {
<div class="text-muted-foreground">
<h1 class="text-4xl font-bold mb-6 text-primary">Getting Started with Goilerplate</h1>
<p class="mb-8 text-muted-foreground">
This is the recommended setup for using Goilerplate in your Go projects.
</p>
<section class="mb-12">
<h2 class="text-2xl font-semibold mb-4 text-primary">Quick Start</h2>
<ol class="list-decimal pl-6 space-y-4">
<li>
<strong>Set up your Go project:</strong>
<p>Create a new Go project or use an existing one. Initialize it with go mod init.</p>
</li>
<li>
<strong>Install Templ:</strong>
<p>
Follow the
<a href="https://templ.guide/quick-start/installation" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
Templ installation guide
</a>
to set up Templ in your project.
</p>
</li>
<li>
<strong>Set up Templ, Air, and Tailwind:</strong>
<p>
Use the
<a href="https://templ.guide/commands-and-tools/live-reload-with-other-tools" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
Templ live reload guide
</a>
to create a Makefile and set up Air and Tailwind CSS.
</p>
</li>
<li>
<strong>Configure Tailwind:</strong>
<p>
Copy the provided
<a href="https://github.com/axzilla/goilerplate/blob/main/tailwind.config.js" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
tailwind.config.js
</a>
and place it in your project root.
</p>
</li>
<li>
<strong>Set up Tailwind CSS input:</strong>
<p>
Create an input.css file in your project's CSS directory and copy the content from our
<a href="https://github.com/axzilla/goilerplate/blob/main/assets/css/input.css" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
input.css
</a>.
</p>
</li>
<li>
<strong>Include Alpine.js:</strong>
<p>
Add the Alpine.js script to your HTML head section as described in the
<a href="https://alpinejs.dev/start-here" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
Alpine.js documentation
</a>.
</p>
</li>
<li>
<strong>Using Goilerplate components:</strong>
<p>You have two options for integrating Goilerplate components:</p>
<ol type="a" class="pl-4 mt-2 space-y-2">
<li>
<p class="mb-4"><strong>Option A: Install as a package (Quick and Easy)</strong></p>
<pre class="mb-4">
<code>go get github.com/axzilla/goilerplate</code>
</pre>
<p class="mb-4">Then import and use in your Templ files:</p>
<pre class="mb-4">
<code>
{ `import "github.com/axzilla/goilerplate/pkg/components"
<h2 class="text-2xl font-semibold mb-4 text-primary">Two Ways to Use Goilerplate</h2>
<p class="mb-4">
Goilerplate offers flexibility in how you can integrate it into your projects. There are two main approaches:
</p>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-2">1. Use as a Package Library</h3>
<p class="mb-4">
Install Goilerplate as a Go package and import components as needed:
</p>
<pre>
<code>
{ `go get github.com/axzilla/goilerplate
// In your Go files
import "github.com/axzilla/goilerplate/pkg/components"
// In your Templ files
@components.Button(components.ButtonProps{...})
@components.Icon(components.IconProps{...})` }
</code>
</pre>
</li>
<li>
<strong>Option B: Copy-Paste Method (For full customization)</strong>
<p>
Create a components folder in your project. Copy desired component code from our
<a href="/docs/components" class="text-primary underline underline-offset-4 hover:text-primary/80">
components documentation
</a>
into .templ files in this folder. For icons, create a separate icons folder and copy the necessary icon files.
</p>
</li>
</ol>
<p class="mt-2">Choose the option that best fits your project needs and customization requirements.</p>
@components.Button(components.ButtonProps{Text: "Click me"})` }
</code>
</pre>
<p class="mt-2">This method is quick to set up and easy to update, but offers less customization.</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-2">2. Copy Components to Your Codebase</h3>
<p class="mb-4">
Copy the desired components directly into your project:
</p>
<ol class="list-decimal pl-6">
<li>Visit our <a href="/docs/components" class="text-primary underline">components documentation</a></li>
<li>Find the component you need</li>
<li>Copy the component code into your project's components folder</li>
</ol>
<p class="mt-2">This method allows for maximum customization but requires manual updates.</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-2">Mix and Match</h3>
<p>
You can also combine both approaches. For example, use some components as a package and copy others for customization.
This flexibility allows you to balance between ease of use and customization needs.
</p>
</div>
</section>
<section class="mb-12">
<h2 class="text-2xl font-semibold mb-4 text-primary">Quickstart Template</h2>
<p class="mb-4">
For a ready-to-go setup, check out our <a href="https://github.com/axzilla/goilerplate-quickstart" class="text-primary underline">Goilerplate Quickstart</a> template.
This template uses Goilerplate as a package library but can be easily modified to use copied components or a mix of both approaches.
</p>
<pre>
<code>
{ `git clone https://github.com/axzilla/goilerplate-quickstart.git
cd goilerplate-quickstart
// Follow the README instructions` }
</code>
</pre>
</section>
<section class="mb-12">
<h2 class="text-2xl font-semibold mb-4 text-primary">Manual Setup Requirements</h2>
<p class="mb-4">
If you choose to set up Goilerplate manually or copy components, ensure you have the following set up in your project:
</p>
<ul class="list-disc pl-6 space-y-2">
<li>
<strong>Templ:</strong> Follow the
<a href="https://templ.guide/quick-start/installation" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
Templ installation guide
</a>
to set up Templ in your project.
</li>
<li>
<strong>Start development:</strong>
<p>Run make dev to start your development environment.</p>
<strong>Tailwind CSS:</strong> Set up Tailwind CSS using our
<a href="https://github.com/axzilla/goilerplate/blob/main/tailwind.config.js" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
tailwind.config.js
</a>
as a reference.
</li>
<li>
<strong>Change theme (optional):</strong>
<p>
If you want to change the theme, visit the
<a href="https://www.shadcn-svelte.com/themes" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
shadcn theme customizer
</a>,
adjust the theme to your liking, and copy the generated CSS into your input.css file.
</p>
<strong>Alpine.js:</strong> Include Alpine.js in your project as described in the
<a href="https://alpinejs.dev/start-here" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
Alpine.js documentation
</a>.
</li>
</ol>
</ul>
</section>
<section>
<h2 class="text-2xl font-semibold mb-4 text-primary">Next Steps</h2>
<p class="mb-4">
Explore our
Whichever approach you choose, explore our
<a href="/docs/components" class="text-primary underline underline-offset-4 hover:text-primary/80">
components documentation
components
</a>
for more examples. Copy and customize these to fit your needs!
to see code examples and usage details for each Goilerplate component. Feel free to experiment with different integration methods to find what works best for your project!
</p>
<p>
Remember, our components page provides code snippets and usage examples, but for comprehensive documentation on Templ, Tailwind CSS, or Alpine.js, refer to their respective official documentation.
</p>
</section>
</div>