From c0e44c275154757760f9c0914cebb180007b9d41 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 6 Dec 2025 19:19:41 +0100
Subject: [PATCH] fix: escape Jinja syntax in copyCode examples on components
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap Jinja template code examples inside copyCode() JavaScript calls
with {% raw %}{% endraw %} blocks to prevent Jinja from evaluating
them during template rendering.

Affected sections:
- Macros overview copy button
- Full pagination copy button
- Simple pagination copy button

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/admin/components.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/templates/admin/components.html b/app/templates/admin/components.html
index abb50265..281aefb4 100644
--- a/app/templates/admin/components.html
+++ b/app/templates/admin/components.html
@@ -178,13 +178,13 @@ html {
 {# In your table #}
 {{ pagination() }}{% endraw %}</code></pre>
                     </div>
-                    <button @click="copyCode(`{% from 'shared/macros/pagination.html' import pagination %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/badges.html' import status_badge, verification_badge %}
 
 {{ page_header('Page Title', action_label='Action', action_url='/action') }}
 {{ loading_state('Loading...') }}
-{{ pagination() }}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
+{{ pagination() }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                         <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                         Copy Code
                     </button>
@@ -236,10 +236,10 @@ html {
                             </span>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% from 'shared/macros/pagination.html' import pagination %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination %}
 
 {# In your template (inside the table wrapper) #}
-{{ pagination() }}
+{{ pagination() }}{% endraw %}
 
 {# Required JS properties in your Alpine component: #}
 pagination: { page: 1, per_page: 10, total: 0, pages: 0 },
@@ -292,8 +292,8 @@ goToPage(n) { if (n !== '...' && n >= 1 && n <= this.totalPages) { this.paginati
                             </div>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% from 'shared/macros/pagination.html' import pagination_simple %}
-{{ pagination_simple() }}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination_simple %}
+{{ pagination_simple() }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                         <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
                         Copy Code
                     </button>