1
0
mirror of https://github.com/axzilla/templui.git synced 2025-02-19 07:37:54 +00:00

Merge pull request #46 from zyriab/main

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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.0 KiB

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>

After

Width:  |  Height:  |  Size: 771 B

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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 41 KiB

2
go.mod
View File

@ -4,6 +4,6 @@ go 1.23.3
require (
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
)

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/go.mod h1:kkZodgOPvZQ8f7SIrlWkG/w1g9JTbtnptnePIh3V72U=
github.com/a-h/templ v0.2.793 h1:Io+/ocnfGWYO4VHdR0zBbf39PQlnzVCVVD+wEEs6/qY=
github.com/a-h/templ v0.2.793/go.mod h1:lq48JXoUvuQrU0VThrK31yFwdRjTCnIE5bcPCM9IP1w=
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/a-h/templ v0.3.833 h1:L/KOk/0VvVTBegtE0fp2RJQiBm7/52Zxv5fqlEHiQUU=
github.com/a-h/templ v0.3.833/go.mod h1:cAu4AiZhtJfBjMY0HASlyzvkrtjnHWPeEsyGK2YYmfk=
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/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=

View File

@ -10,17 +10,17 @@ type SidebarRightLItem struct {
var SidebarRightLinks = []SidebarRightLItem{
{
ImageSrc: "https://templ.guide/img/logo.svg",
ImageSrc: "/assets/img/templ-mark.svg",
Url: "https://templ.guide",
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",
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",
Text: "Create beautiful, responsive designs with ease.",
},
@ -58,3 +58,4 @@ templ SidebarRight() {
</div>
</aside>
}

View File

@ -54,7 +54,7 @@ tailwind:
dev:
make -j3 templ server tailwind`
var tailwindConfig = `{/** @type {import('tailwindcss').Config} */
var tailwindConfig = `/** @type {import('tailwindcss').Config} */
const config = {
darkMode: ["class"],
content: ["./**/*.html", "./**/*.templ", "./**/*.go"],
@ -236,10 +236,10 @@ templ HowToUse() {
@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
{ 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>
<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>
@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
{ installTempl }
@ -386,7 +386,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">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>
@ -441,7 +441,7 @@ templ HowToUse() {
<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/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.
</p>
</div>
@ -525,9 +525,9 @@ templ HowToUse() {
For advanced configuration and best practices, refer to the official documentation:
</p>
<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://tailwindcss.com/docs" class="text-primary underline">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://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" target="_blank">Tailwind CSS</a> - Custom theming, plugins, optimization</li>
<li><a href="https://alpinejs.dev/docs" class="text-primary underline" target="_blank">Alpine.js</a> - Advanced interactivity, state management</li>
</ul>
<p class="text-sm mt-4">Note: Our quickstart template includes recommended configurations for production use.</p>
</section>
@ -545,3 +545,4 @@ templ HowToUse() {
</div>
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.819
// templ: version: v0.3.833
package components
//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
}
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 {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 70, Col: 47}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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