Markdown blog on Flask with Vite-built assets and WeasyPrint PDF export, rewritten from the Wagtail build that preceded it.
blogdockerflaskmarkdownpythonself-hostedvite
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>{% block title %}{{ page.title }}{% endblock %}{% block extra_title %}{% endblock %}</title>
8 <meta name="description" content="{% block description %}{{ page.description }}{% endblock %}{% block extra_description %}{% endblock %}">
9 <link rel="canonical" href="{{ request.base_url }}">
10
11 {% block extra_head %}{% endblock %}
12
13 <link href="{{ vite_asset('index.js', 'css') }}" rel="stylesheet">
14 {% block extra_css %}{% endblock %}
15
16 {% include 'includes/collector.html' %}
17</head>
18
19<body>
20 {% block nav %}
21 <nav class="navbar navbar-dark navbar-expand-md bg-deep d-print-none">
22 <div class="container">
23 <a href="/" class="navbar-brand logo shadow" aria-label="Isaac Bythewood"></a>
24 <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
25 <span class="navbar-toggler-icon"></span>
26 </button>
27 <div class="collapse navbar-collapse" id="navbarSupportedContent">
28 <ul class="navbar-nav ms-3">
29 {% for nav_item in nav_items %}
30 <li class="nav-item">
31 <a class="nav-link {% if active_tag and active_tag.slug == nav_item.slug %}active{% endif %}" href="{{ nav_item.url }}">
32 {{ nav_item.name }}
33 </a>
34 </li>
35 {% endfor %}
36 </ul>
37 </div>
38 </div>
39 </nav>
40 {% endblock %}
41
42 {% block breadcrumb_wrapper %}
43 <div class="breadcrumb-bar py-2 overflow-auto d-print-none">
44 <div class="container">
45 {% block breadcrumbs %}
46 <nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%235a5a72'/%3E%3C/svg%3E");" aria-label="breadcrumb">
47 <ol class="breadcrumb mb-0">
48 {% for crumb in breadcrumbs %}
49 <li class="breadcrumb-item"><a href="{{ crumb.url }}">{{ crumb.title }}</a></li>
50 {% endfor %}
51 {% block extra_breadcrumbs %}
52 <li class="breadcrumb-item active">{{ page.title }}</li>
53 {% endblock %}
54 </ol>
55 </nav>
56 {% endblock %}
57 </div>
58 </div>
59 {% endblock %}
60
61 <main class="flex-grow-1 pb-5">
62 {% block main %}{% endblock %}
63 </main>
64
65 {% block footer %}
66 <footer class="bg-deep text-light d-print-none">
67 <div class="container">
68 <div class="row links">
69 <div class="col-12 col-lg-6 mb-4 mb-lg-0">
70 <div class="h5 font-monospace mb-3">Blog</div>
71 <p>A blog by <a href="https://isaacbythewood.com/">Isaac Bythewood</a>,
72 a Senior Solutions Architect at Craftmaster Furniture located in
73 Elkin, NC. Mostly webdev musings and the occasional deep dive into
74 infrastructure, security, and tooling. No warranty, technical
75 support, or mental support will be provided for anything read
76 here.</p>
77 </div>
78 <div class="col-6 col-lg-2 offset-lg-2">
79 <div class="h5 font-monospace mb-3">Projects</div>
80 <ul class="list-unstyled">
81 <li class="mb-2"><a href="https://github.com/overshard/taproot" class="link-footer" target="_blank">Taproot</a></li>
82 <li class="mb-2"><a href="https://github.com/overshard/darkfurrow.com" class="link-footer" target="_blank">Dark Furrow</a></li>
83 <li class="mb-2"><a href="https://github.com/overshard/timelite" class="link-footer" target="_blank">Timelite</a></li>
84 <li class="mb-2"><a href="https://github.com/overshard/status" class="link-footer" target="_blank">Status</a></li>
85 <li class="mb-2"><a href="https://github.com/overshard/analytics" class="link-footer" target="_blank">Analytics</a></li>
86 </ul>
87 </div>
88 <div class="col-6 col-lg-2">
89 <div class="h5 font-monospace mb-3">Links</div>
90 <ul class="list-unstyled">
91 <li class="mb-2"><a href="https://isaacbythewood.com/" class="link-footer" target="_blank">Portfolio</a></li>
92 <li class="mb-2"><a href="https://github.com/overshard" class="link-footer" target="_blank">GitHub</a></li>
93 <li class="mb-2"><a href="https://www.linkedin.com/in/ibythewood/" class="link-footer" target="_blank">LinkedIn</a></li>
94 <li class="mb-2"><a href="https://analytics.bythewood.me/properties/0d379e18-9ea7-4228-a8bf-82369c25ab84/" class="link-footer" target="_blank">Blog Analytics</a></li>
95 <li class="mb-2"><a href="https://status.bythewood.me/properties/dbc133c9-ef2a-40a9-a3f0-a26c64bede0a/" class="link-footer" target="_blank">Blog Status</a></li>
96 </ul>
97 </div>
98 </div>
99 </div>
100 <div class="footer-plane">
101 <div class="footer-plane-overlay"></div>
102 <div class="footer-plane-grid"></div>
103 </div>
104 </footer>
105
106 <div class="footer-bar d-print-none">
107 <div class="container">
108 <div class="row align-items-center">
109 <div class="col-sm-6 d-flex align-items-center justify-content-center justify-content-sm-start order-1 order-sm-0">
110 <small>© {{ now.year }} Isaac Bythewood</small>
111 </div>
112 <div class="col-sm-6 d-flex justify-content-center justify-content-sm-end py-3 py-sm-0">
113 <a href="https://github.com/overshard/blog.bythewood.me" target="_blank" class="footer-bar-link" aria-label="GitHub">
114 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
115 <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
116 </svg>
117 </a>
118 <a href="https://isaacbythewood.com/" target="_blank" class="logo shadow ms-3" style="width: 20px; height: 20px;" aria-label="Isaac Bythewood"></a>
119 </div>
120 </div>
121 </div>
122 </div>
123 {% endblock %}
124
125 <script src="{{ vite_asset('index.js') }}"></script>
126 {% block extra_js %}{% endblock %}
127</body>
128</html>