Purge _output and keep fresh for new installs

pull/1/head
Bradley Taunt 4 months ago
parent 46e26dd0b0
commit e356c67dc1
  1. 3
      .gitignore
  2. 82
      _output/blog/community-patch.html
  3. 70
      _output/blog/default-styles.html
  4. 23
      _output/blog/index.html
  5. 180
      _output/blog/pblog-intro.html
  6. 50
      _output/blog/pblog-launch.html
  7. 68
      _output/blog/small-patch.html
  8. 228
      _output/feed.xml
  9. 173
      _output/index.html
  10. 14
      _output/media/pb-sandwich.svg
  11. 66
      _output/rss.xsl
  12. 47
      _output/style.css
  13. 186
      _output/tweaks.html

3
.gitignore vendored

@ -1 +1,2 @@
_output/*
_output/*
.DS_Store

@ -1,82 +0,0 @@
<!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>First Community Patch &amp; &#x201C;Tweaks&#x201D;</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</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>&nbsp;/&nbsp;</span>
<a href="/blog">Blog</a><span>&nbsp;/&nbsp;</span>
<a href="/tweaks.html">Tweaks</a><span>&nbsp;/&nbsp;</span>
<a href="https://codeberg.org/tdarb/pblog">Download</a>
</nav>
<!-- Do not remove this opening article element -->
<article>
<header id="title-block-header">
<h1 class="title">First Community Patch &amp; &#x201C;Tweaks&#x201D;</h1>
<p class="date">Fri, 15 Jul 2022</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#the-changes" id="toc-the-changes">The Changes</a></li>
<li><a href="#some-features-left-behind" id="toc-some-features-left-behind">Some Features Left Behind&#x2026;</a></li>
<li><a href="#introducing-tweaks" id="toc-introducing-tweaks">Introducing &#x201C;Tweaks&#x201D;</a></li>
</ul>
</nav>
<p><code>pblog</code> has received its first community patch! By &#x201C;community&#x201D; I mean someone other than myself has helped make this blog generator even better. So special thanks to <a href="https://matthewgraybosch.com/">Matthew Graybosch</a> for contributing to this humble project and patching in some solid quality of life improvements.</p>
<p>This is why open source is great: smarter people can help fix your mashed-up spaghetti code!</p>
<h3 id="the-changes">The Changes</h3>
<ol type="1">
<li>Both pages and posts now generated <em>Table of Contents</em> by default
<ul>
<li>You have the ability to disable this site-wide in the <code>pblog</code> config</li>
</ul></li>
<li>Ability to disable Pandoc generated syntax highlighting</li>
<li><code>xsltproc</code> will now generate HTML5 and include the RSS feed description under the title
<ul>
<li>See it live on the <a href="/feed.xml">main RSS XML feed</a></li>
</ul></li>
<li>New metadata variable (<code>HTML_LANG</code>) in the <code>pblog.sh</code> config</li>
<li>Generated pages and posts now have &#x201C;Table of Contents&#x201D; by default
<ul>
<li>This can be disabled in individual files with <code>toc: false</code></li>
</ul></li>
<li>Cleaned up redundant find statements</li>
</ol>
<h3 id="some-features-left-behind">Some Features Left Behind&#x2026;</h3>
<p>Also suggested in this patch was the addition of more advanced image manipulation via <code>ImageMagick</code>. This additional feature was pretty great from my testing but I felt as though adding an extra dependency and <em>slightly</em> more complex settings to <code>pblog</code> was moving things further from simplicity.</p>
<p><strong>BUT</strong> - that doesn&#x2019;t mean you can&#x2019;t take this great feature with you!</p>
<h3 id="introducing-tweaks">Introducing &#x201C;Tweaks&#x201D;</h3>
<p>I feel that <code>pblog</code> should always remain as simple as possible at the core. Let people get something up-and-running with the least amount of friction as possible. But I know that some users might want to squeeze just a <em>little</em> bit more out of it. This is where the new <strong>Tweaks</strong> section comes in.</p>
<p>Feel free to check out the <a href="/tweaks.html">official Tweaks page</a> and don&#x2019;t be afraid to add your own by opening a patch-set!</p>
<p>That&#x2019;s all for now, thanks for reading!</p>
<p>&#x2013; 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.xyz">pblog</a><br>
Made with &hearts; for a simpler web.<br>
Peanut butter sandwich illustration by Kate Maldjian from NounProject.com</small></p>
</footer>
</body>
</html>

@ -1,70 +0,0 @@
<!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;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</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>&nbsp;/&nbsp;</span>
<a href="/blog">Blog</a><span>&nbsp;/&nbsp;</span>
<a href="/tweaks.html">Tweaks</a><span>&nbsp;/&nbsp;</span>
<a href="https://codeberg.org/tdarb/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 &#x201C;Theme&#x201D;</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&#x2019;t already obvious, this project has received a minor styling overhaul. But looks weren&#x2019;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 &#x201C;Theme&#x201D;</h2>
<p>The styling changes aren&#x2019;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&#x2019;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>
<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&#x2019;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&#x2019;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&#x2019;s infancy. So if you notice something odd or broken in your own testing, please don&#x2019;t hesitate to open a patch or simply bring up the issue!</p>
<p>Thanks for reading,</p>
<p>&#x2013; 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.xyz">pblog</a><br>
Made with &hearts; for a simpler web.<br>
Peanut butter sandwich illustration by Kate Maldjian from NounProject.com</small></p>
</footer>
</body>
</html>

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" lang="en_US" xml:lang="en_US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pblog.xyz</title><meta name="description" content="Pandoc static blog generator"></meta><meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"></meta><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"></meta><link rel="stylesheet" href="../style.css"></link><style>
header {
border-bottom: 1px solid lightgrey;
margin-bottom: 0;
padding-bottom: 0.5em;
}
header h1 {
margin: 0;
}
header p {
margin: 0 0 0.5em;
}
.date {
display: block;
font-family: monospace;
margin-top: 1em;
overflow: hidden;
white-space: nowrap;
width: 16ch;
}
</style></head><body><header><h1>pblog.xyz</h1><p><i>Pandoc static blog generator</i></p></header><span class="date">Wed, 27 Jul 2022 11:42:04 EDT</span><a href="https://pblog.xyz/blog/default-styles.html"><span>New Default Styling and 2x Faster!</span></a><span class="date">Fri, 15 Jul 2022 11:42:04 EDT</span><a href="https://pblog.xyz/blog/community-patch.html"><span>First Community Patch &amp; “Tweaks”</span></a><span class="date">Fri, 08 Jul 2022 11:42:04 EDT</span><a href="https://pblog.xyz/blog/small-patch.html"><span>Includes, rsync and Variables - Oh My!</span></a><span class="date">Mon, 04 Jul 2022 11:42:04 EDT</span><a href="https://pblog.xyz/blog/pblog-intro.html"><span>Introducing pblog</span></a><span class="date">Thu, 30 Jun 2022 11:42:04 EDT</span><a href="https://pblog.xyz/blog/pblog-launch.html"><span>Announcing pblog</span></a></body></html>

@ -1,180 +0,0 @@
<!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>Introducing pblog</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
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 { } /* 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 { } /* 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 */
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</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>&nbsp;/&nbsp;</span>
<a href="/blog">Blog</a><span>&nbsp;/&nbsp;</span>
<a href="/tweaks.html">Tweaks</a><span>&nbsp;/&nbsp;</span>
<a href="https://codeberg.org/tdarb/pblog">Download</a>
</nav>
<!-- Do not remove this opening article element -->
<article>
<header id="title-block-header">
<h1 class="title">Introducing pblog</h1>
<p class="date">Mon, 04 Jul 2022</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#main-goal" id="toc-main-goal">Main Goal</a></li>
<li><a href="#site-structure" id="toc-site-structure">Site Structure</a></li>
<li><a href="#headers-and-footers" id="toc-headers-and-footers">Headers and Footers</a></li>
<li><a href="#posts-and-pages" id="toc-posts-and-pages">Posts and Pages</a></li>
<li><a href="#the-build-process" id="toc-the-build-process">The Build Process</a></li>
<li><a href="#uploading-to-the-www" id="toc-uploading-to-the-www">Uploading to the WWW</a></li>
<li><a href="#wrapping-up" id="toc-wrapping-up">Wrapping Up</a></li>
</ul>
</nav>
<p>This article is a <em>living document</em>. It will always have the most up-to-date information on getting started with <code>pblog</code>.</p>
<p><strong>Last Updated</strong>: July 27, 2022</p>
<hr />
<p>Although this project was already <a href="/blog/pblog-launch.html">announced</a> a couple days ago, I thought it might be best to actually breakdown <code>pblog</code> into greater detail.</p>
<p>Enough chit-chat, let&#x2019;s get into it!</p>
<h3 id="main-goal">Main Goal</h3>
<p>The entire purpose of <code>pblog</code> is to be as bare-bones as possible, while still maintaining a pleasant writing workflow. Users write their posts and pages in Markdown - <em>pblog</em> handles everything else:</p>
<ul>
<li>Posts and pages generated via Pandoc with minimal CSS</li>
<li>RSS feed at <code>feed.xml</code></li>
<li>Generated blog listing at <code>blog/index.html</code></li>
<li>Browser-styled XML (in supported browsers)</li>
</ul>
<h3 id="site-structure">Site Structure</h3>
<p>After you&#x2019;ve cloned the <a href="https://codeberg.org/tdarb/pblog">official pblog repo on Codeberg</a>, the next thing you should do is edit the main <code>_config.sh</code> file in the root directory. This will give you a better understanding of how everything is built.</p>
<p>Once generated, <em>pblog</em> structures the final website files as such:</p>
<pre class="shell"><code>_output/
|__blog/
|__index.html
|__blog-post-example.html
|__media/
|__feed.xml
|__index.html
|__rss.xsl
|__style.css</code></pre>
<p>This structure is completely customizable by simply editing the <code>pblog.sh</code> file (if you so desire).</p>
<h3 id="headers-and-footers">Headers and Footers</h3>
<p>By default <code>pblog</code> will add the header and footer includes to every individual post and page. To edit these, simply open the <code>_header.html</code> and <code>_footer.html</code> files respectively.</p>
<p><strong>Important</strong>: To avoid rendering issues DO NOT remove the included <code>article</code> opening and closing tags within those files. Everything else you can edit, remove, etc.</p>
<h3 id="posts-and-pages">Posts and Pages</h3>
<p>Posts and pages are written via Markdown inside the <code>posts</code> and <code>pages</code> folders respectively.</p>
<p>Individual posts require the following headers (take note of the date format):</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="pp">---</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="fu">title</span><span class="kw">:</span><span class="at"> Blog Title</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="fu">date</span><span class="kw">:</span><span class="at"> Mon, 04 Jul 2022</span></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="pp">---</span></span></code></pre></div>
<p>while individual pages only require a <code>title</code>:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="pp">---</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="fu">title</span><span class="kw">:</span><span class="at"> Page Title</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="pp">---</span></span></code></pre></div>
<p>This makes for an easier switch over from other SSG platforms like Jekyll or Hugo.</p>
<h3 id="the-build-process">The Build Process</h3>
<p>The main variables at the top of the <code>pblog.sh</code> file need to edited with your own details before generating your website. Those variables are fairly self-explanatory and simple to edit.</p>
<p>All you need to do now is run <code>make</code> (or <code>make serve</code> if you&#x2019;re looking to test locally) and you&#x2019;re done. Your website should now be fully generated inside the include <code>_output</code> directory. For quick reference:</p>
<ol type="1">
<li><em>pblog</em> converts your Markdown posts into two variations of HTML
<ul>
<li>One is used specifically for rendering itself inside the RSS feed</li>
<li>The other is used for linking in a browser</li>
</ul></li>
<li>Next, <em>pblog</em> converts your Markdown pages into HTML</li>
<li>All of these generated HTML files are then moved to the <code>_output</code> folder</li>
</ol>
<p><em>pblog</em> is also smart enough to automatically generate a main blog list directory for you. This <code>index.html</code> file is placed inside the <code>_output/blog</code> folder on build. You can see an example of the blog list <a href="/blog">on this very website</a>.</p>
<h3 id="uploading-to-the-www">Uploading to the WWW</h3>
<p>Those with more experience will probably lean towards using a utility like <code>rsync</code> to sync the contents of their <code>_output</code> folder with their web server. For those with less experience, I recommend using something like <a href="https://app.netlify.com/drop">Netlify Drop</a> to make things as friction-less as possible.</p>
<h3 id="wrapping-up">Wrapping Up</h3>
<p>There isn&#x2019;t much else to say. <code>pblog</code> is as static or flexible as you chose it to be. If you have any ideas on how to improve things or come across any bugs, please <a href="https://codeberg.org/tdarb/pblog">open a ticket or PR on the official repo</a>.</p>
<p>Thanks and happy blogging with <em>pblog</em>!</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.xyz">pblog</a><br>
Made with &hearts; for a simpler web.<br>
Peanut butter sandwich illustration by Kate Maldjian from NounProject.com</small></p>
</footer>
</body>
</html>

@ -1,50 +0,0 @@
<!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>Announcing pblog</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</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>&nbsp;/&nbsp;</span>
<a href="/blog">Blog</a><span>&nbsp;/&nbsp;</span>
<a href="/tweaks.html">Tweaks</a><span>&nbsp;/&nbsp;</span>
<a href="https://codeberg.org/tdarb/pblog">Download</a>
</nav>
<!-- Do not remove this opening article element -->
<article>
<header id="title-block-header">
<h1 class="title">Announcing pblog</h1>
<p class="date">Thu, 30 Jun 2022</p>
</header>
<p>It&#x2019;s time to celebrate! The official launch of <code>pblog</code> happened today.</p>
<p>There isn&#x2019;t much else to say. All details and instructions on how to start your own pblog can be found on the <a href="https://pblog.xyz">main homepage for this project</a>.</p>
<p>Thanks for reading!</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.xyz">pblog</a><br>
Made with &hearts; for a simpler web.<br>
Peanut butter sandwich illustration by Kate Maldjian from NounProject.com</small></p>
</footer>
</body>
</html>

@ -1,68 +0,0 @@
<!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>Includes, rsync and Variables - Oh My!</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</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>&nbsp;/&nbsp;</span>
<a href="/blog">Blog</a><span>&nbsp;/&nbsp;</span>
<a href="/tweaks.html">Tweaks</a><span>&nbsp;/&nbsp;</span>
<a href="https://codeberg.org/tdarb/pblog">Download</a>
</nav>
<!-- Do not remove this opening article element -->
<article>
<header id="title-block-header">
<h1 class="title">Includes, rsync and Variables - Oh My!</h1>
<p class="date">Fri, 08 Jul 2022</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#default-header-footer-includes" id="toc-default-header-footer-includes">Default &#x201C;header&#x201D; &amp; &#x201C;footer&#x201D; Includes</a></li>
<li><a href="#syncing-changes-with-rsync" id="toc-syncing-changes-with-rsync">Syncing Changes with rsync</a></li>
<li><a href="#on-the-horizon" id="toc-on-the-horizon">On the Horizon&#x2026;</a></li>
</ul>
</nav>
<p>Even though <code>pblog</code> was just launched a week ago, it has since been updated with some nice quality-of-life improvements.</p>
<h3 id="default-header-footer-includes">Default &#x201C;header&#x201D; &amp; &#x201C;footer&#x201D; Includes</h3>
<p>A new variable was added to the main <code>pblog.sh</code> configuration file called <code>INC_HEAD_FOOT</code>. By default this is set to <code>true</code> and simply pulls in two HTML files:</p>
<ul>
<li><code>_header.html</code>: all content within is placed directly after the opening <code>body</code> tag</li>
<li><code>_footer.html</code>: all content within is placed directly before the closing <code>body</code> tag</li>
</ul>
<p>These includes are added to every outputted file from inside both the <code>posts</code> and <code>pages</code> directories on build.</p>
<h3 id="syncing-changes-with-rsync">Syncing Changes with rsync</h3>
<p>Although it adds another dependency to the project, I believe utilizing <code>rsync</code> for the generated files is far better then nuking the directory from orbit each time. This also provides a cleaner experience for users syncing their <code>_output</code> directory with their web server of choice.</p>
<h3 id="on-the-horizon">On the Horizon&#x2026;</h3>
<p>My plan was to also tackle the issue of &#x201C;auto rebuilds&#x201D; when running <code>pblog</code> locally. This became more of a headache than I initially estimated - so it was dropped from this patch. My hope is to get something up-and-running in the near future, while avoiding the inclusion of yet another major dependency. Anyone more experienced than myself in the ways of &#x201C;auto rebuilds&#x201D; is free to open a patch if they so desire!</p>
<p>Thanks for your interest in these minor updates!</p>
<p>P.S. Don&#x2019;t forget - if your website runs on <code>pblog</code> be sure to reach out and get it featured on the <a href="/">homepage</a>!</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.xyz">pblog</a><br>
Made with &hearts; for a simpler web.<br>
Peanut butter sandwich illustration by Kate Maldjian from NounProject.com</small></p>
</footer>
</body>
</html>

@ -1,228 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet href="rss.xsl" type="text/xsl"?>
<rss version="2.0">
<channel>
<title>pblog.xyz</title>
<link>https://pblog.xyz</link>
<description>Pandoc static blog generator</description>
<copyright>Copyright 2022, Bradley Taunt</copyright>
<ttl>60</ttl>
<item>
<pubDate>Fri, 15 Jul 2022 11:42:04 EDT</pubDate>
<category>2022/07/15/5</category>
<title>First Community Patch &amp; &#x201C;Tweaks&#x201D;</title>
<link>https://pblog.xyz/blog/community-patch.html</link>
<description><![CDATA[
<header id="title-block-header">
<h1 class="title">First Community Patch &amp; &#x201C;Tweaks&#x201D;</h1>
<p class="date">Fri, 15 Jul 2022</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#the-changes" id="toc-the-changes">The Changes</a></li>
<li><a href="#some-features-left-behind" id="toc-some-features-left-behind">Some Features Left Behind&#x2026;</a></li>
<li><a href="#introducing-tweaks" id="toc-introducing-tweaks">Introducing &#x201C;Tweaks&#x201D;</a></li>
</ul>
</nav>
<p><code>pblog</code> has received its first community patch! By &#x201C;community&#x201D; I mean someone other than myself has helped make this blog generator even better. So special thanks to <a href="https://matthewgraybosch.com/">Matthew Graybosch</a> for contributing to this humble project and patching in some solid quality of life improvements.</p>
<p>This is why open source is great: smarter people can help fix your mashed-up spaghetti code!</p>
<h3 id="the-changes">The Changes</h3>
<ol type="1">
<li>Both pages and posts now generated <em>Table of Contents</em> by default
<ul>
<li>You have the ability to disable this site-wide in the <code>pblog</code> config</li>
</ul></li>
<li>Ability to disable Pandoc generated syntax highlighting</li>
<li><code>xsltproc</code> will now generate HTML5 and include the RSS feed description under the title
<ul>
<li>See it live on the <a href="/feed.xml">main RSS XML feed</a></li>
</ul></li>
<li>New metadata variable (<code>HTML_LANG</code>) in the <code>pblog.sh</code> config</li>
<li>Generated pages and posts now have &#x201C;Table of Contents&#x201D; by default
<ul>
<li>This can be disabled in individual files with <code>toc: false</code></li>
</ul></li>
<li>Cleaned up redundant find statements</li>
</ol>
<h3 id="some-features-left-behind">Some Features Left Behind&#x2026;</h3>
<p>Also suggested in this patch was the addition of more advanced image manipulation via <code>ImageMagick</code>. This additional feature was pretty great from my testing but I felt as though adding an extra dependency and <em>slightly</em> more complex settings to <code>pblog</code> was moving things further from simplicity.</p>
<p><strong>BUT</strong> - that doesn&#x2019;t mean you can&#x2019;t take this great feature with you!</p>
<h3 id="introducing-tweaks">Introducing &#x201C;Tweaks&#x201D;</h3>
<p>I feel that <code>pblog</code> should always remain as simple as possible at the core. Let people get something up-and-running with the least amount of friction as possible. But I know that some users might want to squeeze just a <em>little</em> bit more out of it. This is where the new <strong>Tweaks</strong> section comes in.</p>
<p>Feel free to check out the <a href="/tweaks.html">official Tweaks page</a> and don&#x2019;t be afraid to add your own by opening a patch-set!</p>
<p>That&#x2019;s all for now, thanks for reading!</p>
<p>&#x2013; Brad</p>]]></description>
<author>hello@tdarb.org (Bradley Taunt)</author>
<guid>https://pblog.xyz/blog/community-patch.html</guid>
</item>
<item>
<pubDate>Wed, 27 Jul 2022 11:42:04 EDT</pubDate>
<category>2022/07/27/3</category>
<title>New Default Styling and 2x Faster!</title>
<link>https://pblog.xyz/blog/default-styles.html</link>
<description><![CDATA[
<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 &#x201C;Theme&#x201D;</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&#x2019;t already obvious, this project has received a minor styling overhaul. But looks weren&#x2019;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 &#x201C;Theme&#x201D;</h2>
<p>The styling changes aren&#x2019;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&#x2019;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>
<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&#x2019;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&#x2019;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&#x2019;s infancy. So if you notice something odd or broken in your own testing, please don&#x2019;t hesitate to open a patch or simply bring up the issue!</p>
<p>Thanks for reading,</p>
<p>&#x2013; Brad</p>]]></description>
<author>hello@tdarb.org (Bradley Taunt)</author>
<guid>https://pblog.xyz/blog/default-styles.html</guid>
</item>
<item>
<pubDate>Mon, 04 Jul 2022 11:42:04 EDT</pubDate>
<category>2022/07/04/1</category>
<title>Introducing pblog</title>
<link>https://pblog.xyz/blog/pblog-intro.html</link>
<description><![CDATA[
<header id="title-block-header">
<h1 class="title">Introducing pblog</h1>
<p class="date">Mon, 04 Jul 2022</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#main-goal" id="toc-main-goal">Main Goal</a></li>
<li><a href="#site-structure" id="toc-site-structure">Site Structure</a></li>
<li><a href="#headers-and-footers" id="toc-headers-and-footers">Headers and Footers</a></li>
<li><a href="#posts-and-pages" id="toc-posts-and-pages">Posts and Pages</a></li>
<li><a href="#the-build-process" id="toc-the-build-process">The Build Process</a></li>
<li><a href="#uploading-to-the-www" id="toc-uploading-to-the-www">Uploading to the WWW</a></li>
<li><a href="#wrapping-up" id="toc-wrapping-up">Wrapping Up</a></li>
</ul>
</nav>
<p>This article is a <em>living document</em>. It will always have the most up-to-date information on getting started with <code>pblog</code>.</p>
<p><strong>Last Updated</strong>: July 27, 2022</p>
<hr />
<p>Although this project was already <a href="/blog/pblog-launch.html">announced</a> a couple days ago, I thought it might be best to actually breakdown <code>pblog</code> into greater detail.</p>
<p>Enough chit-chat, let&#x2019;s get into it!</p>
<h3 id="main-goal">Main Goal</h3>
<p>The entire purpose of <code>pblog</code> is to be as bare-bones as possible, while still maintaining a pleasant writing workflow. Users write their posts and pages in Markdown - <em>pblog</em> handles everything else:</p>
<ul>
<li>Posts and pages generated via Pandoc with minimal CSS</li>
<li>RSS feed at <code>feed.xml</code></li>
<li>Generated blog listing at <code>blog/index.html</code></li>
<li>Browser-styled XML (in supported browsers)</li>
</ul>
<h3 id="site-structure">Site Structure</h3>
<p>After you&#x2019;ve cloned the <a href="https://codeberg.org/tdarb/pblog">official pblog repo on Codeberg</a>, the next thing you should do is edit the main <code>_config.sh</code> file in the root directory. This will give you a better understanding of how everything is built.</p>
<p>Once generated, <em>pblog</em> structures the final website files as such:</p>
<pre class="shell"><code>_output/
|__blog/
|__index.html
|__blog-post-example.html
|__media/
|__feed.xml
|__index.html
|__rss.xsl
|__style.css</code></pre>
<p>This structure is completely customizable by simply editing the <code>pblog.sh</code> file (if you so desire).</p>
<h3 id="headers-and-footers">Headers and Footers</h3>
<p>By default <code>pblog</code> will add the header and footer includes to every individual post and page. To edit these, simply open the <code>_header.html</code> and <code>_footer.html</code> files respectively.</p>
<p><strong>Important</strong>: To avoid rendering issues DO NOT remove the included <code>article</code> opening and closing tags within those files. Everything else you can edit, remove, etc.</p>
<h3 id="posts-and-pages">Posts and Pages</h3>
<p>Posts and pages are written via Markdown inside the <code>posts</code> and <code>pages</code> folders respectively.</p>
<p>Individual posts require the following headers (take note of the date format):</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="pp">---</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="fu">title</span><span class="kw">:</span><span class="at"> Blog Title</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="fu">date</span><span class="kw">:</span><span class="at"> Mon, 04 Jul 2022</span></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="pp">---</span></span></code></pre></div>
<p>while individual pages only require a <code>title</code>:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="pp">---</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="fu">title</span><span class="kw">:</span><span class="at"> Page Title</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="pp">---</span></span></code></pre></div>
<p>This makes for an easier switch over from other SSG platforms like Jekyll or Hugo.</p>
<h3 id="the-build-process">The Build Process</h3>
<p>The main variables at the top of the <code>pblog.sh</code> file need to edited with your own details before generating your website. Those variables are fairly self-explanatory and simple to edit.</p>
<p>All you need to do now is run <code>make</code> (or <code>make serve</code> if you&#x2019;re looking to test locally) and you&#x2019;re done. Your website should now be fully generated inside the include <code>_output</code> directory. For quick reference:</p>
<ol type="1">
<li><em>pblog</em> converts your Markdown posts into two variations of HTML
<ul>
<li>One is used specifically for rendering itself inside the RSS feed</li>
<li>The other is used for linking in a browser</li>
</ul></li>
<li>Next, <em>pblog</em> converts your Markdown pages into HTML</li>
<li>All of these generated HTML files are then moved to the <code>_output</code> folder</li>
</ol>
<p><em>pblog</em> is also smart enough to automatically generate a main blog list directory for you. This <code>index.html</code> file is placed inside the <code>_output/blog</code> folder on build. You can see an example of the blog list <a href="/blog">on this very website</a>.</p>
<h3 id="uploading-to-the-www">Uploading to the WWW</h3>
<p>Those with more experience will probably lean towards using a utility like <code>rsync</code> to sync the contents of their <code>_output</code> folder with their web server. For those with less experience, I recommend using something like <a href="https://app.netlify.com/drop">Netlify Drop</a> to make things as friction-less as possible.</p>
<h3 id="wrapping-up">Wrapping Up</h3>
<p>There isn&#x2019;t much else to say. <code>pblog</code> is as static or flexible as you chose it to be. If you have any ideas on how to improve things or come across any bugs, please <a href="https://codeberg.org/tdarb/pblog">open a ticket or PR on the official repo</a>.</p>
<p>Thanks and happy blogging with <em>pblog</em>!</p>]]></description>
<author>hello@tdarb.org (Bradley Taunt)</author>
<guid>https://pblog.xyz/blog/pblog-intro.html</guid>
</item>
<item>
<pubDate>Thu, 30 Jun 2022 11:42:04 EDT</pubDate>
<category>2022/06/30/4</category>
<title>Announcing pblog</title>
<link>https://pblog.xyz/blog/pblog-launch.html</link>
<description><![CDATA[
<header id="title-block-header">
<h1 class="title">Announcing pblog</h1>
<p class="date">Thu, 30 Jun 2022</p>
</header>
<p>It&#x2019;s time to celebrate! The official launch of <code>pblog</code> happened today.</p>
<p>There isn&#x2019;t much else to say. All details and instructions on how to start your own pblog can be found on the <a href="https://pblog.xyz">main homepage for this project</a>.</p>
<p>Thanks for reading!</p>]]></description>
<author>hello@tdarb.org (Bradley Taunt)</author>
<guid>https://pblog.xyz/blog/pblog-launch.html</guid>
</item>
<item>
<pubDate>Fri, 08 Jul 2022 11:42:04 EDT</pubDate>
<category>2022/07/08/5</category>
<title>Includes, rsync and Variables - Oh My!</title>
<link>https://pblog.xyz/blog/small-patch.html</link>
<description><![CDATA[
<header id="title-block-header">
<h1 class="title">Includes, rsync and Variables - Oh My!</h1>
<p class="date">Fri, 08 Jul 2022</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#default-header-footer-includes" id="toc-default-header-footer-includes">Default &#x201C;header&#x201D; &amp; &#x201C;footer&#x201D; Includes</a></li>
<li><a href="#syncing-changes-with-rsync" id="toc-syncing-changes-with-rsync">Syncing Changes with rsync</a></li>
<li><a href="#on-the-horizon" id="toc-on-the-horizon">On the Horizon&#x2026;</a></li>
</ul>
</nav>
<p>Even though <code>pblog</code> was just launched a week ago, it has since been updated with some nice quality-of-life improvements.</p>
<h3 id="default-header-footer-includes">Default &#x201C;header&#x201D; &amp; &#x201C;footer&#x201D; Includes</h3>
<p>A new variable was added to the main <code>pblog.sh</code> configuration file called <code>INC_HEAD_FOOT</code>. By default this is set to <code>true</code> and simply pulls in two HTML files:</p>
<ul>
<li><code>_header.html</code>: all content within is placed directly after the opening <code>body</code> tag</li>
<li><code>_footer.html</code>: all content within is placed directly before the closing <code>body</code> tag</li>
</ul>
<p>These includes are added to every outputted file from inside both the <code>posts</code> and <code>pages</code> directories on build.</p>
<h3 id="syncing-changes-with-rsync">Syncing Changes with rsync</h3>
<p>Although it adds another dependency to the project, I believe utilizing <code>rsync</code> for the generated files is far better then nuking the directory from orbit each time. This also provides a cleaner experience for users syncing their <code>_output</code> directory with their web server of choice.</p>
<h3 id="on-the-horizon">On the Horizon&#x2026;</h3>
<p>My plan was to also tackle the issue of &#x201C;auto rebuilds&#x201D; when running <code>pblog</code> locally. This became more of a headache than I initially estimated - so it was dropped from this patch. My hope is to get something up-and-running in the near future, while avoiding the inclusion of yet another major dependency. Anyone more experienced than myself in the ways of &#x201C;auto rebuilds&#x201D; is free to open a patch if they so desire!</p>
<p>Thanks for your interest in these minor updates!</p>
<p>P.S. Don&#x2019;t forget - if your website runs on <code>pblog</code> be sure to reach out and get it featured on the <a href="/">homepage</a>!</p>]]></description>
<author>hello@tdarb.org (Bradley Taunt)</author>
<guid>https://pblog.xyz/blog/small-patch.html</guid>
</item>
</channel>
</rss>

@ -1,173 +0,0 @@
<!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>pblog.xyz</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
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 { } /* 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 { } /* 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 */
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</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>&nbsp;/&nbsp;</span>
<a href="/blog">Blog</a><span>&nbsp;/&nbsp;</span>
<a href="/tweaks.html">Tweaks</a><span>&nbsp;/&nbsp;</span>
<a href="https://codeberg.org/tdarb/pblog">Download</a>
</nav>
<!-- Do not remove this opening article element -->
<article>
<header id="title-block-header">
<h1 class="title">pblog.xyz</h1>
</header>
<p><img style="max-width:200px;" src="/media/pb-sandwich.svg" alt="Peanut butter sandwich"></p>
<h2 id="pandoc-static-blog-generator">Pandoc static blog generator</h2>
<p><code>pblog</code> comes packed with an incredible list of features:</p>
<ul>
<li>5-second configuration</li>
<li>Write all your posts and pages in Markdown</li>
<li>Valid RSS 2.0 feed (customized design too!)</li>
</ul>
<p>and it also <em>doesn&#x2019;t</em> ship with a lot of other features:</p>
<ul>
<li>No advanced template layouts</li>
<li>No themes</li>
<li>No categories / tagging systems</li>
<li>No comments</li>
<li>No auto rebuilds for local testing</li>
</ul>
<p>But you can add these things yourself with a little know-how and patience! The goal of <code>pblog</code> is to remain as bare-bones as possible, so these &#x201C;extras&#x201D; are left out intentionally.</p>
<h2 id="live-demo">Live Demo</h2>
<p>This very website is a live demo! Mind blowing, right? Take a look at the <a href="/blog">automated blog list</a> to see some blog posts.</p>
<h2 id="requirements">Requirements</h2>
<h4 id="on-macos-bsd-systems">On MacOS / BSD Systems</h4>
<ul>
<li><a href="https://linux.die.net/man/1/rsync">rsync</a></li>
<li><a href="https://www.gnu.org/software/coreutils/">coreutils</a></li>
<li><a href="http://xmlsoft.org/xslt/xsltproc.html">xsltproc</a></li>
<li><a href="https://pandoc.org/installing.html">Pandoc</a></li>
</ul>
<h4 id="on-linux">On Linux</h4>
<ul>
<li><a href="https://linux.die.net/man/1/rsync">rsync</a></li>
<li><a href="http://xmlsoft.org/xslt/xsltproc.html">xsltproc</a></li>
<li><a href="https://pandoc.org/installing.html">Pandoc</a></li>
</ul>
<h2 id="getting-started">Getting Started</h2>
<ol type="1">
<li>Clone the project repo: <a href="https://codeberg.org/tdarb/pblog">https://codeberg.org/tdarb/pblog</a></li>
<li>Edit the variables at the top of the <code>pblog.sh</code> file</li>
<li><strong>!! Pay close attention to the <code>OS</code> variable to set your correct operating system !!</strong></li>
<li>Edit the posts in <code>posts</code> and pages in <code>pages</code> to your own</li>
<li>Run <code>make</code> from the root directory</li>
<li>Upload the contents of the <code>_output</code> folder to your server</li>
<li>Profit!!!</li>
</ol>
<p>For a more in-depth look, take a look at the article <a href="/blog/pblog-intro.html">Introducing pblog</a></p>
<h2 id="base-settings">Base Settings</h2>
<h4 id="table-of-contents">Table of Contents</h4>
<p>By default <code>pblog</code> ships with TOC (Table of Contents) enabled. You can disable this on each individual page or post by editing the <code>TOC</code>variable in <code>pblog.sh</code> to <code>false</code>:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="fu">TOC</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span></code></pre></div>
<h4 id="code-highlighting">Code Highlighting</h4>
<p><code>pblog</code> uses the standard syntax highlighting provided with Pandoc. To disable this, set the <code>SYNTAX</code> variable to <code>false</code> in <code>pblog.sh</code>:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="fu">SYNTAX</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span></code></pre></div>
<h2 id="extras">Extras</h2>
<ul>
<li>Add all media files (images, videos, etc.) under the <code>media</code> folder</li>
<li>Customize the look of your blog by editing the included <code>style.css</code></li>
<li>Looking for fancier <em>image manipulation</em>? Take a look at <a href="/tweaks.html">this detailed post to get setup</a></li>
</ul>
<h2 id="sites-built-with-pblog">Sites built with pblog</h2>
<ul>
<li><a href="https://tdarb.org">tdarb.org</a></li>
<li><a href="https://matthewgraybosch.com">matthewgraybosch.com</a></li>
</ul>
<p>You can share your <strong>pblog</strong> websites by emailing me at the address listed below and I&#x2019;ll add them here.</p>
<p>hello at tdarb {dot} org</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.xyz">pblog</a><br>
Made with &hearts; for a simpler web.<br>
Peanut butter sandwich illustration by Kate Maldjian from NounProject.com</small></p>
</footer>
</body>
</html>

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="371px" height="398px" viewBox="0 0 371 398" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>pb-sandwich</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="pb-sandwich" fill="#000000" fill-rule="nonzero">
<path d="M350.7,5.383 C351.09844,9.5197 351.09844,13.6877 350.7,17.828 C347.3875,32.64 347.3875,48 350.7,62.812 C354.2469,78.867 350.07891,96.476 350.7,113.335 C352.3172,150.171 354.3094,186.944 357.3562,223.715 C360.9031,266.09 365.8171,308.336 369.8012,350.645 C371.4184,367.571 367.5629,373.481 350.0162,375.536 C323.6332,379.0204 297.0042,380.8251 270.4962,383.4383 C247.3482,385.6766 224.2032,387.7313 201.1172,390.4071 C152.0232,396.1298 102.9292,400.3016 53.5272,395.5087 L53.523294,395.5087 C43.921694,394.60245 34.410294,392.8954 25.089294,390.4071 C21.257294,389.48913 17.850994,387.2938 15.433094,384.1844 C13.011194,381.075 11.722194,377.2352 11.772894,373.2934 C8.038494,309.9494 3.558094,246.6134 0.448795971,183.2034 L0.448795971,183.207306 C0.437175,165.074306 1.476194,146.957306 3.558294,128.949306 C4.366884,116.816306 9.780994,104.433306 1.194994,92.922306 C0.464524,91.363706 0.464524,89.562906 1.194994,88.004306 C7.417694,74.254306 4.058294,60.254306 2.999694,46.192306 C1.816094,29.954306 2.999694,27.524306 19.675694,24.665306 C50.784694,19.438706 82.331694,14.337306 113.941694,11.286306 C160.734694,6.743306 207.711694,3.196506 254.691694,0.958306 C280.636694,-0.287794 306.769694,1.891896 332.843694,2.825506 C338.835894,3.360666 344.796694,4.212206 350.702694,5.376306 L350.7,5.383 Z M16.88,95.668 C14.3292,126.406 11.0323,153.41 10.2238,180.477 C9.47771,205.368 11.03239,230.254 12.4621,255.145 C14.5168,290.301 17.5637,325.333 19.8059,360.425 C21.1731,382.077 21.6106,383.073 42.7039,386.495 L42.7039,386.491094 C51.075,388.069194 59.5709,388.901294 68.0909,388.979394 C101.5679,388.358304 135.0399,388.295804 168.3909,385.807494 C208.5239,382.819194 248.4689,377.409094 288.5409,373.362494 C306.5839,371.495294 324.7559,370.686694 342.7989,368.569494 C358.7909,366.702294 361.4669,363.530394 360.2829,347.788494 C359.0368,330.241494 356.486,312.819494 355.1188,295.335494 C350.4704,235.976494 345.9508,176.615494 341.5528,117.255494 C340.61921,104.376494 340.1856,91.493494 339.4981,77.435494 L339.502006,77.435494 C332.916106,76.345694 326.260006,75.744094 319.588006,75.630794 C218.978006,82.161994 118.428006,88.880794 16.878006,95.665794 L16.88,95.668 Z M340.43,14.777 C294.387,1.898 48.98,20.0036 11.96,39.168 L15.1944,67.168 C35.4794,70.7774 316.9044,48.5 336.0144,41.781 L340.43,14.777 Z M13.64,81.105 L14.19859,87.3277 L339.99859,63.2497 C337.84629,60.3435 334.89309,58.1247 331.50249,56.8669 C328.10799,55.6052 324.42439,55.3591 320.89749,56.15596 C268.87749,60.38646 216.85749,64.67936 164.84749,68.60096 C119.61349,72.08536 74.31249,74.82366 29.01749,78.49546 C23.91589,78.554054 18.81449,80.17126 13.65049,81.10486 L13.64,81.105 Z" id="Shape"></path>
<path d="M311.19,175.31 C309.9361,185.705 307.858,195.982 304.9673,206.048 C292.5223,238.466 293.7683,271.63 297.3775,305.107 C299.3697,323.775 299.3697,325.392 281.3225,330.431 C263.2795,335.4701 245.8575,337.7748 228.1235,341.693 L228.1235,341.689094 C200.4515,347.747694 172.1195,350.255494 143.8115,349.157894 C127.9995,348.888364 112.1905,350.052424 96.5845,352.642294 C82.8345,354.696994 74.4325,345.177494 64.6625,339.513294 C60.8031,337.274994 60.6195,327.443294 59.9945,320.845294 C56.7601,285.318294 54.4554,249.661294 50.6625,214.195294 L50.666407,214.195294 C48.623407,204.316394 45.318707,194.738294 40.834407,185.699294 C38.967207,180.968794 35.795307,176.800894 33.990607,172.074294 L33.990607,172.070388 C29.275807,161.632388 29.545307,149.625388 34.721077,139.406388 C39.892977,129.191388 49.416077,121.871388 60.619077,119.492388 C78.041077,114.824388 95.650077,110.656488 113.135077,106.176388 L113.135077,106.180294 C136.412077,99.813094 161.287077,103.324794 181.893077,115.887294 C191.850077,122.109994 198.506077,120.492794 208.088077,115.512294 C221.037077,108.574794 234.904077,103.504294 249.279077,100.453294 C275.912077,95.351694 301.236077,105.058794 307.209077,140.215294 C309.134877,152.160294 309.943477,164.106294 311.19,175.309294 L311.19,175.31 Z M105.11,340.32051 C141.758,338.6403 176.231,343.3708 210.52,335.2809 C231.489,330.3043 252.958,327.7536 273.985,322.8359 C288.11,319.6015 288.981,316.9882 288.047,302.3629 C287.11341,287.7419 286.3673,272.9329 285.1212,258.2459 L285.125106,258.249806 C283.812606,244.667806 285.687606,230.968806 290.597806,218.241806 C294.121206,208.644106 296.785306,198.753806 298.562606,188.682806 C302.175906,171.385806 301.816506,153.491806 297.507906,136.354806 C296.195406,128.405606 291.984506,121.225806 285.687906,116.202806 C279.387106,111.179406 271.449906,108.671606 263.410906,109.163706 C257.090606,108.831676 250.765906,109.655896 244.742906,111.589506 C232.437906,115.761406 220.512906,120.964506 209.090906,127.148506 C199.258906,132.750106 192.039906,135.300806 181.961906,126.652416 L181.961906,126.64851 C170.371906,117.17191 155.731906,112.24251 140.770906,112.77351 C119.067906,112.714916 97.688906,118.03521 78.547906,128.26551 C65.106906,135.54671 63.801906,139.96451 69.278406,154.58551 C75.501106,171.01151 82.344406,187.19051 87.946406,203.92951 L87.9425,203.92951 C92.1066,216.26951 94.962,229.01151 96.4659,241.94551 C98.7667,265.09351 99.0792,288.36351 100.6964,311.57051 C101.3839,321.21891 103.3722,330.17951 105.1144,340.32051 L105.11,340.32051 Z M65.102,202.19 L60.934,202.565 L70.3285,303.305 C70.141,269.453 76.7387,234.981 64.9144,202.255 L65.102,202.19 Z M42.891,145.69 C38.2855,163.362 42.33241,174.811 54.278,184.827 L42.891,145.69 Z M86.446,337.83 C88.8093,324.701 88.8093,324.701 84.4538,320.096 C84.0788,321.09209 83.2702,322.1507 83.3952,323.0843 C84.39129,328.0648 85.5124,332.9202 86.446,337.8343 L86.446,337.83 Z" id="Shape"></path>
<path d="M243.74,152.66 C232.103,174.004 220.283,194.91 207.963,217.746 C199.6271,207.8515 205.3497,202.937 207.963,198.144 C231.483,154.835 231.545,154.835 243.74,152.66 Z" id="Path"></path>
<path d="M237.02,219.43 C230.7973,214.0784 233.7231,209.352 235.4653,205.055 C244.8598,182.157 254.5673,167.035 262.2193,163.117 C263.7115,173.137 251.1453,201.574 237.0203,219.429 L237.02,219.43 Z" id="Path"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 6.4 KiB

@ -1,66 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.1" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
<xsl:output method="html" doctype-system="about:legacy-compat" version="1.0" encoding="UTF-8" indent="yes" />
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
<title>
<xsl:value-of select="/rss/channel/title" />
</title>
<meta name="description">
<xsl:attribute name="content">
<xsl:value-of select="/rss/channel/description" />
</xsl:attribute>
</meta>
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no" />
<link rel="stylesheet" href="../style.css" />
<style>
header {
border-bottom: 1px solid lightgrey;
margin-bottom: 0;
padding-bottom: 0.5em;
}
header h1 {
margin: 0;
}
header p {
margin: 0 0 0.5em;
}
.date {
display: block;
font-family: monospace;
margin-top: 1em;
overflow: hidden;
white-space: nowrap;
width: 16ch;
}
</style>
</head>
<body>
<header>
<h1><xsl:value-of select="/rss/channel/title" /></h1>
<p>
<i><xsl:value-of select="/rss/channel/description" /></i>
</p>
</header>
<xsl:for-each select="/rss/channel/item">
<xsl:sort select="category" order="descending" />
<span class="date">
<xsl:value-of select="pubDate" />
</span>
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="link" />
</xsl:attribute>
<span>
<xsl:value-of select="title" />
</span>
</xsl:element>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

@ -1,47 +0,0 @@
html {
background:#f9f9f9;
}
body {
background: #fff;
border: 1px solid lightgrey;
margin: 1em auto;
max-width: 75ch;
padding: 10px;
line-height: 1.4;
}
p code, li code {
border: 1px solid brown;
border-radius: 2px;
color: brown;
padding: 1px 2px;
}
img {
height: auto;
max-width: 100%;
}
pre {
background: #f9f9f9;
border: 1px solid lightgrey;
padding: 5px;
}
#TOC {
border: 1px solid;
position: relative;
}
#TOC:before {
border-bottom: 1px solid;
content: 'Table of Contents';
display: block;
font-weight: bold;
padding: 5px;
position: relative;
}
.date {
color: grey;
}

@ -1,186 +0,0 @@
<!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>Tweaks</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
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 { } /* 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 { } /* 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 */
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</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>&nbsp;/&nbsp;</span>
<a href="/blog">Blog</a><span>&nbsp;/&nbsp;</span>
<a href="/tweaks.html">Tweaks</a><span>&nbsp;/&nbsp;</span>
<a href="https://codeberg.org/tdarb/pblog">Download</a>
</nav>
<!-- Do not remove this opening article element -->
<article>
<header id="title-block-header">
<h1 class="title">Tweaks</h1>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#tweaks-explained" id="toc-tweaks-explained">Tweaks Explained</a></li>
<li><a href="#magick-images" id="toc-magick-images">Magick Images</a></li>
<li><a href="#hiding-table-of-contents-heading" id="toc-hiding-table-of-contents-heading">Hiding Table of Contents &#x201C;Heading&#x201D;</a></li>
<li><a href="#adding-navigation-to-blog-index-and-rss-feed" id="toc-adding-navigation-to-blog-index-and-rss-feed">Adding navigation to blog index and RSS feed</a></li>
</ul>
</nav>
<h2 id="tweaks-explained">Tweaks Explained</h2>
<p>&#x201C;Tweaks&#x201D; are extra features that are not packaged within the default <code>pblog</code> project. If you have your own tweaks you would like to include, be sure to <a href="https://git.sr.ht/~tdarb/pblog.xyz">open a patch</a>.</p>
<hr />
<p><br></p>
<h2 id="magick-images">Magick Images</h2>
<h4 id="by-matthew-graybosch">by: <a href="https://matthewgraybosch.com">Matthew Graybosch</a></h4>
<p>This tweak gives you the ability to automatically convert PNG and JPG images to WEBP and AVIF files when used with the <code>picture</code> HTML element.</p>
<p><strong>Requirements</strong>:</p>
<ul>
<li>Download and install <a href="https://imagemagick.org/script/download.php">ImageMagick</a></li>
</ul>
<p>Then change your base <code>makefile</code> to reflect the following:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">.SUFFIXES:</span> .png .jpg .webp .avif</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="ex">.jpg.webp:</span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="ex">magick</span> <span class="at">-quality</span> 80 <span class="st">&quot;$&lt;&quot;</span> <span class="st">&quot;</span><span class="va">$@</span><span class="st">&quot;</span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a><span class="ex">.jpg.avif:</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="ex">magick</span> <span class="at">-quality</span> 80 <span class="st">&quot;$&lt;&quot;</span> <span class="st">&quot;</span><span class="va">$@</span><span class="st">&quot;</span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a><span class="ex">.png.webp:</span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> <span class="ex">magick</span> <span class="at">-quality</span> 80 <span class="st">&quot;$&lt;&quot;</span> <span class="st">&quot;</span><span class="va">$@</span><span class="st">&quot;</span></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a><span class="ex">.png.avif:</span></span>
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a> <span class="ex">magick</span> <span class="at">-quality</span> 80 <span class="st">&quot;$&lt;&quot;</span> <span class="st">&quot;</span><span class="va">$@</span><span class="st">&quot;</span></span>
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a><span class="ex">JPEGS!=find</span> media/ <span class="at">-name</span> <span class="st">&#39;*.jpg&#39;</span></span>
<span id="cb1-16"><a href="#cb1-16" aria-hidden="true" tabindex="-1"></a><span class="ex">PNGS!=find</span> media/ <span class="at">-name</span> <span class="st">&#39;*.png&#39;</span></span>
<span id="cb1-17"><a href="#cb1-17" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a><span class="va">JPEG_WEBP</span><span class="op">=</span><span class="va">${JPEGS</span><span class="op">:</span>.jpg=.webp<span class="va">}</span></span>
<span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a><span class="va">JPEG_AVIF</span><span class="op">=</span><span class="va">${JPEGS</span><span class="op">:</span>.jpg=.avif<span class="va">}</span></span>
<span id="cb1-20"><a href="#cb1-20" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-21"><a href="#cb1-21" aria-hidden="true" tabindex="-1"></a><span class="va">PNG_WEBP</span><span class="op">=</span><span class="va">${PNGS</span><span class="op">:</span>.png=.webp<span class="va">}</span></span>
<span id="cb1-22"><a href="#cb1-22" aria-hidden="true" tabindex="-1"></a><span class="va">PNG_AVIF</span><span class="op">=</span><span class="va">${PNGS</span><span class="op">:</span>.png=.avif<span class="va">}</span></span>
<span id="cb1-23"><a href="#cb1-23" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-24"><a href="#cb1-24" aria-hidden="true" tabindex="-1"></a><span class="ex">.DEFAULT:</span> build</span>
<span id="cb1-25"><a href="#cb1-25" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-26"><a href="#cb1-26" aria-hidden="true" tabindex="-1"></a><span class="ex">.PHONY:</span> build</span>
<span id="cb1-27"><a href="#cb1-27" aria-hidden="true" tabindex="-1"></a><span class="ex">build:</span> <span class="va">$(</span><span class="ex">JPEG_WEBP</span><span class="va">)</span> <span class="va">$(</span><span class="ex">JPEG_AVIF</span><span class="va">)</span> <span class="va">$(</span><span class="ex">PNG_WEBP</span><span class="va">)</span> <span class="va">$(</span><span class="ex">PNG_AVIF</span><span class="va">)</span></span>
<span id="cb1-28"><a href="#cb1-28" aria-hidden="true" tabindex="-1"></a> <span class="fu">bash</span> pblog.sh <span class="op">&gt;</span> _output/feed.xml</span>
<span id="cb1-29"><a href="#cb1-29" aria-hidden="true" tabindex="-1"></a> <span class="ex">xsltproc</span> _output/feed.xml <span class="kw">|</span> <span class="fu">tail</span> <span class="at">-n</span> +2 <span class="op">&gt;</span> _output/blog/index.html</span>
<span id="cb1-30"><a href="#cb1-30" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-31"><a href="#cb1-31" aria-hidden="true" tabindex="-1"></a><span class="ex">serve:</span> build</span>
<span id="cb1-32"><a href="#cb1-32" aria-hidden="true" tabindex="-1"></a> <span class="ex">python3</span> <span class="at">-m</span> http.server <span class="at">--directory</span> _output/</span>
<span id="cb1-33"><a href="#cb1-33" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-34"><a href="#cb1-34" aria-hidden="true" tabindex="-1"></a><span class="ex">clean:</span></span>
<span id="cb1-35"><