feat: Rendered code view in Template output (#2)

Author: CuriousLearner

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.2.1dev1](https://github.com/lincolnloop/django-pattern-library/releases/tag/v1.2.1dev1) - 2024-04-02
+
+### Added
+
+- Add HTML rendered code view in `Template output` column ([#2](https://github.com/lincolnloop/django-pattern-library/pull/2))
+
 ## [1.2.0](https://github.com/torchbox/django-pattern-library/releases/tag/v1.2.0) - 2024-01-16
 
 ### Added

docker-compose.yml

@@ -7,6 +7,8 @@ services:
       PYTHONDONTWRITEBYTECODE: 1
     ports:
       - "8000:8000"
+    stdin_open: true
+    tty: true
     volumes:
       - type: bind
         source: .

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

@@ -1,13 +1,13 @@
-import '../scss/main.scss';
-import persistMenu from './components/persist-menu';
-import patternSearch from './components/pattern-search';
-import tabbedContent from './components/tabbed-content';
-import syntaxHighlighting from './components/syntax-highlighting';
-import hideMenuMobile from './components/hide-menu-mobile';
-import {setIframeSize, resizeIframe} from './components/iframe';
-import {toggleNav, toggleNavItems} from './components/navigation';
+import "../scss/main.scss";
+import persistMenu from "./components/persist-menu";
+import patternSearch from "./components/pattern-search";
+import tabbedContent from "./components/tabbed-content";
+import syntaxHighlighting from "./components/syntax-highlighting";
+import hideMenuMobile from "./components/hide-menu-mobile";
+import { setIframeSize, resizeIframe } from "./components/iframe";
+import { toggleNav, toggleNavItems } from "./components/navigation";
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
     syntaxHighlighting();
     toggleNavItems();
     resizeIframe();

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

@@ -1,9 +1,13 @@
-import hljs from 'highlight.js/lib/core';
-import django from 'highlight.js/lib/languages/django';
-import yaml from 'highlight.js/lib/languages/yaml';
+import hljs from "highlight.js/lib/core";
+import django from "highlight.js/lib/languages/django";
+import yaml from "highlight.js/lib/languages/yaml";
+import md from "highlight.js/lib/languages/markdown";
+import xml from "highlight.js/lib/languages/xml";
 
-export default function() {
-    hljs.registerLanguage('django', django);
-    hljs.registerLanguage('yaml', yaml);
+export default function () {
+    hljs.registerLanguage("django", django);
+    hljs.registerLanguage("yaml", yaml);
+    hljs.registerLanguage("md", md);
+    hljs.registerLanguage("xml", xml);
     hljs.highlightAll();
 }

pattern_library/templates/pattern_library/index.html

@@ -27,13 +27,19 @@ <h4 class="heading heading--iframe-size js-iframe-size">
                 <li class="tabbed-content__heading tabbed-content__heading--active">
                     <a href="#tab-1">Template source</a>
                 </li>
+
                 <li class="tabbed-content__heading">
-                    <a href="#tab-2">Template config</a>
+                    <a href="#tab-2">Template output</a>
                 </li>
 
                 <li class="tabbed-content__heading">
-                    <a href="#tab-3">Template docs</a>
+                    <a href="#tab-3">Template config</a>
                 </li>
+
+                <li class="tabbed-content__heading">
+                    <a href="#tab-4">Template docs</a>
+                </li>
+
             </ul>
 
             <div class="tabbed-content__tabs">
@@ -42,10 +48,14 @@ <h4 class="heading heading--iframe-size js-iframe-size">
                 </div>
 
                 <div id="tab-2" class="tabbed-content__item">
-                    <pre><code class="code yaml">{{ pattern_config }}</code></pre>
+                    <pre><code class="code xml">{{ pattern_html_source }}</code></pre>
                 </div>
 
                 <div id="tab-3" class="tabbed-content__item">
+                    <pre><code class="code yaml">{{ pattern_config }}</code></pre>
+                </div>
+
+                <div id="tab-4" class="tabbed-content__item">
                     <div class="md">{{ pattern_markdown|safe }}</div>
                 </div>
             </div>

pattern_library/views.py

@@ -1,14 +1,17 @@
 import json
 
 from django.http import Http404, HttpResponse
-from django.template.loader import get_template
+from django.template.loader import get_template, render_to_string
 from django.utils.decorators import method_decorator
 from django.utils.html import escape
 from django.utils.safestring import mark_safe
 from django.views.decorators.clickjacking import xframe_options_sameorigin
 from django.views.decorators.csrf import csrf_exempt
 from django.views.generic.base import TemplateView
 
+from bs4 import BeautifulSoup
+from bs4.formatter import HTMLFormatter
+
 from pattern_library import get_base_template_names, get_pattern_base_template_name
 from pattern_library.exceptions import PatternLibraryEmpty, TemplateIsNotPattern
 from pattern_library.utils import (
@@ -72,6 +75,15 @@ def get(self, request, pattern_template_name=None):
         context["pattern_config"] = escape(
             get_pattern_config_str(pattern_template_name)
         )
+        template_context = get_pattern_context(pattern_template_name)
+        try:
+            soup = BeautifulSoup(
+                render_to_string(pattern_template_name, template_context), "html.parser"
+            )
+            formatter = HTMLFormatter(indent=4)
+            context["pattern_html_source"] = escape(soup.prettify(formatter=formatter))
+        except Exception as e:
+            context["pattern_html_source"] = f"Error rendering pattern: {e}"
         context["pattern_name"] = pattern_config.get("name", pattern_template_name)
         context["pattern_markdown"] = get_pattern_markdown(pattern_template_name)