Set up Jinja support in demo site

Author: thibaudcolas

demo/core/jinja/patterns_jinja/jinja_components/quote_block/quote_block.html

@@ -0,0 +1,9 @@
+<blockquote class="quote-block block--spacing">
+    <div class="quote-block__text">
+        <p class="quote-block__quote heading--3">{{ value.quote }}</p>
+        {% if value.attribution %}
+            <p class="quote-block__attribution">{{ value.attribution }}</p>
+        {% endif %}
+    </div>
+</blockquote>
+<p>{{ value.quote|wordcount }} wise words!</p>

demo/core/jinja/patterns_jinja/jinja_components/quote_block/quote_block.yaml

@@ -0,0 +1,4 @@
+context:
+  value:
+    quote: Jinja is the best template engine.
+    attribution: The Dalai Lama

demo/jinja2.py

@@ -0,0 +1,40 @@
+from django.apps import apps
+from django.contrib.staticfiles.storage import staticfiles_storage
+from django.template.context_processors import csrf
+from django.template.defaultfilters import (
+    cut,
+    date,
+    linebreaks,
+    pluralize,
+    slugify,
+    truncatewords,
+    urlencode,
+    wordcount,
+)
+from django.urls import reverse
+
+from jinja2 import Environment
+
+
+def environment(**options):
+    env = Environment(**options)
+    env.globals.update(
+        {
+            "static": staticfiles_storage.url,
+            "url": reverse,
+            "csrf": csrf,
+        }
+    )
+    env.filters.update(
+        {
+            "cut": cut,
+            "date": date,
+            "linebreaks": linebreaks,
+            "pluralize": pluralize,
+            "slugify": slugify,
+            "truncatewords": truncatewords,
+            "urlencode": urlencode,
+            "wordcount": wordcount,
+        }
+    )
+    return env

demo/settings.py

@@ -2,7 +2,7 @@
 
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 
-PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
 BASE_DIR = os.path.dirname(PROJECT_DIR)
 
 
@@ -64,6 +64,9 @@
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": [
+            "demo/core/templates",
+        ],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [
@@ -74,7 +77,22 @@
             ],
             "builtins": ["pattern_library.loader_tags"],
         },
-    }
+    },
+    {
+        "BACKEND": "django.template.backends.jinja2.Jinja2",
+        "DIRS": [
+            "demo/core/jinja",
+        ],
+        "APP_DIRS": True,
+        "OPTIONS": {
+            "environment": "demo.jinja2.environment",
+            "extensions": [
+                "jinja2.ext.do",
+                "jinja2.ext.i18n",
+                "jinja2.ext.loopcontrols",
+            ],
+        },
+    },
 ]
 
 WSGI_APPLICATION = "demo.wsgi.application"
@@ -115,11 +133,14 @@
 STATICFILES_DIRS = [
     # "static_compiled" is a folder used by the front-end tooling
     # to output compiled static assets.
-    os.path.join(PROJECT_DIR, "demo", "static_compiled")
+    os.path.join(PROJECT_DIR, "static_compiled")
 ]
 
 PATTERN_LIBRARY = {
-    "SECTIONS": (("components", ["patterns/components"]),),
+    "SECTIONS": (
+        ("components", ["patterns/components"]),
+        ("jinja", ["patterns_jinja/jinja_components"]),
+    ),
     "PATTERN_BASE_TEMPLATE_NAME": "patterns/base.html",
 }
 

demo/storybook/yaml.stories.js

@@ -41,6 +41,9 @@ import quote_block from '../core/templates/patterns/components/streamfield/quote
 import quote_blockHTML from '../core/templates/patterns/components/streamfield/quote_block.html';
 import quote_blockMD from '../core/templates/patterns/components/streamfield/quote_block.md';
 
+import jinja_quote_block from '../core/jinja/patterns_jinja/jinja_components/quote_block/quote_block.yaml';
+import jinja_quote_blockHTML from '../core/jinja/patterns_jinja/jinja_components/quote_block/quote_block.html';
+
 const sources = {
   'components/accordion/accordion': [accordion, accordionHTML],
   'components/accordion/accordion_section': [
@@ -78,6 +81,10 @@ const sources = {
     quote_blockHTML,
     quote_blockMD,
   ],
+  'jinja_components/quote_block/quote_block': [
+    jinja_quote_block,
+    jinja_quote_blockHTML,
+  ],
 };
 
 const argTypesify = (obj) => {
@@ -139,7 +146,12 @@ Object.entries(sources).forEach(([path, [rawYAML, source, rawMarkdown]]) => {
   const folders = `Django Patterns / ${pathElts
     .join('/')
     .replace('components/', '')}`;
-  const htmlPath = `patterns/${path}.html`;
+  let htmlPath;
+  if (path.includes('jinja')) {
+    htmlPath = `patterns_jinja/${path}.html`;
+  } else {
+    htmlPath = `patterns/${path}.html`;
+  }
   const description = `${rawMarkdown ?? ''}
 ### Usage
 

demo/urls.py

@@ -1,7 +1,6 @@
-from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 from django.urls import include, path
 
-urlpatterns = staticfiles_urlpatterns() + [
+urlpatterns = [
     path("pattern-library/", include("pattern_library.urls")),
     path("", include("demo.storybook.urls")),
 ]

requirements.txt

@@ -4,3 +4,4 @@ django-pattern-library==1.5.0
 black==22.3.0
 flake8==4.0.1
 gunicorn==20.1.0
+jinja2==3.1.6