Self-hostable blog for developers built on Wagtail and Django, with webpack, Bootstrap, and CodeMirror.
blogbootstrapdjangodockerhandcodedpythonself-hostedwagtailwebpack
1{% load static wagtailuserbar wagtailcore_tags %}
2
3<!doctype html>
4<html lang="en">
5
6<head>
7 <meta charset="utf-8">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <title>{% block title %}{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}{% endblock %}{% block extra_title %}{% endblock %}</title>
10 <meta name="description" content="{% block description %}{{ self.search_description }}{% endblock %}{% block extra_description %}{% endblock %}">
11 <link rel="canonical" href="{{ canonical }}">
12
13 {% if BASE_URL %}
14 <base href="{{ BASE_URL }}">
15 {% endif %}
16
17 {% block extra_head %}{% endblock %}
18
19 <link href="{% static 'base.css' %}" rel="stylesheet">
20 {% block extra_css %}{% endblock %}
21
22 {% include 'includes/collector.html' %}
23</head>
24
25<body>
26 {% wagtailuserbar %}
27
28 {% include 'includes/messages.html' %}
29
30 {% block nav %}
31 <nav class="navbar navbar-dark navbar-expand-md bg-blue-800 d-print-none">
32 <div class="container">
33 <a href="/" class="navbar-brand logo shadow" aria-label="Isaac Bythewood"></a>
34 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
35 <span class="navbar-toggler-icon"></span>
36 </button>
37 <div class="collapse navbar-collapse" id="navbarSupportedContent">
38 <ul class="navbar-nav">
39 {% for nav_item in nav_items %}
40 <li class="nav-item">
41 <a class="nav-link {% if active_tag.id == nav_item.id %}active{% endif %}" href="{{ nav_item.url }}">
42 {{ nav_item.name }}
43 </a>
44 </li>
45 {% endfor %}
46 </ul>
47 <div class="ms-0 ms-md-auto">
48 <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="prefers-color-scheme-icon system" viewBox="0 0 16 16">
49 <path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"/>
50 </svg>
51 <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="prefers-color-scheme-icon light d-none" viewBox="0 0 16 16">
52 <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
53 </svg>
54 <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="prefers-color-scheme-icon dark d-none" viewBox="0 0 16 16">
55 <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
56 </svg>
57 <select class="form-select" id="prefers-color-scheme" aria-label="Select color scheme">
58 <option value="system" selected>
59 System
60 </option>
61 <option value="light">
62 Light
63 </option>
64 <option value="dark">
65 Dark
66 </option>
67 </select>
68 </div>
69 </div>
70 </div>
71 </nav>
72 {% endblock %}
73
74 {% block breadcrumb_wrapper %}
75 <div class="bg-blue-700 py-2 overflow-auto d-print-none">
76 <div class="container">
77 {% block breadcrumbs %}
78 <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='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb">
79 <ol class="breadcrumb mb-0">
80 {% for page in self.get_ancestors %}
81 {% if page.is_root == False %}
82 <li class="breadcrumb-item"><a href="{% pageurl page %}">{{ page.title }}</a></li>
83 {% endif %}
84 {% endfor %}
85 {% block extra_breadcrumbs %}
86 <li class="breadcrumb-item active">{{ self.title }}</li>
87 {% endblock %}
88 </ol>
89 </nav>
90 {% endblock %}
91 </div>
92 </div>
93 {% endblock %}
94
95 <main class="flex-grow-1 pb-5">
96 {% block main %}{% endblock %}
97 </main>
98
99 {% block footer %}
100 <footer class="bg-black text-light d-print-none">
101 <div class="container">
102 {% if newsletter_page %}
103 <div class="row bg-gray-925 border border-yellow-500 shadow rounded p-4">
104 <div class="col-12 col-lg-7 mb-2 mb-lg-0">
105 <div class="h1 fw-bolder">Get new posts to your inbox</div>
106 <div class="h5 text-gray-300">
107 I only post once every week or so and store your email securely on
108 my own server. It's free tips and tricks with no spam!
109 </div>
110 </div>
111 <div class="col-12 col-lg-5 d-flex align-items-center">
112 {% include "includes/subscribe_form.html" %}
113 </div>
114 </div>
115 {% endif %}
116 <div class="row links">
117 <div class="col-12 col-lg-6 mb-4 mb-lg-0">
118 <div class="h5 font-monospace mb-3">Blog</div>
119 <p>A blog by <a href="https://isaacbythewood.com/" class="text-light">Isaac Bythewood</a>
120 that goes into much ado about nothing, especially if it's webdev
121 related. I am a full-stack developer located in Morganton, NC. No
122 warranty, technical support, or mental support will be provided for
123 anything read here.</p>
124 </div>
125 <div class="col-6 col-lg-2 offset-lg-2">
126 <div class="h5 font-monospace mb-3">Projects</div>
127 <ul class="list-unstyled">
128 <li class="mb-2"><a href="https://github.com/overshard/analytics" class="link-footer">Analytics</a></li>
129 <li class="mb-2"><a href="https://github.com/overshard/status" class="link-footer">Status</a></li>
130 <li class="mb-2"><a href="https://github.com/overshard/timelite" class="link-footer">Timelite</a></li>
131 <li class="mb-2"><a href="https://github.com/overshard/ai-art" class="link-footer">AI-Art</a></li>
132 </ul>
133 </div>
134 <div class="col-6 col-lg-2">
135 <div class="h5 font-monospace mb-3">Links</div>
136 <ul class="list-unstyled">
137 <li class="mb-2"><a href="https://isaacbythewood.com/code" class="link-footer">Code</a></li>
138 <li class="mb-2"><a href="https://isaacbythewood.com/art" class="link-footer">Art</a></li>
139 <li class="mb-2"><a href="https://analytics.bythewood.me/properties/0d379e18-9ea7-4228-a8bf-82369c25ab84/" class="link-footer">Analytics</a></li>
140 <li class="mb-2"><a href="https://status.bythewood.me/properties/dbc133c9-ef2a-40a9-a3f0-a26c64bede0a/" class="link-footer">Status</a></li>
141 </ul>
142 </div>
143 </div>
144 </div>
145 <div class="footer-plane">
146 <div class="footer-plane-overlay"></div>
147 <div class="footer-plane-grid"></div>
148 </div>
149 </footer>
150
151 <div class="bg-dark py-3 d-print-none">
152 <div class="container">
153 <div class="row">
154 <div class="col-sm-6 d-flex align-items-center justify-content-center justify-content-sm-start mt-3 mt-sm-0 order-1 order-sm-0">
155 <small class="text-light">
156 © {% now 'Y' %} Isaac Bythewood. Some rights reserved.
157 </small>
158 </div>
159 <div class="col-sm-6 d-flex justify-content-center justify-content-sm-end">
160 <a href="https://github.com/overshard/blog" target="_blank" class="text-light fs-3 d-flex align-items-center" aria-label="GitHub">
161 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
162 <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"/>
163 </svg>
164 </a>
165 <a href="https://isaacbythewood.com/" target="_blank" class="logo shadow ms-4" aria-label="Isaac Bythewood"></a>
166 </div>
167 </div>
168 </div>
169 </div>
170 {% endblock %}
171
172 <script src="{% static 'base.js' %}"></script>
173 {% block extra_js %}{% endblock %}
174</body>
175</html>