fix: escape Jinja syntax in copyCode examples on components page
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>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user