Merge pull request #24 from axzilla/dev

feat: add Code component with copy functionality and update related t…

assets/css/output.css

@@ -946,10 +946,22 @@ body {
   height: 100vh;
 }
 
+.\!max-h-\[1000px\] {
+  max-height: 1000px !important;
+}
+
+.\!max-h-\[250px\] {
+  max-height: 250px !important;
+}
+
 .\!max-h-\[501px\] {
   max-height: 501px !important;
 }
 
+.\!max-h-full {
+  max-height: 100% !important;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }

cmd/server/main.go

@@ -59,6 +59,7 @@ func main() {
 	mux.Handle("GET /docs/components/badge", templ.Handler(pages.Badge()))
 	mux.Handle("GET /docs/components/button", templ.Handler(pages.Button()))
 	mux.Handle("GET /docs/components/card", templ.Handler(pages.Card()))
+	mux.Handle("GET /docs/components/code", templ.Handler(pages.Code()))
 	mux.Handle("GET /docs/components/checkbox", templ.Handler(pages.Checkbox()))
 	mux.Handle("GET /docs/components/datepicker", templ.Handler(pages.Datepicker()))
 	mux.Handle("GET /docs/components/dropdown-menu", templ.Handler(pages.DropdownMenu()))

internal/shared/menudata.go

@@ -57,6 +57,10 @@ var Sections = []Section{
 				Text: "Card",
 				Href: "/docs/components/card",
 			},
+			{
+				Text: "Code",
+				Href: "/docs/components/code",
+			},
 			{
 				Text: "Checkbox",
 				Href: "/docs/components/checkbox",

internal/ui/modules/codesnippet_embed.templ

@@ -1,11 +1,14 @@
 package modules
 
 import "embed"
+import "github.com/axzilla/templui/pkg/components"
 
 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)
+		@components.Code(components.CodeProps{Language: language, ShowCopyButton: true}) {
+			{ string(content) }
+		}
 	}
 }

internal/ui/modules/usage.templ

@@ -1,6 +1,9 @@
 package modules
 
-import "fmt"
+import (
+	"fmt"
+	"github.com/axzilla/templui/pkg/components"
+)
 
 type UsageProps struct {
 	ComponentName string // Name der Komponente (z.B. "Toast", "Modal")
@@ -14,22 +17,26 @@ templ Usage(props UsageProps) {
 		if props.NeedsHandler {
 			<div class="mb-4">
 				<p class="text-muted-foreground mb-2">1. Add the script to your page/layout:</p>
-				@CodeSnippet(fmt.Sprintf(`// Option A: All components (recommended)
+				@components.Code(components.CodeProps{Language: "go"}) {
+					{ fmt.Sprintf(`// Option A: All components (recommended)
 @utils.ComponentScripts()
 
 // Option B: Just %s
-@components.%sScript()`, props.ComponentName, props.ComponentName), "go")
+@components.%sScript()`, props.ComponentName, props.ComponentName) }
+				}
 			</div>
 		}
 		<div>
 			if props.NeedsHandler {
 				<p class="text-muted-foreground mb-2">2. Use the component:</p>
 			}
-			@CodeSnippet(fmt.Sprintf(`@components.%s(components.%sProps{%s})`,
-				props.ComponentName,
-				props.ComponentName,
-				props.PropsExample,
-			), "go")
+			@components.Code(components.CodeProps{Language: "go"}) {
+				{ fmt.Sprintf(`@components.%s(components.%sProps{%s})`,
+			props.ComponentName,
+			props.ComponentName,
+			props.PropsExample,
+		) }
+			}
 		</div>
 	</div>
 }

internal/ui/pages/code.templ

@@ -0,0 +1,42 @@
+package pages
+
+import (
+	"github.com/axzilla/templui/internal/ui/layouts"
+	"github.com/axzilla/templui/internal/ui/modules"
+	"github.com/axzilla/templui/internal/ui/showcase"
+)
+
+templ Code() {
+	@layouts.DocsLayout() {
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Code",
+			Description: templ.Raw("Code displays a code block with optional syntax highlighting and copy functionality"),
+			Tailwind:    true,
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				ShowcaseFile:      showcase.Code(),
+				PreviewCodeFile:   "code.templ",
+				ComponentCodeFile: "code.templ",
+			})
+			@modules.Usage(modules.UsageProps{
+				ComponentName: "Code",
+				NeedsHandler:  true,
+				PropsExample:  "...",
+			})
+			@modules.ContainerWrapper(modules.ContainerWrapperProps{Title: "Examples"}) {
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Copy Button",
+					ShowcaseFile:      showcase.CodeWithCopyButton(),
+					PreviewCodeFile:   "code_with_copy_button.templ",
+					ComponentCodeFile: "code.templ",
+				})
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Custom Size",
+					ShowcaseFile:      showcase.CodeWithCustomSize(),
+					PreviewCodeFile:   "code_with_custom_size.templ",
+					ComponentCodeFile: "code.templ",
+				})
+			}
+		}
+	}
+}

internal/ui/pages/how_to_use.templ

@@ -2,7 +2,7 @@ package pages
 
 import (
 	"github.com/axzilla/templui/internal/ui/layouts"
-	"github.com/axzilla/templui/internal/ui/modules"
+	"github.com/axzilla/templui/pkg/components"
 )
 
 var installGo = `go version`
@@ -233,28 +233,42 @@ templ HowToUse() {
 					<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")
+						@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>
 					</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")
+						@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+							{ installTempl }
+						}
 					</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")
+							@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+								{ tailwindHomebrew }
+							}
 							<p class="mb-2">macOS (Apple Silicon):</p>
-							@modules.CodeSnippet(tailwindMacOSArm64, "markdown")
+							@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+								{ tailwindMacOSArm64 }
+							}
 							<p class="mb-2">macOS (Intel):</p>
-							@modules.CodeSnippet(tailwindMacOSX64, "markdown")
+							@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+								{ tailwindMacOSX64 }
+							}
 							<p class="mb-2">Linux (x64):</p>
-							@modules.CodeSnippet(tailwindLinuxX64, "markdown")
+							@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+								{ tailwindLinuxX64 }
+							}
 							<p class="mb-2">Windows (x64):</p>
-							@modules.CodeSnippet(tailwindWindowsX64, "markdown")
+							@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+								{ tailwindWindowsX64 }
+							}
 						</div>
 					</div>
 				</div>
@@ -266,12 +280,16 @@ templ HowToUse() {
 					<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")
+						@components.Code(components.CodeProps{Language: "javascript", ShowCopyButton: true}) {
+							{ tailwindConfig }
+						}
 					</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")
+						@components.Code(components.CodeProps{Language: "css", ShowCopyButton: true}) {
+							{ inputCss }
+						}
 						<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 class="space-y-2">
@@ -284,9 +302,13 @@ templ HowToUse() {
 								class="underline hover:opacity-80 font-semibold"
 							>Alpine's CSP build</a>. Use our recommended helper component:
 						</p>
-						@modules.CodeSnippet(installAlpineHelper, "html")
+						@components.Code(components.CodeProps{Language: "html", ShowCopyButton: true}) {
+							{ installAlpineHelper }
+						}
 						<p class="mb-2">Or include the CSP-compliant Alpine.js version directly:</p>
-						@modules.CodeSnippet(installAlpine, "html")
+						@components.Code(components.CodeProps{Language: "html", ShowCopyButton: true}) {
+							{ installAlpine }
+						}
 						<div class="bg-muted p-4 rounded-lg mt-4">
 							<p class="font-medium mb-2">CSP Compliance in TemplUI</p>
 							<div class="space-y-4">
@@ -344,7 +366,9 @@ templ HowToUse() {
 								</div>
 							</div>
 						</div>
-						@modules.CodeSnippet(cspMiddleware, "go")
+						@components.Code(components.CodeProps{Language: "go", ShowCopyButton: true}) {
+							{ cspMiddleware }
+						}
 					</div>
 				</div>
 			</section>
@@ -368,12 +392,16 @@ templ HowToUse() {
 					<div>
 						<h3 class="text-xl font-semibold mb-2">1. Air (Live Reload for Go)</h3>
 						<p class="mb-2">Install Air for automatic Go server rebuilds:</p>
-						@modules.CodeSnippet("go install github.com/cosmtrek/air@latest", "markdown")
+						@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+							{ "go install github.com/cosmtrek/air@latest" }
+						}
 					</div>
 					<div>
 						<h3 class="text-xl font-semibold mb-2">2. Development Makefile</h3>
 						<p class="mb-2">Create a Makefile in your project root:</p>
-						@modules.CodeSnippet(makeFile, "makefile")
+						@components.Code(components.CodeProps{Language: "makefile", ShowCopyButton: true}) {
+							{ makeFile }
+						}
 						<div class="bg-muted p-4 rounded-lg mt-4">
 							<p class="font-medium mb-2">Note about ports:</p>
 							<ul class="list-disc pl-6 space-y-1 text-sm">
@@ -386,7 +414,9 @@ templ HowToUse() {
 					<div>
 						<h3 class="text-xl font-semibold mb-2">3. Start Development Server</h3>
 						<p class="mb-2">Start all development tools with a single command:</p>
-						@modules.CodeSnippet("make dev", "markdown")
+						@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+							{ "make dev" }
+						}
 						<p class="text-sm mt-2">This will:</p>
 						<ul class="list-disc pl-6 text-sm space-y-1">
 							<li>Watch and compile Templ files</li>
@@ -417,15 +447,21 @@ templ HowToUse() {
 						<h3 class="text-xl font-semibold mb-2">2. Package Installation</h3>
 						<p class="mb-4">Install TemplUI as a Go package:</p>
 						<div class="mb-4">
-							@modules.CodeSnippet(installTemplUI, "markdown")
+							@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+								{ installTemplUI }
+							}
 						</div>
 						<h4 class="font-semibold mb-2">*Required: Additional Tailwind Configuration</h4>
 						<p class="mb-2">When using TemplUI as a package, add this to your tailwind.config.json content array:</p>
 						<div class="mb-4">
-							@modules.CodeSnippet(goPath, "markdown")
+							@components.Code(components.CodeProps{Language: "markdown", ShowCopyButton: true}) {
+								{ goPath }
+							}
 						</div>
 						<p class="mb-2">Replace { string("${GOPATH}") } with your actual Go path:</p>
-						@modules.CodeSnippet("go env GOPATH", "markdown")
+						@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
+							{ "go env GOPATH" }
+						}
 					</div>
 					<div>
 						<h3 class="text-xl font-semibold mb-2">3. Copy Components</h3>
@@ -452,20 +488,26 @@ templ HowToUse() {
 					<div>
 						<h3 class="text-xl font-semibold mb-2">1. Include Required Scripts</h3>
 						<p class="mb-4">At the top of your layout template, include the necessary scripts:</p>
-						@modules.CodeSnippet(alpineHelpers, "go")
+						@components.Code(components.CodeProps{Language: "go", ShowCopyButton: true}) {
+							{ alpineHelpers }
+						}
 					</div>
 					<div>
 						<h3 class="text-xl font-semibold mb-2">2. Component Types</h3>
 						<div class="space-y-4">
 							<div class="bg-muted p-4 rounded-lg">
 								<h4 class="font-medium mb-2">Static Components (Tailwind CSS only)</h4>
 								<p class="mb-2">Can be used directly without additional script includes:</p>
-								@modules.CodeSnippet(staticComponent, "go")
+								@components.Code(components.CodeProps{Language: "go", ShowCopyButton: true}) {
+									{ staticComponent }
+								}
 							</div>
 							<div class="bg-muted p-4 rounded-lg">
 								<h4 class="font-medium mb-2">Interactive Components (Alpine.js/Vanilla JS)</h4>
 								<p class="mb-2">Require script includes:</p>
-								@modules.CodeSnippet(interactiveComponent, "go")
+								@components.Code(components.CodeProps{Language: "go", ShowCopyButton: true}) {
+									{ interactiveComponent }
+								}
 							</div>
 							<p>
 								For a complete list of available components and their usage, visit our