The best HTML site ever

Lipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Faceres tu quidem, Torquate, haec omnia; Ait enim se, si uratur, Quam hoc suave! dicturum. Si enim ad populum me vocas, eum. Egone quaeris, inquit, quid sentiam? Sed fortuna fortis; Ratio quidem vestra sic cogit.

Nos paucis ad haec additis finem faciamus aliquando; Haeret in salebra. Eadem fortitudinis ratio reperietur. Mihi enim satis est, ipsis non satis.

Proclivi currit oratio. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Duo Reges: constructio interrete. Bork Utram tandem linguam nescio?

Maximus dolor, inquit, brevis est. Sed mehercule pergrata mihi oratio tua. Cur, nisi quod turpis oratio est? Fortemne possumus dicere eundem illum Torquatum? Egone quaeris, inquit, quid sentiam?

Source code

Here is the complete code used to generate this page

example.html.template

<!DOCTYPE html>
<html lang="en">
<head>
  <title> The best HTML site ever </title>
<!-- Simple.css styling -->
<style>
% # Why ask the browser to contact a cdn when we can do it for them?
% if [ -f /tmp/simple.min.css ]; then
%   cat /tmp/simple.min.css 
% else
%   curl https://cdn.simplecss.org/simple.min.css | tee /tmp/simple.min.css
% fi 
</style>
<!-- Pygments styling -->
<style>
pre span { color: var(--preformatted); }
% if [ -f /tmp/pygments.css ]; then 
%   cat /tmp/pygments.css 
% else 
%   curl https://raw.githubusercontent.com/richleland/pygments-css/master/default.css | tee /tmp/pygments.css
% fi 
</style>
</head>
  
<html>
<body>
 
<header>
<nav>
 <a href='#template'>The template</a>
 <a href='#script'>Script</a>
 <a href='#render'>Render</a>
 <a href='.'>Back to blog</a>
</nav>
<h1>Example page</h1>
This was rendered with <code>render</code>.
</header>

<section>
  <h2>Lipsum</h2>
  <aside>
  I'm using an API to grab some lipsum text because ain't nobody has time to copy paste
  </aside>
% curl https://loripsum.net/api/4/short
</section>

<section>
  <h2> Code snippet </h2>
  <p>
  There is a file called <a href='./example.py'><code>example.py</code></a> which I will now quote from.
  </p>
% sed -n "/# chunk\$/,/# chunk_end\$/{/# chunk\$/!{/# chunk_end\$/!p}}" example.py | pygmentize -f html
</section>

<section>
  <h2> Loops </h2>
  <ul>
% for n in {1..5}; do
    <li> Item number ${n}
% done
  <ul>
</section>

<section>
  <h2> Source code </h2>
  <p>
  Here is the complete code used to generate this page
  </p>
  <code id='template'>example.html.template</code>
% cat example.html.template | pygmentize -f html
  <code id='script'>example.py</code>
% cat example.py | pygmentize -f html
  <code id='render'>render</code>
% cat $(which render) | pygmentize -f html
  
</section>

<footer>
  This is a project of Robert Spencer.
  <a href=".">Go back to the blog post</a>
</footer>
</body>
</html>

example.py

import os

# chunk
import math


def foo():
    print("Bar")
    for number in range(1, 100):
        root = math.sqrt(number)
        if abs(int(root) - root < 0.1):
            print(f"{number} is almost square")


# chunk_end


def fibonacci(n):
    a, b = 1, 1
    for _ in range(n):
        a, b = b, a + b
    return a

render

#!/bin/bash

if [[ $1 == '--help' ]] || [[ $1 == '-h' ]]; then
  >&2 echo "Usage: $0 TEMPLATE_FILE [-fh]"
  >&2 echo ""
  >&2 echo "Arguments:"
  >&2 echo "  TEMPLATE_FILE The file to render. Must end in '.template' which will be stripped."
  >&2 echo ""
  >&2 echo "Options:"
  >&2 echo "  -f, --follow Render the file periodically until ^C is pressed"
  >&2 echo "  -h, --help   Show this text"
  exit 1
fi

if [[ ! $1 == *.template ]]; then
  >&2 echo -e "\x1b[1;31mERROR\x1b[0m File to render \x1b[34m'$1'\x1b[0m does not end in \x1b[34m'.template'\x1b[0m"
  exit 1
fi

if [[ $2 == '-f' ]]; then
  watch --color -n10 "$0 $1"
  exit 0
fi

INPUT=${1}
OUTPUT=${1%.template}

>&2 echo -e "\x1b[1;32mINFO\x1b[0m Outputting to '$OUTPUT'"
cat $INPUT | sed '/^% /! s/"/\\\"/g' | sed '/^% /! s/^\(.*\)/echo "\1"/' | sed "s/^% \(.*\)/\1/" | bash > $OUTPUT
>&2 echo -e "\x1b[1;32mINFO\x1b[0m Done"