Add a build system to generate the HTML

Makefile

@@ -0,0 +1,21 @@
+build/guenashk.html: txt/dogs.md build/template.html
+	mkdir -p build
+	pandoc --template=build/template <txt/dogs.md >build/guenashk.html
+
+build/icon-%.svg: diagrams/icon-%.svg
+	inkscape --export-plain-svg=$@ $<
+	sed -i -e 's/height=[^>]*/height="1em"/g' $@
+	sed -i -e 's/width=[^>]*/width="1em"/g' $@
+
+build/payload.json: build/icon-heart.svg build/icon-relationship.svg
+	bin/b64-payload \
+	  --raleway=/usr/share/fonts/TTF/Raleway-Medium.ttf \
+	  --trait-icon=build/icon-heart.svg \
+	  --relationship-icon=build/icon-relationship.svg \
+	  >build/payload.json
+
+build/template.html: txt/template.mustache build/payload.json
+	pystache txt/template.mustache build/payload.json >build/template.html
+
+clean:
+	rm -f build/*

bin/b64-payload

@@ -0,0 +1,25 @@
+#!/usr/bin/env python3
+
+import base64
+import json
+import sys
+
+USAGE='''
+{0} --key1=file1 --key2=file2 ...
+'''
+
+def main(args):
+    result = {}
+    for key, filename in args.items():
+        with open(filename, 'rb') as f:
+            contents = f.read()
+        result[key] = base64.b64encode(contents).decode('utf-8')
+    json.dump(result, sys.stdout)
+
+if __name__ == '__main__':
+    if '--help' in sys.argv[1:]:
+        print(USAGE.format(sys.argv[0]))
+        sys.exit(0)
+
+    args = dict((arg.strip('--').split('=') for arg in sys.argv[1:]))
+    main(args)

diagrams/icon-heart.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="75pt"
+   height="75pt"
+   viewBox="0 0 26.458333 26.458334"
+   version="1.1"
+   id="svg8"
+   inkscape:version=""
+   sodipodi:docname="icon-heart.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="21.262725"
+     inkscape:cy="43.443214"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="pt"
+     inkscape:window-width="1920"
+     inkscape:window-height="1080"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid815" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-270.54165)">
+    <path
+       style="opacity:1;fill:#802020;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.8973664;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="M 27.5,5 C 15.073593,5 4.9999995,16.192881 5,30 c 4e-7,35.000013 30,60.000001 45,60 15.000001,-10e-7 45,-24.999987 45,-60 C 95,16.192881 84.926407,5 72.5,5 60.073593,5 50.000001,11.192881 50.000001,25 50.000001,11.192881 39.926407,5 27.5,5 Z"
+       transform="matrix(0.26458333,0,0,0.26458333,0,270.54165)"
+       id="path817"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssssscs" />
+  </g>
+</svg>

diagrams/icon-relationship.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="75pt"
+   height="75pt"
+   viewBox="0 0 26.458333 26.458334"
+   version="1.1"
+   id="svg8"
+   inkscape:version=""
+   sodipodi:docname="icon-relationship.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="-13.737275"
+     inkscape:cy="43.443214"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="pt"
+     inkscape:window-width="1920"
+     inkscape:window-height="1080"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid815" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-270.54165)">
+    <circle
+       style="opacity:1;fill:#802020;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.52916664;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path814"
+       cx="13.229167"
+       cy="278.47916"
+       r="5.953125" />
+    <path
+       style="opacity:1;fill:#802020;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.54773951;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 13.229167,283.10935 a 9.9218751,9.2604168 0 0 0 -9.921875,9.26042 v 2.64583 h 19.84375 v -2.64583 a 9.9218751,9.2604168 0 0 0 -9.921875,-9.26042 z"
+       id="path816"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

txt/template.mustache

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="Content-Style-Type" content="text/css" />
+    <meta name="generator" content="pandoc" />$for(author-meta)$
+    <meta name="author" content="$author-meta$" />
+    $endfor$
+    $if(date-meta)$
+    <meta name="date" content="$date-meta$" />
+    $endif$
+    $if(keywords)$
+    <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
+    $endif$
+    <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+    <style type="text/css">
+     @font-face {
+       font-family: raleway;
+       src: url(data:application/x-font-truetype;base64,{{raleway}});
+     }
+     body { font-family: "Fira Sans", sans-serif; }
+     code{white-space: pre;}
+     .main {
+       width: 80%;
+       text-align: justify;
+       margin-left: auto;
+       margin-right: auto;
+       font-size: 18px;
+       line-height: 150%;
+     }
+     h1 {
+       font-family: raleway;
+       font-weight: normal;
+       color: #822;
+     }
+     h2 {
+       font-family: raleway;
+       font-weight: normal;
+       color: #822;
+     }
+     h3 {
+       font-family: raleway;
+       font-weight: normal;
+       color: #822;
+     }
+     .footer {
+       text-align: center;
+     }
+     blockquote {
+       background-color: #f5f5f5;
+       padding-left: 30px;
+       padding-right: 30px;
+       padding-top: 5px;
+       padding-bottom: 5px;
+       border-left: 2px solid black;
+     }
+     p { margin-left: 20pt; margin-right: 20pt; }
+     a { text-decoration: none; color: #822; }
+     a[href="#background"]::after {
+       content: "Background";
+     }
+     a[href="#trait"]::before {
+       content: url(data:image/svg+xml;base64,{{trait-icon}});
+     }
+     a[href="#trait"]::after {
+       content: " Trait";
+     }
+     a[href="#relationship"]::before {
+       content: url(data:image/svg+xml;base64,{{relationship-icon}});
+     }
+     a[href="#relationship"]::after {
+       content: " Relationship";
+     }
+    </style>
+  </head>
+  <body>
+    <div class="main" >
+      <div class="header">
+        <h1 id="if-the-sky-were-crooked">$if(title)$ $title$ $endif$</h1>
+      </div>
+      $body$
+        <div class="footer">
+          $for(author)$ $author$ $endfor$<br/>
+          $if(date)$ $date$ $endif$
+        </div>
+  </div>
+</body>
+</html>