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

Merge pull request #46 from zyriab/main

Browse Source 
Fix card component not compiling properly + docs inconsistencies
This commit is contained in:
Axel Adrian 2025-02-08 09:38:49 +07:00 committed by GitHub
commit 2e9d6c64bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
33 changed files with 78 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/img/alpinejs-mark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

1
assets/img/tailwindcss-mark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 771 B

19
assets/img/templ-mark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

2
go.mod
View File

@ -4,6 +4,6 @@ go 1.23.3
require ( require (
github.com/Oudwins/tailwind-merge-go v0.2.0 github.com/Oudwins/tailwind-merge-go v0.2.0
github.com/a-h/templ v0.3.819 github.com/a-h/templ v0.3.833
github.com/joho/godotenv v1.5.1 github.com/joho/godotenv v1.5.1
) )

6
go.sum
View File

@ -1,9 +1,7 @@
github.com/Oudwins/tailwind-merge-go v0.2.0 h1:rtVHgYmLwwae4P+K6//ceRuUdyz3Bny6fo4664fOEmo= github.com/Oudwins/tailwind-merge-go v0.2.0 h1:rtVHgYmLwwae4P+K6//ceRuUdyz3Bny6fo4664fOEmo=
github.com/Oudwins/tailwind-merge-go v0.2.0/go.mod h1:kkZodgOPvZQ8f7SIrlWkG/w1g9JTbtnptnePIh3V72U= github.com/Oudwins/tailwind-merge-go v0.2.0/go.mod h1:kkZodgOPvZQ8f7SIrlWkG/w1g9JTbtnptnePIh3V72U=
github.com/a-h/templ v0.2.793 h1:Io+/ocnfGWYO4VHdR0zBbf39PQlnzVCVVD+wEEs6/qY= github.com/a-h/templ v0.3.833 h1:L/KOk/0VvVTBegtE0fp2RJQiBm7/52Zxv5fqlEHiQUU=
github.com/a-h/templ v0.2.793/go.mod h1:lq48JXoUvuQrU0VThrK31yFwdRjTCnIE5bcPCM9IP1w= github.com/a-h/templ v0.3.833/go.mod h1:cAu4AiZhtJfBjMY0HASlyzvkrtjnHWPeEsyGK2YYmfk=
github.com/a-h/templ v0.3.819 h1:KDJ5jTFN15FyJnmSmo2gNirIqt7hfvBD2VXVDTySckM=
github.com/a-h/templ v0.3.819/go.mod h1:iDJKJktpttVKdWoTkRNNLcllRI+BlpopJc+8au3gOUo=
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c= github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI= github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=

7
internal/ui/modules/sidebar_right.templ
View File

@ -10,17 +10,17 @@ type SidebarRightLItem struct {
var SidebarRightLinks = []SidebarRightLItem{ var SidebarRightLinks = []SidebarRightLItem{
{ {
ImageSrc: "https://templ.guide/img/logo.svg", ImageSrc: "/assets/img/templ-mark.svg",
Url: "https://templ.guide", Url: "https://templ.guide",
Text: "Elevate your Go projects with type-safe, efficient HTML templating.", Text: "Elevate your Go projects with type-safe, efficient HTML templating.",
}, },
{ {
ImageSrc: "https://alpinejs.dev/alpine_long.svg", ImageSrc: "/assets/img/alpinejs-mark.svg",
Url: "https://alpinejs.dev", Url: "https://alpinejs.dev",
Text: "Simplify your JavaScript with a lightweight, powerful framework.", Text: "Simplify your JavaScript with a lightweight, powerful framework.",
}, },
{ {
ImageSrc: "https://tailwindcss.com/_next/static/media/tailwindcss-logotype-white.944c5d0ef628083bb316f9b3d643385c86bcdb3d.svg", ImageSrc: "/assets/img/tailwindcss-mark.svg",
Url: "https://tailwindcss.com", Url: "https://tailwindcss.com",
Text: "Create beautiful, responsive designs with ease.", Text: "Create beautiful, responsive designs with ease.",
}, },
@ -58,3 +58,4 @@ templ SidebarRight() {
</div> </div>
</aside> </aside>
} }

17
internal/ui/pages/how_to_use.templ
View File

@ -54,7 +54,7 @@ tailwind:
dev: dev:
make -j3 templ server tailwind` make -j3 templ server tailwind`
var tailwindConfig = `{/** @type {import('tailwindcss').Config} */ var tailwindConfig = `/** @type {import('tailwindcss').Config} */
const config = { const config = {
darkMode: ["class"], darkMode: ["class"],
content: ["./**/*.html", "./**/*.templ", "./**/*.go"], content: ["./**/*.html", "./**/*.templ", "./**/*.go"],
@ -236,10 +236,10 @@ templ HowToUse() {
@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) { @components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
{ installGo } { installGo }
} }
<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> <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>
<div> <div>
<h3 class="text-xl font-semibold mb-2">2. Templ (v0.3.819 or later)</h3> <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> <p class="mb-2">Install the Templ CLI:</p>
@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) { @components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
{ installTempl } { installTempl }
@ -386,7 +386,7 @@ templ HowToUse() {
<li>Automated file watching and rebuilding</li> <li>Automated file watching and rebuilding</li>
</ul> </ul>
<p class="mt-2 text-sm"> <p class="mt-2 text-sm">
The Makefile configuration is based on the <a href="https://templ.guide" class="text-primary underline">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. While there are many ways to set up your development environment, this configuration provides a solid starting point.
</p> </p>
</div> </div>
@ -441,7 +441,7 @@ templ HowToUse() {
<div> <div>
<h3 class="text-xl font-semibold mb-2">1. Quickstart Template (Recommended for new projects)</h3> <h3 class="text-xl font-semibold mb-2">1. Quickstart Template (Recommended for new projects)</h3>
<p class="mb-4"> <p class="mb-4">
For a ready-to-go setup, check out our <a href="https://github.com/axzilla/templui-quickstart" class="text-primary underline">TemplUI Quickstart</a> template. For a ready-to-go setup, check out our <a href="https://github.com/axzilla/templui-quickstart" class="text-primary underline" target="_blank">TemplUI Quickstart</a> template.
It includes all requirements and configurations, using TemplUI as a package library by default but can be easily modified to use copied components or a mix of both approaches. It includes all requirements and configurations, using TemplUI as a package library by default but can be easily modified to use copied components or a mix of both approaches.
</p> </p>
</div> </div>
@ -525,9 +525,9 @@ templ HowToUse() {
For advanced configuration and best practices, refer to the official documentation: For advanced configuration and best practices, refer to the official documentation:
</p> </p>
<ul class="list-disc pl-6 space-y-2"> <ul class="list-disc pl-6 space-y-2">
<li><a href="https://templ.guide" class="text-primary underline">Templ Guide</a> - Cache configuration, component patterns, etc.</li> <li><a href="https://templ.guide" class="text-primary underline" target="_blank">Templ Guide</a> - Cache configuration, component patterns, etc.</li>
<li><a href="https://tailwindcss.com/docs" class="text-primary underline">Tailwind CSS</a> - Custom theming, plugins, optimization</li> <li><a href="https://tailwindcss.com/docs" class="text-primary underline" target="_blank">Tailwind CSS</a> - Custom theming, plugins, optimization</li>
<li><a href="https://alpinejs.dev/docs" class="text-primary underline">Alpine.js</a> - Advanced interactivity, state management</li> <li><a href="https://alpinejs.dev/docs" class="text-primary underline" target="_blank">Alpine.js</a> - Advanced interactivity, state management</li>
</ul> </ul>
<p class="text-sm mt-4">Note: Our quickstart template includes recommended configurations for production use.</p> <p class="text-sm mt-4">Note: Our quickstart template includes recommended configurations for production use.</p>
</section> </section>
@ -545,3 +545,4 @@ templ HowToUse() {
</div> </div>
} }
} }

8
internal/ui/pages/label.templ
View File

@ -16,9 +16,10 @@ templ Label() {
Alpine: true, Alpine: true,
}) { }) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{ @modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "", SectionName: "",
ShowcaseFile: showcase.CheckboxWithLabel(), ShowcaseFile: showcase.CheckboxWithLabel(),
PreviewCodeFile: "checkbox_with_label.templ", PreviewCodeFile: "checkbox_with_label.templ",
ComponentCodeFile: "label.templ",
}) })
<div> <div>
@components.Card(components.CardProps{}) { @components.Card(components.CardProps{}) {
@ -60,3 +61,4 @@ templ Label() {
} }
} }
} }

2
pkg/components/accordion_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/alert_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/avatar_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/badge_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/button_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

4
pkg/components/card_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.
@ -174,7 +174,7 @@ func CardImage(props CardImageProps) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var7 string var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("aspect-ratio: " + props.AspectRatio) templ_7745c5c3_Var7, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("aspect-ratio: " + props.AspectRatio)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 70, Col: 47} return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 70, Col: 47}
} }

2
pkg/components/checkbox_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/code_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/datepicker_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/dropdown_menu_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/form_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/input_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/label_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/modal_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/radio_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/select_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/sheet_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/slider_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/tabs_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/textarea_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/timepicker_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/toast_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/toggle_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/components/tooltip_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package components package components
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.

2
pkg/helpers/helpers_templ.go
View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT. // Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819 // templ: version: v0.3.833
package helpers package helpers
//lint:file-ignore SA4006 This context is only used if a nested component is present. //lint:file-ignore SA4006 This context is only used if a nested component is present.