index.html

default:

	./build ~/txt/pub .

#!/usr/bin/env ruby

require "pathname"

require "erb"

require "commonmarker"

require "date"

PAGE_TEMPLATE = File.read("page.html.erb")

INDEX_PATH    = "index.html"

$articles = []

class Page

  def initialize(attrs)

    @title = attrs[:title]

    @name = attrs[:name]

    @year = Date.today.year

    @articles = $articles

  end

  def to_html

    ERB.new(PAGE_TEMPLATE).result(binding).gsub(/ +$/, '')

  end

  def styles?

    File.exists? Pathname::new(@name).join("style.css")

  end

  def write!

    dir = Pathname::new(@name)

    Dir::mkdir(@name) unless File.exists? dir

    File::new(dir.join("index.html"), "w").write(self.to_html)

  end

  def method_missing(m, *args)

    self.instance_variable_get("@#{m}")

  end

end

class Article < Page

  def initialize(input, output)

    @output = output

    abort "#{input} doesn't exist" unless File::exists? input

    puts "* #{input}.."

    name = File::basename(input, File::extname(input))

    @name = name

    @articles = $articles

    @year = self.year

    header, body = File.read(input).split(/\n\n/, 2)

    result = header && header.strip.match(/^<!--(.*)-->$/m)

    meta = result[1] || abort("article #{input} is not well formed")

    @body = CommonMarker.render_doc(body, [:FOOTNOTES]).to_html

    attrs = {}

    meta.strip.each_line do |l|

      matches = l.match(/^(\w+)\s*:\s*(.*)$/)

      attrs[matches[1].downcase.to_sym] = matches[2].chomp

    end

    @date = attrs[:date]

    @title = attrs[:title]

  end

end

def build!(base, out)

  base = Pathname::new(base)

  out = Pathname::new(out)

  Dir[base.join("**/**.md")].each do |path|

    path = Pathname::new(path)

    dir = path.dirname.relative_path_from(base)

    file = path.basename

    out_dir = out.join(dir)

    out_dir.mkpath()

    out_file = out_dir.join(file.sub_ext(".html"))

    $articles << Article::new(path, out_file)

  end

  $articles.each(&:write!)

  # Index page.

  Page::new(title: "cloudhead's homepage", name: ".").write!

end

base = ARGV.shift

out = ARGV.shift

build!(base, out)

@charset "utf-8";

:root {

	--highlight-color: aquamarine;

	--subtle-color: #2c4146;

}

* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}

body {

	color: #eee;

	background-color: #05050c;

	max-width: 912px;

	margin: 0 auto;

	padding: 120px 0 180px 0;

	line-height: 1.4em;

	font-size: 1.25rem;

	scrollbar-width: thin;

	scrollbar-height: thin;

	scrollbar-color: var(--highlight-color) var(--subtle-color);

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: greyscale;

}

body, code, pre, p, kbd, h1, h2, h3, h4, h5 {

	font-family: "Consolas", "Inconsolata", monospace;

}

/* Chrome/Edge/Safari scrollbar */

*::-webkit-scrollbar {

	width: 0.5rem;

	height: 0.5rem;

}

*::-webkit-scrollbar-track {

	background: transparent;

}

*::-webkit-scrollbar-thumb {

	background-color: var(--highlight-color);

	border-radius: 4px;

}

::selection {

	background: #9fe7e1;

}

:focus {

	outline: none;

	text-decoration: underline;

}

ul, li {

	display: inline-block;

}

li {

	margin: 5px 0;

	display: block;

}

a {

	color: #ffeebb;

	text-decoration: none;

}

a:hover {

	text-decoration: underline;

}

strong {

	font-weight: 900;

}

video, img {

	border: 1px solid #888;

	margin: 30px 0;

	outline: none;

}

/*

 * HEADERS

 */

h1, h2, h3, h4 {

	font-family: "Space Mono", "Consolas", monospace;

	font-weight: bold;

	color: var(--highlight-color);

}

h3, h4, h5 {

	font-weight: normal !important;

}

h1 {

	font-size: 1.2em;

	line-height: 1.4em;

	font-weight: bold;

}

h2 {

	font-size: 1.3em;

	line-height: 1.4em;

	margin-bottom: 30px;

	margin-top: 90px;

}

h3 {

	font-size: 1.1em;

}

/*

 * CODE

 */

pre {

	padding: 1.5rem 1.75rem;

	background-color: #060f11;

	border-radius: 4px;

}

pre code {

	white-space: pre-wrap;

}

code {

	color: #a1fde6;

	white-space: nowrap;

	font-style: italic;

}

code.language-rust {

	color: #ddd;

	font-style: normal;

}

code.language-rust .comment {

	color: #4b6267;

	font-style: italic;

}

code.language-rust .keyword {

	color: white;

	font-weight: bold;

}

code.language-rust .special {

	color: white;

	font-weight: bold;

}

code.language-rust .string {

	color: #bbb;

}

code.language-rust .number {

	color: #fff897;

}

sup.footnote-ref {

	text-decoration: underline;

	vertical-align: baseline;

	position: relative;

	top: -0.4em;

}

/*

 * NOTE

 */

.note p {

	margin: 1.5rem 0;

}

.note p:first-child {

	margin-top: 0;

}

.note ul {

	list-style-type: none;

}

.note ul, .note ol {

	margin-left: 3rem;

}

.note li {

	margin: 0;

}

.note ol {

	list-style-type: decimal;

}

.note ol li {

	display: list-item;

}

.note ol li:marker {

	color: var(--highlight-color);

}

.note ul li:before {

	content: '–';

	color: var(--highlight-color);

	position: absolute;

	margin-left: -2rem;

}

.note footer {

	text-align: left;

}

.note .copy {

	color: var(--subtle-color);

}

/*

 * NAV

 */

nav {

	position: fixed;

	left: 1rem;

	top: 1rem;

	z-index: -1;

}

nav li {

	font-size: 20px;

	line-height: 1.25em;

}

nav a {

	color: var(--highlight-color);

}

nav footer {

	font-size: 1rem;

	color: var(--subtle-color);

	position: fixed;

	bottom: 1rem;

	left: 1rem;

}

/*

 * CLASSES

 */

.date {

	color: #2c4146;

}

.subtle {

	color: var(--subtle-color);

}

.footnotes {

	margin-top: 2rem;

	padding-top: 2rem;

	border-top: 1px solid var(--subtle-color);

	font-size: 18px;

}

.footnotes p {

	margin: 0 !important;

}

.footnote-ref a, a[rel="footnote"] {

	margin-left: 0.2rem;

}

/*

 * MEDIA

 */

@media /* Medium desktop */

only screen and (max-device-width: 1440px),

only screen and (max-width: 1440px) {

	nav .subtle {

		display: none;

	}

}

@media /* Small desktop */

only screen and (max-device-width: 1280px),

only screen and (max-width: 1280px) {

	body {

		max-width: 720px;

	}

}

@media /* Smaller desktop */

only screen and (max-device-width: 960px),

only screen and (max-width: 960px) {

	body {

		padding: 1rem;

	}

	nav {

		display: block;

		position: static;

		margin-bottom: 1rem;

	}

	nav ul {

		column-count: 2;

		column-gap: 4em;

		-webkit-column-count: 2;

		-webkit-column-gap: 4rem;

		-moz-column-count: 2;

		-moz-column-gap: 4rem;

	}

}

@media /* Mobile */

only screen and (max-device-width: 720px),

only screen and (max-width: 720px) {

	video {

		height: auto;

		width: 100%;

		border-left: none;

		border-right: none;

	}

	pre {

		overflow: scroll !important;

	}

	pre code {

		white-space: pre !important;

	}

}

@font-face {

  font-family: 'Space Mono';

  font-style: italic;

  font-weight: 400;

  src: local('Space Mono Italic'), local('SpaceMono-Italic'), url(/fonts/SpaceMono-Italic.ttf) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

@font-face {

  font-family: 'Space Mono';

  font-style: italic;

  font-weight: 700;

  src: local('Space Mono Bold Italic'), local('SpaceMono-BoldItalic'), url(/fonts/SpaceMono-BoldItalic.ttf) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

@font-face {

  font-family: 'Space Mono';

  font-style: normal;

  font-weight: 400;

  src: local('Space Mono'), local('SpaceMono-Regular'), url(/fonts/SpaceMono-Regular.ttf) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

@font-face {

  font-family: 'Space Mono';

  font-style: normal;

  font-weight: 700;

  src: local('Space Mono Bold'), local('SpaceMono-Bold'), url(/fonts/SpaceMono-Bold.ttf) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

(function (hirust) {

//

// hirust - Rust Syntax Highlighter

//

// Copyright (c) 2020 Alexis Sellier

//

// All elements which match this will be syntax highlighted.

var selector = hirust || '.language-rust';

var keywords = ('fn pub if else for while break match struct type let impl ref mut use mod self '

               +'continue return true false panic! loop').split(' '),

    special  = ('Ok Err Result').split(' ');

// Syntax definition.

//

// The key becomes the class name of the <span> around the matched block of code.

var syntax = [

  ['comment', /(\/\/[^\n]*)/g],

  ['string' , /("(?:(?!")[^\\\n]|\\.)*"|'(?:(?!')[^\\\n]|\\.)*')/g],

  ['number' , /\b([0-9]+(?:\.[0-9]+)?)\b/g],

  ['keyword', new(RegExp)('\\b(' + keywords.join('|') + ')\\b', 'g')],

  ['special', new(RegExp)('\\b(' + special.join('|') + ')\\b', 'g')]

];

var nodes, table = {};

if (/^[a-z]+$/.test(selector)) {

    nodes = document.getElementsByTagName(selector);

} else if (/^\.[\w-]+$/.test(selector)) {

    nodes = document.getElementsByClassName(selector.slice(1));

} else if (document.querySelectorAll) {

    nodes = document.querySelectorAll(selector);

} else {

    nodes = [];

}

for (var i = 0, children; i < nodes.length; i++) {

    children = nodes[i].childNodes;

    for (var j = 0, str; j < children.length; j++) {

        code = children[j];

        if (code.length >= 0) { // It's a text node

            // Don't highlight command-line snippets

            if (! /^\$\s/.test(code.nodeValue.trim())) {

                syntax.forEach(function (s) {

                    var k = s[0], v = s[1];

                    code.nodeValue = code.nodeValue.replace(v, function (_, m) {

                        return '\u00ab' + encode(k) + '\u00b7'

                                        + encode(m) +

                               '\u00b7' + encode(k) + '\u00bb';

                    });

                });

            }

        }

    }

}

for (var i = 0; i < nodes.length; i++) {

    nodes[i].innerHTML =

        nodes[i].innerHTML.replace(/\u00ab(.+?)\u00b7(.+?)\u00b7\1\u00bb/g,

            function (_, name, value) {

                value = value.replace(/\u00ab[^\u00b7]+\u00b7/g, '')

                             .replace(/\u00b7[^\u00bb]+\u00bb/g, '');

                return '<span class="' + decode(name) + '">'

                                       + escape(decode(value))

                                       + '</span>';

            });

}

function escape(str) {

    return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');

}

// Encode ASCII characters to, and from Braille

function encode (str, encoded) {

    table[encoded = str.split('').map(function (s) {

        if (s.charCodeAt(0) > 127) { return s }

        return String.fromCharCode(s.charCodeAt(0) + 0x2800);

    }).join('')] = str;

    return encoded;

}

function decode (str) {

    if (str in table) {

        return table[str];

    } else {

        return str.trim().split('').map(function (s) {

            if (s.charCodeAt(0) - 0x2800 > 127) { return s }

            return String.fromCharCode(s.charCodeAt(0) - 0x2800);

        }).join('');

    }

}

})(window.hirust);

<!doctype html>

<html lang="en">

  <head>

    <title><%= title %></title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="/css/fonts.css">

    <link rel="stylesheet" type="text/css" href="/css/base.css">

    <% if styles? %>

    <link rel="stylesheet" type="text/css" href="style.css">

    <% end %>

  </head>

  <body>

    <nav>

      <ul>

        <li><a href="/">/</a> <span class="subtle">home</span></li>

        <li><a href="http://twitter.com/cloudhead">@cloudhead</a> <span class="subtle">follow my tweets</span></li>

        <li><a href="https://github.com/cloudhead">code</a> <span class="subtle">github.com/cloudhead</span></li>

        <li><a href="https://github.com/cloudhead/dotfiles">dotfiles</a> <span class="subtle">~/.*</span></li>

        <li><a href="https://github.com/cloudhead/shady.vim">shady</a> <span class="subtle">:colorscheme</span</li>

        <li><a href="https://rx.cloudhead.io">rx</a> <span class="subtle">rx.cloudhead.io</span></li>

        <% articles.each do |a| %>

        <li><a href="/<%= a.name %>/"><%= a.name %></a> <span class="subtle"><%= a.date %></li>

        <% end %>

        <li><a href="https://twitter.com/cloudhead">tweets</a></li>

        <li><a href="https://merveilles.town/@cloudhead">toots</a></li>

        <li><a href="https://ello.co/cloudhead">drawings</a></li>

      </ul>

      <footer>

        &copy; <%= year %> Alexis Sellier

      </footer>

    </nav>

    <% if body %>

    <article class="note">

    <% if title %>

      <header>

        <h1><%= title %></h1>

        <% if date %>

        <p class="date"><%= date %></p>

        <% end %>

      </header>

    <% end %>

    <section class="body">

      <%= body %>

    </section>

    <footer>

    </footer>

    </article>

    <script type="text/javascript" src="/js/hirust.js"></script>

    <% end %>

  </body>

</html>