🚧 Markdown renderer

* Stubbed out TemplateView for rendering markdown files
* Added a BoostRenderer class to parse the markdown files to support the first iteration of a youtube shortcode and also a Pygments renderer for code blocks.
* Added default styles for some common markup so the rendered markdown looks better.

The pygments renderer is set to use Solarized Dark right now because that’s the closest I see that matches the design of the site.  This can be changed in the class.

core/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class CoreConfig(AppConfig):
+    name = "core"

core/boostrenderer.py

@@ -0,0 +1,43 @@
+import re
+
+from mistletoe import HTMLRenderer
+from mistletoe.span_token import SpanToken
+from pygments import highlight
+from pygments.styles import get_style_by_name as get_style
+from pygments.lexers import get_lexer_by_name as get_lexer, guess_lexer
+from pygments.formatters.html import HtmlFormatter
+
+
+class Youtube(SpanToken):
+    """
+    Span token for Youtube shortcodes
+    Expected shortcode: `[[ youtube | U4VZ9DRdXAI ]]`
+    youtube is thrown out but in the shortcode for readability
+    """
+    pattern = re.compile(r"\[\[ *(.+?) *\| *(.+?) *\]\]")
+
+    def __init__(self, match):
+        self.target = match.group(2)
+
+
+class PygmentsRenderer(HTMLRenderer):
+    formatter = HtmlFormatter()
+    formatter.noclasses = True
+
+    def __init__(self, *extras, style='solarized-dark'):
+        super().__init__(*extras)
+        self.formatter.style = get_style(style)
+
+    def render_block_code(self, token):
+        code = token.children[0].content
+        lexer = get_lexer(token.language) if token.language else guess_lexer(code)
+        return highlight(code, lexer, self.formatter)
+
+
+class BoostRenderer(PygmentsRenderer):
+    def __init__(self):
+        super().__init__(Youtube)
+
+    def render_youtube(self, token):
+        template = '<iframe width="560" height="315" src="https://www.youtube.com/embed/{target}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
+        return template.format(target=token.target)

core/markdown.py

@@ -1,14 +1,15 @@
 import frontmatter
-from mistletoe import Document, HTMLRenderer
+from core.boostrenderer import BoostRenderer
+from mistletoe import Document
 
 
-def process_md():
+def process_md(filename):
-    with open("content/test.md") as f:
+    with open(filename) as f:
         post = frontmatter.load(f)
         metadata = post.metadata
         content = post.content
 
-        with HTMLRenderer() as renderer:
+        with BoostRenderer() as renderer:
             doc = Document(content)
             rendered = renderer.render(doc)
 

core/views.py

@@ -0,0 +1,26 @@
+import os.path
+
+from django.http import Http404
+from django.views.generic import TemplateView
+
+from .markdown import process_md
+
+
+class MarkdownTemplateView(TemplateView):
+    template_name = "markdown_template.html"
+
+    def get(self, request, *args, **kwargs):
+        filename = self.kwargs.get("title")
+        if not os.path.isfile(f"content/{filename}.md"):
+            raise Http404("Post not found")
+
+        context = self.get_context_data(**kwargs)
+        return self.render_to_response(context)
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        filename = self.kwargs.get("title")
+        metadata, content = process_md(f"content/{filename}.md")
+        context["frontmatter"] = metadata
+        context["content"] = content
+        return context

frontend/styles.css

@@ -2,8 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
-/* custom classes */
-
 body {
   color: white;
 }
+
+@layer base {
+  h1 {
+    @apply text-6xl;
+    @apply mb-3;
+  }
+  h2 {
+    @apply text-4xl;
+    @apply my-5;
+  }
+  p {
+    @apply py-5;
+  }
+  pre {
+    @apply p-6;
+  }
+}

static/css/styles.css

@@ -554,6 +554,24 @@ select {
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
+  h1 {
+  font-size: 3.75rem;
+  line-height: 1;
+  margin-bottom: 0.75rem;
+}
+  h2 {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+  p {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+  pre {
+  padding: 1.5rem;
+}
 
 *, ::before, ::after {
   --tw-translate-x: 0;
@@ -669,12 +687,6 @@ select {
 .left-0 {
   left: 0px;
 }
-.right-0 {
-  right: 0px;
-}
-.right-4 {
-  right: 1rem;
-}
 .right-3 {
   right: 0.75rem;
 }
@@ -725,10 +737,6 @@ select {
   margin-left: 0.75rem;
   margin-right: 0.75rem;
 }
-.my-11 {
-  margin-top: 2.75rem;
-  margin-bottom: 2.75rem;
-}
 .my-6 {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
@@ -787,21 +795,18 @@ select {
 .mb-16 {
   margin-bottom: 4rem;
 }
-.mt-11 {
-  margin-top: 2.75rem;
-}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
-.mb-5 {
+.mt-11 {
-  margin-bottom: 1.25rem;
+  margin-top: 2.75rem;
-}
-.mr-2 {
-  margin-right: 0.5rem;
 }
 .mr-1 {
   margin-right: 0.25rem;
 }
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
 .block {
   display: block;
 }
@@ -948,26 +953,16 @@ select {
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
-.space-x-11 > :not([hidden]) ~ :not([hidden]) {
+.space-y-11 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
+  --tw-space-y-reverse: 0;
-  margin-right: calc(2.75rem * var(--tw-space-x-reverse));
+  margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-left: calc(2.75rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
-}
-.space-x-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
-.space-y-11 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
-}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1083,9 +1078,9 @@ select {
   padding-top: 2.75rem;
   padding-bottom: 2.75rem;
 }
-.py-16 {
+.py-0 {
-  padding-top: 4rem;
+  padding-top: 0px;
-  padding-bottom: 4rem;
+  padding-bottom: 0px;
 }
 .px-5 {
   padding-left: 1.25rem;
@@ -1111,9 +1106,9 @@ select {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.py-0 {
+.py-16 {
-  padding-top: 0px;
+  padding-top: 4rem;
-  padding-bottom: 0px;
+  padding-bottom: 4rem;
 }
 .pr-2 {
   padding-right: 0.5rem;
@@ -1169,18 +1164,12 @@ select {
 .pr-11 {
   padding-right: 2.75rem;
 }
-.pb-4 {
-  padding-bottom: 1rem;
-}
 .text-left {
   text-align: left;
 }
 .text-center {
   text-align: center;
 }
-.align-middle {
-  vertical-align: middle;
-}
 .font-cairo {
   font-family: 'Cairo', sans-serif;
 }
@@ -1266,8 +1255,6 @@ select {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
-/* custom classes */
-
 body {
   color: white;
 }
@@ -1281,21 +1268,11 @@ body {
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
-.checked\:text-orange:checked {
-  --tw-text-opacity: 1;
-  color: rgb(255 159 0 / var(--tw-text-opacity));
-}
-
 .hover\:bg-orange:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
-.focus\:bg-orange:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 159 0 / var(--tw-bg-opacity));
-}
-
 .focus\:text-charcoal:focus {
   --tw-text-opacity: 1;
   color: rgb(23 42 52 / var(--tw-text-opacity));
@@ -1372,47 +1349,11 @@ body {
     justify-content: center;
   }
 
-  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-  }
-
-  .sm\:space-y-3 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-  }
-
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
 
-  .sm\:py-4 {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-
-  .sm\:py-11 {
-    padding-top: 2.75rem;
-    padding-bottom: 2.75rem;
-  }
-
-  .sm\:py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  .sm\:px-3 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-
-  .sm\:pt-4 {
-    padding-top: 1rem;
-  }
-
   .sm\:text-5xl {
     font-size: 3rem;
     line-height: 1;
@@ -1440,6 +1381,11 @@ body {
     margin-bottom: 0px;
   }
 
+  .md\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
   .md\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
@@ -1450,11 +1396,6 @@ body {
     margin-bottom: 2.75rem;
   }
 
-  .md\:my-6 {
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
-  }
-
   .md\:mb-11 {
     margin-bottom: 2.75rem;
   }
@@ -1467,20 +1408,20 @@ body {
     margin-top: 2rem;
   }
 
-  .md\:mr-11 {
+  .md\:mb-0 {
-    margin-right: 2.75rem;
+    margin-bottom: 0px;
   }
 
-  .md\:mt-0 {
+  .md\:mr-11 {
-    margin-top: 0px;
+    margin-right: 2.75rem;
   }
 
   .md\:mt-11 {
     margin-top: 2.75rem;
   }
 
-  .md\:mb-0 {
+  .md\:mt-0 {
-    margin-bottom: 0px;
+    margin-top: 0px;
   }
 
   .md\:mb-6 {
@@ -1519,10 +1460,6 @@ body {
     width: 25%;
   }
 
-  .md\:w-full {
-    width: 100%;
-  }
-
   .md\:w-1\/3 {
     width: 33.333333%;
   }
@@ -1531,10 +1468,6 @@ body {
     width: auto;
   }
 
-  .md\:w-2\/3 {
-    width: 66.666667%;
-  }
-
   .md\:max-w-7xl {
     max-width: 80rem;
   }
@@ -1650,6 +1583,16 @@ body {
     padding-right: 2.5rem;
   }
 
+  .md\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .md\:py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
@@ -1660,11 +1603,6 @@ body {
     padding-right: 2rem;
   }
 
-  .md\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .md\:py-11 {
     padding-top: 2.75rem;
     padding-bottom: 2.75rem;
@@ -1675,16 +1613,6 @@ body {
     padding-bottom: 0px;
   }
 
-  .md\:py-16 {
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-  }
-
-  .md\:py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
   .md\:pl-6 {
     padding-left: 1.5rem;
   }

templates/base.html

@@ -7,6 +7,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="{% block description %}{% endblock %}">
+    <meta name="keywords" content="{% block keywords %}{% endblock %}">
+    <meta name="author" content="{% block author %}{% endblock %}">
     <link href="{% static 'css/styles.css' %}" rel="stylesheet">
     <!-- Google fonts for Cairo Medium and SemiBold -->
     <link rel="preconnect" href="https://fonts.googleapis.com">

templates/markdown_template.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block title %}{{ frontmatter.title }}{% endblock %}
+{% block description %}{{ frontmatter.description }}{% endblock %}
+{% block keywords %}{{ frontmatter.keywords }}{% endblock %}
+{% block author %}{{ frontmatter.author }}{% endblock %}
+
+{% block content %}
+  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
+
+    <div class="mb-6 md:mb-0">
+      {{ content|safe }}
+    </div>
+
+  </div>
+{% endblock %}