commit 5e9783a6ce559f76da83b2530059c9664f43306e (patch)
parent ff2b0ad6c3c2eb8d33abbd108639c5e6d294075e
Author: Alex Karle <alex@karle.co>
Date: Thu, 18 Jun 2020 00:18:48 -0400
templatize: Split thoughts into posts, templatize everything
This was supposed to be two commits, one for the build system and one
for splitting up thoughts.html ... but it appears something went wrong
and nvi aborted without committing :( and now the effort is too high to
undo it.
So without further ado, I present: massive refactor commit! This adds a
brand new templating script (if you can even call it that...) tm.pl. I
seriously considered hugo and other solutions, but the temptation to
write my own was just too strong. I don't need a feature heavy library
and I don't really want that dependency. 35 lines of Perl is light
enough for now, and it's a great learning experience. Also, tm.pl is
just too clever to pass up :)
So on top of now needing to build the static content, this commit
refactored thoughts into a series of posts, each with their own
head/tail template.
This feels like the right scalability solution, in the sense that
updating the style of many posts will only involve updating the
templates.
Likewise, having one long "thoughts" page is both unlinkable (and thus
unshareable) and just not practical.
So thoughts blooms into a maybe-one-day blog.
Cheers!
Diffstat:
18 files changed, 230 insertions(+), 152 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/build/
diff --git a/Makefile b/Makefile
@@ -1,6 +1,10 @@
DEST = /var/www/htdocs/karleco
+.PHONY: build
+build:
+ ./bin/build.sh
+
.PHONY: install
-install:
+install: build
mkdir -p $(DEST)
- cp -f *.html style.css $(DEST)
+ cp build/* $(DEST)
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
-# www
+alexkarle.com
+=============
-My first take at a static website
+My soap box on the internet.
+
+A static site with a small templating system, build with `make`.
diff --git a/bin/build.sh b/bin/build.sh
@@ -0,0 +1,6 @@
+#!/bin/sh
+mkdir -p build
+cp content/*.css build
+for f in content/*.html; do
+ ./bin/tm.pl $f > build/`basename $f`
+done
diff --git a/bin/tm.pl b/bin/tm.pl
@@ -0,0 +1,35 @@
+#!/usr/bin/env perl
+# tm.pl -- minimal templating script
+# ^ ^^^
+use strict;
+use warnings;
+
+use File::Basename qw(dirname);
+use FindBin;
+
+my $TOP = dirname($FindBin::Bin);
+
+while (my $l = <>) {
+ process_line($l);
+}
+
+sub process_line {
+ my $l = shift;
+ if ($l =~ /{% include=(.*) %}/) {
+ process_file($1);
+ } else {
+ print $l;
+ }
+}
+
+sub process_file {
+ my $f = shift;
+
+ my $tmpl = "$TOP/templates/$f.tmpl";
+ die "bad template: $tmpl" unless -e $tmpl;
+ open(my $tfh, '<', $tmpl) or die "open: $!";
+ while (my $l = <$tfh>) {
+ process_line($l);
+ }
+ close($tfh) or die "close: $!";
+}
diff --git a/content/03-24-20-domain-name.html b/content/03-24-20-domain-name.html
@@ -0,0 +1,32 @@
+<!-- {% include=post-head %} -->
+
+<h3>Mar. 24, 2020: Domain Name Insanity</h3>
+<p>
+I went through a phase this week of really wanting `karle.[original-tld]`.
+Not for a business. Not for boosting my own webpage (it doesn't really
+have much). Just for me.
+</p>
+
+<p>The results were... disheartening.</p>
+
+<ul>
+ <li>
+ <b>karle.org:</b><br> Registered since 2004, no website, just an email
+ DNS record. WHOIS guard ensures I can't even reach out to who owns it.
+ </li>
+ <li>
+ <b>karle.com:</b><br> For sale by owner on Uniregistry. Ok. Inquired.
+ Owner wants a "serious 5 figure offer". Next!
+ </li>
+ <li>
+ <b>karle.net:</b><br> Owned by <a href="https://realnames.com">RealNames</a>,
+ a business seemingly centered around buying lastname.net domains and
+ charging people like me to set up an email. Almost brilliant enough of a
+ business to make me forgive their scumminess. <i>Almost</i>. Nary an
+ option to buy it.
+ </li>
+</ul>
+
+<p>So here we are. Looks like karle.co for at least a little longer.</p>
+
+<!-- {% include=post-tail %} -->
diff --git a/content/12-19-19-a-new-hope.html b/content/12-19-19-a-new-hope.html
@@ -0,0 +1,17 @@
+<!-- {% include=post-head %} -->
+
+<h3>Dec. 19, 2019: A New Hope</h3>
+<p>
+Toying with the thought of starting a website/blog.
+</p>
+<p>
+Exploring my hosting options and pleasantly surprised that
+<a href="https://fastmail.com">Fastmail</a> has free static site hosting!
+</p>
+<p>
+Inspired by Jeff Huang's article on websites
+<a href="https://jeffhuang.com/designed_to_last">Designed to Last</a> and
+a general desire for a simpler web.
+</p>
+
+<!-- {% include=post-tail %} -->
diff --git a/content/index.html b/content/index.html
@@ -0,0 +1,29 @@
+<!-- {% include=head %} -->
+
+<div id="nav">
+ <a href="index.html">[Home]</a>
+ <a href="thoughts.html"> Thoughts </a>
+ <a href="http://euchre.live"> Euchre </a>
+</div>
+
+<!-- {% include=title %} -->
+
+<h3>About me:</h3>
+<p>
+Hi, I'm Alex! I'm a software engineer living in the Boston area.
+</p>
+
+<p>
+I'm currently interested in free Operating Systems (particularly Linux
+and OpenBSD), SCM systems (mostly git), and developer tooling.
+</p>
+
+<br>
+<h3>Find me online:</h3>
+
+<ul class="find-me">
+ <li>GitHub: <a href="https://github.com/akarle">@akarle</a></li>
+ <li>Email: alex AT this-domain
+</ul>
+
+<!-- {% include=tail %} -->
diff --git a/content/style.css b/content/style.css
@@ -0,0 +1,51 @@
+body {
+ background-color: #F5F5F5;
+ font-family: "Courier New", monospace;
+ margin-left: 20px;
+ margin-right: 20px;
+ font-size: 1em;
+}
+
+@media only screen and (min-width: 992px) {
+ #content {
+ width: 60%;
+ margin: 0 auto;
+ }
+}
+
+a:link {
+ color: #0a7899;
+}
+
+a:visited {
+ color: #033a4a;
+}
+
+.new-post:link {
+ text-decoration: none;
+}
+
+.new-post:hover {
+ text-decoration: underline;
+}
+
+
+#nav {
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+#nav > a {
+ color: dimgray;
+ text-decoration: none;
+ padding: 1em;
+}
+
+h1.path {
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+
+ul.find-me {
+ padding-left: 1.5em;
+}
diff --git a/content/thoughts.html b/content/thoughts.html
@@ -0,0 +1,16 @@
+<!-- {% include=post-head %} -->
+
+<h3>A collection of thoughts.</h3>
+<p style="color:grey">(Because I couldn't commit to calling it a blog)</p>
+
+<ul>
+ <li>
+ <a class="new-post" href="03-24-20-domain-name.html">Mar. 24, 2020: Domain Name Insanity</a>
+ </li>
+
+ <li>
+<a class="new-post" href="12-19-19-a-new-hope.html">Dec. 19, 2019: A New Hope</a>
+ </li>
+</ul>
+
+<!-- {% include=tail %} -->
diff --git a/index.html b/index.html
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>Alex Karle</title>
- <link rel="stylesheet" type="text/css" href="style.css">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- </head>
-
- <body>
- <!-- Put content in centered column -->
- <div id="content">
- <div id="nav">
- <a href="index.html">[Home]</a>
- <a href="thoughts.html"> Thoughts </a>
- <a href="http://euchre.live"> Euchre </a>
- </div>
-
- <h1 class="path">/home/akarle</h1>
- <h1 class="path">------------</h1>
-
- <h3>About me:</h3>
- <p>
- Hi, I'm Alex! I'm a software engineer living in the Boston area.
- </p>
-
- <p>
- I'm currently interested in free Operating Systems (particularly Linux
- and OpenBSD), SCM systems (mostly git), and developer tooling.
- </p>
-
- <br>
- <h3>Find me online:</h3>
-
- <ul class="find-me">
- <li>GitHub: <a href="https://github.com/akarle">@akarle</a></li>
- <li>Email: alex AT this-domain
- </ul>
- </div>
- </body>
-</html>
diff --git a/style.css b/style.css
@@ -1,38 +0,0 @@
-body {
- background-color: #F5F5F5;
- font-family: "Courier New", monospace;
- margin-left: 20px;
- margin-right: 20px;
- font-size: 1em;
-}
-
-@media only screen and (min-width: 992px) {
- #content {
- width: 60%;
- margin: 0 auto;
- }
-}
-
-.new-post {
- margin-top: 80px;
-}
-
-#nav {
- text-align: center;
- margin-bottom: 20px;
-}
-
-#nav > a {
- color: dimgray;
- text-decoration: none;
- padding: 1em;
-}
-
-h1.path {
- margin-top: 0px;
- margin-bottom: 0px;
-}
-
-ul.find-me {
- padding-left: 1.5em;
-}
diff --git a/templates/head.tmpl b/templates/head.tmpl
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Alex Karle</title>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ </head>
+
+ <body>
+ <!-- Put content in centered column -->
+ <div id="content">
diff --git a/templates/post-head.tmpl b/templates/post-head.tmpl
@@ -0,0 +1,9 @@
+<!-- {% include=head %} -->
+
+<div id="nav">
+ <a href="index.html"> Home </a>
+ <a href="thoughts.html">[Thoughts]</a>
+ <a href="http://euchre.live"> Euchre </a>
+</div>
+
+<!-- {% include=title %} -->
diff --git a/templates/post-tail.tmpl b/templates/post-tail.tmpl
@@ -0,0 +1,6 @@
+<br> <br> <br>
+<div style="text-align: right">
+ <a style="color:gray; text-decoration:none" href="thoughts.html">Back</a>
+</div>
+<br> <br> <br>
+<!-- {% include=tail %} -->
diff --git a/templates/tail.tmpl b/templates/tail.tmpl
@@ -0,0 +1,3 @@
+ </div> <!-- content -->
+ </body>
+</html>
diff --git a/templates/title.tmpl b/templates/title.tmpl
@@ -0,0 +1,2 @@
+<h1 class="path">/home/akarle</h1>
+<h1 class="path">------------</h1>
diff --git a/thoughts.html b/thoughts.html
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>Alex Karle</title>
- <link rel="stylesheet" type="text/css" href="style.css">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- </head>
-
- <body>
- <!-- Put content in centered column -->
- <div id="content">
- <div id="nav">
- <a href="index.html"> Home </a>
- <a href="thoughts.html">[Thoughts]</a>
- <a href="http://euchre.live"> Euchre </a>
- </div>
-
- <h1 class="path">/home/akarle</h1>
- <h1 class="path">------------</h1>
-
- <h3>A collection of thoughts.</h3>
-
- <h3 class="new-post">Mar. 24, 2020: Domain Name Insanity</h3>
- <p>
- I went through a phase this week of really wanting `karle.[original-tld]`.
- Not for a business. Not for boosting my own webpage (it doesn't really
- have much). Just for me.
- </p>
-
- <p>The results were... disheartening.</p>
-
- <ul>
- <li>
- <b>karle.org:</b><br> Registered since 2004, no website, just an email
- DNS record. WHOIS guard ensures I can't even reach out to who owns it.
- </li>
- <li>
- <b>karle.com:</b><br> For sale by owner on Uniregistry. Ok. Inquired.
- Owner wants a "serious 5 figure offer". Next!
- </li>
- <li>
- <b>karle.net:</b><br> Owned by <a
- href="https://realnames.com">RealNames</a>, a business seemingly
- centered around buying lastname.net domains and charging people like
- me to set up an email. Almost brilliant enough of a business to make
- me forgive their scumminess. <i>Almost</i>. Nary an option to buy
- it.
- </li>
- </ul>
-
- <p>So here we are. Looks like karle.co for at least a little longer.</p>
-
- <h3 class="new-post">Dec. 19, 2019: A New Hope</h3>
- <p>
- Toying with the thought of starting a website/blog.
- </p>
- <p>
- Exploring my hosting options and pleasantly surprised that
- <a href="https://fastmail.com">Fastmail</a> has free static site hosting!
- </p>
- <p>
- Inspired by Jeff Huang's article on websites
- <a href="https://jeffhuang.com/designed_to_last">Designed to Last</a> and
- a general desire for a simpler web.
- </p>
- </div>
- </body>
-</html>
