mirror of
https://github.com/axzilla/templui.git
synced 2025-02-21 00:32:58 +00:00
refactor: seperate embed code snippets
This commit is contained in:
parent
90f2cd4fb1
commit
2f68e5d9b8
20
internals/ui/modules/codesnippet.templ
Normal file
20
internals/ui/modules/codesnippet.templ
Normal file
@ -0,0 +1,20 @@
|
||||
package modules
|
||||
|
||||
templ CodeSnippet(content, language string) {
|
||||
<div class="relative" x-data="{ copied: false }">
|
||||
<pre class="!overflow-hidden">
|
||||
<code x-ref="code" class={ "language-" + language, "!max-h-[501px] !overflow-y-auto rounded-md block" }>
|
||||
{ content }
|
||||
</code>
|
||||
</pre>
|
||||
<button
|
||||
class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white font-bold py-1 px-2 rounded text-xs"
|
||||
x-on:click="
|
||||
navigator.clipboard.writeText($refs.code.textContent);
|
||||
copied = true;
|
||||
setTimeout(() => copied = false, 2001);
|
||||
"
|
||||
x-text="copied ? 'Copied!' : 'Copy'"
|
||||
></button>
|
||||
</div>
|
||||
}
|
11
internals/ui/modules/codesnippet_embed.templ
Normal file
11
internals/ui/modules/codesnippet_embed.templ
Normal file
@ -0,0 +1,11 @@
|
||||
package modules
|
||||
|
||||
import "embed"
|
||||
|
||||
templ CodeSnippetFromEmbedded(filename, language string, embed embed.FS) {
|
||||
if content, err := embed.ReadFile(filename); err != nil {
|
||||
<div class="error">Error reading file: { filename }: { err.Error() }</div>
|
||||
} else {
|
||||
@CodeSnippet(string(content), language)
|
||||
}
|
||||
}
|
@ -3,6 +3,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -24,12 +25,12 @@ templ Accordion() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("accordion.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("accordion.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("accordion.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("accordion.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Alert() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("alert.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("alert.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("alert.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("alert.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Avatar() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("avatar.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("avatar.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("avatar.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("avatar.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -1,8 +1,8 @@
|
||||
package pages
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -24,12 +24,12 @@ templ Button() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("button.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("button.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("button.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("button.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
@ -38,30 +38,3 @@ templ Button() {
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
templ CodeSnippetFromEmbedded(filename, language string, embed embed.FS) {
|
||||
if content, err := embed.ReadFile(filename); err != nil {
|
||||
<div class="error">Error reading file: { filename }: { err.Error() }</div>
|
||||
} else {
|
||||
@CodeSnippet(string(content), language)
|
||||
}
|
||||
}
|
||||
|
||||
templ CodeSnippet(content, language string) {
|
||||
<div class="relative" x-data="{ copied: false }">
|
||||
<pre class="!overflow-hidden">
|
||||
<code x-ref="code" class={ "language-" + language, "!max-h-[501px] !overflow-y-auto rounded-md block" }>
|
||||
{ content }
|
||||
</code>
|
||||
</pre>
|
||||
<button
|
||||
class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white font-bold py-1 px-2 rounded text-xs"
|
||||
x-on:click="
|
||||
navigator.clipboard.writeText($refs.code.textContent);
|
||||
copied = true;
|
||||
setTimeout(() => copied = false, 2001);
|
||||
"
|
||||
x-text="copied ? 'Copied!' : 'Copy'"
|
||||
></button>
|
||||
</div>
|
||||
}
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Card() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("card.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("card.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("card.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("card.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Checkbox() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("checkbox.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("checkbox.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("checkbox.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("checkbox.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Datepicker() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("datepicker.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("datepicker.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("datepicker.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("datepicker.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -1,9 +1,10 @@
|
||||
package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
|
||||
templ DropdownMenu() {
|
||||
@ -23,12 +24,12 @@ templ DropdownMenu() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("dropdown_menu.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("dropdown_menu.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("dropdown_menu.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("dropdown_menu.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -25,7 +26,7 @@ templ Icon() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("icon.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("icon.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -22,12 +23,12 @@ templ Input() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("input.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("input.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("input.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("input.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Modal() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("modal.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("modal.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("modal.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("modal.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ RadioGroup() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("radio_group.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("radio_group.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("radio_group.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("radio_group.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -25,12 +26,12 @@ templ Select() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("select.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("select.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("select.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("select.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Sheet() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("sheet.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("sheet.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("sheet.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("sheet.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Slider() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("slider.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("slider.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("slider.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("slider.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Tabs() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("tabs.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("tabs.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("tabs.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("tabs.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -23,12 +24,12 @@ templ Textarea() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("textarea.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("textarea.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("textarea.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("textarea.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
@ -2,6 +2,7 @@ package pages
|
||||
|
||||
import (
|
||||
"github.com/axzilla/goilerplate/internals/ui/layouts"
|
||||
"github.com/axzilla/goilerplate/internals/ui/modules"
|
||||
"github.com/axzilla/goilerplate/internals/ui/showcase"
|
||||
"github.com/axzilla/goilerplate/pkg/components"
|
||||
)
|
||||
@ -25,12 +26,12 @@ templ Toggle() {
|
||||
{
|
||||
ID: "code",
|
||||
Title: "Code",
|
||||
Content: CodeSnippetFromEmbedded("toggle.templ", "go", showcase.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("toggle.templ", "go", showcase.TemplFiles),
|
||||
},
|
||||
{
|
||||
ID: "component",
|
||||
Title: "Component",
|
||||
Content: CodeSnippetFromEmbedded("toggle.templ", "go", components.TemplFiles),
|
||||
Content: modules.CodeSnippetFromEmbedded("toggle.templ", "go", components.TemplFiles),
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "md:w-1/2",
|
||||
|
9950
repopack-output.txt
9950
repopack-output.txt
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user