1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>New Default Styling and 2x Faster!</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="../style.css" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Content placed here will appear directly after the opening <body> tag -->
<nav>
<a href="/">Home</a><span> / </span>
<a href="/blog">Blog</a><span> / </span>
<a href="/tweaks.html">Tweaks</a><span> / </span>
<a href="https://git.sr.ht/~bt/pblog">Download</a>
</nav>
<!-- Do not remove this opening article element -->
<article>
<header id="title-block-header">
<h1 class="title">New Default Styling and 2x Faster!</h1>
<p class="date">Wed, 27 Jul 2022</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#the-default-theme" id="toc-the-default-theme">The Default “Theme”</a></li>
<li><a href="#new-config-setup" id="toc-new-config-setup">New Config Setup</a></li>
<li><a href="#cutting-the-build-time-in-half" id="toc-cutting-the-build-time-in-half">Cutting the Build Time in Half</a></li>
<li><a href="#far-from-perfect" id="toc-far-from-perfect">Far From Perfect</a></li>
</ul>
</nav>
<p>If it wasn’t already obvious, this project has received a minor styling overhaul. But looks weren’t the only thing updated with this latest patch.</p>
<p>The total build process time is now <em>two times faster</em>!</p>
<p>Keep reading for more details.</p>
<h2 id="the-default-theme">The Default “Theme”</h2>
<p>The styling changes aren’t anything ground breaking. They simply center the main content and add a little more visual separation of the content and backdrop. Again, you can customize <code>pblog</code> as you see fit, but having a sane default is always nice.</p>
<h2 id="new-config-setup">New Config Setup</h2>
<p>Since updates and performance fixes might continue to come through in the future, I didn’t want to make users play around with their default configuration every single time. Now, all main configuration is handled in the new <code>_config.sh</code> file.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode sh"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co">#!/bin/sh</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="co"># Site specific settings</span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="co">###################################################################################</span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a><span class="va">DOMAIN</span><span class="op">=</span><span class="st">"https://pblog.bt.ht"</span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a><span class="va">TITLE</span><span class="op">=</span><span class="st">"pblog"</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a><span class="va">DESCRIPTION</span><span class="op">=</span><span class="st">"Pandoc static blog generator"</span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="va">COPYRIGHT</span><span class="op">=</span><span class="st">"Copyright 2022, Bradley Taunt"</span></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a><span class="va">AUTHOR</span><span class="op">=</span><span class="st">"brad@bt.ht (Bradley Taunt)"</span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a><span class="va">OS</span><span class="op">=</span><span class="st">"Linux"</span> <span class="co"># "Linux" for Linux, "BSD" for BSD Systems (including MacOS)</span></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a><span class="va">HTML_LANG</span><span class="op">=</span><span class="st">"en_US"</span> <span class="co"># Your document (HTML) language setting</span></span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a><span class="co"># Blog structure settings (most users should use these defaults)</span></span>
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a><span class="co">###################################################################################</span></span>
<span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a><span class="va">TOC</span><span class="op">=</span>true</span>
<span id="cb1-16"><a href="#cb1-16" aria-hidden="true" tabindex="-1"></a><span class="va">SYNTAX</span><span class="op">=</span>true</span>
<span id="cb1-17"><a href="#cb1-17" aria-hidden="true" tabindex="-1"></a><span class="va">PAGES_DIR</span><span class="op">=</span><span class="st">"pages/"</span></span>
<span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a><span class="va">POSTS_DIR</span><span class="op">=</span><span class="st">"posts/"</span></span>
<span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a><span class="va">PAGES</span><span class="op">=</span><span class="va">$(</span><span class="fu">find</span> <span class="va">$PAGES_DIR</span> <span class="at">-type</span> f<span class="va">)</span></span>
<span id="cb1-20"><a href="#cb1-20" aria-hidden="true" tabindex="-1"></a><span class="va">POSTS</span><span class="op">=</span><span class="va">$(</span><span class="fu">find</span> <span class="va">$POSTS_DIR</span> <span class="at">-type</span> f<span class="va">)</span></span>
<span id="cb1-21"><a href="#cb1-21" aria-hidden="true" tabindex="-1"></a><span class="va">WEB_HTML</span><span class="op">=</span><span class="st">"blog/"</span></span>
<span id="cb1-22"><a href="#cb1-22" aria-hidden="true" tabindex="-1"></a><span class="va">OUTPUT</span><span class="op">=</span><span class="st">"_output/"</span></span>
<span id="cb1-23"><a href="#cb1-23" aria-hidden="true" tabindex="-1"></a><span class="va">TIME</span><span class="op">=</span><span class="st">"01:00:00 EST"</span></span>
<span id="cb1-24"><a href="#cb1-24" aria-hidden="true" tabindex="-1"></a><span class="va">TTL</span><span class="op">=</span><span class="st">"60"</span></span></code></pre></div>
<p>Feels cleaner already, right?</p>
<h2 id="cutting-the-build-time-in-half">Cutting the Build Time in Half</h2>
<p>I must give big kudos to <a href="https://matthewgraybosch.com">Matthew Graybosch</a> for inspiring this pretty big improvement. After some discussion over emails we both agreed that it seemed overkill to render the blog content twice (once for the XML feed itself and then again for all posts listed under <code>blog</code>). Performance wasn’t the initial goal when I first launched this project, but now that the dust has settled it seemed appropriate to go back and fix some things.</p>
<p><code>pblog</code> now only needs to render the blog posts found in the <code>posts</code> directory <em>once</em>. It still produces semantic XML and keeps the webview versions of the articles looking solid. Overall I’m pretty happy with this <em>little</em> improvement - it should pretty noticeable on projects rendering many posts.</p>
<h2 id="far-from-perfect">Far From Perfect</h2>
<p>This project is still very much in it’s infancy. So if you notice something odd or broken in your own testing, please don’t hesitate to open a patch or simply bring up the issue!</p>
<p>Thanks for reading,</p>
<p>– Brad</p>
</article><!-- Do not remove this closing article element -->
<!-- Content placed here will appear directly before the closing </body> tag -->
<footer>
<br>
<hr>
<p><small>Powered by <a href="https://pblog.bt.ht">pblog</a><br>
Made with ♥ for a simpler web.</small></p>
</footer>
</body>
</html>
|
