mirror of
https://github.com/axzilla/templui.git
synced 2025-02-06 10:44:17 +00:00
feat(docs): show new way on how to use goilerplate
This commit is contained in:
axzilla
parent
764efc81ca
commit
351cf004f3
12
Makefile
12
Makefile
@ -12,17 +12,13 @@ server:
|
||||
--build.stop_on_error "false" \
|
||||
--misc.clean_on_exit true
|
||||
|
||||
tailwind-app:
|
||||
npx tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch
|
||||
|
||||
tailwind-goilerplate:
|
||||
npx tailwindcss -c ./tailwind.config.lib.js -i ./assets/css/input.css -o ./pkg/styles/goilerplate.css --watch
|
||||
|
||||
tailwind:
|
||||
tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch
|
||||
dev:
|
||||
make -j4 templ server tailwind-app tailwind-goilerplate
|
||||
make -j4 templ server tailwind
|
||||
|
||||
debug:
|
||||
make -j3 templ tailwind-app tailwind-goilerplate
|
||||
make -j3 templ tailwind-app tailwind
|
||||
|
||||
generate-icons:
|
||||
go run cmd/icongen/main.go
|
||||
|
||||
43
README.md
43
README.md
@ -18,40 +18,15 @@ 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
|
||||
## Quick Start
|
||||
|
||||
There are two main ways to use Goilerplate in your projects:
|
||||
Visit our [documentation](https://goilerplate.com/docs/how-to-use) for detailed installation and usage instructions.
|
||||
|
||||
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 [how to use guide](https://goilerplate.com/docs/how-to-use).
|
||||
For a ready-to-go setup, check out our [Quickstart Template](https://github.com/axzilla/goilerplate-quickstart).
|
||||
|
||||
## 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.
|
||||
Explore our growing list of components in the [components documentation](https://goilerplate.com/docs/components).
|
||||
|
||||
## Inspiration
|
||||
|
||||
@ -70,25 +45,17 @@ We're exploring whether to make Goilerplate a strict port of shadcn/ui or to cre
|
||||
- Regular updates and bug fixes
|
||||
- Continuous development based on community feedback
|
||||
|
||||
## Changelog
|
||||
|
||||
See [releases](https://github.com/axzilla/goilerplate/releases) for a detailed list of changes in each version.
|
||||
|
||||
## Contributing
|
||||
|
||||
We welcome contributions from the community! Whether it's adding new components, improving existing ones, or enhancing documentation, your input is valuable. Please check our [contributing guidelines](CONTRIBUTING.md) for more information on how to get involved.
|
||||
|
||||
## 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](https://github.com/axzilla/goilerplate/issues) on our GitHub repository or reach out to us through our website.
|
||||
|
||||
## License
|
||||
|
||||
Goilerplate is open-source software licensed under the [MIT license](LICENSE).
|
||||
|
||||
## Support
|
||||
|
||||
For support, questions, or discussions, please [open an issue](https://github.com/axzilla/goilerplate/issues) on our GitHub repository.
|
||||
For support, questions, or discussions, please [open an issue](https://github.com/axzilla/goilerplate/issues) on our GitHub repository or [visit our community (GitHub Discussions)](https://github.com/axzilla/goilerplate/discussions).
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1256,6 +1256,12 @@ body {
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
@ -1823,6 +1829,12 @@ body {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
.ring {
|
||||
--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(3px + 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);
|
||||
}
|
||||
|
||||
.ring-1 {
|
||||
--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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
package layouts
|
||||
|
||||
import "github.com/axzilla/goilerplate/internals/config"
|
||||
import "github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/config"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
)
|
||||
|
||||
templ BaseLayout() {
|
||||
<!DOCTYPE html>
|
||||
@ -26,7 +28,7 @@ templ BaseLayout() {
|
||||
<!-- Tailwind CSS (local) -->
|
||||
<link href="/assets/css/output.css" rel="stylesheet"/>
|
||||
<!-- 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/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>
|
||||
// Theme Customizer
|
||||
<script src="/assets/js/theme-customizer.js"></script>
|
||||
@ -35,7 +37,7 @@ templ BaseLayout() {
|
||||
<!-- Highlight.js -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/woodland.min.css"/>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
|
||||
// <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</head>
|
||||
<body
|
||||
|
||||
@ -1,6 +1,165 @@
|
||||
package pages
|
||||
|
||||
import "github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
)
|
||||
|
||||
var installGo = `go version`
|
||||
|
||||
var installTempl = `go install github.com/a-h/templ/cmd/templ@latest`
|
||||
|
||||
var tailwindHomebrew = `brew install tailwindcss`
|
||||
|
||||
var tailwindMacOSArm64 = `curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
|
||||
chmod +x tailwindcss-macos-arm64
|
||||
sudo mv tailwindcss-macos-arm64 /usr/local/bin/tailwindcss`
|
||||
|
||||
var tailwindMacOSX64 = `curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64
|
||||
chmod +x tailwindcss-macos-x64
|
||||
sudo mv tailwindcss-macos-x64 /usr/local/bin/tailwindcss`
|
||||
|
||||
var tailwindLinuxX64 = `curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
|
||||
chmod +x tailwindcss-linux-x64
|
||||
sudo mv tailwindcss-linux-x64 /usr/local/bin/tailwindcss`
|
||||
|
||||
var tailwindWindowsX64 = `# On Windows (x64)
|
||||
# Download from: https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe
|
||||
# Add to your PATH as 'tailwindcss'`
|
||||
|
||||
var installAlpine = `<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>`
|
||||
|
||||
var tailwindConfig = `{/** @type {import('tailwindcss').Config} */
|
||||
const config = {
|
||||
darkMode: ["class"],
|
||||
content: ["./**/*.html", "./**/*.templ", "./**/*.go"],
|
||||
safelist: ["dark"],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border) / <alpha-value>)",
|
||||
input: "hsl(var(--input) / <alpha-value>)",
|
||||
ring: "hsl(var(--ring) / <alpha-value>)",
|
||||
background: "hsl(var(--background) / <alpha-value>)",
|
||||
foreground: "hsl(var(--foreground) / <alpha-value>)",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
|
||||
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
|
||||
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
|
||||
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
|
||||
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
|
||||
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
|
||||
foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card) / <alpha-value>)",
|
||||
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
fontFamily: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;`
|
||||
|
||||
var inputCss = `@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--primary: 346.8 77.2% 49.8%;
|
||||
--primary-foreground: 355.7 100% 97.3%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--ring: 346.8 77.2% 49.8%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
.dark {
|
||||
--background: 20 14.3% 4.1%;
|
||||
--foreground: 0 0% 95%;
|
||||
--muted: 0 0% 15%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--popover: 0 0% 9%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
--card: 24 9.8% 10%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--primary: 346.8 77.2% 49.8%;
|
||||
--primary-foreground: 355.7 100% 97.3%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--accent: 12 6.5% 15.1%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 85.7% 97.3%;
|
||||
--ring: 346.8 77.2% 49.8%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings:
|
||||
"rlig" 1,
|
||||
"calt" 1;
|
||||
}
|
||||
}`
|
||||
|
||||
var installGoilerplate = `go get github.com/axzilla/goilerplate`
|
||||
|
||||
var goPath = `"${GOPATH}/pkg/mod/github.com/axzilla/goilerplate@*/**/*.{go,templ}"`
|
||||
|
||||
var usingComponents = `import "github.com/axzilla/goilerplate/pkg/components"
|
||||
|
||||
@components.Button(components.ButtonProps{Text: "Click me"})`
|
||||
|
||||
templ HowToUse() {
|
||||
@layouts.DocsLayout() {
|
||||
@ -10,106 +169,129 @@ templ HowToUse() {
|
||||
<p class="mb-4 text-muted-foreground">Learn how to integrate Goilerplate into your projects.</p>
|
||||
</div>
|
||||
<section class="mb-12">
|
||||
<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{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>
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Requirements</h2>
|
||||
<p class="mb-4">Before using Goilerplate, ensure you have these tools installed:</p>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">1. Go (1.20 or later)</h3>
|
||||
<p class="mb-2">Check your Go version:</p>
|
||||
@modules.CodeSnippet(installGo, "markdown")
|
||||
<p class="text-sm mt-2">For installation instructions, visit <a href="https://golang.org/dl" class="text-primary underline">golang.org/dl</a>.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">2. Templ</h3>
|
||||
<p class="mb-2">Install the Templ CLI:</p>
|
||||
@modules.CodeSnippet(installTempl, "markdown")
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">3. Tailwind CSS CLI (Standalone)</h3>
|
||||
<p class="mb-2">Install the standalone CLI based on your operating system:</p>
|
||||
<div class="space-y-4">
|
||||
<p class="mb-2">Homebrew (macOS):</p>
|
||||
@modules.CodeSnippet(tailwindHomebrew, "markdown")
|
||||
<p class="mb-2">macOS (Apple Silicon):</p>
|
||||
@modules.CodeSnippet(tailwindMacOSArm64, "markdown")
|
||||
<p class="mb-2">macOS (Intel):</p>
|
||||
@modules.CodeSnippet(tailwindMacOSX64, "markdown")
|
||||
<p class="mb-2">Linux (x64):</p>
|
||||
@modules.CodeSnippet(tailwindLinuxX64, "markdown")
|
||||
<p class="mb-2">Windows (x64):</p>
|
||||
@modules.CodeSnippet(tailwindWindowsX64, "markdown")
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">4. Alpine.js</h3>
|
||||
<p class="mb-2">Include via CDN in your HTML:</p>
|
||||
@modules.CodeSnippet(installAlpine, "markdown")
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
//
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Base Configuration</h2>
|
||||
<p class="mb-4">Goilerplate 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. Tailwind Configuration</h3>
|
||||
<p class="mb-2">Create tailwind.config.js:</p>
|
||||
@modules.CodeSnippet(tailwindConfig, "javascript")
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">2. CSS Base Styles</h3>
|
||||
<p class="mb-2">Create assets/css/input.css with our base styles:</p>
|
||||
@modules.CodeSnippet(inputCss, "css")
|
||||
<p class="text-sm mt-2">For custom themes and additional styles, check our <a href="/docs/themes" class="text-primary underline">themes documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold mb-2">Mix and Match</h3>
|
||||
</section>
|
||||
//
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Installation Options</h2>
|
||||
<p class="mb-4">After installing the requirements, you have three ways to use Goilerplate:</p>
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">1. Quickstart Template (Recommended for new projects)</h3>
|
||||
<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.
|
||||
It includes all requirements and configurations, using Goilerplate as a package library by default but can be easily modified to use copied components or a mix of both approaches.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">2. Package Installation</h3>
|
||||
<p class="mb-4">Install Goilerplate as a Go package:</p>
|
||||
<div class="mb-4">
|
||||
@modules.CodeSnippet(installGoilerplate, "markdown")
|
||||
</div>
|
||||
// @components.Card(components.CardProps{}) {
|
||||
// @components.CardHeader() {
|
||||
<h4 class="font-semibold mb-2">*Required: Additional Tailwind Configuration</h4>
|
||||
// }
|
||||
// @components.CardContent() {
|
||||
<p class="mb-2">When using Goilerplate as a package, add this to your tailwind.config.json content array:</p>
|
||||
<div class="mb-4">
|
||||
@modules.CodeSnippet(goPath, "markdown")
|
||||
</div>
|
||||
<p class="mb-2">Replace { string("${GOPATH}") } with your actual Go path:</p>
|
||||
@modules.CodeSnippet("go env GOPATH", "markdown")
|
||||
// }
|
||||
// }
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">3. Copy Components</h3>
|
||||
<p class="mb-4">For maximum customization, copy components directly into your project (requires manual updates):</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>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold mb-2">Mix and Match</h3>
|
||||
<p>
|
||||
You can also combine approaches. For example, use some components as a package and copy others for customization.
|
||||
Remember that when using any components as a package (including mix and match), you need to add the GOPATH configuration to your tailwind.config.json as shown in the Package Installation section.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Using Components</h2>
|
||||
<div class="space-y-4">
|
||||
<p>Import and use components in your Templ files:</p>
|
||||
@modules.CodeSnippet(usingComponents, "markdown")
|
||||
<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.
|
||||
For a complete list of available components and their usage, visit our
|
||||
<a href="/docs/components" class="text-primary underline">components documentation</a>.
|
||||
</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>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>
|
||||
and
|
||||
<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>
|
||||
as a reference.
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-2xl font-semibold mb-4 text-primary">Next Steps</h2>
|
||||
<p class="mb-4">
|
||||
Whichever approach you choose, explore our
|
||||
<a href="/docs/components" class="text-primary underline underline-offset-4 hover:text-primary/80">
|
||||
components
|
||||
</a>
|
||||
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!
|
||||
Check out our component examples and start building your UI. If you need help or have questions, join our community or open an issue on GitHub.
|
||||
</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 class="mb-4">
|
||||
For comprehensive documentation on Templ, Tailwind CSS, or Alpine.js, refer to their respective official documentation.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -43,17 +43,6 @@ func RandomID() string {
|
||||
return fmt.Sprintf("id-%d", rand.Intn(1000000))
|
||||
}
|
||||
|
||||
// CSS returns a link tag for the Goilerplate CSS
|
||||
// If no branch is specified, it defaults to 'main'
|
||||
func CSS(branch string) templ.Component {
|
||||
if branch == "" {
|
||||
branch = "main"
|
||||
}
|
||||
|
||||
cssURL := fmt.Sprintf("https://cdn.jsdelivr.net/gh/axzilla/goilerplate@%s/pkg/styles/goilerplate.css", branch)
|
||||
return templ.Raw(fmt.Sprintf(`<link rel="stylesheet" href="%s">`, cssURL))
|
||||
}
|
||||
|
||||
// Alpine returns script tags for Alpine.js
|
||||
func AlpineJS() templ.Component {
|
||||
return templ.Raw(`
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { fontFamily } from "tailwindcss/defaultTheme";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
const config = {
|
||||
darkMode: ["class"],
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
const baseConfig = require("./tailwind.config.js");
|
||||
|
||||
module.exports = {
|
||||
...baseConfig,
|
||||
content: ["./pkg/**/*.templ", "./pkg/**/*.go"],
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user