~bt/pblog

1fc6db2353a53a9717726232241d444b7d061504 — Bradley Taunt 16 days ago 6eb7404 master 
Fix code auto overflow layout and include websites using pblog on the homepage
patch browse .tar.gz 
10 files changed, 164 insertions(+), 6 deletions(-)

M _output/blog/default-styles.html
M _output/blog/pblog-intro.html
M _output/feed.xml
M _output/index.html
M _output/style.css
M _output/tweaks.html
M pages/index.md
M posts/default-styles.md
M posts/pblog-intro.md
M style.css

M _output/blog/default-styles.html => _output/blog/default-styles.html +88 -0
@@ 18,6 18,70 @@
      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]>


@@ 53,6 117,30 @@
<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>
<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">&quot;https://pblog.bt.ht&quot;</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">&quot;pblog&quot;</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">&quot;Pandoc static blog generator&quot;</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">&quot;Copyright 2022, Bradley Taunt&quot;</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">&quot;brad@bt.ht (Bradley Taunt)&quot;</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">&quot;Linux&quot;</span> <span class="co"># &quot;Linux&quot; for Linux, &quot;BSD&quot; 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">&quot;en_US&quot;</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">&quot;pages/&quot;</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">&quot;posts/&quot;</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">&quot;blog/&quot;</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">&quot;_output/&quot;</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">&quot;01:00:00 EST&quot;</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">&quot;60&quot;</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&#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>


M _output/blog/pblog-intro.html => _output/blog/pblog-intro.html +3 -2
@@ 17,6 17,8 @@
      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; }


@@ 80,7 82,6 @@
    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]>


@@ 137,7 138,7 @@
    |__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>
<p>This structure is completely customizable by simply editing the <code>_config.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>


M _output/feed.xml => _output/feed.xml +25 -1
@@ 80,6 80,30 @@
<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>
<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">&quot;https://pblog.bt.ht&quot;</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">&quot;pblog&quot;</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">&quot;Pandoc static blog generator&quot;</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">&quot;Copyright 2022, Bradley Taunt&quot;</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">&quot;brad@bt.ht (Bradley Taunt)&quot;</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">&quot;Linux&quot;</span> <span class="co"># &quot;Linux&quot; for Linux, &quot;BSD&quot; 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">&quot;en_US&quot;</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">&quot;pages/&quot;</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">&quot;posts/&quot;</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">&quot;blog/&quot;</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">&quot;_output/&quot;</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">&quot;01:00:00 EST&quot;</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">&quot;60&quot;</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&#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>


@@ 137,7 161,7 @@
    |__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>
<p>This structure is completely customizable by simply editing the <code>_config.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>


M _output/index.html => _output/index.html +7 -1
@@ 17,6 17,8 @@
      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; }


@@ 80,7 82,6 @@
    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]>


@@ 159,6 160,11 @@
</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>brad at bt {dot} ht</p>
<h2 id="websites-using-pblog">Websites Using <code>pblog</code></h2>
<ul>
<li><a href="https://pblog.bt.ht">pblog.bt.ht</a> (this site!)</li>
<li><a href="https://www.ng5p.com">ng5p.com</a></li>
</ul>
</article><!-- Do not remove this closing article element -->

<!-- Content placed here will appear directly before the closing </body> tag -->


M _output/style.css => _output/style.css +3 -0
@@ 17,6 17,9 @@ p code, li code {
    color: brown;
    padding: 1px 2px;
}
.sourceCode {
	overflow: auto;
}

img {
    height: auto;


M _output/tweaks.html => _output/tweaks.html +2 -1
@@ 17,6 17,8 @@
      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; }


@@ 80,7 82,6 @@
    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]>


M pages/index.md => pages/index.md +5 -0
@@ 81,3 81,8 @@ SYNTAX: false
You can share your **pblog** websites by emailing me at the address listed below and I'll add them here.

brad at bt {dot} ht

## Websites Using `pblog`

- [pblog.bt.ht](https://pblog.bt.ht) (this site!)
- [ng5p.com](https://www.ng5p.com)


M posts/default-styles.md => posts/default-styles.md +27 -0
@@ 17,6 17,33 @@ The styling changes aren't anything ground breaking. They simply center the main

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 `_config.sh` file.

```sh
#!/bin/sh

# Site specific settings
###################################################################################
DOMAIN="https://pblog.bt.ht"
TITLE="pblog"
DESCRIPTION="Pandoc static blog generator"
COPYRIGHT="Copyright 2022, Bradley Taunt"
AUTHOR="brad@bt.ht (Bradley Taunt)"
OS="Linux" # "Linux" for Linux, "BSD" for BSD Systems (including MacOS)
HTML_LANG="en_US" # Your document (HTML) language setting

# Blog structure settings (most users should use these defaults)
###################################################################################
TOC=true
SYNTAX=true
PAGES_DIR="pages/"
POSTS_DIR="posts/"
PAGES=$(find $PAGES_DIR -type f)
POSTS=$(find $POSTS_DIR -type f)
WEB_HTML="blog/"
OUTPUT="_output/"
TIME="01:00:00 EST"
TTL="60"
```

Feels cleaner already, right?

## Cutting the Build Time in Half


M posts/pblog-intro.md => posts/pblog-intro.md +1 -1
@@ 40,7 40,7 @@ _output/
    |__style.css
```

This structure is completely customizable by simply editing the `pblog.sh` file (if you so desire).
This structure is completely customizable by simply editing the `_config.sh` file (if you so desire).

### Headers and Footers



M style.css => style.css +3 -0
@@ 17,6 17,9 @@ p code, li code {
    color: brown;
    padding: 1px 2px;
}
.sourceCode {
	overflow: auto;
}

img {
    height: auto;