Skip to content

Commit cd375cd

Browse files
maribedranmaribedran
committed
Merge branch 'template-output' into release
2 parents 110e08e + c5b66ce commit cd375cd

File tree

12 files changed

+537
-394
lines changed

12 files changed

+537
-394
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22

33
## [Unreleased]
44

5+
### Added
6+
7+
- Add HTML rendered code view in `Template output` column
8+
59
### Fixed
610

711
- Avoid duplicating templates when more than one template engine is set up
812

9-
1013
## [1.5.0](https://github.com/torchbox/django-pattern-library/releases/tag/v1.5.0) - 2025-04-08
1114

1215
### Added

‎CONTRIBUTING.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@ Once the container is built, open a terminal with VS Code and run `django-admin
2828

2929
### `docker-compose`
3030

31-
First [install Docker and docker-compose](https://docs.docker.com/compose/install/), and make sure Docker is started. Then:
31+
First [install Docker and docker compose](https://docs.docker.com/compose/install/), and make sure Docker is started. Then:
3232

3333
```sh
3434
# Install the front-end tooling in the docker container:
35-
docker-compose run frontend npm ci
35+
docker compose run frontend npm ci
3636
# Bring up the web container and run the front-end tooling in watch mode:
37-
docker-compose up
37+
docker compose up
3838
# Run the development server:
39-
docker-compose exec web django-admin runserver 0.0.0.0:8000
39+
docker compose exec web django-admin runserver 0.0.0.0:8000
4040
```
4141

4242
Once the server is started, the pattern library will be available at `http://localhost:8000/`.

‎Dockerfile‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,6 @@ RUN pip install --user "poetry>=2.1.2,<3" && \
1919
COPY pyproject.toml ./
2020
RUN poetry install --no-root
2121

22+
COPY tests/ ./tests/
23+
2224
CMD django-admin runserver 0.0.0.0:8000

‎docker-compose.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ services:
77
PYTHONDONTWRITEBYTECODE: 1
88
ports:
99
- "8000:8000"
10+
stdin_open: true
11+
tty: true
1012
volumes:
1113
- type: bind
1214
source: .

‎pattern_library/monkey_utils.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ def node_render(context):
126126

127127
def override_jinja_tags():
128128
"""
129-
Experimental. Overrides jinja extends and include tags for use in your pattern library.
129+
Overrides jinja extends and include tags for use in your pattern library.
130130
Call it in your settings to override tags
131131
"""
132132
global jinja_visit_Extends

‎pattern_library/static/pattern_library/src/js/app.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import '../scss/main.scss';
2-
import persistMenu from './components/persist-menu';
3-
import patternSearch from './components/pattern-search';
4-
import tabbedContent from './components/tabbed-content';
5-
import syntaxHighlighting from './components/syntax-highlighting';
6-
import hideMenuMobile from './components/hide-menu-mobile';
7-
import {setIframeSize, resizeIframe} from './components/iframe';
8-
import {toggleNav, toggleNavItems} from './components/navigation';
1+
import "../scss/main.scss";
2+
import persistMenu from "./components/persist-menu";
3+
import patternSearch from "./components/pattern-search";
4+
import tabbedContent from "./components/tabbed-content";
5+
import syntaxHighlighting from "./components/syntax-highlighting";
6+
import hideMenuMobile from "./components/hide-menu-mobile";
7+
import { setIframeSize, resizeIframe } from "./components/iframe";
8+
import { toggleNav, toggleNavItems } from "./components/navigation";
99

10-
document.addEventListener('DOMContentLoaded', () => {
10+
document.addEventListener("DOMContentLoaded", () => {
1111
syntaxHighlighting();
1212
toggleNavItems();
1313
resizeIframe();

‎pattern_library/static/pattern_library/src/js/components/syntax-highlighting.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import hljs from 'highlight.js/lib/core';
2-
import django from 'highlight.js/lib/languages/django';
3-
import yaml from 'highlight.js/lib/languages/yaml';
1+
import hljs from "highlight.js/lib/core";
2+
import django from "highlight.js/lib/languages/django";
3+
import yaml from "highlight.js/lib/languages/yaml";
4+
import md from "highlight.js/lib/languages/markdown";
5+
import xml from "highlight.js/lib/languages/xml";
46

5-
export default function() {
6-
hljs.registerLanguage('django', django);
7-
hljs.registerLanguage('yaml', yaml);
7+
export default function () {
8+
hljs.registerLanguage("django", django);
9+
hljs.registerLanguage("yaml", yaml);
10+
hljs.registerLanguage("md", md);
11+
hljs.registerLanguage("xml", xml);
812
hljs.highlightAll();
913
}

‎pattern_library/templates/pattern_library/index.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,19 @@ <h4 class="heading heading--iframe-size js-iframe-size">
2727
<li class="tabbed-content__heading tabbed-content__heading--active">
2828
<a href="#tab-1">Template source</a>
2929
</li>
30+
3031
<li class="tabbed-content__heading">
3132
<a href="#tab-2">Template config</a>
3233
</li>
3334

3435
<li class="tabbed-content__heading">
35-
<a href="#tab-3">Template docs</a>
36+
<a href="#tab-3">Template output</a>
37+
</li>
38+
39+
<li class="tabbed-content__heading">
40+
<a href="#tab-4">Template docs</a>
3641
</li>
42+
3743
</ul>
3844

3945
<div class="tabbed-content__tabs">
@@ -46,6 +52,10 @@ <h4 class="heading heading--iframe-size js-iframe-size">
4652
</div>
4753

4854
<div id="tab-3" class="tabbed-content__item">
55+
<pre><code class="code xml">{{ pattern_html_source }}</code></pre>
56+
</div>
57+
58+
<div id="tab-4" class="tabbed-content__item">
4959
<div class="md">{{ pattern_markdown|safe }}</div>
5060
</div>
5161
</div>

‎pattern_library/views.py‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import json
22

33
from django.http import Http404, HttpResponse
4-
from django.template.loader import get_template
4+
from django.template.loader import get_template, render_to_string
55
from django.utils.decorators import method_decorator
66
from django.utils.html import escape
77
from django.utils.safestring import mark_safe
88
from django.views.decorators.clickjacking import xframe_options_sameorigin
99
from django.views.decorators.csrf import csrf_exempt
1010
from django.views.generic.base import TemplateView
1111

12+
from bs4 import BeautifulSoup
13+
from bs4.formatter import HTMLFormatter
14+
1215
from pattern_library import get_base_template_names, get_pattern_base_template_name
1316
from pattern_library.exceptions import PatternLibraryEmpty, TemplateIsNotPattern
1417
from pattern_library.utils import (
@@ -72,6 +75,18 @@ def get(self, request, pattern_template_name=None):
7275
context["pattern_config"] = escape(
7376
get_pattern_config_str(pattern_template_name)
7477
)
78+
template_context = get_pattern_context(pattern_template_name)
79+
try:
80+
soup = BeautifulSoup(
81+
render_to_string(
82+
pattern_template_name, template_context, request=request
83+
),
84+
"html.parser",
85+
)
86+
formatter = HTMLFormatter(indent=4)
87+
context["pattern_html_source"] = escape(soup.prettify(formatter=formatter))
88+
except Exception as e:
89+
context["pattern_html_source"] = f"Error rendering pattern: {e}"
7590
context["pattern_name"] = pattern_config.get("name", pattern_template_name)
7691
context["pattern_markdown"] = get_pattern_markdown(pattern_template_name)
7792

0 commit comments

Comments
 (0)