From e1fe3e1bc589bdf25efdaad7383deb2e5fd917fe Mon Sep 17 00:00:00 2001
From: Thomas Sindt <Thomas.Sindt@gmx.de>
Date: Mon, 25 May 2026 22:53:28 +0200
Subject: [PATCH] fix it

---
 .gitmodules                                   |    3 +
 homepage/content/_index.md                    |   20 +
 homepage/content/gedanken/_index.md           |    5 +
 .../content/gedanken/creating-a-new-theme.md  | 1145 ++++++
 homepage/content/gedanken/diagrams.md         |  221 ++
 homepage/content/gedanken/hugoisforlovers.md  |   82 +
 homepage/content/gedanken/introduce-hugo.md   | 1141 ++++++
 .../content/gedanken/migrate-from-jekyll.md   |  179 +
 .../{posts => gedanken}/my-first-post.md      |    0
 homepage/content/warum.md                     |   12 +
 homepage/content/warum/_index.md              |   12 +
 homepage/hugo.toml                            |   52 +-
 homepage/hugo.toml.old                        |   10 +
 homepage/hugo_stats.json                      |  138 +
 homepage/layouts/404.html                     |   24 +
 .../_default/_markup/render-heading.html      |    7 +
 .../_default/_markup/render-image.html        |   20 +
 homepage/layouts/_default/archive.html        |   30 +
 homepage/layouts/_default/baseof.html         |   15 +
 homepage/layouts/_default/list.html           |   14 +
 homepage/layouts/_default/single.html         |   51 +
 homepage/layouts/_partials/comments.html      |    2 +
 homepage/layouts/_partials/date.html          |    1 +
 homepage/layouts/_partials/footer.html        |    4 +
 homepage/layouts/_partials/head.html          |   59 +
 homepage/layouts/_partials/head/css.html      |   19 +
 homepage/layouts/_partials/head/favicon.html  |   17 +
 homepage/layouts/_partials/header.html        |   19 +
 homepage/layouts/_partials/menu.html          |   51 +
 homepage/layouts/_partials/terms.html         |   22 +
 homepage/layouts/index.html                   |    6 +
 homepage/layouts/robots.txt                   |    4 +
 homepage/layouts/shortcodes/mermaid.html      |    2 +
 homepage/public/404.html                      |  160 +-
 homepage/public/categories/index.html         |  173 +-
 homepage/public/categories/index.xml          |   10 +-
 homepage/public/css/custom.css                |   44 +
 homepage/public/css/main.css                  |  734 ++++
 homepage/public/favicon.ico                   |  Bin 0 -> 15406 bytes
 .../favicon_io/android-icon-144x144.png       |  Bin 0 -> 6918 bytes
 .../favicon_io/android-icon-192x192.png       |  Bin 0 -> 10516 bytes
 .../public/favicon_io/android-icon-36x36.png  |  Bin 0 -> 1321 bytes
 .../public/favicon_io/android-icon-48x48.png  |  Bin 0 -> 1697 bytes
 .../public/favicon_io/android-icon-72x72.png  |  Bin 0 -> 2657 bytes
 .../public/favicon_io/android-icon-96x96.png  |  Bin 0 -> 3829 bytes
 .../public/favicon_io/apple-icon-114x114.png  |  Bin 0 -> 4886 bytes
 .../public/favicon_io/apple-icon-120x120.png  |  Bin 0 -> 5265 bytes
 .../public/favicon_io/apple-icon-144x144.png  |  Bin 0 -> 6918 bytes
 .../public/favicon_io/apple-icon-152x152.png  |  Bin 0 -> 7594 bytes
 .../public/favicon_io/apple-icon-180x180.png  |  Bin 0 -> 9830 bytes
 .../public/favicon_io/apple-icon-57x57.png    |  Bin 0 -> 2025 bytes
 .../public/favicon_io/apple-icon-60x60.png    |  Bin 0 -> 2093 bytes
 .../public/favicon_io/apple-icon-72x72.png    |  Bin 0 -> 2657 bytes
 .../public/favicon_io/apple-icon-76x76.png    |  Bin 0 -> 2841 bytes
 .../favicon_io/apple-icon-precomposed.png     |  Bin 0 -> 11039 bytes
 homepage/public/favicon_io/apple-icon.png     |  Bin 0 -> 11039 bytes
 homepage/public/favicon_io/browserconfig.xml  |    2 +
 homepage/public/favicon_io/favicon-16x16.png  |  Bin 0 -> 816 bytes
 homepage/public/favicon_io/favicon-32x32.png  |  Bin 0 -> 1220 bytes
 homepage/public/favicon_io/favicon-96x96.png  |  Bin 0 -> 3829 bytes
 homepage/public/favicon_io/favicon.ico        |  Bin 0 -> 1150 bytes
 homepage/public/favicon_io/manifest.json      |   41 +
 .../public/favicon_io/ms-icon-144x144.png     |  Bin 0 -> 6918 bytes
 .../public/favicon_io/ms-icon-150x150.png     |  Bin 0 -> 7408 bytes
 .../public/favicon_io/ms-icon-310x310.png     |  Bin 0 -> 22613 bytes
 homepage/public/favicon_io/ms-icon-70x70.png  |  Bin 0 -> 2592 bytes
 .../gedanken/creating-a-new-theme/index.html  | 1228 +++++++
 homepage/public/gedanken/diagrams/index.html  | 3132 +++++++++++++++++
 .../gedanken/hugoisforlovers/index.html       |  221 ++
 homepage/public/gedanken/index.html           |  129 +
 homepage/public/gedanken/index.xml            |   56 +
 .../public/gedanken/introduce-hugo/index.html | 1229 +++++++
 .../gedanken/migrate-from-jekyll/index.html   |  343 ++
 .../public/gedanken/my-first-post/index.html  |  162 +
 homepage/public/index.html                    |  184 +-
 homepage/public/index.xml                     |   53 +-
 .../posts/creating-a-new-theme/index.html     | 1200 +++++++
 homepage/public/posts/diagrams/index.html     | 3132 +++++++++++++++++
 .../public/posts/hugoisforlovers/index.html   |  221 ++
 homepage/public/posts/index.html              |  205 +-
 homepage/public/posts/index.xml               |   51 +-
 .../public/posts/introduce-hugo/index.html    | 1201 +++++++
 .../posts/migrate-from-jekyll/index.html      |  343 ++
 .../public/posts/my-first-post/index.html     |  242 +-
 homepage/public/sitemap.xml                   |   40 +-
 homepage/public/tags/diagrams/index.html      |  108 +
 homepage/public/tags/diagrams/index.xml       |   21 +
 homepage/public/tags/hugo/index.html          |  132 +
 homepage/public/tags/hugo/index.xml           |   49 +
 homepage/public/tags/index.html               |  191 +-
 homepage/public/tags/index.xml                |   32 +-
 homepage/public/tags/tech/index.html          |  114 +
 homepage/public/tags/tech/index.xml           |   28 +
 homepage/public/warum/index.html              |  110 +
 homepage/public/warum/index.xml               |   13 +
 homepage/themes/shibui                        |    1 +
 96 files changed, 18132 insertions(+), 590 deletions(-)
 create mode 100644 homepage/content/_index.md
 create mode 100644 homepage/content/gedanken/_index.md
 create mode 100644 homepage/content/gedanken/creating-a-new-theme.md
 create mode 100644 homepage/content/gedanken/diagrams.md
 create mode 100644 homepage/content/gedanken/hugoisforlovers.md
 create mode 100644 homepage/content/gedanken/introduce-hugo.md
 create mode 100644 homepage/content/gedanken/migrate-from-jekyll.md
 rename homepage/content/{posts => gedanken}/my-first-post.md (100%)
 create mode 100644 homepage/content/warum.md
 create mode 100644 homepage/content/warum/_index.md
 create mode 100644 homepage/hugo.toml.old
 create mode 100644 homepage/hugo_stats.json
 create mode 100644 homepage/layouts/404.html
 create mode 100644 homepage/layouts/_default/_markup/render-heading.html
 create mode 100644 homepage/layouts/_default/_markup/render-image.html
 create mode 100644 homepage/layouts/_default/archive.html
 create mode 100644 homepage/layouts/_default/baseof.html
 create mode 100644 homepage/layouts/_default/list.html
 create mode 100644 homepage/layouts/_default/single.html
 create mode 100644 homepage/layouts/_partials/comments.html
 create mode 100644 homepage/layouts/_partials/date.html
 create mode 100644 homepage/layouts/_partials/footer.html
 create mode 100644 homepage/layouts/_partials/head.html
 create mode 100644 homepage/layouts/_partials/head/css.html
 create mode 100644 homepage/layouts/_partials/head/favicon.html
 create mode 100644 homepage/layouts/_partials/header.html
 create mode 100644 homepage/layouts/_partials/menu.html
 create mode 100644 homepage/layouts/_partials/terms.html
 create mode 100644 homepage/layouts/index.html
 create mode 100644 homepage/layouts/robots.txt
 create mode 100644 homepage/layouts/shortcodes/mermaid.html
 create mode 100644 homepage/public/css/custom.css
 create mode 100644 homepage/public/css/main.css
 create mode 100644 homepage/public/favicon.ico
 create mode 100644 homepage/public/favicon_io/android-icon-144x144.png
 create mode 100644 homepage/public/favicon_io/android-icon-192x192.png
 create mode 100644 homepage/public/favicon_io/android-icon-36x36.png
 create mode 100644 homepage/public/favicon_io/android-icon-48x48.png
 create mode 100644 homepage/public/favicon_io/android-icon-72x72.png
 create mode 100644 homepage/public/favicon_io/android-icon-96x96.png
 create mode 100644 homepage/public/favicon_io/apple-icon-114x114.png
 create mode 100644 homepage/public/favicon_io/apple-icon-120x120.png
 create mode 100644 homepage/public/favicon_io/apple-icon-144x144.png
 create mode 100644 homepage/public/favicon_io/apple-icon-152x152.png
 create mode 100644 homepage/public/favicon_io/apple-icon-180x180.png
 create mode 100644 homepage/public/favicon_io/apple-icon-57x57.png
 create mode 100644 homepage/public/favicon_io/apple-icon-60x60.png
 create mode 100644 homepage/public/favicon_io/apple-icon-72x72.png
 create mode 100644 homepage/public/favicon_io/apple-icon-76x76.png
 create mode 100644 homepage/public/favicon_io/apple-icon-precomposed.png
 create mode 100644 homepage/public/favicon_io/apple-icon.png
 create mode 100644 homepage/public/favicon_io/browserconfig.xml
 create mode 100644 homepage/public/favicon_io/favicon-16x16.png
 create mode 100644 homepage/public/favicon_io/favicon-32x32.png
 create mode 100644 homepage/public/favicon_io/favicon-96x96.png
 create mode 100644 homepage/public/favicon_io/favicon.ico
 create mode 100644 homepage/public/favicon_io/manifest.json
 create mode 100644 homepage/public/favicon_io/ms-icon-144x144.png
 create mode 100644 homepage/public/favicon_io/ms-icon-150x150.png
 create mode 100644 homepage/public/favicon_io/ms-icon-310x310.png
 create mode 100644 homepage/public/favicon_io/ms-icon-70x70.png
 create mode 100644 homepage/public/gedanken/creating-a-new-theme/index.html
 create mode 100644 homepage/public/gedanken/diagrams/index.html
 create mode 100644 homepage/public/gedanken/hugoisforlovers/index.html
 create mode 100644 homepage/public/gedanken/index.html
 create mode 100644 homepage/public/gedanken/index.xml
 create mode 100644 homepage/public/gedanken/introduce-hugo/index.html
 create mode 100644 homepage/public/gedanken/migrate-from-jekyll/index.html
 create mode 100644 homepage/public/gedanken/my-first-post/index.html
 create mode 100644 homepage/public/posts/creating-a-new-theme/index.html
 create mode 100644 homepage/public/posts/diagrams/index.html
 create mode 100644 homepage/public/posts/hugoisforlovers/index.html
 create mode 100644 homepage/public/posts/introduce-hugo/index.html
 create mode 100644 homepage/public/posts/migrate-from-jekyll/index.html
 create mode 100644 homepage/public/tags/diagrams/index.html
 create mode 100644 homepage/public/tags/diagrams/index.xml
 create mode 100644 homepage/public/tags/hugo/index.html
 create mode 100644 homepage/public/tags/hugo/index.xml
 create mode 100644 homepage/public/tags/tech/index.html
 create mode 100644 homepage/public/tags/tech/index.xml
 create mode 100644 homepage/public/warum/index.html
 create mode 100644 homepage/public/warum/index.xml
 create mode 160000 homepage/themes/shibui

diff --git a/.gitmodules b/.gitmodules
index 9b03950..6d33448 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,6 @@
 [submodule "homepage/themes/ananke"]
 	path = homepage/themes/ananke
 	url = https://github.com/gohugo-ananke/ananke
+[submodule "homepage/themes/shibui"]
+	path = homepage/themes/shibui
+	url = https://github.com/ntk148v/shibui.git
diff --git a/homepage/content/_index.md b/homepage/content/_index.md
new file mode 100644
index 0000000..416d351
--- /dev/null
+++ b/homepage/content/_index.md
@@ -0,0 +1,20 @@
+---
+title: "Thomas und die Liebe letzter Teil neue Version..."
+---
+
+## Introduction
+
+Ich glaube, ich schreibe es hauptsächlich deswegen, um zu lernen und das Gelernte zu vertiefen und vielleicht auch ein wenig, damit es Euch da draußen helfen kann.
+
+Bis vor ein paar Jahren kannte ich wirklich noch nicht viel. Ich konnte nicht wirklich über Gefühle sprechen, geschweige denn diese auch ausleben und verstehen. Heute kenne ich große Teile der Gründe und hoffe auch, damit besser umgehen zu können.
+
+Ich kannte mich eigentlich selber nicht so richtig, war aber sehr zufrieden mit mir. Ich war auch der einzige. In der Corona-Zeit hatte ich mich immer mehr von meiner Familie abgesondert und mich im wörtlichen Sinne in den Keller zurück gezogen.
+
+Erst als meine Frau mich betrogen hatte musste ich etwas ändern. Ich hatte zu der Zeit noch ein sehr altes Beziehungsbild, bzw. Lebensmodell, so, dass ich deswegen echt angepisst war. Ich konnte keine Grenzen setzen, ich konnte nicht über Gefühle reden und ich konnte mich auch nicht selbst reflektieren. Ich wusste nur, so war es scheiße. Also machte ich mich auf, mich selber wieder in die Spur zu bringen. Dazu brauchte ich *nur* folgendes:
+
+- Ich musste abnehmen. Aus drei Gründen. Zum Einen war es nicht mehr gesund, soviel, wie ich gewogen habe und zum Anderen habe ich mich selber auch nicht mehr als attraktiv wahrgenommen. Hinzu kommt noch ein dritter Grund: Meine Ausdauer in allen Belangen war unterirdisch. Deswegen hab ich beschlossen, abzunehmen. Ich hab erst mal komplett auf Süßes und auf Chips und auf alles verzichtet, was ich nur aus Langeweile gegessen habe. Dann hab ich immer mehr auf mein Hungergefühl geachtet und so hab ich es in einem halben Jahr von 95kg auf 65kg geschafft und halte dieses Gewicht nun schon ca. 2 Jahre. Das gibt mir wieder mehr Selbstvertrauen, Selbstwertgefühl und generell fühle ich mich viel fitter und wohler, als zuvor.
+- Ich musste lernen, die Welt wieder positiv zu sehen. Ich musste viel über meine Gefühle lernen und wie ich sie wieder ins Positive bringe. Ich musste lernen, das ich verantwortlich für meine Gefühle und Emotionen bin. Ich kann die Schuld nicht im Außen suchen. Ich bin auch nicht verantwortlich für die Gefühle anderer. Hier habe ich viel gelernt über Liebe, Grenzen, Lebensmodelle, innere Kinder, Bindungsprobleme, Kommunikation, etc. . Das sowohl theoretisch über Webseminare, Vorlesungen, Bücher, als auch in der Praxis durch den tatsächlichen Versuch, es zu leben.
+- Mit meinem wiederhergestellten, Selbstvertrauen, meiner wachsenden Praxis im Umgang mit meinen Gefühlen und in der Kommunikation habe ich viele total tolle Menschen kennen gelernt und mit ihnen komplett neue Lebensmodelle, Vorstellungen und Erkenntnisse über mich und die Welt. Ich habe gelernt, wie toll es ist, vorurteilsfrei und offen die Welt und die Menschen kennen lernen zu dürfen.
+
+All diese Punkte führten dazu, dass ich mich wieder richtig gut und vollständig und im Leben befindlich fühle und wieder mit einer sehr offenen, achtsamen und positiven Stimmung durchs Leben gehen kann, und ich wieder Freude an allem habe, was ich so mache.
+
diff --git a/homepage/content/gedanken/_index.md b/homepage/content/gedanken/_index.md
new file mode 100644
index 0000000..556d04b
--- /dev/null
+++ b/homepage/content/gedanken/_index.md
@@ -0,0 +1,5 @@
+---
+title: "Gedanken"
+name: Thomas
+author: Thomas
+---
diff --git a/homepage/content/gedanken/creating-a-new-theme.md b/homepage/content/gedanken/creating-a-new-theme.md
new file mode 100644
index 0000000..3552d92
--- /dev/null
+++ b/homepage/content/gedanken/creating-a-new-theme.md
@@ -0,0 +1,1145 @@
+---
+title: "Creating a New Theme"
+date: 2021-10-22T17:12:11+07:00
+comment: true
+author: Thomas
+tags: ["hugo"]
+---
+
+
+## Introduction
+
+This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I'll explain how Hugo uses templates and how you can organize your templates to create a theme. I won't cover using CSS to style your theme.
+
+We'll start with creating a new site with a very basic template. Then we'll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.
+
+In this tutorial, commands that you enter will start with the "$" prompt. The output will follow. Lines that start with "#" are comments that I've added to explain a point. When I show updates to a file, the ":wq" on the last line means to save the file.
+
+Here's an example:
+
+```
+## this is a comment
+$ echo this is a command
+this is a command
+
+## edit the file
+$ vi foo.md
+---
+date: "2014-09-28"
+title: "creating a new theme"
+---
+
+bah and humbug
+:wq
+
+## show it
+$ cat foo.md
+---
+date: "2014-09-28"
+title: "creating a new theme"
+---
+
+bah and humbug
+$
+```
+
+
+## Some Definitions
+
+There are a few concepts that you need to understand before creating a theme.
+
+### Skins
+
+Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.
+
+You have two ways to create a skin. The simplest way is to create it in the ```layouts/``` directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the ```layouts/``` directory so it will always find the skin.
+
+Your second choice is to create it in a sub-directory of the ```themes/``` directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?
+
+The difference between creating a skin in ```layouts/``` and creating it in ```themes/``` is very subtle. A skin in ```layouts/``` can’t be customized without updating the templates and static files that it is built from. A skin created in ```themes/```, on the other hand, can be and that makes it easier for other people to use it.
+
+The rest of this tutorial will call a skin created in the ```themes/``` directory a theme.
+
+Note that you can use this tutorial to create a skin in the ```layouts/``` directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.
+
+### The Home Page
+
+The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html.
+
+### Site Configuration File
+
+When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it.
+
+Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your ```content/``` directory and template files in your ```themes/``` directory. It will create HTML files in your ```public/``` directory. You can change this by specifying alternate locations in the configuration file.
+
+### Content
+
+Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML.
+
+#### Front Matter
+
+The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or JSON. Unlike the configuration file, Hugo doesn’t use the file’s extension to know the format. It looks for markers to signal the type. TOML is surrounded by “`---`”, YAML by “`---`”, and JSON is enclosed in curly braces. I prefer to use TOML, so you’ll need to translate my examples if you prefer YAML or JSON.
+
+The information in the front matter is passed into the template before the content is rendered into HTML.
+
+#### Markdown
+
+Content is written in Markdown which makes it easier to create the content. Hugo runs the content through a Markdown engine to create the HTML which will be written to the output file.
+
+### Template Files
+
+Hugo uses template files to render content into HTML. Template files are a bridge between the content and presentation. Rules in the template define what content is published, where it's published to, and how it will rendered to the HTML file. The template guides the presentation by specifying the style to use.
+
+There are three types of templates: single, list, and partial. Each type takes a bit of content as input and transforms it based on the commands in the template.
+
+Hugo uses its knowledge of the content to find the template file used to render the content. If it can’t find a template that is an exact match for the content, it will shift up a level and search from there. It will continue to do so until it finds a matching template or runs out of templates to try. If it can’t find a template, it will use the default template for the site.
+
+Please note that you can use the front matter to influence Hugo’s choice of templates.
+
+#### Single Template
+
+A single template is used to render a single piece of content. For example, an article or post would be a single piece of content and use a single template.
+
+#### List Template
+
+A list template renders a group of related content. That could be a summary of recent postings or all articles in a category. List templates can contain multiple groups.
+
+The homepage template is a special type of list template. Hugo assumes that the home page of your site will act as the portal for the rest of the content in the site.
+
+#### Partial Template
+
+A partial template is a template that can be included in other templates. Partial templates must be called using the “partial” template command. They are very handy for rolling up common behavior. For example, your site may have a banner that all pages use. Instead of copying the text of the banner into every single and list template, you could create a partial with the banner in it. That way if you decide to change the banner, you only have to change the partial template.
+
+## Create a New Site
+
+Let's use Hugo to create a new web site. I'm a Mac user, so I'll create mine in my home directory, in the Sites folder. If you're using Linux, you might have to create the folder first.
+
+The "new site" command will create a skeleton of a site. It will give you the basic directory structure and a useable configuration file.
+
+```
+$ hugo new site ~/Sites/zafta
+$ cd ~/Sites/zafta
+$ ls -l
+total 8
+drwxr-xr-x  7 quoha  staff  238 Sep 29 16:49 .
+drwxr-xr-x  3 quoha  staff  102 Sep 29 16:49 ..
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+$
+```
+
+Take a look in the content/ directory to confirm that it is empty.
+
+The other directories (archetypes/, layouts/, and static/) are used when customizing a theme. That's a topic for a different tutorial, so please ignore them for now.
+
+### Generate the HTML For the New Site
+
+Running the `hugo` command with no options will read all the available content and generate the HTML files. It will also copy all static files (that's everything that's not content). Since we have an empty site, it won't do much, but it will do it very quickly.
+
+```
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+$
+```
+
+The "`--verbose`" flag gives extra information that will be helpful when we build the template. Every line of the output that starts with "INFO:" or "WARN:" is present because we used that flag. The lines that start with "WARN:" are warning messages. We'll go over them later.
+
+We can verify that the command worked by looking at the directory again.
+
+```
+$ ls -l
+total 8
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+$
+```
+
+See that new public/ directory? Hugo placed all generated content there. When you're ready to publish your web site, that's the place to start. For now, though, let's just confirm that we have what we'd expect from a site with no content.
+
+```
+$ ls -l public
+total 16
+-rw-r--r--  1 quoha  staff  416 Sep 29 17:02 index.xml
+-rw-r--r--  1 quoha  staff  262 Sep 29 17:02 sitemap.xml
+$
+```
+
+Hugo created two XML files, which is standard, but there are no HTML files.
+
+
+
+### Test the New Site
+
+Verify that you can run the built-in web server. It will dramatically shorten your development cycle if you do. Start it by running the "server" command. If it is successful, you will see output similar to the following:
+
+```
+$ hugo server --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+Serving pages from /Users/quoha/Sites/zafta/public
+Web Server is available at http://localhost:1313
+Press Ctrl+C to stop
+```
+
+Connect to the listed URL (it's on the line that starts with "Web Server"). If everything is working correctly, you should get a page that shows the following:
+
+```
+index.xml
+sitemap.xml
+```
+
+That's a listing of your public/ directory. Hugo didn't create a home page because our site has no content. When there's no index.html file in a directory, the server lists the files in the directory, which is what you should see in your browser.
+
+Let’s go back and look at those warnings again.
+
+```
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+```
+
+That second warning is easier to explain. We haven’t created a template to be used to generate “page not found errors.” The 404 message is a topic for a separate tutorial.
+
+Now for the first warning. It is for the home page. You can tell because the first layout that it looked for was “index.html.” That’s only used by the home page.
+
+I like that the verbose flag causes Hugo to list the files that it's searching for. For the home page, they are index.html, _default/list.html, and _default/single.html. There are some rules that we'll cover later that explain the names and paths. For now, just remember that Hugo couldn't find a template for the home page and it told you so.
+
+At this point, you've got a working installation and site that we can build upon. All that’s left is to add some content and a theme to display it.
+
+## Create a New Theme
+
+Hugo doesn't ship with a default theme. There are a few available (I counted a dozen when I first installed Hugo) and Hugo comes with a command to create new themes.
+
+We're going to create a new theme called "zafta." Since the goal of this tutorial is to show you how to fill out the files to pull in your content, the theme will not contain any CSS. In other words, ugly but functional.
+
+All themes have opinions on content and layout. For example, Zafta uses "post" over "blog". Strong opinions make for simpler templates but differing opinions make it tougher to use themes. When you build a theme, consider using the terms that other themes do.
+
+
+### Create a Skeleton
+
+Use the hugo "new" command to create the skeleton of a theme. This creates the directory structure and places empty files for you to fill out.
+
+```
+$ hugo new theme zafta
+
+$ ls -l
+total 8
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes
+
+$ find themes -type f | xargs ls -l
+-rw-r--r--  1 quoha  staff  1081 Sep 29 17:31 themes/zafta/LICENSE.md
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/archetypes/default.md
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/index.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+-rw-r--r--  1 quoha  staff    93 Sep 29 17:31 themes/zafta/theme.toml
+$
+```
+
+The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype.
+
+Please take a minute to fill out the theme.toml and LICENSE.md files. They're optional, but if you're going to be distributing your theme, it tells the world who to praise (or blame). It's also nice to declare the license so that people will know how they can use the theme.
+
+```
+$ vi themes/zafta/theme.toml
+author: "michael d henderson"
+description: "a minimal working template"
+license: "MIT"
+name: "zafta"
+source_repo: ""
+tags: ["tags", "categories"]
+:wq
+
+## also edit themes/zafta/LICENSE.md and change
+## the bit that says "YOUR_NAME_HERE"
+```
+
+Note that the the skeleton's template files are empty. Don't worry, we'll be changing that shortly.
+
+```
+$ find themes/zafta -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/index.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+$
+```
+
+
+
+### Update the Configuration File to Use the Theme
+
+Now that we've got a theme to work with, it's a good idea to add the theme name to the configuration file. This is optional, because you can always add "-t zafta" on all your commands. I like to put it the configuration file because I like shorter command lines. If you don't put it in the configuration file or specify it on the command line, you won't use the template that you're expecting to.
+
+Edit the file to add the theme, add a title for the site, and specify that all of our content will use the TOML format.
+
+```
+$ vi config.toml
+theme: "zafta"
+baseurl: ""
+languageCode: "en-us"
+title: "zafta - totally refreshing"
+MetaDataFormat: "toml"
+:wq
+
+$
+```
+
+### Generate the Site
+
+Now that we have an empty theme, let's generate the site again.
+
+```
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+$
+```
+
+Did you notice that the output is different? The warning message for the home page has disappeared and we have an additional information line saying that Hugo is syncing from the theme's directory.
+
+Let's check the public/ directory to see what Hugo's created.
+
+```
+$ ls -l public
+total 16
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 css
+-rw-r--r--  1 quoha  staff    0 Sep 29 17:56 index.html
+-rw-r--r--  1 quoha  staff  407 Sep 29 17:56 index.xml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 js
+-rw-r--r--  1 quoha  staff  243 Sep 29 17:56 sitemap.xml
+$
+```
+
+Notice four things:
+
+1. Hugo created a home page. This is the file public/index.html.
+2. Hugo created a css/ directory.
+3. Hugo created a js/ directory.
+4. Hugo claimed that it created 0 pages. It created a file and copied over static files, but didn't create any pages. That's because it considers a "page" to be a file created directly from a content file. It doesn't count things like the index.html files that it creates automatically.
+
+#### The Home Page
+
+Hugo supports many different types of templates. The home page is special because it gets its own type of template and its own template file. The file, layouts/index.html, is used to generate the HTML for the home page. The Hugo documentation says that this is the only required template, but that depends. Hugo's warning message shows that it looks for three different templates:
+
+```
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+```
+
+If it can't find any of these, it completely skips creating the home page. We noticed that when we built the site without having a theme installed.
+
+When Hugo created our theme, it created an empty home page template. Now, when we build the site, Hugo finds the template and uses it to generate the HTML for the home page. Since the template file is empty, the HTML file is empty, too. If the template had any rules in it, then Hugo would have used them to generate the home page.
+
+```
+$ find . -name index.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 20:21 ./public/index.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 ./themes/zafta/layouts/index.html
+$
+```
+
+#### The Magic of Static
+
+Hugo does two things when generating the site. It uses templates to transform content into HTML and it copies static files into the site. Unlike content, static files are not transformed. They are copied exactly as they are.
+
+Hugo assumes that your site will use both CSS and JavaScript, so it creates directories in your theme to hold them. Remember opinions? Well, Hugo's opinion is that you'll store your CSS in a directory named css/ and your JavaScript in a directory named js/. If you don't like that, you can change the directory names in your theme directory or even delete them completely. Hugo's nice enough to offer its opinion, then behave nicely if you disagree.
+
+```
+$ find themes/zafta -type d | xargs ls -ld
+drwxr-xr-x  7 quoha  staff  238 Sep 29 17:38 themes/zafta
+drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes/zafta/archetypes
+drwxr-xr-x  5 quoha  staff  170 Sep 29 17:31 themes/zafta/layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/_default
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/partials
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/static
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/css
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/js
+$
+```
+
+## The Theme Development Cycle
+
+When you're working on a theme, you will make changes in the theme's directory, rebuild the site, and check your changes in the browser. Hugo makes this very easy:
+
+1. Purge the public/ directory.
+2. Run the built in web server in watch mode.
+3. Open your site in a browser.
+4. Update the theme.
+5. Glance at your browser window to see changes.
+6. Return to step 4.
+
+I’ll throw in one more opinion: never work on a theme on a live site. Always work on a copy of your site. Make changes to your theme, test them, then copy them up to your site. For added safety, use a tool like Git to keep a revision history of your content and your theme. Believe me when I say that it is too easy to lose both your mind and your changes.
+
+Check the main Hugo site for information on using Git with Hugo.
+
+### Purge the public/ Directory
+
+When generating the site, Hugo will create new files and update existing ones in the ```public/``` directory. It will not delete files that are no longer used. For example, files that were created in the wrong directory or with the wrong title will remain. If you leave them, you might get confused by them later. I recommend cleaning out your site prior to generating it.
+
+Note: If you're building on an SSD, you should ignore this. Churning on a SSD can be costly.
+
+### Hugo's Watch Option
+
+Hugo's "`--watch`" option will monitor the content/ and your theme directories for changes and rebuild the site automatically.
+
+### Live Reload
+
+Hugo's built in web server supports live reload. As pages are saved on the server, the browser is told to refresh the page. Usually, this happens faster than you can say, "Wow, that's totally amazing."
+
+### Development Commands
+
+Use the following commands as the basis for your workflow.
+
+```
+## purge old files. hugo will recreate the public directory.
+##
+$ rm -rf public
+##
+## run hugo in watch mode
+##
+$ hugo server --watch --verbose
+```
+
+Here's sample output showing Hugo detecting a change to the template for the home page. Once generated, the web browser automatically reloaded the page. I've said this before, it's amazing.
+
+
+```
+$ rm -rf public
+$ hugo server --watch --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+Watching for changes in /Users/quoha/Sites/zafta/content
+Serving pages from /Users/quoha/Sites/zafta/public
+Web Server is available at http://localhost:1313
+Press Ctrl+C to stop
+INFO: 2014/09/29 File System Event: ["/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html": MODIFY|ATTRIB]
+Change detected, rebuilding site
+
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 1 ms
+```
+
+## Update the Home Page Template
+
+The home page is one of a few special pages that Hugo creates automatically. As mentioned earlier, it looks for one of three files in the theme's layout/ directory:
+
+1. index.html
+2. _default/list.html
+3. _default/single.html
+
+We could update one of the default templates, but a good design decision is to update the most specific template available. That's not a hard and fast rule (in fact, we'll break it a few times in this tutorial), but it is a good generalization.
+
+### Make a Static Home Page
+
+Right now, that page is empty because we don't have any content and we don't have any logic in the template. Let's change that by adding some text to the template.
+
+```
+$ vi themes/zafta/layouts/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  <p>hugo says hello!</p>
+</body>
+</html>
+:wq
+
+$
+```
+
+Build the web site and then verify the results.
+
+```
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  78 Sep 29 21:26 public/index.html
+
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  <p>hugo says hello!</p>
+</html>
+```
+
+#### Live Reload
+
+Note: If you're running the server with the `--watch` option, you'll see different content in the file:
+
+```
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  <p>hugo says hello!</p>
+<script>document.write('<script src="http://'
+        + (location.host || 'localhost').split(':')[0]
+    + ':1313/livereload.js?mindelay=10"></'
+        + 'script>')</script></body>
+</html>
+```
+
+When you use `--watch`, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it.
+
+### Build a "Dynamic" Home Page
+
+"Dynamic home page?" Hugo's a static web site generator, so this seems an odd thing to say. I mean let's have the home page automatically reflect the content in the site every time Hugo builds it. We'll use iteration in the template to do that.
+
+#### Create New Posts
+
+Now that we have the home page generating static content, let's add some content to the site. We'll display these posts as a list on the home page and on their own page, too.
+
+Hugo has a command to generate a skeleton post, just like it does for sites and themes.
+
+```
+$ hugo --verbose new post/first.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/first.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
+ERROR: 2014/09/29 Unable to Cast <nil> to map[string]interface{}
+
+$
+```
+
+That wasn't very nice, was it?
+
+The "new" command uses an archetype to create the post file. Hugo created an empty default archetype file, but that causes an error when there's a theme. For me, the workaround was to create an archetypes file specifically for the post type.
+
+```
+$ vi themes/zafta/archetypes/post.md
+---
+Description: ""
+Tags: []
+Categories: []
+---
+:wq
+
+$ find themes/zafta/archetypes -type f | xargs ls -l
+-rw-r--r--  1 quoha  staff   0 Sep 29 21:53 themes/zafta/archetypes/default.md
+-rw-r--r--  1 quoha  staff  51 Sep 29 21:54 themes/zafta/archetypes/post.md
+
+$ hugo --verbose new post/first.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/first.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md
+/Users/quoha/Sites/zafta/content/post/first.md created
+
+$ hugo --verbose new post/second.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/second.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md
+/Users/quoha/Sites/zafta/content/post/second.md created
+
+$ ls -l content/post
+total 16
+-rw-r--r--  1 quoha  staff  104 Sep 29 21:54 first.md
+-rw-r--r--  1 quoha  staff  105 Sep 29 21:57 second.md
+
+$ cat content/post/first.md
+---
+Categories: []
+Description: ""
+Tags: []
+date: "2014-09-29T21:54:53-05:00"
+title: "first"
+
+---
+my first post
+
+$ cat content/post/second.md
+---
+Categories: []
+Description: ""
+Tags: []
+date: "2014-09-29T21:57:09-05:00"
+title: "second"
+
+---
+my second post
+
+$
+```
+
+Build the web site and then verify the results.
+
+```
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"category":"categories", "tag":"tags"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+$
+```
+
+The output says that it created 2 pages. Those are our new posts:
+
+```
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  78 Sep 29 22:13 public/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/first/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/second/index.html
+$
+```
+
+The new files are empty because because the templates used to generate the content are empty. The homepage doesn't show the new content, either. We have to update the templates to add the posts.
+
+### List and Single Templates
+
+In Hugo, we have three major kinds of templates. There's the home page template that we updated previously. It is used only by the home page. We also have "single" templates which are used to generate output for a single content file. We also have "list" templates that are used to group multiple pieces of content before generating output.
+
+Generally speaking, list templates are named "list.html" and single templates are named "single.html."
+
+There are three other types of templates: partials, content views, and terms. We will not go into much detail on these.
+
+### Add Content to the Homepage
+
+The home page will contain a list of posts. Let's update its template to add the posts that we just created. The logic in the template will run every time we build the site.
+
+```
+$ vi themes/zafta/layouts/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  {{ range first 10 .Data.Pages }}
+    <h1>{{ .Title }}</h1>
+  {{ end }}
+</body>
+</html>
+:wq
+
+$
+```
+
+Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between "{{" and "}}". In our template, the commands are:
+
+1. range
+2. .Title
+3. end
+
+The "range" command is an iterator. We're going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created.
+
+The ".Title" command prints the value of the "title" variable. Hugo pulls it from the front matter in the Markdown file.
+
+The "end" command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds "end." Everything between the "range" and "end" is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one.
+
+It's helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files.
+
+Build the web site and then verify the results.
+
+```
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  94 Sep 29 22:23 public/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/first/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/second/index.html
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+
+    <h1>second</h1>
+
+    <h1>first</h1>
+
+</body>
+</html>
+$
+```
+
+Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let's take a moment to appreciate what we've done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you've learned everything you need to know to build a theme. All that's really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine.
+
+And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don't worry, though, that's all to come.
+
+### Add Content to the Posts
+
+We're working with posts, which are in the content/post/ directory. That means that their section is "post" (and if we don't do something weird, their type is also "post").
+
+Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can't find one, then it will look in the _default/ directory. There are some twists that we'll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html.
+
+Now that we know the search rule, let's see what we actually have available:
+
+```
+$ find themes/zafta -name single.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  132 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+```
+
+We could create a new template, post/single.html, or change the default. Since we don't know of any other content types, let's start with updating the default.
+
+Remember, any content that we haven't created a template for will end up using this template. That can be good or bad. Bad because I know that we're going to be adding different types of content and we're going to end up undoing some of the changes we've made. It's good because we'll be able to see immediate results. It's also good to start here because we can start to build the basic layout for the site. As we add more content types, we'll refactor this file and move logic around. Hugo makes that fairly painless, so we'll accept the cost and proceed.
+
+Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you're building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That's a refreshing amount of joy right there.
+
+#### Update the Template File
+
+```
+$ vi themes/zafta/layouts/_default/single.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{ .Title }}</title>
+</head>
+<body>
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+</body>
+</html>
+:wq
+
+$
+```
+
+Build the web site and verify the results.
+
+```
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff   94 Sep 29 22:40 public/index.html
+-rw-r--r--  1 quoha  staff  125 Sep 29 22:40 public/post/first/index.html
+-rw-r--r--  1 quoha  staff    0 Sep 29 22:40 public/post/index.html
+-rw-r--r--  1 quoha  staff  128 Sep 29 22:40 public/post/second/index.html
+
+$ cat public/post/first/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>first</title>
+</head>
+<body>
+  <h1>first</h1>
+  <p>my first post</p>
+
+</body>
+</html>
+
+$ cat public/post/second/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>second</title>
+</head>
+<body>
+  <h1>second</h1>
+  <p>my second post</p>
+
+</body>
+</html>
+$
+```
+
+Notice that the posts now have content. You can go to localhost:1313/post/first to verify.
+
+### Linking to Content
+
+The posts are on the home page. Let's add a link from there to the post. Since this is the home page, we'll update its template.
+
+```
+$ vi themes/zafta/layouts/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  {{ range first 10 .Data.Pages }}
+    <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+  {{ end }}
+</body>
+</html>
+```
+
+Build the web site and verify the results.
+
+```
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  149 Sep 29 22:44 public/index.html
+-rw-r--r--  1 quoha  staff  125 Sep 29 22:44 public/post/first/index.html
+-rw-r--r--  1 quoha  staff    0 Sep 29 22:44 public/post/index.html
+-rw-r--r--  1 quoha  staff  128 Sep 29 22:44 public/post/second/index.html
+
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+
+    <h1><a href="/post/second/">second</a></h1>
+
+    <h1><a href="/post/first/">first</a></h1>
+
+</body>
+</html>
+
+$
+```
+
+### Create a Post Listing
+
+We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let's make it show a list of all posts (not just the first ten).
+
+We need to decide which template to update. This will be a listing, so it should be a list template. Let's take a quick look and see which list templates are available.
+
+```
+$ find themes/zafta -name list.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+```
+
+As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don't have multiple content types, so let's stay consistent and update the default list template.
+
+## Creating Top Level Pages
+
+Let's add an "about" page and display it at the top level (as opposed to a sub-level like we did with posts).
+
+The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let's verify that by creating an "about" page at the top level:
+
+```
+$ vi content/about.md
+---
+title: "about"
+description: "about this site"
+date: "2014-09-27"
+slug: "about time"
+---
+
+## about us
+
+i'm speechless
+:wq
+```
+
+Generate the web site and verify the results.
+
+```
+$ find public -name '*.html' | xargs ls -l
+-rw-rw-r--  1 mdhender  staff   334 Sep 27 15:08 public/about-time/index.html
+-rw-rw-r--  1 mdhender  staff   527 Sep 27 15:08 public/index.html
+-rw-rw-r--  1 mdhender  staff   358 Sep 27 15:08 public/post/first-post/index.html
+-rw-rw-r--  1 mdhender  staff     0 Sep 27 15:08 public/post/index.html
+-rw-rw-r--  1 mdhender  staff   342 Sep 27 15:08 public/post/second-post/index.html
+```
+
+Notice that the page wasn't created at the top level. It was created in a sub-directory named 'about-time/'. That name came from our slug. Hugo will use the slug to name the generated content. It's a reasonable default, by the way, but we can learn a few things by fighting it for this file.
+
+One other thing. Take a look at the home page.
+
+```
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+    <h1><a href="http://localhost:1313/post/theme/">creating a new theme</a></h1>
+    <h1><a href="http://localhost:1313/about-time/">about</a></h1>
+    <h1><a href="http://localhost:1313/post/second-post/">second</a></h1>
+    <h1><a href="http://localhost:1313/post/first-post/">first</a></h1>
+<script>document.write('<script src="http://'
+        + (location.host || 'localhost').split(':')[0]
+		+ ':1313/livereload.js?mindelay=10"></'
+        + 'script>')</script></body>
+</html>
+```
+
+Notice that the "about" link is listed with the posts? That's not desirable, so let's change that first.
+
+```
+$ vi themes/zafta/layouts/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  <h1>posts</h1>
+  {{ range first 10 .Data.Pages }}
+    {{ if eq .Type "post"}}
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    {{ end }}
+  {{ end }}
+
+  <h1>pages</h1>
+  {{ range .Data.Pages }}
+    {{ if eq .Type "page" }}
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    {{ end }}
+  {{ end }}
+</body>
+</html>
+:wq
+```
+
+Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it.
+
+But, that about page still renders to about-time/index.html.
+
+```
+$ find public -name '*.html' | xargs ls -l
+-rw-rw-r--  1 mdhender  staff    334 Sep 27 15:33 public/about-time/index.html
+-rw-rw-r--  1 mdhender  staff    645 Sep 27 15:33 public/index.html
+-rw-rw-r--  1 mdhender  staff    358 Sep 27 15:33 public/post/first-post/index.html
+-rw-rw-r--  1 mdhender  staff      0 Sep 27 15:33 public/post/index.html
+-rw-rw-r--  1 mdhender  staff    342 Sep 27 15:33 public/post/second-post/index.html
+```
+
+Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let's do it the hard way and change the permalink in the configuration file.
+
+```
+$ vi config.toml
+[permalinks]
+	page: "/:title/"
+	about: "/:filename/"
+```
+
+Generate the web site and verify that this didn't work. Hugo lets "slug" or "URL" override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place.
+
+## Sharing Templates
+
+If you've been following along, you probably noticed that posts have titles in the browser and the home page doesn't. That's because we didn't put the title in the home page's template (layouts/index.html). That's an easy thing to do, but let's look at a different option.
+
+We can put the common bits into a shared template that's stored in the themes/zafta/layouts/partials/ directory.
+
+### Create the Header and Footer Partials
+
+In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme's presentation.
+
+```
+$ vi themes/zafta/layouts/partials/header.html
+<!DOCTYPE html>
+<html>
+<head>
+	<title>{{ .Title }}</title>
+</head>
+<body>
+:wq
+
+$ vi themes/zafta/layouts/partials/footer.html
+</body>
+</html>
+:wq
+```
+
+### Update the Home Page Template to Use the Partials
+
+The most noticeable difference between a template call and a partials call is the lack of path:
+
+```
+{{ template "theme/partials/header.html" . }}
+```
+versus
+```
+{{ partial "header.html" . }}
+```
+Both pass in the context.
+
+Let's change the home page template to use these new partials.
+
+```
+$ vi themes/zafta/layouts/index.html
+{{ partial "header.html" . }}
+
+  <h1>posts</h1>
+  {{ range first 10 .Data.Pages }}
+    {{ if eq .Type "post"}}
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    {{ end }}
+  {{ end }}
+
+  <h1>pages</h1>
+  {{ range .Data.Pages }}
+    {{ if or (eq .Type "page") (eq .Type "about") }}
+      <h2><a href="{{ .Permalink }}">{{ .Type }} - {{ .Title }} - {{ .RelPermalink }}</a></h2>
+    {{ end }}
+  {{ end }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The title on the home page is now "your title here", which comes from the "title" variable in the config.toml file.
+
+### Update the Default Single Template to Use the Partials
+
+```
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file.
+
+## Add “Date Published” to Posts
+
+It's common to have posts display the date that they were written or published, so let's add that. The front matter of our posts has a variable named "date." It's usually the date the content was created, but let's pretend that's the value we want to display.
+
+### Add “Date Published” to the Template
+
+We'll start by updating the template used to render the posts. The template code will look like:
+
+```
+{{ .Date.Format "Mon, Jan 2, 2006" }}
+```
+
+Posts use the default single template, so we'll change that file.
+
+```
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+  <h1>{{ .Title }}</h1>
+  <h2>{{ .Date.Format "Mon, Jan 2, 2006" }}</h2>
+  {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The posts now have the date displayed in them. There's a problem, though. The "about" page also has the date displayed.
+
+As usual, there are a couple of ways to make the date display only on posts. We could do an "if" statement like we did on the home page. Another way would be to create a separate template for posts.
+
+The "if" solution works for sites that have just a couple of content types. It aligns with the principle of "code for today," too.
+
+Let's assume, though, that we've made our site so complex that we feel we have to create a new template type. In Hugo-speak, we're going to create a section template.
+
+Let's restore the default single template before we forget.
+
+```
+$ mkdir themes/zafta/layouts/post
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Now we'll update the post's version of the single template. If you remember Hugo's rules, the template engine will use this version over the default.
+
+```
+$ vi themes/zafta/layouts/post/single.html
+{{ partial "header.html" . }}
+
+  <h1>{{ .Title }}</h1>
+  <h2>{{ .Date.Format "Mon, Jan 2, 2006" }}</h2>
+  {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+
+```
+
+Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn't.
+
+### Don't Repeat Yourself
+
+DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you're figuring that out, accept that you'll be doing some refactoring. Hugo makes that easy and fast, so it's okay to delay splitting up a template.
diff --git a/homepage/content/gedanken/diagrams.md b/homepage/content/gedanken/diagrams.md
new file mode 100644
index 0000000..aa22735
--- /dev/null
+++ b/homepage/content/gedanken/diagrams.md
@@ -0,0 +1,221 @@
+---
+title: "Hugo Diagrams"
+date: 2022-10-25T17:12:11+07:00
+comment: true
+tags: ["hugo", "tech", "diagrams"]
+---
+
+Hugo version >= 0.93.0
+
+## GoAT Diagrams (Ascii)
+
+Hugo! supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
+
+````
+```goat
+      .               .                .               .--- 1          .-- 1     / 1
+     / \              |                |           .---+            .-+         +
+    /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
+   +     +        |       |        |       |    ---+            ---+          +
+  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
+ /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
+ 1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4
+
+```
+````
+
+Will be rendered as:
+
+```goat
+
+          .               .                .               .--- 1          .-- 1     / 1
+         / \              |                |           .---+            .-+         +
+        /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
+       +     +        |       |        |       |    ---+            ---+          +
+      / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
+     /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
+     1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4
+```
+
+## GoAT Diagrams Examples
+
+### Graphics
+
+```goat
+                                                                             .
+    0       3                          P *              Eye /         ^     /
+     *-------*      +y                    \                +)          \   /  Reflection
+  1 /|    2 /|       ^                     \                \           \ v
+   *-------* |       |                v0    \       v3           --------*--------
+   | |4    | |7      |                  *----\-----*
+   | *-----|-*       +-----> +x        /      v X   \          .-.<--------        o
+   |/      |/       /                 /        o     \        | / | Refraction    / \
+   *-------*       v                 /                \        +-'               /   \
+  5       6      +z              v1 *------------------* v2    |                o-----o
+                                                               v
+
+```
+
+### Complex
+
+```goat
++-------------------+                           ^                      .---.
+|    A Box          |__.--.__    __.-->         |      .-.             |   |
+|                   |        '--'               v     | * |<---        |   |
++-------------------+                                  '-'             |   |
+                       Round                                       *---(-. |
+  .-----------------.  .-------.    .----------.         .-------.     | | |
+ |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
+ | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
+ '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
+    |            |   |    | '---.        |               '-------'       |       '-+------'
+    |<---------->|   |    |      |       v                Interior                 |     ^
+    '           <---'      '----'   .-----------.              ---.     .---       v     |
+ .------------------.  Diag line    | .-------. +---.              \   /           .     |
+ |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
+ |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
+ '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
+    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
+    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
+    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
+ <--+---+-----'       |     /|\                                                    |  | 3 |
+                      v                             not:line    'quotes'        .-'   '---'
+  .-.             .---+--------.            /            A || B   *bold*       |        ^
+ |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
+  '-'             '---------+--'          /           Nor/is this.            ---
+
+```
+
+### Process
+
+```goat
+                                      .
+   .---------.                       / \
+  |   START   |                     /   \        .-+-------+-.      ___________
+   '----+----'    .-------.    A   /     \   B   | |COMPLEX| |     /           \      .-.
+        |        |   END   |<-----+CHOICE +----->| |       | +--->+ PREPARATION +--->| X |
+        v         '-------'        \     /       | |PROCESS| |     \___________/      '-'
+    .---------.                     \   /        '-+---+---+-'
+   /  INPUT  /                       \ /
+  '-----+---'                         '
+        |                             ^
+        v                             |
+  .-----------.                 .-----+-----.        .-.
+  |  PROCESS  +---------------->|  PROCESS  |<------+ X |
+  '-----------'                 '-----------'        '-'
+```
+
+### File tree
+
+Created from <https://arthursonzogni.com/Diagon/#Tree>
+
+```goat  { width=300  color="orange" }
+───Linux─┬─Android
+         ├─Debian─┬─Ubuntu─┬─Lubuntu
+         │        │        ├─Kubuntu
+         │        │        ├─Xubuntu
+         │        │        └─Xubuntu
+         │        └─Mint
+         ├─Centos
+         └─Fedora
+```
+
+
+### Sequence Diagram
+
+<https://arthursonzogni.com/Diagon/#Sequence>
+
+```goat { class="w-40" }
+┌─────┐       ┌───┐
+│Alice│       │Bob│
+└──┬──┘       └─┬─┘
+   │            │
+   │ Hello Bob! │
+   │───────────>│
+   │            │
+   │Hello Alice!│
+   │<───────────│
+┌──┴──┐       ┌─┴─┐
+│Alice│       │Bob│
+└─────┘       └───┘
+
+```
+
+
+### Flowchart
+
+<https://arthursonzogni.com/Diagon/#Flowchart>
+
+```goat
+   _________________
+  ╱                 ╲                                                     ┌─────┐
+ ╱ DO YOU UNDERSTAND ╲____________________________________________________│GOOD!│
+ ╲ FLOW CHARTS?      ╱yes                                                 └──┬──┘
+  ╲_________________╱                                                        │
+           │no                                                               │
+  _________▽_________                    ______________________              │
+ ╱                   ╲                  ╱                      ╲    ┌────┐   │
+╱ OKAY, YOU SEE THE   ╲________________╱ ... AND YOU CAN SEE    ╲___│GOOD│   │
+╲ LINE LABELED 'YES'? ╱yes             ╲ THE ONES LABELED 'NO'? ╱yes└──┬─┘   │
+ ╲___________________╱                  ╲______________________╱       │     │
+           │no                                     │no                 │     │
+   ________▽_________                     _________▽__________         │     │
+  ╱                  ╲    ┌───────────┐  ╱                    ╲        │     │
+ ╱ BUT YOU SEE THE    ╲___│WAIT, WHAT?│ ╱ BUT YOU JUST         ╲___    │     │
+ ╲ ONES LABELED 'NO'? ╱yes└───────────┘ ╲ FOLLOWED THEM TWICE? ╱yes│   │     │
+  ╲__________________╱                   ╲____________________╱    │   │     │
+           │no                                     │no             │   │     │
+       ┌───▽───┐                                   │               │   │     │
+       │LISTEN.│                                   └───────┬───────┘   │     │
+       └───┬───┘                                    ┌──────▽─────┐     │     │
+     ┌─────▽────┐                                   │(THAT WASN'T│     │     │
+     │I HATE YOU│                                   │A QUESTION) │     │     │
+     └──────────┘                                   └──────┬─────┘     │     │
+                                                      ┌────▽───┐       │     │
+                                                      │SCREW IT│       │     │
+                                                      └────┬───┘       │     │
+                                                           └─────┬─────┘     │
+                                                                 │           │
+                                                                 └─────┬─────┘
+                                                               ┌───────▽──────┐
+                                                               │LET'S GO DRING│
+                                                               └───────┬──────┘
+                                                             ┌─────────▽─────────┐
+                                                             │HEY, I SHOULD TRY  │
+                                                             │INSTALLING FREEBSD!│
+                                                             └───────────────────┘
+
+```
+
+
+### Table
+
+<https://arthursonzogni.com/Diagon/#Table>
+
+```goat { class="w-80 dark-blue" }
+┌────────────────────────────────────────────────┐
+│                                                │
+├────────────────────────────────────────────────┤
+│SYNTAX    : { PRODUCTION } .                   │
+├────────────────────────────────────────────────┤
+│PRODUCTION: IDENTIFIER "=" EXPRESSION "." .    │
+├────────────────────────────────────────────────┤
+│EXPRESSION: TERM { "|" TERM } .                │
+├────────────────────────────────────────────────┤
+│TERM      : FACTOR { FACTOR } .                │
+├────────────────────────────────────────────────┤
+│FACTOR    : IDENTIFIER                         │
+├────────────────────────────────────────────────┤
+│          | LITERAL                             │
+├────────────────────────────────────────────────┤
+│          | "[" EXPRESSION "]"                  │
+├────────────────────────────────────────────────┤
+│          | "(" EXPRESSION ")"                  │
+├────────────────────────────────────────────────┤
+│          | "{" EXPRESSION "}" .                │
+├────────────────────────────────────────────────┤
+│IDENTIFIER: letter { letter } .                │
+├────────────────────────────────────────────────┤
+│LITERAL   : """" character { character } """" .│
+└────────────────────────────────────────────────┘
+```
diff --git a/homepage/content/gedanken/hugoisforlovers.md b/homepage/content/gedanken/hugoisforlovers.md
new file mode 100644
index 0000000..8680a20
--- /dev/null
+++ b/homepage/content/gedanken/hugoisforlovers.md
@@ -0,0 +1,82 @@
+---
+title: "Getting Started with Hugo"
+date: 2022-10-26T17:12:11+07:00
+comment: true
+tags: ["hugo"]
+---
+
+## Step 1. Install Hugo
+
+Go to [Hugo releases](https://github.com/spf13/hugo/releases) and download the
+appropriate version for your OS and architecture.
+
+Save it somewhere specific as we will be using it in the next step.
+
+More complete instructions are available at [Install Hugo](https://gohugo.io/getting-started/installing/)
+
+## Step 2. Build the Docs
+
+Hugo has its own example site which happens to also be the documentation site
+you are reading right now.
+
+Follow the following steps:
+
+```
+1. Clone the [Hugo repository](http://github.com/spf13/hugo)
+2. Go into the repo
+3. Run hugo in server mode and build the docs
+4. Open your browser to http://localhost:1313
+```
+
+Corresponding pseudo commands:
+
+```shell
+git clone https://github.com/spf13/hugo
+cd hugo
+/path/to/where/you/installed/hugo server --source=./docs
+> 29 pages created
+> 0 tags index created
+> in 27 ms
+> Web Server is available at http://localhost:1313
+> Press ctrl+c to stop
+```
+
+Once you've gotten here, follow along the rest of this page on your local build.
+
+## Step 3. Change the docs site
+
+Stop the Hugo process by hitting Ctrl+C.
+
+Now we are going to run hugo again, but this time with hugo in watch mode.
+
+```shell
+/path/to/hugo/from/step/1/hugo server --source=./docs --watch
+> 29 pages created
+> 0 tags index created
+> in 27 ms
+> Web Server is available at http://localhost:1313
+> Watching for changes in /Users/spf13/Code/hugo/docs/content
+> Press ctrl+c to stop
+```
+
+Open your [favorite editor](http://vim.spf13.com) and change one of the source
+content pages. How about changing this very file to *fix the typo*. How about changing this very file to *fix the typo*.
+
+Content files are found in `docs/content/`. Unless otherwise specified, files
+are located at the same relative location as the url, in our case
+`docs/content/overview/quickstart.md`.
+
+Change and save this file.. Notice what happened in your terminal.
+
+```shell
+> Change detected, rebuilding site
+
+> 29 pages created
+> 0 tags index created
+> in 26 ms
+```
+
+Refresh the browser and observe that the typo is now fixed.
+
+Notice how quick that was. Try to refresh the site before it's finished building. I double dare you.
+Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.
diff --git a/homepage/content/gedanken/introduce-hugo.md b/homepage/content/gedanken/introduce-hugo.md
new file mode 100644
index 0000000..305e4d9
--- /dev/null
+++ b/homepage/content/gedanken/introduce-hugo.md
@@ -0,0 +1,1141 @@
+---
+title: "Introduce Hugo"
+date: 2022-10-20T17:12:11+07:00
+comment: true
+tags: ["hugo", "tech"]
+---
+
+## Introduction
+
+This tutorial will show you how to create a simple theme in [Hugo](https://github.com/gohugoio/hugo). I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I'll explain how Hugo uses templates and how you can organize your templates to create a theme. I won't cover using CSS to style your theme.
+
+We'll start with creating a new site with a very basic template. Then we'll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.
+
+In this tutorial, commands that you enter will start with the "$" prompt. The output will follow. Lines that start with "#" are comments that I've added to explain a point. When I show updates to a file, the ":wq" on the last line means to save the file.
+
+Here's an example:
+
+```
+## this is a comment
+$ echo this is a command
+this is a command
+
+## edit the file
+$ vi foo.md
+---
+date: "2014-09-28"
+title: "creating a new theme"
+---
+
+bah and humbug
+:wq
+
+## show it
+$ cat foo.md
+---
+date: "2014-09-28"
+title: "creating a new theme"
+---
+
+bah and humbug
+$
+```
+
+
+## Some Definitions
+
+There are a few concepts that you need to understand before creating a theme.
+
+### Skins
+
+Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.
+
+You have two ways to create a skin. The simplest way is to create it in the ```layouts/``` directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the ```layouts/``` directory so it will always find the skin.
+
+Your second choice is to create it in a sub-directory of the ```themes/``` directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?
+
+The difference between creating a skin in ```layouts/``` and creating it in ```themes/``` is very subtle. A skin in ```layouts/``` can’t be customized without updating the templates and static files that it is built from. A skin created in ```themes/```, on the other hand, can be and that makes it easier for other people to use it.
+
+The rest of this tutorial will call a skin created in the ```themes/``` directory a theme.
+
+Note that you can use this tutorial to create a skin in the ```layouts/``` directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.
+
+### The Home Page
+
+The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html.
+
+### Site Configuration File
+
+When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it.
+
+Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your ```content/``` directory and template files in your ```themes/``` directory. It will create HTML files in your ```public/``` directory. You can change this by specifying alternate locations in the configuration file.
+
+### Content
+
+Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML.
+
+#### Front Matter
+
+The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or JSON. Unlike the configuration file, Hugo doesn’t use the file’s extension to know the format. It looks for markers to signal the type. TOML is surrounded by “`---`”, YAML by “`---`”, and JSON is enclosed in curly braces. I prefer to use TOML, so you’ll need to translate my examples if you prefer YAML or JSON.
+
+The information in the front matter is passed into the template before the content is rendered into HTML.
+
+#### Markdown
+
+Content is written in Markdown which makes it easier to create the content. Hugo runs the content through a Markdown engine to create the HTML which will be written to the output file.
+
+### Template Files
+
+Hugo uses template files to render content into HTML. Template files are a bridge between the content and presentation. Rules in the template define what content is published, where it's published to, and how it will rendered to the HTML file. The template guides the presentation by specifying the style to use.
+
+There are three types of templates: single, list, and partial. Each type takes a bit of content as input and transforms it based on the commands in the template.
+
+Hugo uses its knowledge of the content to find the template file used to render the content. If it can’t find a template that is an exact match for the content, it will shift up a level and search from there. It will continue to do so until it finds a matching template or runs out of templates to try. If it can’t find a template, it will use the default template for the site.
+
+Please note that you can use the front matter to influence Hugo’s choice of templates.
+
+#### Single Template
+
+A single template is used to render a single piece of content. For example, an article or post would be a single piece of content and use a single template.
+
+#### List Template
+
+A list template renders a group of related content. That could be a summary of recent postings or all articles in a category. List templates can contain multiple groups.
+
+The homepage template is a special type of list template. Hugo assumes that the home page of your site will act as the portal for the rest of the content in the site.
+
+#### Partial Template
+
+A partial template is a template that can be included in other templates. Partial templates must be called using the “partial” template command. They are very handy for rolling up common behavior. For example, your site may have a banner that all pages use. Instead of copying the text of the banner into every single and list template, you could create a partial with the banner in it. That way if you decide to change the banner, you only have to change the partial template.
+
+## Create a New Site
+
+Let's use Hugo to create a new web site. I'm a Mac user, so I'll create mine in my home directory, in the Sites folder. If you're using Linux, you might have to create the folder first.
+
+The "new site" command will create a skeleton of a site. It will give you the basic directory structure and a useable configuration file.
+
+```shell
+$ hugo new site ~/Sites/zafta
+$ cd ~/Sites/zafta
+$ ls -l
+total 8
+drwxr-xr-x  7 quoha  staff  238 Sep 29 16:49 .
+drwxr-xr-x  3 quoha  staff  102 Sep 29 16:49 ..
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+$
+```
+
+Take a look in the content/ directory to confirm that it is empty.
+
+The other directories (archetypes/, layouts/, and static/) are used when customizing a theme. That's a topic for a different tutorial, so please ignore them for now.
+
+### Generate the HTML For the New Site
+
+Running the `hugo` command with no options will read all the available content and generate the HTML files. It will also copy all static files (that's everything that's not content). Since we have an empty site, it won't do much, but it will do it very quickly.
+
+```shell
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+$
+```
+
+The "`--verbose`" flag gives extra information that will be helpful when we build the template. Every line of the output that starts with "INFO:" or "WARN:" is present because we used that flag. The lines that start with "WARN:" are warning messages. We'll go over them later.
+
+We can verify that the command worked by looking at the directory again.
+
+```shell
+$ ls -l
+total 8
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+$
+```
+
+See that new public/ directory? Hugo placed all generated content there. When you're ready to publish your web site, that's the place to start. For now, though, let's just confirm that we have what we'd expect from a site with no content.
+
+```shell
+$ ls -l public
+total 16
+-rw-r--r--  1 quoha  staff  416 Sep 29 17:02 index.xml
+-rw-r--r--  1 quoha  staff  262 Sep 29 17:02 sitemap.xml
+$
+```
+
+Hugo created two XML files, which is standard, but there are no HTML files.
+
+
+
+### Test the New Site
+
+Verify that you can run the built-in web server. It will dramatically shorten your development cycle if you do. Start it by running the "server" command. If it is successful, you will see output similar to the following:
+
+```shell
+$ hugo server --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+Serving pages from /Users/quoha/Sites/zafta/public
+Web Server is available at http://localhost:1313
+Press Ctrl+C to stop
+```
+
+Connect to the listed URL (it's on the line that starts with "Web Server"). If everything is working correctly, you should get a page that shows the following:
+
+```shell
+index.xml
+sitemap.xml
+```
+
+That's a listing of your public/ directory. Hugo didn't create a home page because our site has no content. When there's no index.html file in a directory, the server lists the files in the directory, which is what you should see in your browser.
+
+Let’s go back and look at those warnings again.
+
+```
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+```
+
+That second warning is easier to explain. We haven’t created a template to be used to generate “page not found errors.” The 404 message is a topic for a separate tutorial.
+
+Now for the first warning. It is for the home page. You can tell because the first layout that it looked for was “index.html.” That’s only used by the home page.
+
+I like that the verbose flag causes Hugo to list the files that it's searching for. For the home page, they are index.html, _default/list.html, and _default/single.html. There are some rules that we'll cover later that explain the names and paths. For now, just remember that Hugo couldn't find a template for the home page and it told you so.
+
+At this point, you've got a working installation and site that we can build upon. All that’s left is to add some content and a theme to display it.
+
+## Create a New Theme
+
+Hugo doesn't ship with a default theme. There are a few available (I counted a dozen when I first installed Hugo) and Hugo comes with a command to create new themes.
+
+We're going to create a new theme called "zafta." Since the goal of this tutorial is to show you how to fill out the files to pull in your content, the theme will not contain any CSS. In other words, ugly but functional.
+
+All themes have opinions on content and layout. For example, Zafta uses "post" over "blog". Strong opinions make for simpler templates but differing opinions make it tougher to use themes. When you build a theme, consider using the terms that other themes do.
+
+
+### Create a Skeleton
+
+Use the hugo "new" command to create the skeleton of a theme. This creates the directory structure and places empty files for you to fill out.
+
+```shell
+$ hugo new theme zafta
+
+$ ls -l
+total 8
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes
+
+$ find themes -type f | xargs ls -l
+-rw-r--r--  1 quoha  staff  1081 Sep 29 17:31 themes/zafta/LICENSE.md
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/archetypes/default.md
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/index.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+-rw-r--r--  1 quoha  staff    93 Sep 29 17:31 themes/zafta/theme.toml
+$
+```
+
+The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype.
+
+Please take a minute to fill out the theme.toml and LICENSE.md files. They're optional, but if you're going to be distributing your theme, it tells the world who to praise (or blame). It's also nice to declare the license so that people will know how they can use the theme.
+
+```shell
+$ vi themes/zafta/theme.toml
+author: "michael d henderson"
+description: "a minimal working template"
+license: "MIT"
+name: "zafta"
+source_repo: ""
+tags: ["tags", "categories"]
+:wq
+
+## also edit themes/zafta/LICENSE.md and change
+## the bit that says "YOUR_NAME_HERE"
+```
+
+Note that the the skeleton's template files are empty. Don't worry, we'll be changing that shortly.
+
+```shell
+$ find themes/zafta -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/index.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+$
+```
+
+### Update the Configuration File to Use the Theme
+
+Now that we've got a theme to work with, it's a good idea to add the theme name to the configuration file. This is optional, because you can always add "-t zafta" on all your commands. I like to put it the configuration file because I like shorter command lines. If you don't put it in the configuration file or specify it on the command line, you won't use the template that you're expecting to.
+
+Edit the file to add the theme, add a title for the site, and specify that all of our content will use the TOML format.
+
+```shell
+$ vi config.toml
+theme: "zafta"
+baseurl: ""
+languageCode: "en-us"
+title: "zafta - totally refreshing"
+MetaDataFormat: "toml"
+:wq
+
+$
+```
+
+### Generate the Site
+
+Now that we have an empty theme, let's generate the site again.
+
+```shell
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+$
+```
+
+Did you notice that the output is different? The warning message for the home page has disappeared and we have an additional information line saying that Hugo is syncing from the theme's directory.
+
+Let's check the public/ directory to see what Hugo's created.
+
+```shell
+$ ls -l public
+total 16
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 css
+-rw-r--r--  1 quoha  staff    0 Sep 29 17:56 index.html
+-rw-r--r--  1 quoha  staff  407 Sep 29 17:56 index.xml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 js
+-rw-r--r--  1 quoha  staff  243 Sep 29 17:56 sitemap.xml
+$
+```
+
+Notice four things:
+
+1. Hugo created a home page. This is the file public/index.html.
+2. Hugo created a css/ directory.
+3. Hugo created a js/ directory.
+4. Hugo claimed that it created 0 pages. It created a file and copied over static files, but didn't create any pages. That's because it considers a "page" to be a file created directly from a content file. It doesn't count things like the index.html files that it creates automatically.
+
+#### The Home Page
+
+Hugo supports many different types of templates. The home page is special because it gets its own type of template and its own template file. The file, layouts/index.html, is used to generate the HTML for the home page. The Hugo documentation says that this is the only required template, but that depends. Hugo's warning message shows that it looks for three different templates:
+
+```
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+```
+
+If it can't find any of these, it completely skips creating the home page. We noticed that when we built the site without having a theme installed.
+
+When Hugo created our theme, it created an empty home page template. Now, when we build the site, Hugo finds the template and uses it to generate the HTML for the home page. Since the template file is empty, the HTML file is empty, too. If the template had any rules in it, then Hugo would have used them to generate the home page.
+
+```shell
+$ find . -name index.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 20:21 ./public/index.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 ./themes/zafta/layouts/index.html
+$
+```
+
+#### The Magic of Static
+
+Hugo does two things when generating the site. It uses templates to transform content into HTML and it copies static files into the site. Unlike content, static files are not transformed. They are copied exactly as they are.
+
+Hugo assumes that your site will use both CSS and JavaScript, so it creates directories in your theme to hold them. Remember opinions? Well, Hugo's opinion is that you'll store your CSS in a directory named css/ and your JavaScript in a directory named js/. If you don't like that, you can change the directory names in your theme directory or even delete them completely. Hugo's nice enough to offer its opinion, then behave nicely if you disagree.
+
+```shell
+$ find themes/zafta -type d | xargs ls -ld
+drwxr-xr-x  7 quoha  staff  238 Sep 29 17:38 themes/zafta
+drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes/zafta/archetypes
+drwxr-xr-x  5 quoha  staff  170 Sep 29 17:31 themes/zafta/layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/_default
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/partials
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/static
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/css
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/js
+$
+```
+
+## The Theme Development Cycle
+
+When you're working on a theme, you will make changes in the theme's directory, rebuild the site, and check your changes in the browser. Hugo makes this very easy:
+
+1. Purge the public/ directory.
+2. Run the built in web server in watch mode.
+3. Open your site in a browser.
+4. Update the theme.
+5. Glance at your browser window to see changes.
+6. Return to step 4.
+
+I’ll throw in one more opinion: never work on a theme on a live site. Always work on a copy of your site. Make changes to your theme, test them, then copy them up to your site. For added safety, use a tool like Git to keep a revision history of your content and your theme. Believe me when I say that it is too easy to lose both your mind and your changes.
+
+Check the main Hugo site for information on using Git with Hugo.
+
+### Purge the public/ Directory
+
+When generating the site, Hugo will create new files and update existing ones in the ```public/``` directory. It will not delete files that are no longer used. For example, files that were created in the wrong directory or with the wrong title will remain. If you leave them, you might get confused by them later. I recommend cleaning out your site prior to generating it.
+
+Note: If you're building on an SSD, you should ignore this. Churning on a SSD can be costly.
+
+### Hugo's Watch Option
+
+Hugo's "`--watch`" option will monitor the content/ and your theme directories for changes and rebuild the site automatically.
+
+### Live Reload
+
+Hugo's built in web server supports live reload. As pages are saved on the server, the browser is told to refresh the page. Usually, this happens faster than you can say, "Wow, that's totally amazing."
+
+### Development Commands
+
+Use the following commands as the basis for your workflow.
+
+```
+## purge old files. hugo will recreate the public directory.
+##
+$ rm -rf public
+##
+## run hugo in watch mode
+##
+$ hugo server --watch --verbose
+```
+
+Here's sample output showing Hugo detecting a change to the template for the home page. Once generated, the web browser automatically reloaded the page. I've said this before, it's amazing.
+
+
+```shell
+$ rm -rf public
+$ hugo server --watch --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+Watching for changes in /Users/quoha/Sites/zafta/content
+Serving pages from /Users/quoha/Sites/zafta/public
+Web Server is available at http://localhost:1313
+Press Ctrl+C to stop
+INFO: 2014/09/29 File System Event: ["/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html": MODIFY|ATTRIB]
+Change detected, rebuilding site
+
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 1 ms
+```
+
+## Update the Home Page Template
+
+The home page is one of a few special pages that Hugo creates automatically. As mentioned earlier, it looks for one of three files in the theme's layout/ directory:
+
+1. index.html
+2. _default/list.html
+3. _default/single.html
+
+We could update one of the default templates, but a good design decision is to update the most specific template available. That's not a hard and fast rule (in fact, we'll break it a few times in this tutorial), but it is a good generalization.
+
+### Make a Static Home Page
+
+Right now, that page is empty because we don't have any content and we don't have any logic in the template. Let's change that by adding some text to the template.
+
+```shell
+$ vi themes/zafta/layouts/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  <p>hugo says hello!</p>
+</body>
+</html>
+:wq
+
+$
+```
+
+Build the web site and then verify the results.
+
+```shell
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  78 Sep 29 21:26 public/index.html
+
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  <p>hugo says hello!</p>
+</html>
+```
+
+#### Live Reload
+
+Note: If you're running the server with the `--watch` option, you'll see different content in the file:
+
+```shell
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  <p>hugo says hello!</p>
+<script>document.write('<script src="http://'
+        + (location.host || 'localhost').split(':')[0]
+    + ':1313/livereload.js?mindelay=10"></'
+        + 'script>')</script></body>
+</html>
+```
+
+When you use `--watch`, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it.
+
+### Build a "Dynamic" Home Page
+
+"Dynamic home page?" Hugo's a static web site generator, so this seems an odd thing to say. I mean let's have the home page automatically reflect the content in the site every time Hugo builds it. We'll use iteration in the template to do that.
+
+#### Create New Posts
+
+Now that we have the home page generating static content, let's add some content to the site. We'll display these posts as a list on the home page and on their own page, too.
+
+Hugo has a command to generate a skeleton post, just like it does for sites and themes.
+
+```shell
+$ hugo --verbose new post/first.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/first.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
+ERROR: 2014/09/29 Unable to Cast <nil> to map[string]interface{}
+
+$
+```
+
+That wasn't very nice, was it?
+
+The "new" command uses an archetype to create the post file. Hugo created an empty default archetype file, but that causes an error when there's a theme. For me, the workaround was to create an archetypes file specifically for the post type.
+
+```shell
+$ vi themes/zafta/archetypes/post.md
+---
+Description: ""
+Tags: []
+Categories: []
+---
+:wq
+
+$ find themes/zafta/archetypes -type f | xargs ls -l
+-rw-r--r--  1 quoha  staff   0 Sep 29 21:53 themes/zafta/archetypes/default.md
+-rw-r--r--  1 quoha  staff  51 Sep 29 21:54 themes/zafta/archetypes/post.md
+
+$ hugo --verbose new post/first.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/first.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md
+/Users/quoha/Sites/zafta/content/post/first.md created
+
+$ hugo --verbose new post/second.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/second.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md
+/Users/quoha/Sites/zafta/content/post/second.md created
+
+$ ls -l content/post
+total 16
+-rw-r--r--  1 quoha  staff  104 Sep 29 21:54 first.md
+-rw-r--r--  1 quoha  staff  105 Sep 29 21:57 second.md
+
+$ cat content/post/first.md
+---
+Categories: []
+Description: ""
+Tags: []
+date: "2014-09-29T21:54:53-05:00"
+title: "first"
+
+---
+my first post
+
+$ cat content/post/second.md
+---
+Categories: []
+Description: ""
+Tags: []
+date: "2014-09-29T21:57:09-05:00"
+title: "second"
+
+---
+my second post
+
+$
+```
+
+Build the web site and then verify the results.
+
+```shell
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"category":"categories", "tag":"tags"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+$
+```
+
+The output says that it created 2 pages. Those are our new posts:
+
+```shell
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  78 Sep 29 22:13 public/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/first/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/second/index.html
+$
+```
+
+The new files are empty because because the templates used to generate the content are empty. The homepage doesn't show the new content, either. We have to update the templates to add the posts.
+
+### List and Single Templates
+
+In Hugo, we have three major kinds of templates. There's the home page template that we updated previously. It is used only by the home page. We also have "single" templates which are used to generate output for a single content file. We also have "list" templates that are used to group multiple pieces of content before generating output.
+
+Generally speaking, list templates are named "list.html" and single templates are named "single.html."
+
+There are three other types of templates: partials, content views, and terms. We will not go into much detail on these.
+
+### Add Content to the Homepage
+
+The home page will contain a list of posts. Let's update its template to add the posts that we just created. The logic in the template will run every time we build the site.
+
+```shell
+$ vi themes/zafta/layouts/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  {{ range first 10 .Data.Pages }}
+    <h1>{{ .Title }}</h1>
+  {{ end }}
+</body>
+</html>
+:wq
+
+$
+```
+
+Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between "{{" and "}}". In our template, the commands are:
+
+1. range
+2. .Title
+3. end
+
+The "range" command is an iterator. We're going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created.
+
+The ".Title" command prints the value of the "title" variable. Hugo pulls it from the front matter in the Markdown file.
+
+The "end" command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds "end." Everything between the "range" and "end" is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one.
+
+It's helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files.
+
+Build the web site and then verify the results.
+
+```shell
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  94 Sep 29 22:23 public/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/first/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/second/index.html
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+
+    <h1>second</h1>
+
+    <h1>first</h1>
+
+</body>
+</html>
+$
+```
+
+Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let's take a moment to appreciate what we've done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you've learned everything you need to know to build a theme. All that's really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine.
+
+And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don't worry, though, that's all to come.
+
+### Add Content to the Posts
+
+We're working with posts, which are in the content/post/ directory. That means that their section is "post" (and if we don't do something weird, their type is also "post").
+
+Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can't find one, then it will look in the _default/ directory. There are some twists that we'll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html.
+
+Now that we know the search rule, let's see what we actually have available:
+
+```shell
+$ find themes/zafta -name single.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  132 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+```
+
+We could create a new template, post/single.html, or change the default. Since we don't know of any other content types, let's start with updating the default.
+
+Remember, any content that we haven't created a template for will end up using this template. That can be good or bad. Bad because I know that we're going to be adding different types of content and we're going to end up undoing some of the changes we've made. It's good because we'll be able to see immediate results. It's also good to start here because we can start to build the basic layout for the site. As we add more content types, we'll refactor this file and move logic around. Hugo makes that fairly painless, so we'll accept the cost and proceed.
+
+Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you're building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That's a refreshing amount of joy right there.
+
+#### Update the Template File
+
+```shell
+$ vi themes/zafta/layouts/_default/single.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{ .Title }}</title>
+</head>
+<body>
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+</body>
+</html>
+:wq
+
+$
+```
+
+Build the web site and verify the results.
+
+```shell
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff   94 Sep 29 22:40 public/index.html
+-rw-r--r--  1 quoha  staff  125 Sep 29 22:40 public/post/first/index.html
+-rw-r--r--  1 quoha  staff    0 Sep 29 22:40 public/post/index.html
+-rw-r--r--  1 quoha  staff  128 Sep 29 22:40 public/post/second/index.html
+
+$ cat public/post/first/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>first</title>
+</head>
+<body>
+  <h1>first</h1>
+  <p>my first post</p>
+
+</body>
+</html>
+
+$ cat public/post/second/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>second</title>
+</head>
+<body>
+  <h1>second</h1>
+  <p>my second post</p>
+
+</body>
+</html>
+$
+```
+
+Notice that the posts now have content. You can go to localhost:1313/post/first to verify.
+
+### Linking to Content
+
+The posts are on the home page. Let's add a link from there to the post. Since this is the home page, we'll update its template.
+
+```shell
+$ vi themes/zafta/layouts/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  {{ range first 10 .Data.Pages }}
+    <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+  {{ end }}
+</body>
+</html>
+```
+
+Build the web site and verify the results.
+
+```shell
+$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+
+$ find public -type f -name '*.html' | xargs ls -l
+-rw-r--r--  1 quoha  staff  149 Sep 29 22:44 public/index.html
+-rw-r--r--  1 quoha  staff  125 Sep 29 22:44 public/post/first/index.html
+-rw-r--r--  1 quoha  staff    0 Sep 29 22:44 public/post/index.html
+-rw-r--r--  1 quoha  staff  128 Sep 29 22:44 public/post/second/index.html
+
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+
+    <h1><a href="/post/second/">second</a></h1>
+
+    <h1><a href="/post/first/">first</a></h1>
+
+</body>
+</html>
+
+$
+```
+
+### Create a Post Listing
+
+We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let's make it show a list of all posts (not just the first ten).
+
+We need to decide which template to update. This will be a listing, so it should be a list template. Let's take a quick look and see which list templates are available.
+
+```shell
+$ find themes/zafta -name list.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+```
+
+As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don't have multiple content types, so let's stay consistent and update the default list template.
+
+## Creating Top Level Pages
+
+Let's add an "about" page and display it at the top level (as opposed to a sub-level like we did with posts).
+
+The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let's verify that by creating an "about" page at the top level:
+
+```shell
+$ vi content/about.md
+---
+title: "about"
+description: "about this site"
+date: "2014-09-27"
+slug: "about time"
+---
+
+## about us
+
+i'm speechless
+:wq
+```
+
+Generate the web site and verify the results.
+
+```shell
+$ find public -name '*.html' | xargs ls -l
+-rw-rw-r--  1 mdhender  staff   334 Sep 27 15:08 public/about-time/index.html
+-rw-rw-r--  1 mdhender  staff   527 Sep 27 15:08 public/index.html
+-rw-rw-r--  1 mdhender  staff   358 Sep 27 15:08 public/post/first-post/index.html
+-rw-rw-r--  1 mdhender  staff     0 Sep 27 15:08 public/post/index.html
+-rw-rw-r--  1 mdhender  staff   342 Sep 27 15:08 public/post/second-post/index.html
+```
+
+Notice that the page wasn't created at the top level. It was created in a sub-directory named 'about-time/'. That name came from our slug. Hugo will use the slug to name the generated content. It's a reasonable default, by the way, but we can learn a few things by fighting it for this file.
+
+One other thing. Take a look at the home page.
+
+```shell
+$ cat public/index.html
+<!DOCTYPE html>
+<html>
+<body>
+    <h1><a href="http://localhost:1313/post/theme/">creating a new theme</a></h1>
+    <h1><a href="http://localhost:1313/about-time/">about</a></h1>
+    <h1><a href="http://localhost:1313/post/second-post/">second</a></h1>
+    <h1><a href="http://localhost:1313/post/first-post/">first</a></h1>
+<script>document.write('<script src="http://'
+        + (location.host || 'localhost').split(':')[0]
+		+ ':1313/livereload.js?mindelay=10"></'
+        + 'script>')</script></body>
+</html>
+```
+
+Notice that the "about" link is listed with the posts? That's not desirable, so let's change that first.
+
+```shell
+$ vi themes/zafta/layouts/index.html
+<!DOCTYPE html>
+<html>
+<body>
+  <h1>posts</h1>
+  {{ range first 10 .Data.Pages }}
+    {{ if eq .Type "post"}}
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    {{ end }}
+  {{ end }}
+
+  <h1>pages</h1>
+  {{ range .Data.Pages }}
+    {{ if eq .Type "page" }}
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    {{ end }}
+  {{ end }}
+</body>
+</html>
+:wq
+```
+
+Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it.
+
+But, that about page still renders to about-time/index.html.
+
+```shell
+$ find public -name '*.html' | xargs ls -l
+-rw-rw-r--  1 mdhender  staff    334 Sep 27 15:33 public/about-time/index.html
+-rw-rw-r--  1 mdhender  staff    645 Sep 27 15:33 public/index.html
+-rw-rw-r--  1 mdhender  staff    358 Sep 27 15:33 public/post/first-post/index.html
+-rw-rw-r--  1 mdhender  staff      0 Sep 27 15:33 public/post/index.html
+-rw-rw-r--  1 mdhender  staff    342 Sep 27 15:33 public/post/second-post/index.html
+```
+
+Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let's do it the hard way and change the permalink in the configuration file.
+
+```shell
+$ vi config.toml
+[permalinks]
+	page: "/:title/"
+	about: "/:filename/"
+```
+
+Generate the web site and verify that this didn't work. Hugo lets "slug" or "URL" override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place.
+
+## Sharing Templates
+
+If you've been following along, you probably noticed that posts have titles in the browser and the home page doesn't. That's because we didn't put the title in the home page's template (layouts/index.html). That's an easy thing to do, but let's look at a different option.
+
+We can put the common bits into a shared template that's stored in the themes/zafta/layouts/partials/ directory.
+
+### Create the Header and Footer Partials
+
+In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme's presentation.
+
+```shell
+$ vi themes/zafta/layouts/partials/header.html
+<!DOCTYPE html>
+<html>
+<head>
+	<title>{{ .Title }}</title>
+</head>
+<body>
+:wq
+
+$ vi themes/zafta/layouts/partials/footer.html
+</body>
+</html>
+:wq
+```
+
+### Update the Home Page Template to Use the Partials
+
+The most noticeable difference between a template call and a partials call is the lack of path:
+
+```
+{{ template "theme/partials/header.html" . }}
+```
+versus
+```
+{{ partial "header.html" . }}
+```
+Both pass in the context.
+
+Let's change the home page template to use these new partials.
+
+```shell
+$ vi themes/zafta/layouts/index.html
+{{ partial "header.html" . }}
+
+  <h1>posts</h1>
+  {{ range first 10 .Data.Pages }}
+    {{ if eq .Type "post"}}
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    {{ end }}
+  {{ end }}
+
+  <h1>pages</h1>
+  {{ range .Data.Pages }}
+    {{ if or (eq .Type "page") (eq .Type "about") }}
+      <h2><a href="{{ .Permalink }}">{{ .Type }} - {{ .Title }} - {{ .RelPermalink }}</a></h2>
+    {{ end }}
+  {{ end }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The title on the home page is now "your title here", which comes from the "title" variable in the config.toml file.
+
+### Update the Default Single Template to Use the Partials
+
+```shell
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file.
+
+## Add “Date Published” to Posts
+
+It's common to have posts display the date that they were written or published, so let's add that. The front matter of our posts has a variable named "date." It's usually the date the content was created, but let's pretend that's the value we want to display.
+
+### Add “Date Published” to the Template
+
+We'll start by updating the template used to render the posts. The template code will look like:
+
+```
+{{ .Date.Format "Mon, Jan 2, 2006" }}
+```
+
+Posts use the default single template, so we'll change that file.
+
+```shell
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+  <h1>{{ .Title }}</h1>
+  <h2>{{ .Date.Format "Mon, Jan 2, 2006" }}</h2>
+  {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Generate the web site and verify the results. The posts now have the date displayed in them. There's a problem, though. The "about" page also has the date displayed.
+
+As usual, there are a couple of ways to make the date display only on posts. We could do an "if" statement like we did on the home page. Another way would be to create a separate template for posts.
+
+The "if" solution works for sites that have just a couple of content types. It aligns with the principle of "code for today," too.
+
+Let's assume, though, that we've made our site so complex that we feel we have to create a new template type. In Hugo-speak, we're going to create a section template.
+
+Let's restore the default single template before we forget.
+
+```shell
+$ mkdir themes/zafta/layouts/post
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial "header.html" . }}
+
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+```
+
+Now we'll update the post's version of the single template. If you remember Hugo's rules, the template engine will use this version over the default.
+
+```shell
+$ vi themes/zafta/layouts/post/single.html
+{{ partial "header.html" . }}
+
+  <h1>{{ .Title }}</h1>
+  <h2>{{ .Date.Format "Mon, Jan 2, 2006" }}</h2>
+  {{ .Content }}
+
+{{ partial "footer.html" . }}
+:wq
+
+```
+
+Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn't.
+
+### Don't Repeat Yourself
+
+DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you're figuring that out, accept that you'll be doing some refactoring. Hugo makes that easy and fast, so it's okay to delay splitting up a template.
diff --git a/homepage/content/gedanken/migrate-from-jekyll.md b/homepage/content/gedanken/migrate-from-jekyll.md
new file mode 100644
index 0000000..227d6f3
--- /dev/null
+++ b/homepage/content/gedanken/migrate-from-jekyll.md
@@ -0,0 +1,179 @@
+---
+title: "Migrate to Hugo from Jekyll"
+date: 2021-10-22T17:12:11+07:00
+comment: true
+tags: ["hugo"]
+---
+
+## Move static content to `static`
+
+Jekyll has a rule that any directory not starting with `_` will be copied as-is to the `_site` output. Hugo keeps all static content under `static`. You should therefore move it all there.
+With Jekyll, something that looked like
+
+```shell
+▾ <root>/
+    ▾ images/
+        logo.png
+```
+
+should become
+
+```shell
+▾ <root>/
+    ▾ static/
+        ▾ images/
+            logo.png
+```
+
+Additionally, you'll want any files that should reside at the root (such as `CNAME`) to be moved to `static`.
+
+## Create your Hugo configuration file
+
+Hugo can read your configuration as JSON, YAML or TOML. Hugo supports parameters custom configuration too. Refer to the [Hugo configuration documentation](/overview/configuration/) for details.
+
+## Set your configuration publish folder to `_site`
+
+The default is for Jekyll to publish to `_site` and for Hugo to publish to `public`. If, like me, you have [`_site` mapped to a git submodule on the `gh-pages` branch](http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.html), you'll want to do one of two alternatives:
+
+1. Change your submodule to point to map `gh-pages` to public instead of `_site` (recommended).
+
+```shell
+git submodule deinit _site
+git rm _site
+git submodule add -b gh-pages git@github.com:your-username/your-repo.git public
+```
+
+2. Or, change the Hugo configuration to use `_site` instead of `public`.
+
+```
+{
+    ..
+    "publishdir": "_site",
+    ..
+}
+```
+
+## Convert Jekyll templates to Hugo templates
+
+That's the bulk of the work right here. The documentation is your friend. You should refer to [Jekyll's template documentation](http://jekyllrb.com/docs/templates/) if you need to refresh your memory on how you built your blog and [Hugo's template](/layout/templates/) to learn Hugo's way.
+
+As a single reference data point, converting my templates for [heyitsalex.net](http://heyitsalex.net/) took me no more than a few hours.
+
+## Convert Jekyll plugins to Hugo shortcodes
+
+Jekyll has [plugins](http://jekyllrb.com/docs/plugins/); Hugo has [shortcodes](/doc/shortcodes/). It's fairly trivial to do a port.
+
+### Implementation
+
+As an example, I was using a custom [`image_tag`](https://github.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc06908ec/_plugins/image_tag.rb) plugin to generate figures with caption when running Jekyll. As I read about shortcodes, I found Hugo had a nice built-in shortcode that does exactly the same thing.
+
+Jekyll's plugin:
+
+```ruby
+module Jekyll
+  class ImageTag < Liquid::Tag
+    @url: nil
+    @caption: nil
+    @class: nil
+    @link: nil
+    // Patterns
+    IMAGE_URL_WITH_CLASS_AND_CAPTION =
+    IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK: /(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)->((https?:\/\/|\/)(\S+))(\s*)/i
+    IMAGE_URL_WITH_CAPTION: /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i
+    IMAGE_URL_WITH_CLASS: /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i
+    IMAGE_URL: /((https?:\/\/|\/)(\S+))/i
+    def initialize(tag_name, markup, tokens)
+      super
+      if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK
+        @class  : $1
+        @url    : $3
+        @caption: $7
+        @link: $9
+      elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION
+        @class  : $1
+        @url    : $3
+        @caption: $7
+      elsif markup =~ IMAGE_URL_WITH_CAPTION
+        @url    : $1
+        @caption: $5
+      elsif markup =~ IMAGE_URL_WITH_CLASS
+        @class: $1
+        @url  : $3
+      elsif markup =~ IMAGE_URL
+        @url: $1
+      end
+    end
+    def render(context)
+      if @class
+        source: "<figure class='#{@class}'>"
+      else
+        source: "<figure>"
+      end
+      if @link
+        source += "<a href=\"#{@link}\">"
+      end
+      source += "<img src=\"#{@url}\">"
+      if @link
+        source += "</a>"
+      end
+      source += "<figcaption>#{@caption}</figcaption>" if @caption
+      source += "</figure>"
+      source
+    end
+  end
+end
+Liquid::Template.register_tag('image', Jekyll::ImageTag)
+```
+
+is written as this Hugo shortcode:
+
+```html
+<!-- image -->
+<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
+    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
+        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
+    {{ if .Get "link"}}</a>{{ end }}
+    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+    <figcaption>{{ if isset .Params "title" }}
+        {{ .Get "title" }}{{ end }}
+        {{ if or (.Get "caption") (.Get "attr")}}<p>
+        {{ .Get "caption" }}
+        {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
+            {{ .Get "attr" }}
+        {{ if .Get "attrlink"}}</a> {{ end }}
+        </p> {{ end }}
+    </figcaption>
+    {{ end }}
+</figure>
+<!-- image -->
+```
+
+### Usage
+
+I simply changed:
+
+```
+{% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg "One of my favorite touristy-type photos. I secretly waited for the good light while we were "having fun" and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." ->http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}
+```
+
+to this (this example uses a slightly extended version named `fig`, different than the built-in `figure`):
+
+```
+{{%/* fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" title="One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" */%}}
+```
+
+As a bonus, the shortcode named parameters are, arguably, more readable.
+
+## Finishing touches
+
+### Fix content
+
+Depending on the amount of customization that was done with each post with Jekyll, this step will require more or less effort. There are no hard and fast rules here except that `hugo server --watch` is your friend. Test your changes and fix errors as needed.
+
+### Clean up
+
+You'll want to remove the Jekyll configuration at this point. If you have anything else that isn't used, delete it.
+
+## A practical example in a diff
+
+[Hey, it's Alex](http://heyitsalex.net/) was migrated in less than a _father-with-kids day_ from Jekyll to Hugo. You can see all the changes (and screw-ups) by looking at this [diff](https://github.com/alexandre-normand/alexandre-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b81495423294208cc74d610).
diff --git a/homepage/content/posts/my-first-post.md b/homepage/content/gedanken/my-first-post.md
similarity index 100%
rename from homepage/content/posts/my-first-post.md
rename to homepage/content/gedanken/my-first-post.md
diff --git a/homepage/content/warum.md b/homepage/content/warum.md
new file mode 100644
index 0000000..d3d1b8b
--- /dev/null
+++ b/homepage/content/warum.md
@@ -0,0 +1,12 @@
+---
+title: "Warum"
+---
+
+## Über mich und Warum
+
+### über mich
+Ich bin Thomas 
+
+### warum
+und ich schreibe hier auf dieser Page einfach meine Gedanken, wie sie mir kommen zu den Themen Liebe, Beziehungen und was da so alles an Zeug dazu gehört. Ich schreibe das im Wesentlichen für mich, um meine Gedanken ein wenig zu ordnen und zu strukturieren. Wenn Euch was gefällt, nehmt es für Euch. Kommentiert gerne die Gedanken, fügt Eure hinzu ...
+
diff --git a/homepage/content/warum/_index.md b/homepage/content/warum/_index.md
new file mode 100644
index 0000000..d3d1b8b
--- /dev/null
+++ b/homepage/content/warum/_index.md
@@ -0,0 +1,12 @@
+---
+title: "Warum"
+---
+
+## Über mich und Warum
+
+### über mich
+Ich bin Thomas 
+
+### warum
+und ich schreibe hier auf dieser Page einfach meine Gedanken, wie sie mir kommen zu den Themen Liebe, Beziehungen und was da so alles an Zeug dazu gehört. Ich schreibe das im Wesentlichen für mich, um meine Gedanken ein wenig zu ordnen und zu strukturieren. Wenn Euch was gefällt, nehmt es für Euch. Kommentiert gerne die Gedanken, fügt Eure hinzu ...
+
diff --git a/homepage/hugo.toml b/homepage/hugo.toml
index 10bfad7..85fa777 100644
--- a/homepage/hugo.toml
+++ b/homepage/hugo.toml
@@ -1,4 +1,50 @@
-baseURL = 'https://example.org/'
+baseURL = 'http://example.org/'
 locale = 'en-us'
-title = 'My New Hugo Project'
-theme = 'ananke'
+title = 'Thomas Internet Garden'
+theme = "shibui"
+
+[params.author]
+name = "Thomas"
+email = "Thomas.Sindt@gmx.de"
+
+[markup]
+  defaultMarkdownHandler = "goldmark"
+  # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
+  # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
+  [markup.highlight]
+    codeFences = true
+    guessSyntax = true
+    lineNos = false
+    noClasses = true
+    tabWidth = 4
+    style = "algol_nu"
+  [markup.tableOfContents]
+    startLevel = 2
+    endLevel = 4
+    ordered = true
+
+[menu]
+  [[menu.main]]
+    name = "Gedanken"
+    url = "/gedanken/"
+    weight = 1
+  [[menu.main]]
+    name = "Warum"
+    url = "/warum/"
+    weight = 2
+
+[build]
+  writeStats = true
+
+[frontmatter]
+  date = ['date', 'publishDate', 'lastmod']
+  expiryDate = ['expiryDate']
+  lastmod = [':git', 'lastmod', 'date', 'publishDate']
+  publishDate = ['publishDate', 'date']
+
+[caches]
+  [caches.images]
+    dir = ':cacheDir/images'
diff --git a/homepage/hugo.toml.old b/homepage/hugo.toml.old
new file mode 100644
index 0000000..b5a1c61
--- /dev/null
+++ b/homepage/hugo.toml.old
@@ -0,0 +1,10 @@
+baseURL = 'https://example.org/'
+locale = 'en-us'
+title = 'Thomas Internet Garden'
+theme = 'shibui'
+
+[params]
+  author = "Thomas Sindt"
+  email = "Thomas.Sindt@gmx.de"
+
+    
\ No newline at end of file
diff --git a/homepage/hugo_stats.json b/homepage/hugo_stats.json
new file mode 100644
index 0000000..774891d
--- /dev/null
+++ b/homepage/hugo_stats.json
@@ -0,0 +1,138 @@
+{
+  "htmlElements": {
+    "tags": [
+      "a",
+      "body",
+      "circle",
+      "code",
+      "details",
+      "div",
+      "em",
+      "footer",
+      "g",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "head",
+      "header",
+      "html",
+      "li",
+      "link",
+      "main",
+      "meta",
+      "nav",
+      "ol",
+      "p",
+      "path",
+      "polygon",
+      "pre",
+      "script",
+      "span",
+      "strong",
+      "summary",
+      "svg",
+      "text",
+      "time",
+      "title",
+      "ul"
+    ],
+    "classes": [
+      "back-link",
+      "back-nav",
+      "comments",
+      "current",
+      "dark-blue",
+      "goat",
+      "highlight",
+      "path-nav",
+      "reading-time",
+      "skip-link",
+      "svg-container",
+      "terminal-nav",
+      "terms-list",
+      "time",
+      "time-list",
+      "toc",
+      "toc-content",
+      "toc-title",
+      "w-40",
+      "w-80"
+    ],
+    "ids": [
+      "TableOfContents",
+      "a-practical-example-in-a-diff",
+      "add-content-to-the-homepage",
+      "add-content-to-the-posts",
+      "add-date-published-to-posts",
+      "add-date-published-to-the-template",
+      "build-a-dynamic-home-page",
+      "clean-up",
+      "complex",
+      "content",
+      "convert-jekyll-plugins-to-hugo-shortcodes",
+      "convert-jekyll-templates-to-hugo-templates",
+      "create-a-new-site",
+      "create-a-new-theme",
+      "create-a-post-listing",
+      "create-a-skeleton",
+      "create-new-posts",
+      "create-the-header-and-footer-partials",
+      "create-your-hugo-configuration-file",
+      "creating-top-level-pages",
+      "development-commands",
+      "dont-repeat-yourself",
+      "file-tree",
+      "finishing-touches",
+      "fix-content",
+      "flowchart",
+      "front-matter",
+      "generate-the-html-for-the-new-site",
+      "generate-the-site",
+      "goat-diagrams-ascii",
+      "goat-diagrams-examples",
+      "graphics",
+      "hugos-watch-option",
+      "implementation",
+      "introduction",
+      "linking-to-content",
+      "list-and-single-templates",
+      "list-template",
+      "live-reload",
+      "live-reload-1",
+      "main-content",
+      "make-a-static-home-page",
+      "markdown",
+      "move-static-content-to-static",
+      "partial-template",
+      "process",
+      "purge-the-public-directory",
+      "sequence-diagram",
+      "set-your-configuration-publish-folder-to-_site",
+      "sharing-templates",
+      "single-template",
+      "site-configuration-file",
+      "skins",
+      "some-definitions",
+      "step-1-install-hugo",
+      "step-2-build-the-docs",
+      "step-3-change-the-docs-site",
+      "table",
+      "template-files",
+      "test-the-new-site",
+      "the-home-page",
+      "the-home-page-1",
+      "the-magic-of-static",
+      "the-theme-development-cycle",
+      "update-the-configuration-file-to-use-the-theme",
+      "update-the-default-single-template-to-use-the-partials",
+      "update-the-home-page-template",
+      "update-the-home-page-template-to-use-the-partials",
+      "update-the-template-file",
+      "usage",
+      "warum",
+      "über-mich",
+      "über-mich-und-warum"
+    ]
+  }
+}
diff --git a/homepage/layouts/404.html b/homepage/layouts/404.html
new file mode 100644
index 0000000..c265a00
--- /dev/null
+++ b/homepage/layouts/404.html
@@ -0,0 +1,24 @@
+{{ define "main" }}
+  <h1>404 - Page Not Found</h1>
+  <p>The page you're looking for doesn't exist or has been moved.</p>
+  
+  <nav aria-label="404 navigation">
+    <ul>
+      <li><a href="{{ "/" | relURL }}">← Return to homepage</a></li>
+      {{ with site.Home }}
+        {{ with .GetPage "posts" }}
+          {{ if . }}
+            <li><a href="{{ .RelPermalink }}">Browse posts</a></li>
+          {{ end }}
+        {{ end }}
+      {{ end }}
+      {{ with site.Home }}
+        {{ with .GetPage "about" }}
+          {{ if . }}
+            <li><a href="{{ .RelPermalink }}">About page</a></li>
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    </ul>
+  </nav>
+{{ end }}
diff --git a/homepage/layouts/_default/_markup/render-heading.html b/homepage/layouts/_default/_markup/render-heading.html
new file mode 100644
index 0000000..fc39c9c
--- /dev/null
+++ b/homepage/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,7 @@
+{{ $class := "" }}
+{{ if findRE "^(?:\\d+\\.)+\\s+" .Text 1 }}
+  {{ $class = "manual-number" }}
+{{ end }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}"{{ with $class }} class="{{ . }}"{{ end }}>
+  {{ .Text | safeHTML }}
+</h{{ .Level }}>
diff --git a/homepage/layouts/_default/_markup/render-image.html b/homepage/layouts/_default/_markup/render-image.html
new file mode 100644
index 0000000..50a8719
--- /dev/null
+++ b/homepage/layouts/_default/_markup/render-image.html
@@ -0,0 +1,20 @@
+{{- $alt := .Text -}} {{- $src := .Destination -}} {{- $title := .Title -}}
+
+<figure>
+  <img
+    src="{{ $src }}"
+    alt="{{ $alt }}"
+    loading="lazy"
+    {{
+    with
+    $title
+    }}
+    title="{{ . }}"
+    {{
+    end
+    }}
+  />
+  {{- with $alt }}
+  <figcaption>{{ . }}</figcaption>
+  {{ end -}}
+</figure>
diff --git a/homepage/layouts/_default/archive.html b/homepage/layouts/_default/archive.html
new file mode 100644
index 0000000..478c7e1
--- /dev/null
+++ b/homepage/layouts/_default/archive.html
@@ -0,0 +1,30 @@
+{{ define "main" }}
+  <h1>Archive</h1>
+  <div class="archive">
+    {{- $.Scratch.Add "year" "" -}}
+    {{- $.Scratch.Add "month" "" -}}
+    
+    {{- range where site.Pages "Section" "posts" -}}
+      {{- if and (not .Draft) .Date -}}
+        {{- $year := .Date.Format "2006" -}}
+        {{- $month := .Date.Format "January" -}}
+        
+        {{- if ne $year ($.Scratch.Get "year") -}}
+          {{- $.Scratch.Set "year" $year -}}
+          {{- $.Scratch.Set "month" "" -}}
+          <h2 class="archive-year">{{ $year }}</h2>
+        {{- end -}}
+        
+        {{- if ne $month ($.Scratch.Get "month") -}}
+          {{- $.Scratch.Set "month" $month -}}
+          <h3 class="archive-month">{{ $month }}</h3>
+        {{- end -}}
+        
+        <article class="archive-item">
+          <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02" }}</time>
+          <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+        </article>
+      {{- end -}}
+    {{- end -}}
+  </div>
+{{ end }}
\ No newline at end of file
diff --git a/homepage/layouts/_default/baseof.html b/homepage/layouts/_default/baseof.html
new file mode 100644
index 0000000..41980a7
--- /dev/null
+++ b/homepage/layouts/_default/baseof.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html
+  lang="{{ site.Language.Locale }}"
+  dir="{{ or site.Language.Direction `ltr` }}"
+>
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner">{{ partial "header.html" . }}</header>
+    <main id="main-content" role="main">{{ block "main" . }}{{ end }}</main>
+    <footer role="contentinfo">{{ partial "footer.html" . }}</footer>
+  </body>
+</html>
diff --git a/homepage/layouts/_default/list.html b/homepage/layouts/_default/list.html
new file mode 100644
index 0000000..675e909
--- /dev/null
+++ b/homepage/layouts/_default/list.html
@@ -0,0 +1,14 @@
+{{ define "main" }}
+    <h1>{{ .Title }}</h1>
+    {{ .Content }}
+    <div class="time-list">
+        <ul>
+            {{ range .Pages }}
+            <li>
+                <span>{{- partial "date" .Date -}}</span>
+                <div><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></div>
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+{{ end }}
diff --git a/homepage/layouts/_default/single.html b/homepage/layouts/_default/single.html
new file mode 100644
index 0000000..7d69769
--- /dev/null
+++ b/homepage/layouts/_default/single.html
@@ -0,0 +1,51 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+
+  {{/* Table of Contents */}}
+  {{ $hasToC := .Params.toc | default true }}
+  {{ $headers := findRE "<h[2-6]" .Content }}
+  {{ if and $hasToC (ge (len $headers) 1) }}
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        {{ .TableOfContents }}
+      </nav>
+    </details>
+  {{ end }}
+
+   <!-- Content -->
+   {{ .Content }}
+   <div class="time">
+     {{ partial "date.html" .Date }}
+     {{ $showReadingTime := .Params.showreadingtime | default site.Params.showreadingtime | default true }}
+     {{ if and $showReadingTime .ReadingTime }}
+       <span class="reading-time"> · {{ .ReadingTime }} min read</span>
+     {{ end }}
+     {{ $showLastMod := .Params.showlastmod | default site.Params.showlastmod | default false }}
+     {{ if and $showLastMod .Lastmod }}
+       {{ if ne .LastMod.Format "2006-01-02" .Date.Format "2006-01-02" }}
+         <span class="lastmod"> · Last updated: {{ .LastMod.Format "2006-01-02" }}</span>
+       {{ end }}
+     {{ end }}
+   </div>
+
+  <!-- Comments block -->
+  {{ if and .Content (default true (default .Site.Params.comments
+    .Params.comments))
+  }}
+    <div class="comments">{{- partial "comments" . -}}</div>
+  {{ end }}
+
+  {{ if not .IsHome }}
+    <div class="terminal-nav">
+      <div class="back-nav">
+        {{ with .Parent }}
+          <a href="{{ .RelPermalink }}" class="back-link">../</a>
+        {{ else }}
+          <a href="{{ "/" | relURL }}" class="back-link">../</a>
+        {{ end }}
+      </div>
+    </div>
+  {{ end }}
+{{ end }}
diff --git a/homepage/layouts/_partials/comments.html b/homepage/layouts/_partials/comments.html
new file mode 100644
index 0000000..59c5f22
--- /dev/null
+++ b/homepage/layouts/_partials/comments.html
@@ -0,0 +1,2 @@
+<!-- This partial can be replaced to support other commenting engines -->
+{{ template "_internal/disqus.html" . }}
diff --git a/homepage/layouts/_partials/date.html b/homepage/layouts/_partials/date.html
new file mode 100644
index 0000000..1c774de
--- /dev/null
+++ b/homepage/layouts/_partials/date.html
@@ -0,0 +1 @@
+<time datetime="{{ . | time.Format "2006-01-02" }}">{{ . | time.Format "2006-01-02" }}&nbsp;</time>
diff --git a/homepage/layouts/_partials/footer.html b/homepage/layouts/_partials/footer.html
new file mode 100644
index 0000000..3f5ce1e
--- /dev/null
+++ b/homepage/layouts/_partials/footer.html
@@ -0,0 +1,4 @@
+<p role="contentinfo">
+  &copy; Copyright {{ now.Year }} &middot;
+  Thomas
+</p>
diff --git a/homepage/layouts/_partials/head.html b/homepage/layouts/_partials/head.html
new file mode 100644
index 0000000..469612e
--- /dev/null
+++ b/homepage/layouts/_partials/head.html
@@ -0,0 +1,59 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title
+  site.Title }}{{ end }}
+</title>
+{{ with .Description | default .Site.Params.description }}<meta
+  name="description"
+  content="{{ . }}"
+/>{{ end }} {{/* Canonical URL */}}
+<link rel="canonical" href="{{ .Permalink }}" />
+
+{{/* Open Graph */}}
+<meta property="og:title" content="{{ .Title }}" />
+{{ with .Description | default .Site.Params.description }}<meta
+  property="og:description"
+  content="{{ . }}"
+/>{{ end }}
+<meta
+  property="og:type"
+  content="{{ if .IsPage }}article{{ else }}website{{ end }}"
+/>
+<meta property="og:url" content="{{ .Permalink }}" />
+{{ with .Site.Params.ogImage }}<meta
+  property="og:image"
+  content="{{ . | absURL }}"
+/>{{ end }} {{/* Twitter Card */}}
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="{{ .Title }}" />
+{{ with .Description | default .Site.Params.description }}<meta
+  name="twitter:description"
+  content="{{ . }}"
+/>{{ end }} {{ with .Site.Params.twitterHandle }}<meta
+  name="twitter:site"
+  content="@{{ . }}"
+/>{{ end }} {{ with .Site.Params.ogImage }}<meta
+  name="twitter:image"
+  content="{{ . | absURL }}"
+/>{{ end }} {{/* RSS Feed */}} {{ with .OutputFormats.Get "rss" -}} {{ printf
+`<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type
+.Permalink site.Title | safeHTML }} {{ end }} {{/* JSON-LD Structured Data for
+Articles */}} {{ if .IsPage }}
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "{{ .Title }}",
+    "url": "{{ .Permalink }}",
+    "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
+    "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}"
+    {{- with $.Description | default $.Site.Params.description }},
+    "description": "{{ . }}"
+    {{- end }}
+  }
+</script>
+{{ end }} {{ partialCached "head/favicon.html" . }} {{ partialCached
+"head/css.html" . }}
diff --git a/homepage/layouts/_partials/head/css.html b/homepage/layouts/_partials/head/css.html
new file mode 100644
index 0000000..d5162ba
--- /dev/null
+++ b/homepage/layouts/_partials/head/css.html
@@ -0,0 +1,19 @@
+{{- with resources.Get "css/main.css" }}
+  {{- if hugo.IsDevelopment }}
+    <link rel="stylesheet" href="{{ .RelPermalink }}">
+  {{- else }}
+    {{- with . | minify | fingerprint }}
+      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+    {{- end }}
+  {{- end }}
+{{- end }}
+
+{{- with resources.Get "css/custom.css" }}
+  {{- if hugo.IsDevelopment }}
+    <link rel="stylesheet" href="{{ .RelPermalink }}">
+  {{- else }}
+    {{- with . | minify | fingerprint }}
+      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+    {{- end }}
+  {{- end }}
+{{- end }}
diff --git a/homepage/layouts/_partials/head/favicon.html b/homepage/layouts/_partials/head/favicon.html
new file mode 100644
index 0000000..24c7530
--- /dev/null
+++ b/homepage/layouts/_partials/head/favicon.html
@@ -0,0 +1,17 @@
+<link rel="apple-touch-icon" sizes="57x57" href="{{ "favicon_io/apple-icon-57x57.png" | relURL }}">
+<link rel="apple-touch-icon" sizes="60x60" href="{{ "favicon_io/apple-icon-60x60.png" | relURL }}">
+<link rel="apple-touch-icon" sizes="72x72" href="{{ "favicon_io/apple-icon-72x72.png" | relURL }}">
+<link rel="apple-touch-icon" sizes="76x76" href="{{ "favicon_io/apple-icon-76x76.png" | relURL }}">
+<link rel="apple-touch-icon" sizes="114x114" href="{{ "favicon_io/apple-icon-114x114.png" | relURL }}">
+<link rel="apple-touch-icon" sizes="120x120" href="{{ "favicon_io/apple-icon-120x120.png" | relURL }}">
+<link rel="apple-touch-icon" sizes="144x144" href="{{ "favicon_io/apple-icon-144x144.png" | relURL }}">
+<link rel="apple-touch-icon" sizes="152x152" href="{{ "favicon_io/apple-icon-152x152.png" | relURL }}">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon_io/apple-icon-180x180.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="192x192"  href="{{ "favicon_io/android-icon-192x192.png"  | relURL }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon_io/favicon-32x32.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="96x96" href="{{ "favicon_io/favicon-96x96.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon_io/favicon-16x16.png" | relURL }}">
+<link rel="manifest" href="{{ "favicon_io/manifest.json" | relURL }}">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="{{ "favicon_io/ms-icon-144x144.png" | relURL }}">
+<meta name="theme-color" content="#ffffff">
diff --git a/homepage/layouts/_partials/header.html b/homepage/layouts/_partials/header.html
new file mode 100644
index 0000000..80cd9eb
--- /dev/null
+++ b/homepage/layouts/_partials/header.html
@@ -0,0 +1,19 @@
+<nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
+  </ol>
+</nav>
+
+{{ define "breadcrumbnav" }}
+  {{ if .p1.Parent }}
+    {{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 ) }}
+  {{ else if not .p1.IsHome }}
+    {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
+  {{ end }}
+  <li{{ if eq .p1 .p2 }} class="current"{{ end }}>
+    {{ if .p1.IsHome }}/{{ end }}
+    <a href="{{ .p1.RelPermalink }}">{{ if .p1.IsHome }}{{ .p1.Site.Title }}{{ else }}{{ .p1.Title }}{{ end }}</a>
+    {{ if ne .p1 .p2 }}/{{ end }}
+  </li>
+{{ end }}
+
diff --git a/homepage/layouts/_partials/menu.html b/homepage/layouts/_partials/menu.html
new file mode 100644
index 0000000..b09a2fd
--- /dev/null
+++ b/homepage/layouts/_partials/menu.html
@@ -0,0 +1,51 @@
+{{- /*
+Renders a menu for the given menu ID.
+
+@context {page} page The current page.
+@context {string} menuID The menu ID.
+
+@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+*/}}
+
+{{- $page := .page }}
+{{- $menuID := .menuID }}
+
+{{- with index site.Menus $menuID }}
+  <nav aria-label="Main navigation">
+    <ul>
+      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+    </ul>
+  </nav>
+{{- end }}
+
+{{- define "_partials/inline/menu/walk.html" }}
+  {{- $page := .page }}
+  {{- range .menuEntries }}
+    {{- $attrs := dict "href" .URL }}
+    {{- if $page.IsMenuCurrent .Menu . }}
+      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
+    {{- else if $page.HasMenuCurrent .Menu .}}
+      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
+    {{- end }}
+    {{- $name := .Name }}
+    {{- with .Identifier }}
+      {{- with T . }}
+        {{- $name = . }}
+      {{- end }}
+    {{- end }}
+    <li>
+      <a
+        {{- range $k, $v := $attrs }}
+          {{- with $v }}
+            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+          {{- end }}
+        {{- end -}}
+      >{{ $name }}</a>
+      {{- with .Children }}
+        <ul>
+          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+        </ul>
+      {{- end }}
+    </li>
+  {{- end }}
+{{- end }}
diff --git a/homepage/layouts/_partials/terms.html b/homepage/layouts/_partials/terms.html
new file mode 100644
index 0000000..ee6a261
--- /dev/null
+++ b/homepage/layouts/_partials/terms.html
@@ -0,0 +1,22 @@
+{{- /*
+For a given taxonomy, renders a list of terms assigned to the page.
+
+@context {page} page The current page.
+@context {string} taxonomy The taxonomy.
+
+@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+*/}}
+
+{{- $page := .page }}
+{{- $taxonomy := .taxonomy }}
+
+{{- with $page.GetTerms $taxonomy }}
+  {{- $label := (index . 0).Parent.LinkTitle }}
+  <div class="terms-list">
+    <ul>
+      {{- range . }}
+        <li><a href="{{ .RelPermalink }}">#{{ .LinkTitle }}</a></li>
+      {{- end }}
+    </ul>
+  </div>
+{{- end }}
diff --git a/homepage/layouts/index.html b/homepage/layouts/index.html
new file mode 100644
index 0000000..278cae2
--- /dev/null
+++ b/homepage/layouts/index.html
@@ -0,0 +1,6 @@
+{{ define "main" }}
+  {{ .Content }}
+  <div class="terminal-nav">
+    {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+  </div>
+{{ end }}
diff --git a/homepage/layouts/robots.txt b/homepage/layouts/robots.txt
new file mode 100644
index 0000000..6b4c001
--- /dev/null
+++ b/homepage/layouts/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: {{ "sitemap.xml" | absURL }}
diff --git a/homepage/layouts/shortcodes/mermaid.html b/homepage/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..1c00332
--- /dev/null
+++ b/homepage/layouts/shortcodes/mermaid.html
@@ -0,0 +1,2 @@
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">{{ safeHTML .Inner }}</div>
diff --git a/homepage/public/404.html b/homepage/public/404.html
index 17472f4..7dae397 100644
--- a/homepage/public/404.html
+++ b/homepage/public/404.html
@@ -1,98 +1,100 @@
-<!DOCTYPE html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    
-    <title>My New Hugo Project</title>
-    <meta name="viewport" content="width=device-width,minimum-scale=1">
-    <meta name="description" content="">
-    <meta name="generator" content="Hugo 0.161.1">
-    
-    
-    
-      <meta name="robots" content="index, follow">
-    
-    
-
-    <link rel="stylesheet" href="/ananke/css/main.fe543ec729f225f1a33caed07775c832a416476900d82ba51765d6ead9de6758.css" integrity="sha256-/lQ&#43;xynyJfGjPK7Qd3XIMqQWR2kA2CulF2XW6tneZ1g=" crossorigin="anonymous">
-    
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  404 Page not found | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/404.html" />
 
 
-    
-      
+<meta property="og:title" content="404 Page not found" />
 
-    
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/404.html" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="404 Page not found" />
+       <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
 
-    
 
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
     
-      <link rel="canonical" href="https://example.org/404.html">
+  
     
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
 
+  
+  <li class="current">
     
+    <a href="/404.html">404 Page not found</a>
     
-    <meta property="og:url" content="https://example.org/404.html">
-  <meta property="og:site_name" content="My New Hugo Project">
-  <meta property="og:title" content="404 Page not found">
-  <meta property="og:locale" content="en_us">
-  <meta property="og:type" content="website">
+  </li>
 
-  <meta itemprop="name" content="404 Page not found">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="404 Page not found">
-
-      
-      
-    
-	
-  </head><body class="ma0 avenir bg-near-white production is-404">
-    
-
-  <header>
-    <div class="bg-black">
-      <nav class="pv3 ph3 ph4-ns" role="navigation">
-  <div class="flex-l center items-center justify-between">
-    <a href="/" class="f3 fw2 hover-white white-90 dib no-underline">
-      
-        My New Hugo Project
-      
-    </a>
-    <div class="flex-l items-center">
-      
-
-      
-      <div class="ananke-socials"></div>
-
-    </div>
-  </div>
+  </ol>
 </nav>
 
-    </div>
-  </header>
 
 
-    <main class="pb7" role="main">
+</header>
+    <main id="main-content" role="main">
+  <h1>404 - Page Not Found</h1>
+  <p>The page you're looking for doesn't exist or has been moved.</p>
+  
+  <nav aria-label="404 navigation">
+    <ul>
+      <li><a href="/">← Return to homepage</a></li>
       
-    <article class="center cf pv5 measure-wide-l">
-      <h1>
-        This is not the page you were looking for
-      </h1>
-    </article>
-
-    </main>
-    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
-  <div class="flex justify-between">
-  <a class="f4 fw4 hover-white white-70 dn dib-ns pv2 ph3 no-underline" href="https://example.org/" >
-    &copy;  My New Hugo Project 2026 
-  </a>
-    <div><div class="ananke-socials"></div>
-</div>
-  </div>
+        
+      
+      
+        
+      
+    </ul>
+  </nav>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
 </footer>
-
   </body>
 </html>
-
-
-
diff --git a/homepage/public/categories/index.html b/homepage/public/categories/index.html
index d4e9cf7..d5e231f 100644
--- a/homepage/public/categories/index.html
+++ b/homepage/public/categories/index.html
@@ -1,114 +1,93 @@
-<!DOCTYPE html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    
-    <title>My New Hugo Project</title>
-    <meta name="viewport" content="width=device-width,minimum-scale=1">
-    <meta name="description" content="">
-    <meta name="generator" content="Hugo 0.161.1">
-    
-    
-    
-      <meta name="robots" content="index, follow">
-    
-    
-
-    <link rel="stylesheet" href="/ananke/css/main.fe543ec729f225f1a33caed07775c832a416476900d82ba51765d6ead9de6758.css" integrity="sha256-/lQ&#43;xynyJfGjPK7Qd3XIMqQWR2kA2CulF2XW6tneZ1g=" crossorigin="anonymous">
-    
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Categories | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/categories/" />
 
 
-    
-      
+<meta property="og:title" content="Categories" />
 
-    
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/categories/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Categories" />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/categories/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
 
-    
-    
-      <link href="/categories/index.xml" rel="alternate" type="application/rss+xml" title="My New Hugo Project" />
-      <link href="/categories/index.xml" rel="feed" type="application/rss+xml" title="My New Hugo Project" />
-      
-    
 
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
     
-      <link rel="canonical" href="https://example.org/categories/">
+  
     
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
 
+  
+  <li class="current">
     
+    <a href="/categories/">Categories</a>
     
-    <meta property="og:url" content="https://example.org/categories/">
-  <meta property="og:site_name" content="My New Hugo Project">
-  <meta property="og:title" content="Categories">
-  <meta property="og:locale" content="en_us">
-  <meta property="og:type" content="website">
+  </li>
 
-  <meta itemprop="name" content="Categories">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="Categories">
-
-      
-      
-    
-	
-  </head><body class="ma0 avenir bg-near-white production is-taxonomy">
-    
-
-  <header>
-    <div class="pb3-m pb6-l bg-black">
-      <nav class="pv3 ph3 ph4-ns" role="navigation">
-  <div class="flex-l center items-center justify-between">
-    <a href="/" class="f3 fw2 hover-white white-90 dib no-underline">
-      
-        My New Hugo Project
-      
-    </a>
-    <div class="flex-l items-center">
-      
-
-      
-      <div class="ananke-socials"></div>
-
-    </div>
-  </div>
+  </ol>
 </nav>
 
-      <div class="tc-l pv3 ph3 ph4-ns">
-        <h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title">
-          Categories
-        </h1>
-        
-      </div>
+
+
+</header>
+    <main id="main-content" role="main">
+    <h1>Categories</h1>
+    
+    <div class="time-list">
+        <ul>
+            
+        </ul>
     </div>
-  </header>
-
-
-    <main class="pb7" role="main">
-      
-  <article class="cf pa3 pa4-m pa4-l">
-    <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links mid-gray">
-      <p>Below you will find pages that utilize the taxonomy term “Categories”</p>
-    </div>
-  </article>
-  <div class="mw8 center">
-    <section class="flex-ns mt5 flex-wrap justify-around">
-      
-    </section>
-  </div>
-
-    </main>
-    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
-  <div class="flex justify-between">
-  <a class="f4 fw4 hover-white white-70 dn dib-ns pv2 ph3 no-underline" href="https://example.org/" >
-    &copy;  My New Hugo Project 2026 
-  </a>
-    <div><div class="ananke-socials"></div>
-</div>
-  </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
 </footer>
-
   </body>
 </html>
-
-
-
diff --git a/homepage/public/categories/index.xml b/homepage/public/categories/index.xml
index 6791e84..490b98f 100644
--- a/homepage/public/categories/index.xml
+++ b/homepage/public/categories/index.xml
@@ -1,11 +1,13 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
-    <title>Categories on My New Hugo Project</title>
-    <link>https://example.org/categories/</link>
-    <description>Recent content in Categories on My New Hugo Project</description>
+    <title>Categories on Thomas Internet Garden</title>
+    <link>http://localhost:1313/categories/</link>
+    <description>Recent content in Categories on Thomas Internet Garden</description>
     <generator>Hugo</generator>
     <language>en-us</language>
-    <atom:link href="https://example.org/categories/index.xml" rel="self" type="application/rss+xml" />
+    <managingEditor>Thomas.Sindt@gmx.de (Thomas)</managingEditor>
+    <webMaster>Thomas.Sindt@gmx.de (Thomas)</webMaster>
+    <atom:link href="http://localhost:1313/categories/index.xml" rel="self" type="application/rss+xml" />
   </channel>
 </rss>
diff --git a/homepage/public/css/custom.css b/homepage/public/css/custom.css
new file mode 100644
index 0000000..1bcf797
--- /dev/null
+++ b/homepage/public/css/custom.css
@@ -0,0 +1,44 @@
+/* You can add custom style here */
+/* Enhanced Table of Contents Styling */
+.toc {
+  position: relative;
+}
+
+.toc-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.toc-title::before {
+  flex-shrink: 0;
+}
+
+/* Visual indicator for TOC depth levels */
+.toc-content ol ol {
+  opacity: 0.85;
+}
+
+.toc-content ol ol ol {
+  opacity: 0.7;
+}
+
+/* Smooth transitions for links in TOC */
+.toc-content a {
+  position: relative;
+}
+
+.toc-content a::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: var(--color-text-primary);
+  transition: width 0.2s ease-in-out;
+}
+
+.toc-content a:hover::after {
+  width: 100%;
+}
diff --git a/homepage/public/css/main.css b/homepage/public/css/main.css
new file mode 100644
index 0000000..eca9a61
--- /dev/null
+++ b/homepage/public/css/main.css
@@ -0,0 +1,734 @@
+:root {
+  /* Typography */
+  --spacing-base: 1.5em;
+  --font-family-mono: monospace;
+  --font-size-base: 1em;
+  --font-size-small: 0.9em;
+  --font-size-code: 0.95em;
+
+  /* Spacing */
+  --spacing-xs: calc(var(--spacing-base) * 0.25);
+  --spacing-sm: calc(var(--spacing-base) * 0.5);
+  --spacing-md: var(--spacing-base);
+  --spacing-lg: calc(var(--spacing-base) * 2);
+
+  /* Base theme knobs */
+  --bg-h: 0;
+  --bg-s: 0%;
+  --bg-l: 99%;
+
+  /* Background colors */
+  --color-bg-primary: hsl(var(--bg-h) var(--bg-s) var(--bg-l));
+  --color-bg-secondary: hsl(var(--bg-h) var(--bg-s) calc(var(--bg-l) - 2%));
+  --color-border: hsl(var(--bg-h) var(--bg-s) calc(var(--bg-l) - 6%));
+  --color-selection-bg: hsl(var(--bg-h) var(--bg-s) calc(var(--bg-l) - 13%));
+
+  /* Text colors with WCAG-friendly contrast */
+  /* Primary: ensures near-black on light bg and near-white on dark bg */
+  --color-text-primary: hsl(
+    var(--bg-h) var(--bg-s) clamp(8%, calc(100% - var(--bg-l)), 92%)
+  );
+
+  /* Muted: softer but still >4.5:1 contrast */
+  --color-text-muted: hsl(
+    var(--bg-h) var(--bg-s) clamp(30%, calc(85% - var(--bg-l)), 75%)
+  );
+
+  /* Code text: slightly brighter than muted */
+  --color-text-code: hsl(
+    var(--bg-h) var(--bg-s) clamp(20%, calc(90% - var(--bg-l)), 85%)
+  );
+
+  /* Layout */
+  --container-width: 64ch;
+  --pre-border-radius: 0.75rem;
+  --inline-border-radius: 0.375rem;
+  --gap-base: 1em;
+  --gap-small: 0.5em;
+
+  /* Breakpoints */
+  --breakpoint-mobile: 600px;
+}
+
+/* Common component styles */
+.no-scrollbar {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.list-unstyled {
+  list-style: none;
+  margin-left: 0;
+}
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+.no-underline {
+  text-decoration: none;
+  border-bottom: none;
+}
+
+::selection {
+  background: var(--color-selection-bg);
+  color: var(--color-text-primary);
+}
+
+/* Skip link for accessibility */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.skip-link:focus {
+  position: fixed;
+  top: var(--spacing-sm);
+  left: var(--spacing-sm);
+  opacity: 1;
+}
+
+/* Focus styles for accessibility */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--color-text-primary);
+  outline-offset: 2px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--color-text-primary);
+  box-sizing: border-box;
+}
+
+ul {
+  list-style-type: disc;
+  margin-left: 1.5rem;
+}
+
+ol {
+  list-style-type: decimal;
+  margin-left: 1.5rem;
+}
+
+html {
+  margin: 0 0 0 calc(100vw - 100%);
+  -webkit-text-size-adjust: 100%;
+  height: 100%;
+}
+
+body {
+  font: var(--font-size-base) / var(--spacing-base) var(--font-family-mono);
+  background: var(--color-bg-primary);
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: minmax(auto, var(--container-width));
+  justify-content: center;
+  padding: var(--spacing-lg);
+  gap: var(--spacing-lg);
+}
+
+a {
+  display: inline-block;
+  margin-left: -0.16666em;
+  text-decoration: none;
+  border-bottom: 1px dotted;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+}
+
+p,
+pre {
+  margin: var(--spacing-base) 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: var(--spacing-base) 0;
+  font-weight: bold;
+}
+
+h2 {
+  counter-increment: h2;
+  counter-reset: h3;
+}
+
+h3 {
+  counter-increment: h3;
+  counter-reset: h4;
+}
+
+h4 {
+  counter-increment: h4;
+  counter-reset: h5;
+}
+
+h5 {
+  counter-increment: h5;
+}
+
+/* nested counters */
+h2:not(.manual-number)::before {
+  content: counter(h2) ". ";
+}
+
+h3:not(.manual-number)::before {
+  content: counter(h2) "." counter(h3) ". ";
+}
+
+h4:not(.manual-number)::before {
+  content: counter(h2) "." counter(h3) "." counter(h4) ". ";
+}
+
+h5:not(.manual-number)::before {
+  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+}
+
+time {
+  color: var(--color-text-muted);
+}
+
+footer {
+  padding: calc(var(--spacing-base) * 2) 0;
+  text-align: center;
+}
+footer p {
+  margin-bottom: 0;
+}
+
+pre {
+  border: 1px solid var(--color-border);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--pre-border-radius);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-code);
+  line-height: 1.6;
+  color: var(--color-text-code);
+  overflow-x: auto;
+  box-shadow: 0 1px 2px 0 var(--color-border);
+}
+
+pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+p > code,
+li > code,
+h1 > code,
+h2 > code,
+h3 > code,
+h4 > code,
+h5 > code {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--inline-border-radius);
+  padding: 0.2em 0.4em;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-code);
+  color: var(--color-text-code);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.terms-list {
+  padding-bottom: var(--spacing-base);
+}
+
+.terms-list ul {
+  list-style-type: none;
+  margin-left: 0;
+}
+
+.terms-list ul li {
+  display: inline-block;
+  font-style: italic;
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
+  padding: 0 3px;
+}
+
+/* Path navigation styles */
+.path-nav {
+  font-family: var(--font-family-mono);
+  padding: var(--spacing-base) 0;
+  white-space: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  width: 100%;
+}
+
+.path-nav::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.path-nav ol {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.path-nav li {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  max-width: 200px; /* Limit maximum width on small screens */
+}
+
+.path-nav li.current {
+  max-width: none; /* Allow full width for current page */
+}
+
+.path-nav li a {
+  text-decoration: none;
+  border-bottom: none;
+  padding: 0 0.25em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-muted);
+}
+
+.path-nav li.current a {
+  color: var(--color-text-primary);
+  font-weight: bold;
+}
+
+.path-nav a:hover {
+  text-decoration: underline;
+}
+
+.back-nav {
+  margin-bottom: var(--spacing-base);
+}
+
+.back-link {
+  color: var(--color-text-muted);
+  border-bottom: none;
+}
+
+.back-link:hover {
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+/* Time list */
+.time-list ul {
+  list-style: none;
+  margin-left: 0;
+}
+
+.time-list li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--gap-base);
+  align-items: start;
+  padding: var(--spacing-sm) 0;
+}
+
+@media (max-width: 600px) {
+  .time-list li {
+    grid-template-columns: 1fr;
+    gap: var(--gap-small);
+  }
+
+  .time-list time {
+    font-size: var(--font-size-small);
+  }
+}
+
+/* Archive styles */
+.archive {
+  margin: var(--spacing-base) 0;
+}
+
+.archive-year {
+  margin: calc(var(--spacing-base) * 1.5) 0 var(--spacing-sm) 0;
+  font-size: 1.2em;
+  color: var(--color-text-primary);
+}
+
+.archive-month {
+  margin: var(--spacing-md) 0 var(--spacing-sm) 0;
+  font-size: 1.1em;
+  color: var(--color-text-muted);
+}
+
+.archive-item {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-small);
+  margin: var(--spacing-sm) 0;
+  padding-left: 1em;
+}
+
+.archive-item time {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
+  min-width: 2em;
+}
+
+.archive-item a {
+  font-size: var(--font-size-base);
+}
+
+/* Main menu navigation styles */
+.terminal-nav {
+  font-family: var(--font-family-mono);
+  border-top: 1px solid var(--color-border);
+  margin-top: calc(var(--spacing-base) * 2);
+  padding-top: var(--spacing-base);
+}
+
+.terminal-nav nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: 1em;
+}
+
+.terminal-nav nav ul li {
+  display: inline-block;
+}
+
+.terminal-nav nav ul li a,
+.terminal-nav .back-link {
+  color: var(--color-text-muted);
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.terminal-nav nav ul li a:hover,
+.terminal-nav .back-link:hover {
+  color: var(--color-text-primary);
+}
+
+.terminal-nav nav ul li a.active {
+  color: var(--color-text-primary);
+  font-weight: bold;
+}
+
+.terminal-nav .back-nav {
+  margin: calc(var(--spacing-base) * 0.5) 0;
+}
+
+/* Image styles */
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: var(--spacing-base) auto;
+  border: 1px solid var(--color-border);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--pre-border-radius);
+}
+
+figure {
+  margin: var(--spacing-base) 0;
+  text-align: center;
+}
+
+figure img {
+  margin: 0 auto;
+}
+
+figcaption {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-small);
+  margin-top: calc(var(--spacing-base) / 2);
+}
+
+/* Table styles */
+table {
+  width: 100%;
+  margin: var(--spacing-base) 0;
+  border-collapse: collapse;
+}
+
+thead th,
+th {
+  font-weight: bold;
+  text-align: center;
+  border-bottom: 2px solid var(--color-border);
+  padding: var(--spacing-sm);
+}
+
+td {
+  padding: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* Typography emphasis */
+strong {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}
+
+/* Blockquote styles */
+blockquote {
+  margin: var(--spacing-base) 0;
+  padding: var(--spacing-sm) var(--spacing-base);
+  border: 1px solid var(--color-border);
+  border-radius: var(--pre-border-radius);
+  background: var(--color-bg-secondary);
+  box-shadow: 0 1px 2px 0 var(--color-border);
+  font-style: italic;
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+/* Table of Contents */
+.toc {
+  margin: var(--spacing-base) 0;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  border-radius: var(--pre-border-radius);
+  box-shadow: 0 1px 2px 0 var(--color-border);
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+}
+
+.toc-title {
+  display: block;
+  cursor: pointer;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-weight: bold;
+  user-select: none;
+  transition: background-color 0.2s ease-in-out;
+  list-style: none;
+  position: relative;
+  padding-left: var(--spacing-lg);
+}
+
+.toc-title:hover {
+  background: var(--color-bg-primary);
+}
+
+/* Custom disclosure triangle for details/summary */
+.toc-title::before {
+  content: "▶";
+  position: absolute;
+  left: var(--spacing-sm);
+  transition: transform 0.2s ease-in-out;
+  display: inline-block;
+  width: 1em;
+}
+
+details[open] > .toc-title::before {
+  transform: rotate(90deg);
+}
+
+.toc-content {
+  padding: var(--spacing-md);
+  border-top: 1px solid var(--color-border);
+  animation: slideDown 0.3s ease-in-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 100vh;
+  }
+}
+
+.toc-content a {
+  text-decoration: none;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-small);
+  transition: color 0.15s ease-in-out;
+}
+
+.toc-content a:hover {
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* CSS Counters for hierarchical numbering */
+.toc-content {
+  counter-reset: level1;
+}
+
+.toc-content ol {
+  list-style: none;
+  margin-left: 1.5rem;
+  padding: 0;
+  counter-reset: level2;
+}
+
+.toc-content ol li {
+  margin: var(--spacing-xs) 0;
+  counter-increment: level1;
+}
+
+.toc-content ol li::before {
+  content: counter(level1) ". ";
+}
+
+.toc-content ol ol {
+  margin-top: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
+  counter-reset: level2;
+}
+
+.toc-content ol ol li {
+  counter-increment: level2;
+}
+
+.toc-content ol ol li::before {
+  content: counter(level1) "." counter(level2) ". ";
+}
+
+.toc-content ol ol ol {
+  counter-reset: level3;
+}
+
+.toc-content ol ol ol li {
+  counter-increment: level3;
+}
+
+.toc-content ol ol ol li::before {
+  content: counter(level1) "." counter(level2) "." counter(level3) ". ";
+}
+
+.toc-content ol ol ol ol li::before {
+  content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) ". ";
+}
+
+.time {
+  margin: var(--spacing-md) 0;
+}
+
+.reading-time,
+.lastmod {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-small);
+}
+
+@media (max-width: 600px) {
+  .path-nav li {
+    max-width: 100px; /* More aggressive truncation on mobile */
+  }
+
+  .path-nav li:first-child {
+    max-width: none; /* Don't truncate site title */
+  }
+
+  .path-nav li.current {
+    max-width: 150px; /* Allow slightly more width for current page on mobile */
+  }
+}
+
+@media (max-width: 600px) {
+  body {
+    padding-top: 2em;
+  }
+
+  pre {
+    max-width: calc(100vw - 4em);
+  }
+}
+
+/* Print styles */
+@media print {
+  body {
+    background: white;
+    color: black;
+    padding: 0;
+    display: block;
+  }
+
+  header,
+  footer,
+  .terminal-nav,
+  .skip-link,
+  .toc,
+  .back-nav {
+    display: none !important;
+  }
+
+  main {
+    max-width: 100%;
+  }
+
+  a {
+    border-bottom: none;
+    color: black;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.8em;
+    color: gray;
+  }
+
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  pre,
+  blockquote,
+  img {
+    page-break-inside: avoid;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    page-break-after: avoid;
+  }
+}
+
+
diff --git a/homepage/public/favicon.ico b/homepage/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..67f8b777851849527933b78b1f98bd564d8255d1
GIT binary patch
literal 15406
zcmeI3%WEH16vro|f`O{FV5Nc>unpZA42Xe(zeP4Fn0Fu>#YKe(c41L;qszMJ-bXDi
z>L1W57+rSdLS5OG#!V^IKxvbj6n@gC#QOREdT$vg^US^Tf(#t)%-r+%o^#KA&hHll
zeL;V)Z(l$;7%c7yg4co|7#w``eB{|6_?CCW!=`>H2!44k2#&ym2ojIpQ{=j)r>9?;
zot^z+et!PXxw*M}BHinq>XMX<j*bq%^EJF%(8C1U5>Kboc`~d=&+uPNklCgSOc%pC
zkdxhQd};55Lm1#0hSD%6>D`)|ni^JI((I(w8QJADo{YL>VsSr%Ckg*U$-2s8+X=sG
z{FIYm*irl0d{!<LjiF?04j0W|Z2d2PrAPgT_nG}iJmK887;G8pzrEZr?YpcvTYoLD
zk5c2zAk=|0KDk~K6BAE?c>y{D{f@u4p-n@#^$z+5S`e?RJu8p?Lq>0x`@}vIu7kfT
z8Od5bMN4D{&~ch_$NgBcM#n%A`@~N^|ABlif3x_ci!t%#JQ&cWarai1&Z6~TkWOa9
z<VzS0pBKNQ7^OQY4)Cg<dy9G0cIa6)w&erZlxwB<9o5U2b2{7#)E|Oe^1LW+*?QbJ
zxjzdP)#1cX49+SB<KyE`6Z>w}_GQ!9UZ~o(wFidYcy6DoF0rq<<hQErhV1>yz2-5e
zTyl`ty!pUE-U+vC*KNN6@vklal>5+`8rxs}uh#LW?(tW105Q;7(Wx&Lm6uJ~)`e`X
z^RF;~r?T~jY{_Q$A_iJ-m%jcoHny$5gr&~)r;P=1C}sVP-puv4#i0EM{FfkKed1Em
zy4%`}me{Us{}sjpj#~DgVGO#rYen+cu9<pk2cETl(0y+%p<EDeRDSn4J_0%?(Wdkr
z$j3PeYT~Xw+Gsy}j>FI~=yTd>3AzfcLA`SnbFXu|pT#pXGc&>2(2!(N+83v|%y-!B
zH|JI#fb9Zw1NxWuxyA*<yJBQN#GhBCvrNoZH)Gff*g6N@gcRRgm{a&R@k3+iIsACZ
z+VNcy?*p{`N$jkrU~%<j0~?>n7Wlp875YYr(Gs{zKTE)l_AX1<e8Wc@pyyrmtwOo;
z+qHdU3tFQs-ruPYBO@bEAg}&;*A<V0{6E5wcK)5@A9C-3ebvFXYhUQe3xj+}!Ws9T
zao{*|-MX=d?5iDe<&ydh*#8R2dWoZ}J}|ABKAku&jg5^x1E0p3oqS&^)lYD#Pyd7u
z8e3y8>Q6wmo%>|9k+6aP<2dk>lant}U*_E8rG3D-5uK;;yPx-8W%=Kfda!;c%(fl0
ze&XHrrr^uM0oGf>Z1DFnHhqLl>1%^5TzTuk|3H|*ul4(0o-gE;Z3>^kyq|VB2&R>$
z;3|M)g|TQza{|6pwl*t(FLk^UW^(9F%1?ditXdD)PeI>TZP%AQuxqb<#h1RS^?+T!
z8Ck2^t}lCF{~KLC_TZ^~%@^LN9`I|g*;@RHecST~{FkHc(w1kiUj^&=w&0Dy`6E8G
zdj4Yla1<Zfx_&sO^&9wa#I#K<V`5$$!p!>TF#N4vKWh(zA3A5dm)G|O@NEjS_AkOu
zAJA`duQdQy-kiND%)+h<+}gi?*&_V<{_uGJE+6<V@jUPDw7`dTjXA;`y~wFW@HcrM
ze;<q|qqyyJ3(gPqT_f@QP<~LaZ!L|R55Tla-n?#OomRs47J0PMl)eD=yI?w=hB;bC
zp0)P-g?!<g%^vwsXFCx0t}y6ZRy4kOpXm>8oBmMcH-Rl|t`yCgB%e&5Zsqq=>yyS-
z+H#S&ls3nqdmTC<Th^}cQu8!6wAQ#r>0`~O|AJhXPJKi1jW<po*jxMiji^8PvX_2#
xkUnyh{Q8XN^ThHpbO-AFj@jH_q5cQ)@SC%aWF(8e#P5kwTf5J@5%3*>{{U!5hztM#

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/android-icon-144x144.png b/homepage/public/favicon_io/android-icon-144x144.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e7da9ccf9d879a7277bf176ae17befffea1a58f
GIT binary patch
literal 6918
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

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/android-icon-192x192.png b/homepage/public/favicon_io/android-icon-192x192.png
new file mode 100644
index 0000000000000000000000000000000000000000..c19043d3551f03dbf08b69f051e4ff8da497a09f
GIT binary patch
literal 10516
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
VQ~s5dzub020V!)K)hbv-{vQTJd#eBd

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/android-icon-36x36.png b/homepage/public/favicon_io/android-icon-36x36.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5ae9bd58b02e059739103f3edaaf89b240c7ba1
GIT binary patch
literal 1321
zcmZ{jc~DbF7{J#mq9ArUbw;!@)sAN!NnQYvSF~cGA%j7bB!CDdgqIK`3E{nPD2P%y
z%?yGT!9c5^(pnq2YVZIAltV3qBgM*TAjFzL6@(B;pi8GSrOx=r?zi9f{l05=Hp9o8
zYGbw53IJe3^K?H1<;MB7Y%$z_?+?EY#S)$y-3@@UENc_n0_y8Io`>iF9NP@Q$<qM5
zg{G4)0FaOYco_l!ng_t@sDe8OT>)6s?X#cZF*i47dTTI@zcd-AW{i`%zDGUvmsM3c
zs@vy!>My<QZ8p4lHPHNXM|paCX<B=EhO#U}2@hpy{ms{nldooH&5bqk;_RpjS<K@b
zr#mXnbW}*&$}-w+rYcKQhLnm~vw7%wuQY{-j5sWeV4aHNB#1-fg(3NA!p;h*N|8O(
zTG7|rU2?TB`|O#NWXZ`B_=Vh@?6Xq&wY-r(T3(MlozM*$CSO-6<e6!S#g}rgUCxnR
z$Y`ilRFwXhnI3afeyR1zgW8%ZrLy&wqB1DZOCmmUEG{zTbVBj>Qdw?_SQHQ$!TdHk
zj>qFF6pA7BVCty|Ty&Vp^5ydak4p~6<E+pShQGgGU|>LOY^+A3nVp?2l@|s0c?Acv
zl8$q8a}x9Oq=Y0o8W-aP{_x?0(Xp|lq*Gs0sRw=b=U>dJuDx@&`gWJ9%V;!CO-)r-
z*W}A&mA5Jzn;*8dw~lB>OeT}@t<f-TFq_R|V`KW!(ed$dy<R^tG11f8YnYza>2%Z6
z(=#(Oot>Ta4GmhYwx*`GuCDG`PftrrOaH(?QE{<at!`>+8rEoZdVR~IM{g!4@7L8m
zSF2mw+S=ROyHu*G+f~EE!`)B24F-d)apgJq_KQNjsO})$!p;*amIRINVfp7$8><zl
zR@OfUO%pVCH^#2VoDf@!#Vc&{^YWH&WwSAkc5pbft|V2Kb|LGVy*{4)OB8DlBI4z=
zZTvL>F7XxxnXA4#&t#~&oE(3x6yNot`W+a!uWWw$pzF!HlFzKYwjcc@@QdS?)GfS%
z%p*todUv~4-%Cs|o5Y`6En8u=a=DFlR=PB^@u#huciQjSfNXQw<YaST*HvB^7t;=p
zjA(|ee@m_}Qs;D(M=v$4zgARk^+SS$aHC5EL5W{+eBJOM>llw;1fzC^L4CWc6U`rQ
z_P!`>xU$W+g#MT8qun@5r+>BvFWnxI@5>AhW(KR)`R+-(?3&76rThT?0h8;wom=iC
z!SOc{9{xlao4`;`GzJBrkSR_($UAo+4h)2hA{5lgVLO?OlF7`TPu2em5QxI~-1zqg
zY)mZ)h5_s6E8rq75zCIoKsZ4};V6m37qEF4Tzt+^dr>s+UYlJZWNqhJMz}-}ilXi!
zjzoY72^95#C=QU4xx1uy7}|Um6!paTyl?^_E|k4NVkTr(FUa#R<Hrvp!sn6B8yl8E
zWX%GE&KF=rd=v)$>53F3<b7Gr@_r`|odGF;I6J!RBD**_J9wOU5eJbE7v%BfAHx87
z-@fxjd-Tx7THs<Hq5&>H5`&|Y1VSQG#3OOpF?^0lh?D-iauPX=L*{ZF*=)oa;ZPhM
mFw7aFxFB3-CyYV~MG$)!VGsM0TWYSr3V`O}?JnOJlKeLbz+{O4

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/android-icon-48x48.png b/homepage/public/favicon_io/android-icon-48x48.png
new file mode 100644
index 0000000000000000000000000000000000000000..09b3a90c64edbc14452e0ce0d82801f2523cc10a
GIT binary patch
literal 1697
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

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/android-icon-72x72.png b/homepage/public/favicon_io/android-icon-72x72.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe775449b869e694a3ccbedb5bda33eceb55e1f7
GIT binary patch
literal 2657
zcmbW3c{Cf?9>*_ALv1BR6%{o~he(JevD7G)s3<9=I#fg?L2OAV^^}>Y+LuHX!|0$+
zr=6&(rBb7|T52m=qo!z4w3b0yMlBQXymMaPob&#8@7(2g?(g^ceedty`_D~wadwcA
zQk4P#$l$Pc1fj+54Tywrc3-S^5So3IZ}8s$P?dRLizqH!Ym%@8JOD8|0K~Ha*c7_r
z=Kx?K0C?{U0OlqD%3(h=xLOJW5`JeK?7;3`D`~9Y2tE6mIK2J-c?lUQY0PZl_$~kt
zNu1p`ZkJyzz8VW1d#V0pWf={<!`JW1Hq24~I$YuSnZbsOioxC^CcjBMY`rEz-!1Xm
zZA~F&w%*TM3>S|XQ|iDq)T9@7;)l#v%9j-MYW=$!2+*$T{V{PWh%jAWwCslXmX^(@
z=A>!ZM@}Na@u1)&C#f;Mq7igf{C|CbXb7ILf*0cUk5qxI0%u({hrmsu;o=|h+z-CB
zwKVGs<rlA}jsE-{=~$UvAS~@SNY(QxZN~BIWl!Y^7F<?J>&B~!iSb(vJBNF_rM~w$
zQVz9+$Pa#Yg?F<+qK0!;f#s>CVRFmLLbYremHx}QU!x8&)+IGT^Ns?0A51=;0JjCa
z)G17xF=x7emu<(}SP(TSzUS%_CwF%Uzz&WpWD&$fc&j!~UR&Hnv7uKU!ePhyhPV20
z=|yU)0|TE*dV5WF1RWCy4)W$Rij5xkLkUpM^6KRGphUV`&+$@8V;Wh6`bbW9qj<}T
zU;tis3+Ro!X<n7V^h&JrRp|_1-ZO3Fub91k1~-J_%9q$c?jJI*O&`{_#j>F{`DcIg
z+2*z+{wPbH(vTX6oC$KHq|R@lE?I7*q=)V#%BK)4pH5flx37>O%4hBMxDmA4D=OJ4
z{fCCIHaIzFk=I2I0t=Q_7s=shr#t*AfAiq(#)eXcqb4~8Yx!MJA+uMc@a+3w?pSba
zb?THkfWQX!J!Z}5tHQCZ7lXAO17mLtZ%Cr(=KR)#-9sIb*xMOMD@L&wT^V+Y-6~N<
zWhcBSr4*>V(IqMJ>RkC!9U6c9eka^H^Ke?<53pjr5`Z^@%s+25?iHDdiTbrv8l@u0
zFDxQPEU47wE$2Aih9rs0d4vp6>7+4uVpnxfuT>K72n2TdenZ9$r-3wba+m8*w^WFy
z9HbI#pD$k&czK^r*KP<=qnCKGQYUubMEM(`Rq=V}s*m4s``J^>obgU;ru*1?i;JG;
zGhMI_9EB^s;aBFDp=W!DvV9NS?;7VgWnH(Q`)ClUikHvvk9<2PW?$<1pj3RRG8hpR
za3k9-ZEYetzvXg<PgBRo%#$;ARdZJ8uayVFybHZ*oGKdArvzOY@8&;cME9SusiX{2
zQT3OJJ0*En|F9{z&Dd=ov5eW0>GMskNjl?%SEs~U_D`*nf;)Vd1hk%C@pVI5N@wHc
z*#db-^zTjUk};jWp9Gde?FWW`ma*QNtGwB0-L%zSnPKgsU#wl+iO7j%6HFV6Tf4hG
z?uEF`<xiTY1b<Qtdp{g?qAcgI+QFxgius3pU8tj;b<?(Z)UuTyquQzT`DAyl2TnW3
z;i#^f?Anw^TxWWsfwVe1%k2m}v)f>E+dBJx^V^SCjVu(!Mt&Mu1fr)>2}f1jg79i1
z_9@nmH2|x_`L=<1*!$#0c&Ceoj?ZTE`i0Md*<Ll$q7Uw<<Q~sSUXkXY)uGhEX7|Z@
zDG!=kkU@b#p{M@SF3xdk-B_ESt5l-soorN|;U$fygGpjs^`c3Bp3h9_`mQwOeY*8?
z>OQ@%PMddcc*?$p9AmeI2fu9Mx!$q%_q{+ZXfGlpzY95_CtlgKqZ;~nMQ3!uSa87!
z(!37$ezVz8_b6^#r&er=L?cM5>zRBz(yk$WQ@1Cl7w>9GULDNj4J<P2KaS2a8@v^g
z%^jPE1>q5os%}j_$?8xK`tafL_NU4VUJdqI2PyA1v<uwI6o`G7Zk8fgIc@<hM_5=%
zM_9R?qf9w;v`3dg=~GCyE5>War>Dz|N6*&%u4gb5Y>LElm@(|xADcRZDtFVeG*;i)
zwG@gy;@L`dd4~Kj%BgPit0KbJ!%p)SBMTD~gC4K%e17O<@HTnhs8d1SrD#bj=&DYd
zsEd4Rd;SS0V>A+{i`qK4c?%?%fuMz@!TE>t`Bs?MvNy;Hgt-Q1tzykwRalX;qG?M~
zRa>k0=CWExGs_z~{#7}xz>H`)U94JCQ6r{)Teti^y)cv^t=92p(?nEO(#Df`E`fU^
z?@{!cPC23L%F8Oc63@GIG>}-J<Dsl{U;n@e>rwcW#EZZ~@rFy|GvCWuPrrY0clZPA
z3IFqJFE7!O7lE$uJP}=w6Z(sdab@wF|KPN@2Tezyg|7>0>5SPvb<CpaZ5rW3u8OpT
zZh8IZnLJb>9+;Y$J(nq349vACR{$>pb6+Ig1x&topoIk(j*9g3zGx9+la1y6`DgUb
z>JtCnFO|p2?H~zL=9aPb-P^f`^q;+&xNd@9(~uR>+c!2ghAQN1b0n8d@TU$$uW7>C
zc0RM^vC&}`?FrifW3|!59r5v)HN29t^603=TQA)<!3xb8nmTu_s;R%8_iDlkn$<rW
zz0!V$>-Y?)G%OVn9fcS0N+X33d)I1dAVL4x+n0k1HASkkeMQGq)3w-|C-aZzJ1Jy#
zbj_|&3!=_XKaF6wjyqguV(|Re0YO2jsmgFs7kwpM+m!xzz4IdiF(N`Co~j>Ha`am{
zfoW)g&Z2XnzZTA1?X+GZ`NCX7hP-HyFL9xl`%6Ni#$YzVNJV-sUk8RCOWKx;sUFqV
z$W%-}EwUUkYc6{&98o<#iSDeJJlPW~75_i?O|#k`lOqRG(0gBsubB3pOn)Mij3Gsk
zg$5WQj7$s=rUpo3HzWdsG{Tq|e~mz35D53Nqi_Esfgb8l3yA*j3EI~xe1r*_dpj^f
z1DH|72r{5DnPCi!p&^Y<q>zP!Mhb$5Mo=F2s}~7bl|9yt%A)&WFm|CN7M&cz#9&;6
zC<7oXcKL>XV{m&a7z~z7qfnUui8iwF4tEza%3tXGi}9fOGpT#X&^;JLh#dX`!PDqu
zW^@=C{Ie><un@}02j`vtrh|7AQUGa&LYpJdCT7O=adVf2h};)C=V&oxfUvdY{$#x%
z44wZX<W9hW09r6vcyvR02s1d8Vi-V-q>(~H7>578azlha2@w#0A`+2iNRkoCm`pY!
l8=;W_W+r4KBR?b(F3f-n>*MX8DHHAhaQ4o2JX_!I{sN)*p9%l~

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/android-icon-96x96.png b/homepage/public/favicon_io/android-icon-96x96.png
new file mode 100644
index 0000000000000000000000000000000000000000..b932da1139c372efa3f909c3f91caa0858a8c8f5
GIT binary patch
literal 3829
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
Yj8JCg_mXq6kl6!ZZenfx($F>bUx%vZMgRZ+

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-114x114.png b/homepage/public/favicon_io/apple-icon-114x114.png
new file mode 100644
index 0000000000000000000000000000000000000000..db7aa9d6157e1b29b9458dee7603a027e593f401
GIT binary patch
literal 4886
zcmchbc{E$yyT?<nqKay$S&P;XV@OOfwFEKtr5Z%gAR*=w6h*aWRW;8_4W%k-2sK1o
zV@pj<)l5T6&1$Z+-1M%y)_w19t^4Qix6az<yUu<-&-3iF&p!L?ed7N%H)LlOU<CjG
z>_!N<C0+gg6c#4>Ie8{Jj4q6>*UYW~0JX_ye_>A3uSJ{@mSzAzhy(y|FA4xSqF3Gf
z4gdsz0f3cT001l-0O0k_Z?Vv%8<?C-4B>#2KSvSySsJ~DnP6n5&%DgU&dLT`%9}j_
z065!?;Mc6~Os?loqzU$h-Fv;k&qnMfNxsv1SC)zP3(hXDq{Pbh7(JJrGVZgGZd}m(
zcF1fQp0w?>^gh@)qvrXmwO9G63PvjZ$QM`iEn>U%pyw>wNG2QC*5qHFmA&^?kx~$Q
z>W#fj9X8`;VnOaEw&`9EcZ<&M4_d$wOEpR2R{v#H+F8b57#8?Z)Ya1K|1km6)BY+R
z>FW+~hdvk24>{eiJ<AECBmfg66m>01sWs1OPgPJdD;XE0e@>0doE<L{+S_LJu8+hZ
zqS9HYzuEOe;!5kfXgzV*nA&;%sPUt}(#HFSIEPUdGIDjWpd8Y)oclKhR5JoJa&P!v
z`aQP@hV;bGte9+@5k@UNE*Aq1pc%V2zSs`wQtu#o^4S)-fiA^o0U|jW%AmR|oD2;H
zd=jWo=?o-G8<n>jh2<`GyFV)&yL?F}f&Y<L;OH!uon@&#>gz_Hq?7_V8p*m<D#}=7
zK}=*Qg=%y@H@J-Y*5LQpG6b8EXvvDtF0JEoInXk`qWE&+<}dODN{m$Arr9}N##@o$
zC&K14%*}uzaq1Ehs`hSDCRdZz6HF#n9t(^Gj7YJ8;<1gjUMG^@mj!3mCXXFF`BMa5
zS}*0aZk>HD6GZMd36(m1y&O<$PBbX7+YHsRE+Of9Bt2%*H7@0h+s|i(3aU^G!+W%M
z@$)&<0pfluu0QU>x5Ycu!vjQ~a!lyL7pUenR8zU$XsXApYzahs&uXQ^g{jd`1rAji
zQ_bz}St9~v%JGo}Yiipd-IOkz^>6#y({OjssYRXk9iM#7pPIEc`Ob#tUPgqrTt+k(
za#mj}+3b$1zFEO}z;ts)z{$S%?Rwm&hP=06Q#J^r+fk6Pc<aH4+<E`N6ID1kY}G82
zch-qOlWMfbgqI~?P~2mET^*tZN5E1sCWe`WlhY`V(p@J*w>@o97};6?SjOEKps0tG
z)IINj0k8(ir}9nfJKeflFGvk)vTQm)G~pp(`_Ep;52QAkEoS-Uhb^!ww<frEKg=QI
zK4|Ub@4NCI&gO*kI5h=a9!M4`1(f~GlAwI;!>0;^jK>!oczr_Z%XBX{h~>--e5dv*
z>QV>16XuM^4&K?R&V5~}Zj$2h+90afzB9W~ovz5vb=gIPksE2P7F-^OwRNG<_=G3T
zZwIh5@>xD5sS@1FDv(|qJkmBPQcq}I+?f{`u97<We6WltOw@wfo-}(a9QtWS)W|x~
z6S~s2HK((*H|8iRV6yN^i%+R<eDHzQI&0D-D+5cjJdtu0loefuE$4lXZn>KmniBV&
z&=^t@pMF2$aP4vwL3r%;M!bPY+0|U0<u&h*muW2ep<uImQU!36th5QSm-EAxy;=KZ
zpZZ?5__2OBkCj)f9i?CDo0IMNbW3O+duqIc((=XJM|$MHu}hB>6>dILHU>p;Ms@O#
z-?M1MrV2GHJn*}a@<}A+tH^UwOHx-F9QYfa_7@8tAh51tmm}g_pZ8UG**(S5xV-$4
z6JILD)uA__>h4-evhVg+8B^0WjPET#nNYrgFrE+H9P(hceSLSY#)KPSP7wvN*Js;(
zeXG~XCm4tMWc}V#P!a-*#&n~E1MO=l4pIz7>4`{l6VITJqhgTCi-mXR)3Qam;>)e1
ze^^KST>6@orM^F2!eYNLz54p8m4hzJHCW{<AHz$XB?}0=6CaZ$VkHUo9)6$qc!?1!
z{7fX4r8_pRw_Xa5A@*0+IMRa6Pxl4fwr9o%Zr*?9q3>RHXPuPQe0!ZC_MEV2f$7$~
zNe%EP6_Rc&jw`SEF(1FcohX9<;bHQ?Y;stE@IvUFL+W+T#*SC0A|d8CX($<rr^GNW
zDz9nDM*2mn@OSY7Q%-ifcY$?)m#gfVtX14dlZTHUK{SDLYq(&;7Ryp^tToXwB8}HU
zZLpG}08!o(No*EpVm`7(p>T`)3@L7x9_VQ-udZLtG4}mEiFH>N{02J+RNXp8hz?81
z+uw=L$>Ui#5O#6#R46mf@Eeuzj7EruASC9CiqRxnP-ev_S>Nj9R&^DxracJQ7Nc`#
z3oH|@xlBmd;q~$T@<v;GJH_yo-=4rZtwWKVPfskXkQ150VuhwZ3O2)@*e^J{d<02n
zxJz1a5Rm0bAxWdSl%3b%=NTWakDt>W_7&pUk&(TCv@4F|z21k^MmDCd%@~g*e7ag|
z<KnH|>)}eQL!qg)$z|$4UJot6lshmF3Y<HkD*=9qLCsq|>O4G)6Jc}mx&|^TyMBQV
z+ie*!X_jJTa8Q;^mSc$(S`3&3fi|SMgj7&g85!_=9|i{fk9PUBX%kYdJ(4P|wzDZj
zZctQ{kx-r3bZ#M*>K*yuMkl)cZmx&*ATYT*xKXXY%sy?F^X`uHUQ5!#{vF!G`;Wk5
zx5;4$092PXiklDhrNs<aKF4@#V=zG5_p723xih<%69tlYZ11=p{!6yMzhCo5*AuV6
z`d`QvOP9Rk$n(fVWrG;n)tg`xzQLHJi#?KnP*j)KFG=LAxK>XyisIEcjAi=1UC8un
z0%fr7;+Se*fJ)PCkbEF0D)g<6ROv1;_;~uv{zho_v{OzZufpwx9y93-Ry{qvhYtyx
z$EBZJTJ<H;K&h47n5v1ss)Wz-udng}Wj=PU<l->5BfGoBuimH}Uz=-9n(vd{L!E}o
z%75@(8dT=QSXQ3GEoBWq7ry*_f8rF<Bw%r~UAOpU%!1nP-d@Ukm+bufD|rLnf&Oim
zb>lX8)WP64dgrv?tgWje_E=0QyD=u#wN@37C-rz0YY_K#*TQWvs?->9rUU<(Zy>kG
zE^i2RLz-Ab>S583H*_|gvn@wflg#74BOl!9)p7CYg@dB2(EICCCej&`Ym0}~1QMdZ
z?(oC2<0#h%wIs?5Y72XM71%7XIMQJyNvXM8{D?-IP*gD;aOkWPDKIY~@Nb1zuO0-Y
z+ev1Cf4+&dpU!pYXj~s$Y)Ch74VdD9JROlbm^-;T79;G{g1YkN@bF@cVW98AO0bKJ
z{^yD*o6HVYBX^QO@!xTG8jQ*fA)22IrApmYphT6n;u|vQpKXx&PNx@Lw?C~WLIpS$
z78Zom{h}-@;mznCs9B@W5HPXZH^a#;P$MlZEpLYHbsCYUk|ZIpN<EG}&Yq%-;h~-Y
zA0oHtd@YzxL{)Q^Tj<N^lN}7y+1V&vtcIt|$QHfn5<xtkg9We6>n9ki$x4~}+KwVw
z{UdHrFx!LpnS&o)uG#}%hB<H0_ML4%<5ashORMxlI-la4hD15SwmS2*!hlg-;1YC8
zNY<zmKLy;@OyLyz{e|1`oEavUC+566HW0q_&Skgb!hC$B`C`RObdf_%+R)OO*v?nR
zm?`B!a`;6MTl;QV#Fd=2jpkYkawc52NXt=9;oIT1b$ds%;}gjYbBpS6m-+{6t`vAj
zLax0y@JyPyxCM%fHQK2BXk4Ww4*{jhxiw_*`PxUXs?oprKx-me&o~}0;8JfZV8*LQ
zpYQj7L=Qz2+PnzesajnQN%8f$`E#=JhUVTU9f*cTEM9;`^!svrowH|LyuGc!o<ORE
zrPQVkbL#I{ZPSQAp|Jp8dxevg?qmnx4EV$6_OcbB+K1iqrW=J<QV`yOqjSo3x-Np%
z7bLH@f5>{ht?*%R&<SCr2E_ULa`xV?KvrD|dHOKPYhlDtXQjI+MNNQOAd&UdKO#2p
zg0T!+r^c5OyX7`FXwU3>@-8l<HN32)P);1!HXFRMi*G*~jlg;bJ~H*WBqJkZB|V#P
z1ElZhc!`Uv_3+U7682WnoQ4tcnt%hYf;51jA^)10j5U?Gv6eHgM<3djKulr+<17Cq
zj-lVXu0lG;{+?4zP!A7}E+<6;L&Kb$9IF2l+F6c^uzRb|KcDeei1g+&SVf+SuHw$b
zD%OQX)z&JCQRBwIk?#(k>@&P;^dh3keb)<vGgrrI(!MW?<``R6jV`bDZw>1maK*z_
z?h>^g!pylS;P<7W{DM>0Bnp;Y2#vY$@uy-_4bhqX*hO9*-)V^?g9pZ>gesx@@&!4k
zBGS8*s1KYYi1fn3i%d*R2#Hj_m}YsiroAg2JiHU-at&clL}ZmkC9-04Rn45DVJpur
zMg`ZpJ+zVCC|JT5)IF${d6}dDKW;zNpABh&)$fE;B_q8WH_UcU3I5qO5QR`O8Ladf
zlCS*jmoFm7@3R|vWQX2HuhjQ0OUuG#PAQME=MxQ1`EbZ)^&>#>y_?^Rt45{i{q%}x
zqIpp=$C#)w^cM-m-io|TmKPoNRIxBV&oQTwkCv{+@CnwCCkXb*Xj@zA@}*z*c6jBt
z<`X4@k9mher_AN#?OVFWUjHzAJ}M393-~!0^t!*QrhO7rl0I*!bA0|}uiw#IO+9?R
zEAj4*-P}Cs#<Rl%pNKqb$KZfY8n1%GR}V)TjD)J*nf$Om)pq-5(%|nwV^H|^2T0rQ
z$Nsz-E5Yxul&slTT}gtfhb7Lvho2Ub>wV_h*%Q-@%Q~ii33;y;8di&D_188weg>6{
zeBC*Xw6<2Au13pVIAbWLdHnu*UFZSh+{w^peM`&aPjtz|7w?S?rskxO0{794Y38S-
z^2b9r@V_6oL=(9t#>RT-F?BS;g+v*-xVW+x$^2IlBOz{jX(43u5{m=rx($pW!$>^W
zRL#90II#MqS00I^G_lsmp4U^30V)k7RZZ?gLTye`ZGzS}idGljX|*0~sXG1=yRP#a
zx-?j@Q1g20G>4GdaIhnbQ8RjRHwR*q8T~o;Zt?JB<7C`n1f#5+g8$+gzq~`syIHNY
zDBa?@U&B*1JNsvS0wLt2jU(Gr<#@lfT4&9@>(^_;Xe#Z;Nj@(d8XAgCHD^1i=Y-}X
znKzaqX~`d_@~G><?7tgNNJusgwyk%a$y)~zw4i+T&`kfO!2shkpxe1-=!02`Ho7;M
z*=I()z6$PMol{tdQ-30vH?aLR?YdZL(ce-p6rvud+Gv_TeHMF1^HKUDQwquhT{b5%
zHr1yT4;Pz7W~9H!=r1^+g+RswGnRAk0Q8u6(<=n5V7U}9H8ydmH*vSc-R*)dSVw0l
z&ziXPwllUFqR}7uo0<P2fAc}Ko+vQBD+U9Z<=Tv5UhjDX7qg-65B8EvlD_#xI~KsY
z>Cc{TPJJ-;k<c>Q)zg!?_o7CR|B#kpxO(zJ3p8)msCEC~uefffY+TUH?qonSax5U{
z$rH(@?90G-aJ&Cqy*6Z}l@w1R8#{Y2EdiBghrYs-lxixWv1GaPQ?ndTe@|df<aiQg
zmv-*;)OE1!9{7weGPuDwAQX!1Qr3GHrH4uDB1eLDm|2ouDP_hVT(t@(E|F)GziV+D
z5vHK~?evxLU$a{Fr13L%HW|gjbVWW&{u|}jr7&nJiPSQ$LjSoTPSCd@xL^oan6n?2
zE&wI4lCm6FMNSc7r3i*8D#4T?GGH(a48A#aY5xB>c=@>Cal!w;!<Cq44s-{RKN<Xe
zaD*U?9~R(7Ao%*j6cq4Y7*{O4;GI3>ef(V8hJ*{~EZ-m2$}Pal2?m4vI0txPy$LYb
z-*nU;p!n>hRpDP4qd!q#Fa#Fw>P7%4sw-W!zkQR=@ctvt|1j2g7lPX#gz`d^g^uw5
z12MyUVF|&$Sipa`O2OCLRi_SV{x5ONtmqU#Q5CAL23A*Ah3JQWze7jP{Ugo|d<Yf*
z*40gas=Y=xA^%~zX=wz&;XSeRTUYS%CV2X|D&R1IcxNAPe}(_;as{x9GZ=@1VlaxT
uiq1+<2o|e~RZ>^PsVZZYl$;b5<>?;s^!5>%zm?K60F3m_;Y8hA_x}rA)e9B?

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-120x120.png b/homepage/public/favicon_io/apple-icon-120x120.png
new file mode 100644
index 0000000000000000000000000000000000000000..1bd8363f07e28e17707dbbd7412589fa7a5542c7
GIT binary patch
literal 5265
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

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-144x144.png b/homepage/public/favicon_io/apple-icon-144x144.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e7da9ccf9d879a7277bf176ae17befffea1a58f
GIT binary patch
literal 6918
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

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-152x152.png b/homepage/public/favicon_io/apple-icon-152x152.png
new file mode 100644
index 0000000000000000000000000000000000000000..4fb3e6681b45ae4097fe1b18498de410518e7176
GIT binary patch
literal 7594
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
b0bYy-FJ^otxNCWs9ssIJT8bs|7NP$KpioX&

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-180x180.png b/homepage/public/favicon_io/apple-icon-180x180.png
new file mode 100644
index 0000000000000000000000000000000000000000..369bb7a3cf3097c56cd89d90bb888d9d9d20aefe
GIT binary patch
literal 9830
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

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-57x57.png b/homepage/public/favicon_io/apple-icon-57x57.png
new file mode 100644
index 0000000000000000000000000000000000000000..7949ad0d2032dfcfe2c7b4b6d9d9f3d819019d61
GIT binary patch
literal 2025
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
Hz|VgJJA8Q2

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-60x60.png b/homepage/public/favicon_io/apple-icon-60x60.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae8a2fae74d7dc2c9f52c102046be86b0e4b09b5
GIT binary patch
literal 2093
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

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-72x72.png b/homepage/public/favicon_io/apple-icon-72x72.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe775449b869e694a3ccbedb5bda33eceb55e1f7
GIT binary patch
literal 2657
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

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-76x76.png b/homepage/public/favicon_io/apple-icon-76x76.png
new file mode 100644
index 0000000000000000000000000000000000000000..1024007ce692068a7a610831739e7534e7c8edbb
GIT binary patch
literal 2841
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
UJrtNI;B^3yW@yug2)C>M0Fc-Lr~m)}

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon-precomposed.png b/homepage/public/favicon_io/apple-icon-precomposed.png
new file mode 100644
index 0000000000000000000000000000000000000000..a829446b291392da885a18e9da3407dcd3d5d988
GIT binary patch
literal 11039
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
NR@GIhRkD8je*o5S8z%q&

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/apple-icon.png b/homepage/public/favicon_io/apple-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..a829446b291392da885a18e9da3407dcd3d5d988
GIT binary patch
literal 11039
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
NR@GIhRkD8je*o5S8z%q&

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/browserconfig.xml b/homepage/public/favicon_io/browserconfig.xml
new file mode 100644
index 0000000..c554148
--- /dev/null
+++ b/homepage/public/favicon_io/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file
diff --git a/homepage/public/favicon_io/favicon-16x16.png b/homepage/public/favicon_io/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9c00fdf6f5e8ffb48ee77f5ab2e3d138da0f13c
GIT binary patch
literal 816
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstU$g(vPY0F
z14ES>14Ba#1H&(%P{RubhEf9thF1v;3|2E37{m+a><Y92O0)#{gt-3y|Nr0LKR-Ud
z{rU6z?Xx?sY@c*x$K<D%_x%0+^Y+av{T-z<ddk<#Zn=GI<@Zmoj~w3H(ONNkM(?El
z`UUf*T)BMd;e*>n1*z4QS<Ovl_4T!n9zFW^@89Xur`K;-d+GAUm#<#_`Sa)1t5+{y
zy?Xun^@k51e*XOV{Q2`IPoKVc`SRhzhtHlpd;9in>a07RK=&{vdAqwXbg;^L06FX>
zp1!W^FWGpxc&sPPd6x+k^7V9a43W5;oUlMDAtfov<(cv34VyL=D{vMR6@LEkNs;pd
zHwPDIw*qHJSEsj!mm;Uf=@X|;dMp3n>hkIeI;FLWgVD5<*H<?;lue6~;o=RJK)Lpb
zAcIv)Tq8<S5=&C8l8aJ-6oZk0k*ThMnXaL6h@pX%p^=rTv9^JMm4QL%ZTUwi8glbf
zGSez?Yfx!h9tYH*0J5PtKdq!Zu_%=xqokyu*h*hNGdD3k6^JvFv-R?e()XN~oeNYe
z0a6>1QJR}%W#y8eT$-DjS7K!q090DcV7UDMZhbU0o*+}KtUOXP(=$pK3@wcuVhclo
zYQ&MufvO45Oex6#DY?8xkprki5=n_~W^QUpWkD(f*j4%kdFl3>!u-(8@eKj0VlXr}
zv9vI-G&MJNt$R@cRKkyBPH<*bDuaQO)09PaZ-7!^NK&Ceo(yT3IjKOe>*wZ`<m9L8
zrzMtUCg<lB>m!0(-ykK~AT7-#G11W6Fxkk&I5pKg)yUE?&D=EA$SBFsP!Fg>59q#i
T>`#{fZD8<p^>bP0l+XkK9*i>m

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/favicon-32x32.png b/homepage/public/favicon_io/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..37eba929b64e9e092620340ddafd936437fb16e4
GIT binary patch
literal 1220
zcmZ{hc}$yS7{K2}a0?EN|BPuQ&ghmgg?=s9sEZ0|x7Jw%Rtj0>ptN60mC}xWEys{>
zvvRcz#xX%xuEAtnR)QSej2vYgWo>~16;W|^&_OxYgQN4SF%g&eB+vWgeV*TQy{|YV
z_?)ZD>n;EQS2BqZhT3BeJ@f*466*7ZP~*f7qyz%cA$e(+?(7IMNMRHJQceJno(;e@
z>Pj~NAcO!|js^f<34j~Fx+nAu00$~VKA{qyp<=h&p02GM=GP5#wyo72%cep1ldi8)
z-I=eJ7tZumJet10ZQ0n^Fe!T*RPA}1PO(;Ap!qKUVMm^-E$5d9cXw>&v5|XOsqCT*
zxUn>$sWh=pf^=3Tsamtu@`AM`?cUyAPj_2pdP;g)LRu;}Gb2?b5;WBm{XQW#>W9sy
zKkatA*}T<Qe^XMN*V0r~b5pG7?W~toRaWFFhx+GdCRO7~o6TmmTC%c|d2tcBS;7Kw
zMsq{CwD4+t94+<g=i>ZaiKN(SwRU%Xn<R*2#9V|K7r#u367eIc7tV)<hD1eOmdoW&
zjE3yYL<;3&p@8*GO_5Aim7SBBn3PyvQNFdcrO{{wh>#XRlSm8u@AWEv?4MALo7PRb
z*;(zBc3waCc-gSMy}i4;yR)-nu~^h<^}@o!&kGBqV`F-~es*r|p<1m_D3+F%v|6oB
zr&}=^H5!d_L^(S<J2*5nJw2_OoczA4YjJULSgBlDS<y~SEiW%`Zf;u8(QP)f*}P_Q
z$f{dE`mf+X%=vQ!aLw7BgkBCJWD4=%;}>0B4!<w0Uge;!aWWy0dU})*ebku=&YoZ$
zp`F!l#2MeHzNA0X*S%!3Iy>cL6A6O@S58W$W!K9~Zj?rZ40yHGx76NgY?U=P+^s7J
z&-hxAAuH(+H&^|TbDZW(oA&DxnO`mrp73hbJ>d&1rmYS0`qRzfUzO?iZ!JnE+fCO<
zm+Xc4#p0rZPe}vrVI|}dk7iCc)6-Mqt=4F8H`IuCS-Xew!Nkb;DCXpQr$n9}gN?UZ
z`f59C@ANcwwJKz<ewEos8hvzRX4<d8Oq)5J8=CF{>S|6o)#bi@9bN1=LX1S1bOgpT
z5@6H-9E9`rg#0|Q-c&4v$Kvq5-tR&X9)iN>-~8=A30xkN!%F`Dgm-dpUq%y-IXVb<
zEF_Vh0E1Wr;S2B>42Mf+!>Do?UwH8n*nKMZ8k9ZiV5zY}ZVVnz;4y?;I3B^{Lr_!z
zu(zM}VxD8jjw*OO3Ffe45r7TAee~ItaFlV|SLYulg2O~&9f+potwSjC+CGHB;lfBV
z9|nI<h2h7uKkTFhKUarBMJa&w_X#)+1^D`V6VnVyDDuj_Iu|%8Fo1%B%4$C_q9NM8
zP<R*_usCrrx;lm%kHqoV7#3Z`VesMwn17!f12Gv8i{(S7WBsuVoR2pQ`@^^ZEX&^)
e#^GYHST8ig3!Sg^;2-s92S6qU6Iz3!Gyeih*hP5&

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/favicon-96x96.png b/homepage/public/favicon_io/favicon-96x96.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f4ced1b7a11befe5f95f9524d99eb196574cb27
GIT binary patch
literal 3829
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
ZR)i`mzvtXjMXVkGD>FOO=f)m!{{kq><!b-{

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/favicon.ico b/homepage/public/favicon_io/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..1ff03152f0a5d7d02ff52c4e9ef281ce8c005827
GIT binary patch
literal 1150
zcmZQzU<5(|0R|wcz>vYhz#zuJz@P!dKp~(AL>x#lFaYJy!T&)B{{8#+9~}b)=;Bh4
zy-%M${r}*>ga6N-J^O$6?%n@So;>;g`t|GoKYsim=!U<4|Neje;yGCT+qZB3KYH{C
z%zpRo-T$9I3F`;h4+0l2T=>6o^{W4O@8A9Z`SWLj_JS0^^gep=^1pXP)c^Q`;{W+I
zb^lY-)BZny{v2!uObs>z{{Y<%0z3B~_+Qk}^nd2U#sBO2Cj6f`bJqV07cYY4K>ou8
z{zBb;^WOdc>DA5uOFO6jZ<)2~|B6#j{(t=b8?23(Sp4_*&;KoF?)>lCa_xV|=F9)L
qoO=lO8!o%CiGTX`^FIia1CYas+@uHcD>42h$9>e&gI*qx$_D^@Lg1eO

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/manifest.json b/homepage/public/favicon_io/manifest.json
new file mode 100644
index 0000000..013d4a6
--- /dev/null
+++ b/homepage/public/favicon_io/manifest.json
@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
\ No newline at end of file
diff --git a/homepage/public/favicon_io/ms-icon-144x144.png b/homepage/public/favicon_io/ms-icon-144x144.png
new file mode 100644
index 0000000000000000000000000000000000000000..42b74b0689b44fb43fc7900e82bead8c46279cba
GIT binary patch
literal 6918
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

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/ms-icon-150x150.png b/homepage/public/favicon_io/ms-icon-150x150.png
new file mode 100644
index 0000000000000000000000000000000000000000..e47af003591386c3ea8ace4bb57ac3070f66ada3
GIT binary patch
literal 7408
zcmd6McTiKoyLJSmOK&1bkxqb61Pn+C0qH^r#ehI)5_$<$K<Q0Dq)C?&L21&9H0ixc
z2SIu-(gVU5zqvE_H+Sa#f9K4eopbitciY+LecrQ?I@-_fkusA40DyaHs!$j%PyUyP
z32}GXJFd&PjNp}`mLdR99!GYKyo-Bgw^W5`0RX-{0KnT2004`7^>z~g@Bje-+vWfO
z_#*(o=#tT(D~l^2w9t441>F9-J~b62;NB3S)wGm}wg~T$lFPi$*hc{X%pcXDig54Q
zz0Au5mMQ;f`7$#$_u>5^QzPJ6t1=4#Wn?+`Hb@y3t}N)P-^V|$tuMgeO>cNZkg^A-
zxTTs=hvg?;TRchTOL=LX4&{QuRgF1Sbve1;vnvV-<9#Osf?gjC4Lx1>YZ|bb^+Qb=
z=1RW5<p0&EV`xCqw?W?f;HvrH%9O06y35=<yWHuVgvpooQF4wTQ#tv|9}(7@q$)rq
zLy*P&h9K(x5&CyVVWs9BV(7d7*C5liR|IkwjZ?J9jy<_@N(q(X?8pb)VsUKPTVzMW
zU4$Tfq|G_;XvezkQ)q<s7;*mI64%&tB+J+tRT~}>@y%Y;qBBG>!Jq_MRH5SWm-MuR
zJ8exLaVn4u=%--^h5-6Mumk7eS<pqktw0i*OWk=ZihfV$bHhso_WkMZK9s`S#ln$k
zL_S=$dveU@+V_45T{8Cw@rZe^DwhxeUZ6DzoXI>#S3p6PkvEn5DM;JXigGLP<+Lf*
z^G*9)AFE(8DFQwzQsH{!xc$J8m|33=x{x+W+z+w8n-kSg@99-A@t8VU#WrU0lP<AB
zgBmPUjgV)bM@HJCyT;t>qmi!o1YcQ&-@d+jr+Y{MD+gDEkpMe6UOu|DLgASOiAHXc
z3NcxUQq^R<Et1NgkhQmfUV!}D0@r0G5!1}AYvVxc-p%su=KK>2)Ckzh{!&(O!xUqR
zXg(9`!0SXkEg`{U!$>428jbNtQgSHp(|5i=P!r0HMRmTr%>|KDC%0ArKlsbwOo@sq
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
EKQM?Dga7~l

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/ms-icon-310x310.png b/homepage/public/favicon_io/ms-icon-310x310.png
new file mode 100644
index 0000000000000000000000000000000000000000..83666ef1a52a53891b451b0d913407ce7264e47d
GIT binary patch
literal 22613
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
AUjP6A

literal 0
HcmV?d00001

diff --git a/homepage/public/favicon_io/ms-icon-70x70.png b/homepage/public/favicon_io/ms-icon-70x70.png
new file mode 100644
index 0000000000000000000000000000000000000000..238c63bd411d744c1932cc5846537f4a2bd493a5
GIT binary patch
literal 2592
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

literal 0
HcmV?d00001

diff --git a/homepage/public/gedanken/creating-a-new-theme/index.html b/homepage/public/gedanken/creating-a-new-theme/index.html
new file mode 100644
index 0000000..b2cc085
--- /dev/null
+++ b/homepage/public/gedanken/creating-a-new-theme/index.html
@@ -0,0 +1,1228 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Creating a New Theme | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/gedanken/creating-a-new-theme/" />
+
+
+<meta property="og:title" content="Creating a New Theme" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/gedanken/creating-a-new-theme/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Creating a New Theme" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Creating a New Theme",
+    "url": "http:\/\/localhost:1313\/gedanken\/creating-a-new-theme\/",
+    "datePublished": "2021-10-22T17:12:11\u002b07:00",
+    "dateModified": "2021-10-22T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/gedanken/">Gedanken</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/gedanken/creating-a-new-theme/">Creating a New Theme</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Creating a New Theme</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ol>
+    <li><a href="#introduction">Introduction</a></li>
+    <li><a href="#some-definitions">Some Definitions</a>
+      <ol>
+        <li><a href="#skins">Skins</a></li>
+        <li><a href="#the-home-page">The Home Page</a></li>
+        <li><a href="#site-configuration-file">Site Configuration File</a></li>
+        <li><a href="#content">Content</a>
+          <ol>
+            <li><a href="#front-matter">Front Matter</a></li>
+            <li><a href="#markdown">Markdown</a></li>
+          </ol>
+        </li>
+        <li><a href="#template-files">Template Files</a>
+          <ol>
+            <li><a href="#single-template">Single Template</a></li>
+            <li><a href="#list-template">List Template</a></li>
+            <li><a href="#partial-template">Partial Template</a></li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+    <li><a href="#create-a-new-site">Create a New Site</a>
+      <ol>
+        <li><a href="#generate-the-html-for-the-new-site">Generate the HTML For the New Site</a></li>
+        <li><a href="#test-the-new-site">Test the New Site</a></li>
+      </ol>
+    </li>
+    <li><a href="#create-a-new-theme">Create a New Theme</a>
+      <ol>
+        <li><a href="#create-a-skeleton">Create a Skeleton</a></li>
+        <li><a href="#update-the-configuration-file-to-use-the-theme">Update the Configuration File to Use the Theme</a></li>
+        <li><a href="#generate-the-site">Generate the Site</a>
+          <ol>
+            <li><a href="#the-home-page-1">The Home Page</a></li>
+            <li><a href="#the-magic-of-static">The Magic of Static</a></li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+    <li><a href="#the-theme-development-cycle">The Theme Development Cycle</a>
+      <ol>
+        <li><a href="#purge-the-public-directory">Purge the public/ Directory</a></li>
+        <li><a href="#hugos-watch-option">Hugo&rsquo;s Watch Option</a></li>
+        <li><a href="#live-reload">Live Reload</a></li>
+        <li><a href="#development-commands">Development Commands</a></li>
+      </ol>
+    </li>
+    <li><a href="#update-the-home-page-template">Update the Home Page Template</a>
+      <ol>
+        <li><a href="#make-a-static-home-page">Make a Static Home Page</a>
+          <ol>
+            <li><a href="#live-reload-1">Live Reload</a></li>
+          </ol>
+        </li>
+        <li><a href="#build-a-dynamic-home-page">Build a &ldquo;Dynamic&rdquo; Home Page</a>
+          <ol>
+            <li><a href="#create-new-posts">Create New Posts</a></li>
+          </ol>
+        </li>
+        <li><a href="#list-and-single-templates">List and Single Templates</a></li>
+        <li><a href="#add-content-to-the-homepage">Add Content to the Homepage</a></li>
+        <li><a href="#add-content-to-the-posts">Add Content to the Posts</a>
+          <ol>
+            <li><a href="#update-the-template-file">Update the Template File</a></li>
+          </ol>
+        </li>
+        <li><a href="#linking-to-content">Linking to Content</a></li>
+        <li><a href="#create-a-post-listing">Create a Post Listing</a></li>
+      </ol>
+    </li>
+    <li><a href="#creating-top-level-pages">Creating Top Level Pages</a></li>
+    <li><a href="#sharing-templates">Sharing Templates</a>
+      <ol>
+        <li><a href="#create-the-header-and-footer-partials">Create the Header and Footer Partials</a></li>
+        <li><a href="#update-the-home-page-template-to-use-the-partials">Update the Home Page Template to Use the Partials</a></li>
+        <li><a href="#update-the-default-single-template-to-use-the-partials">Update the Default Single Template to Use the Partials</a></li>
+      </ol>
+    </li>
+    <li><a href="#add-date-published-to-posts">Add “Date Published” to Posts</a>
+      <ol>
+        <li><a href="#add-date-published-to-the-template">Add “Date Published” to the Template</a></li>
+        <li><a href="#dont-repeat-yourself">Don&rsquo;t Repeat Yourself</a></li>
+      </ol>
+    </li>
+  </ol>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="introduction">
+  Introduction
+</h2>
+<p>This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&rsquo;t cover using CSS to style your theme.</p>
+<p>We&rsquo;ll start with creating a new site with a very basic template. Then we&rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.</p>
+<p>In this tutorial, commands that you enter will start with the &ldquo;$&rdquo; prompt. The output will follow. Lines that start with &ldquo;#&rdquo; are comments that I&rsquo;ve added to explain a point. When I show updates to a file, the &ldquo;:wq&rdquo; on the last line means to save the file.</p>
+<p>Here&rsquo;s an example:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>## this is a comment
+</span></span><span style="display:flex;"><span>$ echo this is a command
+</span></span><span style="display:flex;"><span>this is a command
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>## edit the file
+</span></span><span style="display:flex;"><span>$ vi foo.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>date: &#34;2014-09-28&#34;
+</span></span><span style="display:flex;"><span>title: &#34;creating a new theme&#34;
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>bah and humbug
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>## show it
+</span></span><span style="display:flex;"><span>$ cat foo.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>date: &#34;2014-09-28&#34;
+</span></span><span style="display:flex;"><span>title: &#34;creating a new theme&#34;
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>bah and humbug
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h2 id="some-definitions">
+  Some Definitions
+</h2>
+<p>There are a few concepts that you need to understand before creating a theme.</p>
+
+
+<h3 id="skins">
+  Skins
+</h3>
+<p>Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.</p>
+<p>You have two ways to create a skin. The simplest way is to create it in the <code>layouts/</code> directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the <code>layouts/</code> directory so it will always find the skin.</p>
+<p>Your second choice is to create it in a sub-directory of the <code>themes/</code> directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?</p>
+<p>The difference between creating a skin in <code>layouts/</code> and creating it in <code>themes/</code> is very subtle. A skin in <code>layouts/</code> can’t be customized without updating the templates and static files that it is built from. A skin created in <code>themes/</code>, on the other hand, can be and that makes it easier for other people to use it.</p>
+<p>The rest of this tutorial will call a skin created in the <code>themes/</code> directory a theme.</p>
+<p>Note that you can use this tutorial to create a skin in the <code>layouts/</code> directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.</p>
+
+
+<h3 id="the-home-page">
+  The Home Page
+</h3>
+<p>The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html.</p>
+
+
+<h3 id="site-configuration-file">
+  Site Configuration File
+</h3>
+<p>When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it.</p>
+<p>Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your <code>content/</code> directory and template files in your <code>themes/</code> directory. It will create HTML files in your <code>public/</code> directory. You can change this by specifying alternate locations in the configuration file.</p>
+
+
+<h3 id="content">
+  Content
+</h3>
+<p>Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML.</p>
+
+
+<h4 id="front-matter">
+  Front Matter
+</h4>
+<p>The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or JSON. Unlike the configuration file, Hugo doesn’t use the file’s extension to know the format. It looks for markers to signal the type. TOML is surrounded by “<code>---</code>”, YAML by “<code>---</code>”, and JSON is enclosed in curly braces. I prefer to use TOML, so you’ll need to translate my examples if you prefer YAML or JSON.</p>
+<p>The information in the front matter is passed into the template before the content is rendered into HTML.</p>
+
+
+<h4 id="markdown">
+  Markdown
+</h4>
+<p>Content is written in Markdown which makes it easier to create the content. Hugo runs the content through a Markdown engine to create the HTML which will be written to the output file.</p>
+
+
+<h3 id="template-files">
+  Template Files
+</h3>
+<p>Hugo uses template files to render content into HTML. Template files are a bridge between the content and presentation. Rules in the template define what content is published, where it&rsquo;s published to, and how it will rendered to the HTML file. The template guides the presentation by specifying the style to use.</p>
+<p>There are three types of templates: single, list, and partial. Each type takes a bit of content as input and transforms it based on the commands in the template.</p>
+<p>Hugo uses its knowledge of the content to find the template file used to render the content. If it can’t find a template that is an exact match for the content, it will shift up a level and search from there. It will continue to do so until it finds a matching template or runs out of templates to try. If it can’t find a template, it will use the default template for the site.</p>
+<p>Please note that you can use the front matter to influence Hugo’s choice of templates.</p>
+
+
+<h4 id="single-template">
+  Single Template
+</h4>
+<p>A single template is used to render a single piece of content. For example, an article or post would be a single piece of content and use a single template.</p>
+
+
+<h4 id="list-template">
+  List Template
+</h4>
+<p>A list template renders a group of related content. That could be a summary of recent postings or all articles in a category. List templates can contain multiple groups.</p>
+<p>The homepage template is a special type of list template. Hugo assumes that the home page of your site will act as the portal for the rest of the content in the site.</p>
+
+
+<h4 id="partial-template">
+  Partial Template
+</h4>
+<p>A partial template is a template that can be included in other templates. Partial templates must be called using the “partial” template command. They are very handy for rolling up common behavior. For example, your site may have a banner that all pages use. Instead of copying the text of the banner into every single and list template, you could create a partial with the banner in it. That way if you decide to change the banner, you only have to change the partial template.</p>
+
+
+<h2 id="create-a-new-site">
+  Create a New Site
+</h2>
+<p>Let&rsquo;s use Hugo to create a new web site. I&rsquo;m a Mac user, so I&rsquo;ll create mine in my home directory, in the Sites folder. If you&rsquo;re using Linux, you might have to create the folder first.</p>
+<p>The &ldquo;new site&rdquo; command will create a skeleton of a site. It will give you the basic directory structure and a useable configuration file.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ hugo new site ~/Sites/zafta
+</span></span><span style="display:flex;"><span>$ cd ~/Sites/zafta
+</span></span><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total 8
+</span></span><span style="display:flex;"><span>drwxr-xr-x  7 quoha  staff  238 Sep 29 16:49 .
+</span></span><span style="display:flex;"><span>drwxr-xr-x  3 quoha  staff  102 Sep 29 16:49 ..
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Take a look in the content/ directory to confirm that it is empty.</p>
+<p>The other directories (archetypes/, layouts/, and static/) are used when customizing a theme. That&rsquo;s a topic for a different tutorial, so please ignore them for now.</p>
+
+
+<h3 id="generate-the-html-for-the-new-site">
+  Generate the HTML For the New Site
+</h3>
+<p>Running the <code>hugo</code> command with no options will read all the available content and generate the HTML files. It will also copy all static files (that&rsquo;s everything that&rsquo;s not content). Since we have an empty site, it won&rsquo;t do much, but it will do it very quickly.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The &ldquo;<code>--verbose</code>&rdquo; flag gives extra information that will be helpful when we build the template. Every line of the output that starts with &ldquo;INFO:&rdquo; or &ldquo;WARN:&rdquo; is present because we used that flag. The lines that start with &ldquo;WARN:&rdquo; are warning messages. We&rsquo;ll go over them later.</p>
+<p>We can verify that the command worked by looking at the directory again.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total 8
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>See that new public/ directory? Hugo placed all generated content there. When you&rsquo;re ready to publish your web site, that&rsquo;s the place to start. For now, though, let&rsquo;s just confirm that we have what we&rsquo;d expect from a site with no content.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ ls -l public
+</span></span><span style="display:flex;"><span>total 16
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  416 Sep 29 17:02 index.xml
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  262 Sep 29 17:02 sitemap.xml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Hugo created two XML files, which is standard, but there are no HTML files.</p>
+
+
+<h3 id="test-the-new-site">
+  Test the New Site
+</h3>
+<p>Verify that you can run the built-in web server. It will dramatically shorten your development cycle if you do. Start it by running the &ldquo;server&rdquo; command. If it is successful, you will see output similar to the following:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ hugo server --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>Serving pages from /Users/quoha/Sites/zafta/public
+</span></span><span style="display:flex;"><span>Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>Press Ctrl+C to stop
+</span></span></code></pre></div><p>Connect to the listed URL (it&rsquo;s on the line that starts with &ldquo;Web Server&rdquo;). If everything is working correctly, you should get a page that shows the following:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>index.xml
+</span></span><span style="display:flex;"><span>sitemap.xml
+</span></span></code></pre></div><p>That&rsquo;s a listing of your public/ directory. Hugo didn&rsquo;t create a home page because our site has no content. When there&rsquo;s no index.html file in a directory, the server lists the files in the directory, which is what you should see in your browser.</p>
+<p>Let’s go back and look at those warnings again.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html]
+</span></span></code></pre></div><p>That second warning is easier to explain. We haven’t created a template to be used to generate “page not found errors.” The 404 message is a topic for a separate tutorial.</p>
+<p>Now for the first warning. It is for the home page. You can tell because the first layout that it looked for was “index.html.” That’s only used by the home page.</p>
+<p>I like that the verbose flag causes Hugo to list the files that it&rsquo;s searching for. For the home page, they are index.html, _default/list.html, and _default/single.html. There are some rules that we&rsquo;ll cover later that explain the names and paths. For now, just remember that Hugo couldn&rsquo;t find a template for the home page and it told you so.</p>
+<p>At this point, you&rsquo;ve got a working installation and site that we can build upon. All that’s left is to add some content and a theme to display it.</p>
+
+
+<h2 id="create-a-new-theme">
+  Create a New Theme
+</h2>
+<p>Hugo doesn&rsquo;t ship with a default theme. There are a few available (I counted a dozen when I first installed Hugo) and Hugo comes with a command to create new themes.</p>
+<p>We&rsquo;re going to create a new theme called &ldquo;zafta.&rdquo; Since the goal of this tutorial is to show you how to fill out the files to pull in your content, the theme will not contain any CSS. In other words, ugly but functional.</p>
+<p>All themes have opinions on content and layout. For example, Zafta uses &ldquo;post&rdquo; over &ldquo;blog&rdquo;. Strong opinions make for simpler templates but differing opinions make it tougher to use themes. When you build a theme, consider using the terms that other themes do.</p>
+
+
+<h3 id="create-a-skeleton">
+  Create a Skeleton
+</h3>
+<p>Use the hugo &ldquo;new&rdquo; command to create the skeleton of a theme. This creates the directory structure and places empty files for you to fill out.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ hugo new theme zafta
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total 8
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+</span></span><span style="display:flex;"><span>drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find themes -type f | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  1081 Sep 29 17:31 themes/zafta/LICENSE.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff    93 Sep 29 17:31 themes/zafta/theme.toml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype.</p>
+<p>Please take a minute to fill out the theme.toml and LICENSE.md files. They&rsquo;re optional, but if you&rsquo;re going to be distributing your theme, it tells the world who to praise (or blame). It&rsquo;s also nice to declare the license so that people will know how they can use the theme.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/theme.toml
+</span></span><span style="display:flex;"><span>author: &#34;michael d henderson&#34;
+</span></span><span style="display:flex;"><span>description: &#34;a minimal working template&#34;
+</span></span><span style="display:flex;"><span>license: &#34;MIT&#34;
+</span></span><span style="display:flex;"><span>name: &#34;zafta&#34;
+</span></span><span style="display:flex;"><span>source_repo: &#34;&#34;
+</span></span><span style="display:flex;"><span>tags: [&#34;tags&#34;, &#34;categories&#34;]
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>## also edit themes/zafta/LICENSE.md and change
+</span></span><span style="display:flex;"><span>## the bit that says &#34;YOUR_NAME_HERE&#34;
+</span></span></code></pre></div><p>Note that the the skeleton&rsquo;s template files are empty. Don&rsquo;t worry, we&rsquo;ll be changing that shortly.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ find themes/zafta -name &#39;*.html&#39; | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="update-the-configuration-file-to-use-the-theme">
+  Update the Configuration File to Use the Theme
+</h3>
+<p>Now that we&rsquo;ve got a theme to work with, it&rsquo;s a good idea to add the theme name to the configuration file. This is optional, because you can always add &ldquo;-t zafta&rdquo; on all your commands. I like to put it the configuration file because I like shorter command lines. If you don&rsquo;t put it in the configuration file or specify it on the command line, you won&rsquo;t use the template that you&rsquo;re expecting to.</p>
+<p>Edit the file to add the theme, add a title for the site, and specify that all of our content will use the TOML format.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi config.toml
+</span></span><span style="display:flex;"><span>theme: &#34;zafta&#34;
+</span></span><span style="display:flex;"><span>baseurl: &#34;&#34;
+</span></span><span style="display:flex;"><span>languageCode: &#34;en-us&#34;
+</span></span><span style="display:flex;"><span>title: &#34;zafta - totally refreshing&#34;
+</span></span><span style="display:flex;"><span>MetaDataFormat: &#34;toml&#34;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="generate-the-site">
+  Generate the Site
+</h3>
+<p>Now that we have an empty theme, let&rsquo;s generate the site again.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Did you notice that the output is different? The warning message for the home page has disappeared and we have an additional information line saying that Hugo is syncing from the theme&rsquo;s directory.</p>
+<p>Let&rsquo;s check the public/ directory to see what Hugo&rsquo;s created.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ ls -l public
+</span></span><span style="display:flex;"><span>total 16
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 css
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff    0 Sep 29 17:56 index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  407 Sep 29 17:56 index.xml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 js
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  243 Sep 29 17:56 sitemap.xml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Notice four things:</p>
+<ol>
+<li>Hugo created a home page. This is the file public/index.html.</li>
+<li>Hugo created a css/ directory.</li>
+<li>Hugo created a js/ directory.</li>
+<li>Hugo claimed that it created 0 pages. It created a file and copied over static files, but didn&rsquo;t create any pages. That&rsquo;s because it considers a &ldquo;page&rdquo; to be a file created directly from a content file. It doesn&rsquo;t count things like the index.html files that it creates automatically.</li>
+</ol>
+
+
+<h4 id="the-home-page-1">
+  The Home Page
+</h4>
+<p>Hugo supports many different types of templates. The home page is special because it gets its own type of template and its own template file. The file, layouts/index.html, is used to generate the HTML for the home page. The Hugo documentation says that this is the only required template, but that depends. Hugo&rsquo;s warning message shows that it looks for three different templates:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</span></span></code></pre></div><p>If it can&rsquo;t find any of these, it completely skips creating the home page. We noticed that when we built the site without having a theme installed.</p>
+<p>When Hugo created our theme, it created an empty home page template. Now, when we build the site, Hugo finds the template and uses it to generate the HTML for the home page. Since the template file is empty, the HTML file is empty, too. If the template had any rules in it, then Hugo would have used them to generate the home page.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ find . -name index.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 20:21 ./public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 ./themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h4 id="the-magic-of-static">
+  The Magic of Static
+</h4>
+<p>Hugo does two things when generating the site. It uses templates to transform content into HTML and it copies static files into the site. Unlike content, static files are not transformed. They are copied exactly as they are.</p>
+<p>Hugo assumes that your site will use both CSS and JavaScript, so it creates directories in your theme to hold them. Remember opinions? Well, Hugo&rsquo;s opinion is that you&rsquo;ll store your CSS in a directory named css/ and your JavaScript in a directory named js/. If you don&rsquo;t like that, you can change the directory names in your theme directory or even delete them completely. Hugo&rsquo;s nice enough to offer its opinion, then behave nicely if you disagree.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ find themes/zafta -type d | xargs ls -ld
+</span></span><span style="display:flex;"><span>drwxr-xr-x  7 quoha  staff  238 Sep 29 17:38 themes/zafta
+</span></span><span style="display:flex;"><span>drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes/zafta/archetypes
+</span></span><span style="display:flex;"><span>drwxr-xr-x  5 quoha  staff  170 Sep 29 17:31 themes/zafta/layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/_default
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/partials
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/static
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/css
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/js
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h2 id="the-theme-development-cycle">
+  The Theme Development Cycle
+</h2>
+<p>When you&rsquo;re working on a theme, you will make changes in the theme&rsquo;s directory, rebuild the site, and check your changes in the browser. Hugo makes this very easy:</p>
+<ol>
+<li>Purge the public/ directory.</li>
+<li>Run the built in web server in watch mode.</li>
+<li>Open your site in a browser.</li>
+<li>Update the theme.</li>
+<li>Glance at your browser window to see changes.</li>
+<li>Return to step 4.</li>
+</ol>
+<p>I’ll throw in one more opinion: never work on a theme on a live site. Always work on a copy of your site. Make changes to your theme, test them, then copy them up to your site. For added safety, use a tool like Git to keep a revision history of your content and your theme. Believe me when I say that it is too easy to lose both your mind and your changes.</p>
+<p>Check the main Hugo site for information on using Git with Hugo.</p>
+
+
+<h3 id="purge-the-public-directory">
+  Purge the public/ Directory
+</h3>
+<p>When generating the site, Hugo will create new files and update existing ones in the <code>public/</code> directory. It will not delete files that are no longer used. For example, files that were created in the wrong directory or with the wrong title will remain. If you leave them, you might get confused by them later. I recommend cleaning out your site prior to generating it.</p>
+<p>Note: If you&rsquo;re building on an SSD, you should ignore this. Churning on a SSD can be costly.</p>
+
+
+<h3 id="hugos-watch-option">
+  Hugo&rsquo;s Watch Option
+</h3>
+<p>Hugo&rsquo;s &ldquo;<code>--watch</code>&rdquo; option will monitor the content/ and your theme directories for changes and rebuild the site automatically.</p>
+
+
+<h3 id="live-reload">
+  Live Reload
+</h3>
+<p>Hugo&rsquo;s built in web server supports live reload. As pages are saved on the server, the browser is told to refresh the page. Usually, this happens faster than you can say, &ldquo;Wow, that&rsquo;s totally amazing.&rdquo;</p>
+
+
+<h3 id="development-commands">
+  Development Commands
+</h3>
+<p>Use the following commands as the basis for your workflow.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>## purge old files. hugo will recreate the public directory.
+</span></span><span style="display:flex;"><span>##
+</span></span><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>##
+</span></span><span style="display:flex;"><span>## run hugo in watch mode
+</span></span><span style="display:flex;"><span>##
+</span></span><span style="display:flex;"><span>$ hugo server --watch --verbose
+</span></span></code></pre></div><p>Here&rsquo;s sample output showing Hugo detecting a change to the template for the home page. Once generated, the web browser automatically reloaded the page. I&rsquo;ve said this before, it&rsquo;s amazing.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo server --watch --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>Watching for changes in /Users/quoha/Sites/zafta/content
+</span></span><span style="display:flex;"><span>Serving pages from /Users/quoha/Sites/zafta/public
+</span></span><span style="display:flex;"><span>Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>Press Ctrl+C to stop
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 File System Event: [&#34;/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html&#34;: MODIFY|ATTRIB]
+</span></span><span style="display:flex;"><span>Change detected, rebuilding site
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 1 ms
+</span></span></code></pre></div>
+
+<h2 id="update-the-home-page-template">
+  Update the Home Page Template
+</h2>
+<p>The home page is one of a few special pages that Hugo creates automatically. As mentioned earlier, it looks for one of three files in the theme&rsquo;s layout/ directory:</p>
+<ol>
+<li>index.html</li>
+<li>_default/list.html</li>
+<li>_default/single.html</li>
+</ol>
+<p>We could update one of the default templates, but a good design decision is to update the most specific template available. That&rsquo;s not a hard and fast rule (in fact, we&rsquo;ll break it a few times in this tutorial), but it is a good generalization.</p>
+
+
+<h3 id="make-a-static-home-page">
+  Make a Static Home Page
+</h3>
+<p>Right now, that page is empty because we don&rsquo;t have any content and we don&rsquo;t have any logic in the template. Let&rsquo;s change that by adding some text to the template.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  78 Sep 29 21:26 public/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div>
+
+<h4 id="live-reload-1">
+  Live Reload
+</h4>
+<p>Note: If you&rsquo;re running the server with the <code>--watch</code> option, you&rsquo;ll see different content in the file:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-gdscript3" data-lang="gdscript3"><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;script&gt;document.write(<span style="color:#666;font-style:italic">&#39;&lt;script src=&#34;http://&#39;</span>
+</span></span><span style="display:flex;"><span>        + (location.host || <span style="color:#666;font-style:italic">&#39;localhost&#39;</span>).split(<span style="color:#666;font-style:italic">&#39;:&#39;</span>)[0]
+</span></span><span style="display:flex;"><span>    + <span style="color:#666;font-style:italic">&#39;:1313/livereload.js?mindelay=10&#34;&gt;&lt;/&#39;</span>
+</span></span><span style="display:flex;"><span>        + <span style="color:#666;font-style:italic">&#39;script&gt;&#39;</span>)&lt;/script&gt;&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>When you use <code>--watch</code>, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it.</p>
+
+
+<h3 id="build-a-dynamic-home-page">
+  Build a &ldquo;Dynamic&rdquo; Home Page
+</h3>
+<p>&ldquo;Dynamic home page?&rdquo; Hugo&rsquo;s a static web site generator, so this seems an odd thing to say. I mean let&rsquo;s have the home page automatically reflect the content in the site every time Hugo builds it. We&rsquo;ll use iteration in the template to do that.</p>
+
+
+<h4 id="create-new-posts">
+  Create New Posts
+</h4>
+<p>Now that we have the home page generating static content, let&rsquo;s add some content to the site. We&rsquo;ll display these posts as a list on the home page and on their own page, too.</p>
+<p>Hugo has a command to generate a skeleton post, just like it does for sites and themes.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ hugo --verbose new post/first.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/first.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>ERROR: 2014/09/29 Unable to Cast &lt;nil&gt; to map[string]interface{}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>That wasn&rsquo;t very nice, was it?</p>
+<p>The &ldquo;new&rdquo; command uses an archetype to create the post file. Hugo created an empty default archetype file, but that causes an error when there&rsquo;s a theme. For me, the workaround was to create an archetypes file specifically for the post type.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Description: &#34;&#34;
+</span></span><span style="display:flex;"><span>Tags: []
+</span></span><span style="display:flex;"><span>Categories: []
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find themes/zafta/archetypes -type f | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 21:53 themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  51 Sep 29 21:54 themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ hugo --verbose new post/first.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/first.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md
+</span></span><span style="display:flex;"><span>/Users/quoha/Sites/zafta/content/post/first.md created
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ hugo --verbose new post/second.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/second.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md
+</span></span><span style="display:flex;"><span>/Users/quoha/Sites/zafta/content/post/second.md created
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ ls -l content/post
+</span></span><span style="display:flex;"><span>total 16
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  104 Sep 29 21:54 first.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  105 Sep 29 21:57 second.md
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat content/post/first.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Categories: []
+</span></span><span style="display:flex;"><span>Description: &#34;&#34;
+</span></span><span style="display:flex;"><span>Tags: []
+</span></span><span style="display:flex;"><span>date: &#34;2014-09-29T21:54:53-05:00&#34;
+</span></span><span style="display:flex;"><span>title: &#34;first&#34;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>my first post
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat content/post/second.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Categories: []
+</span></span><span style="display:flex;"><span>Description: &#34;&#34;
+</span></span><span style="display:flex;"><span>Tags: []
+</span></span><span style="display:flex;"><span>date: &#34;2014-09-29T21:57:09-05:00&#34;
+</span></span><span style="display:flex;"><span>title: &#34;second&#34;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>my second post
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map[string]string{&#34;category&#34;:&#34;categories&#34;, &#34;tag&#34;:&#34;tags&#34;}
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>2 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 4 ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The output says that it created 2 pages. Those are our new posts:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  78 Sep 29 22:13 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/second/index.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The new files are empty because because the templates used to generate the content are empty. The homepage doesn&rsquo;t show the new content, either. We have to update the templates to add the posts.</p>
+
+
+<h3 id="list-and-single-templates">
+  List and Single Templates
+</h3>
+<p>In Hugo, we have three major kinds of templates. There&rsquo;s the home page template that we updated previously. It is used only by the home page. We also have &ldquo;single&rdquo; templates which are used to generate output for a single content file. We also have &ldquo;list&rdquo; templates that are used to group multiple pieces of content before generating output.</p>
+<p>Generally speaking, list templates are named &ldquo;list.html&rdquo; and single templates are named &ldquo;single.html.&rdquo;</p>
+<p>There are three other types of templates: partials, content views, and terms. We will not go into much detail on these.</p>
+
+
+<h3 id="add-content-to-the-homepage">
+  Add Content to the Homepage
+</h3>
+<p>The home page will contain a list of posts. Let&rsquo;s update its template to add the posts that we just created. The logic in the template will run every time we build the site.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  {{ range first 10 .Data.Pages }}
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between &ldquo;{{&rdquo; and &ldquo;}}&rdquo;. In our template, the commands are:</p>
+<ol>
+<li>range</li>
+<li>.Title</li>
+<li>end</li>
+</ol>
+<p>The &ldquo;range&rdquo; command is an iterator. We&rsquo;re going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created.</p>
+<p>The &ldquo;.Title&rdquo; command prints the value of the &ldquo;title&rdquo; variable. Hugo pulls it from the front matter in the Markdown file.</p>
+<p>The &ldquo;end&rdquo; command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds &ldquo;end.&rdquo; Everything between the &ldquo;range&rdquo; and &ldquo;end&rdquo; is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one.</p>
+<p>It&rsquo;s helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files.</p>
+<p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map[string]string{&#34;tag&#34;:&#34;tags&#34;, &#34;category&#34;:&#34;categories&#34;}
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>2 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 4 ms
+</span></span><span style="display:flex;"><span>$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  94 Sep 29 22:23 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/second/index.html
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;second&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;first&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let&rsquo;s take a moment to appreciate what we&rsquo;ve done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you&rsquo;ve learned everything you need to know to build a theme. All that&rsquo;s really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine.</p>
+<p>And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don&rsquo;t worry, though, that&rsquo;s all to come.</p>
+
+
+<h3 id="add-content-to-the-posts">
+  Add Content to the Posts
+</h3>
+<p>We&rsquo;re working with posts, which are in the content/post/ directory. That means that their section is &ldquo;post&rdquo; (and if we don&rsquo;t do something weird, their type is also &ldquo;post&rdquo;).</p>
+<p>Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can&rsquo;t find one, then it will look in the _default/ directory. There are some twists that we&rsquo;ll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html.</p>
+<p>Now that we know the search rule, let&rsquo;s see what we actually have available:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ find themes/zafta -name single.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  132 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+</span></span></code></pre></div><p>We could create a new template, post/single.html, or change the default. Since we don&rsquo;t know of any other content types, let&rsquo;s start with updating the default.</p>
+<p>Remember, any content that we haven&rsquo;t created a template for will end up using this template. That can be good or bad. Bad because I know that we&rsquo;re going to be adding different types of content and we&rsquo;re going to end up undoing some of the changes we&rsquo;ve made. It&rsquo;s good because we&rsquo;ll be able to see immediate results. It&rsquo;s also good to start here because we can start to build the basic layout for the site. As we add more content types, we&rsquo;ll refactor this file and move logic around. Hugo makes that fairly painless, so we&rsquo;ll accept the cost and proceed.</p>
+<p>Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you&rsquo;re building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That&rsquo;s a refreshing amount of joy right there.</p>
+
+
+<h4 id="update-the-template-file">
+  Update the Template File
+</h4>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;{{ .Title }}&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map[string]string{&#34;tag&#34;:&#34;tags&#34;, &#34;category&#34;:&#34;categories&#34;}
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>2 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 4 ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   94 Sep 29 22:40 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  125 Sep 29 22:40 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff    0 Sep 29 22:40 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  128 Sep 29 22:40 public/post/second/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/post/first/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;first&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;first&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;my first post&lt;/p&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/post/second/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;second&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;second&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;my second post&lt;/p&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Notice that the posts now have content. You can go to localhost:1313/post/first to verify.</p>
+
+
+<h3 id="linking-to-content">
+  Linking to Content
+</h3>
+<p>The posts are on the home page. Let&rsquo;s add a link from there to the post. Since this is the home page, we&rsquo;ll update its template.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  {{ range first 10 .Data.Pages }}
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>Build the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map[string]string{&#34;tag&#34;:&#34;tags&#34;, &#34;category&#34;:&#34;categories&#34;}
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>2 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 4 ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  149 Sep 29 22:44 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  125 Sep 29 22:44 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff    0 Sep 29 22:44 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  128 Sep 29 22:44 public/post/second/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href=&#34;/post/second/&#34;&gt;second&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href=&#34;/post/first/&#34;&gt;first&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="create-a-post-listing">
+  Create a Post Listing
+</h3>
+<p>We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let&rsquo;s make it show a list of all posts (not just the first ten).</p>
+<p>We need to decide which template to update. This will be a listing, so it should be a list template. Let&rsquo;s take a quick look and see which list templates are available.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ find themes/zafta -name list.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+</span></span></code></pre></div><p>As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don&rsquo;t have multiple content types, so let&rsquo;s stay consistent and update the default list template.</p>
+
+
+<h2 id="creating-top-level-pages">
+  Creating Top Level Pages
+</h2>
+<p>Let&rsquo;s add an &ldquo;about&rdquo; page and display it at the top level (as opposed to a sub-level like we did with posts).</p>
+<p>The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let&rsquo;s verify that by creating an &ldquo;about&rdquo; page at the top level:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi content/about.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>title: &#34;about&#34;
+</span></span><span style="display:flex;"><span>description: &#34;about this site&#34;
+</span></span><span style="display:flex;"><span>date: &#34;2014-09-27&#34;
+</span></span><span style="display:flex;"><span>slug: &#34;about time&#34;
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>## about us
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>i&#39;m speechless
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ find public -name &#39;*.html&#39; | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff   334 Sep 27 15:08 public/about-time/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff   527 Sep 27 15:08 public/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff   358 Sep 27 15:08 public/post/first-post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff     0 Sep 27 15:08 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff   342 Sep 27 15:08 public/post/second-post/index.html
+</span></span></code></pre></div><p>Notice that the page wasn&rsquo;t created at the top level. It was created in a sub-directory named &lsquo;about-time/&rsquo;. That name came from our slug. Hugo will use the slug to name the generated content. It&rsquo;s a reasonable default, by the way, but we can learn a few things by fighting it for this file.</p>
+<p>One other thing. Take a look at the home page.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-gdscript3" data-lang="gdscript3"><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href=<span style="color:#666;font-style:italic">&#34;http://localhost:1313/post/theme/&#34;</span>&gt;creating a new theme&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href=<span style="color:#666;font-style:italic">&#34;http://localhost:1313/about-time/&#34;</span>&gt;about&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href=<span style="color:#666;font-style:italic">&#34;http://localhost:1313/post/second-post/&#34;</span>&gt;second&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href=<span style="color:#666;font-style:italic">&#34;http://localhost:1313/post/first-post/&#34;</span>&gt;first&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>&lt;script&gt;document.write(<span style="color:#666;font-style:italic">&#39;&lt;script src=&#34;http://&#39;</span>
+</span></span><span style="display:flex;"><span>        + (location.host || <span style="color:#666;font-style:italic">&#39;localhost&#39;</span>).split(<span style="color:#666;font-style:italic">&#39;:&#39;</span>)[0]
+</span></span><span style="display:flex;"><span>		+ <span style="color:#666;font-style:italic">&#39;:1313/livereload.js?mindelay=10&#34;&gt;&lt;/&#39;</span>
+</span></span><span style="display:flex;"><span>        + <span style="color:#666;font-style:italic">&#39;script&gt;&#39;</span>)&lt;/script&gt;&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>Notice that the &ldquo;about&rdquo; link is listed with the posts? That&rsquo;s not desirable, so let&rsquo;s change that first.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;posts&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ range first 10 .Data.Pages }}
+</span></span><span style="display:flex;"><span>    {{ if eq .Type &#34;post&#34;}}
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;pages&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ range .Data.Pages }}
+</span></span><span style="display:flex;"><span>    {{ if eq .Type &#34;page&#34; }}
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it.</p>
+<p>But, that about page still renders to about-time/index.html.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ find public -name &#39;*.html&#39; | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff    334 Sep 27 15:33 public/about-time/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff    645 Sep 27 15:33 public/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff    358 Sep 27 15:33 public/post/first-post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff      0 Sep 27 15:33 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff    342 Sep 27 15:33 public/post/second-post/index.html
+</span></span></code></pre></div><p>Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let&rsquo;s do it the hard way and change the permalink in the configuration file.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi config.toml
+</span></span><span style="display:flex;"><span>[permalinks]
+</span></span><span style="display:flex;"><span>	page: &#34;/:title/&#34;
+</span></span><span style="display:flex;"><span>	about: &#34;/:filename/&#34;
+</span></span></code></pre></div><p>Generate the web site and verify that this didn&rsquo;t work. Hugo lets &ldquo;slug&rdquo; or &ldquo;URL&rdquo; override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place.</p>
+
+
+<h2 id="sharing-templates">
+  Sharing Templates
+</h2>
+<p>If you&rsquo;ve been following along, you probably noticed that posts have titles in the browser and the home page doesn&rsquo;t. That&rsquo;s because we didn&rsquo;t put the title in the home page&rsquo;s template (layouts/index.html). That&rsquo;s an easy thing to do, but let&rsquo;s look at a different option.</p>
+<p>We can put the common bits into a shared template that&rsquo;s stored in the themes/zafta/layouts/partials/ directory.</p>
+
+
+<h3 id="create-the-header-and-footer-partials">
+  Create the Header and Footer Partials
+</h3>
+<p>In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme&rsquo;s presentation.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>	&lt;title&gt;{{ .Title }}&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ vi themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div>
+
+<h3 id="update-the-home-page-template-to-use-the-partials">
+  Update the Home Page Template to Use the Partials
+</h3>
+<p>The most noticeable difference between a template call and a partials call is the lack of path:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{{ template &#34;theme/partials/header.html&#34; . }}
+</span></span></code></pre></div><p>versus</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{{ partial &#34;header.html&#34; . }}
+</span></span></code></pre></div><p>Both pass in the context.</p>
+<p>Let&rsquo;s change the home page template to use these new partials.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>{{ partial &#34;header.html&#34; . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;posts&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ range first 10 .Data.Pages }}
+</span></span><span style="display:flex;"><span>    {{ if eq .Type &#34;post&#34;}}
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;pages&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ range .Data.Pages }}
+</span></span><span style="display:flex;"><span>    {{ if or (eq .Type &#34;page&#34;) (eq .Type &#34;about&#34;) }}
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Type }} - {{ .Title }} - {{ .RelPermalink }}&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial &#34;footer.html&#34; . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The title on the home page is now &ldquo;your title here&rdquo;, which comes from the &ldquo;title&rdquo; variable in the config.toml file.</p>
+
+
+<h3 id="update-the-default-single-template-to-use-the-partials">
+  Update the Default Single Template to Use the Partials
+</h3>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>{{ partial &#34;header.html&#34; . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial &#34;footer.html&#34; . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file.</p>
+
+
+<h2 id="add-date-published-to-posts">
+  Add “Date Published” to Posts
+</h2>
+<p>It&rsquo;s common to have posts display the date that they were written or published, so let&rsquo;s add that. The front matter of our posts has a variable named &ldquo;date.&rdquo; It&rsquo;s usually the date the content was created, but let&rsquo;s pretend that&rsquo;s the value we want to display.</p>
+
+
+<h3 id="add-date-published-to-the-template">
+  Add “Date Published” to the Template
+</h3>
+<p>We&rsquo;ll start by updating the template used to render the posts. The template code will look like:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{{ .Date.Format &#34;Mon, Jan 2, 2006&#34; }}
+</span></span></code></pre></div><p>Posts use the default single template, so we&rsquo;ll change that file.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>{{ partial &#34;header.html&#34; . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;h2&gt;{{ .Date.Format &#34;Mon, Jan 2, 2006&#34; }}&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial &#34;footer.html&#34; . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The posts now have the date displayed in them. There&rsquo;s a problem, though. The &ldquo;about&rdquo; page also has the date displayed.</p>
+<p>As usual, there are a couple of ways to make the date display only on posts. We could do an &ldquo;if&rdquo; statement like we did on the home page. Another way would be to create a separate template for posts.</p>
+<p>The &ldquo;if&rdquo; solution works for sites that have just a couple of content types. It aligns with the principle of &ldquo;code for today,&rdquo; too.</p>
+<p>Let&rsquo;s assume, though, that we&rsquo;ve made our site so complex that we feel we have to create a new template type. In Hugo-speak, we&rsquo;re going to create a section template.</p>
+<p>Let&rsquo;s restore the default single template before we forget.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ mkdir themes/zafta/layouts/post
+</span></span><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>{{ partial &#34;header.html&#34; . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial &#34;footer.html&#34; . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Now we&rsquo;ll update the post&rsquo;s version of the single template. If you remember Hugo&rsquo;s rules, the template engine will use this version over the default.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>$ vi themes/zafta/layouts/post/single.html
+</span></span><span style="display:flex;"><span>{{ partial &#34;header.html&#34; . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;h2&gt;{{ .Date.Format &#34;Mon, Jan 2, 2006&#34; }}&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial &#34;footer.html&#34; . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn&rsquo;t.</p>
+
+
+<h3 id="dont-repeat-yourself">
+  Don&rsquo;t Repeat Yourself
+</h3>
+<p>DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you&rsquo;re figuring that out, accept that you&rsquo;ll be doing some refactoring. Hugo makes that easy and fast, so it&rsquo;s okay to delay splitting up a template.</p>
+
+   <div class="time">
+     <time datetime="2021-10-22">2021-10-22&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 34 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/gedanken/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/gedanken/diagrams/index.html b/homepage/public/gedanken/diagrams/index.html
new file mode 100644
index 0000000..f6baa3b
--- /dev/null
+++ b/homepage/public/gedanken/diagrams/index.html
@@ -0,0 +1,3132 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Hugo Diagrams | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/gedanken/diagrams/" />
+
+
+<meta property="og:title" content="Hugo Diagrams" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/gedanken/diagrams/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Hugo Diagrams" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Hugo Diagrams",
+    "url": "http:\/\/localhost:1313\/gedanken\/diagrams\/",
+    "datePublished": "2022-10-25T17:12:11\u002b07:00",
+    "dateModified": "2022-10-25T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/gedanken/">Gedanken</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/gedanken/diagrams/">Hugo Diagrams</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Hugo Diagrams</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+        <li><a href="/tags/tech/">#Tech</a></li>
+        <li><a href="/tags/diagrams/">#Diagrams</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ol>
+    <li><a href="#goat-diagrams-ascii">GoAT Diagrams (Ascii)</a></li>
+    <li><a href="#goat-diagrams-examples">GoAT Diagrams Examples</a>
+      <ol>
+        <li><a href="#graphics">Graphics</a></li>
+        <li><a href="#complex">Complex</a></li>
+        <li><a href="#process">Process</a></li>
+        <li><a href="#file-tree">File tree</a></li>
+        <li><a href="#sequence-diagram">Sequence Diagram</a></li>
+        <li><a href="#flowchart">Flowchart</a></li>
+        <li><a href="#table">Table</a></li>
+      </ol>
+    </li>
+  </ol>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   <p>Hugo version &gt;= 0.93.0</p>
+
+
+<h2 id="goat-diagrams-ascii">
+  GoAT Diagrams (Ascii)
+</h2>
+<p>Hugo! supports <a href="https://github.com/bep/goat">GoAT</a> natively. This means that this code block:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>```goat
+</span></span><span style="display:flex;"><span>      .               .                .               .--- 1          .-- 1     / 1
+</span></span><span style="display:flex;"><span>     / \              |                |           .---+            .-+         +
+</span></span><span style="display:flex;"><span>    /   \         .---+---.         .--+--.        |   &#39;--- 2      |   &#39;-- 2   / \ 2
+</span></span><span style="display:flex;"><span>   +     +        |       |        |       |    ---+            ---+          +
+</span></span><span style="display:flex;"><span>  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
+</span></span><span style="display:flex;"><span> /   \ /   \    |   |   |   |    |   |   |   |     &#39;---+            &#39;-+         +
+</span></span><span style="display:flex;"><span> 1   2 3   4    1   2   3   4    1   2   3   4         &#39;--- 4          &#39;-- 4     \ 4
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>```
+</span></span></code></pre></div><p>Will be rendered as:</p>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 712 137"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 472,16 L 496,16' fill='none' stroke='currentColor'></path>
+<path d='M 608,16 L 616,16' fill='none' stroke='currentColor'></path>
+<path d='M 440,32 L 472,32' fill='none' stroke='currentColor'></path>
+<path d='M 584,32 L 592,32' fill='none' stroke='currentColor'></path>
+<path d='M 176,48 L 208,48' fill='none' stroke='currentColor'></path>
+<path d='M 208,48 L 240,48' fill='none' stroke='currentColor'></path>
+<path d='M 328,48 L 344,48' fill='none' stroke='currentColor'></path>
+<path d='M 344,48 L 360,48' fill='none' stroke='currentColor'></path>
+<path d='M 472,48 L 496,48' fill='none' stroke='currentColor'></path>
+<path d='M 608,48 L 616,48' fill='none' stroke='currentColor'></path>
+<path d='M 416,64 L 440,64' fill='none' stroke='currentColor'></path>
+<path d='M 544,64 L 568,64' fill='none' stroke='currentColor'></path>
+<path d='M 160,80 L 176,80' fill='none' stroke='currentColor'></path>
+<path d='M 176,80 L 192,80' fill='none' stroke='currentColor'></path>
+<path d='M 224,80 L 240,80' fill='none' stroke='currentColor'></path>
+<path d='M 240,80 L 256,80' fill='none' stroke='currentColor'></path>
+<path d='M 472,80 L 496,80' fill='none' stroke='currentColor'></path>
+<path d='M 608,80 L 616,80' fill='none' stroke='currentColor'></path>
+<path d='M 440,96 L 472,96' fill='none' stroke='currentColor'></path>
+<path d='M 584,96 L 592,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,112 L 496,112' fill='none' stroke='currentColor'></path>
+<path d='M 608,112 L 616,112' fill='none' stroke='currentColor'></path>
+<path d='M 160,80 L 160,96' fill='none' stroke='currentColor'></path>
+<path d='M 176,48 L 176,80' fill='none' stroke='currentColor'></path>
+<path d='M 192,80 L 192,96' fill='none' stroke='currentColor'></path>
+<path d='M 208,16 L 208,48' fill='none' stroke='currentColor'></path>
+<path d='M 224,80 L 224,96' fill='none' stroke='currentColor'></path>
+<path d='M 240,48 L 240,80' fill='none' stroke='currentColor'></path>
+<path d='M 256,80 L 256,96' fill='none' stroke='currentColor'></path>
+<path d='M 312,64 L 312,80' fill='none' stroke='currentColor'></path>
+<path d='M 344,16 L 344,48' fill='none' stroke='currentColor'></path>
+<path d='M 376,64 L 376,80' fill='none' stroke='currentColor'></path>
+<path d='M 440,32 L 440,64' fill='none' stroke='currentColor'></path>
+<path d='M 440,64 L 440,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,16 L 472,32' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 472,48' fill='none' stroke='currentColor'></path>
+<path d='M 472,80 L 472,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,96 L 472,112' fill='none' stroke='currentColor'></path>
+<path d='M 568,48 L 568,64' fill='none' stroke='currentColor'></path>
+<path d='M 568,64 L 568,80' fill='none' stroke='currentColor'></path>
+<path d='M 40,96 L 56,64' fill='none' stroke='currentColor'></path>
+<path d='M 56,64 L 80,16' fill='none' stroke='currentColor'></path>
+<path d='M 88,96 L 104,64' fill='none' stroke='currentColor'></path>
+<path d='M 656,64 L 672,32' fill='none' stroke='currentColor'></path>
+<path d='M 672,32 L 680,16' fill='none' stroke='currentColor'></path>
+<path d='M 672,96 L 680,80' fill='none' stroke='currentColor'></path>
+<path d='M 56,64 L 72,96' fill='none' stroke='currentColor'></path>
+<path d='M 80,16 L 104,64' fill='none' stroke='currentColor'></path>
+<path d='M 104,64 L 120,96' fill='none' stroke='currentColor'></path>
+<path d='M 656,64 L 672,96' fill='none' stroke='currentColor'></path>
+<path d='M 672,96 L 680,112' fill='none' stroke='currentColor'></path>
+<path d='M 672,32 L 680,48' fill='none' stroke='currentColor'></path>
+<path d='M 608,16 A 16,16 0 0,0 592,32' fill='none' stroke='currentColor'></path>
+<path d='M 584,32 A 16,16 0 0,0 568,48' fill='none' stroke='currentColor'></path>
+<path d='M 328,48 A 16,16 0 0,0 312,64' fill='none' stroke='currentColor'></path>
+<path d='M 360,48 A 16,16 0 0,1 376,64' fill='none' stroke='currentColor'></path>
+<path d='M 592,32 A 16,16 0 0,0 608,48' fill='none' stroke='currentColor'></path>
+<path d='M 312,80 A 16,16 0 0,0 296,96' fill='none' stroke='currentColor'></path>
+<path d='M 312,80 A 16,16 0 0,1 328,96' fill='none' stroke='currentColor'></path>
+<path d='M 376,80 A 16,16 0 0,0 360,96' fill='none' stroke='currentColor'></path>
+<path d='M 376,80 A 16,16 0 0,1 392,96' fill='none' stroke='currentColor'></path>
+<path d='M 608,80 A 16,16 0 0,0 592,96' fill='none' stroke='currentColor'></path>
+<path d='M 568,80 A 16,16 0 0,0 584,96' fill='none' stroke='currentColor'></path>
+<path d='M 592,96 A 16,16 0 0,0 608,112' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='88' y='116' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='160' y='116' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='192' y='116' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='224' y='116' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='256' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='296' y='116' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='328' y='116' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='360' y='116' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='392' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='512' y='20' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='512' y='52' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='512' y='84' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='512' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='632' y='20' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='632' y='52' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='632' y='84' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='632' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='696' y='20' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='696' y='52' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='696' y='84' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='696' y='116' fill='currentColor' style='font-size:1em'>4</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h2 id="goat-diagrams-examples">
+  GoAT Diagrams Examples
+</h2>
+
+
+<h3 id="graphics">
+  Graphics
+</h3>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 712 185"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 40,32 L 104,32' fill='none' stroke='currentColor'></path>
+<path d='M 24,64 L 88,64' fill='none' stroke='currentColor'></path>
+<path d='M 520,64 L 584,64' fill='none' stroke='currentColor'></path>
+<path d='M 584,64 L 648,64' fill='none' stroke='currentColor'></path>
+<path d='M 320,80 L 352,80' fill='none' stroke='currentColor'></path>
+<path d='M 368,80 L 408,80' fill='none' stroke='currentColor'></path>
+<path d='M 40,96 L 80,96' fill='none' stroke='currentColor'></path>
+<path d='M 96,96 L 104,96' fill='none' stroke='currentColor'></path>
+<path d='M 168,96 L 216,96' fill='none' stroke='currentColor'></path>
+<path d='M 528,96 L 592,96' fill='none' stroke='currentColor'></path>
+<path d='M 24,128 L 88,128' fill='none' stroke='currentColor'></path>
+<path d='M 288,144 L 440,144' fill='none' stroke='currentColor'></path>
+<path d='M 640,144 L 688,144' fill='none' stroke='currentColor'></path>
+<path d='M 24,64 L 24,128' fill='none' stroke='currentColor'></path>
+<path d='M 40,32 L 40,48' fill='none' stroke='currentColor'></path>
+<path d='M 40,80 L 40,96' fill='none' stroke='currentColor'></path>
+<path d='M 88,64 L 88,128' fill='none' stroke='currentColor'></path>
+<path d='M 104,32 L 104,96' fill='none' stroke='currentColor'></path>
+<path d='M 168,48 L 168,96' fill='none' stroke='currentColor'></path>
+<path d='M 504,128 L 504,160' fill='none' stroke='currentColor'></path>
+<path d='M 24,64 L 40,32' fill='none' stroke='currentColor'></path>
+<path d='M 24,128 L 40,96' fill='none' stroke='currentColor'></path>
+<path d='M 88,64 L 104,32' fill='none' stroke='currentColor'></path>
+<path d='M 88,128 L 104,96' fill='none' stroke='currentColor'></path>
+<path d='M 152,128 L 168,96' fill='none' stroke='currentColor'></path>
+<path d='M 288,144 L 320,80' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 480,16' fill='none' stroke='currentColor'></path>
+<path d='M 504,128 L 520,96' fill='none' stroke='currentColor'></path>
+<path d='M 592,48 L 616,0' fill='none' stroke='currentColor'></path>
+<path d='M 640,144 L 664,96' fill='none' stroke='currentColor'></path>
+<path d='M 328,16 L 368,96' fill='none' stroke='currentColor'></path>
+<path d='M 408,80 L 440,144' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 480,48' fill='none' stroke='currentColor'></path>
+<path d='M 560,16 L 584,64' fill='none' stroke='currentColor'></path>
+<path d='M 664,96 L 688,144' fill='none' stroke='currentColor'></path>
+<path d='M 40,48 L 40,56' fill='none' stroke='currentColor'></path>
+<path d='M 40,72 L 40,80' fill='none' stroke='currentColor'></path>
+<polygon points='164.000000,128.000000 152.000000,122.400002 152.000000,133.600006' fill='currentColor' transform='rotate(120.000000, 152.000000, 128.000000)'></polygon>
+<polygon points='176.000000,48.000000 164.000000,42.400002 164.000000,53.599998' fill='currentColor' transform='rotate(270.000000, 168.000000, 48.000000)'></polygon>
+<polygon points='224.000000,96.000000 212.000000,90.400002 212.000000,101.599998' fill='currentColor' transform='rotate(0.000000, 216.000000, 96.000000)'></polygon>
+<polygon points='380.000000,96.000000 368.000000,90.400002 368.000000,101.599998' fill='currentColor' transform='rotate(60.000000, 368.000000, 96.000000)'></polygon>
+<polygon points='512.000000,160.000000 500.000000,154.399994 500.000000,165.600006' fill='currentColor' transform='rotate(90.000000, 504.000000, 160.000000)'></polygon>
+<polygon points='536.000000,96.000000 524.000000,90.400002 524.000000,101.599998' fill='currentColor' transform='rotate(180.000000, 528.000000, 96.000000)'></polygon>
+<polygon points='572.000000,16.000000 560.000000,10.400000 560.000000,21.600000' fill='currentColor' transform='rotate(240.000000, 560.000000, 16.000000)'></polygon>
+<polygon points='604.000000,48.000000 592.000000,42.400002 592.000000,53.599998' fill='currentColor' transform='rotate(120.000000, 592.000000, 48.000000)'></polygon>
+<path d='M 512,96 A 16,16 0 0,0 496,112' fill='none' stroke='currentColor'></path>
+<path d='M 512,96 A 16,16 0 0,1 528,112' fill='none' stroke='currentColor'></path>
+<path d='M 496,112 A 16,16 0 0,0 512,128' fill='none' stroke='currentColor'></path>
+<path d='M 528,112 A 16,16 0 0,1 512,128' fill='none' stroke='currentColor'></path>
+<circle cx='24' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='24' cy='128' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='40' cy='32' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='40' cy='96' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='88' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='88' cy='128' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='104' cy='32' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='104' cy='96' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='288' cy='144' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='320' cy='80' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='328' cy='16' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='376' cy='112' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='408' cy='80' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='440' cy='144' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='584' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='640' cy='144' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='664' cy='96' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='688' cy='144' r='6' stroke='currentColor' fill='#fff'></circle>
+<text text-anchor='middle' x='16' y='52' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='16' y='148' fill='currentColor' style='font-size:1em'>5</text>
+<text text-anchor='middle' x='32' y='20' fill='currentColor' style='font-size:1em'>0</text>
+<text text-anchor='middle' x='48' y='84' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='80' y='52' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='80' y='148' fill='currentColor' style='font-size:1em'>6</text>
+<text text-anchor='middle' x='96' y='20' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='112' y='84' fill='currentColor' style='font-size:1em'>7</text>
+<text text-anchor='middle' x='136' y='148' fill='currentColor' style='font-size:1em'>+</text>
+<text text-anchor='middle' x='144' y='148' fill='currentColor' style='font-size:1em'>z</text>
+<text text-anchor='middle' x='160' y='36' fill='currentColor' style='font-size:1em'>+</text>
+<text text-anchor='middle' x='168' y='36' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='232' y='100' fill='currentColor' style='font-size:1em'>+</text>
+<text text-anchor='middle' x='240' y='100' fill='currentColor' style='font-size:1em'>x</text>
+<text text-anchor='middle' x='264' y='148' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='272' y='148' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='304' y='68' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='312' y='20' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='312' y='68' fill='currentColor' style='font-size:1em'>0</text>
+<text text-anchor='middle' x='384' y='100' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='416' y='68' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='424' y='68' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='448' y='20' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='456' y='20' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='456' y='148' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='464' y='20' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='464' y='148' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='544' y='116' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='552' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='560' y='116' fill='currentColor' style='font-size:1em'>f</text>
+<text text-anchor='middle' x='568' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='576' y='116' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='584' y='116' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='592' y='116' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='600' y='116' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='608' y='116' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='616' y='116' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='624' y='36' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='632' y='36' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='640' y='36' fill='currentColor' style='font-size:1em'>f</text>
+<text text-anchor='middle' x='648' y='36' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='656' y='36' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='664' y='36' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='672' y='36' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='680' y='36' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='688' y='36' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='696' y='36' fill='currentColor' style='font-size:1em'>n</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="complex">
+  Complex
+</h3>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 752 393"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 0,0 L 160,0' fill='none' stroke='currentColor'></path>
+<path d='M 568,0 L 600,0' fill='none' stroke='currentColor'></path>
+<path d='M 184,16 L 208,16' fill='none' stroke='currentColor'></path>
+<path d='M 280,16 L 304,16' fill='none' stroke='currentColor'></path>
+<path d='M 232,32 L 256,32' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 496,32' fill='none' stroke='currentColor'></path>
+<path d='M 0,48 L 160,48' fill='none' stroke='currentColor'></path>
+<path d='M 536,64 L 568,64' fill='none' stroke='currentColor'></path>
+<path d='M 568,64 L 584,64' fill='none' stroke='currentColor'></path>
+<path d='M 24,80 L 160,80' fill='none' stroke='currentColor'></path>
+<path d='M 192,80 L 240,80' fill='none' stroke='currentColor'></path>
+<path d='M 288,80 L 376,80' fill='none' stroke='currentColor'></path>
+<path d='M 456,80 L 520,80' fill='none' stroke='currentColor'></path>
+<path d='M 192,112 L 200,112' fill='none' stroke='currentColor'></path>
+<path d='M 232,112 L 240,112' fill='none' stroke='currentColor'></path>
+<path d='M 464,112 L 488,112' fill='none' stroke='currentColor'></path>
+<path d='M 488,112 L 512,112' fill='none' stroke='currentColor'></path>
+<path d='M 568,112 L 584,112' fill='none' stroke='currentColor'></path>
+<path d='M 584,112 L 600,112' fill='none' stroke='currentColor'></path>
+<path d='M 664,112 L 736,112' fill='none' stroke='currentColor'></path>
+<path d='M 8,128 L 32,128' fill='none' stroke='currentColor'></path>
+<path d='M 32,128 L 136,128' fill='none' stroke='currentColor'></path>
+<path d='M 136,128 L 144,128' fill='none' stroke='currentColor'></path>
+<path d='M 184,128 L 192,128' fill='none' stroke='currentColor'></path>
+<path d='M 264,128 L 328,128' fill='none' stroke='currentColor'></path>
+<path d='M 328,128 L 400,128' fill='none' stroke='currentColor'></path>
+<path d='M 232,144 L 248,144' fill='none' stroke='currentColor'></path>
+<path d='M 456,144 L 520,144' fill='none' stroke='currentColor'></path>
+<path d='M 648,144 L 664,144' fill='none' stroke='currentColor'></path>
+<path d='M 664,144 L 720,144' fill='none' stroke='currentColor'></path>
+<path d='M 40,160 L 128,160' fill='none' stroke='currentColor'></path>
+<path d='M 128,176 L 152,176' fill='none' stroke='currentColor'></path>
+<path d='M 224,176 L 248,176' fill='none' stroke='currentColor'></path>
+<path d='M 288,176 L 384,176' fill='none' stroke='currentColor'></path>
+<path d='M 504,176 L 528,176' fill='none' stroke='currentColor'></path>
+<path d='M 576,176 L 600,176' fill='none' stroke='currentColor'></path>
+<path d='M 8,192 L 160,192' fill='none' stroke='currentColor'></path>
+<path d='M 304,192 L 368,192' fill='none' stroke='currentColor'></path>
+<path d='M 384,192 L 408,192' fill='none' stroke='currentColor'></path>
+<path d='M 160,208 L 192,208' fill='none' stroke='currentColor'></path>
+<path d='M 248,208 L 280,208' fill='none' stroke='currentColor'></path>
+<path d='M 304,224 L 368,224' fill='none' stroke='currentColor'></path>
+<path d='M 392,224 L 408,224' fill='none' stroke='currentColor'></path>
+<path d='M 8,240 L 160,240' fill='none' stroke='currentColor'></path>
+<path d='M 208,240 L 232,240' fill='none' stroke='currentColor'></path>
+<path d='M 288,240 L 312,240' fill='none' stroke='currentColor'></path>
+<path d='M 312,240 L 384,240' fill='none' stroke='currentColor'></path>
+<path d='M 440,240 L 464,240' fill='none' stroke='currentColor'></path>
+<path d='M 480,240 L 504,240' fill='none' stroke='currentColor'></path>
+<path d='M 688,240 L 696,240' fill='none' stroke='currentColor'></path>
+<path d='M 32,256 L 64,256' fill='none' stroke='currentColor'></path>
+<path d='M 64,256 L 112,256' fill='none' stroke='currentColor'></path>
+<path d='M 536,256 L 552,256' fill='none' stroke='currentColor'></path>
+<path d='M 112,288 L 152,288' fill='none' stroke='currentColor'></path>
+<path d='M 216,288 L 232,288' fill='none' stroke='currentColor'></path>
+<path d='M 232,288 L 248,288' fill='none' stroke='currentColor'></path>
+<path d='M 440,288 L 464,288' fill='none' stroke='currentColor'></path>
+<path d='M 480,288 L 504,288' fill='none' stroke='currentColor'></path>
+<path d='M 536,288 L 544,288' fill='none' stroke='currentColor'></path>
+<path d='M 568,288 L 584,288' fill='none' stroke='currentColor'></path>
+<path d='M 688,288 L 720,288' fill='none' stroke='currentColor'></path>
+<path d='M 8,304 L 32,304' fill='none' stroke='currentColor'></path>
+<path d='M 32,304 L 64,304' fill='none' stroke='currentColor'></path>
+<path d='M 64,304 L 112,304' fill='none' stroke='currentColor'></path>
+<path d='M 688,320 L 720,320' fill='none' stroke='currentColor'></path>
+<path d='M 152,336 L 176,336' fill='none' stroke='currentColor'></path>
+<path d='M 176,336 L 240,336' fill='none' stroke='currentColor'></path>
+<path d='M 312,352 L 344,352' fill='none' stroke='currentColor'></path>
+<path d='M 344,352 L 376,352' fill='none' stroke='currentColor'></path>
+<path d='M 376,352 L 392,352' fill='none' stroke='currentColor'></path>
+<path d='M 152,368 L 224,368' fill='none' stroke='currentColor'></path>
+<path d='M 224,368 L 240,368' fill='none' stroke='currentColor'></path>
+<path d='M 624,368 L 640,368' fill='none' stroke='currentColor'></path>
+<path d='M 160,24 L 184,24' fill='none' stroke='currentColor'></path>
+<path d='M 208,24 L 232,24' fill='none' stroke='currentColor'></path>
+<path d='M 256,24 L 280,24' fill='none' stroke='currentColor'></path>
+<path d='M 0,0 L 0,48' fill='none' stroke='currentColor'></path>
+<path d='M 8,96 L 8,128' fill='none' stroke='currentColor'></path>
+<path d='M 8,192 L 8,240' fill='none' stroke='currentColor'></path>
+<path d='M 32,128 L 32,176' fill='none' stroke='currentColor'></path>
+<path d='M 32,256 L 32,304' fill='none' stroke='currentColor'></path>
+<path d='M 64,256 L 64,304' fill='none' stroke='currentColor'></path>
+<path d='M 112,256 L 112,288' fill='none' stroke='currentColor'></path>
+<path d='M 112,288 L 112,304' fill='none' stroke='currentColor'></path>
+<path d='M 136,128 L 136,160' fill='none' stroke='currentColor'></path>
+<path d='M 160,0 L 160,48' fill='none' stroke='currentColor'></path>
+<path d='M 160,80 L 160,112' fill='none' stroke='currentColor'></path>
+<path d='M 160,192 L 160,208' fill='none' stroke='currentColor'></path>
+<path d='M 160,208 L 160,240' fill='none' stroke='currentColor'></path>
+<path d='M 168,144 L 168,160' fill='none' stroke='currentColor'></path>
+<path d='M 176,288 L 176,320' fill='none' stroke='currentColor'></path>
+<path d='M 176,320 L 176,336' fill='none' stroke='currentColor'></path>
+<path d='M 208,144 L 208,160' fill='none' stroke='currentColor'></path>
+<path d='M 232,272 L 232,288' fill='none' stroke='currentColor'></path>
+<path d='M 232,288 L 232,304' fill='none' stroke='currentColor'></path>
+<path d='M 288,176 L 288,240' fill='none' stroke='currentColor'></path>
+<path d='M 304,192 L 304,224' fill='none' stroke='currentColor'></path>
+<path d='M 312,240 L 312,272' fill='none' stroke='currentColor'></path>
+<path d='M 328,128 L 328,160' fill='none' stroke='currentColor'></path>
+<path d='M 344,256 L 344,272' fill='none' stroke='currentColor'></path>
+<path d='M 368,192 L 368,224' fill='none' stroke='currentColor'></path>
+<path d='M 384,0 L 384,32' fill='none' stroke='currentColor'></path>
+<path d='M 384,176 L 384,192' fill='none' stroke='currentColor'></path>
+<path d='M 384,192 L 384,240' fill='none' stroke='currentColor'></path>
+<path d='M 440,240 L 440,288' fill='none' stroke='currentColor'></path>
+<path d='M 456,80 L 456,144' fill='none' stroke='currentColor'></path>
+<path d='M 464,240 L 464,288' fill='none' stroke='currentColor'></path>
+<path d='M 472,328 L 472,344' fill='none' stroke='currentColor'></path>
+<path d='M 480,240 L 480,288' fill='none' stroke='currentColor'></path>
+<path d='M 480,328 L 480,344' fill='none' stroke='currentColor'></path>
+<path d='M 488,96 L 488,112' fill='none' stroke='currentColor'></path>
+<path d='M 488,112 L 488,128' fill='none' stroke='currentColor'></path>
+<path d='M 504,240 L 504,288' fill='none' stroke='currentColor'></path>
+<path d='M 520,80 L 520,144' fill='none' stroke='currentColor'></path>
+<path d='M 552,224 L 552,256' fill='none' stroke='currentColor'></path>
+<path d='M 568,0 L 568,48' fill='none' stroke='currentColor'></path>
+<path d='M 568,80 L 568,112' fill='none' stroke='currentColor'></path>
+<path d='M 584,64 L 584,96' fill='none' stroke='currentColor'></path>
+<path d='M 584,128 L 584,144' fill='none' stroke='currentColor'></path>
+<path d='M 600,0 L 600,112' fill='none' stroke='currentColor'></path>
+<path d='M 600,256 L 600,272' fill='none' stroke='currentColor'></path>
+<path d='M 632,336 L 632,352' fill='none' stroke='currentColor'></path>
+<path d='M 664,144 L 664,176' fill='none' stroke='currentColor'></path>
+<path d='M 664,176 L 664,192' fill='none' stroke='currentColor'></path>
+<path d='M 664,288 L 664,304' fill='none' stroke='currentColor'></path>
+<path d='M 688,288 L 688,320' fill='none' stroke='currentColor'></path>
+<path d='M 704,336 L 704,352' fill='none' stroke='currentColor'></path>
+<path d='M 712,160 L 712,224' fill='none' stroke='currentColor'></path>
+<path d='M 720,288 L 720,320' fill='none' stroke='currentColor'></path>
+<path d='M 264,128 L 288,80' fill='none' stroke='currentColor'></path>
+<path d='M 232,240 L 248,208' fill='none' stroke='currentColor'></path>
+<path d='M 224,304 L 232,288' fill='none' stroke='currentColor'></path>
+<path d='M 232,288 L 240,272' fill='none' stroke='currentColor'></path>
+<path d='M 336,368 L 344,352' fill='none' stroke='currentColor'></path>
+<path d='M 344,352 L 352,336' fill='none' stroke='currentColor'></path>
+<path d='M 480,288 L 504,240' fill='none' stroke='currentColor'></path>
+<path d='M 552,224 L 576,176' fill='none' stroke='currentColor'></path>
+<path d='M 648,144 L 664,112' fill='none' stroke='currentColor'></path>
+<path d='M 640,240 L 664,192' fill='none' stroke='currentColor'></path>
+<path d='M 720,144 L 736,112' fill='none' stroke='currentColor'></path>
+<path d='M 664,288 L 688,240' fill='none' stroke='currentColor'></path>
+<path d='M 192,208 L 208,240' fill='none' stroke='currentColor'></path>
+<path d='M 224,272 L 232,288' fill='none' stroke='currentColor'></path>
+<path d='M 232,288 L 240,304' fill='none' stroke='currentColor'></path>
+<path d='M 440,240 L 464,288' fill='none' stroke='currentColor'></path>
+<path d='M 376,80 L 400,128' fill='none' stroke='currentColor'></path>
+<path d='M 552,256 L 568,288' fill='none' stroke='currentColor'></path>
+<path d='M 528,176 L 552,224' fill='none' stroke='currentColor'></path>
+<path d='M 640,240 L 664,288' fill='none' stroke='currentColor'></path>
+<path d='M 664,192 L 688,240' fill='none' stroke='currentColor'></path>
+<path d='M 136,160 L 136,168' fill='none' stroke='currentColor'></path>
+<path d='M 184,16 L 184,24' fill='none' stroke='currentColor'></path>
+<path d='M 208,16 L 208,24' fill='none' stroke='currentColor'></path>
+<path d='M 232,24 L 232,32' fill='none' stroke='currentColor'></path>
+<path d='M 256,24 L 256,32' fill='none' stroke='currentColor'></path>
+<path d='M 280,16 L 280,24' fill='none' stroke='currentColor'></path>
+<path d='M 488,88 L 488,96' fill='none' stroke='currentColor'></path>
+<path d='M 488,128 L 488,136' fill='none' stroke='currentColor'></path>
+<polygon points='16.000000,304.000000 4.000000,298.399994 4.000000,309.600006' fill='currentColor' transform='rotate(180.000000, 8.000000, 304.000000)'></polygon>
+<polygon points='48.000000,160.000000 36.000000,154.399994 36.000000,165.600006' fill='currentColor' transform='rotate(180.000000, 40.000000, 160.000000)'></polygon>
+<polygon points='136.000000,160.000000 124.000000,154.399994 124.000000,165.600006' fill='currentColor' transform='rotate(0.000000, 128.000000, 160.000000)'></polygon>
+<polygon points='136.000000,176.000000 124.000000,170.399994 124.000000,181.600006' fill='currentColor' transform='rotate(180.000000, 128.000000, 176.000000)'></polygon>
+<polygon points='160.000000,288.000000 148.000000,282.399994 148.000000,293.600006' fill='currentColor' transform='rotate(0.000000, 152.000000, 288.000000)'></polygon>
+<path d='M 176,320 L 176,328' fill='none' stroke='currentColor'></path>
+<polygon points='192.000000,320.000000 180.000000,314.399994 180.000000,325.600006' fill='currentColor' transform='rotate(90.000000, 176.000000, 320.000000)'></polygon>
+<polygon points='288.000000,208.000000 276.000000,202.399994 276.000000,213.600006' fill='currentColor' transform='rotate(0.000000, 280.000000, 208.000000)'></polygon>
+<polygon points='312.000000,16.000000 300.000000,10.400000 300.000000,21.600000' fill='currentColor' transform='rotate(0.000000, 304.000000, 16.000000)'></polygon>
+<polygon points='320.000000,352.000000 308.000000,346.399994 308.000000,357.600006' fill='currentColor' transform='rotate(180.000000, 312.000000, 352.000000)'></polygon>
+<path d='M 328,160 L 328,168' fill='none' stroke='currentColor'></path>
+<polygon points='344.000000,160.000000 332.000000,154.399994 332.000000,165.600006' fill='currentColor' transform='rotate(90.000000, 328.000000, 160.000000)'></polygon>
+<path d='M 344,248 L 344,256' fill='none' stroke='currentColor'></path>
+<polygon points='360.000000,256.000000 348.000000,250.399994 348.000000,261.600006' fill='currentColor' transform='rotate(270.000000, 344.000000, 256.000000)'></polygon>
+<polygon points='384.000000,352.000000 372.000000,346.399994 372.000000,357.600006' fill='currentColor' transform='rotate(180.000000, 376.000000, 352.000000)'></polygon>
+<polygon points='392.000000,0.000000 380.000000,-5.600000 380.000000,5.600000' fill='currentColor' transform='rotate(270.000000, 384.000000, 0.000000)'></polygon>
+<polygon points='392.000000,32.000000 380.000000,26.400000 380.000000,37.599998' fill='currentColor' transform='rotate(90.000000, 384.000000, 32.000000)'></polygon>
+<polygon points='400.000000,224.000000 388.000000,218.399994 388.000000,229.600006' fill='currentColor' transform='rotate(180.000000, 392.000000, 224.000000)'></polygon>
+<polygon points='480.000000,32.000000 468.000000,26.400000 468.000000,37.599998' fill='currentColor' transform='rotate(180.000000, 472.000000, 32.000000)'></polygon>
+<path d='M 632,352 L 632,360' fill='none' stroke='currentColor'></path>
+<polygon points='648.000000,352.000000 636.000000,346.399994 636.000000,357.600006' fill='currentColor' transform='rotate(90.000000, 632.000000, 352.000000)'></polygon>
+<path d='M 664,176 L 664,184' fill='none' stroke='currentColor'></path>
+<polygon points='680.000000,176.000000 668.000000,170.399994 668.000000,181.600006' fill='currentColor' transform='rotate(90.000000, 664.000000, 176.000000)'></polygon>
+<path d='M 704,328 L 704,336' fill='none' stroke='currentColor'></path>
+<polygon points='720.000000,336.000000 708.000000,330.399994 708.000000,341.600006' fill='currentColor' transform='rotate(270.000000, 704.000000, 336.000000)'></polygon>
+<path d='M 712,152 L 712,160' fill='none' stroke='currentColor'></path>
+<polygon points='728.000000,160.000000 716.000000,154.399994 716.000000,165.600006' fill='currentColor' transform='rotate(270.000000, 712.000000, 160.000000)'></polygon>
+<path d='M 448,16 A 16,16 0 0,0 432,32' fill='none' stroke='currentColor'></path>
+<path d='M 448,16 A 16,16 0 0,1 464,32' fill='none' stroke='currentColor'></path>
+<path d='M 432,32 A 16,16 0 0,0 448,48' fill='none' stroke='currentColor'></path>
+<path d='M 464,32 A 16,16 0 0,1 448,48' fill='none' stroke='currentColor'></path>
+<path d='M 24,80 A 16,16 0 0,0 8,96' fill='none' stroke='currentColor'></path>
+<path d='M 192,80 A 16,16 0 0,0 176,96' fill='none' stroke='currentColor'></path>
+<path d='M 240,80 A 16,16 0 0,1 256,96' fill='none' stroke='currentColor'></path>
+<path d='M 176,96 A 16,16 0 0,0 192,112' fill='none' stroke='currentColor'></path>
+<path d='M 200,112 A 16,16 0 0,1 216,128' fill='none' stroke='currentColor'></path>
+<path d='M 232,112 A 16,16 0 0,0 216,128' fill='none' stroke='currentColor'></path>
+<path d='M 256,96 A 16,16 0 0,1 240,112' fill='none' stroke='currentColor'></path>
+<path d='M 160,112 A 16,16 0 0,1 144,128' fill='none' stroke='currentColor'></path>
+<path d='M 184,128 A 16,16 0 0,0 168,144' fill='none' stroke='currentColor'></path>
+<path d='M 192,128 A 16,16 0 0,1 208,144' fill='none' stroke='currentColor'></path>
+<path d='M 216,128 A 16,16 0 0,0 232,144' fill='none' stroke='currentColor'></path>
+<path d='M 248,144 A 16,16 0 0,1 264,160' fill='none' stroke='currentColor'></path>
+<path d='M 168,160 A 16,16 0 0,1 152,176' fill='none' stroke='currentColor'></path>
+<path d='M 208,160 A 16,16 0 0,0 224,176' fill='none' stroke='currentColor'></path>
+<path d='M 264,160 A 16,16 0 0,1 248,176' fill='none' stroke='currentColor'></path>
+<path d='M 408,192 A 16,16 0 0,1 424,208' fill='none' stroke='currentColor'></path>
+<path d='M 424,208 A 16,16 0 0,1 408,224' fill='none' stroke='currentColor'></path>
+<path d='M 584,240 A 16,16 0 0,0 568,256' fill='none' stroke='currentColor'></path>
+<path d='M 584,240 A 16,16 0 0,1 600,256' fill='none' stroke='currentColor'></path>
+<path d='M 712,224 A 16,16 0 0,1 696,240' fill='none' stroke='currentColor'></path>
+<path d='M 536,256 A 16,16 0 0,0 520,272' fill='none' stroke='currentColor'></path>
+<path d='M 312,272 A 16,16 0 0,0 328,288' fill='none' stroke='currentColor'></path>
+<path d='M 344,272 A 16,16 0 0,1 328,288' fill='none' stroke='currentColor'></path>
+<path d='M 520,272 A 16,16 0 0,0 536,288' fill='none' stroke='currentColor'></path>
+<path d='M 600,272 A 16,16 0 0,1 584,288' fill='none' stroke='currentColor'></path>
+<path d='M 648,320 A 16,16 0 0,0 632,336' fill='none' stroke='currentColor'></path>
+<path d='M 664,304 A 16,16 0 0,1 648,320' fill='none' stroke='currentColor'></path>
+<path d='M 24,336 A 16,16 0 0,0 8,352' fill='none' stroke='currentColor'></path>
+<path d='M 24,336 A 16,16 0 0,1 40,352' fill='none' stroke='currentColor'></path>
+<path d='M 152,336 A 16,16 0 0,0 136,352' fill='none' stroke='currentColor'></path>
+<path d='M 240,336 A 16,16 0 0,1 256,352' fill='none' stroke='currentColor'></path>
+<path d='M 8,352 A 16,16 0 0,0 24,368' fill='none' stroke='currentColor'></path>
+<path d='M 40,352 A 16,16 0 0,1 24,368' fill='none' stroke='currentColor'></path>
+<path d='M 136,352 A 16,16 0 0,0 152,368' fill='none' stroke='currentColor'></path>
+<path d='M 256,352 A 16,16 0 0,1 240,368' fill='none' stroke='currentColor'></path>
+<circle cx='176' cy='288' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='232' cy='288' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='448' cy='32' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='536' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
+<path d='M 568,48 L 568,56' fill='none' stroke='currentColor'></path>
+<path d='M 568,72 L 568,80' fill='none' stroke='currentColor'></path>
+<path d='M 568,56 A 9,9 0 0,0 568,72' fill='none' stroke='currentColor'></path>
+<path d='M 584,96 L 584,104' fill='none' stroke='currentColor'></path>
+<path d='M 584,120 L 584,128' fill='none' stroke='currentColor'></path>
+<path d='M 584,104 A 9,9 0 0,1 584,120' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='24' y='116' fill='currentColor' style='font-size:1em'>&amp;</text>
+<text text-anchor='middle' x='40' y='20' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='40' y='100' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='40' y='212' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='40' y='228' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='48' y='100' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>q</text>
+<text text-anchor='middle' x='48' y='212' fill='currentColor' style='font-size:1em'>f</text>
+<text text-anchor='middle' x='48' y='228' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='56' y='20' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='56' y='100' fill='currentColor' style='font-size:1em'>x</text>
+<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='56' y='228' fill='currentColor' style='font-size:1em'>j</text>
+<text text-anchor='middle' x='64' y='20' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='64' y='100' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='64' y='212' fill='currentColor' style='font-size:1em'>(</text>
+<text text-anchor='middle' x='64' y='228' fill='currentColor' style='font-size:1em'>-</text>
+<text text-anchor='middle' x='72' y='20' fill='currentColor' style='font-size:1em'>x</text>
+<text text-anchor='middle' x='72' y='100' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='72' y='212' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='72' y='228' fill='currentColor' style='font-size:1em'>&gt;</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='80' y='228' fill='currentColor' style='font-size:1em'>f</text>
+<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='88' y='212' fill='currentColor' style='font-size:1em'>&gt;</text>
+<text text-anchor='middle' x='88' y='228' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='96' y='116' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='96' y='228' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='104' y='212' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='104' y='228' fill='currentColor' style='font-size:1em'>(</text>
+<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='112' y='212' fill='currentColor' style='font-size:1em'>)</text>
+<text text-anchor='middle' x='112' y='228' fill='currentColor' style='font-size:1em'>)</text>
+<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='128' y='276' fill='currentColor' style='font-size:1em'>J</text>
+<text text-anchor='middle' x='136' y='100' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='136' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='136' y='276' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='144' y='116' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='144' y='276' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='152' y='276' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='168' y='356' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='176' y='356' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='184' y='68' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='184' y='196' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='184' y='356' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='192' y='68' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='192' y='196' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='200' y='68' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='200' y='196' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='200' y='356' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='208' y='68' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='208' y='196' fill='currentColor' style='font-size:1em'>g</text>
+<text text-anchor='middle' x='216' y='68' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='216' y='356' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='224' y='196' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='224' y='356' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='232' y='196' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='232' y='356' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='240' y='196' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='248' y='196' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='296' y='100' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='304' y='100' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='312' y='100' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='320' y='100' fill='currentColor' style='font-size:1em'>g</text>
+<text text-anchor='middle' x='328' y='100' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='336' y='100' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='344' y='100' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='352' y='100' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='360' y='100' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='360' y='276' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='360' y='292' fill='currentColor' style='font-size:1em'>V</text>
+<text text-anchor='middle' x='368' y='276' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='368' y='292' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='376' y='276' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='376' y='292' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='384' y='276' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='384' y='292' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='392' y='276' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='392' y='292' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='400' y='276' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='400' y='292' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='408' y='292' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='416' y='292' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='416' y='324' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='424' y='324' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='432' y='324' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='432' y='356' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='432' y='372' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='440' y='212' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='440' y='324' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='440' y='372' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='448' y='212' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='448' y='324' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='448' y='356' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='448' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='456' y='212' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='456' y='324' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='456' y='340' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='456' y='356' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='456' y='372' fill='currentColor' style='font-size:1em'>/</text>
+<text text-anchor='middle' x='464' y='164' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='464' y='212' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='464' y='324' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='464' y='356' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='464' y='372' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='472' y='164' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='472' y='212' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='472' y='324' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='472' y='356' fill='currentColor' style='font-size:1em'>h</text>
+<text text-anchor='middle' x='472' y='372' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='480' y='164' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='480' y='212' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='480' y='356' fill='currentColor' style='font-size:1em'>-</text>
+<text text-anchor='middle' x='488' y='164' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='488' y='356' fill='currentColor' style='font-size:1em'>-</text>
+<text text-anchor='middle' x='488' y='372' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='496' y='164' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='496' y='212' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='496' y='340' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='496' y='356' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='496' y='372' fill='currentColor' style='font-size:1em'>h</text>
+<text text-anchor='middle' x='504' y='164' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='504' y='212' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='504' y='356' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='504' y='372' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='512' y='164' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='512' y='212' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='512' y='324' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='512' y='372' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='520' y='164' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='520' y='212' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='520' y='324' fill='currentColor' style='font-size:1em'>q</text>
+<text text-anchor='middle' x='520' y='356' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='520' y='372' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='528' y='324' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='528' y='340' fill='currentColor' style='font-size:1em'>*</text>
+<text text-anchor='middle' x='528' y='356' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='536' y='324' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='536' y='340' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='536' y='356' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='544' y='324' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='544' y='340' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='552' y='324' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='552' y='340' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='552' y='356' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='560' y='324' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='560' y='340' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='568' y='324' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='568' y='340' fill='currentColor' style='font-size:1em'>*</text>
+<text text-anchor='middle' x='568' y='356' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='576' y='356' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='584' y='356' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='592' y='356' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='648' y='244' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='656' y='244' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='664' y='244' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='672' y='132' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='672' y='244' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='680' y='132' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='680' y='244' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='688' y='132' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='696' y='132' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='704' y='132' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='704' y='308' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='712' y='132' fill='currentColor' style='font-size:1em'>h</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="process">
+  Process
+</h3>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 728 233"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 32,16 L 96,16' fill='none' stroke='currentColor'></path>
+<path d='M 392,32 L 408,32' fill='none' stroke='currentColor'></path>
+<path d='M 408,32 L 472,32' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 488,32' fill='none' stroke='currentColor'></path>
+<path d='M 32,48 L 64,48' fill='none' stroke='currentColor'></path>
+<path d='M 64,48 L 96,48' fill='none' stroke='currentColor'></path>
+<path d='M 152,48 L 200,48' fill='none' stroke='currentColor'></path>
+<path d='M 224,64 L 272,64' fill='none' stroke='currentColor'></path>
+<path d='M 336,64 L 384,64' fill='none' stroke='currentColor'></path>
+<path d='M 488,64 L 520,64' fill='none' stroke='currentColor'></path>
+<path d='M 640,64 L 672,64' fill='none' stroke='currentColor'></path>
+<path d='M 152,80 L 200,80' fill='none' stroke='currentColor'></path>
+<path d='M 32,96 L 112,96' fill='none' stroke='currentColor'></path>
+<path d='M 392,96 L 408,96' fill='none' stroke='currentColor'></path>
+<path d='M 408,96 L 440,96' fill='none' stroke='currentColor'></path>
+<path d='M 440,96 L 472,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,96 L 488,96' fill='none' stroke='currentColor'></path>
+<path d='M 16,128 L 64,128' fill='none' stroke='currentColor'></path>
+<path d='M 64,128 L 96,128' fill='none' stroke='currentColor'></path>
+<path d='M 16,176 L 112,176' fill='none' stroke='currentColor'></path>
+<path d='M 256,176 L 304,176' fill='none' stroke='currentColor'></path>
+<path d='M 304,176 L 352,176' fill='none' stroke='currentColor'></path>
+<path d='M 112,192 L 248,192' fill='none' stroke='currentColor'></path>
+<path d='M 360,192 L 416,192' fill='none' stroke='currentColor'></path>
+<path d='M 16,208 L 112,208' fill='none' stroke='currentColor'></path>
+<path d='M 256,208 L 352,208' fill='none' stroke='currentColor'></path>
+<path d='M 540,40 L 628,40' fill='none' stroke='currentColor'></path>
+<path d='M 540,88 L 628,88' fill='none' stroke='currentColor'></path>
+<path d='M 16,176 L 16,208' fill='none' stroke='currentColor'></path>
+<path d='M 64,48 L 64,80' fill='none' stroke='currentColor'></path>
+<path d='M 64,128 L 64,160' fill='none' stroke='currentColor'></path>
+<path d='M 112,176 L 112,192' fill='none' stroke='currentColor'></path>
+<path d='M 112,192 L 112,208' fill='none' stroke='currentColor'></path>
+<path d='M 256,176 L 256,208' fill='none' stroke='currentColor'></path>
+<path d='M 304,144 L 304,176' fill='none' stroke='currentColor'></path>
+<path d='M 352,176 L 352,208' fill='none' stroke='currentColor'></path>
+<path d='M 392,32 L 392,96' fill='none' stroke='currentColor'></path>
+<path d='M 408,32 L 408,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 472,96' fill='none' stroke='currentColor'></path>
+<path d='M 488,32 L 488,64' fill='none' stroke='currentColor'></path>
+<path d='M 488,64 L 488,96' fill='none' stroke='currentColor'></path>
+<path d='M 16,128 L 32,96' fill='none' stroke='currentColor'></path>
+<path d='M 96,128 L 112,96' fill='none' stroke='currentColor'></path>
+<path d='M 272,64 L 304,0' fill='none' stroke='currentColor'></path>
+<path d='M 304,128 L 336,64' fill='none' stroke='currentColor'></path>
+<path d='M 528,64 L 540,40' fill='none' stroke='currentColor'></path>
+<path d='M 628,88 L 640,64' fill='none' stroke='currentColor'></path>
+<path d='M 272,64 L 304,128' fill='none' stroke='currentColor'></path>
+<path d='M 304,0 L 336,64' fill='none' stroke='currentColor'></path>
+<path d='M 528,64 L 540,88' fill='none' stroke='currentColor'></path>
+<path d='M 628,40 L 640,64' fill='none' stroke='currentColor'></path>
+<path d='M 64,80 L 64,88' fill='none' stroke='currentColor'></path>
+<polygon points='80.000000,80.000000 68.000000,74.400002 68.000000,85.599998' fill='currentColor' transform='rotate(90.000000, 64.000000, 80.000000)'></polygon>
+<path d='M 64,160 L 64,168' fill='none' stroke='currentColor'></path>
+<polygon points='80.000000,160.000000 68.000000,154.399994 68.000000,165.600006' fill='currentColor' transform='rotate(90.000000, 64.000000, 160.000000)'></polygon>
+<polygon points='232.000000,64.000000 220.000000,58.400002 220.000000,69.599998' fill='currentColor' transform='rotate(180.000000, 224.000000, 64.000000)'></polygon>
+<polygon points='256.000000,192.000000 244.000000,186.399994 244.000000,197.600006' fill='currentColor' transform='rotate(0.000000, 248.000000, 192.000000)'></polygon>
+<path d='M 304,136 L 304,144' fill='none' stroke='currentColor'></path>
+<polygon points='320.000000,144.000000 308.000000,138.399994 308.000000,149.600006' fill='currentColor' transform='rotate(270.000000, 304.000000, 144.000000)'></polygon>
+<polygon points='368.000000,192.000000 356.000000,186.399994 356.000000,197.600006' fill='currentColor' transform='rotate(180.000000, 360.000000, 192.000000)'></polygon>
+<polygon points='392.000000,64.000000 380.000000,58.400002 380.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 384.000000, 64.000000)'></polygon>
+<polygon points='528.000000,64.000000 516.000000,58.400002 516.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 520.000000, 64.000000)'></polygon>
+<polygon points='680.000000,64.000000 668.000000,58.400002 668.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 672.000000, 64.000000)'></polygon>
+<path d='M 32,16 A 16,16 0 0,0 16,32' fill='none' stroke='currentColor'></path>
+<path d='M 96,16 A 16,16 0 0,1 112,32' fill='none' stroke='currentColor'></path>
+<path d='M 16,32 A 16,16 0 0,0 32,48' fill='none' stroke='currentColor'></path>
+<path d='M 112,32 A 16,16 0 0,1 96,48' fill='none' stroke='currentColor'></path>
+<path d='M 152,48 A 16,16 0 0,0 136,64' fill='none' stroke='currentColor'></path>
+<path d='M 200,48 A 16,16 0 0,1 216,64' fill='none' stroke='currentColor'></path>
+<path d='M 696,48 A 16,16 0 0,0 680,64' fill='none' stroke='currentColor'></path>
+<path d='M 696,48 A 16,16 0 0,1 712,64' fill='none' stroke='currentColor'></path>
+<path d='M 136,64 A 16,16 0 0,0 152,80' fill='none' stroke='currentColor'></path>
+<path d='M 216,64 A 16,16 0 0,1 200,80' fill='none' stroke='currentColor'></path>
+<path d='M 680,64 A 16,16 0 0,0 696,80' fill='none' stroke='currentColor'></path>
+<path d='M 712,64 A 16,16 0 0,1 696,80' fill='none' stroke='currentColor'></path>
+<path d='M 432,176 A 16,16 0 0,0 416,192' fill='none' stroke='currentColor'></path>
+<path d='M 432,176 A 16,16 0 0,1 448,192' fill='none' stroke='currentColor'></path>
+<path d='M 416,192 A 16,16 0 0,0 432,208' fill='none' stroke='currentColor'></path>
+<path d='M 448,192 A 16,16 0 0,1 432,208' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='40' y='196' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='48' y='196' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='56' y='36' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='56' y='196' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='64' y='36' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='64' y='196' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='72' y='36' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='72' y='196' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='80' y='36' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='80' y='196' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='88' y='196' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='168' y='68' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='176' y='68' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='184' y='68' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='248' y='52' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='280' y='68' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='280' y='196' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='288' y='68' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='288' y='196' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='296' y='68' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='296' y='196' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='304' y='68' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='304' y='196' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='312' y='68' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='312' y='196' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='320' y='68' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='320' y='196' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='328' y='196' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='360' y='52' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='416' y='52' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='416' y='84' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='424' y='52' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='424' y='84' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='432' y='52' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='432' y='84' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='432' y='196' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='440' y='52' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='440' y='84' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='448' y='52' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='448' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='456' y='52' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='456' y='84' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='464' y='52' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='464' y='84' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='544' y='68' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='552' y='68' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='560' y='68' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='568' y='68' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='576' y='68' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='584' y='68' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='592' y='68' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='600' y='68' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='608' y='68' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='616' y='68' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='624' y='68' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='696' y='68' fill='currentColor' style='font-size:1em'>X</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="file-tree">
+  File tree
+</h3>
+<p>Created from <a href="https://arthursonzogni.com/Diagon/#Tree">https://arthursonzogni.com/Diagon/#Tree</a></p>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        width="300"
+        
+      >
+      <g transform='translate(8,16)'>
+<text text-anchor='middle' x='0' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='4' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='32' y='4' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='40' y='4' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='48' y='4' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='56' y='4' fill='currentColor' style='font-size:1em'>x</text>
+<text text-anchor='middle' x='64' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='4' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='72' y='20' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='72' y='36' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='72' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='72' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='72' y='100' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='80' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='4' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='88' y='20' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='88' y='116' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='96' y='4' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='96' y='20' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='96' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='104' y='4' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='104' y='20' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='112' y='4' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='112' y='20' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='120' y='4' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='120' y='20' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='128' y='4' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='128' y='20' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='136' y='4' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='136' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='20' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='84' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='152' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='20' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='160' y='84' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='168' y='20' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='168' y='84' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='176' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='176' y='84' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='184' y='20' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='184' y='84' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='192' y='20' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='200' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='208' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='20' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='216' y='36' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='216' y='52' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='216' y='68' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='224' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='20' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='232' y='36' fill='currentColor' style='font-size:1em'>K</text>
+<text text-anchor='middle' x='232' y='52' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='232' y='68' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='240' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='240' y='36' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='240' y='52' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='240' y='68' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='248' y='20' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='248' y='36' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='248' y='52' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='248' y='68' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='256' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='256' y='36' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='256' y='52' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='256' y='68' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='264' y='20' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='264' y='36' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='264' y='52' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='264' y='68' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='272' y='20' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='272' y='36' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='272' y='52' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='272' y='68' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='280' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='280' y='36' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='280' y='52' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='280' y='68' fill='currentColor' style='font-size:1em'>u</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="sequence-diagram">
+  Sequence Diagram
+</h3>
+<p><a href="https://arthursonzogni.com/Diagon/#Sequence">https://arthursonzogni.com/Diagon/#Sequence</a></p>
+
+
+
+<div class="goat svg-container w-40">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 160 201"
+      >
+      <g transform='translate(8,16)'>
+<text text-anchor='middle' x='0' y='4' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='0' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='36' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='0' y='148' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='0' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='180' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='8' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='20' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='8' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='164' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='8' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='20' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='16' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='164' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='16' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='20' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='24' y='36' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='24' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='100' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='148' fill='currentColor' style='font-size:1em'>┴</text>
+<text text-anchor='middle' x='24' y='164' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='24' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='20' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='32' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='116' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='32' y='132' fill='currentColor' style='font-size:1em'>&lt;</text>
+<text text-anchor='middle' x='32' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='164' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='32' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='20' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='40' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='68' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='40' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='40' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='164' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='40' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='4' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='48' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='48' y='68' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='48' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='48' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='148' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='48' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='48' y='180' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='56' y='68' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='56' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='56' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='68' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='64' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='64' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='72' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='80' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='68' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='88' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='116' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='88' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='68' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='96' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='116' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='96' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='68' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='104' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='104' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='4' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='112' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='112' y='36' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='112' y='68' fill='currentColor' style='font-size:1em'>!</text>
+<text text-anchor='middle' x='112' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='112' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='148' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='112' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='112' y='180' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='120' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='20' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='120' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='84' fill='currentColor' style='font-size:1em'>&gt;</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>!</text>
+<text text-anchor='middle' x='120' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='164' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='120' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='20' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='128' y='36' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='128' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='148' fill='currentColor' style='font-size:1em'>┴</text>
+<text text-anchor='middle' x='128' y='164' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='128' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='20' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='136' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='164' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='136' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='4' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='144' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='144' y='148' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='144' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='180' fill='currentColor' style='font-size:1em'>┘</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="flowchart">
+  Flowchart
+</h3>
+<p><a href="https://arthursonzogni.com/Diagon/#Flowchart">https://arthursonzogni.com/Diagon/#Flowchart</a></p>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 664 601"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 24,8 L 152,8' fill='none' stroke='currentColor'></path>
+<path d='M 16,104 L 72,104' fill='none' stroke='currentColor'></path>
+<path d='M 328,104 L 496,104' fill='none' stroke='currentColor'></path>
+<path d='M 24,200 L 72,200' fill='none' stroke='currentColor'></path>
+<path d='M 336,200 L 392,200' fill='none' stroke='currentColor'></path>
+<path d='M -4,136 L 4,120' fill='none' stroke='currentColor'></path>
+<path d='M -4,136 L 4,152' fill='none' stroke='currentColor'></path>
+<path d='M 4,40 L 12,24' fill='none' stroke='currentColor'></path>
+<path d='M 4,40 L 12,56' fill='none' stroke='currentColor'></path>
+<path d='M 4,120 L 12,104' fill='none' stroke='currentColor'></path>
+<path d='M 4,152 L 12,168' fill='none' stroke='currentColor'></path>
+<path d='M 4,232 L 12,216' fill='none' stroke='currentColor'></path>
+<path d='M 4,232 L 12,248' fill='none' stroke='currentColor'></path>
+<path d='M 12,24 L 20,8' fill='none' stroke='currentColor'></path>
+<path d='M 12,56 L 20,72' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='16' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='16' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='16' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 12,216 L 20,200' fill='none' stroke='currentColor'></path>
+<path d='M 12,248 L 20,264' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='24' y='36' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='24' y='52' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='24' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='24' y='132' fill='currentColor' style='font-size:1em'>K</text>
+<text text-anchor='middle' x='24' y='148' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='24' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='24' y='228' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='24' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='24' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='32' y='36' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='32' y='52' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='32' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='32' y='132' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='32' y='148' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='32' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='32' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='32' y='244' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='32' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='40' y='52' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='40' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='40' y='132' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='40' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='40' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='40' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='40' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='40' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='40' y='340' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='40' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='40' y='372' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='48' y='52' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='48' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='48' y='132' fill='currentColor' style='font-size:1em'>,</text>
+<text text-anchor='middle' x='48' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='48' y='244' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='48' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='48' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='356' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='48' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='36' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='56' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='56' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='56' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='56' y='228' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='56' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='56' y='292' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='56' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='56' y='324' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='56' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='36' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='64' y='52' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='64' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='64' y='132' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='64' y='148' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='64' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='64' y='228' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='64' y='244' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='64' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='64' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='308' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='64' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='356' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='64' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='52' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='72' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='72' y='148' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='72' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='72' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='72' y='244' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='72' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='72' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='308' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='72' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='356' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='72' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='36' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='80' y='52' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='80' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='132' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='80' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='80' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='244' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='80' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='308' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='80' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='356' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='80' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='36' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='88' y='52' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='88' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='88' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='88' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='88' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='88' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='88' y='196' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='88' y='228' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='88' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='88' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='88' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='88' y='292' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='88' y='308' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='88' y='324' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='88' y='340' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='88' y='356' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='88' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='36' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='96' y='52' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='96' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='84' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='132' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='96' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='96' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='180' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='96' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='228' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='96' y='244' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='96' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='276' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='96' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='308' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='96' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='36' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='104' y='52' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='104' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='84' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='104' y='148' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='104' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='180' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='104' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='228' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='104' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='104' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='276' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='104' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='308' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='104' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='356' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='104' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='36' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='112' y='52' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='112' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='112' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='244' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='112' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='308' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='112' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='356' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='112' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='36' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='120' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='148' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='120' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='120' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='292' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='120' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='120' y='324' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='120' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='356' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='120' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='36' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='128' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='132' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='128' y='148' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='128' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='228' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='128' y='244' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='128' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='340' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='128' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='372' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='136' y='36' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='136' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='136' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='136' y='132' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='136' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='136' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='136' y='228' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='244' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='136' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='144' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='144' y='148' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='144' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='144' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='36' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='152' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='148' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='152' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='244' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='152' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 156,8 L 164,24' fill='none' stroke='currentColor'></path>
+<path d='M 156,72 L 164,56' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='160' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='160' y='148' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='160' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='160' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='160' y='244' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='160' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 164,24 L 172,40' fill='none' stroke='currentColor'></path>
+<path d='M 164,56 L 172,40' fill='none' stroke='currentColor'></path>
+<path d='M 164,104 L 172,120' fill='none' stroke='currentColor'></path>
+<path d='M 164,168 L 172,152' fill='none' stroke='currentColor'></path>
+<path d='M 164,200 L 172,216' fill='none' stroke='currentColor'></path>
+<path d='M 164,264 L 172,248' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='176' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='176' y='52' fill='currentColor' style='font-size:1em'>y</text>
+<path d='M 172,120 L 180,136' fill='none' stroke='currentColor'></path>
+<path d='M 172,152 L 180,136' fill='none' stroke='currentColor'></path>
+<path d='M 172,216 L 180,232' fill='none' stroke='currentColor'></path>
+<path d='M 172,248 L 180,232' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='184' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='184' y='52' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='184' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='184' y='148' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='184' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='184' y='244' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='192' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='192' y='52' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='192' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='192' y='148' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='192' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='192' y='244' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='200' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='200' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='200' y='148' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='200' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='200' y='244' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='208' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='208' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='208' y='212' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='208' y='228' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='208' y='244' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='216' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='216' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='216' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='228' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='216' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='224' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='224' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='228' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='224' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='232' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='232' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='228' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='232' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='240' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='240' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='240' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='248' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='248' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='228' fill='currentColor' style='font-size:1em'>,</text>
+<text text-anchor='middle' x='248' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='256' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='256' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='264' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='264' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='228' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='264' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='272' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='272' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='228' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='272' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='280' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='280' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='228' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='280' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='288' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='288' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='288' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='296' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='296' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='228' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='296' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='304' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='304' y='212' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='304' y='228' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='304' y='244' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='312' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 308,136 L 316,120' fill='none' stroke='currentColor'></path>
+<path d='M 308,136 L 316,152' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='320' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 316,120 L 324,104' fill='none' stroke='currentColor'></path>
+<path d='M 316,152 L 324,168' fill='none' stroke='currentColor'></path>
+<path d='M 316,232 L 324,216' fill='none' stroke='currentColor'></path>
+<path d='M 316,232 L 324,248' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='328' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='328' y='148' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='328' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 324,216 L 332,200' fill='none' stroke='currentColor'></path>
+<path d='M 324,248 L 332,264' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='336' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='336' y='148' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='336' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='336' y='228' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='336' y='244' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='336' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='344' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='344' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='344' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='344' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='344' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='344' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='352' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='352' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='352' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='352' y='244' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='352' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='360' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='360' y='132' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='360' y='148' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='360' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='360' y='244' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='360' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='368' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='368' y='132' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='368' y='148' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='368' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='368' y='228' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='368' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='368' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='376' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='376' y='132' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='376' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='376' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='376' y='228' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='376' y='244' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='376' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='384' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='384' y='148' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='384' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='384' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='384' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='384' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='392' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='392' y='132' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='392' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='392' y='244' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='392' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='400' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='400' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='400' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='400' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='400' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='400' y='228' fill='currentColor' style='font-size:1em'>J</text>
+<text text-anchor='middle' x='400' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='408' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='408' y='132' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='408' y='148' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='408' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='408' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='408' y='196' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='408' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='408' y='244' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='408' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='408' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='408' y='292' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='408' y='308' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='416' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='416' y='148' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='416' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='416' y='180' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='416' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='416' y='228' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='416' y='244' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='416' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='416' y='276' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='416' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='416' y='324' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='416' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='416' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='416' y='372' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='424' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='424' y='132' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='424' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='424' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='424' y='180' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='424' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='424' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='424' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='424' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='424' y='276' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='424' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='424' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='424' y='340' fill='currentColor' style='font-size:1em'>(</text>
+<text text-anchor='middle' x='424' y='356' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='424' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='432' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='432' y='132' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='432' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='432' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='432' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='432' y='244' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='432' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='432' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='432' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='432' y='340' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='432' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='432' y='388' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='432' y='404' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='432' y='420' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='440' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='440' y='132' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='440' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='440' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='440' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='440' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='440' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='440' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='440' y='340' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='440' y='356' fill='currentColor' style='font-size:1em'>Q</text>
+<text text-anchor='middle' x='440' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='440' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='440' y='404' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='440' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='448' y='148' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='448' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='448' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='448' y='244' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='448' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='448' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='340' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='448' y='356' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='448' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='404' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='448' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='456' y='132' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='456' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='456' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='456' y='244' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='456' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='456' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='340' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='456' y='356' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='456' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='404' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='456' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='464' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='464' y='148' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='464' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='464' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='464' y='244' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='464' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='464' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='356' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='464' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='404' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='464' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='472' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='472' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='472' y='148' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='472' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='472' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='472' y='244' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='472' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='472' y='308' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='472' y='324' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='472' y='340' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='472' y='356' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='472' y='372' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='472' y='388' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='472' y='404' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='472' y='420' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='472' y='436' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='480' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='480' y='148' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='480' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='480' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='480' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='480' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='480' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='340' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='480' y='356' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='480' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='488' y='148' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='488' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='488' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='488' y='244' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='488' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='488' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='340' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='488' y='356' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='488' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='404' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='488' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='532' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='488' y='548' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='488' y='564' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='488' y='580' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='496' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='496' y='148' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='496' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 492,200 L 500,216' fill='none' stroke='currentColor'></path>
+<path d='M 492,264 L 500,248' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='496' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='340' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='496' y='356' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='496' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='404' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='496' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='548' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='496' y='564' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='496' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 500,104 L 508,120' fill='none' stroke='currentColor'></path>
+<path d='M 500,168 L 508,152' fill='none' stroke='currentColor'></path>
+<path d='M 500,216 L 508,232' fill='none' stroke='currentColor'></path>
+<path d='M 500,248 L 508,232' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='504' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='340' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='504' y='356' fill='currentColor' style='font-size:1em'>)</text>
+<text text-anchor='middle' x='504' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='388' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='504' y='404' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='504' y='420' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='504' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='484' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='504' y='500' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='504' y='516' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='504' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='548' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='504' y='564' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='504' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 508,120 L 516,136' fill='none' stroke='currentColor'></path>
+<path d='M 508,152 L 516,136' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='512' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='512' y='244' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='512' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='340' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='512' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='500' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='512' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='548' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='512' y='564' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='512' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='520' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='520' y='148' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='520' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='520' y='244' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='520' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='324' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='520' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='520' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='520' y='372' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='520' y='436' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='520' y='452' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='520' y='468' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='520' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='500' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='520' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='548' fill='currentColor' style='font-size:1em'>,</text>
+<text text-anchor='middle' x='520' y='564' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='520' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='528' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='528' y='148' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='528' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='528' y='244' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='528' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='500' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='528' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='564' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='528' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='536' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='536' y='148' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='536' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='536' y='260' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='536' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='536' y='292' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='536' y='308' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='536' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='500' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='536' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='548' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='536' y='564' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='536' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='544' y='116' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='544' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='544' y='148' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='544' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='500' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='544' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='564' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='544' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='552' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='132' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='552' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='548' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='552' y='564' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='552' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='560' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='560' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='500' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='560' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='548' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='560' y='564' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='560' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='568' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='568' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='568' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='568' y='148' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='568' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='196' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='212' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='228' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='260' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='292' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='324' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='372' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='388' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='404' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='420' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='436' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='568' y='468' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='568' y='484' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='568' y='500' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='568' y='516' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='568' y='532' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='568' y='548' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='568' y='564' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='568' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='576' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='132' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='576' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='548' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='576' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='584' y='116' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='584' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='584' y='148' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='584' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='500' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='584' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='548' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='584' y='564' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='584' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='20' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='592' y='36' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='592' y='52' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='592' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='500' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='592' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='548' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='592' y='564' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='592' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='36' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='600' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='500' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='600' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='564' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='600' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='36' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='608' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='500' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='608' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='548' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='608' y='564' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='608' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='36' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='616' y='52' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='616' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='100' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='148' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='196' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='212' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='228' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='260' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='292' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='324' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='372' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='388' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='404' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='420' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='436' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='452' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='468' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='616' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='500' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='616' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='548' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='616' y='564' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='616' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='624' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='624' y='36' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='624' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='624' y='484' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='624' y='500' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='624' y='516' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='624' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='624' y='548' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='624' y='564' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='624' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='632' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='632' y='36' fill='currentColor' style='font-size:1em'>!</text>
+<text text-anchor='middle' x='632' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='632' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='632' y='564' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='632' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='640' y='20' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='640' y='36' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='640' y='52' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='640' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='640' y='564' fill='currentColor' style='font-size:1em'>!</text>
+<text text-anchor='middle' x='640' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='648' y='532' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='648' y='548' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='648' y='564' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='648' y='580' fill='currentColor' style='font-size:1em'>┘</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="table">
+  Table
+</h3>
+<p><a href="https://arthursonzogni.com/Diagon/#Table">https://arthursonzogni.com/Diagon/#Table</a></p>
+
+
+
+<div class="goat svg-container w-80 dark-blue">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 408 409"
+      >
+      <g transform='translate(8,16)'>
+<text text-anchor='middle' x='0' y='4' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='0' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='36' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='68' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='100' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='132' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='148' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='164' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='196' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='212' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='228' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='260' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='292' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='324' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='356' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='372' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='388' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='8' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='52' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='8' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='84' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='8' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='116' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='8' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='148' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='8' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='180' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='8' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='340' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='8' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='372' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='8' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='52' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='16' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='84' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='16' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='116' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='16' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='16' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='180' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='16' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='340' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='16' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='372' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='16' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='52' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='24' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='84' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='24' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='116' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='24' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='148' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='24' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='180' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='24' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='340' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='24' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='372' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='24' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='52' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='32' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='84' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='32' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='116' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='32' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='148' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='32' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='180' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='32' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='340' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='32' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='372' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='32' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='52' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='40' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='84' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='40' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='40' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='180' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='40' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='340' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='40' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='372' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='40' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='52' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='48' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='84' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='48' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='48' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='180' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='48' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='340' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='48' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='372' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='48' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='84' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='56' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='56' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='340' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='56' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='372' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='56' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='64' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='64' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='340' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='64' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='84' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='72' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='72' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='340' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='72' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='84' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='80' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='80' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='340' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='80' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='52' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='84' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='116' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='148' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='180' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='212' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='88' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='244' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='88' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='276' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='88' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='308' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='88' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='340' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='372' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='52' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='104' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='104' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='148' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='104' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='180' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='104' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='212' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='104' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='244' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='104' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='276' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='104' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='308' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='104' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='340' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='104' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='104' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='84' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='112' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='148' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='112' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='180' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='112' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='212' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='112' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='244' fill='currentColor' style='font-size:1em'>[</text>
+<text text-anchor='middle' x='112' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='276' fill='currentColor' style='font-size:1em'>(</text>
+<text text-anchor='middle' x='112' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='308' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='112' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='340' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='112' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='112' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='52' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='120' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='120' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='148' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='120' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='180' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='120' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='212' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='120' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='244' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='120' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='276' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='120' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='308' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='120' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='340' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='120' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='120' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='52' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='128' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='84' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='128' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='148' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='128' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='180' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='128' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='212' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='128' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='340' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='128' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='128' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='52' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='136' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='84' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='136' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='148' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='136' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='180' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='136' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='212' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='136' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='276' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='308' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='340' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='136' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='52' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='144' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='144' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='116' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='144' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='148' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='144' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='180' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='144' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='212' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='144' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='244' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='144' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='276' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='144' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='308' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='144' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='340' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='144' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='372' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='144' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='52' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='152' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='84' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='152' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='180' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='152' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='212' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='152' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='244' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='152' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='276' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='152' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='308' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='152' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='372' fill='currentColor' style='font-size:1em'>h</text>
+<text text-anchor='middle' x='152' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='52' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='160' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='160' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='116' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='160' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='148' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='160' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='180' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='160' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='244' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='160' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='276' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='160' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='308' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='160' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='340' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='160' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='372' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='160' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='52' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='168' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='116' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='168' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='180' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='276' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='308' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='168' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='52' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='176' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='84' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='176' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='116' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='176' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='148' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='176' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='180' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='176' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='244' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='176' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='276' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='176' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='308' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='176' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='340' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='176' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='372' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='176' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='52' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='184' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='148' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='184' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='244' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='184' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='276' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='184' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='308' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='184' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='340' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='184' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='372' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='184' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='52' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='192' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='84' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='192' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='116' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='192' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='148' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='192' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='244' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='192' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='276' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='192' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='308' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='192' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='340' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='192' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='372' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='192' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='84' fill='currentColor' style='font-size:1em'>=</text>
+<text text-anchor='middle' x='200' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='116' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='200' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='148' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='200' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='200' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='276' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='200' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='308' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='200' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='340' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='200' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='372' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='200' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='52' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='208' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='84' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='208' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='116' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='208' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='148' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='208' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='244' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='208' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='276' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='208' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='308' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='208' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='340' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='208' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='208' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='116' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='216' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='148' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='216' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='340' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='216' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='52' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='224' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='224' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='244' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='224' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='276' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='224' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='308' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='224' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='372' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='224' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='84' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='232' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='116' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='232' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='148' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='232' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='244' fill='currentColor' style='font-size:1em'>]</text>
+<text text-anchor='middle' x='232' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='276' fill='currentColor' style='font-size:1em'>)</text>
+<text text-anchor='middle' x='232' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='308' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='232' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='340' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='232' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='84' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='240' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='244' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='240' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='276' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='240' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='308' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='240' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='372' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='240' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='84' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='248' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='116' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='248' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='148' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='248' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='340' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='248' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='372' fill='currentColor' style='font-size:1em'>h</text>
+<text text-anchor='middle' x='248' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='256' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='308' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='256' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='372' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='256' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='84' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='264' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='264' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='84' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='272' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='372' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='272' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='280' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='372' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='280' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='84' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='288' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='372' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='288' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='84' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='296' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='372' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='296' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='304' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='84' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='312' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='84' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='320' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='372' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='320' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='84' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='328' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='336' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='84' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='344' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='344' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='352' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='360' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='372' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='376' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='148' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='372' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='392' y='4' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='392' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='36' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='68' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='100' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='132' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='164' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='196' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='212' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='228' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='260' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='292' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='324' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='356' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='388' fill='currentColor' style='font-size:1em'>┘</text>
+</g>
+
+    </svg>
+  
+</div>
+
+   <div class="time">
+     <time datetime="2022-10-25">2022-10-25&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 12 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/gedanken/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/gedanken/hugoisforlovers/index.html b/homepage/public/gedanken/hugoisforlovers/index.html
new file mode 100644
index 0000000..b23d787
--- /dev/null
+++ b/homepage/public/gedanken/hugoisforlovers/index.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Getting Started with Hugo | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/gedanken/hugoisforlovers/" />
+
+
+<meta property="og:title" content="Getting Started with Hugo" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/gedanken/hugoisforlovers/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Getting Started with Hugo" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Getting Started with Hugo",
+    "url": "http:\/\/localhost:1313\/gedanken\/hugoisforlovers\/",
+    "datePublished": "2022-10-26T17:12:11\u002b07:00",
+    "dateModified": "2022-10-26T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/gedanken/">Gedanken</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/gedanken/hugoisforlovers/">Getting Started with Hugo</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Getting Started with Hugo</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ol>
+    <li><a href="#step-1-install-hugo">Step 1. Install Hugo</a></li>
+    <li><a href="#step-2-build-the-docs">Step 2. Build the Docs</a></li>
+    <li><a href="#step-3-change-the-docs-site">Step 3. Change the docs site</a></li>
+  </ol>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="step-1-install-hugo">
+  Step 1. Install Hugo
+</h2>
+<p>Go to <a href="https://github.com/spf13/hugo/releases">Hugo releases</a> and download the
+appropriate version for your OS and architecture.</p>
+<p>Save it somewhere specific as we will be using it in the next step.</p>
+<p>More complete instructions are available at <a href="https://gohugo.io/getting-started/installing/">Install Hugo</a></p>
+
+
+<h2 id="step-2-build-the-docs">
+  Step 2. Build the Docs
+</h2>
+<p>Hugo has its own example site which happens to also be the documentation site
+you are reading right now.</p>
+<p>Follow the following steps:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>1. Clone the [Hugo repository](http://github.com/spf13/hugo)
+</span></span><span style="display:flex;"><span>2. Go into the repo
+</span></span><span style="display:flex;"><span>3. Run hugo in server mode and build the docs
+</span></span><span style="display:flex;"><span>4. Open your browser to http://localhost:1313
+</span></span></code></pre></div><p>Corresponding pseudo commands:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>git clone https://github.com/spf13/hugo
+</span></span><span style="display:flex;"><span><span style="font-weight:bold;font-style:italic">cd</span> hugo
+</span></span><span style="display:flex;"><span>/path/to/where/you/installed/hugo server --source=./docs
+</span></span><span style="display:flex;"><span>&gt; 29 pages created
+</span></span><span style="display:flex;"><span>&gt; 0 tags index created
+</span></span><span style="display:flex;"><span>&gt; in 27 ms
+</span></span><span style="display:flex;"><span>&gt; Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>&gt; Press ctrl+c to stop
+</span></span></code></pre></div><p>Once you&rsquo;ve gotten here, follow along the rest of this page on your local build.</p>
+
+
+<h2 id="step-3-change-the-docs-site">
+  Step 3. Change the docs site
+</h2>
+<p>Stop the Hugo process by hitting Ctrl+C.</p>
+<p>Now we are going to run hugo again, but this time with hugo in watch mode.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>/path/to/hugo/from/step/1/hugo server --source=./docs --watch
+</span></span><span style="display:flex;"><span>&gt; 29 pages created
+</span></span><span style="display:flex;"><span>&gt; 0 tags index created
+</span></span><span style="display:flex;"><span>&gt; in 27 ms
+</span></span><span style="display:flex;"><span>&gt; Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>&gt; Watching <span style="font-weight:bold">for</span> changes in /Users/spf13/Code/hugo/docs/content
+</span></span><span style="display:flex;"><span>&gt; Press ctrl+c to stop
+</span></span></code></pre></div><p>Open your <a href="http://vim.spf13.com">favorite editor</a> and change one of the source
+content pages. How about changing this very file to <em>fix the typo</em>. How about changing this very file to <em>fix the typo</em>.</p>
+<p>Content files are found in <code>docs/content/</code>. Unless otherwise specified, files
+are located at the same relative location as the url, in our case
+<code>docs/content/overview/quickstart.md</code>.</p>
+<p>Change and save this file.. Notice what happened in your terminal.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>&gt; Change detected, rebuilding site
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&gt; 29 pages created
+</span></span><span style="display:flex;"><span>&gt; 0 tags index created
+</span></span><span style="display:flex;"><span>&gt; in 26 ms
+</span></span></code></pre></div><p>Refresh the browser and observe that the typo is now fixed.</p>
+<p>Notice how quick that was. Try to refresh the site before it&rsquo;s finished building. I double dare you.
+Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.</p>
+
+   <div class="time">
+     <time datetime="2022-10-26">2022-10-26&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 2 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/gedanken/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/gedanken/index.html b/homepage/public/gedanken/index.html
new file mode 100644
index 0000000..24e3fdc
--- /dev/null
+++ b/homepage/public/gedanken/index.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Gedanken | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/gedanken/" />
+
+
+<meta property="og:title" content="Gedanken" />
+
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/gedanken/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Gedanken" />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/gedanken/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/gedanken/">Gedanken</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+    <h1>Gedanken</h1>
+    
+    <div class="time-list">
+        <ul>
+            
+            <li>
+                <span><time datetime="2026-05-18">2026-05-18&nbsp;</time>
+</span>
+                <div><a href="/gedanken/my-first-post/">My First Post</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-26">2022-10-26&nbsp;</time>
+</span>
+                <div><a href="/gedanken/hugoisforlovers/">Getting Started with Hugo</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-25">2022-10-25&nbsp;</time>
+</span>
+                <div><a href="/gedanken/diagrams/">Hugo Diagrams</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-20">2022-10-20&nbsp;</time>
+</span>
+                <div><a href="/gedanken/introduce-hugo/">Introduce Hugo</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2021-10-22">2021-10-22&nbsp;</time>
+</span>
+                <div><a href="/gedanken/creating-a-new-theme/">Creating a New Theme</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2021-10-22">2021-10-22&nbsp;</time>
+</span>
+                <div><a href="/gedanken/migrate-from-jekyll/">Migrate to Hugo from Jekyll</a></div>
+            </li>
+            
+        </ul>
+    </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/gedanken/index.xml b/homepage/public/gedanken/index.xml
new file mode 100644
index 0000000..1049ff2
--- /dev/null
+++ b/homepage/public/gedanken/index.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Gedanken on Thomas Internet Garden</title>
+    <link>http://localhost:1313/gedanken/</link>
+    <description>Recent content in Gedanken on Thomas Internet Garden</description>
+    <generator>Hugo</generator>
+    <language>en-us</language>
+    <managingEditor>Thomas.Sindt@gmx.de (Thomas)</managingEditor>
+    <webMaster>Thomas.Sindt@gmx.de (Thomas)</webMaster>
+    <lastBuildDate>Mon, 18 May 2026 23:03:26 +0200</lastBuildDate>
+    <atom:link href="http://localhost:1313/gedanken/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>My First Post</title>
+      <link>http://localhost:1313/gedanken/my-first-post/</link>
+      <pubDate>Mon, 18 May 2026 23:03:26 +0200</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/my-first-post/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This is &lt;strong&gt;bold&lt;/strong&gt; text, and this is &lt;em&gt;emphasized&lt;/em&gt; text.&lt;/p&gt;&#xA;&lt;p&gt;Visit the &lt;a href=&#34;https://gohugo.io&#34;&gt;Hugo&lt;/a&gt; website!&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Getting Started with Hugo</title>
+      <link>http://localhost:1313/gedanken/hugoisforlovers/</link>
+      <pubDate>Wed, 26 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/hugoisforlovers/</guid>
+      <description>&lt;h2 id=&#34;step-1-install-hugo&#34;&gt;&#xA;  Step 1. Install Hugo&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Go to &lt;a href=&#34;https://github.com/spf13/hugo/releases&#34;&gt;Hugo releases&lt;/a&gt; and download the&#xA;appropriate version for your OS and architecture.&lt;/p&gt;&#xA;&lt;p&gt;Save it somewhere specific as we will be using it in the next step.&lt;/p&gt;&#xA;&lt;p&gt;More complete instructions are available at &lt;a href=&#34;https://gohugo.io/getting-started/installing/&#34;&gt;Install Hugo&lt;/a&gt;&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;step-2-build-the-docs&#34;&gt;&#xA;  Step 2. Build the Docs&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo has its own example site which happens to also be the documentation site&#xA;you are reading right now.&lt;/p&gt;&#xA;&lt;p&gt;Follow the following steps:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Hugo Diagrams</title>
+      <link>http://localhost:1313/gedanken/diagrams/</link>
+      <pubDate>Tue, 25 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/diagrams/</guid>
+      <description>&lt;p&gt;Hugo version &amp;gt;= 0.93.0&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;goat-diagrams-ascii&#34;&gt;&#xA;  GoAT Diagrams (Ascii)&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo! supports &lt;a href=&#34;https://github.com/bep/goat&#34;&gt;GoAT&lt;/a&gt; natively. This means that this code block:&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```goat&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      .               .                .               .--- 1          .-- 1     / 1&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;     / \              |                |           .---+            .-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    /   \         .---+---.         .--+--.        |   &amp;#39;--- 2      |   &amp;#39;-- 2   / \ 2&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;   +     +        |       |        |       |    ---+            ---+          +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; /   \ /   \    |   |   |   |    |   |   |   |     &amp;#39;---+            &amp;#39;-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; 1   2 3   4    1   2   3   4    1   2   3   4         &amp;#39;--- 4          &amp;#39;-- 4     \ 4&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Will be rendered as:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Introduce Hugo</title>
+      <link>http://localhost:1313/gedanken/introduce-hugo/</link>
+      <pubDate>Thu, 20 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/introduce-hugo/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in &lt;a href=&#34;https://github.com/gohugoio/hugo&#34;&gt;Hugo&lt;/a&gt;. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Creating a New Theme</title>
+      <link>http://localhost:1313/gedanken/creating-a-new-theme/</link>
+      <pubDate>Fri, 22 Oct 2021 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/creating-a-new-theme/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Migrate to Hugo from Jekyll</title>
+      <link>http://localhost:1313/gedanken/migrate-from-jekyll/</link>
+      <pubDate>Fri, 22 Oct 2021 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/migrate-from-jekyll/</guid>
+      <description>&lt;h2 id=&#34;move-static-content-to-static&#34;&gt;&#xA;  Move static content to &lt;code&gt;static&lt;/code&gt;&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Jekyll has a rule that any directory not starting with &lt;code&gt;_&lt;/code&gt; will be copied as-is to the &lt;code&gt;_site&lt;/code&gt; output. Hugo keeps all static content under &lt;code&gt;static&lt;/code&gt;. You should therefore move it all there.&#xA;With Jekyll, something that looked like&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;▾ &amp;lt;root&amp;gt;/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    ▾ images/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        logo.png&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;should become&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;▾ &amp;lt;root&amp;gt;/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    ▾ static/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        ▾ images/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            logo.png&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Additionally, you&amp;rsquo;ll want any files that should reside at the root (such as &lt;code&gt;CNAME&lt;/code&gt;) to be moved to &lt;code&gt;static&lt;/code&gt;.&lt;/p&gt;</description>
+    </item>
+  </channel>
+</rss>
diff --git a/homepage/public/gedanken/introduce-hugo/index.html b/homepage/public/gedanken/introduce-hugo/index.html
new file mode 100644
index 0000000..7d2f7ff
--- /dev/null
+++ b/homepage/public/gedanken/introduce-hugo/index.html
@@ -0,0 +1,1229 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Introduce Hugo | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/gedanken/introduce-hugo/" />
+
+
+<meta property="og:title" content="Introduce Hugo" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/gedanken/introduce-hugo/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Introduce Hugo" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Introduce Hugo",
+    "url": "http:\/\/localhost:1313\/gedanken\/introduce-hugo\/",
+    "datePublished": "2022-10-20T17:12:11\u002b07:00",
+    "dateModified": "2022-10-20T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/gedanken/">Gedanken</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/gedanken/introduce-hugo/">Introduce Hugo</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Introduce Hugo</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+        <li><a href="/tags/tech/">#Tech</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ol>
+    <li><a href="#introduction">Introduction</a></li>
+    <li><a href="#some-definitions">Some Definitions</a>
+      <ol>
+        <li><a href="#skins">Skins</a></li>
+        <li><a href="#the-home-page">The Home Page</a></li>
+        <li><a href="#site-configuration-file">Site Configuration File</a></li>
+        <li><a href="#content">Content</a>
+          <ol>
+            <li><a href="#front-matter">Front Matter</a></li>
+            <li><a href="#markdown">Markdown</a></li>
+          </ol>
+        </li>
+        <li><a href="#template-files">Template Files</a>
+          <ol>
+            <li><a href="#single-template">Single Template</a></li>
+            <li><a href="#list-template">List Template</a></li>
+            <li><a href="#partial-template">Partial Template</a></li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+    <li><a href="#create-a-new-site">Create a New Site</a>
+      <ol>
+        <li><a href="#generate-the-html-for-the-new-site">Generate the HTML For the New Site</a></li>
+        <li><a href="#test-the-new-site">Test the New Site</a></li>
+      </ol>
+    </li>
+    <li><a href="#create-a-new-theme">Create a New Theme</a>
+      <ol>
+        <li><a href="#create-a-skeleton">Create a Skeleton</a></li>
+        <li><a href="#update-the-configuration-file-to-use-the-theme">Update the Configuration File to Use the Theme</a></li>
+        <li><a href="#generate-the-site">Generate the Site</a>
+          <ol>
+            <li><a href="#the-home-page-1">The Home Page</a></li>
+            <li><a href="#the-magic-of-static">The Magic of Static</a></li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+    <li><a href="#the-theme-development-cycle">The Theme Development Cycle</a>
+      <ol>
+        <li><a href="#purge-the-public-directory">Purge the public/ Directory</a></li>
+        <li><a href="#hugos-watch-option">Hugo&rsquo;s Watch Option</a></li>
+        <li><a href="#live-reload">Live Reload</a></li>
+        <li><a href="#development-commands">Development Commands</a></li>
+      </ol>
+    </li>
+    <li><a href="#update-the-home-page-template">Update the Home Page Template</a>
+      <ol>
+        <li><a href="#make-a-static-home-page">Make a Static Home Page</a>
+          <ol>
+            <li><a href="#live-reload-1">Live Reload</a></li>
+          </ol>
+        </li>
+        <li><a href="#build-a-dynamic-home-page">Build a &ldquo;Dynamic&rdquo; Home Page</a>
+          <ol>
+            <li><a href="#create-new-posts">Create New Posts</a></li>
+          </ol>
+        </li>
+        <li><a href="#list-and-single-templates">List and Single Templates</a></li>
+        <li><a href="#add-content-to-the-homepage">Add Content to the Homepage</a></li>
+        <li><a href="#add-content-to-the-posts">Add Content to the Posts</a>
+          <ol>
+            <li><a href="#update-the-template-file">Update the Template File</a></li>
+          </ol>
+        </li>
+        <li><a href="#linking-to-content">Linking to Content</a></li>
+        <li><a href="#create-a-post-listing">Create a Post Listing</a></li>
+      </ol>
+    </li>
+    <li><a href="#creating-top-level-pages">Creating Top Level Pages</a></li>
+    <li><a href="#sharing-templates">Sharing Templates</a>
+      <ol>
+        <li><a href="#create-the-header-and-footer-partials">Create the Header and Footer Partials</a></li>
+        <li><a href="#update-the-home-page-template-to-use-the-partials">Update the Home Page Template to Use the Partials</a></li>
+        <li><a href="#update-the-default-single-template-to-use-the-partials">Update the Default Single Template to Use the Partials</a></li>
+      </ol>
+    </li>
+    <li><a href="#add-date-published-to-posts">Add “Date Published” to Posts</a>
+      <ol>
+        <li><a href="#add-date-published-to-the-template">Add “Date Published” to the Template</a></li>
+        <li><a href="#dont-repeat-yourself">Don&rsquo;t Repeat Yourself</a></li>
+      </ol>
+    </li>
+  </ol>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="introduction">
+  Introduction
+</h2>
+<p>This tutorial will show you how to create a simple theme in <a href="https://github.com/gohugoio/hugo">Hugo</a>. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&rsquo;t cover using CSS to style your theme.</p>
+<p>We&rsquo;ll start with creating a new site with a very basic template. Then we&rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.</p>
+<p>In this tutorial, commands that you enter will start with the &ldquo;$&rdquo; prompt. The output will follow. Lines that start with &ldquo;#&rdquo; are comments that I&rsquo;ve added to explain a point. When I show updates to a file, the &ldquo;:wq&rdquo; on the last line means to save the file.</p>
+<p>Here&rsquo;s an example:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>## this is a comment
+</span></span><span style="display:flex;"><span>$ echo this is a command
+</span></span><span style="display:flex;"><span>this is a command
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>## edit the file
+</span></span><span style="display:flex;"><span>$ vi foo.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>date: &#34;2014-09-28&#34;
+</span></span><span style="display:flex;"><span>title: &#34;creating a new theme&#34;
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>bah and humbug
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>## show it
+</span></span><span style="display:flex;"><span>$ cat foo.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>date: &#34;2014-09-28&#34;
+</span></span><span style="display:flex;"><span>title: &#34;creating a new theme&#34;
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>bah and humbug
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h2 id="some-definitions">
+  Some Definitions
+</h2>
+<p>There are a few concepts that you need to understand before creating a theme.</p>
+
+
+<h3 id="skins">
+  Skins
+</h3>
+<p>Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.</p>
+<p>You have two ways to create a skin. The simplest way is to create it in the <code>layouts/</code> directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the <code>layouts/</code> directory so it will always find the skin.</p>
+<p>Your second choice is to create it in a sub-directory of the <code>themes/</code> directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?</p>
+<p>The difference between creating a skin in <code>layouts/</code> and creating it in <code>themes/</code> is very subtle. A skin in <code>layouts/</code> can’t be customized without updating the templates and static files that it is built from. A skin created in <code>themes/</code>, on the other hand, can be and that makes it easier for other people to use it.</p>
+<p>The rest of this tutorial will call a skin created in the <code>themes/</code> directory a theme.</p>
+<p>Note that you can use this tutorial to create a skin in the <code>layouts/</code> directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.</p>
+
+
+<h3 id="the-home-page">
+  The Home Page
+</h3>
+<p>The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html.</p>
+
+
+<h3 id="site-configuration-file">
+  Site Configuration File
+</h3>
+<p>When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it.</p>
+<p>Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your <code>content/</code> directory and template files in your <code>themes/</code> directory. It will create HTML files in your <code>public/</code> directory. You can change this by specifying alternate locations in the configuration file.</p>
+
+
+<h3 id="content">
+  Content
+</h3>
+<p>Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML.</p>
+
+
+<h4 id="front-matter">
+  Front Matter
+</h4>
+<p>The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or JSON. Unlike the configuration file, Hugo doesn’t use the file’s extension to know the format. It looks for markers to signal the type. TOML is surrounded by “<code>---</code>”, YAML by “<code>---</code>”, and JSON is enclosed in curly braces. I prefer to use TOML, so you’ll need to translate my examples if you prefer YAML or JSON.</p>
+<p>The information in the front matter is passed into the template before the content is rendered into HTML.</p>
+
+
+<h4 id="markdown">
+  Markdown
+</h4>
+<p>Content is written in Markdown which makes it easier to create the content. Hugo runs the content through a Markdown engine to create the HTML which will be written to the output file.</p>
+
+
+<h3 id="template-files">
+  Template Files
+</h3>
+<p>Hugo uses template files to render content into HTML. Template files are a bridge between the content and presentation. Rules in the template define what content is published, where it&rsquo;s published to, and how it will rendered to the HTML file. The template guides the presentation by specifying the style to use.</p>
+<p>There are three types of templates: single, list, and partial. Each type takes a bit of content as input and transforms it based on the commands in the template.</p>
+<p>Hugo uses its knowledge of the content to find the template file used to render the content. If it can’t find a template that is an exact match for the content, it will shift up a level and search from there. It will continue to do so until it finds a matching template or runs out of templates to try. If it can’t find a template, it will use the default template for the site.</p>
+<p>Please note that you can use the front matter to influence Hugo’s choice of templates.</p>
+
+
+<h4 id="single-template">
+  Single Template
+</h4>
+<p>A single template is used to render a single piece of content. For example, an article or post would be a single piece of content and use a single template.</p>
+
+
+<h4 id="list-template">
+  List Template
+</h4>
+<p>A list template renders a group of related content. That could be a summary of recent postings or all articles in a category. List templates can contain multiple groups.</p>
+<p>The homepage template is a special type of list template. Hugo assumes that the home page of your site will act as the portal for the rest of the content in the site.</p>
+
+
+<h4 id="partial-template">
+  Partial Template
+</h4>
+<p>A partial template is a template that can be included in other templates. Partial templates must be called using the “partial” template command. They are very handy for rolling up common behavior. For example, your site may have a banner that all pages use. Instead of copying the text of the banner into every single and list template, you could create a partial with the banner in it. That way if you decide to change the banner, you only have to change the partial template.</p>
+
+
+<h2 id="create-a-new-site">
+  Create a New Site
+</h2>
+<p>Let&rsquo;s use Hugo to create a new web site. I&rsquo;m a Mac user, so I&rsquo;ll create mine in my home directory, in the Sites folder. If you&rsquo;re using Linux, you might have to create the folder first.</p>
+<p>The &ldquo;new site&rdquo; command will create a skeleton of a site. It will give you the basic directory structure and a useable configuration file.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo new site ~/Sites/zafta
+</span></span><span style="display:flex;"><span>$ <span style="font-weight:bold;font-style:italic">cd</span> ~/Sites/zafta
+</span></span><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total 8
+</span></span><span style="display:flex;"><span>drwxr-xr-x  7 quoha  staff  238 Sep 29 16:49 .
+</span></span><span style="display:flex;"><span>drwxr-xr-x  3 quoha  staff  102 Sep 29 16:49 ..
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Take a look in the content/ directory to confirm that it is empty.</p>
+<p>The other directories (archetypes/, layouts/, and static/) are used when customizing a theme. That&rsquo;s a topic for a different tutorial, so please ignore them for now.</p>
+
+
+<h3 id="generate-the-html-for-the-new-site">
+  Generate the HTML For the New Site
+</h3>
+<p>Running the <code>hugo</code> command with no options will read all the available content and generate the HTML files. It will also copy all static files (that&rsquo;s everything that&rsquo;s not content). Since we have an empty site, it won&rsquo;t do much, but it will do it very quickly.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The &ldquo;<code>--verbose</code>&rdquo; flag gives extra information that will be helpful when we build the template. Every line of the output that starts with &ldquo;INFO:&rdquo; or &ldquo;WARN:&rdquo; is present because we used that flag. The lines that start with &ldquo;WARN:&rdquo; are warning messages. We&rsquo;ll go over them later.</p>
+<p>We can verify that the command worked by looking at the directory again.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total 8
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>See that new public/ directory? Hugo placed all generated content there. When you&rsquo;re ready to publish your web site, that&rsquo;s the place to start. For now, though, let&rsquo;s just confirm that we have what we&rsquo;d expect from a site with no content.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ ls -l public
+</span></span><span style="display:flex;"><span>total 16
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  416 Sep 29 17:02 index.xml
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  262 Sep 29 17:02 sitemap.xml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Hugo created two XML files, which is standard, but there are no HTML files.</p>
+
+
+<h3 id="test-the-new-site">
+  Test the New Site
+</h3>
+<p>Verify that you can run the built-in web server. It will dramatically shorten your development cycle if you do. Start it by running the &ldquo;server&rdquo; command. If it is successful, you will see output similar to the following:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo server --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>Serving pages from /Users/quoha/Sites/zafta/public
+</span></span><span style="display:flex;"><span>Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>Press Ctrl+C to stop
+</span></span></code></pre></div><p>Connect to the listed URL (it&rsquo;s on the line that starts with &ldquo;Web Server&rdquo;). If everything is working correctly, you should get a page that shows the following:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>index.xml
+</span></span><span style="display:flex;"><span>sitemap.xml
+</span></span></code></pre></div><p>That&rsquo;s a listing of your public/ directory. Hugo didn&rsquo;t create a home page because our site has no content. When there&rsquo;s no index.html file in a directory, the server lists the files in the directory, which is what you should see in your browser.</p>
+<p>Let’s go back and look at those warnings again.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html]
+</span></span></code></pre></div><p>That second warning is easier to explain. We haven’t created a template to be used to generate “page not found errors.” The 404 message is a topic for a separate tutorial.</p>
+<p>Now for the first warning. It is for the home page. You can tell because the first layout that it looked for was “index.html.” That’s only used by the home page.</p>
+<p>I like that the verbose flag causes Hugo to list the files that it&rsquo;s searching for. For the home page, they are index.html, _default/list.html, and _default/single.html. There are some rules that we&rsquo;ll cover later that explain the names and paths. For now, just remember that Hugo couldn&rsquo;t find a template for the home page and it told you so.</p>
+<p>At this point, you&rsquo;ve got a working installation and site that we can build upon. All that’s left is to add some content and a theme to display it.</p>
+
+
+<h2 id="create-a-new-theme">
+  Create a New Theme
+</h2>
+<p>Hugo doesn&rsquo;t ship with a default theme. There are a few available (I counted a dozen when I first installed Hugo) and Hugo comes with a command to create new themes.</p>
+<p>We&rsquo;re going to create a new theme called &ldquo;zafta.&rdquo; Since the goal of this tutorial is to show you how to fill out the files to pull in your content, the theme will not contain any CSS. In other words, ugly but functional.</p>
+<p>All themes have opinions on content and layout. For example, Zafta uses &ldquo;post&rdquo; over &ldquo;blog&rdquo;. Strong opinions make for simpler templates but differing opinions make it tougher to use themes. When you build a theme, consider using the terms that other themes do.</p>
+
+
+<h3 id="create-a-skeleton">
+  Create a Skeleton
+</h3>
+<p>Use the hugo &ldquo;new&rdquo; command to create the skeleton of a theme. This creates the directory structure and places empty files for you to fill out.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo new theme zafta
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total 8
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+</span></span><span style="display:flex;"><span>drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find themes -type f | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  1081 Sep 29 17:31 themes/zafta/LICENSE.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff    93 Sep 29 17:31 themes/zafta/theme.toml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype.</p>
+<p>Please take a minute to fill out the theme.toml and LICENSE.md files. They&rsquo;re optional, but if you&rsquo;re going to be distributing your theme, it tells the world who to praise (or blame). It&rsquo;s also nice to declare the license so that people will know how they can use the theme.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/theme.toml
+</span></span><span style="display:flex;"><span>author: <span style="color:#666;font-style:italic">&#34;michael d henderson&#34;</span>
+</span></span><span style="display:flex;"><span>description: <span style="color:#666;font-style:italic">&#34;a minimal working template&#34;</span>
+</span></span><span style="display:flex;"><span>license: <span style="color:#666;font-style:italic">&#34;MIT&#34;</span>
+</span></span><span style="display:flex;"><span>name: <span style="color:#666;font-style:italic">&#34;zafta&#34;</span>
+</span></span><span style="display:flex;"><span>source_repo: <span style="color:#666;font-style:italic">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>tags: [<span style="color:#666;font-style:italic">&#34;tags&#34;</span>, <span style="color:#666;font-style:italic">&#34;categories&#34;</span>]
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#888;font-style:italic">## also edit themes/zafta/LICENSE.md and change</span>
+</span></span><span style="display:flex;"><span><span style="color:#888;font-style:italic">## the bit that says &#34;YOUR_NAME_HERE&#34;</span>
+</span></span></code></pre></div><p>Note that the the skeleton&rsquo;s template files are empty. Don&rsquo;t worry, we&rsquo;ll be changing that shortly.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find themes/zafta -name <span style="color:#666;font-style:italic">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="update-the-configuration-file-to-use-the-theme">
+  Update the Configuration File to Use the Theme
+</h3>
+<p>Now that we&rsquo;ve got a theme to work with, it&rsquo;s a good idea to add the theme name to the configuration file. This is optional, because you can always add &ldquo;-t zafta&rdquo; on all your commands. I like to put it the configuration file because I like shorter command lines. If you don&rsquo;t put it in the configuration file or specify it on the command line, you won&rsquo;t use the template that you&rsquo;re expecting to.</p>
+<p>Edit the file to add the theme, add a title for the site, and specify that all of our content will use the TOML format.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi config.toml
+</span></span><span style="display:flex;"><span>theme: <span style="color:#666;font-style:italic">&#34;zafta&#34;</span>
+</span></span><span style="display:flex;"><span>baseurl: <span style="color:#666;font-style:italic">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>languageCode: <span style="color:#666;font-style:italic">&#34;en-us&#34;</span>
+</span></span><span style="display:flex;"><span>title: <span style="color:#666;font-style:italic">&#34;zafta - totally refreshing&#34;</span>
+</span></span><span style="display:flex;"><span>MetaDataFormat: <span style="color:#666;font-style:italic">&#34;toml&#34;</span>
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="generate-the-site">
+  Generate the Site
+</h3>
+<p>Now that we have an empty theme, let&rsquo;s generate the site again.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Did you notice that the output is different? The warning message for the home page has disappeared and we have an additional information line saying that Hugo is syncing from the theme&rsquo;s directory.</p>
+<p>Let&rsquo;s check the public/ directory to see what Hugo&rsquo;s created.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ ls -l public
+</span></span><span style="display:flex;"><span>total 16
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 css
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff    0 Sep 29 17:56 index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  407 Sep 29 17:56 index.xml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 js
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  243 Sep 29 17:56 sitemap.xml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Notice four things:</p>
+<ol>
+<li>Hugo created a home page. This is the file public/index.html.</li>
+<li>Hugo created a css/ directory.</li>
+<li>Hugo created a js/ directory.</li>
+<li>Hugo claimed that it created 0 pages. It created a file and copied over static files, but didn&rsquo;t create any pages. That&rsquo;s because it considers a &ldquo;page&rdquo; to be a file created directly from a content file. It doesn&rsquo;t count things like the index.html files that it creates automatically.</li>
+</ol>
+
+
+<h4 id="the-home-page-1">
+  The Home Page
+</h4>
+<p>Hugo supports many different types of templates. The home page is special because it gets its own type of template and its own template file. The file, layouts/index.html, is used to generate the HTML for the home page. The Hugo documentation says that this is the only required template, but that depends. Hugo&rsquo;s warning message shows that it looks for three different templates:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</span></span></code></pre></div><p>If it can&rsquo;t find any of these, it completely skips creating the home page. We noticed that when we built the site without having a theme installed.</p>
+<p>When Hugo created our theme, it created an empty home page template. Now, when we build the site, Hugo finds the template and uses it to generate the HTML for the home page. Since the template file is empty, the HTML file is empty, too. If the template had any rules in it, then Hugo would have used them to generate the home page.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find . -name index.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 20:21 ./public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 ./themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h4 id="the-magic-of-static">
+  The Magic of Static
+</h4>
+<p>Hugo does two things when generating the site. It uses templates to transform content into HTML and it copies static files into the site. Unlike content, static files are not transformed. They are copied exactly as they are.</p>
+<p>Hugo assumes that your site will use both CSS and JavaScript, so it creates directories in your theme to hold them. Remember opinions? Well, Hugo&rsquo;s opinion is that you&rsquo;ll store your CSS in a directory named css/ and your JavaScript in a directory named js/. If you don&rsquo;t like that, you can change the directory names in your theme directory or even delete them completely. Hugo&rsquo;s nice enough to offer its opinion, then behave nicely if you disagree.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find themes/zafta -type d | xargs ls -ld
+</span></span><span style="display:flex;"><span>drwxr-xr-x  7 quoha  staff  238 Sep 29 17:38 themes/zafta
+</span></span><span style="display:flex;"><span>drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes/zafta/archetypes
+</span></span><span style="display:flex;"><span>drwxr-xr-x  5 quoha  staff  170 Sep 29 17:31 themes/zafta/layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/_default
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/partials
+</span></span><span style="display:flex;"><span>drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/static
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/css
+</span></span><span style="display:flex;"><span>drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/js
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h2 id="the-theme-development-cycle">
+  The Theme Development Cycle
+</h2>
+<p>When you&rsquo;re working on a theme, you will make changes in the theme&rsquo;s directory, rebuild the site, and check your changes in the browser. Hugo makes this very easy:</p>
+<ol>
+<li>Purge the public/ directory.</li>
+<li>Run the built in web server in watch mode.</li>
+<li>Open your site in a browser.</li>
+<li>Update the theme.</li>
+<li>Glance at your browser window to see changes.</li>
+<li>Return to step 4.</li>
+</ol>
+<p>I’ll throw in one more opinion: never work on a theme on a live site. Always work on a copy of your site. Make changes to your theme, test them, then copy them up to your site. For added safety, use a tool like Git to keep a revision history of your content and your theme. Believe me when I say that it is too easy to lose both your mind and your changes.</p>
+<p>Check the main Hugo site for information on using Git with Hugo.</p>
+
+
+<h3 id="purge-the-public-directory">
+  Purge the public/ Directory
+</h3>
+<p>When generating the site, Hugo will create new files and update existing ones in the <code>public/</code> directory. It will not delete files that are no longer used. For example, files that were created in the wrong directory or with the wrong title will remain. If you leave them, you might get confused by them later. I recommend cleaning out your site prior to generating it.</p>
+<p>Note: If you&rsquo;re building on an SSD, you should ignore this. Churning on a SSD can be costly.</p>
+
+
+<h3 id="hugos-watch-option">
+  Hugo&rsquo;s Watch Option
+</h3>
+<p>Hugo&rsquo;s &ldquo;<code>--watch</code>&rdquo; option will monitor the content/ and your theme directories for changes and rebuild the site automatically.</p>
+
+
+<h3 id="live-reload">
+  Live Reload
+</h3>
+<p>Hugo&rsquo;s built in web server supports live reload. As pages are saved on the server, the browser is told to refresh the page. Usually, this happens faster than you can say, &ldquo;Wow, that&rsquo;s totally amazing.&rdquo;</p>
+
+
+<h3 id="development-commands">
+  Development Commands
+</h3>
+<p>Use the following commands as the basis for your workflow.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>## purge old files. hugo will recreate the public directory.
+</span></span><span style="display:flex;"><span>##
+</span></span><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>##
+</span></span><span style="display:flex;"><span>## run hugo in watch mode
+</span></span><span style="display:flex;"><span>##
+</span></span><span style="display:flex;"><span>$ hugo server --watch --verbose
+</span></span></code></pre></div><p>Here&rsquo;s sample output showing Hugo detecting a change to the template for the home page. Once generated, the web browser automatically reloaded the page. I&rsquo;ve said this before, it&rsquo;s amazing.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo server --watch --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>Watching <span style="font-weight:bold">for</span> changes in /Users/quoha/Sites/zafta/content
+</span></span><span style="display:flex;"><span>Serving pages from /Users/quoha/Sites/zafta/public
+</span></span><span style="display:flex;"><span>Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>Press Ctrl+C to stop
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 File System Event: [<span style="color:#666;font-style:italic">&#34;/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html&#34;</span>: MODIFY|ATTRIB]
+</span></span><span style="display:flex;"><span>Change detected, rebuilding site
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 1 ms
+</span></span></code></pre></div>
+
+<h2 id="update-the-home-page-template">
+  Update the Home Page Template
+</h2>
+<p>The home page is one of a few special pages that Hugo creates automatically. As mentioned earlier, it looks for one of three files in the theme&rsquo;s layout/ directory:</p>
+<ol>
+<li>index.html</li>
+<li>_default/list.html</li>
+<li>_default/single.html</li>
+</ol>
+<p>We could update one of the default templates, but a good design decision is to update the most specific template available. That&rsquo;s not a hard and fast rule (in fact, we&rsquo;ll break it a few times in this tutorial), but it is a good generalization.</p>
+
+
+<h3 id="make-a-static-home-page">
+  Make a Static Home Page
+</h3>
+<p>Right now, that page is empty because we don&rsquo;t have any content and we don&rsquo;t have any logic in the template. Let&rsquo;s change that by adding some text to the template.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>0 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 2 ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name <span style="color:#666;font-style:italic">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  78 Sep 29 21:26 public/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div>
+
+<h4 id="live-reload-1">
+  Live Reload
+</h4>
+<p>Note: If you&rsquo;re running the server with the <code>--watch</code> option, you&rsquo;ll see different content in the file:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;script&gt;document.write(<span style="color:#666;font-style:italic">&#39;&lt;script src=&#34;http://&#39;</span>
+</span></span><span style="display:flex;"><span>        + (location.host || <span style="color:#666;font-style:italic">&#39;localhost&#39;</span>).split(<span style="color:#666;font-style:italic">&#39;:&#39;</span>)[0]
+</span></span><span style="display:flex;"><span>    + <span style="color:#666;font-style:italic">&#39;:1313/livereload.js?mindelay=10&#34;&gt;&lt;/&#39;</span>
+</span></span><span style="display:flex;"><span>        + <span style="color:#666;font-style:italic">&#39;script&gt;&#39;</span>)&lt;/script&gt;&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>When you use <code>--watch</code>, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it.</p>
+
+
+<h3 id="build-a-dynamic-home-page">
+  Build a &ldquo;Dynamic&rdquo; Home Page
+</h3>
+<p>&ldquo;Dynamic home page?&rdquo; Hugo&rsquo;s a static web site generator, so this seems an odd thing to say. I mean let&rsquo;s have the home page automatically reflect the content in the site every time Hugo builds it. We&rsquo;ll use iteration in the template to do that.</p>
+
+
+<h4 id="create-new-posts">
+  Create New Posts
+</h4>
+<p>Now that we have the home page generating static content, let&rsquo;s add some content to the site. We&rsquo;ll display these posts as a list on the home page and on their own page, too.</p>
+<p>Hugo has a command to generate a skeleton post, just like it does for sites and themes.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo --verbose new post/first.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/first.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>ERROR: 2014/09/29 Unable to Cast &lt;nil&gt; to map[string]interface{}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>That wasn&rsquo;t very nice, was it?</p>
+<p>The &ldquo;new&rdquo; command uses an archetype to create the post file. Hugo created an empty default archetype file, but that causes an error when there&rsquo;s a theme. For me, the workaround was to create an archetypes file specifically for the post type.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Description: <span style="color:#666;font-style:italic">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>Tags: []
+</span></span><span style="display:flex;"><span>Categories: []
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find themes/zafta/archetypes -type f | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 21:53 themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  51 Sep 29 21:54 themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ hugo --verbose new post/first.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/first.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md
+</span></span><span style="display:flex;"><span>/Users/quoha/Sites/zafta/content/post/first.md created
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ hugo --verbose new post/second.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/second.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md
+</span></span><span style="display:flex;"><span>/Users/quoha/Sites/zafta/content/post/second.md created
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ ls -l content/post
+</span></span><span style="display:flex;"><span>total 16
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  104 Sep 29 21:54 first.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  105 Sep 29 21:57 second.md
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat content/post/first.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Categories: []
+</span></span><span style="display:flex;"><span>Description: <span style="color:#666;font-style:italic">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>Tags: []
+</span></span><span style="display:flex;"><span>date: <span style="color:#666;font-style:italic">&#34;2014-09-29T21:54:53-05:00&#34;</span>
+</span></span><span style="display:flex;"><span>title: <span style="color:#666;font-style:italic">&#34;first&#34;</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>my first post
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat content/post/second.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Categories: []
+</span></span><span style="display:flex;"><span>Description: <span style="color:#666;font-style:italic">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>Tags: []
+</span></span><span style="display:flex;"><span>date: <span style="color:#666;font-style:italic">&#34;2014-09-29T21:57:09-05:00&#34;</span>
+</span></span><span style="display:flex;"><span>title: <span style="color:#666;font-style:italic">&#34;second&#34;</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>my second post
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map[string]string{<span style="color:#666;font-style:italic">&#34;category&#34;</span>:<span style="color:#666;font-style:italic">&#34;categories&#34;</span>, <span style="color:#666;font-style:italic">&#34;tag&#34;</span>:<span style="color:#666;font-style:italic">&#34;tags&#34;</span>}
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>2 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 4 ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The output says that it created 2 pages. Those are our new posts:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find public -type f -name <span style="color:#666;font-style:italic">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  78 Sep 29 22:13 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/second/index.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The new files are empty because because the templates used to generate the content are empty. The homepage doesn&rsquo;t show the new content, either. We have to update the templates to add the posts.</p>
+
+
+<h3 id="list-and-single-templates">
+  List and Single Templates
+</h3>
+<p>In Hugo, we have three major kinds of templates. There&rsquo;s the home page template that we updated previously. It is used only by the home page. We also have &ldquo;single&rdquo; templates which are used to generate output for a single content file. We also have &ldquo;list&rdquo; templates that are used to group multiple pieces of content before generating output.</p>
+<p>Generally speaking, list templates are named &ldquo;list.html&rdquo; and single templates are named &ldquo;single.html.&rdquo;</p>
+<p>There are three other types of templates: partials, content views, and terms. We will not go into much detail on these.</p>
+
+
+<h3 id="add-content-to-the-homepage">
+  Add Content to the Homepage
+</h3>
+<p>The home page will contain a list of posts. Let&rsquo;s update its template to add the posts that we just created. The logic in the template will run every time we build the site.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  {{ range first 10 .Data.Pages }}
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between &ldquo;{{&rdquo; and &ldquo;}}&rdquo;. In our template, the commands are:</p>
+<ol>
+<li>range</li>
+<li>.Title</li>
+<li>end</li>
+</ol>
+<p>The &ldquo;range&rdquo; command is an iterator. We&rsquo;re going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created.</p>
+<p>The &ldquo;.Title&rdquo; command prints the value of the &ldquo;title&rdquo; variable. Hugo pulls it from the front matter in the Markdown file.</p>
+<p>The &ldquo;end&rdquo; command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds &ldquo;end.&rdquo; Everything between the &ldquo;range&rdquo; and &ldquo;end&rdquo; is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one.</p>
+<p>It&rsquo;s helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files.</p>
+<p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map[string]string{<span style="color:#666;font-style:italic">&#34;tag&#34;</span>:<span style="color:#666;font-style:italic">&#34;tags&#34;</span>, <span style="color:#666;font-style:italic">&#34;category&#34;</span>:<span style="color:#666;font-style:italic">&#34;categories&#34;</span>}
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>2 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 4 ms
+</span></span><span style="display:flex;"><span>$ find public -type f -name <span style="color:#666;font-style:italic">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  94 Sep 29 22:23 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/second/index.html
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;second&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;first&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let&rsquo;s take a moment to appreciate what we&rsquo;ve done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you&rsquo;ve learned everything you need to know to build a theme. All that&rsquo;s really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine.</p>
+<p>And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don&rsquo;t worry, though, that&rsquo;s all to come.</p>
+
+
+<h3 id="add-content-to-the-posts">
+  Add Content to the Posts
+</h3>
+<p>We&rsquo;re working with posts, which are in the content/post/ directory. That means that their section is &ldquo;post&rdquo; (and if we don&rsquo;t do something weird, their type is also &ldquo;post&rdquo;).</p>
+<p>Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can&rsquo;t find one, then it will look in the _default/ directory. There are some twists that we&rsquo;ll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html.</p>
+<p>Now that we know the search rule, let&rsquo;s see what we actually have available:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find themes/zafta -name single.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  132 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+</span></span></code></pre></div><p>We could create a new template, post/single.html, or change the default. Since we don&rsquo;t know of any other content types, let&rsquo;s start with updating the default.</p>
+<p>Remember, any content that we haven&rsquo;t created a template for will end up using this template. That can be good or bad. Bad because I know that we&rsquo;re going to be adding different types of content and we&rsquo;re going to end up undoing some of the changes we&rsquo;ve made. It&rsquo;s good because we&rsquo;ll be able to see immediate results. It&rsquo;s also good to start here because we can start to build the basic layout for the site. As we add more content types, we&rsquo;ll refactor this file and move logic around. Hugo makes that fairly painless, so we&rsquo;ll accept the cost and proceed.</p>
+<p>Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you&rsquo;re building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That&rsquo;s a refreshing amount of joy right there.</p>
+
+
+<h4 id="update-the-template-file">
+  Update the Template File
+</h4>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;{{ .Title }}&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map[string]string{<span style="color:#666;font-style:italic">&#34;tag&#34;</span>:<span style="color:#666;font-style:italic">&#34;tags&#34;</span>, <span style="color:#666;font-style:italic">&#34;category&#34;</span>:<span style="color:#666;font-style:italic">&#34;categories&#34;</span>}
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>2 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 4 ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name <span style="color:#666;font-style:italic">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff   94 Sep 29 22:40 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  125 Sep 29 22:40 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff    0 Sep 29 22:40 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  128 Sep 29 22:40 public/post/second/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/post/first/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;first&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;first&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;my first post&lt;/p&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/post/second/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;second&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;second&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;my second post&lt;/p&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Notice that the posts now have content. You can go to localhost:1313/post/first to verify.</p>
+
+
+<h3 id="linking-to-content">
+  Linking to Content
+</h3>
+<p>The posts are on the home page. Let&rsquo;s add a link from there to the post. Since this is the home page, we&rsquo;ll update its template.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  {{ range first 10 .Data.Pages }}
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;{{ .Permalink }}&#34;</span>&gt;{{ .Title }}&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>Build the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map[string]string{<span style="color:#666;font-style:italic">&#34;tag&#34;</span>:<span style="color:#666;font-style:italic">&#34;tags&#34;</span>, <span style="color:#666;font-style:italic">&#34;category&#34;</span>:<span style="color:#666;font-style:italic">&#34;categories&#34;</span>}
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+</span></span><span style="display:flex;"><span>0 draft content
+</span></span><span style="display:flex;"><span>0 future content
+</span></span><span style="display:flex;"><span>2 pages created
+</span></span><span style="display:flex;"><span>0 tags created
+</span></span><span style="display:flex;"><span>0 categories created
+</span></span><span style="display:flex;"><span>in 4 ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name <span style="color:#666;font-style:italic">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  149 Sep 29 22:44 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  125 Sep 29 22:44 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff    0 Sep 29 22:44 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  128 Sep 29 22:44 public/post/second/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;/post/second/&#34;</span>&gt;second&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;/post/first/&#34;</span>&gt;first&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="create-a-post-listing">
+  Create a Post Listing
+</h3>
+<p>We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let&rsquo;s make it show a list of all posts (not just the first ten).</p>
+<p>We need to decide which template to update. This will be a listing, so it should be a list template. Let&rsquo;s take a quick look and see which list templates are available.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find themes/zafta -name list.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+</span></span></code></pre></div><p>As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don&rsquo;t have multiple content types, so let&rsquo;s stay consistent and update the default list template.</p>
+
+
+<h2 id="creating-top-level-pages">
+  Creating Top Level Pages
+</h2>
+<p>Let&rsquo;s add an &ldquo;about&rdquo; page and display it at the top level (as opposed to a sub-level like we did with posts).</p>
+<p>The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let&rsquo;s verify that by creating an &ldquo;about&rdquo; page at the top level:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi content/about.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>title: <span style="color:#666;font-style:italic">&#34;about&#34;</span>
+</span></span><span style="display:flex;"><span>description: <span style="color:#666;font-style:italic">&#34;about this site&#34;</span>
+</span></span><span style="display:flex;"><span>date: <span style="color:#666;font-style:italic">&#34;2014-09-27&#34;</span>
+</span></span><span style="display:flex;"><span>slug: <span style="color:#666;font-style:italic">&#34;about time&#34;</span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#888;font-style:italic">## about us</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>i<span style="">&#39;</span>m speechless
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find public -name <span style="color:#666;font-style:italic">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff   334 Sep 27 15:08 public/about-time/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff   527 Sep 27 15:08 public/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff   358 Sep 27 15:08 public/post/first-post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff     0 Sep 27 15:08 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff   342 Sep 27 15:08 public/post/second-post/index.html
+</span></span></code></pre></div><p>Notice that the page wasn&rsquo;t created at the top level. It was created in a sub-directory named &lsquo;about-time/&rsquo;. That name came from our slug. Hugo will use the slug to name the generated content. It&rsquo;s a reasonable default, by the way, but we can learn a few things by fighting it for this file.</p>
+<p>One other thing. Take a look at the home page.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;http://localhost:1313/post/theme/&#34;</span>&gt;creating a new theme&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;http://localhost:1313/about-time/&#34;</span>&gt;about&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;http://localhost:1313/post/second-post/&#34;</span>&gt;second&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;http://localhost:1313/post/first-post/&#34;</span>&gt;first&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>&lt;script&gt;document.write(<span style="color:#666;font-style:italic">&#39;&lt;script src=&#34;http://&#39;</span>
+</span></span><span style="display:flex;"><span>        + (location.host || <span style="color:#666;font-style:italic">&#39;localhost&#39;</span>).split(<span style="color:#666;font-style:italic">&#39;:&#39;</span>)[0]
+</span></span><span style="display:flex;"><span>		+ <span style="color:#666;font-style:italic">&#39;:1313/livereload.js?mindelay=10&#34;&gt;&lt;/&#39;</span>
+</span></span><span style="display:flex;"><span>        + <span style="color:#666;font-style:italic">&#39;script&gt;&#39;</span>)&lt;/script&gt;&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>Notice that the &ldquo;about&rdquo; link is listed with the posts? That&rsquo;s not desirable, so let&rsquo;s change that first.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;posts&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ range first 10 .Data.Pages }}
+</span></span><span style="display:flex;"><span>    {{ <span style="font-weight:bold">if</span> eq .Type <span style="color:#666;font-style:italic">&#34;post&#34;</span>}}
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;{{ .Permalink }}&#34;</span>&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;pages&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ range .Data.Pages }}
+</span></span><span style="display:flex;"><span>    {{ <span style="font-weight:bold">if</span> eq .Type <span style="color:#666;font-style:italic">&#34;page&#34;</span> }}
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;{{ .Permalink }}&#34;</span>&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it.</p>
+<p>But, that about page still renders to about-time/index.html.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find public -name <span style="color:#666;font-style:italic">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff    334 Sep 27 15:33 public/about-time/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff    645 Sep 27 15:33 public/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff    358 Sep 27 15:33 public/post/first-post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff      0 Sep 27 15:33 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  1 mdhender  staff    342 Sep 27 15:33 public/post/second-post/index.html
+</span></span></code></pre></div><p>Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let&rsquo;s do it the hard way and change the permalink in the configuration file.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi config.toml
+</span></span><span style="display:flex;"><span>[permalinks]
+</span></span><span style="display:flex;"><span>	page: <span style="color:#666;font-style:italic">&#34;/:title/&#34;</span>
+</span></span><span style="display:flex;"><span>	about: <span style="color:#666;font-style:italic">&#34;/:filename/&#34;</span>
+</span></span></code></pre></div><p>Generate the web site and verify that this didn&rsquo;t work. Hugo lets &ldquo;slug&rdquo; or &ldquo;URL&rdquo; override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place.</p>
+
+
+<h2 id="sharing-templates">
+  Sharing Templates
+</h2>
+<p>If you&rsquo;ve been following along, you probably noticed that posts have titles in the browser and the home page doesn&rsquo;t. That&rsquo;s because we didn&rsquo;t put the title in the home page&rsquo;s template (layouts/index.html). That&rsquo;s an easy thing to do, but let&rsquo;s look at a different option.</p>
+<p>We can put the common bits into a shared template that&rsquo;s stored in the themes/zafta/layouts/partials/ directory.</p>
+
+
+<h3 id="create-the-header-and-footer-partials">
+  Create the Header and Footer Partials
+</h3>
+<p>In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme&rsquo;s presentation.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>	&lt;title&gt;{{ .Title }}&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ vi themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div>
+
+<h3 id="update-the-home-page-template-to-use-the-partials">
+  Update the Home Page Template to Use the Partials
+</h3>
+<p>The most noticeable difference between a template call and a partials call is the lack of path:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{{ template &#34;theme/partials/header.html&#34; . }}
+</span></span></code></pre></div><p>versus</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{{ partial &#34;header.html&#34; . }}
+</span></span></code></pre></div><p>Both pass in the context.</p>
+<p>Let&rsquo;s change the home page template to use these new partials.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;header.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;posts&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ range first 10 .Data.Pages }}
+</span></span><span style="display:flex;"><span>    {{ <span style="font-weight:bold">if</span> eq .Type <span style="color:#666;font-style:italic">&#34;post&#34;</span>}}
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;{{ .Permalink }}&#34;</span>&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;pages&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ range .Data.Pages }}
+</span></span><span style="display:flex;"><span>    {{ <span style="font-weight:bold">if</span> or (eq .Type <span style="color:#666;font-style:italic">&#34;page&#34;</span>) (eq .Type <span style="color:#666;font-style:italic">&#34;about&#34;</span>) }}
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a <span style="color:#666;font-weight:bold;font-style:italic">href</span>=<span style="color:#666;font-style:italic">&#34;{{ .Permalink }}&#34;</span>&gt;{{ .Type }} - {{ .Title }} - {{ .RelPermalink }}&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>  {{ end }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;footer.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The title on the home page is now &ldquo;your title here&rdquo;, which comes from the &ldquo;title&rdquo; variable in the config.toml file.</p>
+
+
+<h3 id="update-the-default-single-template-to-use-the-partials">
+  Update the Default Single Template to Use the Partials
+</h3>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;header.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;footer.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file.</p>
+
+
+<h2 id="add-date-published-to-posts">
+  Add “Date Published” to Posts
+</h2>
+<p>It&rsquo;s common to have posts display the date that they were written or published, so let&rsquo;s add that. The front matter of our posts has a variable named &ldquo;date.&rdquo; It&rsquo;s usually the date the content was created, but let&rsquo;s pretend that&rsquo;s the value we want to display.</p>
+
+
+<h3 id="add-date-published-to-the-template">
+  Add “Date Published” to the Template
+</h3>
+<p>We&rsquo;ll start by updating the template used to render the posts. The template code will look like:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{{ .Date.Format &#34;Mon, Jan 2, 2006&#34; }}
+</span></span></code></pre></div><p>Posts use the default single template, so we&rsquo;ll change that file.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;header.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;h2&gt;{{ .Date.Format <span style="color:#666;font-style:italic">&#34;Mon, Jan 2, 2006&#34;</span> }}&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;footer.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The posts now have the date displayed in them. There&rsquo;s a problem, though. The &ldquo;about&rdquo; page also has the date displayed.</p>
+<p>As usual, there are a couple of ways to make the date display only on posts. We could do an &ldquo;if&rdquo; statement like we did on the home page. Another way would be to create a separate template for posts.</p>
+<p>The &ldquo;if&rdquo; solution works for sites that have just a couple of content types. It aligns with the principle of &ldquo;code for today,&rdquo; too.</p>
+<p>Let&rsquo;s assume, though, that we&rsquo;ve made our site so complex that we feel we have to create a new template type. In Hugo-speak, we&rsquo;re going to create a section template.</p>
+<p>Let&rsquo;s restore the default single template before we forget.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ mkdir themes/zafta/layouts/post
+</span></span><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;header.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;footer.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Now we&rsquo;ll update the post&rsquo;s version of the single template. If you remember Hugo&rsquo;s rules, the template engine will use this version over the default.</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/post/single.html
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;header.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;h2&gt;{{ .Date.Format <span style="color:#666;font-style:italic">&#34;Mon, Jan 2, 2006&#34;</span> }}&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>  {{ .Content }}
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>{{ partial <span style="color:#666;font-style:italic">&#34;footer.html&#34;</span> . }}
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn&rsquo;t.</p>
+
+
+<h3 id="dont-repeat-yourself">
+  Don&rsquo;t Repeat Yourself
+</h3>
+<p>DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you&rsquo;re figuring that out, accept that you&rsquo;ll be doing some refactoring. Hugo makes that easy and fast, so it&rsquo;s okay to delay splitting up a template.</p>
+
+   <div class="time">
+     <time datetime="2022-10-20">2022-10-20&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 34 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/gedanken/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/gedanken/migrate-from-jekyll/index.html b/homepage/public/gedanken/migrate-from-jekyll/index.html
new file mode 100644
index 0000000..db7dc8e
--- /dev/null
+++ b/homepage/public/gedanken/migrate-from-jekyll/index.html
@@ -0,0 +1,343 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Migrate to Hugo from Jekyll | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/gedanken/migrate-from-jekyll/" />
+
+
+<meta property="og:title" content="Migrate to Hugo from Jekyll" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/gedanken/migrate-from-jekyll/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Migrate to Hugo from Jekyll" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Migrate to Hugo from Jekyll",
+    "url": "http:\/\/localhost:1313\/gedanken\/migrate-from-jekyll\/",
+    "datePublished": "2021-10-22T17:12:11\u002b07:00",
+    "dateModified": "2021-10-22T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/gedanken/">Gedanken</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/gedanken/migrate-from-jekyll/">Migrate to Hugo from Jekyll</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Migrate to Hugo from Jekyll</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ol>
+    <li><a href="#move-static-content-to-static">Move static content to <code>static</code></a></li>
+    <li><a href="#create-your-hugo-configuration-file">Create your Hugo configuration file</a></li>
+    <li><a href="#set-your-configuration-publish-folder-to-_site">Set your configuration publish folder to <code>_site</code></a></li>
+    <li><a href="#convert-jekyll-templates-to-hugo-templates">Convert Jekyll templates to Hugo templates</a></li>
+    <li><a href="#convert-jekyll-plugins-to-hugo-shortcodes">Convert Jekyll plugins to Hugo shortcodes</a>
+      <ol>
+        <li><a href="#implementation">Implementation</a></li>
+        <li><a href="#usage">Usage</a></li>
+      </ol>
+    </li>
+    <li><a href="#finishing-touches">Finishing touches</a>
+      <ol>
+        <li><a href="#fix-content">Fix content</a></li>
+        <li><a href="#clean-up">Clean up</a></li>
+      </ol>
+    </li>
+    <li><a href="#a-practical-example-in-a-diff">A practical example in a diff</a></li>
+  </ol>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="move-static-content-to-static">
+  Move static content to <code>static</code>
+</h2>
+<p>Jekyll has a rule that any directory not starting with <code>_</code> will be copied as-is to the <code>_site</code> output. Hugo keeps all static content under <code>static</code>. You should therefore move it all there.
+With Jekyll, something that looked like</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>▾ &lt;root&gt;/
+</span></span><span style="display:flex;"><span>    ▾ images/
+</span></span><span style="display:flex;"><span>        logo.png
+</span></span></code></pre></div><p>should become</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>▾ &lt;root&gt;/
+</span></span><span style="display:flex;"><span>    ▾ static/
+</span></span><span style="display:flex;"><span>        ▾ images/
+</span></span><span style="display:flex;"><span>            logo.png
+</span></span></code></pre></div><p>Additionally, you&rsquo;ll want any files that should reside at the root (such as <code>CNAME</code>) to be moved to <code>static</code>.</p>
+
+
+<h2 id="create-your-hugo-configuration-file">
+  Create your Hugo configuration file
+</h2>
+<p>Hugo can read your configuration as JSON, YAML or TOML. Hugo supports parameters custom configuration too. Refer to the <a href="/overview/configuration/">Hugo configuration documentation</a> for details.</p>
+
+
+<h2 id="set-your-configuration-publish-folder-to-_site">
+  Set your configuration publish folder to <code>_site</code>
+</h2>
+<p>The default is for Jekyll to publish to <code>_site</code> and for Hugo to publish to <code>public</code>. If, like me, you have <a href="http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.html"><code>_site</code> mapped to a git submodule on the <code>gh-pages</code> branch</a>, you&rsquo;ll want to do one of two alternatives:</p>
+<ol>
+<li>Change your submodule to point to map <code>gh-pages</code> to public instead of <code>_site</code> (recommended).</li>
+</ol>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>git submodule deinit _site
+</span></span><span style="display:flex;"><span>git rm _site
+</span></span><span style="display:flex;"><span>git submodule add -b gh-pages git@github.com:your-username/your-repo.git public
+</span></span></code></pre></div><ol start="2">
+<li>Or, change the Hugo configuration to use <code>_site</code> instead of <code>public</code>.</li>
+</ol>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{
+</span></span><span style="display:flex;"><span>    ..
+</span></span><span style="display:flex;"><span>    &#34;publishdir&#34;: &#34;_site&#34;,
+</span></span><span style="display:flex;"><span>    ..
+</span></span><span style="display:flex;"><span>}
+</span></span></code></pre></div>
+
+<h2 id="convert-jekyll-templates-to-hugo-templates">
+  Convert Jekyll templates to Hugo templates
+</h2>
+<p>That&rsquo;s the bulk of the work right here. The documentation is your friend. You should refer to <a href="http://jekyllrb.com/docs/templates/">Jekyll&rsquo;s template documentation</a> if you need to refresh your memory on how you built your blog and <a href="/layout/templates/">Hugo&rsquo;s template</a> to learn Hugo&rsquo;s way.</p>
+<p>As a single reference data point, converting my templates for <a href="http://heyitsalex.net/">heyitsalex.net</a> took me no more than a few hours.</p>
+
+
+<h2 id="convert-jekyll-plugins-to-hugo-shortcodes">
+  Convert Jekyll plugins to Hugo shortcodes
+</h2>
+<p>Jekyll has <a href="http://jekyllrb.com/docs/plugins/">plugins</a>; Hugo has <a href="/doc/shortcodes/">shortcodes</a>. It&rsquo;s fairly trivial to do a port.</p>
+
+
+<h3 id="implementation">
+  Implementation
+</h3>
+<p>As an example, I was using a custom <a href="https://github.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc06908ec/_plugins/image_tag.rb"><code>image_tag</code></a> plugin to generate figures with caption when running Jekyll. As I read about shortcodes, I found Hugo had a nice built-in shortcode that does exactly the same thing.</p>
+<p>Jekyll&rsquo;s plugin:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-ruby" data-lang="ruby"><span style="display:flex;"><span><span style="font-weight:bold">module</span> <span style="color:#666;font-weight:bold;font-style:italic">Jekyll</span>
+</span></span><span style="display:flex;"><span>  <span style="font-weight:bold">class</span> <span style="color:#666;font-weight:bold;font-style:italic">ImageTag</span> &lt; <span style="color:#666;font-weight:bold;font-style:italic">Liquid</span>::<span style="color:#666;font-weight:bold;font-style:italic">Tag</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-weight:bold;font-style:italic">@url</span>: <span style="font-weight:bold">nil</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-weight:bold;font-style:italic">@caption</span>: <span style="font-weight:bold">nil</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-weight:bold;font-style:italic">@class</span>: <span style="font-weight:bold">nil</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-weight:bold;font-style:italic">@link</span>: <span style="font-weight:bold">nil</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-style:italic">//</span> <span style="color:#666;font-weight:bold;font-style:italic">Patterns</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-weight:bold;font-style:italic">IMAGE_URL_WITH_CLASS_AND_CAPTION</span> =
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-style:italic">IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK</span>: <span style="color:#666;font-style:italic">/(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)&#34;(.*?)&#34;(\s+)-&gt;((https?:\/\/|\/)(\S+))(\s*)/i</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-style:italic">IMAGE_URL_WITH_CAPTION</span>: <span style="color:#666;font-style:italic">/((https?:\/\/|\/)(\S+))(\s+)&#34;(.*?)&#34;/i</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-style:italic">IMAGE_URL_WITH_CLASS</span>: <span style="color:#666;font-style:italic">/(\w+)(\s+)((https?:\/\/|\/)(\S+))/i</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#666;font-style:italic">IMAGE_URL</span>: <span style="color:#666;font-style:italic">/((https?:\/\/|\/)(\S+))/i</span>
+</span></span><span style="display:flex;"><span>    <span style="font-weight:bold">def</span> <span style="color:#666;font-weight:bold;font-style:italic">initialize</span>(tag_name, markup, tokens)
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">super</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">if</span> markup =~ <span style="color:#666;font-weight:bold;font-style:italic">IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@class</span>  : <span style="color:#666;font-weight:bold;font-style:italic">$1</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@url</span>    : <span style="color:#666;font-weight:bold;font-style:italic">$3</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@caption</span>: <span style="color:#666;font-weight:bold;font-style:italic">$7</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@link</span>: <span style="color:#666;font-weight:bold;font-style:italic">$9</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">elsif</span> markup =~ <span style="color:#666;font-weight:bold;font-style:italic">IMAGE_URL_WITH_CLASS_AND_CAPTION</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@class</span>  : <span style="color:#666;font-weight:bold;font-style:italic">$1</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@url</span>    : <span style="color:#666;font-weight:bold;font-style:italic">$3</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@caption</span>: <span style="color:#666;font-weight:bold;font-style:italic">$7</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">elsif</span> markup =~ <span style="color:#666;font-weight:bold;font-style:italic">IMAGE_URL_WITH_CAPTION</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@url</span>    : <span style="color:#666;font-weight:bold;font-style:italic">$1</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@caption</span>: <span style="color:#666;font-weight:bold;font-style:italic">$5</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">elsif</span> markup =~ <span style="color:#666;font-weight:bold;font-style:italic">IMAGE_URL_WITH_CLASS</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@class</span>: <span style="color:#666;font-weight:bold;font-style:italic">$1</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@url</span>  : <span style="color:#666;font-weight:bold;font-style:italic">$3</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">elsif</span> markup =~ <span style="color:#666;font-weight:bold;font-style:italic">IMAGE_URL</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-weight:bold;font-style:italic">@url</span>: <span style="color:#666;font-weight:bold;font-style:italic">$1</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">end</span>
+</span></span><span style="display:flex;"><span>    <span style="font-weight:bold">end</span>
+</span></span><span style="display:flex;"><span>    <span style="font-weight:bold">def</span> <span style="color:#666;font-weight:bold;font-style:italic">render</span>(context)
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">if</span> <span style="color:#666;font-weight:bold;font-style:italic">@class</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-style:italic">source</span>: <span style="color:#666;font-style:italic">&#34;&lt;figure class=&#39;</span><span style="color:#666;font-style:italic">#{</span><span style="color:#666;font-weight:bold;font-style:italic">@class</span><span style="color:#666;font-style:italic">}</span><span style="color:#666;font-style:italic">&#39;&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">else</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#666;font-style:italic">source</span>: <span style="color:#666;font-style:italic">&#34;&lt;figure&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">end</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">if</span> <span style="color:#666;font-weight:bold;font-style:italic">@link</span>
+</span></span><span style="display:flex;"><span>        source += <span style="color:#666;font-style:italic">&#34;&lt;a href=</span><span style="color:#666;font-style:italic">\&#34;</span><span style="color:#666;font-style:italic">#{</span><span style="color:#666;font-weight:bold;font-style:italic">@link</span><span style="color:#666;font-style:italic">}</span><span style="color:#666;font-style:italic">\&#34;</span><span style="color:#666;font-style:italic">&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">end</span>
+</span></span><span style="display:flex;"><span>      source += <span style="color:#666;font-style:italic">&#34;&lt;img src=</span><span style="color:#666;font-style:italic">\&#34;</span><span style="color:#666;font-style:italic">#{</span><span style="color:#666;font-weight:bold;font-style:italic">@url</span><span style="color:#666;font-style:italic">}</span><span style="color:#666;font-style:italic">\&#34;</span><span style="color:#666;font-style:italic">&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">if</span> <span style="color:#666;font-weight:bold;font-style:italic">@link</span>
+</span></span><span style="display:flex;"><span>        source += <span style="color:#666;font-style:italic">&#34;&lt;/a&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="font-weight:bold">end</span>
+</span></span><span style="display:flex;"><span>      source += <span style="color:#666;font-style:italic">&#34;&lt;figcaption&gt;</span><span style="color:#666;font-style:italic">#{</span><span style="color:#666;font-weight:bold;font-style:italic">@caption</span><span style="color:#666;font-style:italic">}</span><span style="color:#666;font-style:italic">&lt;/figcaption&gt;&#34;</span> <span style="font-weight:bold">if</span> <span style="color:#666;font-weight:bold;font-style:italic">@caption</span>
+</span></span><span style="display:flex;"><span>      source += <span style="color:#666;font-style:italic">&#34;&lt;/figure&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      source
+</span></span><span style="display:flex;"><span>    <span style="font-weight:bold">end</span>
+</span></span><span style="display:flex;"><span>  <span style="font-weight:bold">end</span>
+</span></span><span style="display:flex;"><span><span style="font-weight:bold">end</span>
+</span></span><span style="display:flex;"><span><span style="color:#666;font-weight:bold;font-style:italic">Liquid</span>::<span style="color:#666;font-weight:bold;font-style:italic">Template</span>.register_tag(<span style="color:#666;font-style:italic">&#39;image&#39;</span>, <span style="color:#666;font-weight:bold;font-style:italic">Jekyll</span>::<span style="color:#666;font-weight:bold;font-style:italic">ImageTag</span>)
+</span></span></code></pre></div><p>is written as this Hugo shortcode:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#888;font-style:italic">&lt;!-- image --&gt;</span>
+</span></span><span style="display:flex;"><span>&lt;figure <span style="">{{</span> with <span style="">.</span>Get <span style="">&#34;</span>class<span style="">&#34;</span> <span style="">}}</span>class=<span style="color:#666;font-style:italic">&#34;{{.}}&#34;</span><span style="">{{</span> end <span style="">}}</span>&gt;
+</span></span><span style="display:flex;"><span>    {{ with .Get &#34;link&#34;}}&lt;a href=<span style="color:#666;font-style:italic">&#34;{{.}}&#34;</span>&gt;{{ end }}
+</span></span><span style="display:flex;"><span>        &lt;img src=<span style="color:#666;font-style:italic">&#34;{{ .Get &#34;</span>src<span style="">&#34;</span> <span style="">}}&#34;</span> <span style="">{{</span> if or <span style="">(.</span>Get <span style="">&#34;</span>alt<span style="">&#34;)</span> <span style="">(.</span>Get <span style="">&#34;</span>caption<span style="">&#34;)</span> <span style="">}}</span>alt=<span style="color:#666;font-style:italic">&#34;{{ with .Get &#34;</span>alt<span style="">&#34;}}{{.}}{{</span>else<span style="">}}{{</span> <span style="">.</span>Get <span style="">&#34;</span>caption<span style="">&#34;</span> <span style="">}}{{</span> end <span style="">}}&#34;{{</span> end <span style="">}}</span> /&gt;
+</span></span><span style="display:flex;"><span>    {{ if .Get &#34;link&#34;}}&lt;/a&gt;{{ end }}
+</span></span><span style="display:flex;"><span>    {{ if or (or (.Get &#34;title&#34;) (.Get &#34;caption&#34;)) (.Get &#34;attr&#34;)}}
+</span></span><span style="display:flex;"><span>    &lt;figcaption&gt;{{ if isset .Params &#34;title&#34; }}
+</span></span><span style="display:flex;"><span>        {{ .Get &#34;title&#34; }}{{ end }}
+</span></span><span style="display:flex;"><span>        {{ if or (.Get &#34;caption&#34;) (.Get &#34;attr&#34;)}}&lt;p&gt;
+</span></span><span style="display:flex;"><span>        {{ .Get &#34;caption&#34; }}
+</span></span><span style="display:flex;"><span>        {{ with .Get &#34;attrlink&#34;}}&lt;a href=<span style="color:#666;font-style:italic">&#34;{{.}}&#34;</span>&gt; {{ end }}
+</span></span><span style="display:flex;"><span>            {{ .Get &#34;attr&#34; }}
+</span></span><span style="display:flex;"><span>        {{ if .Get &#34;attrlink&#34;}}&lt;/a&gt; {{ end }}
+</span></span><span style="display:flex;"><span>        &lt;/p&gt; {{ end }}
+</span></span><span style="display:flex;"><span>    &lt;/figcaption&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>&lt;/figure&gt;
+</span></span><span style="display:flex;"><span><span style="color:#888;font-style:italic">&lt;!-- image --&gt;</span>
+</span></span></code></pre></div>
+
+<h3 id="usage">
+  Usage
+</h3>
+<p>I simply changed:</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg &#34;One of my favorite touristy-type photos. I secretly waited for the good light while we were &#34;having fun&#34; and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing.&#34; -&gt;http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}
+</span></span></code></pre></div><p>to this (this example uses a slightly extended version named <code>fig</code>, different than the built-in <code>figure</code>):</p>
+<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>{{% fig class=&#34;full&#34; src=&#34;http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg&#34; title=&#34;One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing.&#34; link=&#34;http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/&#34; %}}
+</span></span></code></pre></div><p>As a bonus, the shortcode named parameters are, arguably, more readable.</p>
+
+
+<h2 id="finishing-touches">
+  Finishing touches
+</h2>
+
+
+<h3 id="fix-content">
+  Fix content
+</h3>
+<p>Depending on the amount of customization that was done with each post with Jekyll, this step will require more or less effort. There are no hard and fast rules here except that <code>hugo server --watch</code> is your friend. Test your changes and fix errors as needed.</p>
+
+
+<h3 id="clean-up">
+  Clean up
+</h3>
+<p>You&rsquo;ll want to remove the Jekyll configuration at this point. If you have anything else that isn&rsquo;t used, delete it.</p>
+
+
+<h2 id="a-practical-example-in-a-diff">
+  A practical example in a diff
+</h2>
+<p><a href="http://heyitsalex.net/">Hey, it&rsquo;s Alex</a> was migrated in less than a <em>father-with-kids day</em> from Jekyll to Hugo. You can see all the changes (and screw-ups) by looking at this <a href="https://github.com/alexandre-normand/alexandre-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b81495423294208cc74d610">diff</a>.</p>
+
+   <div class="time">
+     <time datetime="2021-10-22">2021-10-22&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 4 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/gedanken/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/gedanken/my-first-post/index.html b/homepage/public/gedanken/my-first-post/index.html
new file mode 100644
index 0000000..54a508b
--- /dev/null
+++ b/homepage/public/gedanken/my-first-post/index.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  My First Post | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/gedanken/my-first-post/" />
+
+
+<meta property="og:title" content="My First Post" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/gedanken/my-first-post/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="My First Post" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "My First Post",
+    "url": "http:\/\/localhost:1313\/gedanken\/my-first-post\/",
+    "datePublished": "2026-05-18T23:03:26\u002b02:00",
+    "dateModified": "2026-05-18T23:03:26\u002b02:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/gedanken/">Gedanken</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/gedanken/my-first-post/">My First Post</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>My First Post</h1>
+  
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ol>
+    <li><a href="#introduction">introduction</a></li>
+  </ol>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="introduction">
+  introduction
+</h2>
+<p>This is <strong>bold</strong> text, and this is <em>emphasized</em> text.</p>
+<p>Visit the <a href="https://gohugo.io">Hugo</a> website!</p>
+
+   <div class="time">
+     <time datetime="2026-05-18">2026-05-18&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 1 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/gedanken/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/index.html b/homepage/public/index.html
index 3140b48..1acde63 100644
--- a/homepage/public/index.html
+++ b/homepage/public/index.html
@@ -1,114 +1,108 @@
-<!DOCTYPE html>
-<html lang="en-us">
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    
-    <title>My New Hugo Project</title>
-    <meta name="viewport" content="width=device-width,minimum-scale=1">
-    <meta name="description" content="">
-    <meta name="generator" content="Hugo 0.161.1">
-    
-    
-    
-      <meta name="robots" content="index, follow">
-    
-    
-
-    <link rel="stylesheet" href="/ananke/css/main.fe543ec729f225f1a33caed07775c832a416476900d82ba51765d6ead9de6758.css" integrity="sha256-/lQ&#43;xynyJfGjPK7Qd3XIMqQWR2kA2CulF2XW6tneZ1g=" crossorigin="anonymous">
-    
+	<meta name="generator" content="Hugo 0.161.1"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/" />
 
 
-    
-      
+<meta property="og:title" content="Thomas und die Liebe letzter Teil neue Version..." />
 
-    
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Thomas und die Liebe letzter Teil neue Version..." />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
 
-    
-    
-      <link href="/index.xml" rel="alternate" type="application/rss+xml" title="My New Hugo Project" />
-      <link href="/index.xml" rel="feed" type="application/rss+xml" title="My New Hugo Project" />
-      
-    
 
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
     
-      <link rel="canonical" href="https://example.org/">
+  
+  <li class="current">
+    /
+    <a href="/">Thomas Internet Garden</a>
     
+  </li>
 
-    
-    
-    <meta property="og:url" content="https://example.org/">
-  <meta property="og:site_name" content="My New Hugo Project">
-  <meta property="og:title" content="My New Hugo Project">
-  <meta property="og:locale" content="en_us">
-  <meta property="og:type" content="website">
-
-  <meta itemprop="name" content="My New Hugo Project">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="My New Hugo Project">
-
-      
-      
-    
-	
-  </head><body class="ma0 avenir bg-near-white production is-home">
-    
-
-  <header>
-    <div class="pb3-m pb6-l bg-black">
-      <nav class="pv3 ph3 ph4-ns" role="navigation">
-  <div class="flex-l center items-center justify-between">
-    <a href="/" class="f3 fw2 hover-white white-90 dib no-underline">
-      
-        My New Hugo Project
-      
-    </a>
-    <div class="flex-l items-center">
-      
-
-      
-      <div class="ananke-socials"></div>
-
-    </div>
-  </div>
+  </ol>
 </nav>
 
-      <div class="tc-l pv3 ph3 ph4-ns">
-        <h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title">
-          My New Hugo Project
-        </h1>
-        
-      </div>
-    </div>
-  </header>
 
 
-    <main class="pb7" role="main">
-      <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy nested-links mid-gray">
+</header>
+    <main id="main-content" role="main">
+  
+
+<h2 id="introduction">
+  Introduction
+</h2>
+<p>Ich glaube, ich schreibe es hauptsächlich deswegen, um zu lernen und das Gelernte zu vertiefen und vielleicht auch ein wenig, damit es Euch da draußen helfen kann.</p>
+<p>Bis vor ein paar Jahren kannte ich wirklich noch nicht viel. Ich konnte nicht wirklich über Gefühle sprechen, geschweige denn diese auch ausleben und verstehen. Heute kenne ich große Teile der Gründe und hoffe auch, damit besser umgehen zu können.</p>
+<p>Ich kannte mich eigentlich selber nicht so richtig, war aber sehr zufrieden mit mir. Ich war auch der einzige. In der Corona-Zeit hatte ich mich immer mehr von meiner Familie abgesondert und mich im wörtlichen Sinne in den Keller zurück gezogen.</p>
+<p>Erst als meine Frau mich betrogen hatte musste ich etwas ändern. Ich hatte zu der Zeit noch ein sehr altes Beziehungsbild, bzw. Lebensmodell, so, dass ich deswegen echt angepisst war. Ich konnte keine Grenzen setzen, ich konnte nicht über Gefühle reden und ich konnte mich auch nicht selbst reflektieren. Ich wusste nur, so war es scheiße. Also machte ich mich auf, mich selber wieder in die Spur zu bringen. Dazu brauchte ich <em>nur</em> folgendes:</p>
+<ul>
+<li>Ich musste abnehmen. Aus drei Gründen. Zum Einen war es nicht mehr gesund, soviel, wie ich gewogen habe und zum Anderen habe ich mich selber auch nicht mehr als attraktiv wahrgenommen. Hinzu kommt noch ein dritter Grund: Meine Ausdauer in allen Belangen war unterirdisch. Deswegen hab ich beschlossen, abzunehmen. Ich hab erst mal komplett auf Süßes und auf Chips und auf alles verzichtet, was ich nur aus Langeweile gegessen habe. Dann hab ich immer mehr auf mein Hungergefühl geachtet und so hab ich es in einem halben Jahr von 95kg auf 65kg geschafft und halte dieses Gewicht nun schon ca. 2 Jahre. Das gibt mir wieder mehr Selbstvertrauen, Selbstwertgefühl und generell fühle ich mich viel fitter und wohler, als zuvor.</li>
+<li>Ich musste lernen, die Welt wieder positiv zu sehen. Ich musste viel über meine Gefühle lernen und wie ich sie wieder ins Positive bringe. Ich musste lernen, das ich verantwortlich für meine Gefühle und Emotionen bin. Ich kann die Schuld nicht im Außen suchen. Ich bin auch nicht verantwortlich für die Gefühle anderer. Hier habe ich viel gelernt über Liebe, Grenzen, Lebensmodelle, innere Kinder, Bindungsprobleme, Kommunikation, etc. . Das sowohl theoretisch über Webseminare, Vorlesungen, Bücher, als auch in der Praxis durch den tatsächlichen Versuch, es zu leben.</li>
+<li>Mit meinem wiederhergestellten, Selbstvertrauen, meiner wachsenden Praxis im Umgang mit meinen Gefühlen und in der Kommunikation habe ich viele total tolle Menschen kennen gelernt und mit ihnen komplett neue Lebensmodelle, Vorstellungen und Erkenntnisse über mich und die Welt. Ich habe gelernt, wie toll es ist, vorurteilsfrei und offen die Welt und die Menschen kennen lernen zu dürfen.</li>
+</ul>
+<p>All diese Punkte führten dazu, dass ich mich wieder richtig gut und vollständig und im Leben befindlich fühle und wieder mit einer sehr offenen, achtsamen und positiven Stimmung durchs Leben gehen kann, und ich wieder Freude an allem habe, was ich so mache.</p>
+
+  <div class="terminal-nav">
     
-  </article>
+  <nav aria-label="Main navigation">
+    <ul>
+    <li>
+      <a href="/gedanken/">Gedanken</a>
+    </li>
+    <li>
+      <a href="/warum/">Warum</a>
+    </li>
+    </ul>
+  </nav>
 
-  
-  
-  
-  
-  
-
-  
-
-    </main>
-    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
-  <div class="flex justify-between">
-  <a class="f4 fw4 hover-white white-70 dn dib-ns pv2 ph3 no-underline" href="https://example.org/" >
-    &copy;  My New Hugo Project 2026 
-  </a>
-    <div><div class="ananke-socials"></div>
-</div>
   </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
 </footer>
-
   </body>
 </html>
-
-
-
diff --git a/homepage/public/index.xml b/homepage/public/index.xml
index fd79c47..78dc644 100644
--- a/homepage/public/index.xml
+++ b/homepage/public/index.xml
@@ -1,11 +1,56 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
-    <title>My New Hugo Project</title>
-    <link>https://example.org/</link>
-    <description>Recent content on My New Hugo Project</description>
+    <title>Thomas und die Liebe letzter Teil neue Version... on Thomas Internet Garden</title>
+    <link>http://localhost:1313/</link>
+    <description>Recent content in Thomas und die Liebe letzter Teil neue Version... on Thomas Internet Garden</description>
     <generator>Hugo</generator>
     <language>en-us</language>
-    <atom:link href="https://example.org/index.xml" rel="self" type="application/rss+xml" />
+    <managingEditor>Thomas.Sindt@gmx.de (Thomas)</managingEditor>
+    <webMaster>Thomas.Sindt@gmx.de (Thomas)</webMaster>
+    <lastBuildDate>Mon, 18 May 2026 23:03:26 +0200</lastBuildDate>
+    <atom:link href="http://localhost:1313/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>My First Post</title>
+      <link>http://localhost:1313/gedanken/my-first-post/</link>
+      <pubDate>Mon, 18 May 2026 23:03:26 +0200</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/my-first-post/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This is &lt;strong&gt;bold&lt;/strong&gt; text, and this is &lt;em&gt;emphasized&lt;/em&gt; text.&lt;/p&gt;&#xA;&lt;p&gt;Visit the &lt;a href=&#34;https://gohugo.io&#34;&gt;Hugo&lt;/a&gt; website!&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Getting Started with Hugo</title>
+      <link>http://localhost:1313/gedanken/hugoisforlovers/</link>
+      <pubDate>Wed, 26 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/hugoisforlovers/</guid>
+      <description>&lt;h2 id=&#34;step-1-install-hugo&#34;&gt;&#xA;  Step 1. Install Hugo&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Go to &lt;a href=&#34;https://github.com/spf13/hugo/releases&#34;&gt;Hugo releases&lt;/a&gt; and download the&#xA;appropriate version for your OS and architecture.&lt;/p&gt;&#xA;&lt;p&gt;Save it somewhere specific as we will be using it in the next step.&lt;/p&gt;&#xA;&lt;p&gt;More complete instructions are available at &lt;a href=&#34;https://gohugo.io/getting-started/installing/&#34;&gt;Install Hugo&lt;/a&gt;&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;step-2-build-the-docs&#34;&gt;&#xA;  Step 2. Build the Docs&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo has its own example site which happens to also be the documentation site&#xA;you are reading right now.&lt;/p&gt;&#xA;&lt;p&gt;Follow the following steps:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Hugo Diagrams</title>
+      <link>http://localhost:1313/gedanken/diagrams/</link>
+      <pubDate>Tue, 25 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/diagrams/</guid>
+      <description>&lt;p&gt;Hugo version &amp;gt;= 0.93.0&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;goat-diagrams-ascii&#34;&gt;&#xA;  GoAT Diagrams (Ascii)&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo! supports &lt;a href=&#34;https://github.com/bep/goat&#34;&gt;GoAT&lt;/a&gt; natively. This means that this code block:&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```goat&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      .               .                .               .--- 1          .-- 1     / 1&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;     / \              |                |           .---+            .-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    /   \         .---+---.         .--+--.        |   &amp;#39;--- 2      |   &amp;#39;-- 2   / \ 2&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;   +     +        |       |        |       |    ---+            ---+          +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; /   \ /   \    |   |   |   |    |   |   |   |     &amp;#39;---+            &amp;#39;-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; 1   2 3   4    1   2   3   4    1   2   3   4         &amp;#39;--- 4          &amp;#39;-- 4     \ 4&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Will be rendered as:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Introduce Hugo</title>
+      <link>http://localhost:1313/gedanken/introduce-hugo/</link>
+      <pubDate>Thu, 20 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/introduce-hugo/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in &lt;a href=&#34;https://github.com/gohugoio/hugo&#34;&gt;Hugo&lt;/a&gt;. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Creating a New Theme</title>
+      <link>http://localhost:1313/gedanken/creating-a-new-theme/</link>
+      <pubDate>Fri, 22 Oct 2021 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/creating-a-new-theme/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Migrate to Hugo from Jekyll</title>
+      <link>http://localhost:1313/gedanken/migrate-from-jekyll/</link>
+      <pubDate>Fri, 22 Oct 2021 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/migrate-from-jekyll/</guid>
+      <description>&lt;h2 id=&#34;move-static-content-to-static&#34;&gt;&#xA;  Move static content to &lt;code&gt;static&lt;/code&gt;&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Jekyll has a rule that any directory not starting with &lt;code&gt;_&lt;/code&gt; will be copied as-is to the &lt;code&gt;_site&lt;/code&gt; output. Hugo keeps all static content under &lt;code&gt;static&lt;/code&gt;. You should therefore move it all there.&#xA;With Jekyll, something that looked like&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;▾ &amp;lt;root&amp;gt;/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    ▾ images/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        logo.png&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;should become&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;▾ &amp;lt;root&amp;gt;/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    ▾ static/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        ▾ images/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            logo.png&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Additionally, you&amp;rsquo;ll want any files that should reside at the root (such as &lt;code&gt;CNAME&lt;/code&gt;) to be moved to &lt;code&gt;static&lt;/code&gt;.&lt;/p&gt;</description>
+    </item>
   </channel>
 </rss>
diff --git a/homepage/public/posts/creating-a-new-theme/index.html b/homepage/public/posts/creating-a-new-theme/index.html
new file mode 100644
index 0000000..86fdbe8
--- /dev/null
+++ b/homepage/public/posts/creating-a-new-theme/index.html
@@ -0,0 +1,1200 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Creating a New Theme | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/posts/creating-a-new-theme/" />
+
+
+<meta property="og:title" content="Creating a New Theme" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/posts/creating-a-new-theme/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Creating a New Theme" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Creating a New Theme",
+    "url": "http:\/\/localhost:1313\/posts\/creating-a-new-theme\/",
+    "datePublished": "2021-10-22T17:12:11\u002b07:00",
+    "dateModified": "2021-10-22T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/posts/">Posts</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/posts/creating-a-new-theme/">Creating a New Theme</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Creating a New Theme</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ul>
+    <li><a href="#introduction">Introduction</a></li>
+    <li><a href="#some-definitions">Some Definitions</a>
+      <ul>
+        <li><a href="#skins">Skins</a></li>
+        <li><a href="#the-home-page">The Home Page</a></li>
+        <li><a href="#site-configuration-file">Site Configuration File</a></li>
+        <li><a href="#content">Content</a></li>
+        <li><a href="#template-files">Template Files</a></li>
+      </ul>
+    </li>
+    <li><a href="#create-a-new-site">Create a New Site</a>
+      <ul>
+        <li><a href="#generate-the-html-for-the-new-site">Generate the HTML For the New Site</a></li>
+        <li><a href="#test-the-new-site">Test the New Site</a></li>
+      </ul>
+    </li>
+    <li><a href="#create-a-new-theme">Create a New Theme</a>
+      <ul>
+        <li><a href="#create-a-skeleton">Create a Skeleton</a></li>
+        <li><a href="#update-the-configuration-file-to-use-the-theme">Update the Configuration File to Use the Theme</a></li>
+        <li><a href="#generate-the-site">Generate the Site</a></li>
+      </ul>
+    </li>
+    <li><a href="#the-theme-development-cycle">The Theme Development Cycle</a>
+      <ul>
+        <li><a href="#purge-the-public-directory">Purge the public/ Directory</a></li>
+        <li><a href="#hugos-watch-option">Hugo&rsquo;s Watch Option</a></li>
+        <li><a href="#live-reload">Live Reload</a></li>
+        <li><a href="#development-commands">Development Commands</a></li>
+      </ul>
+    </li>
+    <li><a href="#update-the-home-page-template">Update the Home Page Template</a>
+      <ul>
+        <li><a href="#make-a-static-home-page">Make a Static Home Page</a></li>
+        <li><a href="#build-a-dynamic-home-page">Build a &ldquo;Dynamic&rdquo; Home Page</a></li>
+        <li><a href="#list-and-single-templates">List and Single Templates</a></li>
+        <li><a href="#add-content-to-the-homepage">Add Content to the Homepage</a></li>
+        <li><a href="#add-content-to-the-posts">Add Content to the Posts</a></li>
+        <li><a href="#linking-to-content">Linking to Content</a></li>
+        <li><a href="#create-a-post-listing">Create a Post Listing</a></li>
+      </ul>
+    </li>
+    <li><a href="#creating-top-level-pages">Creating Top Level Pages</a></li>
+    <li><a href="#sharing-templates">Sharing Templates</a>
+      <ul>
+        <li><a href="#create-the-header-and-footer-partials">Create the Header and Footer Partials</a></li>
+        <li><a href="#update-the-home-page-template-to-use-the-partials">Update the Home Page Template to Use the Partials</a></li>
+        <li><a href="#update-the-default-single-template-to-use-the-partials">Update the Default Single Template to Use the Partials</a></li>
+      </ul>
+    </li>
+    <li><a href="#add-date-published-to-posts">Add “Date Published” to Posts</a>
+      <ul>
+        <li><a href="#add-date-published-to-the-template">Add “Date Published” to the Template</a></li>
+        <li><a href="#dont-repeat-yourself">Don&rsquo;t Repeat Yourself</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="introduction">
+  Introduction
+</h2>
+<p>This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&rsquo;t cover using CSS to style your theme.</p>
+<p>We&rsquo;ll start with creating a new site with a very basic template. Then we&rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.</p>
+<p>In this tutorial, commands that you enter will start with the &ldquo;$&rdquo; prompt. The output will follow. Lines that start with &ldquo;#&rdquo; are comments that I&rsquo;ve added to explain a point. When I show updates to a file, the &ldquo;:wq&rdquo; on the last line means to save the file.</p>
+<p>Here&rsquo;s an example:</p>
+<pre tabindex="0"><code>## this is a comment
+$ echo this is a command
+this is a command
+
+## edit the file
+$ vi foo.md
+---
+date: &#34;2014-09-28&#34;
+title: &#34;creating a new theme&#34;
+---
+
+bah and humbug
+:wq
+
+## show it
+$ cat foo.md
+---
+date: &#34;2014-09-28&#34;
+title: &#34;creating a new theme&#34;
+---
+
+bah and humbug
+$
+</code></pre>
+
+<h2 id="some-definitions">
+  Some Definitions
+</h2>
+<p>There are a few concepts that you need to understand before creating a theme.</p>
+
+
+<h3 id="skins">
+  Skins
+</h3>
+<p>Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.</p>
+<p>You have two ways to create a skin. The simplest way is to create it in the <code>layouts/</code> directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the <code>layouts/</code> directory so it will always find the skin.</p>
+<p>Your second choice is to create it in a sub-directory of the <code>themes/</code> directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?</p>
+<p>The difference between creating a skin in <code>layouts/</code> and creating it in <code>themes/</code> is very subtle. A skin in <code>layouts/</code> can’t be customized without updating the templates and static files that it is built from. A skin created in <code>themes/</code>, on the other hand, can be and that makes it easier for other people to use it.</p>
+<p>The rest of this tutorial will call a skin created in the <code>themes/</code> directory a theme.</p>
+<p>Note that you can use this tutorial to create a skin in the <code>layouts/</code> directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.</p>
+
+
+<h3 id="the-home-page">
+  The Home Page
+</h3>
+<p>The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html.</p>
+
+
+<h3 id="site-configuration-file">
+  Site Configuration File
+</h3>
+<p>When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it.</p>
+<p>Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your <code>content/</code> directory and template files in your <code>themes/</code> directory. It will create HTML files in your <code>public/</code> directory. You can change this by specifying alternate locations in the configuration file.</p>
+
+
+<h3 id="content">
+  Content
+</h3>
+<p>Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML.</p>
+
+
+<h4 id="front-matter">
+  Front Matter
+</h4>
+<p>The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or JSON. Unlike the configuration file, Hugo doesn’t use the file’s extension to know the format. It looks for markers to signal the type. TOML is surrounded by “<code>---</code>”, YAML by “<code>---</code>”, and JSON is enclosed in curly braces. I prefer to use TOML, so you’ll need to translate my examples if you prefer YAML or JSON.</p>
+<p>The information in the front matter is passed into the template before the content is rendered into HTML.</p>
+
+
+<h4 id="markdown">
+  Markdown
+</h4>
+<p>Content is written in Markdown which makes it easier to create the content. Hugo runs the content through a Markdown engine to create the HTML which will be written to the output file.</p>
+
+
+<h3 id="template-files">
+  Template Files
+</h3>
+<p>Hugo uses template files to render content into HTML. Template files are a bridge between the content and presentation. Rules in the template define what content is published, where it&rsquo;s published to, and how it will rendered to the HTML file. The template guides the presentation by specifying the style to use.</p>
+<p>There are three types of templates: single, list, and partial. Each type takes a bit of content as input and transforms it based on the commands in the template.</p>
+<p>Hugo uses its knowledge of the content to find the template file used to render the content. If it can’t find a template that is an exact match for the content, it will shift up a level and search from there. It will continue to do so until it finds a matching template or runs out of templates to try. If it can’t find a template, it will use the default template for the site.</p>
+<p>Please note that you can use the front matter to influence Hugo’s choice of templates.</p>
+
+
+<h4 id="single-template">
+  Single Template
+</h4>
+<p>A single template is used to render a single piece of content. For example, an article or post would be a single piece of content and use a single template.</p>
+
+
+<h4 id="list-template">
+  List Template
+</h4>
+<p>A list template renders a group of related content. That could be a summary of recent postings or all articles in a category. List templates can contain multiple groups.</p>
+<p>The homepage template is a special type of list template. Hugo assumes that the home page of your site will act as the portal for the rest of the content in the site.</p>
+
+
+<h4 id="partial-template">
+  Partial Template
+</h4>
+<p>A partial template is a template that can be included in other templates. Partial templates must be called using the “partial” template command. They are very handy for rolling up common behavior. For example, your site may have a banner that all pages use. Instead of copying the text of the banner into every single and list template, you could create a partial with the banner in it. That way if you decide to change the banner, you only have to change the partial template.</p>
+
+
+<h2 id="create-a-new-site">
+  Create a New Site
+</h2>
+<p>Let&rsquo;s use Hugo to create a new web site. I&rsquo;m a Mac user, so I&rsquo;ll create mine in my home directory, in the Sites folder. If you&rsquo;re using Linux, you might have to create the folder first.</p>
+<p>The &ldquo;new site&rdquo; command will create a skeleton of a site. It will give you the basic directory structure and a useable configuration file.</p>
+<pre tabindex="0"><code>$ hugo new site ~/Sites/zafta
+$ cd ~/Sites/zafta
+$ ls -l
+total 8
+drwxr-xr-x  7 quoha  staff  238 Sep 29 16:49 .
+drwxr-xr-x  3 quoha  staff  102 Sep 29 16:49 ..
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+$
+</code></pre><p>Take a look in the content/ directory to confirm that it is empty.</p>
+<p>The other directories (archetypes/, layouts/, and static/) are used when customizing a theme. That&rsquo;s a topic for a different tutorial, so please ignore them for now.</p>
+
+
+<h3 id="generate-the-html-for-the-new-site">
+  Generate the HTML For the New Site
+</h3>
+<p>Running the <code>hugo</code> command with no options will read all the available content and generate the HTML files. It will also copy all static files (that&rsquo;s everything that&rsquo;s not content). Since we have an empty site, it won&rsquo;t do much, but it will do it very quickly.</p>
+<pre tabindex="0"><code>$ hugo --verbose
+INFO: 2014/09/29 Using config file: config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+$
+</code></pre><p>The &ldquo;<code>--verbose</code>&rdquo; flag gives extra information that will be helpful when we build the template. Every line of the output that starts with &ldquo;INFO:&rdquo; or &ldquo;WARN:&rdquo; is present because we used that flag. The lines that start with &ldquo;WARN:&rdquo; are warning messages. We&rsquo;ll go over them later.</p>
+<p>We can verify that the command worked by looking at the directory again.</p>
+<pre tabindex="0"><code>$ ls -l
+total 8
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+$
+</code></pre><p>See that new public/ directory? Hugo placed all generated content there. When you&rsquo;re ready to publish your web site, that&rsquo;s the place to start. For now, though, let&rsquo;s just confirm that we have what we&rsquo;d expect from a site with no content.</p>
+<pre tabindex="0"><code>$ ls -l public
+total 16
+-rw-r--r--  1 quoha  staff  416 Sep 29 17:02 index.xml
+-rw-r--r--  1 quoha  staff  262 Sep 29 17:02 sitemap.xml
+$
+</code></pre><p>Hugo created two XML files, which is standard, but there are no HTML files.</p>
+
+
+<h3 id="test-the-new-site">
+  Test the New Site
+</h3>
+<p>Verify that you can run the built-in web server. It will dramatically shorten your development cycle if you do. Start it by running the &ldquo;server&rdquo; command. If it is successful, you will see output similar to the following:</p>
+<pre tabindex="0"><code>$ hugo server --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+Serving pages from /Users/quoha/Sites/zafta/public
+Web Server is available at http://localhost:1313
+Press Ctrl+C to stop
+</code></pre><p>Connect to the listed URL (it&rsquo;s on the line that starts with &ldquo;Web Server&rdquo;). If everything is working correctly, you should get a page that shows the following:</p>
+<pre tabindex="0"><code>index.xml
+sitemap.xml
+</code></pre><p>That&rsquo;s a listing of your public/ directory. Hugo didn&rsquo;t create a home page because our site has no content. When there&rsquo;s no index.html file in a directory, the server lists the files in the directory, which is what you should see in your browser.</p>
+<p>Let’s go back and look at those warnings again.</p>
+<pre tabindex="0"><code>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+</code></pre><p>That second warning is easier to explain. We haven’t created a template to be used to generate “page not found errors.” The 404 message is a topic for a separate tutorial.</p>
+<p>Now for the first warning. It is for the home page. You can tell because the first layout that it looked for was “index.html.” That’s only used by the home page.</p>
+<p>I like that the verbose flag causes Hugo to list the files that it&rsquo;s searching for. For the home page, they are index.html, _default/list.html, and _default/single.html. There are some rules that we&rsquo;ll cover later that explain the names and paths. For now, just remember that Hugo couldn&rsquo;t find a template for the home page and it told you so.</p>
+<p>At this point, you&rsquo;ve got a working installation and site that we can build upon. All that’s left is to add some content and a theme to display it.</p>
+
+
+<h2 id="create-a-new-theme">
+  Create a New Theme
+</h2>
+<p>Hugo doesn&rsquo;t ship with a default theme. There are a few available (I counted a dozen when I first installed Hugo) and Hugo comes with a command to create new themes.</p>
+<p>We&rsquo;re going to create a new theme called &ldquo;zafta.&rdquo; Since the goal of this tutorial is to show you how to fill out the files to pull in your content, the theme will not contain any CSS. In other words, ugly but functional.</p>
+<p>All themes have opinions on content and layout. For example, Zafta uses &ldquo;post&rdquo; over &ldquo;blog&rdquo;. Strong opinions make for simpler templates but differing opinions make it tougher to use themes. When you build a theme, consider using the terms that other themes do.</p>
+
+
+<h3 id="create-a-skeleton">
+  Create a Skeleton
+</h3>
+<p>Use the hugo &ldquo;new&rdquo; command to create the skeleton of a theme. This creates the directory structure and places empty files for you to fill out.</p>
+<pre tabindex="0"><code>$ hugo new theme zafta
+
+$ ls -l
+total 8
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
+-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
+drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
+drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes
+
+$ find themes -type f | xargs ls -l
+-rw-r--r--  1 quoha  staff  1081 Sep 29 17:31 themes/zafta/LICENSE.md
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/archetypes/default.md
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/index.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+-rw-r--r--  1 quoha  staff    93 Sep 29 17:31 themes/zafta/theme.toml
+$
+</code></pre><p>The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype.</p>
+<p>Please take a minute to fill out the theme.toml and LICENSE.md files. They&rsquo;re optional, but if you&rsquo;re going to be distributing your theme, it tells the world who to praise (or blame). It&rsquo;s also nice to declare the license so that people will know how they can use the theme.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/theme.toml
+author: &#34;michael d henderson&#34;
+description: &#34;a minimal working template&#34;
+license: &#34;MIT&#34;
+name: &#34;zafta&#34;
+source_repo: &#34;&#34;
+tags: [&#34;tags&#34;, &#34;categories&#34;]
+:wq
+
+## also edit themes/zafta/LICENSE.md and change
+## the bit that says &#34;YOUR_NAME_HERE&#34;
+</code></pre><p>Note that the the skeleton&rsquo;s template files are empty. Don&rsquo;t worry, we&rsquo;ll be changing that shortly.</p>
+<pre tabindex="0"><code>$ find themes/zafta -name &#39;*.html&#39; | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/index.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
+$
+</code></pre>
+
+<h3 id="update-the-configuration-file-to-use-the-theme">
+  Update the Configuration File to Use the Theme
+</h3>
+<p>Now that we&rsquo;ve got a theme to work with, it&rsquo;s a good idea to add the theme name to the configuration file. This is optional, because you can always add &ldquo;-t zafta&rdquo; on all your commands. I like to put it the configuration file because I like shorter command lines. If you don&rsquo;t put it in the configuration file or specify it on the command line, you won&rsquo;t use the template that you&rsquo;re expecting to.</p>
+<p>Edit the file to add the theme, add a title for the site, and specify that all of our content will use the TOML format.</p>
+<pre tabindex="0"><code>$ vi config.toml
+theme: &#34;zafta&#34;
+baseurl: &#34;&#34;
+languageCode: &#34;en-us&#34;
+title: &#34;zafta - totally refreshing&#34;
+MetaDataFormat: &#34;toml&#34;
+:wq
+
+$
+</code></pre>
+
+<h3 id="generate-the-site">
+  Generate the Site
+</h3>
+<p>Now that we have an empty theme, let&rsquo;s generate the site again.</p>
+<pre tabindex="0"><code>$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+$
+</code></pre><p>Did you notice that the output is different? The warning message for the home page has disappeared and we have an additional information line saying that Hugo is syncing from the theme&rsquo;s directory.</p>
+<p>Let&rsquo;s check the public/ directory to see what Hugo&rsquo;s created.</p>
+<pre tabindex="0"><code>$ ls -l public
+total 16
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 css
+-rw-r--r--  1 quoha  staff    0 Sep 29 17:56 index.html
+-rw-r--r--  1 quoha  staff  407 Sep 29 17:56 index.xml
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 js
+-rw-r--r--  1 quoha  staff  243 Sep 29 17:56 sitemap.xml
+$
+</code></pre><p>Notice four things:</p>
+<ol>
+<li>Hugo created a home page. This is the file public/index.html.</li>
+<li>Hugo created a css/ directory.</li>
+<li>Hugo created a js/ directory.</li>
+<li>Hugo claimed that it created 0 pages. It created a file and copied over static files, but didn&rsquo;t create any pages. That&rsquo;s because it considers a &ldquo;page&rdquo; to be a file created directly from a content file. It doesn&rsquo;t count things like the index.html files that it creates automatically.</li>
+</ol>
+
+
+<h4 id="the-home-page-1">
+  The Home Page
+</h4>
+<p>Hugo supports many different types of templates. The home page is special because it gets its own type of template and its own template file. The file, layouts/index.html, is used to generate the HTML for the home page. The Hugo documentation says that this is the only required template, but that depends. Hugo&rsquo;s warning message shows that it looks for three different templates:</p>
+<pre tabindex="0"><code>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</code></pre><p>If it can&rsquo;t find any of these, it completely skips creating the home page. We noticed that when we built the site without having a theme installed.</p>
+<p>When Hugo created our theme, it created an empty home page template. Now, when we build the site, Hugo finds the template and uses it to generate the HTML for the home page. Since the template file is empty, the HTML file is empty, too. If the template had any rules in it, then Hugo would have used them to generate the home page.</p>
+<pre tabindex="0"><code>$ find . -name index.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 20:21 ./public/index.html
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 ./themes/zafta/layouts/index.html
+$
+</code></pre>
+
+<h4 id="the-magic-of-static">
+  The Magic of Static
+</h4>
+<p>Hugo does two things when generating the site. It uses templates to transform content into HTML and it copies static files into the site. Unlike content, static files are not transformed. They are copied exactly as they are.</p>
+<p>Hugo assumes that your site will use both CSS and JavaScript, so it creates directories in your theme to hold them. Remember opinions? Well, Hugo&rsquo;s opinion is that you&rsquo;ll store your CSS in a directory named css/ and your JavaScript in a directory named js/. If you don&rsquo;t like that, you can change the directory names in your theme directory or even delete them completely. Hugo&rsquo;s nice enough to offer its opinion, then behave nicely if you disagree.</p>
+<pre tabindex="0"><code>$ find themes/zafta -type d | xargs ls -ld
+drwxr-xr-x  7 quoha  staff  238 Sep 29 17:38 themes/zafta
+drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes/zafta/archetypes
+drwxr-xr-x  5 quoha  staff  170 Sep 29 17:31 themes/zafta/layouts
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/_default
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/partials
+drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/static
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/css
+drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/js
+$
+</code></pre>
+
+<h2 id="the-theme-development-cycle">
+  The Theme Development Cycle
+</h2>
+<p>When you&rsquo;re working on a theme, you will make changes in the theme&rsquo;s directory, rebuild the site, and check your changes in the browser. Hugo makes this very easy:</p>
+<ol>
+<li>Purge the public/ directory.</li>
+<li>Run the built in web server in watch mode.</li>
+<li>Open your site in a browser.</li>
+<li>Update the theme.</li>
+<li>Glance at your browser window to see changes.</li>
+<li>Return to step 4.</li>
+</ol>
+<p>I’ll throw in one more opinion: never work on a theme on a live site. Always work on a copy of your site. Make changes to your theme, test them, then copy them up to your site. For added safety, use a tool like Git to keep a revision history of your content and your theme. Believe me when I say that it is too easy to lose both your mind and your changes.</p>
+<p>Check the main Hugo site for information on using Git with Hugo.</p>
+
+
+<h3 id="purge-the-public-directory">
+  Purge the public/ Directory
+</h3>
+<p>When generating the site, Hugo will create new files and update existing ones in the <code>public/</code> directory. It will not delete files that are no longer used. For example, files that were created in the wrong directory or with the wrong title will remain. If you leave them, you might get confused by them later. I recommend cleaning out your site prior to generating it.</p>
+<p>Note: If you&rsquo;re building on an SSD, you should ignore this. Churning on a SSD can be costly.</p>
+
+
+<h3 id="hugos-watch-option">
+  Hugo&rsquo;s Watch Option
+</h3>
+<p>Hugo&rsquo;s &ldquo;<code>--watch</code>&rdquo; option will monitor the content/ and your theme directories for changes and rebuild the site automatically.</p>
+
+
+<h3 id="live-reload">
+  Live Reload
+</h3>
+<p>Hugo&rsquo;s built in web server supports live reload. As pages are saved on the server, the browser is told to refresh the page. Usually, this happens faster than you can say, &ldquo;Wow, that&rsquo;s totally amazing.&rdquo;</p>
+
+
+<h3 id="development-commands">
+  Development Commands
+</h3>
+<p>Use the following commands as the basis for your workflow.</p>
+<pre tabindex="0"><code>## purge old files. hugo will recreate the public directory.
+##
+$ rm -rf public
+##
+## run hugo in watch mode
+##
+$ hugo server --watch --verbose
+</code></pre><p>Here&rsquo;s sample output showing Hugo detecting a change to the template for the home page. Once generated, the web browser automatically reloaded the page. I&rsquo;ve said this before, it&rsquo;s amazing.</p>
+<pre tabindex="0"><code>$ rm -rf public
+$ hugo server --watch --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+Watching for changes in /Users/quoha/Sites/zafta/content
+Serving pages from /Users/quoha/Sites/zafta/public
+Web Server is available at http://localhost:1313
+Press Ctrl+C to stop
+INFO: 2014/09/29 File System Event: [&#34;/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html&#34;: MODIFY|ATTRIB]
+Change detected, rebuilding site
+
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 1 ms
+</code></pre>
+
+<h2 id="update-the-home-page-template">
+  Update the Home Page Template
+</h2>
+<p>The home page is one of a few special pages that Hugo creates automatically. As mentioned earlier, it looks for one of three files in the theme&rsquo;s layout/ directory:</p>
+<ol>
+<li>index.html</li>
+<li>_default/list.html</li>
+<li>_default/single.html</li>
+</ol>
+<p>We could update one of the default templates, but a good design decision is to update the most specific template available. That&rsquo;s not a hard and fast rule (in fact, we&rsquo;ll break it a few times in this tutorial), but it is a good generalization.</p>
+
+
+<h3 id="make-a-static-home-page">
+  Make a Static Home Page
+</h3>
+<p>Right now, that page is empty because we don&rsquo;t have any content and we don&rsquo;t have any logic in the template. Let&rsquo;s change that by adding some text to the template.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+  &lt;p&gt;hugo says hello!&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+:wq
+
+$
+</code></pre><p>Build the web site and then verify the results.</p>
+<pre tabindex="0"><code>$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+0 pages created
+0 tags created
+0 categories created
+in 2 ms
+
+$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+-rw-r--r--  1 quoha  staff  78 Sep 29 21:26 public/index.html
+
+$ cat public/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+  &lt;p&gt;hugo says hello!&lt;/p&gt;
+&lt;/html&gt;
+</code></pre>
+
+<h4 id="live-reload-1">
+  Live Reload
+</h4>
+<p>Note: If you&rsquo;re running the server with the <code>--watch</code> option, you&rsquo;ll see different content in the file:</p>
+<pre tabindex="0"><code>$ cat public/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+  &lt;p&gt;hugo says hello!&lt;/p&gt;
+&lt;script&gt;document.write(&#39;&lt;script src=&#34;http://&#39;
+        + (location.host || &#39;localhost&#39;).split(&#39;:&#39;)[0]
+    + &#39;:1313/livereload.js?mindelay=10&#34;&gt;&lt;/&#39;
+        + &#39;script&gt;&#39;)&lt;/script&gt;&lt;/body&gt;
+&lt;/html&gt;
+</code></pre><p>When you use <code>--watch</code>, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it.</p>
+
+
+<h3 id="build-a-dynamic-home-page">
+  Build a &ldquo;Dynamic&rdquo; Home Page
+</h3>
+<p>&ldquo;Dynamic home page?&rdquo; Hugo&rsquo;s a static web site generator, so this seems an odd thing to say. I mean let&rsquo;s have the home page automatically reflect the content in the site every time Hugo builds it. We&rsquo;ll use iteration in the template to do that.</p>
+
+
+<h4 id="create-new-posts">
+  Create New Posts
+</h4>
+<p>Now that we have the home page generating static content, let&rsquo;s add some content to the site. We&rsquo;ll display these posts as a list on the home page and on their own page, too.</p>
+<p>Hugo has a command to generate a skeleton post, just like it does for sites and themes.</p>
+<pre tabindex="0"><code>$ hugo --verbose new post/first.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/first.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
+ERROR: 2014/09/29 Unable to Cast &lt;nil&gt; to map[string]interface{}
+
+$
+</code></pre><p>That wasn&rsquo;t very nice, was it?</p>
+<p>The &ldquo;new&rdquo; command uses an archetype to create the post file. Hugo created an empty default archetype file, but that causes an error when there&rsquo;s a theme. For me, the workaround was to create an archetypes file specifically for the post type.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/archetypes/post.md
+---
+Description: &#34;&#34;
+Tags: []
+Categories: []
+---
+:wq
+
+$ find themes/zafta/archetypes -type f | xargs ls -l
+-rw-r--r--  1 quoha  staff   0 Sep 29 21:53 themes/zafta/archetypes/default.md
+-rw-r--r--  1 quoha  staff  51 Sep 29 21:54 themes/zafta/archetypes/post.md
+
+$ hugo --verbose new post/first.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/first.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md
+/Users/quoha/Sites/zafta/content/post/first.md created
+
+$ hugo --verbose new post/second.md
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 attempting to create  post/second.md of post
+INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md
+/Users/quoha/Sites/zafta/content/post/second.md created
+
+$ ls -l content/post
+total 16
+-rw-r--r--  1 quoha  staff  104 Sep 29 21:54 first.md
+-rw-r--r--  1 quoha  staff  105 Sep 29 21:57 second.md
+
+$ cat content/post/first.md
+---
+Categories: []
+Description: &#34;&#34;
+Tags: []
+date: &#34;2014-09-29T21:54:53-05:00&#34;
+title: &#34;first&#34;
+
+---
+my first post
+
+$ cat content/post/second.md
+---
+Categories: []
+Description: &#34;&#34;
+Tags: []
+date: &#34;2014-09-29T21:57:09-05:00&#34;
+title: &#34;second&#34;
+
+---
+my second post
+
+$
+</code></pre><p>Build the web site and then verify the results.</p>
+<pre tabindex="0"><code>$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{&#34;category&#34;:&#34;categories&#34;, &#34;tag&#34;:&#34;tags&#34;}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+$
+</code></pre><p>The output says that it created 2 pages. Those are our new posts:</p>
+<pre tabindex="0"><code>$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+-rw-r--r--  1 quoha  staff  78 Sep 29 22:13 public/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/first/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/second/index.html
+$
+</code></pre><p>The new files are empty because because the templates used to generate the content are empty. The homepage doesn&rsquo;t show the new content, either. We have to update the templates to add the posts.</p>
+
+
+<h3 id="list-and-single-templates">
+  List and Single Templates
+</h3>
+<p>In Hugo, we have three major kinds of templates. There&rsquo;s the home page template that we updated previously. It is used only by the home page. We also have &ldquo;single&rdquo; templates which are used to generate output for a single content file. We also have &ldquo;list&rdquo; templates that are used to group multiple pieces of content before generating output.</p>
+<p>Generally speaking, list templates are named &ldquo;list.html&rdquo; and single templates are named &ldquo;single.html.&rdquo;</p>
+<p>There are three other types of templates: partials, content views, and terms. We will not go into much detail on these.</p>
+
+
+<h3 id="add-content-to-the-homepage">
+  Add Content to the Homepage
+</h3>
+<p>The home page will contain a list of posts. Let&rsquo;s update its template to add the posts that we just created. The logic in the template will run every time we build the site.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+  {{ range first 10 .Data.Pages }}
+    &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+  {{ end }}
+&lt;/body&gt;
+&lt;/html&gt;
+:wq
+
+$
+</code></pre><p>Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between &ldquo;{{&rdquo; and &ldquo;}}&rdquo;. In our template, the commands are:</p>
+<ol>
+<li>range</li>
+<li>.Title</li>
+<li>end</li>
+</ol>
+<p>The &ldquo;range&rdquo; command is an iterator. We&rsquo;re going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created.</p>
+<p>The &ldquo;.Title&rdquo; command prints the value of the &ldquo;title&rdquo; variable. Hugo pulls it from the front matter in the Markdown file.</p>
+<p>The &ldquo;end&rdquo; command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds &ldquo;end.&rdquo; Everything between the &ldquo;range&rdquo; and &ldquo;end&rdquo; is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one.</p>
+<p>It&rsquo;s helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files.</p>
+<p>Build the web site and then verify the results.</p>
+<pre tabindex="0"><code>$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{&#34;tag&#34;:&#34;tags&#34;, &#34;category&#34;:&#34;categories&#34;}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+-rw-r--r--  1 quoha  staff  94 Sep 29 22:23 public/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/first/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/index.html
+-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/second/index.html
+$ cat public/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+
+    &lt;h1&gt;second&lt;/h1&gt;
+
+    &lt;h1&gt;first&lt;/h1&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+$
+</code></pre><p>Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let&rsquo;s take a moment to appreciate what we&rsquo;ve done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you&rsquo;ve learned everything you need to know to build a theme. All that&rsquo;s really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine.</p>
+<p>And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don&rsquo;t worry, though, that&rsquo;s all to come.</p>
+
+
+<h3 id="add-content-to-the-posts">
+  Add Content to the Posts
+</h3>
+<p>We&rsquo;re working with posts, which are in the content/post/ directory. That means that their section is &ldquo;post&rdquo; (and if we don&rsquo;t do something weird, their type is also &ldquo;post&rdquo;).</p>
+<p>Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can&rsquo;t find one, then it will look in the _default/ directory. There are some twists that we&rsquo;ll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html.</p>
+<p>Now that we know the search rule, let&rsquo;s see what we actually have available:</p>
+<pre tabindex="0"><code>$ find themes/zafta -name single.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  132 Sep 29 17:31 themes/zafta/layouts/_default/single.html
+</code></pre><p>We could create a new template, post/single.html, or change the default. Since we don&rsquo;t know of any other content types, let&rsquo;s start with updating the default.</p>
+<p>Remember, any content that we haven&rsquo;t created a template for will end up using this template. That can be good or bad. Bad because I know that we&rsquo;re going to be adding different types of content and we&rsquo;re going to end up undoing some of the changes we&rsquo;ve made. It&rsquo;s good because we&rsquo;ll be able to see immediate results. It&rsquo;s also good to start here because we can start to build the basic layout for the site. As we add more content types, we&rsquo;ll refactor this file and move logic around. Hugo makes that fairly painless, so we&rsquo;ll accept the cost and proceed.</p>
+<p>Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you&rsquo;re building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That&rsquo;s a refreshing amount of joy right there.</p>
+
+
+<h4 id="update-the-template-file">
+  Update the Template File
+</h4>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/_default/single.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;{{ .Title }}&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+  {{ .Content }}
+&lt;/body&gt;
+&lt;/html&gt;
+:wq
+
+$
+</code></pre><p>Build the web site and verify the results.</p>
+<pre tabindex="0"><code>$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{&#34;tag&#34;:&#34;tags&#34;, &#34;category&#34;:&#34;categories&#34;}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+
+$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+-rw-r--r--  1 quoha  staff   94 Sep 29 22:40 public/index.html
+-rw-r--r--  1 quoha  staff  125 Sep 29 22:40 public/post/first/index.html
+-rw-r--r--  1 quoha  staff    0 Sep 29 22:40 public/post/index.html
+-rw-r--r--  1 quoha  staff  128 Sep 29 22:40 public/post/second/index.html
+
+$ cat public/post/first/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;first&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;first&lt;/h1&gt;
+  &lt;p&gt;my first post&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+
+$ cat public/post/second/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;second&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;second&lt;/h1&gt;
+  &lt;p&gt;my second post&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+$
+</code></pre><p>Notice that the posts now have content. You can go to localhost:1313/post/first to verify.</p>
+
+
+<h3 id="linking-to-content">
+  Linking to Content
+</h3>
+<p>The posts are on the home page. Let&rsquo;s add a link from there to the post. Since this is the home page, we&rsquo;ll update its template.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+  {{ range first 10 .Data.Pages }}
+    &lt;h1&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h1&gt;
+  {{ end }}
+&lt;/body&gt;
+&lt;/html&gt;
+</code></pre><p>Build the web site and verify the results.</p>
+<pre tabindex="0"><code>$ rm -rf public
+$ hugo --verbose
+INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+INFO: 2014/09/29 found taxonomies: map[string]string{&#34;tag&#34;:&#34;tags&#34;, &#34;category&#34;:&#34;categories&#34;}
+WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
+0 draft content
+0 future content
+2 pages created
+0 tags created
+0 categories created
+in 4 ms
+
+$ find public -type f -name &#39;*.html&#39; | xargs ls -l
+-rw-r--r--  1 quoha  staff  149 Sep 29 22:44 public/index.html
+-rw-r--r--  1 quoha  staff  125 Sep 29 22:44 public/post/first/index.html
+-rw-r--r--  1 quoha  staff    0 Sep 29 22:44 public/post/index.html
+-rw-r--r--  1 quoha  staff  128 Sep 29 22:44 public/post/second/index.html
+
+$ cat public/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+
+    &lt;h1&gt;&lt;a href=&#34;/post/second/&#34;&gt;second&lt;/a&gt;&lt;/h1&gt;
+
+    &lt;h1&gt;&lt;a href=&#34;/post/first/&#34;&gt;first&lt;/a&gt;&lt;/h1&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+
+$
+</code></pre>
+
+<h3 id="create-a-post-listing">
+  Create a Post Listing
+</h3>
+<p>We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let&rsquo;s make it show a list of all posts (not just the first ten).</p>
+<p>We need to decide which template to update. This will be a listing, so it should be a list template. Let&rsquo;s take a quick look and see which list templates are available.</p>
+<pre tabindex="0"><code>$ find themes/zafta -name list.html | xargs ls -l
+-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
+</code></pre><p>As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don&rsquo;t have multiple content types, so let&rsquo;s stay consistent and update the default list template.</p>
+
+
+<h2 id="creating-top-level-pages">
+  Creating Top Level Pages
+</h2>
+<p>Let&rsquo;s add an &ldquo;about&rdquo; page and display it at the top level (as opposed to a sub-level like we did with posts).</p>
+<p>The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let&rsquo;s verify that by creating an &ldquo;about&rdquo; page at the top level:</p>
+<pre tabindex="0"><code>$ vi content/about.md
+---
+title: &#34;about&#34;
+description: &#34;about this site&#34;
+date: &#34;2014-09-27&#34;
+slug: &#34;about time&#34;
+---
+
+## about us
+
+i&#39;m speechless
+:wq
+</code></pre><p>Generate the web site and verify the results.</p>
+<pre tabindex="0"><code>$ find public -name &#39;*.html&#39; | xargs ls -l
+-rw-rw-r--  1 mdhender  staff   334 Sep 27 15:08 public/about-time/index.html
+-rw-rw-r--  1 mdhender  staff   527 Sep 27 15:08 public/index.html
+-rw-rw-r--  1 mdhender  staff   358 Sep 27 15:08 public/post/first-post/index.html
+-rw-rw-r--  1 mdhender  staff     0 Sep 27 15:08 public/post/index.html
+-rw-rw-r--  1 mdhender  staff   342 Sep 27 15:08 public/post/second-post/index.html
+</code></pre><p>Notice that the page wasn&rsquo;t created at the top level. It was created in a sub-directory named &lsquo;about-time/&rsquo;. That name came from our slug. Hugo will use the slug to name the generated content. It&rsquo;s a reasonable default, by the way, but we can learn a few things by fighting it for this file.</p>
+<p>One other thing. Take a look at the home page.</p>
+<pre tabindex="0"><code>$ cat public/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+    &lt;h1&gt;&lt;a href=&#34;http://localhost:1313/post/theme/&#34;&gt;creating a new theme&lt;/a&gt;&lt;/h1&gt;
+    &lt;h1&gt;&lt;a href=&#34;http://localhost:1313/about-time/&#34;&gt;about&lt;/a&gt;&lt;/h1&gt;
+    &lt;h1&gt;&lt;a href=&#34;http://localhost:1313/post/second-post/&#34;&gt;second&lt;/a&gt;&lt;/h1&gt;
+    &lt;h1&gt;&lt;a href=&#34;http://localhost:1313/post/first-post/&#34;&gt;first&lt;/a&gt;&lt;/h1&gt;
+&lt;script&gt;document.write(&#39;&lt;script src=&#34;http://&#39;
+        + (location.host || &#39;localhost&#39;).split(&#39;:&#39;)[0]
+		+ &#39;:1313/livereload.js?mindelay=10&#34;&gt;&lt;/&#39;
+        + &#39;script&gt;&#39;)&lt;/script&gt;&lt;/body&gt;
+&lt;/html&gt;
+</code></pre><p>Notice that the &ldquo;about&rdquo; link is listed with the posts? That&rsquo;s not desirable, so let&rsquo;s change that first.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+  &lt;h1&gt;posts&lt;/h1&gt;
+  {{ range first 10 .Data.Pages }}
+    {{ if eq .Type &#34;post&#34;}}
+      &lt;h2&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+    {{ end }}
+  {{ end }}
+
+  &lt;h1&gt;pages&lt;/h1&gt;
+  {{ range .Data.Pages }}
+    {{ if eq .Type &#34;page&#34; }}
+      &lt;h2&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+    {{ end }}
+  {{ end }}
+&lt;/body&gt;
+&lt;/html&gt;
+:wq
+</code></pre><p>Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it.</p>
+<p>But, that about page still renders to about-time/index.html.</p>
+<pre tabindex="0"><code>$ find public -name &#39;*.html&#39; | xargs ls -l
+-rw-rw-r--  1 mdhender  staff    334 Sep 27 15:33 public/about-time/index.html
+-rw-rw-r--  1 mdhender  staff    645 Sep 27 15:33 public/index.html
+-rw-rw-r--  1 mdhender  staff    358 Sep 27 15:33 public/post/first-post/index.html
+-rw-rw-r--  1 mdhender  staff      0 Sep 27 15:33 public/post/index.html
+-rw-rw-r--  1 mdhender  staff    342 Sep 27 15:33 public/post/second-post/index.html
+</code></pre><p>Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let&rsquo;s do it the hard way and change the permalink in the configuration file.</p>
+<pre tabindex="0"><code>$ vi config.toml
+[permalinks]
+	page: &#34;/:title/&#34;
+	about: &#34;/:filename/&#34;
+</code></pre><p>Generate the web site and verify that this didn&rsquo;t work. Hugo lets &ldquo;slug&rdquo; or &ldquo;URL&rdquo; override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place.</p>
+
+
+<h2 id="sharing-templates">
+  Sharing Templates
+</h2>
+<p>If you&rsquo;ve been following along, you probably noticed that posts have titles in the browser and the home page doesn&rsquo;t. That&rsquo;s because we didn&rsquo;t put the title in the home page&rsquo;s template (layouts/index.html). That&rsquo;s an easy thing to do, but let&rsquo;s look at a different option.</p>
+<p>We can put the common bits into a shared template that&rsquo;s stored in the themes/zafta/layouts/partials/ directory.</p>
+
+
+<h3 id="create-the-header-and-footer-partials">
+  Create the Header and Footer Partials
+</h3>
+<p>In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme&rsquo;s presentation.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/partials/header.html
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+	&lt;title&gt;{{ .Title }}&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+:wq
+
+$ vi themes/zafta/layouts/partials/footer.html
+&lt;/body&gt;
+&lt;/html&gt;
+:wq
+</code></pre>
+
+<h3 id="update-the-home-page-template-to-use-the-partials">
+  Update the Home Page Template to Use the Partials
+</h3>
+<p>The most noticeable difference between a template call and a partials call is the lack of path:</p>
+<pre tabindex="0"><code>{{ template &#34;theme/partials/header.html&#34; . }}
+</code></pre><p>versus</p>
+<pre tabindex="0"><code>{{ partial &#34;header.html&#34; . }}
+</code></pre><p>Both pass in the context.</p>
+<p>Let&rsquo;s change the home page template to use these new partials.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
+{{ partial &#34;header.html&#34; . }}
+
+  &lt;h1&gt;posts&lt;/h1&gt;
+  {{ range first 10 .Data.Pages }}
+    {{ if eq .Type &#34;post&#34;}}
+      &lt;h2&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
+    {{ end }}
+  {{ end }}
+
+  &lt;h1&gt;pages&lt;/h1&gt;
+  {{ range .Data.Pages }}
+    {{ if or (eq .Type &#34;page&#34;) (eq .Type &#34;about&#34;) }}
+      &lt;h2&gt;&lt;a href=&#34;{{ .Permalink }}&#34;&gt;{{ .Type }} - {{ .Title }} - {{ .RelPermalink }}&lt;/a&gt;&lt;/h2&gt;
+    {{ end }}
+  {{ end }}
+
+{{ partial &#34;footer.html&#34; . }}
+:wq
+</code></pre><p>Generate the web site and verify the results. The title on the home page is now &ldquo;your title here&rdquo;, which comes from the &ldquo;title&rdquo; variable in the config.toml file.</p>
+
+
+<h3 id="update-the-default-single-template-to-use-the-partials">
+  Update the Default Single Template to Use the Partials
+</h3>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/_default/single.html
+{{ partial &#34;header.html&#34; . }}
+
+  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+  {{ .Content }}
+
+{{ partial &#34;footer.html&#34; . }}
+:wq
+</code></pre><p>Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file.</p>
+
+
+<h2 id="add-date-published-to-posts">
+  Add “Date Published” to Posts
+</h2>
+<p>It&rsquo;s common to have posts display the date that they were written or published, so let&rsquo;s add that. The front matter of our posts has a variable named &ldquo;date.&rdquo; It&rsquo;s usually the date the content was created, but let&rsquo;s pretend that&rsquo;s the value we want to display.</p>
+
+
+<h3 id="add-date-published-to-the-template">
+  Add “Date Published” to the Template
+</h3>
+<p>We&rsquo;ll start by updating the template used to render the posts. The template code will look like:</p>
+<pre tabindex="0"><code>{{ .Date.Format &#34;Mon, Jan 2, 2006&#34; }}
+</code></pre><p>Posts use the default single template, so we&rsquo;ll change that file.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/_default/single.html
+{{ partial &#34;header.html&#34; . }}
+
+  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+  &lt;h2&gt;{{ .Date.Format &#34;Mon, Jan 2, 2006&#34; }}&lt;/h2&gt;
+  {{ .Content }}
+
+{{ partial &#34;footer.html&#34; . }}
+:wq
+</code></pre><p>Generate the web site and verify the results. The posts now have the date displayed in them. There&rsquo;s a problem, though. The &ldquo;about&rdquo; page also has the date displayed.</p>
+<p>As usual, there are a couple of ways to make the date display only on posts. We could do an &ldquo;if&rdquo; statement like we did on the home page. Another way would be to create a separate template for posts.</p>
+<p>The &ldquo;if&rdquo; solution works for sites that have just a couple of content types. It aligns with the principle of &ldquo;code for today,&rdquo; too.</p>
+<p>Let&rsquo;s assume, though, that we&rsquo;ve made our site so complex that we feel we have to create a new template type. In Hugo-speak, we&rsquo;re going to create a section template.</p>
+<p>Let&rsquo;s restore the default single template before we forget.</p>
+<pre tabindex="0"><code>$ mkdir themes/zafta/layouts/post
+$ vi themes/zafta/layouts/_default/single.html
+{{ partial &#34;header.html&#34; . }}
+
+  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+  {{ .Content }}
+
+{{ partial &#34;footer.html&#34; . }}
+:wq
+</code></pre><p>Now we&rsquo;ll update the post&rsquo;s version of the single template. If you remember Hugo&rsquo;s rules, the template engine will use this version over the default.</p>
+<pre tabindex="0"><code>$ vi themes/zafta/layouts/post/single.html
+{{ partial &#34;header.html&#34; . }}
+
+  &lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+  &lt;h2&gt;{{ .Date.Format &#34;Mon, Jan 2, 2006&#34; }}&lt;/h2&gt;
+  {{ .Content }}
+
+{{ partial &#34;footer.html&#34; . }}
+:wq
+</code></pre><p>Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn&rsquo;t.</p>
+
+
+<h3 id="dont-repeat-yourself">
+  Don&rsquo;t Repeat Yourself
+</h3>
+<p>DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you&rsquo;re figuring that out, accept that you&rsquo;ll be doing some refactoring. Hugo makes that easy and fast, so it&rsquo;s okay to delay splitting up a template.</p>
+
+   <div class="time">
+     <time datetime="2021-10-22">2021-10-22&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 34 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/posts/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  <a href="https://github.com/ntk148v/shibui">shibui</a>
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/posts/diagrams/index.html b/homepage/public/posts/diagrams/index.html
new file mode 100644
index 0000000..0df77c7
--- /dev/null
+++ b/homepage/public/posts/diagrams/index.html
@@ -0,0 +1,3132 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Hugo Diagrams | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/posts/diagrams/" />
+
+
+<meta property="og:title" content="Hugo Diagrams" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/posts/diagrams/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Hugo Diagrams" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Hugo Diagrams",
+    "url": "http:\/\/localhost:1313\/posts\/diagrams\/",
+    "datePublished": "2022-10-25T17:12:11\u002b07:00",
+    "dateModified": "2022-10-25T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/posts/">Posts</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/posts/diagrams/">Hugo Diagrams</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Hugo Diagrams</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+        <li><a href="/tags/tech/">#Tech</a></li>
+        <li><a href="/tags/diagrams/">#Diagrams</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ul>
+    <li><a href="#goat-diagrams-ascii">GoAT Diagrams (Ascii)</a></li>
+    <li><a href="#goat-diagrams-examples">GoAT Diagrams Examples</a>
+      <ul>
+        <li><a href="#graphics">Graphics</a></li>
+        <li><a href="#complex">Complex</a></li>
+        <li><a href="#process">Process</a></li>
+        <li><a href="#file-tree">File tree</a></li>
+        <li><a href="#sequence-diagram">Sequence Diagram</a></li>
+        <li><a href="#flowchart">Flowchart</a></li>
+        <li><a href="#table">Table</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   <p>Hugo version &gt;= 0.93.0</p>
+
+
+<h2 id="goat-diagrams-ascii">
+  GoAT Diagrams (Ascii)
+</h2>
+<p>Hugo! supports <a href="https://github.com/bep/goat">GoAT</a> natively. This means that this code block:</p>
+<pre tabindex="0"><code>```goat
+      .               .                .               .--- 1          .-- 1     / 1
+     / \              |                |           .---+            .-+         +
+    /   \         .---+---.         .--+--.        |   &#39;--- 2      |   &#39;-- 2   / \ 2
+   +     +        |       |        |       |    ---+            ---+          +
+  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
+ /   \ /   \    |   |   |   |    |   |   |   |     &#39;---+            &#39;-+         +
+ 1   2 3   4    1   2   3   4    1   2   3   4         &#39;--- 4          &#39;-- 4     \ 4
+
+```
+</code></pre><p>Will be rendered as:</p>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 712 137"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 472,16 L 496,16' fill='none' stroke='currentColor'></path>
+<path d='M 608,16 L 616,16' fill='none' stroke='currentColor'></path>
+<path d='M 440,32 L 472,32' fill='none' stroke='currentColor'></path>
+<path d='M 584,32 L 592,32' fill='none' stroke='currentColor'></path>
+<path d='M 176,48 L 208,48' fill='none' stroke='currentColor'></path>
+<path d='M 208,48 L 240,48' fill='none' stroke='currentColor'></path>
+<path d='M 328,48 L 344,48' fill='none' stroke='currentColor'></path>
+<path d='M 344,48 L 360,48' fill='none' stroke='currentColor'></path>
+<path d='M 472,48 L 496,48' fill='none' stroke='currentColor'></path>
+<path d='M 608,48 L 616,48' fill='none' stroke='currentColor'></path>
+<path d='M 416,64 L 440,64' fill='none' stroke='currentColor'></path>
+<path d='M 544,64 L 568,64' fill='none' stroke='currentColor'></path>
+<path d='M 160,80 L 176,80' fill='none' stroke='currentColor'></path>
+<path d='M 176,80 L 192,80' fill='none' stroke='currentColor'></path>
+<path d='M 224,80 L 240,80' fill='none' stroke='currentColor'></path>
+<path d='M 240,80 L 256,80' fill='none' stroke='currentColor'></path>
+<path d='M 472,80 L 496,80' fill='none' stroke='currentColor'></path>
+<path d='M 608,80 L 616,80' fill='none' stroke='currentColor'></path>
+<path d='M 440,96 L 472,96' fill='none' stroke='currentColor'></path>
+<path d='M 584,96 L 592,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,112 L 496,112' fill='none' stroke='currentColor'></path>
+<path d='M 608,112 L 616,112' fill='none' stroke='currentColor'></path>
+<path d='M 160,80 L 160,96' fill='none' stroke='currentColor'></path>
+<path d='M 176,48 L 176,80' fill='none' stroke='currentColor'></path>
+<path d='M 192,80 L 192,96' fill='none' stroke='currentColor'></path>
+<path d='M 208,16 L 208,48' fill='none' stroke='currentColor'></path>
+<path d='M 224,80 L 224,96' fill='none' stroke='currentColor'></path>
+<path d='M 240,48 L 240,80' fill='none' stroke='currentColor'></path>
+<path d='M 256,80 L 256,96' fill='none' stroke='currentColor'></path>
+<path d='M 312,64 L 312,80' fill='none' stroke='currentColor'></path>
+<path d='M 344,16 L 344,48' fill='none' stroke='currentColor'></path>
+<path d='M 376,64 L 376,80' fill='none' stroke='currentColor'></path>
+<path d='M 440,32 L 440,64' fill='none' stroke='currentColor'></path>
+<path d='M 440,64 L 440,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,16 L 472,32' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 472,48' fill='none' stroke='currentColor'></path>
+<path d='M 472,80 L 472,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,96 L 472,112' fill='none' stroke='currentColor'></path>
+<path d='M 568,48 L 568,64' fill='none' stroke='currentColor'></path>
+<path d='M 568,64 L 568,80' fill='none' stroke='currentColor'></path>
+<path d='M 40,96 L 56,64' fill='none' stroke='currentColor'></path>
+<path d='M 56,64 L 80,16' fill='none' stroke='currentColor'></path>
+<path d='M 88,96 L 104,64' fill='none' stroke='currentColor'></path>
+<path d='M 656,64 L 672,32' fill='none' stroke='currentColor'></path>
+<path d='M 672,32 L 680,16' fill='none' stroke='currentColor'></path>
+<path d='M 672,96 L 680,80' fill='none' stroke='currentColor'></path>
+<path d='M 56,64 L 72,96' fill='none' stroke='currentColor'></path>
+<path d='M 80,16 L 104,64' fill='none' stroke='currentColor'></path>
+<path d='M 104,64 L 120,96' fill='none' stroke='currentColor'></path>
+<path d='M 656,64 L 672,96' fill='none' stroke='currentColor'></path>
+<path d='M 672,96 L 680,112' fill='none' stroke='currentColor'></path>
+<path d='M 672,32 L 680,48' fill='none' stroke='currentColor'></path>
+<path d='M 608,16 A 16,16 0 0,0 592,32' fill='none' stroke='currentColor'></path>
+<path d='M 584,32 A 16,16 0 0,0 568,48' fill='none' stroke='currentColor'></path>
+<path d='M 328,48 A 16,16 0 0,0 312,64' fill='none' stroke='currentColor'></path>
+<path d='M 360,48 A 16,16 0 0,1 376,64' fill='none' stroke='currentColor'></path>
+<path d='M 592,32 A 16,16 0 0,0 608,48' fill='none' stroke='currentColor'></path>
+<path d='M 312,80 A 16,16 0 0,0 296,96' fill='none' stroke='currentColor'></path>
+<path d='M 312,80 A 16,16 0 0,1 328,96' fill='none' stroke='currentColor'></path>
+<path d='M 376,80 A 16,16 0 0,0 360,96' fill='none' stroke='currentColor'></path>
+<path d='M 376,80 A 16,16 0 0,1 392,96' fill='none' stroke='currentColor'></path>
+<path d='M 608,80 A 16,16 0 0,0 592,96' fill='none' stroke='currentColor'></path>
+<path d='M 568,80 A 16,16 0 0,0 584,96' fill='none' stroke='currentColor'></path>
+<path d='M 592,96 A 16,16 0 0,0 608,112' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='88' y='116' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='160' y='116' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='192' y='116' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='224' y='116' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='256' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='296' y='116' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='328' y='116' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='360' y='116' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='392' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='512' y='20' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='512' y='52' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='512' y='84' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='512' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='632' y='20' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='632' y='52' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='632' y='84' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='632' y='116' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='696' y='20' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='696' y='52' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='696' y='84' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='696' y='116' fill='currentColor' style='font-size:1em'>4</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h2 id="goat-diagrams-examples">
+  GoAT Diagrams Examples
+</h2>
+
+
+<h3 id="graphics">
+  Graphics
+</h3>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 712 185"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 40,32 L 104,32' fill='none' stroke='currentColor'></path>
+<path d='M 24,64 L 88,64' fill='none' stroke='currentColor'></path>
+<path d='M 520,64 L 584,64' fill='none' stroke='currentColor'></path>
+<path d='M 584,64 L 648,64' fill='none' stroke='currentColor'></path>
+<path d='M 320,80 L 352,80' fill='none' stroke='currentColor'></path>
+<path d='M 368,80 L 408,80' fill='none' stroke='currentColor'></path>
+<path d='M 40,96 L 80,96' fill='none' stroke='currentColor'></path>
+<path d='M 96,96 L 104,96' fill='none' stroke='currentColor'></path>
+<path d='M 168,96 L 216,96' fill='none' stroke='currentColor'></path>
+<path d='M 528,96 L 592,96' fill='none' stroke='currentColor'></path>
+<path d='M 24,128 L 88,128' fill='none' stroke='currentColor'></path>
+<path d='M 288,144 L 440,144' fill='none' stroke='currentColor'></path>
+<path d='M 640,144 L 688,144' fill='none' stroke='currentColor'></path>
+<path d='M 24,64 L 24,128' fill='none' stroke='currentColor'></path>
+<path d='M 40,32 L 40,48' fill='none' stroke='currentColor'></path>
+<path d='M 40,80 L 40,96' fill='none' stroke='currentColor'></path>
+<path d='M 88,64 L 88,128' fill='none' stroke='currentColor'></path>
+<path d='M 104,32 L 104,96' fill='none' stroke='currentColor'></path>
+<path d='M 168,48 L 168,96' fill='none' stroke='currentColor'></path>
+<path d='M 504,128 L 504,160' fill='none' stroke='currentColor'></path>
+<path d='M 24,64 L 40,32' fill='none' stroke='currentColor'></path>
+<path d='M 24,128 L 40,96' fill='none' stroke='currentColor'></path>
+<path d='M 88,64 L 104,32' fill='none' stroke='currentColor'></path>
+<path d='M 88,128 L 104,96' fill='none' stroke='currentColor'></path>
+<path d='M 152,128 L 168,96' fill='none' stroke='currentColor'></path>
+<path d='M 288,144 L 320,80' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 480,16' fill='none' stroke='currentColor'></path>
+<path d='M 504,128 L 520,96' fill='none' stroke='currentColor'></path>
+<path d='M 592,48 L 616,0' fill='none' stroke='currentColor'></path>
+<path d='M 640,144 L 664,96' fill='none' stroke='currentColor'></path>
+<path d='M 328,16 L 368,96' fill='none' stroke='currentColor'></path>
+<path d='M 408,80 L 440,144' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 480,48' fill='none' stroke='currentColor'></path>
+<path d='M 560,16 L 584,64' fill='none' stroke='currentColor'></path>
+<path d='M 664,96 L 688,144' fill='none' stroke='currentColor'></path>
+<path d='M 40,48 L 40,56' fill='none' stroke='currentColor'></path>
+<path d='M 40,72 L 40,80' fill='none' stroke='currentColor'></path>
+<polygon points='164.000000,128.000000 152.000000,122.400002 152.000000,133.600006' fill='currentColor' transform='rotate(120.000000, 152.000000, 128.000000)'></polygon>
+<polygon points='176.000000,48.000000 164.000000,42.400002 164.000000,53.599998' fill='currentColor' transform='rotate(270.000000, 168.000000, 48.000000)'></polygon>
+<polygon points='224.000000,96.000000 212.000000,90.400002 212.000000,101.599998' fill='currentColor' transform='rotate(0.000000, 216.000000, 96.000000)'></polygon>
+<polygon points='380.000000,96.000000 368.000000,90.400002 368.000000,101.599998' fill='currentColor' transform='rotate(60.000000, 368.000000, 96.000000)'></polygon>
+<polygon points='512.000000,160.000000 500.000000,154.399994 500.000000,165.600006' fill='currentColor' transform='rotate(90.000000, 504.000000, 160.000000)'></polygon>
+<polygon points='536.000000,96.000000 524.000000,90.400002 524.000000,101.599998' fill='currentColor' transform='rotate(180.000000, 528.000000, 96.000000)'></polygon>
+<polygon points='572.000000,16.000000 560.000000,10.400000 560.000000,21.600000' fill='currentColor' transform='rotate(240.000000, 560.000000, 16.000000)'></polygon>
+<polygon points='604.000000,48.000000 592.000000,42.400002 592.000000,53.599998' fill='currentColor' transform='rotate(120.000000, 592.000000, 48.000000)'></polygon>
+<path d='M 512,96 A 16,16 0 0,0 496,112' fill='none' stroke='currentColor'></path>
+<path d='M 512,96 A 16,16 0 0,1 528,112' fill='none' stroke='currentColor'></path>
+<path d='M 496,112 A 16,16 0 0,0 512,128' fill='none' stroke='currentColor'></path>
+<path d='M 528,112 A 16,16 0 0,1 512,128' fill='none' stroke='currentColor'></path>
+<circle cx='24' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='24' cy='128' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='40' cy='32' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='40' cy='96' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='88' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='88' cy='128' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='104' cy='32' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='104' cy='96' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='288' cy='144' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='320' cy='80' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='328' cy='16' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='376' cy='112' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='408' cy='80' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='440' cy='144' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='584' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='640' cy='144' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='664' cy='96' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='688' cy='144' r='6' stroke='currentColor' fill='#fff'></circle>
+<text text-anchor='middle' x='16' y='52' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='16' y='148' fill='currentColor' style='font-size:1em'>5</text>
+<text text-anchor='middle' x='32' y='20' fill='currentColor' style='font-size:1em'>0</text>
+<text text-anchor='middle' x='48' y='84' fill='currentColor' style='font-size:1em'>4</text>
+<text text-anchor='middle' x='80' y='52' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='80' y='148' fill='currentColor' style='font-size:1em'>6</text>
+<text text-anchor='middle' x='96' y='20' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='112' y='84' fill='currentColor' style='font-size:1em'>7</text>
+<text text-anchor='middle' x='136' y='148' fill='currentColor' style='font-size:1em'>+</text>
+<text text-anchor='middle' x='144' y='148' fill='currentColor' style='font-size:1em'>z</text>
+<text text-anchor='middle' x='160' y='36' fill='currentColor' style='font-size:1em'>+</text>
+<text text-anchor='middle' x='168' y='36' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='232' y='100' fill='currentColor' style='font-size:1em'>+</text>
+<text text-anchor='middle' x='240' y='100' fill='currentColor' style='font-size:1em'>x</text>
+<text text-anchor='middle' x='264' y='148' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='272' y='148' fill='currentColor' style='font-size:1em'>1</text>
+<text text-anchor='middle' x='304' y='68' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='312' y='20' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='312' y='68' fill='currentColor' style='font-size:1em'>0</text>
+<text text-anchor='middle' x='384' y='100' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='416' y='68' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='424' y='68' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='448' y='20' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='456' y='20' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='456' y='148' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='464' y='20' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='464' y='148' fill='currentColor' style='font-size:1em'>2</text>
+<text text-anchor='middle' x='544' y='116' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='552' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='560' y='116' fill='currentColor' style='font-size:1em'>f</text>
+<text text-anchor='middle' x='568' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='576' y='116' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='584' y='116' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='592' y='116' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='600' y='116' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='608' y='116' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='616' y='116' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='624' y='36' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='632' y='36' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='640' y='36' fill='currentColor' style='font-size:1em'>f</text>
+<text text-anchor='middle' x='648' y='36' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='656' y='36' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='664' y='36' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='672' y='36' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='680' y='36' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='688' y='36' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='696' y='36' fill='currentColor' style='font-size:1em'>n</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="complex">
+  Complex
+</h3>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 752 393"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 0,0 L 160,0' fill='none' stroke='currentColor'></path>
+<path d='M 568,0 L 600,0' fill='none' stroke='currentColor'></path>
+<path d='M 184,16 L 208,16' fill='none' stroke='currentColor'></path>
+<path d='M 280,16 L 304,16' fill='none' stroke='currentColor'></path>
+<path d='M 232,32 L 256,32' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 496,32' fill='none' stroke='currentColor'></path>
+<path d='M 0,48 L 160,48' fill='none' stroke='currentColor'></path>
+<path d='M 536,64 L 568,64' fill='none' stroke='currentColor'></path>
+<path d='M 568,64 L 584,64' fill='none' stroke='currentColor'></path>
+<path d='M 24,80 L 160,80' fill='none' stroke='currentColor'></path>
+<path d='M 192,80 L 240,80' fill='none' stroke='currentColor'></path>
+<path d='M 288,80 L 376,80' fill='none' stroke='currentColor'></path>
+<path d='M 456,80 L 520,80' fill='none' stroke='currentColor'></path>
+<path d='M 192,112 L 200,112' fill='none' stroke='currentColor'></path>
+<path d='M 232,112 L 240,112' fill='none' stroke='currentColor'></path>
+<path d='M 464,112 L 488,112' fill='none' stroke='currentColor'></path>
+<path d='M 488,112 L 512,112' fill='none' stroke='currentColor'></path>
+<path d='M 568,112 L 584,112' fill='none' stroke='currentColor'></path>
+<path d='M 584,112 L 600,112' fill='none' stroke='currentColor'></path>
+<path d='M 664,112 L 736,112' fill='none' stroke='currentColor'></path>
+<path d='M 8,128 L 32,128' fill='none' stroke='currentColor'></path>
+<path d='M 32,128 L 136,128' fill='none' stroke='currentColor'></path>
+<path d='M 136,128 L 144,128' fill='none' stroke='currentColor'></path>
+<path d='M 184,128 L 192,128' fill='none' stroke='currentColor'></path>
+<path d='M 264,128 L 328,128' fill='none' stroke='currentColor'></path>
+<path d='M 328,128 L 400,128' fill='none' stroke='currentColor'></path>
+<path d='M 232,144 L 248,144' fill='none' stroke='currentColor'></path>
+<path d='M 456,144 L 520,144' fill='none' stroke='currentColor'></path>
+<path d='M 648,144 L 664,144' fill='none' stroke='currentColor'></path>
+<path d='M 664,144 L 720,144' fill='none' stroke='currentColor'></path>
+<path d='M 40,160 L 128,160' fill='none' stroke='currentColor'></path>
+<path d='M 128,176 L 152,176' fill='none' stroke='currentColor'></path>
+<path d='M 224,176 L 248,176' fill='none' stroke='currentColor'></path>
+<path d='M 288,176 L 384,176' fill='none' stroke='currentColor'></path>
+<path d='M 504,176 L 528,176' fill='none' stroke='currentColor'></path>
+<path d='M 576,176 L 600,176' fill='none' stroke='currentColor'></path>
+<path d='M 8,192 L 160,192' fill='none' stroke='currentColor'></path>
+<path d='M 304,192 L 368,192' fill='none' stroke='currentColor'></path>
+<path d='M 384,192 L 408,192' fill='none' stroke='currentColor'></path>
+<path d='M 160,208 L 192,208' fill='none' stroke='currentColor'></path>
+<path d='M 248,208 L 280,208' fill='none' stroke='currentColor'></path>
+<path d='M 304,224 L 368,224' fill='none' stroke='currentColor'></path>
+<path d='M 392,224 L 408,224' fill='none' stroke='currentColor'></path>
+<path d='M 8,240 L 160,240' fill='none' stroke='currentColor'></path>
+<path d='M 208,240 L 232,240' fill='none' stroke='currentColor'></path>
+<path d='M 288,240 L 312,240' fill='none' stroke='currentColor'></path>
+<path d='M 312,240 L 384,240' fill='none' stroke='currentColor'></path>
+<path d='M 440,240 L 464,240' fill='none' stroke='currentColor'></path>
+<path d='M 480,240 L 504,240' fill='none' stroke='currentColor'></path>
+<path d='M 688,240 L 696,240' fill='none' stroke='currentColor'></path>
+<path d='M 32,256 L 64,256' fill='none' stroke='currentColor'></path>
+<path d='M 64,256 L 112,256' fill='none' stroke='currentColor'></path>
+<path d='M 536,256 L 552,256' fill='none' stroke='currentColor'></path>
+<path d='M 112,288 L 152,288' fill='none' stroke='currentColor'></path>
+<path d='M 216,288 L 232,288' fill='none' stroke='currentColor'></path>
+<path d='M 232,288 L 248,288' fill='none' stroke='currentColor'></path>
+<path d='M 440,288 L 464,288' fill='none' stroke='currentColor'></path>
+<path d='M 480,288 L 504,288' fill='none' stroke='currentColor'></path>
+<path d='M 536,288 L 544,288' fill='none' stroke='currentColor'></path>
+<path d='M 568,288 L 584,288' fill='none' stroke='currentColor'></path>
+<path d='M 688,288 L 720,288' fill='none' stroke='currentColor'></path>
+<path d='M 8,304 L 32,304' fill='none' stroke='currentColor'></path>
+<path d='M 32,304 L 64,304' fill='none' stroke='currentColor'></path>
+<path d='M 64,304 L 112,304' fill='none' stroke='currentColor'></path>
+<path d='M 688,320 L 720,320' fill='none' stroke='currentColor'></path>
+<path d='M 152,336 L 176,336' fill='none' stroke='currentColor'></path>
+<path d='M 176,336 L 240,336' fill='none' stroke='currentColor'></path>
+<path d='M 312,352 L 344,352' fill='none' stroke='currentColor'></path>
+<path d='M 344,352 L 376,352' fill='none' stroke='currentColor'></path>
+<path d='M 376,352 L 392,352' fill='none' stroke='currentColor'></path>
+<path d='M 152,368 L 224,368' fill='none' stroke='currentColor'></path>
+<path d='M 224,368 L 240,368' fill='none' stroke='currentColor'></path>
+<path d='M 624,368 L 640,368' fill='none' stroke='currentColor'></path>
+<path d='M 160,24 L 184,24' fill='none' stroke='currentColor'></path>
+<path d='M 208,24 L 232,24' fill='none' stroke='currentColor'></path>
+<path d='M 256,24 L 280,24' fill='none' stroke='currentColor'></path>
+<path d='M 0,0 L 0,48' fill='none' stroke='currentColor'></path>
+<path d='M 8,96 L 8,128' fill='none' stroke='currentColor'></path>
+<path d='M 8,192 L 8,240' fill='none' stroke='currentColor'></path>
+<path d='M 32,128 L 32,176' fill='none' stroke='currentColor'></path>
+<path d='M 32,256 L 32,304' fill='none' stroke='currentColor'></path>
+<path d='M 64,256 L 64,304' fill='none' stroke='currentColor'></path>
+<path d='M 112,256 L 112,288' fill='none' stroke='currentColor'></path>
+<path d='M 112,288 L 112,304' fill='none' stroke='currentColor'></path>
+<path d='M 136,128 L 136,160' fill='none' stroke='currentColor'></path>
+<path d='M 160,0 L 160,48' fill='none' stroke='currentColor'></path>
+<path d='M 160,80 L 160,112' fill='none' stroke='currentColor'></path>
+<path d='M 160,192 L 160,208' fill='none' stroke='currentColor'></path>
+<path d='M 160,208 L 160,240' fill='none' stroke='currentColor'></path>
+<path d='M 168,144 L 168,160' fill='none' stroke='currentColor'></path>
+<path d='M 176,288 L 176,320' fill='none' stroke='currentColor'></path>
+<path d='M 176,320 L 176,336' fill='none' stroke='currentColor'></path>
+<path d='M 208,144 L 208,160' fill='none' stroke='currentColor'></path>
+<path d='M 232,272 L 232,288' fill='none' stroke='currentColor'></path>
+<path d='M 232,288 L 232,304' fill='none' stroke='currentColor'></path>
+<path d='M 288,176 L 288,240' fill='none' stroke='currentColor'></path>
+<path d='M 304,192 L 304,224' fill='none' stroke='currentColor'></path>
+<path d='M 312,240 L 312,272' fill='none' stroke='currentColor'></path>
+<path d='M 328,128 L 328,160' fill='none' stroke='currentColor'></path>
+<path d='M 344,256 L 344,272' fill='none' stroke='currentColor'></path>
+<path d='M 368,192 L 368,224' fill='none' stroke='currentColor'></path>
+<path d='M 384,0 L 384,32' fill='none' stroke='currentColor'></path>
+<path d='M 384,176 L 384,192' fill='none' stroke='currentColor'></path>
+<path d='M 384,192 L 384,240' fill='none' stroke='currentColor'></path>
+<path d='M 440,240 L 440,288' fill='none' stroke='currentColor'></path>
+<path d='M 456,80 L 456,144' fill='none' stroke='currentColor'></path>
+<path d='M 464,240 L 464,288' fill='none' stroke='currentColor'></path>
+<path d='M 472,328 L 472,344' fill='none' stroke='currentColor'></path>
+<path d='M 480,240 L 480,288' fill='none' stroke='currentColor'></path>
+<path d='M 480,328 L 480,344' fill='none' stroke='currentColor'></path>
+<path d='M 488,96 L 488,112' fill='none' stroke='currentColor'></path>
+<path d='M 488,112 L 488,128' fill='none' stroke='currentColor'></path>
+<path d='M 504,240 L 504,288' fill='none' stroke='currentColor'></path>
+<path d='M 520,80 L 520,144' fill='none' stroke='currentColor'></path>
+<path d='M 552,224 L 552,256' fill='none' stroke='currentColor'></path>
+<path d='M 568,0 L 568,48' fill='none' stroke='currentColor'></path>
+<path d='M 568,80 L 568,112' fill='none' stroke='currentColor'></path>
+<path d='M 584,64 L 584,96' fill='none' stroke='currentColor'></path>
+<path d='M 584,128 L 584,144' fill='none' stroke='currentColor'></path>
+<path d='M 600,0 L 600,112' fill='none' stroke='currentColor'></path>
+<path d='M 600,256 L 600,272' fill='none' stroke='currentColor'></path>
+<path d='M 632,336 L 632,352' fill='none' stroke='currentColor'></path>
+<path d='M 664,144 L 664,176' fill='none' stroke='currentColor'></path>
+<path d='M 664,176 L 664,192' fill='none' stroke='currentColor'></path>
+<path d='M 664,288 L 664,304' fill='none' stroke='currentColor'></path>
+<path d='M 688,288 L 688,320' fill='none' stroke='currentColor'></path>
+<path d='M 704,336 L 704,352' fill='none' stroke='currentColor'></path>
+<path d='M 712,160 L 712,224' fill='none' stroke='currentColor'></path>
+<path d='M 720,288 L 720,320' fill='none' stroke='currentColor'></path>
+<path d='M 264,128 L 288,80' fill='none' stroke='currentColor'></path>
+<path d='M 232,240 L 248,208' fill='none' stroke='currentColor'></path>
+<path d='M 224,304 L 232,288' fill='none' stroke='currentColor'></path>
+<path d='M 232,288 L 240,272' fill='none' stroke='currentColor'></path>
+<path d='M 336,368 L 344,352' fill='none' stroke='currentColor'></path>
+<path d='M 344,352 L 352,336' fill='none' stroke='currentColor'></path>
+<path d='M 480,288 L 504,240' fill='none' stroke='currentColor'></path>
+<path d='M 552,224 L 576,176' fill='none' stroke='currentColor'></path>
+<path d='M 648,144 L 664,112' fill='none' stroke='currentColor'></path>
+<path d='M 640,240 L 664,192' fill='none' stroke='currentColor'></path>
+<path d='M 720,144 L 736,112' fill='none' stroke='currentColor'></path>
+<path d='M 664,288 L 688,240' fill='none' stroke='currentColor'></path>
+<path d='M 192,208 L 208,240' fill='none' stroke='currentColor'></path>
+<path d='M 224,272 L 232,288' fill='none' stroke='currentColor'></path>
+<path d='M 232,288 L 240,304' fill='none' stroke='currentColor'></path>
+<path d='M 440,240 L 464,288' fill='none' stroke='currentColor'></path>
+<path d='M 376,80 L 400,128' fill='none' stroke='currentColor'></path>
+<path d='M 552,256 L 568,288' fill='none' stroke='currentColor'></path>
+<path d='M 528,176 L 552,224' fill='none' stroke='currentColor'></path>
+<path d='M 640,240 L 664,288' fill='none' stroke='currentColor'></path>
+<path d='M 664,192 L 688,240' fill='none' stroke='currentColor'></path>
+<path d='M 136,160 L 136,168' fill='none' stroke='currentColor'></path>
+<path d='M 184,16 L 184,24' fill='none' stroke='currentColor'></path>
+<path d='M 208,16 L 208,24' fill='none' stroke='currentColor'></path>
+<path d='M 232,24 L 232,32' fill='none' stroke='currentColor'></path>
+<path d='M 256,24 L 256,32' fill='none' stroke='currentColor'></path>
+<path d='M 280,16 L 280,24' fill='none' stroke='currentColor'></path>
+<path d='M 488,88 L 488,96' fill='none' stroke='currentColor'></path>
+<path d='M 488,128 L 488,136' fill='none' stroke='currentColor'></path>
+<polygon points='16.000000,304.000000 4.000000,298.399994 4.000000,309.600006' fill='currentColor' transform='rotate(180.000000, 8.000000, 304.000000)'></polygon>
+<polygon points='48.000000,160.000000 36.000000,154.399994 36.000000,165.600006' fill='currentColor' transform='rotate(180.000000, 40.000000, 160.000000)'></polygon>
+<polygon points='136.000000,160.000000 124.000000,154.399994 124.000000,165.600006' fill='currentColor' transform='rotate(0.000000, 128.000000, 160.000000)'></polygon>
+<polygon points='136.000000,176.000000 124.000000,170.399994 124.000000,181.600006' fill='currentColor' transform='rotate(180.000000, 128.000000, 176.000000)'></polygon>
+<polygon points='160.000000,288.000000 148.000000,282.399994 148.000000,293.600006' fill='currentColor' transform='rotate(0.000000, 152.000000, 288.000000)'></polygon>
+<path d='M 176,320 L 176,328' fill='none' stroke='currentColor'></path>
+<polygon points='192.000000,320.000000 180.000000,314.399994 180.000000,325.600006' fill='currentColor' transform='rotate(90.000000, 176.000000, 320.000000)'></polygon>
+<polygon points='288.000000,208.000000 276.000000,202.399994 276.000000,213.600006' fill='currentColor' transform='rotate(0.000000, 280.000000, 208.000000)'></polygon>
+<polygon points='312.000000,16.000000 300.000000,10.400000 300.000000,21.600000' fill='currentColor' transform='rotate(0.000000, 304.000000, 16.000000)'></polygon>
+<polygon points='320.000000,352.000000 308.000000,346.399994 308.000000,357.600006' fill='currentColor' transform='rotate(180.000000, 312.000000, 352.000000)'></polygon>
+<path d='M 328,160 L 328,168' fill='none' stroke='currentColor'></path>
+<polygon points='344.000000,160.000000 332.000000,154.399994 332.000000,165.600006' fill='currentColor' transform='rotate(90.000000, 328.000000, 160.000000)'></polygon>
+<path d='M 344,248 L 344,256' fill='none' stroke='currentColor'></path>
+<polygon points='360.000000,256.000000 348.000000,250.399994 348.000000,261.600006' fill='currentColor' transform='rotate(270.000000, 344.000000, 256.000000)'></polygon>
+<polygon points='384.000000,352.000000 372.000000,346.399994 372.000000,357.600006' fill='currentColor' transform='rotate(180.000000, 376.000000, 352.000000)'></polygon>
+<polygon points='392.000000,0.000000 380.000000,-5.600000 380.000000,5.600000' fill='currentColor' transform='rotate(270.000000, 384.000000, 0.000000)'></polygon>
+<polygon points='392.000000,32.000000 380.000000,26.400000 380.000000,37.599998' fill='currentColor' transform='rotate(90.000000, 384.000000, 32.000000)'></polygon>
+<polygon points='400.000000,224.000000 388.000000,218.399994 388.000000,229.600006' fill='currentColor' transform='rotate(180.000000, 392.000000, 224.000000)'></polygon>
+<polygon points='480.000000,32.000000 468.000000,26.400000 468.000000,37.599998' fill='currentColor' transform='rotate(180.000000, 472.000000, 32.000000)'></polygon>
+<path d='M 632,352 L 632,360' fill='none' stroke='currentColor'></path>
+<polygon points='648.000000,352.000000 636.000000,346.399994 636.000000,357.600006' fill='currentColor' transform='rotate(90.000000, 632.000000, 352.000000)'></polygon>
+<path d='M 664,176 L 664,184' fill='none' stroke='currentColor'></path>
+<polygon points='680.000000,176.000000 668.000000,170.399994 668.000000,181.600006' fill='currentColor' transform='rotate(90.000000, 664.000000, 176.000000)'></polygon>
+<path d='M 704,328 L 704,336' fill='none' stroke='currentColor'></path>
+<polygon points='720.000000,336.000000 708.000000,330.399994 708.000000,341.600006' fill='currentColor' transform='rotate(270.000000, 704.000000, 336.000000)'></polygon>
+<path d='M 712,152 L 712,160' fill='none' stroke='currentColor'></path>
+<polygon points='728.000000,160.000000 716.000000,154.399994 716.000000,165.600006' fill='currentColor' transform='rotate(270.000000, 712.000000, 160.000000)'></polygon>
+<path d='M 448,16 A 16,16 0 0,0 432,32' fill='none' stroke='currentColor'></path>
+<path d='M 448,16 A 16,16 0 0,1 464,32' fill='none' stroke='currentColor'></path>
+<path d='M 432,32 A 16,16 0 0,0 448,48' fill='none' stroke='currentColor'></path>
+<path d='M 464,32 A 16,16 0 0,1 448,48' fill='none' stroke='currentColor'></path>
+<path d='M 24,80 A 16,16 0 0,0 8,96' fill='none' stroke='currentColor'></path>
+<path d='M 192,80 A 16,16 0 0,0 176,96' fill='none' stroke='currentColor'></path>
+<path d='M 240,80 A 16,16 0 0,1 256,96' fill='none' stroke='currentColor'></path>
+<path d='M 176,96 A 16,16 0 0,0 192,112' fill='none' stroke='currentColor'></path>
+<path d='M 200,112 A 16,16 0 0,1 216,128' fill='none' stroke='currentColor'></path>
+<path d='M 232,112 A 16,16 0 0,0 216,128' fill='none' stroke='currentColor'></path>
+<path d='M 256,96 A 16,16 0 0,1 240,112' fill='none' stroke='currentColor'></path>
+<path d='M 160,112 A 16,16 0 0,1 144,128' fill='none' stroke='currentColor'></path>
+<path d='M 184,128 A 16,16 0 0,0 168,144' fill='none' stroke='currentColor'></path>
+<path d='M 192,128 A 16,16 0 0,1 208,144' fill='none' stroke='currentColor'></path>
+<path d='M 216,128 A 16,16 0 0,0 232,144' fill='none' stroke='currentColor'></path>
+<path d='M 248,144 A 16,16 0 0,1 264,160' fill='none' stroke='currentColor'></path>
+<path d='M 168,160 A 16,16 0 0,1 152,176' fill='none' stroke='currentColor'></path>
+<path d='M 208,160 A 16,16 0 0,0 224,176' fill='none' stroke='currentColor'></path>
+<path d='M 264,160 A 16,16 0 0,1 248,176' fill='none' stroke='currentColor'></path>
+<path d='M 408,192 A 16,16 0 0,1 424,208' fill='none' stroke='currentColor'></path>
+<path d='M 424,208 A 16,16 0 0,1 408,224' fill='none' stroke='currentColor'></path>
+<path d='M 584,240 A 16,16 0 0,0 568,256' fill='none' stroke='currentColor'></path>
+<path d='M 584,240 A 16,16 0 0,1 600,256' fill='none' stroke='currentColor'></path>
+<path d='M 712,224 A 16,16 0 0,1 696,240' fill='none' stroke='currentColor'></path>
+<path d='M 536,256 A 16,16 0 0,0 520,272' fill='none' stroke='currentColor'></path>
+<path d='M 312,272 A 16,16 0 0,0 328,288' fill='none' stroke='currentColor'></path>
+<path d='M 344,272 A 16,16 0 0,1 328,288' fill='none' stroke='currentColor'></path>
+<path d='M 520,272 A 16,16 0 0,0 536,288' fill='none' stroke='currentColor'></path>
+<path d='M 600,272 A 16,16 0 0,1 584,288' fill='none' stroke='currentColor'></path>
+<path d='M 648,320 A 16,16 0 0,0 632,336' fill='none' stroke='currentColor'></path>
+<path d='M 664,304 A 16,16 0 0,1 648,320' fill='none' stroke='currentColor'></path>
+<path d='M 24,336 A 16,16 0 0,0 8,352' fill='none' stroke='currentColor'></path>
+<path d='M 24,336 A 16,16 0 0,1 40,352' fill='none' stroke='currentColor'></path>
+<path d='M 152,336 A 16,16 0 0,0 136,352' fill='none' stroke='currentColor'></path>
+<path d='M 240,336 A 16,16 0 0,1 256,352' fill='none' stroke='currentColor'></path>
+<path d='M 8,352 A 16,16 0 0,0 24,368' fill='none' stroke='currentColor'></path>
+<path d='M 40,352 A 16,16 0 0,1 24,368' fill='none' stroke='currentColor'></path>
+<path d='M 136,352 A 16,16 0 0,0 152,368' fill='none' stroke='currentColor'></path>
+<path d='M 256,352 A 16,16 0 0,1 240,368' fill='none' stroke='currentColor'></path>
+<circle cx='176' cy='288' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='232' cy='288' r='6' stroke='currentColor' fill='#fff'></circle>
+<circle cx='448' cy='32' r='6' stroke='currentColor' fill='currentColor'></circle>
+<circle cx='536' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
+<path d='M 568,48 L 568,56' fill='none' stroke='currentColor'></path>
+<path d='M 568,72 L 568,80' fill='none' stroke='currentColor'></path>
+<path d='M 568,56 A 9,9 0 0,0 568,72' fill='none' stroke='currentColor'></path>
+<path d='M 584,96 L 584,104' fill='none' stroke='currentColor'></path>
+<path d='M 584,120 L 584,128' fill='none' stroke='currentColor'></path>
+<path d='M 584,104 A 9,9 0 0,1 584,120' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='24' y='116' fill='currentColor' style='font-size:1em'>&amp;</text>
+<text text-anchor='middle' x='40' y='20' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='40' y='100' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='40' y='212' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='40' y='228' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='48' y='100' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>q</text>
+<text text-anchor='middle' x='48' y='212' fill='currentColor' style='font-size:1em'>f</text>
+<text text-anchor='middle' x='48' y='228' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='56' y='20' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='56' y='100' fill='currentColor' style='font-size:1em'>x</text>
+<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='56' y='228' fill='currentColor' style='font-size:1em'>j</text>
+<text text-anchor='middle' x='64' y='20' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='64' y='100' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='64' y='212' fill='currentColor' style='font-size:1em'>(</text>
+<text text-anchor='middle' x='64' y='228' fill='currentColor' style='font-size:1em'>-</text>
+<text text-anchor='middle' x='72' y='20' fill='currentColor' style='font-size:1em'>x</text>
+<text text-anchor='middle' x='72' y='100' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='72' y='212' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='72' y='228' fill='currentColor' style='font-size:1em'>&gt;</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='80' y='228' fill='currentColor' style='font-size:1em'>f</text>
+<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='88' y='212' fill='currentColor' style='font-size:1em'>&gt;</text>
+<text text-anchor='middle' x='88' y='228' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='96' y='116' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='96' y='228' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='104' y='212' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='104' y='228' fill='currentColor' style='font-size:1em'>(</text>
+<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='112' y='212' fill='currentColor' style='font-size:1em'>)</text>
+<text text-anchor='middle' x='112' y='228' fill='currentColor' style='font-size:1em'>)</text>
+<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='128' y='276' fill='currentColor' style='font-size:1em'>J</text>
+<text text-anchor='middle' x='136' y='100' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='136' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='136' y='276' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='144' y='116' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='144' y='276' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='152' y='276' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='168' y='356' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='176' y='356' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='184' y='68' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='184' y='196' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='184' y='356' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='192' y='68' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='192' y='196' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='200' y='68' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='200' y='196' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='200' y='356' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='208' y='68' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='208' y='196' fill='currentColor' style='font-size:1em'>g</text>
+<text text-anchor='middle' x='216' y='68' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='216' y='356' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='224' y='196' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='224' y='356' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='232' y='196' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='232' y='356' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='240' y='196' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='248' y='196' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='296' y='100' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='304' y='100' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='312' y='100' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='320' y='100' fill='currentColor' style='font-size:1em'>g</text>
+<text text-anchor='middle' x='328' y='100' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='336' y='100' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='344' y='100' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='352' y='100' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='360' y='100' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='360' y='276' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='360' y='292' fill='currentColor' style='font-size:1em'>V</text>
+<text text-anchor='middle' x='368' y='276' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='368' y='292' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='376' y='276' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='376' y='292' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='384' y='276' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='384' y='292' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='392' y='276' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='392' y='292' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='400' y='276' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='400' y='292' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='408' y='292' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='416' y='292' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='416' y='324' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='424' y='324' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='432' y='324' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='432' y='356' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='432' y='372' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='440' y='212' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='440' y='324' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='440' y='372' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='448' y='212' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='448' y='324' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='448' y='356' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='448' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='456' y='212' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='456' y='324' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='456' y='340' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='456' y='356' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='456' y='372' fill='currentColor' style='font-size:1em'>/</text>
+<text text-anchor='middle' x='464' y='164' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='464' y='212' fill='currentColor' style='font-size:1em'>v</text>
+<text text-anchor='middle' x='464' y='324' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='464' y='356' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='464' y='372' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='472' y='164' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='472' y='212' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='472' y='324' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='472' y='356' fill='currentColor' style='font-size:1em'>h</text>
+<text text-anchor='middle' x='472' y='372' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='480' y='164' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='480' y='212' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='480' y='356' fill='currentColor' style='font-size:1em'>-</text>
+<text text-anchor='middle' x='488' y='164' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='488' y='356' fill='currentColor' style='font-size:1em'>-</text>
+<text text-anchor='middle' x='488' y='372' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='496' y='164' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='496' y='212' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='496' y='340' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='496' y='356' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='496' y='372' fill='currentColor' style='font-size:1em'>h</text>
+<text text-anchor='middle' x='504' y='164' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='504' y='212' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='504' y='356' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='504' y='372' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='512' y='164' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='512' y='212' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='512' y='324' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='512' y='372' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='520' y='164' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='520' y='212' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='520' y='324' fill='currentColor' style='font-size:1em'>q</text>
+<text text-anchor='middle' x='520' y='356' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='520' y='372' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='528' y='324' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='528' y='340' fill='currentColor' style='font-size:1em'>*</text>
+<text text-anchor='middle' x='528' y='356' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='536' y='324' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='536' y='340' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='536' y='356' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='544' y='324' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='544' y='340' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='552' y='324' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='552' y='340' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='552' y='356' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='560' y='324' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='560' y='340' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='568' y='324' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='568' y='340' fill='currentColor' style='font-size:1em'>*</text>
+<text text-anchor='middle' x='568' y='356' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='576' y='356' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='584' y='356' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='592' y='356' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='648' y='244' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='656' y='244' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='664' y='244' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='672' y='132' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='672' y='244' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='680' y='132' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='680' y='244' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='688' y='132' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='696' y='132' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='704' y='132' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='704' y='308' fill='currentColor' style='font-size:1em'>3</text>
+<text text-anchor='middle' x='712' y='132' fill='currentColor' style='font-size:1em'>h</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="process">
+  Process
+</h3>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 728 233"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 32,16 L 96,16' fill='none' stroke='currentColor'></path>
+<path d='M 392,32 L 408,32' fill='none' stroke='currentColor'></path>
+<path d='M 408,32 L 472,32' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 488,32' fill='none' stroke='currentColor'></path>
+<path d='M 32,48 L 64,48' fill='none' stroke='currentColor'></path>
+<path d='M 64,48 L 96,48' fill='none' stroke='currentColor'></path>
+<path d='M 152,48 L 200,48' fill='none' stroke='currentColor'></path>
+<path d='M 224,64 L 272,64' fill='none' stroke='currentColor'></path>
+<path d='M 336,64 L 384,64' fill='none' stroke='currentColor'></path>
+<path d='M 488,64 L 520,64' fill='none' stroke='currentColor'></path>
+<path d='M 640,64 L 672,64' fill='none' stroke='currentColor'></path>
+<path d='M 152,80 L 200,80' fill='none' stroke='currentColor'></path>
+<path d='M 32,96 L 112,96' fill='none' stroke='currentColor'></path>
+<path d='M 392,96 L 408,96' fill='none' stroke='currentColor'></path>
+<path d='M 408,96 L 440,96' fill='none' stroke='currentColor'></path>
+<path d='M 440,96 L 472,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,96 L 488,96' fill='none' stroke='currentColor'></path>
+<path d='M 16,128 L 64,128' fill='none' stroke='currentColor'></path>
+<path d='M 64,128 L 96,128' fill='none' stroke='currentColor'></path>
+<path d='M 16,176 L 112,176' fill='none' stroke='currentColor'></path>
+<path d='M 256,176 L 304,176' fill='none' stroke='currentColor'></path>
+<path d='M 304,176 L 352,176' fill='none' stroke='currentColor'></path>
+<path d='M 112,192 L 248,192' fill='none' stroke='currentColor'></path>
+<path d='M 360,192 L 416,192' fill='none' stroke='currentColor'></path>
+<path d='M 16,208 L 112,208' fill='none' stroke='currentColor'></path>
+<path d='M 256,208 L 352,208' fill='none' stroke='currentColor'></path>
+<path d='M 540,40 L 628,40' fill='none' stroke='currentColor'></path>
+<path d='M 540,88 L 628,88' fill='none' stroke='currentColor'></path>
+<path d='M 16,176 L 16,208' fill='none' stroke='currentColor'></path>
+<path d='M 64,48 L 64,80' fill='none' stroke='currentColor'></path>
+<path d='M 64,128 L 64,160' fill='none' stroke='currentColor'></path>
+<path d='M 112,176 L 112,192' fill='none' stroke='currentColor'></path>
+<path d='M 112,192 L 112,208' fill='none' stroke='currentColor'></path>
+<path d='M 256,176 L 256,208' fill='none' stroke='currentColor'></path>
+<path d='M 304,144 L 304,176' fill='none' stroke='currentColor'></path>
+<path d='M 352,176 L 352,208' fill='none' stroke='currentColor'></path>
+<path d='M 392,32 L 392,96' fill='none' stroke='currentColor'></path>
+<path d='M 408,32 L 408,96' fill='none' stroke='currentColor'></path>
+<path d='M 472,32 L 472,96' fill='none' stroke='currentColor'></path>
+<path d='M 488,32 L 488,64' fill='none' stroke='currentColor'></path>
+<path d='M 488,64 L 488,96' fill='none' stroke='currentColor'></path>
+<path d='M 16,128 L 32,96' fill='none' stroke='currentColor'></path>
+<path d='M 96,128 L 112,96' fill='none' stroke='currentColor'></path>
+<path d='M 272,64 L 304,0' fill='none' stroke='currentColor'></path>
+<path d='M 304,128 L 336,64' fill='none' stroke='currentColor'></path>
+<path d='M 528,64 L 540,40' fill='none' stroke='currentColor'></path>
+<path d='M 628,88 L 640,64' fill='none' stroke='currentColor'></path>
+<path d='M 272,64 L 304,128' fill='none' stroke='currentColor'></path>
+<path d='M 304,0 L 336,64' fill='none' stroke='currentColor'></path>
+<path d='M 528,64 L 540,88' fill='none' stroke='currentColor'></path>
+<path d='M 628,40 L 640,64' fill='none' stroke='currentColor'></path>
+<path d='M 64,80 L 64,88' fill='none' stroke='currentColor'></path>
+<polygon points='80.000000,80.000000 68.000000,74.400002 68.000000,85.599998' fill='currentColor' transform='rotate(90.000000, 64.000000, 80.000000)'></polygon>
+<path d='M 64,160 L 64,168' fill='none' stroke='currentColor'></path>
+<polygon points='80.000000,160.000000 68.000000,154.399994 68.000000,165.600006' fill='currentColor' transform='rotate(90.000000, 64.000000, 160.000000)'></polygon>
+<polygon points='232.000000,64.000000 220.000000,58.400002 220.000000,69.599998' fill='currentColor' transform='rotate(180.000000, 224.000000, 64.000000)'></polygon>
+<polygon points='256.000000,192.000000 244.000000,186.399994 244.000000,197.600006' fill='currentColor' transform='rotate(0.000000, 248.000000, 192.000000)'></polygon>
+<path d='M 304,136 L 304,144' fill='none' stroke='currentColor'></path>
+<polygon points='320.000000,144.000000 308.000000,138.399994 308.000000,149.600006' fill='currentColor' transform='rotate(270.000000, 304.000000, 144.000000)'></polygon>
+<polygon points='368.000000,192.000000 356.000000,186.399994 356.000000,197.600006' fill='currentColor' transform='rotate(180.000000, 360.000000, 192.000000)'></polygon>
+<polygon points='392.000000,64.000000 380.000000,58.400002 380.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 384.000000, 64.000000)'></polygon>
+<polygon points='528.000000,64.000000 516.000000,58.400002 516.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 520.000000, 64.000000)'></polygon>
+<polygon points='680.000000,64.000000 668.000000,58.400002 668.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 672.000000, 64.000000)'></polygon>
+<path d='M 32,16 A 16,16 0 0,0 16,32' fill='none' stroke='currentColor'></path>
+<path d='M 96,16 A 16,16 0 0,1 112,32' fill='none' stroke='currentColor'></path>
+<path d='M 16,32 A 16,16 0 0,0 32,48' fill='none' stroke='currentColor'></path>
+<path d='M 112,32 A 16,16 0 0,1 96,48' fill='none' stroke='currentColor'></path>
+<path d='M 152,48 A 16,16 0 0,0 136,64' fill='none' stroke='currentColor'></path>
+<path d='M 200,48 A 16,16 0 0,1 216,64' fill='none' stroke='currentColor'></path>
+<path d='M 696,48 A 16,16 0 0,0 680,64' fill='none' stroke='currentColor'></path>
+<path d='M 696,48 A 16,16 0 0,1 712,64' fill='none' stroke='currentColor'></path>
+<path d='M 136,64 A 16,16 0 0,0 152,80' fill='none' stroke='currentColor'></path>
+<path d='M 216,64 A 16,16 0 0,1 200,80' fill='none' stroke='currentColor'></path>
+<path d='M 680,64 A 16,16 0 0,0 696,80' fill='none' stroke='currentColor'></path>
+<path d='M 712,64 A 16,16 0 0,1 696,80' fill='none' stroke='currentColor'></path>
+<path d='M 432,176 A 16,16 0 0,0 416,192' fill='none' stroke='currentColor'></path>
+<path d='M 432,176 A 16,16 0 0,1 448,192' fill='none' stroke='currentColor'></path>
+<path d='M 416,192 A 16,16 0 0,0 432,208' fill='none' stroke='currentColor'></path>
+<path d='M 448,192 A 16,16 0 0,1 432,208' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='40' y='196' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='48' y='196' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='56' y='36' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='56' y='196' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='64' y='36' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='64' y='196' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='72' y='36' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='72' y='196' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='80' y='36' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='80' y='196' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='88' y='196' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='168' y='68' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='176' y='68' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='184' y='68' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='248' y='52' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='280' y='68' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='280' y='196' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='288' y='68' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='288' y='196' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='296' y='68' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='296' y='196' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='304' y='68' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='304' y='196' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='312' y='68' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='312' y='196' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='320' y='68' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='320' y='196' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='328' y='196' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='360' y='52' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='416' y='52' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='416' y='84' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='424' y='52' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='424' y='84' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='432' y='52' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='432' y='84' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='432' y='196' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='440' y='52' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='440' y='84' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='448' y='52' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='448' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='456' y='52' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='456' y='84' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='464' y='52' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='464' y='84' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='544' y='68' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='552' y='68' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='560' y='68' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='568' y='68' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='576' y='68' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='584' y='68' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='592' y='68' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='600' y='68' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='608' y='68' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='616' y='68' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='624' y='68' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='696' y='68' fill='currentColor' style='font-size:1em'>X</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="file-tree">
+  File tree
+</h3>
+<p>Created from <a href="https://arthursonzogni.com/Diagon/#Tree">https://arthursonzogni.com/Diagon/#Tree</a></p>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        width="300"
+        
+      >
+      <g transform='translate(8,16)'>
+<text text-anchor='middle' x='0' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='4' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='32' y='4' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='40' y='4' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='48' y='4' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='56' y='4' fill='currentColor' style='font-size:1em'>x</text>
+<text text-anchor='middle' x='64' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='4' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='72' y='20' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='72' y='36' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='72' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='72' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='72' y='100' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='80' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='4' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='88' y='20' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='88' y='116' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='96' y='4' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='96' y='20' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='96' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='104' y='4' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='104' y='20' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='112' y='4' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='112' y='20' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='120' y='4' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='120' y='20' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='128' y='4' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='128' y='20' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='136' y='4' fill='currentColor' style='font-size:1em'>d</text>
+<text text-anchor='middle' x='136' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='20' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='84' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='152' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='20' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='160' y='84' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='168' y='20' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='168' y='84' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='176' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='176' y='84' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='184' y='20' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='184' y='84' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='192' y='20' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='200' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='208' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='20' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='216' y='36' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='216' y='52' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='216' y='68' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='224' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='20' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='232' y='36' fill='currentColor' style='font-size:1em'>K</text>
+<text text-anchor='middle' x='232' y='52' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='232' y='68' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='240' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='240' y='36' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='240' y='52' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='240' y='68' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='248' y='20' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='248' y='36' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='248' y='52' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='248' y='68' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='256' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='256' y='36' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='256' y='52' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='256' y='68' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='264' y='20' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='264' y='36' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='264' y='52' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='264' y='68' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='272' y='20' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='272' y='36' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='272' y='52' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='272' y='68' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='280' y='20' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='280' y='36' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='280' y='52' fill='currentColor' style='font-size:1em'>u</text>
+<text text-anchor='middle' x='280' y='68' fill='currentColor' style='font-size:1em'>u</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="sequence-diagram">
+  Sequence Diagram
+</h3>
+<p><a href="https://arthursonzogni.com/Diagon/#Sequence">https://arthursonzogni.com/Diagon/#Sequence</a></p>
+
+
+
+<div class="goat svg-container w-40">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 160 201"
+      >
+      <g transform='translate(8,16)'>
+<text text-anchor='middle' x='0' y='4' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='0' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='36' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='0' y='148' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='0' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='180' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='8' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='20' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='8' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='164' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='8' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='20' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='16' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='164' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='16' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='20' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='24' y='36' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='24' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='100' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='24' y='148' fill='currentColor' style='font-size:1em'>┴</text>
+<text text-anchor='middle' x='24' y='164' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='24' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='20' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='32' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='116' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='32' y='132' fill='currentColor' style='font-size:1em'>&lt;</text>
+<text text-anchor='middle' x='32' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='164' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='32' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='20' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='40' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='68' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='40' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='40' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='164' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='40' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='4' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='48' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='48' y='68' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='48' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='48' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='148' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='48' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='48' y='180' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='56' y='68' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='56' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='56' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='68' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='64' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='64' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='72' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='80' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='68' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='88' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='116' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='88' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='68' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='96' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='116' fill='currentColor' style='font-size:1em'>i</text>
+<text text-anchor='middle' x='96' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='68' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='104' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='104' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='4' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='112' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='112' y='36' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='112' y='68' fill='currentColor' style='font-size:1em'>!</text>
+<text text-anchor='middle' x='112' y='84' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='112' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='148' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='112' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='112' y='180' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='120' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='20' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='120' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='84' fill='currentColor' style='font-size:1em'>&gt;</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>!</text>
+<text text-anchor='middle' x='120' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='164' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='120' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='20' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='128' y='36' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='128' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='148' fill='currentColor' style='font-size:1em'>┴</text>
+<text text-anchor='middle' x='128' y='164' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='128' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='20' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='136' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='164' fill='currentColor' style='font-size:1em'>b</text>
+<text text-anchor='middle' x='136' y='180' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='4' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='144' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='144' y='148' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='144' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='144' y='180' fill='currentColor' style='font-size:1em'>┘</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="flowchart">
+  Flowchart
+</h3>
+<p><a href="https://arthursonzogni.com/Diagon/#Flowchart">https://arthursonzogni.com/Diagon/#Flowchart</a></p>
+
+
+
+<div class="goat svg-container ">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 664 601"
+      >
+      <g transform='translate(8,16)'>
+<path d='M 24,8 L 152,8' fill='none' stroke='currentColor'></path>
+<path d='M 16,104 L 72,104' fill='none' stroke='currentColor'></path>
+<path d='M 328,104 L 496,104' fill='none' stroke='currentColor'></path>
+<path d='M 24,200 L 72,200' fill='none' stroke='currentColor'></path>
+<path d='M 336,200 L 392,200' fill='none' stroke='currentColor'></path>
+<path d='M -4,136 L 4,120' fill='none' stroke='currentColor'></path>
+<path d='M -4,136 L 4,152' fill='none' stroke='currentColor'></path>
+<path d='M 4,40 L 12,24' fill='none' stroke='currentColor'></path>
+<path d='M 4,40 L 12,56' fill='none' stroke='currentColor'></path>
+<path d='M 4,120 L 12,104' fill='none' stroke='currentColor'></path>
+<path d='M 4,152 L 12,168' fill='none' stroke='currentColor'></path>
+<path d='M 4,232 L 12,216' fill='none' stroke='currentColor'></path>
+<path d='M 4,232 L 12,248' fill='none' stroke='currentColor'></path>
+<path d='M 12,24 L 20,8' fill='none' stroke='currentColor'></path>
+<path d='M 12,56 L 20,72' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='16' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='16' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='16' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 12,216 L 20,200' fill='none' stroke='currentColor'></path>
+<path d='M 12,248 L 20,264' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='24' y='36' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='24' y='52' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='24' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='24' y='132' fill='currentColor' style='font-size:1em'>K</text>
+<text text-anchor='middle' x='24' y='148' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='24' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='24' y='228' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='24' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='24' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='32' y='36' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='32' y='52' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='32' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='32' y='132' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='32' y='148' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='32' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='32' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='32' y='244' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='32' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='40' y='52' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='40' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='40' y='132' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='40' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='40' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='40' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='40' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='40' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='40' y='340' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='40' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='40' y='372' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='48' y='52' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='48' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='48' y='132' fill='currentColor' style='font-size:1em'>,</text>
+<text text-anchor='middle' x='48' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='48' y='244' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='48' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='48' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='356' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='48' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='36' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='56' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='56' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='56' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='56' y='228' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='56' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='56' y='292' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='56' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='56' y='324' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='56' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='36' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='64' y='52' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='64' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='64' y='132' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='64' y='148' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='64' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='64' y='228' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='64' y='244' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='64' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='64' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='308' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='64' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='356' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='64' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='52' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='72' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='72' y='148' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='72' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='72' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='72' y='244' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='72' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='72' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='308' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='72' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='356' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='72' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='36' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='80' y='52' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='80' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='132' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='80' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='80' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='244' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='80' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='80' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='308' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='80' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='356' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='80' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='36' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='88' y='52' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='88' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='88' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='88' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='88' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='88' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='88' y='196' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='88' y='228' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='88' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='88' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='88' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='88' y='292' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='88' y='308' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='88' y='324' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='88' y='340' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='88' y='356' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='88' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='36' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='96' y='52' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='96' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='84' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='132' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='96' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='96' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='180' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='96' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='228' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='96' y='244' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='96' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='96' y='276' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='96' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='308' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='96' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='36' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='104' y='52' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='104' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='84' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='104' y='148' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='104' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='180' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='104' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='228' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='104' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='104' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='104' y='276' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='104' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='308' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='104' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='356' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='104' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='36' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='112' y='52' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='112' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='112' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='244' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='112' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='112' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='308' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='112' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='356' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='112' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='36' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='120' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='148' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='120' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='120' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='120' y='292' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='120' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='120' y='324' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='120' y='340' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='356' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='120' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='36' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='128' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='132' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='128' y='148' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='128' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='228' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='128' y='244' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='128' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='128' y='340' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='128' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='128' y='372' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='136' y='36' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='136' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='136' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='136' y='132' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='136' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='136' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='136' y='228' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='244' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='136' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='144' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='144' y='148' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='144' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='144' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='144' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='36' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='152' y='68' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='148' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='152' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='152' y='244' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='152' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 156,8 L 164,24' fill='none' stroke='currentColor'></path>
+<path d='M 156,72 L 164,56' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='160' y='100' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='160' y='148' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='160' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='160' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='160' y='244' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='160' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 164,24 L 172,40' fill='none' stroke='currentColor'></path>
+<path d='M 164,56 L 172,40' fill='none' stroke='currentColor'></path>
+<path d='M 164,104 L 172,120' fill='none' stroke='currentColor'></path>
+<path d='M 164,168 L 172,152' fill='none' stroke='currentColor'></path>
+<path d='M 164,200 L 172,216' fill='none' stroke='currentColor'></path>
+<path d='M 164,264 L 172,248' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='176' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='176' y='52' fill='currentColor' style='font-size:1em'>y</text>
+<path d='M 172,120 L 180,136' fill='none' stroke='currentColor'></path>
+<path d='M 172,152 L 180,136' fill='none' stroke='currentColor'></path>
+<path d='M 172,216 L 180,232' fill='none' stroke='currentColor'></path>
+<path d='M 172,248 L 180,232' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='184' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='184' y='52' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='184' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='184' y='148' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='184' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='184' y='244' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='192' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='192' y='52' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='192' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='192' y='148' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='192' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='192' y='244' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='200' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='200' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='200' y='148' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='200' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='200' y='244' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='208' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='208' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='208' y='212' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='208' y='228' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='208' y='244' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='216' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='216' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='216' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='228' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='216' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='224' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='224' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='228' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='224' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='232' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='232' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='228' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='232' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='240' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='240' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='240' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='248' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='248' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='228' fill='currentColor' style='font-size:1em'>,</text>
+<text text-anchor='middle' x='248' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='256' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='256' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='264' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='264' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='228' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='264' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='272' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='272' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='228' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='272' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='280' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='280' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='228' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='280' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='288' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='288' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='288' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='296' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='296' y='212' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='228' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='296' y='244' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='304' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='304' y='212' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='304' y='228' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='304' y='244' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='312' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 308,136 L 316,120' fill='none' stroke='currentColor'></path>
+<path d='M 308,136 L 316,152' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='320' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 316,120 L 324,104' fill='none' stroke='currentColor'></path>
+<path d='M 316,152 L 324,168' fill='none' stroke='currentColor'></path>
+<path d='M 316,232 L 324,216' fill='none' stroke='currentColor'></path>
+<path d='M 316,232 L 324,248' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='328' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='328' y='148' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='328' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 324,216 L 332,200' fill='none' stroke='currentColor'></path>
+<path d='M 324,248 L 332,264' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='336' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='336' y='148' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='336' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='336' y='228' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='336' y='244' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='336' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='344' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='344' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='344' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='344' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='344' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='344' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='352' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='352' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='352' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='352' y='244' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='352' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='360' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='360' y='132' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='360' y='148' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='360' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='360' y='244' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='360' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='368' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='368' y='132' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='368' y='148' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='368' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='368' y='228' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='368' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='368' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='376' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='376' y='132' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='376' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='376' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='376' y='228' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='376' y='244' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='376' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='384' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='384' y='148' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='384' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='384' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='384' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='384' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='392' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='392' y='132' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='392' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='392' y='244' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='392' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='400' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='400' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='400' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='400' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='400' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='400' y='228' fill='currentColor' style='font-size:1em'>J</text>
+<text text-anchor='middle' x='400' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='408' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='408' y='132' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='408' y='148' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='408' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='408' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='408' y='196' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='408' y='228' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='408' y='244' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='408' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='408' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='408' y='292' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='408' y='308' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='416' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='416' y='148' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='416' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='416' y='180' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='416' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='416' y='228' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='416' y='244' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='416' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='416' y='276' fill='currentColor' style='font-size:1em'>n</text>
+<text text-anchor='middle' x='416' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='416' y='324' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='416' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='416' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='416' y='372' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='424' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='424' y='132' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='424' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='424' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='424' y='180' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='424' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='424' y='228' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='424' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='424' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='424' y='276' fill='currentColor' style='font-size:1em'>o</text>
+<text text-anchor='middle' x='424' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='424' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='424' y='340' fill='currentColor' style='font-size:1em'>(</text>
+<text text-anchor='middle' x='424' y='356' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='424' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='432' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='432' y='132' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='432' y='148' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='432' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='432' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='432' y='244' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='432' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='432' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='432' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='432' y='340' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='432' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='432' y='388' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='432' y='404' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='432' y='420' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='440' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='440' y='132' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='440' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='440' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='440' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='440' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='440' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='440' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='440' y='340' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='440' y='356' fill='currentColor' style='font-size:1em'>Q</text>
+<text text-anchor='middle' x='440' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='440' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='440' y='404' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='440' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='448' y='148' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='448' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='448' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='448' y='244' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='448' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='448' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='340' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='448' y='356' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='448' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='448' y='404' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='448' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='456' y='132' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='456' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='456' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='456' y='244' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='456' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='456' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='340' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='456' y='356' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='456' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='456' y='404' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='456' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='464' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='464' y='148' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='464' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='464' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='464' y='244' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='464' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='464' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='356' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='464' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='464' y='404' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='464' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='472' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='472' y='132' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='472' y='148' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='472' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='472' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='472' y='244' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='472' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='472' y='308' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='472' y='324' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='472' y='340' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='472' y='356' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='472' y='372' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='472' y='388' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='472' y='404' fill='currentColor' style='font-size:1em'>W</text>
+<text text-anchor='middle' x='472' y='420' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='472' y='436' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='480' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='480' y='148' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='480' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='480' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='480' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='480' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='480' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='340' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='480' y='356' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='480' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='480' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='488' y='148' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='488' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='488' y='196' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='488' y='244' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='488' y='260' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='488' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='340' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='488' y='356' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='488' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='404' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='488' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='488' y='532' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='488' y='548' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='488' y='564' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='488' y='580' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='496' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='496' y='148' fill='currentColor' style='font-size:1em'>?</text>
+<text text-anchor='middle' x='496' y='164' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 492,200 L 500,216' fill='none' stroke='currentColor'></path>
+<path d='M 492,264 L 500,248' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='496' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='340' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='496' y='356' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='496' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='404' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='496' y='420' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='496' y='548' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='496' y='564' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='496' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 500,104 L 508,120' fill='none' stroke='currentColor'></path>
+<path d='M 500,168 L 508,152' fill='none' stroke='currentColor'></path>
+<path d='M 500,216 L 508,232' fill='none' stroke='currentColor'></path>
+<path d='M 500,248 L 508,232' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='504' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='340' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='504' y='356' fill='currentColor' style='font-size:1em'>)</text>
+<text text-anchor='middle' x='504' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='388' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='504' y='404' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='504' y='420' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='504' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='484' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='504' y='500' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='504' y='516' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='504' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='504' y='548' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='504' y='564' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='504' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<path d='M 508,120 L 516,136' fill='none' stroke='currentColor'></path>
+<path d='M 508,152 L 516,136' fill='none' stroke='currentColor'></path>
+<text text-anchor='middle' x='512' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='512' y='244' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='512' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='340' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='512' y='372' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='500' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='512' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='512' y='548' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='512' y='564' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='512' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='520' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='520' y='148' fill='currentColor' style='font-size:1em'>y</text>
+<text text-anchor='middle' x='520' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='520' y='244' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='520' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='324' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='520' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='520' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='520' y='372' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='520' y='436' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='520' y='452' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='520' y='468' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='520' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='500' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='520' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='520' y='548' fill='currentColor' style='font-size:1em'>,</text>
+<text text-anchor='middle' x='520' y='564' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='520' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='528' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='528' y='148' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='528' y='228' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='528' y='244' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='528' y='308' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='500' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='528' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='528' y='564' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='528' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='536' y='132' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='536' y='148' fill='currentColor' style='font-size:1em'>s</text>
+<text text-anchor='middle' x='536' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='536' y='260' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='536' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='536' y='292' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='536' y='308' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='536' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='500' fill='currentColor' style='font-size:1em'>'</text>
+<text text-anchor='middle' x='536' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='536' y='548' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='536' y='564' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='536' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='544' y='116' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='544' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='544' y='148' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='544' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='500' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='544' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='544' y='564' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='544' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='552' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='132' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='552' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='552' y='548' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='552' y='564' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='552' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='560' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='560' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='436' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='500' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='560' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='560' y='548' fill='currentColor' style='font-size:1em'>H</text>
+<text text-anchor='middle' x='560' y='564' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='560' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='568' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='568' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='568' y='132' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='568' y='148' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='568' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='196' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='212' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='228' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='260' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='292' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='324' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='372' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='388' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='404' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='420' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='568' y='436' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='568' y='468' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='568' y='484' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='568' y='500' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='568' y='516' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='568' y='532' fill='currentColor' style='font-size:1em'>▽</text>
+<text text-anchor='middle' x='568' y='548' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='568' y='564' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='568' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='576' y='116' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='132' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='576' y='148' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='576' y='548' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='576' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='36' fill='currentColor' style='font-size:1em'>_</text>
+<text text-anchor='middle' x='584' y='116' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='584' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='584' y='148' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='584' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='500' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='584' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='584' y='548' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='584' y='564' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='584' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='20' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='592' y='36' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='592' y='52' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='592' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='500' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='592' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='592' y='548' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='592' y='564' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='592' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='36' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='600' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='500' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='600' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='600' y='564' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='600' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='36' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='608' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='468' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='500' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='608' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='608' y='548' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='608' y='564' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='608' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='36' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='616' y='52' fill='currentColor' style='font-size:1em'>┬</text>
+<text text-anchor='middle' x='616' y='68' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='100' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='132' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='148' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='164' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='196' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='212' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='228' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='260' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='292' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='324' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='356' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='372' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='388' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='404' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='420' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='436' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='452' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='616' y='468' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='616' y='484' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='500' fill='currentColor' style='font-size:1em'>G</text>
+<text text-anchor='middle' x='616' y='516' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='616' y='548' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='616' y='564' fill='currentColor' style='font-size:1em'>B</text>
+<text text-anchor='middle' x='616' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='624' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='624' y='36' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='624' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='624' y='484' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='624' y='500' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='624' y='516' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='624' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='624' y='548' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='624' y='564' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='624' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='632' y='20' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='632' y='36' fill='currentColor' style='font-size:1em'>!</text>
+<text text-anchor='middle' x='632' y='52' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='632' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='632' y='564' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='632' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='640' y='20' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='640' y='36' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='640' y='52' fill='currentColor' style='font-size:1em'>┘</text>
+<text text-anchor='middle' x='640' y='532' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='640' y='564' fill='currentColor' style='font-size:1em'>!</text>
+<text text-anchor='middle' x='640' y='580' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='648' y='532' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='648' y='548' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='648' y='564' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='648' y='580' fill='currentColor' style='font-size:1em'>┘</text>
+</g>
+
+    </svg>
+  
+</div>
+
+
+<h3 id="table">
+  Table
+</h3>
+<p><a href="https://arthursonzogni.com/Diagon/#Table">https://arthursonzogni.com/Diagon/#Table</a></p>
+
+
+
+<div class="goat svg-container w-80 dark-blue">
+  
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      
+        viewBox="0 0 408 409"
+      >
+      <g transform='translate(8,16)'>
+<text text-anchor='middle' x='0' y='4' fill='currentColor' style='font-size:1em'>┌</text>
+<text text-anchor='middle' x='0' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='36' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='68' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='100' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='132' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='148' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='164' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='196' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='212' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='228' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='260' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='292' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='324' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='356' fill='currentColor' style='font-size:1em'>├</text>
+<text text-anchor='middle' x='0' y='372' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='0' y='388' fill='currentColor' style='font-size:1em'>└</text>
+<text text-anchor='middle' x='8' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='52' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='8' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='84' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='8' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='116' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='8' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='148' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='8' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='180' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='8' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='340' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='8' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='8' y='372' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='8' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='52' fill='currentColor' style='font-size:1em'>Y</text>
+<text text-anchor='middle' x='16' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='84' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='16' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='116' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='16' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='148' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='16' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='180' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='16' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='340' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='16' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='16' y='372' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='16' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='52' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='24' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='84' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='24' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='116' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='24' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='148' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='24' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='180' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='24' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='340' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='24' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='24' y='372' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='24' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='52' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='32' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='84' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='32' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='116' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='32' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='148' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='32' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='180' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='32' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='340' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='32' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='32' y='372' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='32' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='52' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='40' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='84' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='40' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='40' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='180' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='40' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='340' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='40' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='40' y='372' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='40' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='52' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='48' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='84' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='48' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='48' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='180' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='48' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='340' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='48' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='48' y='372' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='48' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='84' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='56' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='56' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='340' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='56' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='56' y='372' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='56' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='64' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='64' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='340' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='64' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='64' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='84' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='72' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='72' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='340' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='72' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='72' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='84' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='80' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='80' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='340' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='80' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='80' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='52' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='84' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='116' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='148' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='180' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='212' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='88' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='244' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='88' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='276' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='88' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='308' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='88' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='340' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='88' y='372' fill='currentColor' style='font-size:1em'>:</text>
+<text text-anchor='middle' x='88' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='96' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='52' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='104' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='104' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='148' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='104' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='180' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='104' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='212' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='104' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='244' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='104' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='276' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='104' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='308' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='104' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='340' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='104' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='104' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='104' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='84' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='112' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='148' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='112' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='180' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='112' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='212' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='112' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='244' fill='currentColor' style='font-size:1em'>[</text>
+<text text-anchor='middle' x='112' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='276' fill='currentColor' style='font-size:1em'>(</text>
+<text text-anchor='middle' x='112' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='308' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='112' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='340' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='112' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='112' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='112' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='52' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='120' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='120' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='148' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='120' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='180' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='120' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='212' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='120' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='244' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='120' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='276' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='120' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='308' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='120' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='340' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='120' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='120' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='120' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='52' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='128' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='84' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='128' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='148' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='128' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='180' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='128' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='212' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='128' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='340' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='128' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='128' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='128' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='52' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='136' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='84' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='136' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='148' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='136' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='180' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='136' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='212' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='136' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='276' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='308' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='136' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='340' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='136' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='136' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='52' fill='currentColor' style='font-size:1em'>D</text>
+<text text-anchor='middle' x='144' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='144' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='116' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='144' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='148' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='144' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='180' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='144' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='212' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='144' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='244' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='144' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='276' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='144' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='308' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='144' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='340' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='144' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='144' y='372' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='144' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='52' fill='currentColor' style='font-size:1em'>U</text>
+<text text-anchor='middle' x='152' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='84' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='152' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='180' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='152' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='212' fill='currentColor' style='font-size:1em'>L</text>
+<text text-anchor='middle' x='152' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='244' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='152' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='276' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='152' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='308' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='152' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='152' y='372' fill='currentColor' style='font-size:1em'>h</text>
+<text text-anchor='middle' x='152' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='52' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='160' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='160' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='116' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='160' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='148' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='160' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='180' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='160' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='244' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='160' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='276' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='160' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='308' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='160' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='340' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='160' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='160' y='372' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='160' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='52' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='168' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='116' fill='currentColor' style='font-size:1em'>|</text>
+<text text-anchor='middle' x='168' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='180' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='244' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='276' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='308' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='168' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='168' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='168' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='52' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='176' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='84' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='176' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='116' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='176' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='148' fill='currentColor' style='font-size:1em'>F</text>
+<text text-anchor='middle' x='176' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='180' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='176' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='244' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='176' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='276' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='176' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='308' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='176' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='340' fill='currentColor' style='font-size:1em'>l</text>
+<text text-anchor='middle' x='176' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='176' y='372' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='176' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='52' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='184' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='148' fill='currentColor' style='font-size:1em'>A</text>
+<text text-anchor='middle' x='184' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='244' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='184' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='276' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='184' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='308' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='184' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='340' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='184' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='184' y='372' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='184' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='52' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='192' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='84' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='192' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='116' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='192' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='148' fill='currentColor' style='font-size:1em'>C</text>
+<text text-anchor='middle' x='192' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='244' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='192' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='276' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='192' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='308' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='192' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='340' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='192' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='192' y='372' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='192' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='84' fill='currentColor' style='font-size:1em'>=</text>
+<text text-anchor='middle' x='200' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='116' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='200' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='148' fill='currentColor' style='font-size:1em'>T</text>
+<text text-anchor='middle' x='200' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='244' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='200' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='276' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='200' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='308' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='200' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='340' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='200' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='200' y='372' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='200' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='52' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='208' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='84' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='208' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='116' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='208' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='148' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='208' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='244' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='208' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='276' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='208' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='308' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='208' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='340' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='208' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='208' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='208' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='116' fill='currentColor' style='font-size:1em'>M</text>
+<text text-anchor='middle' x='216' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='148' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='216' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='340' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='216' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='216' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='52' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='224' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='224' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='244' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='224' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='276' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='224' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='308' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='224' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='224' y='372' fill='currentColor' style='font-size:1em'>{</text>
+<text text-anchor='middle' x='224' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='84' fill='currentColor' style='font-size:1em'>X</text>
+<text text-anchor='middle' x='232' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='116' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='232' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='148' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='232' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='244' fill='currentColor' style='font-size:1em'>]</text>
+<text text-anchor='middle' x='232' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='276' fill='currentColor' style='font-size:1em'>)</text>
+<text text-anchor='middle' x='232' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='308' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='232' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='340' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='232' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='232' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='84' fill='currentColor' style='font-size:1em'>P</text>
+<text text-anchor='middle' x='240' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='244' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='240' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='276' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='240' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='308' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='240' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='240' y='372' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='240' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='84' fill='currentColor' style='font-size:1em'>R</text>
+<text text-anchor='middle' x='248' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='116' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='248' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='148' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='248' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='340' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='248' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='248' y='372' fill='currentColor' style='font-size:1em'>h</text>
+<text text-anchor='middle' x='248' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='84' fill='currentColor' style='font-size:1em'>E</text>
+<text text-anchor='middle' x='256' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='308' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='256' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='256' y='372' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='256' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='84' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='264' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='264' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='264' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='84' fill='currentColor' style='font-size:1em'>S</text>
+<text text-anchor='middle' x='272' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='272' y='372' fill='currentColor' style='font-size:1em'>a</text>
+<text text-anchor='middle' x='272' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='84' fill='currentColor' style='font-size:1em'>I</text>
+<text text-anchor='middle' x='280' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='280' y='372' fill='currentColor' style='font-size:1em'>c</text>
+<text text-anchor='middle' x='280' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='84' fill='currentColor' style='font-size:1em'>O</text>
+<text text-anchor='middle' x='288' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='288' y='372' fill='currentColor' style='font-size:1em'>t</text>
+<text text-anchor='middle' x='288' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='84' fill='currentColor' style='font-size:1em'>N</text>
+<text text-anchor='middle' x='296' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='296' y='372' fill='currentColor' style='font-size:1em'>e</text>
+<text text-anchor='middle' x='296' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='304' y='372' fill='currentColor' style='font-size:1em'>r</text>
+<text text-anchor='middle' x='304' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='84' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='312' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='312' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='84' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='320' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='320' y='372' fill='currentColor' style='font-size:1em'>}</text>
+<text text-anchor='middle' x='320' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='84' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='328' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='328' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='336' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='336' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='84' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='344' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='344' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='344' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='352' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='352' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='360' y='372' fill='currentColor' style='font-size:1em'>"</text>
+<text text-anchor='middle' x='360' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='368' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='376' y='372' fill='currentColor' style='font-size:1em'>.</text>
+<text text-anchor='middle' x='376' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='4' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='36' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='52' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='68' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='84' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='100' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='116' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='132' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='148' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='164' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='180' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='196' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='228' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='260' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='292' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='324' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='340' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='356' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='384' y='372' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='384' y='388' fill='currentColor' style='font-size:1em'>─</text>
+<text text-anchor='middle' x='392' y='4' fill='currentColor' style='font-size:1em'>┐</text>
+<text text-anchor='middle' x='392' y='20' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='36' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='68' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='100' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='132' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='164' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='196' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='212' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='228' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='244' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='260' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='276' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='292' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='308' fill='currentColor' style='font-size:1em'>│</text>
+<text text-anchor='middle' x='392' y='324' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='356' fill='currentColor' style='font-size:1em'>┤</text>
+<text text-anchor='middle' x='392' y='388' fill='currentColor' style='font-size:1em'>┘</text>
+</g>
+
+    </svg>
+  
+</div>
+
+   <div class="time">
+     <time datetime="2022-10-25">2022-10-25&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 12 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/posts/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  <a href="https://github.com/ntk148v/shibui">shibui</a>
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/posts/hugoisforlovers/index.html b/homepage/public/posts/hugoisforlovers/index.html
new file mode 100644
index 0000000..2cf4ab9
--- /dev/null
+++ b/homepage/public/posts/hugoisforlovers/index.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Getting Started with Hugo | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/posts/hugoisforlovers/" />
+
+
+<meta property="og:title" content="Getting Started with Hugo" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/posts/hugoisforlovers/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Getting Started with Hugo" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Getting Started with Hugo",
+    "url": "http:\/\/localhost:1313\/posts\/hugoisforlovers\/",
+    "datePublished": "2022-10-26T17:12:11\u002b07:00",
+    "dateModified": "2022-10-26T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/posts/">Posts</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/posts/hugoisforlovers/">Getting Started with Hugo</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Getting Started with Hugo</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ul>
+    <li><a href="#step-1-install-hugo">Step 1. Install Hugo</a></li>
+    <li><a href="#step-2-build-the-docs">Step 2. Build the Docs</a></li>
+    <li><a href="#step-3-change-the-docs-site">Step 3. Change the docs site</a></li>
+  </ul>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="step-1-install-hugo">
+  Step 1. Install Hugo
+</h2>
+<p>Go to <a href="https://github.com/spf13/hugo/releases">Hugo releases</a> and download the
+appropriate version for your OS and architecture.</p>
+<p>Save it somewhere specific as we will be using it in the next step.</p>
+<p>More complete instructions are available at <a href="https://gohugo.io/getting-started/installing/">Install Hugo</a></p>
+
+
+<h2 id="step-2-build-the-docs">
+  Step 2. Build the Docs
+</h2>
+<p>Hugo has its own example site which happens to also be the documentation site
+you are reading right now.</p>
+<p>Follow the following steps:</p>
+<pre tabindex="0"><code>1. Clone the [Hugo repository](http://github.com/spf13/hugo)
+2. Go into the repo
+3. Run hugo in server mode and build the docs
+4. Open your browser to http://localhost:1313
+</code></pre><p>Corresponding pseudo commands:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>git clone https://github.com/spf13/hugo
+</span></span><span style="display:flex;"><span>cd hugo
+</span></span><span style="display:flex;"><span>/path/to/where/you/installed/hugo server --source<span style="color:#f92672">=</span>./docs
+</span></span><span style="display:flex;"><span>&gt; <span style="color:#ae81ff">29</span> pages created
+</span></span><span style="display:flex;"><span>&gt; <span style="color:#ae81ff">0</span> tags index created
+</span></span><span style="display:flex;"><span>&gt; in <span style="color:#ae81ff">27</span> ms
+</span></span><span style="display:flex;"><span>&gt; Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>&gt; Press ctrl+c to stop
+</span></span></code></pre></div><p>Once you&rsquo;ve gotten here, follow along the rest of this page on your local build.</p>
+
+
+<h2 id="step-3-change-the-docs-site">
+  Step 3. Change the docs site
+</h2>
+<p>Stop the Hugo process by hitting Ctrl+C.</p>
+<p>Now we are going to run hugo again, but this time with hugo in watch mode.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>/path/to/hugo/from/step/1/hugo server --source<span style="color:#f92672">=</span>./docs --watch
+</span></span><span style="display:flex;"><span>&gt; <span style="color:#ae81ff">29</span> pages created
+</span></span><span style="display:flex;"><span>&gt; <span style="color:#ae81ff">0</span> tags index created
+</span></span><span style="display:flex;"><span>&gt; in <span style="color:#ae81ff">27</span> ms
+</span></span><span style="display:flex;"><span>&gt; Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>&gt; Watching <span style="color:#66d9ef">for</span> changes in /Users/spf13/Code/hugo/docs/content
+</span></span><span style="display:flex;"><span>&gt; Press ctrl+c to stop
+</span></span></code></pre></div><p>Open your <a href="http://vim.spf13.com">favorite editor</a> and change one of the source
+content pages. How about changing this very file to <em>fix the typo</em>. How about changing this very file to <em>fix the typo</em>.</p>
+<p>Content files are found in <code>docs/content/</code>. Unless otherwise specified, files
+are located at the same relative location as the url, in our case
+<code>docs/content/overview/quickstart.md</code>.</p>
+<p>Change and save this file.. Notice what happened in your terminal.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>&gt; Change detected, rebuilding site
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&gt; <span style="color:#ae81ff">29</span> pages created
+</span></span><span style="display:flex;"><span>&gt; <span style="color:#ae81ff">0</span> tags index created
+</span></span><span style="display:flex;"><span>&gt; in <span style="color:#ae81ff">26</span> ms
+</span></span></code></pre></div><p>Refresh the browser and observe that the typo is now fixed.</p>
+<p>Notice how quick that was. Try to refresh the site before it&rsquo;s finished building. I double dare you.
+Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.</p>
+
+   <div class="time">
+     <time datetime="2022-10-26">2022-10-26&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 2 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/posts/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  <a href="https://github.com/ntk148v/shibui">shibui</a>
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/posts/index.html b/homepage/public/posts/index.html
index 3b48a3b..1654d12 100644
--- a/homepage/public/posts/index.html
+++ b/homepage/public/posts/index.html
@@ -1,110 +1,129 @@
-<!DOCTYPE html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    
-    <title>My New Hugo Project</title>
-    <meta name="viewport" content="width=device-width,minimum-scale=1">
-    <meta name="description" content="">
-    <meta name="generator" content="Hugo 0.161.1">
-    
-    
-    
-      <meta name="robots" content="index, follow">
-    
-    
-
-    <link rel="stylesheet" href="/ananke/css/main.fe543ec729f225f1a33caed07775c832a416476900d82ba51765d6ead9de6758.css" integrity="sha256-/lQ&#43;xynyJfGjPK7Qd3XIMqQWR2kA2CulF2XW6tneZ1g=" crossorigin="anonymous">
-    
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Posts | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/posts/" />
 
 
-    
-      
+<meta property="og:title" content="Posts" />
 
-    
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/posts/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Posts" />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/posts/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
 
-    
-    
-      <link href="/posts/index.xml" rel="alternate" type="application/rss+xml" title="My New Hugo Project" />
-      <link href="/posts/index.xml" rel="feed" type="application/rss+xml" title="My New Hugo Project" />
-      
-    
 
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
     
-      <link rel="canonical" href="https://example.org/posts/">
+  
     
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
 
+  
+  <li class="current">
     
+    <a href="/posts/">Posts</a>
     
-    <meta property="og:url" content="https://example.org/posts/">
-  <meta property="og:site_name" content="My New Hugo Project">
-  <meta property="og:title" content="Posts">
-  <meta property="og:locale" content="en_us">
-  <meta property="og:type" content="website">
+  </li>
 
-  <meta itemprop="name" content="Posts">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="Posts">
-
-      
-      
-    
-	
-  </head><body class="ma0 avenir bg-near-white production is-section is-section">
-    
-
-  <header>
-    <div class="pb3-m pb6-l bg-black">
-      <nav class="pv3 ph3 ph4-ns" role="navigation">
-  <div class="flex-l center items-center justify-between">
-    <a href="/" class="f3 fw2 hover-white white-90 dib no-underline">
-      
-        My New Hugo Project
-      
-    </a>
-    <div class="flex-l items-center">
-      
-
-      
-      <div class="ananke-socials"></div>
-
-    </div>
-  </div>
+  </ol>
 </nav>
 
-      <div class="tc-l pv3 ph3 ph4-ns">
-        <h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title">
-          Posts
-        </h1>
-        
-      </div>
+
+
+</header>
+    <main id="main-content" role="main">
+    <h1>Posts</h1>
+    
+    <div class="time-list">
+        <ul>
+            
+            <li>
+                <span><time datetime="2026-05-18">2026-05-18&nbsp;</time>
+</span>
+                <div><a href="/posts/my-first-post/">My First Post</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-26">2022-10-26&nbsp;</time>
+</span>
+                <div><a href="/posts/hugoisforlovers/">Getting Started with Hugo</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-25">2022-10-25&nbsp;</time>
+</span>
+                <div><a href="/posts/diagrams/">Hugo Diagrams</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-20">2022-10-20&nbsp;</time>
+</span>
+                <div><a href="/posts/introduce-hugo/">Introduce Hugo</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2021-10-22">2021-10-22&nbsp;</time>
+</span>
+                <div><a href="/posts/creating-a-new-theme/">Creating a New Theme</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2021-10-22">2021-10-22&nbsp;</time>
+</span>
+                <div><a href="/posts/migrate-from-jekyll/">Migrate to Hugo from Jekyll</a></div>
+            </li>
+            
+        </ul>
     </div>
-  </header>
-
-
-    <main class="pb7" role="main">
-      
-  <article class="pa3 pa4-ns nested-copy-line-height">
-    <section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy nested-links mid-gray"></section>
-    <section class="flex-ns mt5 flex-wrap justify-around">
-      
-    </section>
-    </article>
-
-    </main>
-    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
-  <div class="flex justify-between">
-  <a class="f4 fw4 hover-white white-70 dn dib-ns pv2 ph3 no-underline" href="https://example.org/" >
-    &copy;  My New Hugo Project 2026 
-  </a>
-    <div><div class="ananke-socials"></div>
-</div>
-  </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  <a href="https://github.com/ntk148v/shibui">shibui</a>
+</p>
 </footer>
-
   </body>
 </html>
-
-
-
diff --git a/homepage/public/posts/index.xml b/homepage/public/posts/index.xml
index 193dc31..3b96302 100644
--- a/homepage/public/posts/index.xml
+++ b/homepage/public/posts/index.xml
@@ -1,11 +1,54 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
-    <title>Posts on My New Hugo Project</title>
-    <link>https://example.org/posts/</link>
-    <description>Recent content in Posts on My New Hugo Project</description>
+    <title>Posts on Thomas Internet Garden</title>
+    <link>http://localhost:1313/posts/</link>
+    <description>Recent content in Posts on Thomas Internet Garden</description>
     <generator>Hugo</generator>
     <language>en-us</language>
-    <atom:link href="https://example.org/posts/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 18 May 2026 23:03:26 +0200</lastBuildDate>
+    <atom:link href="http://localhost:1313/posts/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>My First Post</title>
+      <link>http://localhost:1313/posts/my-first-post/</link>
+      <pubDate>Mon, 18 May 2026 23:03:26 +0200</pubDate>
+      <guid>http://localhost:1313/posts/my-first-post/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This is &lt;strong&gt;bold&lt;/strong&gt; text, and this is &lt;em&gt;emphasized&lt;/em&gt; text.&lt;/p&gt;&#xA;&lt;p&gt;Visit the &lt;a href=&#34;https://gohugo.io&#34;&gt;Hugo&lt;/a&gt; website!&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Getting Started with Hugo</title>
+      <link>http://localhost:1313/posts/hugoisforlovers/</link>
+      <pubDate>Wed, 26 Oct 2022 17:12:11 +0700</pubDate>
+      <guid>http://localhost:1313/posts/hugoisforlovers/</guid>
+      <description>&lt;h2 id=&#34;step-1-install-hugo&#34;&gt;&#xA;  Step 1. Install Hugo&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Go to &lt;a href=&#34;https://github.com/spf13/hugo/releases&#34;&gt;Hugo releases&lt;/a&gt; and download the&#xA;appropriate version for your OS and architecture.&lt;/p&gt;&#xA;&lt;p&gt;Save it somewhere specific as we will be using it in the next step.&lt;/p&gt;&#xA;&lt;p&gt;More complete instructions are available at &lt;a href=&#34;https://gohugo.io/getting-started/installing/&#34;&gt;Install Hugo&lt;/a&gt;&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;step-2-build-the-docs&#34;&gt;&#xA;  Step 2. Build the Docs&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo has its own example site which happens to also be the documentation site&#xA;you are reading right now.&lt;/p&gt;&#xA;&lt;p&gt;Follow the following steps:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Hugo Diagrams</title>
+      <link>http://localhost:1313/posts/diagrams/</link>
+      <pubDate>Tue, 25 Oct 2022 17:12:11 +0700</pubDate>
+      <guid>http://localhost:1313/posts/diagrams/</guid>
+      <description>&lt;p&gt;Hugo version &amp;gt;= 0.93.0&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;goat-diagrams-ascii&#34;&gt;&#xA;  GoAT Diagrams (Ascii)&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo! supports &lt;a href=&#34;https://github.com/bep/goat&#34;&gt;GoAT&lt;/a&gt; natively. This means that this code block:&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;```goat&#xA;      .               .                .               .--- 1          .-- 1     / 1&#xA;     / \              |                |           .---+            .-+         +&#xA;    /   \         .---+---.         .--+--.        |   &amp;#39;--- 2      |   &amp;#39;-- 2   / \ 2&#xA;   +     +        |       |        |       |    ---+            ---+          +&#xA;  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3&#xA; /   \ /   \    |   |   |   |    |   |   |   |     &amp;#39;---+            &amp;#39;-+         +&#xA; 1   2 3   4    1   2   3   4    1   2   3   4         &amp;#39;--- 4          &amp;#39;-- 4     \ 4&#xA;&#xA;```&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Will be rendered as:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Introduce Hugo</title>
+      <link>http://localhost:1313/posts/introduce-hugo/</link>
+      <pubDate>Thu, 20 Oct 2022 17:12:11 +0700</pubDate>
+      <guid>http://localhost:1313/posts/introduce-hugo/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in &lt;a href=&#34;https://github.com/gohugoio/hugo&#34;&gt;Hugo&lt;/a&gt;. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Creating a New Theme</title>
+      <link>http://localhost:1313/posts/creating-a-new-theme/</link>
+      <pubDate>Fri, 22 Oct 2021 17:12:11 +0700</pubDate>
+      <guid>http://localhost:1313/posts/creating-a-new-theme/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Migrate to Hugo from Jekyll</title>
+      <link>http://localhost:1313/posts/migrate-from-jekyll/</link>
+      <pubDate>Fri, 22 Oct 2021 17:12:11 +0700</pubDate>
+      <guid>http://localhost:1313/posts/migrate-from-jekyll/</guid>
+      <description>&lt;h2 id=&#34;move-static-content-to-static&#34;&gt;&#xA;  Move static content to &lt;code&gt;static&lt;/code&gt;&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Jekyll has a rule that any directory not starting with &lt;code&gt;_&lt;/code&gt; will be copied as-is to the &lt;code&gt;_site&lt;/code&gt; output. Hugo keeps all static content under &lt;code&gt;static&lt;/code&gt;. You should therefore move it all there.&#xA;With Jekyll, something that looked like&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;▾ &amp;lt;root&amp;gt;/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    ▾ images/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        logo.png&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;should become&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;▾ &amp;lt;root&amp;gt;/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    ▾ static/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        ▾ images/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            logo.png&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Additionally, you&amp;rsquo;ll want any files that should reside at the root (such as &lt;code&gt;CNAME&lt;/code&gt;) to be moved to &lt;code&gt;static&lt;/code&gt;.&lt;/p&gt;</description>
+    </item>
   </channel>
 </rss>
diff --git a/homepage/public/posts/introduce-hugo/index.html b/homepage/public/posts/introduce-hugo/index.html
new file mode 100644
index 0000000..bd25fe8
--- /dev/null
+++ b/homepage/public/posts/introduce-hugo/index.html
@@ -0,0 +1,1201 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Introduce Hugo | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/posts/introduce-hugo/" />
+
+
+<meta property="og:title" content="Introduce Hugo" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/posts/introduce-hugo/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Introduce Hugo" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Introduce Hugo",
+    "url": "http:\/\/localhost:1313\/posts\/introduce-hugo\/",
+    "datePublished": "2022-10-20T17:12:11\u002b07:00",
+    "dateModified": "2022-10-20T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/posts/">Posts</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/posts/introduce-hugo/">Introduce Hugo</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Introduce Hugo</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+        <li><a href="/tags/tech/">#Tech</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ul>
+    <li><a href="#introduction">Introduction</a></li>
+    <li><a href="#some-definitions">Some Definitions</a>
+      <ul>
+        <li><a href="#skins">Skins</a></li>
+        <li><a href="#the-home-page">The Home Page</a></li>
+        <li><a href="#site-configuration-file">Site Configuration File</a></li>
+        <li><a href="#content">Content</a></li>
+        <li><a href="#template-files">Template Files</a></li>
+      </ul>
+    </li>
+    <li><a href="#create-a-new-site">Create a New Site</a>
+      <ul>
+        <li><a href="#generate-the-html-for-the-new-site">Generate the HTML For the New Site</a></li>
+        <li><a href="#test-the-new-site">Test the New Site</a></li>
+      </ul>
+    </li>
+    <li><a href="#create-a-new-theme">Create a New Theme</a>
+      <ul>
+        <li><a href="#create-a-skeleton">Create a Skeleton</a></li>
+        <li><a href="#update-the-configuration-file-to-use-the-theme">Update the Configuration File to Use the Theme</a></li>
+        <li><a href="#generate-the-site">Generate the Site</a></li>
+      </ul>
+    </li>
+    <li><a href="#the-theme-development-cycle">The Theme Development Cycle</a>
+      <ul>
+        <li><a href="#purge-the-public-directory">Purge the public/ Directory</a></li>
+        <li><a href="#hugos-watch-option">Hugo&rsquo;s Watch Option</a></li>
+        <li><a href="#live-reload">Live Reload</a></li>
+        <li><a href="#development-commands">Development Commands</a></li>
+      </ul>
+    </li>
+    <li><a href="#update-the-home-page-template">Update the Home Page Template</a>
+      <ul>
+        <li><a href="#make-a-static-home-page">Make a Static Home Page</a></li>
+        <li><a href="#build-a-dynamic-home-page">Build a &ldquo;Dynamic&rdquo; Home Page</a></li>
+        <li><a href="#list-and-single-templates">List and Single Templates</a></li>
+        <li><a href="#add-content-to-the-homepage">Add Content to the Homepage</a></li>
+        <li><a href="#add-content-to-the-posts">Add Content to the Posts</a></li>
+        <li><a href="#linking-to-content">Linking to Content</a></li>
+        <li><a href="#create-a-post-listing">Create a Post Listing</a></li>
+      </ul>
+    </li>
+    <li><a href="#creating-top-level-pages">Creating Top Level Pages</a></li>
+    <li><a href="#sharing-templates">Sharing Templates</a>
+      <ul>
+        <li><a href="#create-the-header-and-footer-partials">Create the Header and Footer Partials</a></li>
+        <li><a href="#update-the-home-page-template-to-use-the-partials">Update the Home Page Template to Use the Partials</a></li>
+        <li><a href="#update-the-default-single-template-to-use-the-partials">Update the Default Single Template to Use the Partials</a></li>
+      </ul>
+    </li>
+    <li><a href="#add-date-published-to-posts">Add “Date Published” to Posts</a>
+      <ul>
+        <li><a href="#add-date-published-to-the-template">Add “Date Published” to the Template</a></li>
+        <li><a href="#dont-repeat-yourself">Don&rsquo;t Repeat Yourself</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="introduction">
+  Introduction
+</h2>
+<p>This tutorial will show you how to create a simple theme in <a href="https://github.com/gohugoio/hugo">Hugo</a>. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&rsquo;t cover using CSS to style your theme.</p>
+<p>We&rsquo;ll start with creating a new site with a very basic template. Then we&rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.</p>
+<p>In this tutorial, commands that you enter will start with the &ldquo;$&rdquo; prompt. The output will follow. Lines that start with &ldquo;#&rdquo; are comments that I&rsquo;ve added to explain a point. When I show updates to a file, the &ldquo;:wq&rdquo; on the last line means to save the file.</p>
+<p>Here&rsquo;s an example:</p>
+<pre tabindex="0"><code>## this is a comment
+$ echo this is a command
+this is a command
+
+## edit the file
+$ vi foo.md
+---
+date: &#34;2014-09-28&#34;
+title: &#34;creating a new theme&#34;
+---
+
+bah and humbug
+:wq
+
+## show it
+$ cat foo.md
+---
+date: &#34;2014-09-28&#34;
+title: &#34;creating a new theme&#34;
+---
+
+bah and humbug
+$
+</code></pre>
+
+<h2 id="some-definitions">
+  Some Definitions
+</h2>
+<p>There are a few concepts that you need to understand before creating a theme.</p>
+
+
+<h3 id="skins">
+  Skins
+</h3>
+<p>Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.</p>
+<p>You have two ways to create a skin. The simplest way is to create it in the <code>layouts/</code> directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the <code>layouts/</code> directory so it will always find the skin.</p>
+<p>Your second choice is to create it in a sub-directory of the <code>themes/</code> directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?</p>
+<p>The difference between creating a skin in <code>layouts/</code> and creating it in <code>themes/</code> is very subtle. A skin in <code>layouts/</code> can’t be customized without updating the templates and static files that it is built from. A skin created in <code>themes/</code>, on the other hand, can be and that makes it easier for other people to use it.</p>
+<p>The rest of this tutorial will call a skin created in the <code>themes/</code> directory a theme.</p>
+<p>Note that you can use this tutorial to create a skin in the <code>layouts/</code> directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.</p>
+
+
+<h3 id="the-home-page">
+  The Home Page
+</h3>
+<p>The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html.</p>
+
+
+<h3 id="site-configuration-file">
+  Site Configuration File
+</h3>
+<p>When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it.</p>
+<p>Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your <code>content/</code> directory and template files in your <code>themes/</code> directory. It will create HTML files in your <code>public/</code> directory. You can change this by specifying alternate locations in the configuration file.</p>
+
+
+<h3 id="content">
+  Content
+</h3>
+<p>Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML.</p>
+
+
+<h4 id="front-matter">
+  Front Matter
+</h4>
+<p>The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or JSON. Unlike the configuration file, Hugo doesn’t use the file’s extension to know the format. It looks for markers to signal the type. TOML is surrounded by “<code>---</code>”, YAML by “<code>---</code>”, and JSON is enclosed in curly braces. I prefer to use TOML, so you’ll need to translate my examples if you prefer YAML or JSON.</p>
+<p>The information in the front matter is passed into the template before the content is rendered into HTML.</p>
+
+
+<h4 id="markdown">
+  Markdown
+</h4>
+<p>Content is written in Markdown which makes it easier to create the content. Hugo runs the content through a Markdown engine to create the HTML which will be written to the output file.</p>
+
+
+<h3 id="template-files">
+  Template Files
+</h3>
+<p>Hugo uses template files to render content into HTML. Template files are a bridge between the content and presentation. Rules in the template define what content is published, where it&rsquo;s published to, and how it will rendered to the HTML file. The template guides the presentation by specifying the style to use.</p>
+<p>There are three types of templates: single, list, and partial. Each type takes a bit of content as input and transforms it based on the commands in the template.</p>
+<p>Hugo uses its knowledge of the content to find the template file used to render the content. If it can’t find a template that is an exact match for the content, it will shift up a level and search from there. It will continue to do so until it finds a matching template or runs out of templates to try. If it can’t find a template, it will use the default template for the site.</p>
+<p>Please note that you can use the front matter to influence Hugo’s choice of templates.</p>
+
+
+<h4 id="single-template">
+  Single Template
+</h4>
+<p>A single template is used to render a single piece of content. For example, an article or post would be a single piece of content and use a single template.</p>
+
+
+<h4 id="list-template">
+  List Template
+</h4>
+<p>A list template renders a group of related content. That could be a summary of recent postings or all articles in a category. List templates can contain multiple groups.</p>
+<p>The homepage template is a special type of list template. Hugo assumes that the home page of your site will act as the portal for the rest of the content in the site.</p>
+
+
+<h4 id="partial-template">
+  Partial Template
+</h4>
+<p>A partial template is a template that can be included in other templates. Partial templates must be called using the “partial” template command. They are very handy for rolling up common behavior. For example, your site may have a banner that all pages use. Instead of copying the text of the banner into every single and list template, you could create a partial with the banner in it. That way if you decide to change the banner, you only have to change the partial template.</p>
+
+
+<h2 id="create-a-new-site">
+  Create a New Site
+</h2>
+<p>Let&rsquo;s use Hugo to create a new web site. I&rsquo;m a Mac user, so I&rsquo;ll create mine in my home directory, in the Sites folder. If you&rsquo;re using Linux, you might have to create the folder first.</p>
+<p>The &ldquo;new site&rdquo; command will create a skeleton of a site. It will give you the basic directory structure and a useable configuration file.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo new site ~/Sites/zafta
+</span></span><span style="display:flex;"><span>$ cd ~/Sites/zafta
+</span></span><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total <span style="color:#ae81ff">8</span>
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">7</span> quoha  staff  <span style="color:#ae81ff">238</span> Sep <span style="color:#ae81ff">29</span> 16:49 .
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">3</span> quoha  staff  <span style="color:#ae81ff">102</span> Sep <span style="color:#ae81ff">29</span> 16:49 ..
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">82</span> Sep <span style="color:#ae81ff">29</span> 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 static
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Take a look in the content/ directory to confirm that it is empty.</p>
+<p>The other directories (archetypes/, layouts/, and static/) are used when customizing a theme. That&rsquo;s a topic for a different tutorial, so please ignore them for now.</p>
+
+
+<h3 id="generate-the-html-for-the-new-site">
+  Generate the HTML For the New Site
+</h3>
+<p>Running the <code>hugo</code> command with no options will read all the available content and generate the HTML files. It will also copy all static files (that&rsquo;s everything that&rsquo;s not content). Since we have an empty site, it won&rsquo;t do much, but it will do it very quickly.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>index.html _default/list.html _default/single.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">2</span> ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The &ldquo;<code>--verbose</code>&rdquo; flag gives extra information that will be helpful when we build the template. Every line of the output that starts with &ldquo;INFO:&rdquo; or &ldquo;WARN:&rdquo; is present because we used that flag. The lines that start with &ldquo;WARN:&rdquo; are warning messages. We&rsquo;ll go over them later.</p>
+<p>We can verify that the command worked by looking at the directory again.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total <span style="color:#ae81ff">8</span>
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">82</span> Sep <span style="color:#ae81ff">29</span> 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">4</span> quoha  staff  <span style="color:#ae81ff">136</span> Sep <span style="color:#ae81ff">29</span> 17:02 public
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 static
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>See that new public/ directory? Hugo placed all generated content there. When you&rsquo;re ready to publish your web site, that&rsquo;s the place to start. For now, though, let&rsquo;s just confirm that we have what we&rsquo;d expect from a site with no content.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ ls -l public
+</span></span><span style="display:flex;"><span>total <span style="color:#ae81ff">16</span>
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">416</span> Sep <span style="color:#ae81ff">29</span> 17:02 index.xml
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">262</span> Sep <span style="color:#ae81ff">29</span> 17:02 sitemap.xml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Hugo created two XML files, which is standard, but there are no HTML files.</p>
+
+
+<h3 id="test-the-new-site">
+  Test the New Site
+</h3>
+<p>Verify that you can run the built-in web server. It will dramatically shorten your development cycle if you do. Start it by running the &ldquo;server&rdquo; command. If it is successful, you will see output similar to the following:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo server --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>index.html _default/list.html _default/single.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">2</span> ms
+</span></span><span style="display:flex;"><span>Serving pages from /Users/quoha/Sites/zafta/public
+</span></span><span style="display:flex;"><span>Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>Press Ctrl+C to stop
+</span></span></code></pre></div><p>Connect to the listed URL (it&rsquo;s on the line that starts with &ldquo;Web Server&rdquo;). If everything is working correctly, you should get a page that shows the following:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>index.xml
+</span></span><span style="display:flex;"><span>sitemap.xml
+</span></span></code></pre></div><p>That&rsquo;s a listing of your public/ directory. Hugo didn&rsquo;t create a home page because our site has no content. When there&rsquo;s no index.html file in a directory, the server lists the files in the directory, which is what you should see in your browser.</p>
+<p>Let’s go back and look at those warnings again.</p>
+<pre tabindex="0"><code>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+WARN: 2014/09/29 Unable to locate layout: [404.html]
+</code></pre><p>That second warning is easier to explain. We haven’t created a template to be used to generate “page not found errors.” The 404 message is a topic for a separate tutorial.</p>
+<p>Now for the first warning. It is for the home page. You can tell because the first layout that it looked for was “index.html.” That’s only used by the home page.</p>
+<p>I like that the verbose flag causes Hugo to list the files that it&rsquo;s searching for. For the home page, they are index.html, _default/list.html, and _default/single.html. There are some rules that we&rsquo;ll cover later that explain the names and paths. For now, just remember that Hugo couldn&rsquo;t find a template for the home page and it told you so.</p>
+<p>At this point, you&rsquo;ve got a working installation and site that we can build upon. All that’s left is to add some content and a theme to display it.</p>
+
+
+<h2 id="create-a-new-theme">
+  Create a New Theme
+</h2>
+<p>Hugo doesn&rsquo;t ship with a default theme. There are a few available (I counted a dozen when I first installed Hugo) and Hugo comes with a command to create new themes.</p>
+<p>We&rsquo;re going to create a new theme called &ldquo;zafta.&rdquo; Since the goal of this tutorial is to show you how to fill out the files to pull in your content, the theme will not contain any CSS. In other words, ugly but functional.</p>
+<p>All themes have opinions on content and layout. For example, Zafta uses &ldquo;post&rdquo; over &ldquo;blog&rdquo;. Strong opinions make for simpler templates but differing opinions make it tougher to use themes. When you build a theme, consider using the terms that other themes do.</p>
+
+
+<h3 id="create-a-skeleton">
+  Create a Skeleton
+</h3>
+<p>Use the hugo &ldquo;new&rdquo; command to create the skeleton of a theme. This creates the directory structure and places empty files for you to fill out.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo new theme zafta
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ ls -l
+</span></span><span style="display:flex;"><span>total <span style="color:#ae81ff">8</span>
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 archetypes
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">82</span> Sep <span style="color:#ae81ff">29</span> 16:49 config.toml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 content
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">4</span> quoha  staff  <span style="color:#ae81ff">136</span> Sep <span style="color:#ae81ff">29</span> 17:02 public
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 16:49 static
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">3</span> quoha  staff  <span style="color:#ae81ff">102</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find themes -type f | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">1081</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/LICENSE.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff     <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff     <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/_default/list.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff     <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff     <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff     <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff     <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff    <span style="color:#ae81ff">93</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/theme.toml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype.</p>
+<p>Please take a minute to fill out the theme.toml and LICENSE.md files. They&rsquo;re optional, but if you&rsquo;re going to be distributing your theme, it tells the world who to praise (or blame). It&rsquo;s also nice to declare the license so that people will know how they can use the theme.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/theme.toml
+</span></span><span style="display:flex;"><span>author: <span style="color:#e6db74">&#34;michael d henderson&#34;</span>
+</span></span><span style="display:flex;"><span>description: <span style="color:#e6db74">&#34;a minimal working template&#34;</span>
+</span></span><span style="display:flex;"><span>license: <span style="color:#e6db74">&#34;MIT&#34;</span>
+</span></span><span style="display:flex;"><span>name: <span style="color:#e6db74">&#34;zafta&#34;</span>
+</span></span><span style="display:flex;"><span>source_repo: <span style="color:#e6db74">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>tags: <span style="color:#f92672">[</span><span style="color:#e6db74">&#34;tags&#34;</span>, <span style="color:#e6db74">&#34;categories&#34;</span><span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#75715e">## also edit themes/zafta/LICENSE.md and change</span>
+</span></span><span style="display:flex;"><span><span style="color:#75715e">## the bit that says &#34;YOUR_NAME_HERE&#34;</span>
+</span></span></code></pre></div><p>Note that the the skeleton&rsquo;s template files are empty. Don&rsquo;t worry, we&rsquo;ll be changing that shortly.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find themes/zafta -name <span style="color:#e6db74">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/_default/list.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="update-the-configuration-file-to-use-the-theme">
+  Update the Configuration File to Use the Theme
+</h3>
+<p>Now that we&rsquo;ve got a theme to work with, it&rsquo;s a good idea to add the theme name to the configuration file. This is optional, because you can always add &ldquo;-t zafta&rdquo; on all your commands. I like to put it the configuration file because I like shorter command lines. If you don&rsquo;t put it in the configuration file or specify it on the command line, you won&rsquo;t use the template that you&rsquo;re expecting to.</p>
+<p>Edit the file to add the theme, add a title for the site, and specify that all of our content will use the TOML format.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi config.toml
+</span></span><span style="display:flex;"><span>theme: <span style="color:#e6db74">&#34;zafta&#34;</span>
+</span></span><span style="display:flex;"><span>baseurl: <span style="color:#e6db74">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>languageCode: <span style="color:#e6db74">&#34;en-us&#34;</span>
+</span></span><span style="display:flex;"><span>title: <span style="color:#e6db74">&#34;zafta - totally refreshing&#34;</span>
+</span></span><span style="display:flex;"><span>MetaDataFormat: <span style="color:#e6db74">&#34;toml&#34;</span>
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="generate-the-site">
+  Generate the Site
+</h3>
+<p>Now that we have an empty theme, let&rsquo;s generate the site again.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html theme/404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">2</span> ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Did you notice that the output is different? The warning message for the home page has disappeared and we have an additional information line saying that Hugo is syncing from the theme&rsquo;s directory.</p>
+<p>Let&rsquo;s check the public/ directory to see what Hugo&rsquo;s created.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ ls -l public
+</span></span><span style="display:flex;"><span>total <span style="color:#ae81ff">16</span>
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 17:56 css
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff    <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:56 index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">407</span> Sep <span style="color:#ae81ff">29</span> 17:56 index.xml
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 17:56 js
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">243</span> Sep <span style="color:#ae81ff">29</span> 17:56 sitemap.xml
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Notice four things:</p>
+<ol>
+<li>Hugo created a home page. This is the file public/index.html.</li>
+<li>Hugo created a css/ directory.</li>
+<li>Hugo created a js/ directory.</li>
+<li>Hugo claimed that it created 0 pages. It created a file and copied over static files, but didn&rsquo;t create any pages. That&rsquo;s because it considers a &ldquo;page&rdquo; to be a file created directly from a content file. It doesn&rsquo;t count things like the index.html files that it creates automatically.</li>
+</ol>
+
+
+<h4 id="the-home-page-1">
+  The Home Page
+</h4>
+<p>Hugo supports many different types of templates. The home page is special because it gets its own type of template and its own template file. The file, layouts/index.html, is used to generate the HTML for the home page. The Hugo documentation says that this is the only required template, but that depends. Hugo&rsquo;s warning message shows that it looks for three different templates:</p>
+<pre tabindex="0"><code>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
+</code></pre><p>If it can&rsquo;t find any of these, it completely skips creating the home page. We noticed that when we built the site without having a theme installed.</p>
+<p>When Hugo created our theme, it created an empty home page template. Now, when we build the site, Hugo finds the template and uses it to generate the HTML for the home page. Since the template file is empty, the HTML file is empty, too. If the template had any rules in it, then Hugo would have used them to generate the home page.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find . -name index.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 20:21 ./public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 ./themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h4 id="the-magic-of-static">
+  The Magic of Static
+</h4>
+<p>Hugo does two things when generating the site. It uses templates to transform content into HTML and it copies static files into the site. Unlike content, static files are not transformed. They are copied exactly as they are.</p>
+<p>Hugo assumes that your site will use both CSS and JavaScript, so it creates directories in your theme to hold them. Remember opinions? Well, Hugo&rsquo;s opinion is that you&rsquo;ll store your CSS in a directory named css/ and your JavaScript in a directory named js/. If you don&rsquo;t like that, you can change the directory names in your theme directory or even delete them completely. Hugo&rsquo;s nice enough to offer its opinion, then behave nicely if you disagree.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find themes/zafta -type d | xargs ls -ld
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">7</span> quoha  staff  <span style="color:#ae81ff">238</span> Sep <span style="color:#ae81ff">29</span> 17:38 themes/zafta
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">3</span> quoha  staff  <span style="color:#ae81ff">102</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/archetypes
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">5</span> quoha  staff  <span style="color:#ae81ff">170</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">4</span> quoha  staff  <span style="color:#ae81ff">136</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/_default
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">4</span> quoha  staff  <span style="color:#ae81ff">136</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/partials
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">4</span> quoha  staff  <span style="color:#ae81ff">136</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/static
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/static/css
+</span></span><span style="display:flex;"><span>drwxr-xr-x  <span style="color:#ae81ff">2</span> quoha  staff   <span style="color:#ae81ff">68</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/static/js
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h2 id="the-theme-development-cycle">
+  The Theme Development Cycle
+</h2>
+<p>When you&rsquo;re working on a theme, you will make changes in the theme&rsquo;s directory, rebuild the site, and check your changes in the browser. Hugo makes this very easy:</p>
+<ol>
+<li>Purge the public/ directory.</li>
+<li>Run the built in web server in watch mode.</li>
+<li>Open your site in a browser.</li>
+<li>Update the theme.</li>
+<li>Glance at your browser window to see changes.</li>
+<li>Return to step 4.</li>
+</ol>
+<p>I’ll throw in one more opinion: never work on a theme on a live site. Always work on a copy of your site. Make changes to your theme, test them, then copy them up to your site. For added safety, use a tool like Git to keep a revision history of your content and your theme. Believe me when I say that it is too easy to lose both your mind and your changes.</p>
+<p>Check the main Hugo site for information on using Git with Hugo.</p>
+
+
+<h3 id="purge-the-public-directory">
+  Purge the public/ Directory
+</h3>
+<p>When generating the site, Hugo will create new files and update existing ones in the <code>public/</code> directory. It will not delete files that are no longer used. For example, files that were created in the wrong directory or with the wrong title will remain. If you leave them, you might get confused by them later. I recommend cleaning out your site prior to generating it.</p>
+<p>Note: If you&rsquo;re building on an SSD, you should ignore this. Churning on a SSD can be costly.</p>
+
+
+<h3 id="hugos-watch-option">
+  Hugo&rsquo;s Watch Option
+</h3>
+<p>Hugo&rsquo;s &ldquo;<code>--watch</code>&rdquo; option will monitor the content/ and your theme directories for changes and rebuild the site automatically.</p>
+
+
+<h3 id="live-reload">
+  Live Reload
+</h3>
+<p>Hugo&rsquo;s built in web server supports live reload. As pages are saved on the server, the browser is told to refresh the page. Usually, this happens faster than you can say, &ldquo;Wow, that&rsquo;s totally amazing.&rdquo;</p>
+
+
+<h3 id="development-commands">
+  Development Commands
+</h3>
+<p>Use the following commands as the basis for your workflow.</p>
+<pre tabindex="0"><code>## purge old files. hugo will recreate the public directory.
+##
+$ rm -rf public
+##
+## run hugo in watch mode
+##
+$ hugo server --watch --verbose
+</code></pre><p>Here&rsquo;s sample output showing Hugo detecting a change to the template for the home page. Once generated, the web browser automatically reloaded the page. I&rsquo;ve said this before, it&rsquo;s amazing.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo server --watch --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html theme/404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">2</span> ms
+</span></span><span style="display:flex;"><span>Watching <span style="color:#66d9ef">for</span> changes in /Users/quoha/Sites/zafta/content
+</span></span><span style="display:flex;"><span>Serving pages from /Users/quoha/Sites/zafta/public
+</span></span><span style="display:flex;"><span>Web Server is available at http://localhost:1313
+</span></span><span style="display:flex;"><span>Press Ctrl+C to stop
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 File System Event: <span style="color:#f92672">[</span><span style="color:#e6db74">&#34;/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html&#34;</span>: MODIFY|ATTRIB<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span>Change detected, rebuilding site
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html theme/404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">1</span> ms
+</span></span></code></pre></div>
+
+<h2 id="update-the-home-page-template">
+  Update the Home Page Template
+</h2>
+<p>The home page is one of a few special pages that Hugo creates automatically. As mentioned earlier, it looks for one of three files in the theme&rsquo;s layout/ directory:</p>
+<ol>
+<li>index.html</li>
+<li>_default/list.html</li>
+<li>_default/single.html</li>
+</ol>
+<p>We could update one of the default templates, but a good design decision is to update the most specific template available. That&rsquo;s not a hard and fast rule (in fact, we&rsquo;ll break it a few times in this tutorial), but it is a good generalization.</p>
+
+
+<h3 id="make-a-static-home-page">
+  Make a Static Home Page
+</h3>
+<p>Right now, that page is empty because we don&rsquo;t have any content and we don&rsquo;t have any logic in the template. Let&rsquo;s change that by adding some text to the template.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html theme/404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">2</span> ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name <span style="color:#e6db74">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">78</span> Sep <span style="color:#ae81ff">29</span> 21:26 public/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div>
+
+<h4 id="live-reload-1">
+  Live Reload
+</h4>
+<p>Note: If you&rsquo;re running the server with the <code>--watch</code> option, you&rsquo;ll see different content in the file:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;hugo says hello!&lt;/p&gt;
+</span></span><span style="display:flex;"><span>&lt;script&gt;document.write<span style="color:#f92672">(</span><span style="color:#e6db74">&#39;&lt;script src=&#34;http://&#39;</span>
+</span></span><span style="display:flex;"><span>        + <span style="color:#f92672">(</span>location.host <span style="color:#f92672">||</span> <span style="color:#e6db74">&#39;localhost&#39;</span><span style="color:#f92672">)</span>.split<span style="color:#f92672">(</span><span style="color:#e6db74">&#39;:&#39;</span><span style="color:#f92672">)[</span>0<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span>    + <span style="color:#e6db74">&#39;:1313/livereload.js?mindelay=10&#34;&gt;&lt;/&#39;</span>
+</span></span><span style="display:flex;"><span>        + <span style="color:#e6db74">&#39;script&gt;&#39;</span><span style="color:#f92672">)</span>&lt;/script&gt;&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>When you use <code>--watch</code>, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it.</p>
+
+
+<h3 id="build-a-dynamic-home-page">
+  Build a &ldquo;Dynamic&rdquo; Home Page
+</h3>
+<p>&ldquo;Dynamic home page?&rdquo; Hugo&rsquo;s a static web site generator, so this seems an odd thing to say. I mean let&rsquo;s have the home page automatically reflect the content in the site every time Hugo builds it. We&rsquo;ll use iteration in the template to do that.</p>
+
+
+<h4 id="create-new-posts">
+  Create New Posts
+</h4>
+<p>Now that we have the home page generating static content, let&rsquo;s add some content to the site. We&rsquo;ll display these posts as a list on the home page and on their own page, too.</p>
+<p>Hugo has a command to generate a skeleton post, just like it does for sites and themes.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ hugo --verbose new post/first.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/first.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>ERROR: 2014/09/29 Unable to Cast &lt;nil&gt; to map<span style="color:#f92672">[</span>string<span style="color:#f92672">]</span>interface<span style="color:#f92672">{}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>That wasn&rsquo;t very nice, was it?</p>
+<p>The &ldquo;new&rdquo; command uses an archetype to create the post file. Hugo created an empty default archetype file, but that causes an error when there&rsquo;s a theme. For me, the workaround was to create an archetypes file specifically for the post type.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Description: <span style="color:#e6db74">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>Tags: <span style="color:#f92672">[]</span>
+</span></span><span style="display:flex;"><span>Categories: <span style="color:#f92672">[]</span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find themes/zafta/archetypes -type f | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 21:53 themes/zafta/archetypes/default.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">51</span> Sep <span style="color:#ae81ff">29</span> 21:54 themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ hugo --verbose new post/first.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/first.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md
+</span></span><span style="display:flex;"><span>/Users/quoha/Sites/zafta/content/post/first.md created
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ hugo --verbose new post/second.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 attempting to create  post/second.md of post
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md
+</span></span><span style="display:flex;"><span>/Users/quoha/Sites/zafta/content/post/second.md created
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ ls -l content/post
+</span></span><span style="display:flex;"><span>total <span style="color:#ae81ff">16</span>
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">104</span> Sep <span style="color:#ae81ff">29</span> 21:54 first.md
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">105</span> Sep <span style="color:#ae81ff">29</span> 21:57 second.md
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat content/post/first.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Categories: <span style="color:#f92672">[]</span>
+</span></span><span style="display:flex;"><span>Description: <span style="color:#e6db74">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>Tags: <span style="color:#f92672">[]</span>
+</span></span><span style="display:flex;"><span>date: <span style="color:#e6db74">&#34;2014-09-29T21:54:53-05:00&#34;</span>
+</span></span><span style="display:flex;"><span>title: <span style="color:#e6db74">&#34;first&#34;</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>my first post
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat content/post/second.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>Categories: <span style="color:#f92672">[]</span>
+</span></span><span style="display:flex;"><span>Description: <span style="color:#e6db74">&#34;&#34;</span>
+</span></span><span style="display:flex;"><span>Tags: <span style="color:#f92672">[]</span>
+</span></span><span style="display:flex;"><span>date: <span style="color:#e6db74">&#34;2014-09-29T21:57:09-05:00&#34;</span>
+</span></span><span style="display:flex;"><span>title: <span style="color:#e6db74">&#34;second&#34;</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>my second post
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map<span style="color:#f92672">[</span>string<span style="color:#f92672">]</span>string<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;category&#34;</span>:<span style="color:#e6db74">&#34;categories&#34;</span>, <span style="color:#e6db74">&#34;tag&#34;</span>:<span style="color:#e6db74">&#34;tags&#34;</span><span style="color:#f92672">}</span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html theme/404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">2</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">4</span> ms
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The output says that it created 2 pages. Those are our new posts:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find public -type f -name <span style="color:#e6db74">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">78</span> Sep <span style="color:#ae81ff">29</span> 22:13 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 22:13 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 22:13 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 22:13 public/post/second/index.html
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>The new files are empty because because the templates used to generate the content are empty. The homepage doesn&rsquo;t show the new content, either. We have to update the templates to add the posts.</p>
+
+
+<h3 id="list-and-single-templates">
+  List and Single Templates
+</h3>
+<p>In Hugo, we have three major kinds of templates. There&rsquo;s the home page template that we updated previously. It is used only by the home page. We also have &ldquo;single&rdquo; templates which are used to generate output for a single content file. We also have &ldquo;list&rdquo; templates that are used to group multiple pieces of content before generating output.</p>
+<p>Generally speaking, list templates are named &ldquo;list.html&rdquo; and single templates are named &ldquo;single.html.&rdquo;</p>
+<p>There are three other types of templates: partials, content views, and terms. We will not go into much detail on these.</p>
+
+
+<h3 id="add-content-to-the-homepage">
+  Add Content to the Homepage
+</h3>
+<p>The home page will contain a list of posts. Let&rsquo;s update its template to add the posts that we just created. The logic in the template will run every time we build the site.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> range first <span style="color:#ae81ff">10</span> .Data.Pages <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between &ldquo;{{&rdquo; and &ldquo;}}&rdquo;. In our template, the commands are:</p>
+<ol>
+<li>range</li>
+<li>.Title</li>
+<li>end</li>
+</ol>
+<p>The &ldquo;range&rdquo; command is an iterator. We&rsquo;re going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created.</p>
+<p>The &ldquo;.Title&rdquo; command prints the value of the &ldquo;title&rdquo; variable. Hugo pulls it from the front matter in the Markdown file.</p>
+<p>The &ldquo;end&rdquo; command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds &ldquo;end.&rdquo; Everything between the &ldquo;range&rdquo; and &ldquo;end&rdquo; is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one.</p>
+<p>It&rsquo;s helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files.</p>
+<p>Build the web site and then verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map<span style="color:#f92672">[</span>string<span style="color:#f92672">]</span>string<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;tag&#34;</span>:<span style="color:#e6db74">&#34;tags&#34;</span>, <span style="color:#e6db74">&#34;category&#34;</span>:<span style="color:#e6db74">&#34;categories&#34;</span><span style="color:#f92672">}</span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html theme/404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">2</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">4</span> ms
+</span></span><span style="display:flex;"><span>$ find public -type f -name <span style="color:#e6db74">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">94</span> Sep <span style="color:#ae81ff">29</span> 22:23 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 22:23 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 22:23 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 22:23 public/post/second/index.html
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;second&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;first&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let&rsquo;s take a moment to appreciate what we&rsquo;ve done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you&rsquo;ve learned everything you need to know to build a theme. All that&rsquo;s really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine.</p>
+<p>And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don&rsquo;t worry, though, that&rsquo;s all to come.</p>
+
+
+<h3 id="add-content-to-the-posts">
+  Add Content to the Posts
+</h3>
+<p>We&rsquo;re working with posts, which are in the content/post/ directory. That means that their section is &ldquo;post&rdquo; (and if we don&rsquo;t do something weird, their type is also &ldquo;post&rdquo;).</p>
+<p>Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can&rsquo;t find one, then it will look in the _default/ directory. There are some twists that we&rsquo;ll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html.</p>
+<p>Now that we know the search rule, let&rsquo;s see what we actually have available:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find themes/zafta -name single.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">132</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/_default/single.html
+</span></span></code></pre></div><p>We could create a new template, post/single.html, or change the default. Since we don&rsquo;t know of any other content types, let&rsquo;s start with updating the default.</p>
+<p>Remember, any content that we haven&rsquo;t created a template for will end up using this template. That can be good or bad. Bad because I know that we&rsquo;re going to be adding different types of content and we&rsquo;re going to end up undoing some of the changes we&rsquo;ve made. It&rsquo;s good because we&rsquo;ll be able to see immediate results. It&rsquo;s also good to start here because we can start to build the basic layout for the site. As we add more content types, we&rsquo;ll refactor this file and move logic around. Hugo makes that fairly painless, so we&rsquo;ll accept the cost and proceed.</p>
+<p>Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you&rsquo;re building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That&rsquo;s a refreshing amount of joy right there.</p>
+
+
+<h4 id="update-the-template-file">
+  Update the Template File
+</h4>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> .Content <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Build the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map<span style="color:#f92672">[</span>string<span style="color:#f92672">]</span>string<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;tag&#34;</span>:<span style="color:#e6db74">&#34;tags&#34;</span>, <span style="color:#e6db74">&#34;category&#34;</span>:<span style="color:#e6db74">&#34;categories&#34;</span><span style="color:#f92672">}</span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html theme/404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">2</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">4</span> ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name <span style="color:#e6db74">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff   <span style="color:#ae81ff">94</span> Sep <span style="color:#ae81ff">29</span> 22:40 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">125</span> Sep <span style="color:#ae81ff">29</span> 22:40 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff    <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 22:40 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">128</span> Sep <span style="color:#ae81ff">29</span> 22:40 public/post/second/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/post/first/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;first&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;first&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;my first post&lt;/p&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/post/second/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>  &lt;title&gt;second&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;second&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;p&gt;my second post&lt;/p&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div><p>Notice that the posts now have content. You can go to localhost:1313/post/first to verify.</p>
+
+
+<h3 id="linking-to-content">
+  Linking to Content
+</h3>
+<p>The posts are on the home page. Let&rsquo;s add a link from there to the post. Since this is the home page, we&rsquo;ll update its template.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> range first <span style="color:#ae81ff">10</span> .Data.Pages <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ .Permalink }}&#34;</span>&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>Build the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ rm -rf public
+</span></span><span style="display:flex;"><span>$ hugo --verbose
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
+</span></span><span style="display:flex;"><span>INFO: 2014/09/29 found taxonomies: map<span style="color:#f92672">[</span>string<span style="color:#f92672">]</span>string<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;tag&#34;</span>:<span style="color:#e6db74">&#34;tags&#34;</span>, <span style="color:#e6db74">&#34;category&#34;</span>:<span style="color:#e6db74">&#34;categories&#34;</span><span style="color:#f92672">}</span>
+</span></span><span style="display:flex;"><span>WARN: 2014/09/29 Unable to locate layout: <span style="color:#f92672">[</span>404.html theme/404.html<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> draft content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> future content
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">2</span> pages created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> tags created
+</span></span><span style="display:flex;"><span><span style="color:#ae81ff">0</span> categories created
+</span></span><span style="display:flex;"><span>in <span style="color:#ae81ff">4</span> ms
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ find public -type f -name <span style="color:#e6db74">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">149</span> Sep <span style="color:#ae81ff">29</span> 22:44 public/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">125</span> Sep <span style="color:#ae81ff">29</span> 22:44 public/post/first/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff    <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 22:44 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">128</span> Sep <span style="color:#ae81ff">29</span> 22:44 public/post/second/index.html
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/post/second/&#34;</span>&gt;second&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/post/first/&#34;</span>&gt;first&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$
+</span></span></code></pre></div>
+
+<h3 id="create-a-post-listing">
+  Create a Post Listing
+</h3>
+<p>We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let&rsquo;s make it show a list of all posts (not just the first ten).</p>
+<p>We need to decide which template to update. This will be a listing, so it should be a list template. Let&rsquo;s take a quick look and see which list templates are available.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find themes/zafta -name list.html | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-r--r--  <span style="color:#ae81ff">1</span> quoha  staff  <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">29</span> 17:31 themes/zafta/layouts/_default/list.html
+</span></span></code></pre></div><p>As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don&rsquo;t have multiple content types, so let&rsquo;s stay consistent and update the default list template.</p>
+
+
+<h2 id="creating-top-level-pages">
+  Creating Top Level Pages
+</h2>
+<p>Let&rsquo;s add an &ldquo;about&rdquo; page and display it at the top level (as opposed to a sub-level like we did with posts).</p>
+<p>The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let&rsquo;s verify that by creating an &ldquo;about&rdquo; page at the top level:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi content/about.md
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>title: <span style="color:#e6db74">&#34;about&#34;</span>
+</span></span><span style="display:flex;"><span>description: <span style="color:#e6db74">&#34;about this site&#34;</span>
+</span></span><span style="display:flex;"><span>date: <span style="color:#e6db74">&#34;2014-09-27&#34;</span>
+</span></span><span style="display:flex;"><span>slug: <span style="color:#e6db74">&#34;about time&#34;</span>
+</span></span><span style="display:flex;"><span>---
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#75715e">## about us</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>i<span style="color:#960050;background-color:#1e0010">&#39;</span>m speechless
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find public -name <span style="color:#e6db74">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff   <span style="color:#ae81ff">334</span> Sep <span style="color:#ae81ff">27</span> 15:08 public/about-time/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff   <span style="color:#ae81ff">527</span> Sep <span style="color:#ae81ff">27</span> 15:08 public/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff   <span style="color:#ae81ff">358</span> Sep <span style="color:#ae81ff">27</span> 15:08 public/post/first-post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff     <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">27</span> 15:08 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff   <span style="color:#ae81ff">342</span> Sep <span style="color:#ae81ff">27</span> 15:08 public/post/second-post/index.html
+</span></span></code></pre></div><p>Notice that the page wasn&rsquo;t created at the top level. It was created in a sub-directory named &lsquo;about-time/&rsquo;. That name came from our slug. Hugo will use the slug to name the generated content. It&rsquo;s a reasonable default, by the way, but we can learn a few things by fighting it for this file.</p>
+<p>One other thing. Take a look at the home page.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ cat public/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://localhost:1313/post/theme/&#34;</span>&gt;creating a new theme&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://localhost:1313/about-time/&#34;</span>&gt;about&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://localhost:1313/post/second-post/&#34;</span>&gt;second&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>    &lt;h1&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://localhost:1313/post/first-post/&#34;</span>&gt;first&lt;/a&gt;&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>&lt;script&gt;document.write<span style="color:#f92672">(</span><span style="color:#e6db74">&#39;&lt;script src=&#34;http://&#39;</span>
+</span></span><span style="display:flex;"><span>        + <span style="color:#f92672">(</span>location.host <span style="color:#f92672">||</span> <span style="color:#e6db74">&#39;localhost&#39;</span><span style="color:#f92672">)</span>.split<span style="color:#f92672">(</span><span style="color:#e6db74">&#39;:&#39;</span><span style="color:#f92672">)[</span>0<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span>		+ <span style="color:#e6db74">&#39;:1313/livereload.js?mindelay=10&#34;&gt;&lt;/&#39;</span>
+</span></span><span style="display:flex;"><span>        + <span style="color:#e6db74">&#39;script&gt;&#39;</span><span style="color:#f92672">)</span>&lt;/script&gt;&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span></code></pre></div><p>Notice that the &ldquo;about&rdquo; link is listed with the posts? That&rsquo;s not desirable, so let&rsquo;s change that first.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;posts&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> range first <span style="color:#ae81ff">10</span> .Data.Pages <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#f92672">{{</span> <span style="color:#66d9ef">if</span> eq .Type <span style="color:#e6db74">&#34;post&#34;</span><span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ .Permalink }}&#34;</span>&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;pages&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> range .Data.Pages <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#f92672">{{</span> <span style="color:#66d9ef">if</span> eq .Type <span style="color:#e6db74">&#34;page&#34;</span> <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ .Permalink }}&#34;</span>&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it.</p>
+<p>But, that about page still renders to about-time/index.html.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ find public -name <span style="color:#e6db74">&#39;*.html&#39;</span> | xargs ls -l
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff    <span style="color:#ae81ff">334</span> Sep <span style="color:#ae81ff">27</span> 15:33 public/about-time/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff    <span style="color:#ae81ff">645</span> Sep <span style="color:#ae81ff">27</span> 15:33 public/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff    <span style="color:#ae81ff">358</span> Sep <span style="color:#ae81ff">27</span> 15:33 public/post/first-post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff      <span style="color:#ae81ff">0</span> Sep <span style="color:#ae81ff">27</span> 15:33 public/post/index.html
+</span></span><span style="display:flex;"><span>-rw-rw-r--  <span style="color:#ae81ff">1</span> mdhender  staff    <span style="color:#ae81ff">342</span> Sep <span style="color:#ae81ff">27</span> 15:33 public/post/second-post/index.html
+</span></span></code></pre></div><p>Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let&rsquo;s do it the hard way and change the permalink in the configuration file.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi config.toml
+</span></span><span style="display:flex;"><span><span style="color:#f92672">[</span>permalinks<span style="color:#f92672">]</span>
+</span></span><span style="display:flex;"><span>	page: <span style="color:#e6db74">&#34;/:title/&#34;</span>
+</span></span><span style="display:flex;"><span>	about: <span style="color:#e6db74">&#34;/:filename/&#34;</span>
+</span></span></code></pre></div><p>Generate the web site and verify that this didn&rsquo;t work. Hugo lets &ldquo;slug&rdquo; or &ldquo;URL&rdquo; override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place.</p>
+
+
+<h2 id="sharing-templates">
+  Sharing Templates
+</h2>
+<p>If you&rsquo;ve been following along, you probably noticed that posts have titles in the browser and the home page doesn&rsquo;t. That&rsquo;s because we didn&rsquo;t put the title in the home page&rsquo;s template (layouts/index.html). That&rsquo;s an easy thing to do, but let&rsquo;s look at a different option.</p>
+<p>We can put the common bits into a shared template that&rsquo;s stored in the themes/zafta/layouts/partials/ directory.</p>
+
+
+<h3 id="create-the-header-and-footer-partials">
+  Create the Header and Footer Partials
+</h3>
+<p>In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme&rsquo;s presentation.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/partials/header.html
+</span></span><span style="display:flex;"><span>&lt;!DOCTYPE html&gt;
+</span></span><span style="display:flex;"><span>&lt;html&gt;
+</span></span><span style="display:flex;"><span>&lt;head&gt;
+</span></span><span style="display:flex;"><span>	&lt;title&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/title&gt;
+</span></span><span style="display:flex;"><span>&lt;/head&gt;
+</span></span><span style="display:flex;"><span>&lt;body&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>$ vi themes/zafta/layouts/partials/footer.html
+</span></span><span style="display:flex;"><span>&lt;/body&gt;
+</span></span><span style="display:flex;"><span>&lt;/html&gt;
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div>
+
+<h3 id="update-the-home-page-template-to-use-the-partials">
+  Update the Home Page Template to Use the Partials
+</h3>
+<p>The most noticeable difference between a template call and a partials call is the lack of path:</p>
+<pre tabindex="0"><code>{{ template &#34;theme/partials/header.html&#34; . }}
+</code></pre><p>versus</p>
+<pre tabindex="0"><code>{{ partial &#34;header.html&#34; . }}
+</code></pre><p>Both pass in the context.</p>
+<p>Let&rsquo;s change the home page template to use these new partials.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/index.html
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;header.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;posts&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> range first <span style="color:#ae81ff">10</span> .Data.Pages <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#f92672">{{</span> <span style="color:#66d9ef">if</span> eq .Type <span style="color:#e6db74">&#34;post&#34;</span><span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ .Permalink }}&#34;</span>&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;pages&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> range .Data.Pages <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#f92672">{{</span> <span style="color:#66d9ef">if</span> or <span style="color:#f92672">(</span>eq .Type <span style="color:#e6db74">&#34;page&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">(</span>eq .Type <span style="color:#e6db74">&#34;about&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>      &lt;h2&gt;&lt;a href<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ .Permalink }}&#34;</span>&gt;<span style="color:#f92672">{{</span> .Type <span style="color:#f92672">}}</span> - <span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span> - <span style="color:#f92672">{{</span> .RelPermalink <span style="color:#f92672">}}</span>&lt;/a&gt;&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>    <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;footer.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The title on the home page is now &ldquo;your title here&rdquo;, which comes from the &ldquo;title&rdquo; variable in the config.toml file.</p>
+
+
+<h3 id="update-the-default-single-template-to-use-the-partials">
+  Update the Default Single Template to Use the Partials
+</h3>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;header.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> .Content <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;footer.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file.</p>
+
+
+<h2 id="add-date-published-to-posts">
+  Add “Date Published” to Posts
+</h2>
+<p>It&rsquo;s common to have posts display the date that they were written or published, so let&rsquo;s add that. The front matter of our posts has a variable named &ldquo;date.&rdquo; It&rsquo;s usually the date the content was created, but let&rsquo;s pretend that&rsquo;s the value we want to display.</p>
+
+
+<h3 id="add-date-published-to-the-template">
+  Add “Date Published” to the Template
+</h3>
+<p>We&rsquo;ll start by updating the template used to render the posts. The template code will look like:</p>
+<pre tabindex="0"><code>{{ .Date.Format &#34;Mon, Jan 2, 2006&#34; }}
+</code></pre><p>Posts use the default single template, so we&rsquo;ll change that file.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;header.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;h2&gt;<span style="color:#f92672">{{</span> .Date.Format <span style="color:#e6db74">&#34;Mon, Jan 2, 2006&#34;</span> <span style="color:#f92672">}}</span>&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> .Content <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;footer.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Generate the web site and verify the results. The posts now have the date displayed in them. There&rsquo;s a problem, though. The &ldquo;about&rdquo; page also has the date displayed.</p>
+<p>As usual, there are a couple of ways to make the date display only on posts. We could do an &ldquo;if&rdquo; statement like we did on the home page. Another way would be to create a separate template for posts.</p>
+<p>The &ldquo;if&rdquo; solution works for sites that have just a couple of content types. It aligns with the principle of &ldquo;code for today,&rdquo; too.</p>
+<p>Let&rsquo;s assume, though, that we&rsquo;ve made our site so complex that we feel we have to create a new template type. In Hugo-speak, we&rsquo;re going to create a section template.</p>
+<p>Let&rsquo;s restore the default single template before we forget.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ mkdir themes/zafta/layouts/post
+</span></span><span style="display:flex;"><span>$ vi themes/zafta/layouts/_default/single.html
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;header.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> .Content <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;footer.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Now we&rsquo;ll update the post&rsquo;s version of the single template. If you remember Hugo&rsquo;s rules, the template engine will use this version over the default.</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>$ vi themes/zafta/layouts/post/single.html
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;header.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span>  &lt;h1&gt;<span style="color:#f92672">{{</span> .Title <span style="color:#f92672">}}</span>&lt;/h1&gt;
+</span></span><span style="display:flex;"><span>  &lt;h2&gt;<span style="color:#f92672">{{</span> .Date.Format <span style="color:#e6db74">&#34;Mon, Jan 2, 2006&#34;</span> <span style="color:#f92672">}}</span>&lt;/h2&gt;
+</span></span><span style="display:flex;"><span>  <span style="color:#f92672">{{</span> .Content <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>
+</span></span><span style="display:flex;"><span><span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;footer.html&#34;</span> . <span style="color:#f92672">}}</span>
+</span></span><span style="display:flex;"><span>:wq
+</span></span></code></pre></div><p>Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn&rsquo;t.</p>
+
+
+<h3 id="dont-repeat-yourself">
+  Don&rsquo;t Repeat Yourself
+</h3>
+<p>DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you&rsquo;re figuring that out, accept that you&rsquo;ll be doing some refactoring. Hugo makes that easy and fast, so it&rsquo;s okay to delay splitting up a template.</p>
+
+   <div class="time">
+     <time datetime="2022-10-20">2022-10-20&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 34 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/posts/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  <a href="https://github.com/ntk148v/shibui">shibui</a>
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/posts/migrate-from-jekyll/index.html b/homepage/public/posts/migrate-from-jekyll/index.html
new file mode 100644
index 0000000..1ee81e2
--- /dev/null
+++ b/homepage/public/posts/migrate-from-jekyll/index.html
@@ -0,0 +1,343 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Migrate to Hugo from Jekyll | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/posts/migrate-from-jekyll/" />
+
+
+<meta property="og:title" content="Migrate to Hugo from Jekyll" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/posts/migrate-from-jekyll/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Migrate to Hugo from Jekyll" />
+      
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "Migrate to Hugo from Jekyll",
+    "url": "http:\/\/localhost:1313\/posts\/migrate-from-jekyll\/",
+    "datePublished": "2021-10-22T17:12:11\u002b07:00",
+    "dateModified": "2021-10-22T17:12:11\u002b07:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/posts/">Posts</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/posts/migrate-from-jekyll/">Migrate to Hugo from Jekyll</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+  <h1>Migrate to Hugo from Jekyll</h1>
+  
+  <div class="terms-list">
+    <ul>
+        <li><a href="/tags/hugo/">#Hugo</a></li>
+    </ul>
+  </div>
+
+
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ul>
+    <li><a href="#move-static-content-to-static">Move static content to <code>static</code></a></li>
+    <li><a href="#create-your-hugo-configuration-file">Create your Hugo configuration file</a></li>
+    <li><a href="#set-your-configuration-publish-folder-to-_site">Set your configuration publish folder to <code>_site</code></a></li>
+    <li><a href="#convert-jekyll-templates-to-hugo-templates">Convert Jekyll templates to Hugo templates</a></li>
+    <li><a href="#convert-jekyll-plugins-to-hugo-shortcodes">Convert Jekyll plugins to Hugo shortcodes</a>
+      <ul>
+        <li><a href="#implementation">Implementation</a></li>
+        <li><a href="#usage">Usage</a></li>
+      </ul>
+    </li>
+    <li><a href="#finishing-touches">Finishing touches</a>
+      <ul>
+        <li><a href="#fix-content">Fix content</a></li>
+        <li><a href="#clean-up">Clean up</a></li>
+      </ul>
+    </li>
+    <li><a href="#a-practical-example-in-a-diff">A practical example in a diff</a></li>
+  </ul>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="move-static-content-to-static">
+  Move static content to <code>static</code>
+</h2>
+<p>Jekyll has a rule that any directory not starting with <code>_</code> will be copied as-is to the <code>_site</code> output. Hugo keeps all static content under <code>static</code>. You should therefore move it all there.
+With Jekyll, something that looked like</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>▾ &lt;root&gt;/
+</span></span><span style="display:flex;"><span>    ▾ images/
+</span></span><span style="display:flex;"><span>        logo.png
+</span></span></code></pre></div><p>should become</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>▾ &lt;root&gt;/
+</span></span><span style="display:flex;"><span>    ▾ static/
+</span></span><span style="display:flex;"><span>        ▾ images/
+</span></span><span style="display:flex;"><span>            logo.png
+</span></span></code></pre></div><p>Additionally, you&rsquo;ll want any files that should reside at the root (such as <code>CNAME</code>) to be moved to <code>static</code>.</p>
+
+
+<h2 id="create-your-hugo-configuration-file">
+  Create your Hugo configuration file
+</h2>
+<p>Hugo can read your configuration as JSON, YAML or TOML. Hugo supports parameters custom configuration too. Refer to the <a href="/overview/configuration/">Hugo configuration documentation</a> for details.</p>
+
+
+<h2 id="set-your-configuration-publish-folder-to-_site">
+  Set your configuration publish folder to <code>_site</code>
+</h2>
+<p>The default is for Jekyll to publish to <code>_site</code> and for Hugo to publish to <code>public</code>. If, like me, you have <a href="http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.html"><code>_site</code> mapped to a git submodule on the <code>gh-pages</code> branch</a>, you&rsquo;ll want to do one of two alternatives:</p>
+<ol>
+<li>Change your submodule to point to map <code>gh-pages</code> to public instead of <code>_site</code> (recommended).</li>
+</ol>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>git submodule deinit _site
+</span></span><span style="display:flex;"><span>git rm _site
+</span></span><span style="display:flex;"><span>git submodule add -b gh-pages git@github.com:your-username/your-repo.git public
+</span></span></code></pre></div><ol start="2">
+<li>Or, change the Hugo configuration to use <code>_site</code> instead of <code>public</code>.</li>
+</ol>
+<pre tabindex="0"><code>{
+    ..
+    &#34;publishdir&#34;: &#34;_site&#34;,
+    ..
+}
+</code></pre>
+
+<h2 id="convert-jekyll-templates-to-hugo-templates">
+  Convert Jekyll templates to Hugo templates
+</h2>
+<p>That&rsquo;s the bulk of the work right here. The documentation is your friend. You should refer to <a href="http://jekyllrb.com/docs/templates/">Jekyll&rsquo;s template documentation</a> if you need to refresh your memory on how you built your blog and <a href="/layout/templates/">Hugo&rsquo;s template</a> to learn Hugo&rsquo;s way.</p>
+<p>As a single reference data point, converting my templates for <a href="http://heyitsalex.net/">heyitsalex.net</a> took me no more than a few hours.</p>
+
+
+<h2 id="convert-jekyll-plugins-to-hugo-shortcodes">
+  Convert Jekyll plugins to Hugo shortcodes
+</h2>
+<p>Jekyll has <a href="http://jekyllrb.com/docs/plugins/">plugins</a>; Hugo has <a href="/doc/shortcodes/">shortcodes</a>. It&rsquo;s fairly trivial to do a port.</p>
+
+
+<h3 id="implementation">
+  Implementation
+</h3>
+<p>As an example, I was using a custom <a href="https://github.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc06908ec/_plugins/image_tag.rb"><code>image_tag</code></a> plugin to generate figures with caption when running Jekyll. As I read about shortcodes, I found Hugo had a nice built-in shortcode that does exactly the same thing.</p>
+<p>Jekyll&rsquo;s plugin:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-ruby" data-lang="ruby"><span style="display:flex;"><span><span style="color:#66d9ef">module</span> Jekyll
+</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">class</span> <span style="color:#a6e22e">ImageTag</span> <span style="color:#f92672">&lt;</span> <span style="color:#66d9ef">Liquid</span><span style="color:#f92672">::</span><span style="color:#66d9ef">Tag</span>
+</span></span><span style="display:flex;"><span>    @url: <span style="color:#66d9ef">nil</span>
+</span></span><span style="display:flex;"><span>    @caption: <span style="color:#66d9ef">nil</span>
+</span></span><span style="display:flex;"><span>    @class: <span style="color:#66d9ef">nil</span>
+</span></span><span style="display:flex;"><span>    @link: <span style="color:#66d9ef">nil</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">//</span> <span style="color:#66d9ef">Patterns</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">IMAGE_URL_WITH_CLASS_AND_CAPTION</span> <span style="color:#f92672">=</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK</span>: <span style="color:#e6db74">/(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)&#34;(.*?)&#34;(\s+)-&gt;((https?:\/\/|\/)(\S+))(\s*)/i</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">IMAGE_URL_WITH_CAPTION</span>: <span style="color:#e6db74">/((https?:\/\/|\/)(\S+))(\s+)&#34;(.*?)&#34;/i</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">IMAGE_URL_WITH_CLASS</span>: <span style="color:#e6db74">/(\w+)(\s+)((https?:\/\/|\/)(\S+))/i</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">IMAGE_URL</span>: <span style="color:#e6db74">/((https?:\/\/|\/)(\S+))/i</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">initialize</span>(tag_name, markup, tokens)
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">super</span>
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">if</span> markup <span style="color:#f92672">=~</span> <span style="color:#66d9ef">IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK</span>
+</span></span><span style="display:flex;"><span>        @class  : $1
+</span></span><span style="display:flex;"><span>        @url    : $3
+</span></span><span style="display:flex;"><span>        @caption: $7
+</span></span><span style="display:flex;"><span>        @link: $9
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">elsif</span> markup <span style="color:#f92672">=~</span> <span style="color:#66d9ef">IMAGE_URL_WITH_CLASS_AND_CAPTION</span>
+</span></span><span style="display:flex;"><span>        @class  : $1
+</span></span><span style="display:flex;"><span>        @url    : $3
+</span></span><span style="display:flex;"><span>        @caption: $7
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">elsif</span> markup <span style="color:#f92672">=~</span> <span style="color:#66d9ef">IMAGE_URL_WITH_CAPTION</span>
+</span></span><span style="display:flex;"><span>        @url    : $1
+</span></span><span style="display:flex;"><span>        @caption: $5
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">elsif</span> markup <span style="color:#f92672">=~</span> <span style="color:#66d9ef">IMAGE_URL_WITH_CLASS</span>
+</span></span><span style="display:flex;"><span>        @class: $1
+</span></span><span style="display:flex;"><span>        @url  : $3
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">elsif</span> markup <span style="color:#f92672">=~</span> <span style="color:#66d9ef">IMAGE_URL</span>
+</span></span><span style="display:flex;"><span>        @url: $1
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">end</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">end</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">render</span>(context)
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">if</span> @class
+</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">source</span>: <span style="color:#e6db74">&#34;&lt;figure class=&#39;</span><span style="color:#e6db74">#{</span>@class<span style="color:#e6db74">}</span><span style="color:#e6db74">&#39;&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">else</span>
+</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">source</span>: <span style="color:#e6db74">&#34;&lt;figure&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">end</span>
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">if</span> @link
+</span></span><span style="display:flex;"><span>        source <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#34;&lt;a href=</span><span style="color:#ae81ff">\&#34;</span><span style="color:#e6db74">#{</span>@link<span style="color:#e6db74">}</span><span style="color:#ae81ff">\&#34;</span><span style="color:#e6db74">&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">end</span>
+</span></span><span style="display:flex;"><span>      source <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#34;&lt;img src=</span><span style="color:#ae81ff">\&#34;</span><span style="color:#e6db74">#{</span>@url<span style="color:#e6db74">}</span><span style="color:#ae81ff">\&#34;</span><span style="color:#e6db74">&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">if</span> @link
+</span></span><span style="display:flex;"><span>        source <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#34;&lt;/a&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">end</span>
+</span></span><span style="display:flex;"><span>      source <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#34;&lt;figcaption&gt;</span><span style="color:#e6db74">#{</span>@caption<span style="color:#e6db74">}</span><span style="color:#e6db74">&lt;/figcaption&gt;&#34;</span> <span style="color:#66d9ef">if</span> @caption
+</span></span><span style="display:flex;"><span>      source <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#34;&lt;/figure&gt;&#34;</span>
+</span></span><span style="display:flex;"><span>      source
+</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">end</span>
+</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">end</span>
+</span></span><span style="display:flex;"><span><span style="color:#66d9ef">end</span>
+</span></span><span style="display:flex;"><span><span style="color:#66d9ef">Liquid</span><span style="color:#f92672">::</span><span style="color:#66d9ef">Template</span><span style="color:#f92672">.</span>register_tag(<span style="color:#e6db74">&#39;image&#39;</span>, <span style="color:#66d9ef">Jekyll</span><span style="color:#f92672">::</span><span style="color:#66d9ef">ImageTag</span>)
+</span></span></code></pre></div><p>is written as this Hugo shortcode:</p>
+<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- image --&gt;</span>
+</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">figure</span> <span style="color:#960050;background-color:#1e0010">{{</span> <span style="color:#a6e22e">with</span> <span style="color:#960050;background-color:#1e0010">.</span><span style="color:#a6e22e">Get</span> <span style="color:#960050;background-color:#1e0010">&#34;</span><span style="color:#a6e22e">class</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#960050;background-color:#1e0010">}}</span><span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{.}}&#34;</span><span style="color:#960050;background-color:#1e0010">{{</span> <span style="color:#a6e22e">end</span> <span style="color:#960050;background-color:#1e0010">}}</span>&gt;
+</span></span><span style="display:flex;"><span>    {{ with .Get &#34;link&#34;}}&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{.}}&#34;</span>&gt;{{ end }}
+</span></span><span style="display:flex;"><span>        &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ .Get &#34;</span><span style="color:#a6e22e">src</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#960050;background-color:#1e0010">}}&#34;</span> <span style="color:#960050;background-color:#1e0010">{{</span> <span style="color:#a6e22e">if</span> <span style="color:#a6e22e">or</span> <span style="color:#960050;background-color:#1e0010">(.</span><span style="color:#a6e22e">Get</span> <span style="color:#960050;background-color:#1e0010">&#34;</span><span style="color:#a6e22e">alt</span><span style="color:#960050;background-color:#1e0010">&#34;)</span> <span style="color:#960050;background-color:#1e0010">(.</span><span style="color:#a6e22e">Get</span> <span style="color:#960050;background-color:#1e0010">&#34;</span><span style="color:#a6e22e">caption</span><span style="color:#960050;background-color:#1e0010">&#34;)</span> <span style="color:#960050;background-color:#1e0010">}}</span><span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ with .Get &#34;</span><span style="color:#a6e22e">alt</span><span style="color:#960050;background-color:#1e0010">&#34;}}{{.}}{{</span><span style="color:#a6e22e">else</span><span style="color:#960050;background-color:#1e0010">}}{{</span> <span style="color:#960050;background-color:#1e0010">.</span><span style="color:#a6e22e">Get</span> <span style="color:#960050;background-color:#1e0010">&#34;</span><span style="color:#a6e22e">caption</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#960050;background-color:#1e0010">}}{{</span> <span style="color:#a6e22e">end</span> <span style="color:#960050;background-color:#1e0010">}}&#34;{{</span> <span style="color:#a6e22e">end</span> <span style="color:#960050;background-color:#1e0010">}}</span> /&gt;
+</span></span><span style="display:flex;"><span>    {{ if .Get &#34;link&#34;}}&lt;/<span style="color:#f92672">a</span>&gt;{{ end }}
+</span></span><span style="display:flex;"><span>    {{ if or (or (.Get &#34;title&#34;) (.Get &#34;caption&#34;)) (.Get &#34;attr&#34;)}}
+</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">figcaption</span>&gt;{{ if isset .Params &#34;title&#34; }}
+</span></span><span style="display:flex;"><span>        {{ .Get &#34;title&#34; }}{{ end }}
+</span></span><span style="display:flex;"><span>        {{ if or (.Get &#34;caption&#34;) (.Get &#34;attr&#34;)}}&lt;<span style="color:#f92672">p</span>&gt;
+</span></span><span style="display:flex;"><span>        {{ .Get &#34;caption&#34; }}
+</span></span><span style="display:flex;"><span>        {{ with .Get &#34;attrlink&#34;}}&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{.}}&#34;</span>&gt; {{ end }}
+</span></span><span style="display:flex;"><span>            {{ .Get &#34;attr&#34; }}
+</span></span><span style="display:flex;"><span>        {{ if .Get &#34;attrlink&#34;}}&lt;/<span style="color:#f92672">a</span>&gt; {{ end }}
+</span></span><span style="display:flex;"><span>        &lt;/<span style="color:#f92672">p</span>&gt; {{ end }}
+</span></span><span style="display:flex;"><span>    &lt;/<span style="color:#f92672">figcaption</span>&gt;
+</span></span><span style="display:flex;"><span>    {{ end }}
+</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">figure</span>&gt;
+</span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- image --&gt;</span>
+</span></span></code></pre></div>
+
+<h3 id="usage">
+  Usage
+</h3>
+<p>I simply changed:</p>
+<pre tabindex="0"><code>{% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg &#34;One of my favorite touristy-type photos. I secretly waited for the good light while we were &#34;having fun&#34; and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing.&#34; -&gt;http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}
+</code></pre><p>to this (this example uses a slightly extended version named <code>fig</code>, different than the built-in <code>figure</code>):</p>
+<pre tabindex="0"><code>{{% fig class=&#34;full&#34; src=&#34;http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg&#34; title=&#34;One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing.&#34; link=&#34;http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/&#34; %}}
+</code></pre><p>As a bonus, the shortcode named parameters are, arguably, more readable.</p>
+
+
+<h2 id="finishing-touches">
+  Finishing touches
+</h2>
+
+
+<h3 id="fix-content">
+  Fix content
+</h3>
+<p>Depending on the amount of customization that was done with each post with Jekyll, this step will require more or less effort. There are no hard and fast rules here except that <code>hugo server --watch</code> is your friend. Test your changes and fix errors as needed.</p>
+
+
+<h3 id="clean-up">
+  Clean up
+</h3>
+<p>You&rsquo;ll want to remove the Jekyll configuration at this point. If you have anything else that isn&rsquo;t used, delete it.</p>
+
+
+<h2 id="a-practical-example-in-a-diff">
+  A practical example in a diff
+</h2>
+<p><a href="http://heyitsalex.net/">Hey, it&rsquo;s Alex</a> was migrated in less than a <em>father-with-kids day</em> from Jekyll to Hugo. You can see all the changes (and screw-ups) by looking at this <a href="https://github.com/alexandre-normand/alexandre-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b81495423294208cc74d610">diff</a>.</p>
+
+   <div class="time">
+     <time datetime="2021-10-22">2021-10-22&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 4 min read</span>
+     
+     
+     
+   </div>
+
+  
+  
+    <div class="comments">
+
+</div>
+  
+
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/posts/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  <a href="https://github.com/ntk148v/shibui">shibui</a>
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/posts/my-first-post/index.html b/homepage/public/posts/my-first-post/index.html
index b18c4ba..65cb84a 100644
--- a/homepage/public/posts/my-first-post/index.html
+++ b/homepage/public/posts/my-first-post/index.html
@@ -1,132 +1,162 @@
-<!DOCTYPE html>
-<html lang="en-us">
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
   <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    
-    <title>My First Post | My New Hugo Project</title>
-    <meta name="viewport" content="width=device-width,minimum-scale=1">
-    <meta name="description" content="introduction
-This is bold text, and this is emphasized text.
-Visit the Hugo website!">
-    <meta name="generator" content="Hugo 0.161.1">
-    
-    
-    
-      <meta name="robots" content="noindex, nofollow">
-    
-    
-
-    <link rel="stylesheet" href="/ananke/css/main.css">
-    
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  My First Post | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/posts/my-first-post/" />
 
 
-    
+<meta property="og:title" content="My First Post" />
+
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta property="og:url" content="http://localhost:1313/posts/my-first-post/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="My First Post" />
       
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "My First Post",
+    "url": "http:\/\/localhost:1313\/posts\/my-first-post\/",
+    "datePublished": "2026-05-18T23:03:26\u002b02:00",
+    "dateModified": "2026-05-18T23:03:26\u002b02:00"
+  }
+</script>
+ <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
 
-    
 
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
     
-
-    
-      <link rel="canonical" href="http://localhost:1313/posts/my-first-post/">
-    
-
-    
-    
-    <meta property="og:url" content="http://localhost:1313/posts/my-first-post/">
-  <meta property="og:site_name" content="My New Hugo Project">
-  <meta property="og:title" content="My First Post">
-  <meta property="og:description" content="introduction This is bold text, and this is emphasized text.
-Visit the Hugo website!">
-  <meta property="og:locale" content="en_us">
-  <meta property="og:type" content="article">
-    <meta property="article:section" content="posts">
-    <meta property="article:published_time" content="2026-05-18T23:03:26+02:00">
-    <meta property="article:modified_time" content="2026-05-18T23:03:26+02:00">
-
-  <meta itemprop="name" content="My First Post">
-  <meta itemprop="description" content="introduction This is bold text, and this is emphasized text.
-Visit the Hugo website!">
-  <meta itemprop="datePublished" content="2026-05-18T23:03:26+02:00">
-  <meta itemprop="dateModified" content="2026-05-18T23:03:26+02:00">
-  <meta itemprop="wordCount" content="14">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="My First Post">
-  <meta name="twitter:description" content="introduction This is bold text, and this is emphasized text.
-Visit the Hugo website!">
-
-	
-  </head><body class="ma0 avenir bg-near-white development is-page is-page page-my-first-post">
-    
-   
   
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
 
-  <header>
-    <div class="bg-black">
-      <nav class="pv3 ph3 ph4-ns" role="navigation">
-  <div class="flex-l center items-center justify-between">
-    <a href="/" class="f3 fw2 hover-white white-90 dib no-underline">
-      
-        My New Hugo Project
-      
-    </a>
-    <div class="flex-l items-center">
-      
+  
+  <li>
+    
+    <a href="/posts/">Posts</a>
+    /
+  </li>
 
-      
-      <div class="ananke-socials"></div>
+  
+  <li class="current">
+    
+    <a href="/posts/my-first-post/">My First Post</a>
+    
+  </li>
 
-    </div>
-  </div>
+  </ol>
 </nav>
 
-    </div>
-  </header>
 
 
-
-    <main class="pb7" role="main">
-      
+</header>
+    <main id="main-content" role="main">
+  <h1>My First Post</h1>
   
 
-  <article class="page-my-first-post flex-l mw7 center ph3 flex-wrap justify-between">
-    <header class="mt4 w-100"><aside class="instapaper_ignoref b helvetica tracked ttu">
-    Posts
-</aside><div id="sharing" class="mt3 ananke-socials"></div>
-<h1 class="f1 athelas mt3 mb1">My First Post</h1>
-      
-      
-      
-      <time class="f6 mv4 dib tracked" datetime="2026-05-18T23:03:26+02:00">May 18, 2026</time>
-      
 
-      
-      
-    </header>
-    <div class="nested-copy-line-height lh-copy serif f4 nested-links mid-gray pr4-l w-100-l"><h2 id="introduction">introduction</h2>
+  
+  
+  
+  
+    <details class="toc" open>
+      <summary class="toc-title">Table of contents</summary>
+      <nav class="toc-content">
+        <nav id="TableOfContents">
+  <ul>
+    <li><a href="#introduction">introduction</a></li>
+  </ul>
+</nav>
+      </nav>
+    </details>
+  
+
+   
+   
+
+<h2 id="introduction">
+  introduction
+</h2>
 <p>This is <strong>bold</strong> text, and this is <em>emphasized</em> text.</p>
 <p>Visit the <a href="https://gohugo.io">Hugo</a> website!</p>
-<ul class="pa0">
+
+   <div class="time">
+     <time datetime="2026-05-18">2026-05-18&nbsp;</time>
+
+     
+     
+       <span class="reading-time"> · 1 min read</span>
+     
+     
+     
+   </div>
+
   
-</ul>
+  
+    <div class="comments">
 
-      
-    </div></article>
-
-    </main>
-    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
-  <div class="flex justify-between">
-  <a class="f4 fw4 hover-white white-70 dn dib-ns pv2 ph3 no-underline" href="http://localhost:1313/" >
-    &copy;  My New Hugo Project 2026 
-  </a>
-    <div><div class="ananke-socials"></div>
 </div>
-  </div>
-</footer>
+  
 
+  
+    <div class="terminal-nav">
+      <div class="back-nav">
+        
+          <a href="/posts/" class="back-link">../</a>
+        
+      </div>
+    </div>
+  
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  <a href="https://github.com/ntk148v/shibui">shibui</a>
+</p>
+</footer>
   </body>
 </html>
-
-
-
diff --git a/homepage/public/sitemap.xml b/homepage/public/sitemap.xml
index 71cbd09..13453dd 100644
--- a/homepage/public/sitemap.xml
+++ b/homepage/public/sitemap.xml
@@ -2,12 +2,44 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
-    <loc>https://example.org/categories/</loc>
+    <loc>http://localhost:1313/gedanken/</loc>
+    <lastmod>2026-05-18T23:03:26+02:00</lastmod>
   </url><url>
-    <loc>https://example.org/</loc>
+    <loc>http://localhost:1313/gedanken/my-first-post/</loc>
+    <lastmod>2026-05-18T23:03:26+02:00</lastmod>
   </url><url>
-    <loc>https://example.org/posts/</loc>
+    <loc>http://localhost:1313/</loc>
+    <lastmod>2026-05-18T23:03:26+02:00</lastmod>
   </url><url>
-    <loc>https://example.org/tags/</loc>
+    <loc>http://localhost:1313/gedanken/hugoisforlovers/</loc>
+    <lastmod>2022-10-26T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/tags/hugo/</loc>
+    <lastmod>2022-10-26T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/tags/</loc>
+    <lastmod>2022-10-26T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/tags/diagrams/</loc>
+    <lastmod>2022-10-25T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/gedanken/diagrams/</loc>
+    <lastmod>2022-10-25T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/tags/tech/</loc>
+    <lastmod>2022-10-25T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/gedanken/introduce-hugo/</loc>
+    <lastmod>2022-10-20T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/gedanken/creating-a-new-theme/</loc>
+    <lastmod>2021-10-22T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/gedanken/migrate-from-jekyll/</loc>
+    <lastmod>2021-10-22T17:12:11+07:00</lastmod>
+  </url><url>
+    <loc>http://localhost:1313/categories/</loc>
+  </url><url>
+    <loc>http://localhost:1313/warum/</loc>
   </url>
 </urlset>
diff --git a/homepage/public/tags/diagrams/index.html b/homepage/public/tags/diagrams/index.html
new file mode 100644
index 0000000..39ab301
--- /dev/null
+++ b/homepage/public/tags/diagrams/index.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Diagrams | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/tags/diagrams/" />
+
+
+<meta property="og:title" content="Diagrams" />
+
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/tags/diagrams/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Diagrams" />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/tags/diagrams/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/tags/">Tags</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/tags/diagrams/">Diagrams</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+    <h1>Diagrams</h1>
+    
+    <div class="time-list">
+        <ul>
+            
+            <li>
+                <span><time datetime="2022-10-25">2022-10-25&nbsp;</time>
+</span>
+                <div><a href="/gedanken/diagrams/">Hugo Diagrams</a></div>
+            </li>
+            
+        </ul>
+    </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/tags/diagrams/index.xml b/homepage/public/tags/diagrams/index.xml
new file mode 100644
index 0000000..2facca6
--- /dev/null
+++ b/homepage/public/tags/diagrams/index.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Diagrams on Thomas Internet Garden</title>
+    <link>http://localhost:1313/tags/diagrams/</link>
+    <description>Recent content in Diagrams on Thomas Internet Garden</description>
+    <generator>Hugo</generator>
+    <language>en-us</language>
+    <managingEditor>Thomas.Sindt@gmx.de (Thomas)</managingEditor>
+    <webMaster>Thomas.Sindt@gmx.de (Thomas)</webMaster>
+    <lastBuildDate>Tue, 25 Oct 2022 17:12:11 +0700</lastBuildDate>
+    <atom:link href="http://localhost:1313/tags/diagrams/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Hugo Diagrams</title>
+      <link>http://localhost:1313/gedanken/diagrams/</link>
+      <pubDate>Tue, 25 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/diagrams/</guid>
+      <description>&lt;p&gt;Hugo version &amp;gt;= 0.93.0&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;goat-diagrams-ascii&#34;&gt;&#xA;  GoAT Diagrams (Ascii)&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo! supports &lt;a href=&#34;https://github.com/bep/goat&#34;&gt;GoAT&lt;/a&gt; natively. This means that this code block:&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```goat&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      .               .                .               .--- 1          .-- 1     / 1&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;     / \              |                |           .---+            .-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    /   \         .---+---.         .--+--.        |   &amp;#39;--- 2      |   &amp;#39;-- 2   / \ 2&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;   +     +        |       |        |       |    ---+            ---+          +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; /   \ /   \    |   |   |   |    |   |   |   |     &amp;#39;---+            &amp;#39;-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; 1   2 3   4    1   2   3   4    1   2   3   4         &amp;#39;--- 4          &amp;#39;-- 4     \ 4&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Will be rendered as:&lt;/p&gt;</description>
+    </item>
+  </channel>
+</rss>
diff --git a/homepage/public/tags/hugo/index.html b/homepage/public/tags/hugo/index.html
new file mode 100644
index 0000000..fe70e4b
--- /dev/null
+++ b/homepage/public/tags/hugo/index.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Hugo | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/tags/hugo/" />
+
+
+<meta property="og:title" content="Hugo" />
+
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/tags/hugo/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Hugo" />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/tags/hugo/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/tags/">Tags</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/tags/hugo/">Hugo</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+    <h1>Hugo</h1>
+    
+    <div class="time-list">
+        <ul>
+            
+            <li>
+                <span><time datetime="2022-10-26">2022-10-26&nbsp;</time>
+</span>
+                <div><a href="/gedanken/hugoisforlovers/">Getting Started with Hugo</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-25">2022-10-25&nbsp;</time>
+</span>
+                <div><a href="/gedanken/diagrams/">Hugo Diagrams</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-20">2022-10-20&nbsp;</time>
+</span>
+                <div><a href="/gedanken/introduce-hugo/">Introduce Hugo</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2021-10-22">2021-10-22&nbsp;</time>
+</span>
+                <div><a href="/gedanken/creating-a-new-theme/">Creating a New Theme</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2021-10-22">2021-10-22&nbsp;</time>
+</span>
+                <div><a href="/gedanken/migrate-from-jekyll/">Migrate to Hugo from Jekyll</a></div>
+            </li>
+            
+        </ul>
+    </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/tags/hugo/index.xml b/homepage/public/tags/hugo/index.xml
new file mode 100644
index 0000000..1f26486
--- /dev/null
+++ b/homepage/public/tags/hugo/index.xml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Hugo on Thomas Internet Garden</title>
+    <link>http://localhost:1313/tags/hugo/</link>
+    <description>Recent content in Hugo on Thomas Internet Garden</description>
+    <generator>Hugo</generator>
+    <language>en-us</language>
+    <managingEditor>Thomas.Sindt@gmx.de (Thomas)</managingEditor>
+    <webMaster>Thomas.Sindt@gmx.de (Thomas)</webMaster>
+    <lastBuildDate>Wed, 26 Oct 2022 17:12:11 +0700</lastBuildDate>
+    <atom:link href="http://localhost:1313/tags/hugo/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Getting Started with Hugo</title>
+      <link>http://localhost:1313/gedanken/hugoisforlovers/</link>
+      <pubDate>Wed, 26 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/hugoisforlovers/</guid>
+      <description>&lt;h2 id=&#34;step-1-install-hugo&#34;&gt;&#xA;  Step 1. Install Hugo&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Go to &lt;a href=&#34;https://github.com/spf13/hugo/releases&#34;&gt;Hugo releases&lt;/a&gt; and download the&#xA;appropriate version for your OS and architecture.&lt;/p&gt;&#xA;&lt;p&gt;Save it somewhere specific as we will be using it in the next step.&lt;/p&gt;&#xA;&lt;p&gt;More complete instructions are available at &lt;a href=&#34;https://gohugo.io/getting-started/installing/&#34;&gt;Install Hugo&lt;/a&gt;&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;step-2-build-the-docs&#34;&gt;&#xA;  Step 2. Build the Docs&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo has its own example site which happens to also be the documentation site&#xA;you are reading right now.&lt;/p&gt;&#xA;&lt;p&gt;Follow the following steps:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Hugo Diagrams</title>
+      <link>http://localhost:1313/gedanken/diagrams/</link>
+      <pubDate>Tue, 25 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/diagrams/</guid>
+      <description>&lt;p&gt;Hugo version &amp;gt;= 0.93.0&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;goat-diagrams-ascii&#34;&gt;&#xA;  GoAT Diagrams (Ascii)&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo! supports &lt;a href=&#34;https://github.com/bep/goat&#34;&gt;GoAT&lt;/a&gt; natively. This means that this code block:&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```goat&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      .               .                .               .--- 1          .-- 1     / 1&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;     / \              |                |           .---+            .-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    /   \         .---+---.         .--+--.        |   &amp;#39;--- 2      |   &amp;#39;-- 2   / \ 2&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;   +     +        |       |        |       |    ---+            ---+          +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; /   \ /   \    |   |   |   |    |   |   |   |     &amp;#39;---+            &amp;#39;-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; 1   2 3   4    1   2   3   4    1   2   3   4         &amp;#39;--- 4          &amp;#39;-- 4     \ 4&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Will be rendered as:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Introduce Hugo</title>
+      <link>http://localhost:1313/gedanken/introduce-hugo/</link>
+      <pubDate>Thu, 20 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/introduce-hugo/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in &lt;a href=&#34;https://github.com/gohugoio/hugo&#34;&gt;Hugo&lt;/a&gt;. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Creating a New Theme</title>
+      <link>http://localhost:1313/gedanken/creating-a-new-theme/</link>
+      <pubDate>Fri, 22 Oct 2021 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/creating-a-new-theme/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Migrate to Hugo from Jekyll</title>
+      <link>http://localhost:1313/gedanken/migrate-from-jekyll/</link>
+      <pubDate>Fri, 22 Oct 2021 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/migrate-from-jekyll/</guid>
+      <description>&lt;h2 id=&#34;move-static-content-to-static&#34;&gt;&#xA;  Move static content to &lt;code&gt;static&lt;/code&gt;&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Jekyll has a rule that any directory not starting with &lt;code&gt;_&lt;/code&gt; will be copied as-is to the &lt;code&gt;_site&lt;/code&gt; output. Hugo keeps all static content under &lt;code&gt;static&lt;/code&gt;. You should therefore move it all there.&#xA;With Jekyll, something that looked like&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;▾ &amp;lt;root&amp;gt;/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    ▾ images/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        logo.png&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;should become&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;▾ &amp;lt;root&amp;gt;/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    ▾ static/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        ▾ images/&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;            logo.png&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Additionally, you&amp;rsquo;ll want any files that should reside at the root (such as &lt;code&gt;CNAME&lt;/code&gt;) to be moved to &lt;code&gt;static&lt;/code&gt;.&lt;/p&gt;</description>
+    </item>
+  </channel>
+</rss>
diff --git a/homepage/public/tags/index.html b/homepage/public/tags/index.html
index 42ff481..87a4b4a 100644
--- a/homepage/public/tags/index.html
+++ b/homepage/public/tags/index.html
@@ -1,114 +1,111 @@
-<!DOCTYPE html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    
-    <title>My New Hugo Project</title>
-    <meta name="viewport" content="width=device-width,minimum-scale=1">
-    <meta name="description" content="">
-    <meta name="generator" content="Hugo 0.161.1">
-    
-    
-    
-      <meta name="robots" content="index, follow">
-    
-    
-
-    <link rel="stylesheet" href="/ananke/css/main.fe543ec729f225f1a33caed07775c832a416476900d82ba51765d6ead9de6758.css" integrity="sha256-/lQ&#43;xynyJfGjPK7Qd3XIMqQWR2kA2CulF2XW6tneZ1g=" crossorigin="anonymous">
-    
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Tags | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/tags/" />
 
 
-    
-      
+<meta property="og:title" content="Tags" />
 
-    
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/tags/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Tags" />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/tags/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
 
-    
-    
-      <link href="/tags/index.xml" rel="alternate" type="application/rss+xml" title="My New Hugo Project" />
-      <link href="/tags/index.xml" rel="feed" type="application/rss+xml" title="My New Hugo Project" />
-      
-    
 
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
     
-      <link rel="canonical" href="https://example.org/tags/">
+  
     
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
 
+  
+  <li class="current">
     
+    <a href="/tags/">Tags</a>
     
-    <meta property="og:url" content="https://example.org/tags/">
-  <meta property="og:site_name" content="My New Hugo Project">
-  <meta property="og:title" content="Tags">
-  <meta property="og:locale" content="en_us">
-  <meta property="og:type" content="website">
+  </li>
 
-  <meta itemprop="name" content="Tags">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="Tags">
-
-      
-      
-    
-	
-  </head><body class="ma0 avenir bg-near-white production is-taxonomy">
-    
-
-  <header>
-    <div class="pb3-m pb6-l bg-black">
-      <nav class="pv3 ph3 ph4-ns" role="navigation">
-  <div class="flex-l center items-center justify-between">
-    <a href="/" class="f3 fw2 hover-white white-90 dib no-underline">
-      
-        My New Hugo Project
-      
-    </a>
-    <div class="flex-l items-center">
-      
-
-      
-      <div class="ananke-socials"></div>
-
-    </div>
-  </div>
+  </ol>
 </nav>
 
-      <div class="tc-l pv3 ph3 ph4-ns">
-        <h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title">
-          Tags
-        </h1>
-        
-      </div>
+
+
+</header>
+    <main id="main-content" role="main">
+    <h1>Tags</h1>
+    
+    <div class="time-list">
+        <ul>
+            
+            <li>
+                <span><time datetime="2022-10-26">2022-10-26&nbsp;</time>
+</span>
+                <div><a href="/tags/hugo/">Hugo</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-25">2022-10-25&nbsp;</time>
+</span>
+                <div><a href="/tags/diagrams/">Diagrams</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-25">2022-10-25&nbsp;</time>
+</span>
+                <div><a href="/tags/tech/">Tech</a></div>
+            </li>
+            
+        </ul>
     </div>
-  </header>
-
-
-    <main class="pb7" role="main">
-      
-  <article class="cf pa3 pa4-m pa4-l">
-    <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links mid-gray">
-      <p>Below you will find pages that utilize the taxonomy term “Tags”</p>
-    </div>
-  </article>
-  <div class="mw8 center">
-    <section class="flex-ns mt5 flex-wrap justify-around">
-      
-    </section>
-  </div>
-
-    </main>
-    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
-  <div class="flex justify-between">
-  <a class="f4 fw4 hover-white white-70 dn dib-ns pv2 ph3 no-underline" href="https://example.org/" >
-    &copy;  My New Hugo Project 2026 
-  </a>
-    <div><div class="ananke-socials"></div>
-</div>
-  </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
 </footer>
-
   </body>
 </html>
-
-
-
diff --git a/homepage/public/tags/index.xml b/homepage/public/tags/index.xml
index 8433009..0bf4659 100644
--- a/homepage/public/tags/index.xml
+++ b/homepage/public/tags/index.xml
@@ -1,11 +1,35 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
-    <title>Tags on My New Hugo Project</title>
-    <link>https://example.org/tags/</link>
-    <description>Recent content in Tags on My New Hugo Project</description>
+    <title>Tags on Thomas Internet Garden</title>
+    <link>http://localhost:1313/tags/</link>
+    <description>Recent content in Tags on Thomas Internet Garden</description>
     <generator>Hugo</generator>
     <language>en-us</language>
-    <atom:link href="https://example.org/tags/index.xml" rel="self" type="application/rss+xml" />
+    <managingEditor>Thomas.Sindt@gmx.de (Thomas)</managingEditor>
+    <webMaster>Thomas.Sindt@gmx.de (Thomas)</webMaster>
+    <lastBuildDate>Wed, 26 Oct 2022 17:12:11 +0700</lastBuildDate>
+    <atom:link href="http://localhost:1313/tags/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Hugo</title>
+      <link>http://localhost:1313/tags/hugo/</link>
+      <pubDate>Wed, 26 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/tags/hugo/</guid>
+      <description></description>
+    </item>
+    <item>
+      <title>Diagrams</title>
+      <link>http://localhost:1313/tags/diagrams/</link>
+      <pubDate>Tue, 25 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/tags/diagrams/</guid>
+      <description></description>
+    </item>
+    <item>
+      <title>Tech</title>
+      <link>http://localhost:1313/tags/tech/</link>
+      <pubDate>Tue, 25 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/tags/tech/</guid>
+      <description></description>
+    </item>
   </channel>
 </rss>
diff --git a/homepage/public/tags/tech/index.html b/homepage/public/tags/tech/index.html
new file mode 100644
index 0000000..e1b7c3a
--- /dev/null
+++ b/homepage/public/tags/tech/index.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Tech | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/tags/tech/" />
+
+
+<meta property="og:title" content="Tech" />
+
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/tags/tech/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Tech" />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/tags/tech/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li>
+    
+    <a href="/tags/">Tags</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/tags/tech/">Tech</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+    <h1>Tech</h1>
+    
+    <div class="time-list">
+        <ul>
+            
+            <li>
+                <span><time datetime="2022-10-25">2022-10-25&nbsp;</time>
+</span>
+                <div><a href="/gedanken/diagrams/">Hugo Diagrams</a></div>
+            </li>
+            
+            <li>
+                <span><time datetime="2022-10-20">2022-10-20&nbsp;</time>
+</span>
+                <div><a href="/gedanken/introduce-hugo/">Introduce Hugo</a></div>
+            </li>
+            
+        </ul>
+    </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/tags/tech/index.xml b/homepage/public/tags/tech/index.xml
new file mode 100644
index 0000000..48bdac2
--- /dev/null
+++ b/homepage/public/tags/tech/index.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Tech on Thomas Internet Garden</title>
+    <link>http://localhost:1313/tags/tech/</link>
+    <description>Recent content in Tech on Thomas Internet Garden</description>
+    <generator>Hugo</generator>
+    <language>en-us</language>
+    <managingEditor>Thomas.Sindt@gmx.de (Thomas)</managingEditor>
+    <webMaster>Thomas.Sindt@gmx.de (Thomas)</webMaster>
+    <lastBuildDate>Tue, 25 Oct 2022 17:12:11 +0700</lastBuildDate>
+    <atom:link href="http://localhost:1313/tags/tech/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Hugo Diagrams</title>
+      <link>http://localhost:1313/gedanken/diagrams/</link>
+      <pubDate>Tue, 25 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/diagrams/</guid>
+      <description>&lt;p&gt;Hugo version &amp;gt;= 0.93.0&lt;/p&gt;&#xA;&#xA;&#xA;&lt;h2 id=&#34;goat-diagrams-ascii&#34;&gt;&#xA;  GoAT Diagrams (Ascii)&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;Hugo! supports &lt;a href=&#34;https://github.com/bep/goat&#34;&gt;GoAT&lt;/a&gt; natively. This means that this code block:&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```goat&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      .               .                .               .--- 1          .-- 1     / 1&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;     / \              |                |           .---+            .-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    /   \         .---+---.         .--+--.        |   &amp;#39;--- 2      |   &amp;#39;-- 2   / \ 2&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;   +     +        |       |        |       |    ---+            ---+          +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; /   \ /   \    |   |   |   |    |   |   |   |     &amp;#39;---+            &amp;#39;-+         +&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt; 1   2 3   4    1   2   3   4    1   2   3   4         &amp;#39;--- 4          &amp;#39;-- 4     \ 4&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;```&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Will be rendered as:&lt;/p&gt;</description>
+    </item>
+    <item>
+      <title>Introduce Hugo</title>
+      <link>http://localhost:1313/gedanken/introduce-hugo/</link>
+      <pubDate>Thu, 20 Oct 2022 17:12:11 +0700</pubDate><author>Thomas.Sindt@gmx.de (Thomas)</author>
+      <guid>http://localhost:1313/gedanken/introduce-hugo/</guid>
+      <description>&lt;h2 id=&#34;introduction&#34;&gt;&#xA;  Introduction&#xA;&lt;/h2&gt;&#xA;&lt;p&gt;This tutorial will show you how to create a simple theme in &lt;a href=&#34;https://github.com/gohugoio/hugo&#34;&gt;Hugo&lt;/a&gt;. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&amp;rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&amp;rsquo;t cover using CSS to style your theme.&lt;/p&gt;&#xA;&lt;p&gt;We&amp;rsquo;ll start with creating a new site with a very basic template. Then we&amp;rsquo;ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.&lt;/p&gt;</description>
+    </item>
+  </channel>
+</rss>
diff --git a/homepage/public/warum/index.html b/homepage/public/warum/index.html
new file mode 100644
index 0000000..ca7ecd8
--- /dev/null
+++ b/homepage/public/warum/index.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html
+  lang="en-us"
+  dir="ltr"
+>
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
+    <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+<title>
+  Warum | Thomas Internet Garden
+</title>
+ 
+<link rel="canonical" href="http://localhost:1313/warum/" />
+
+
+<meta property="og:title" content="Warum" />
+
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta property="og:url" content="http://localhost:1313/warum/" />
+ 
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Warum" />
+    <link rel="alternate" type="application/rss+xml" href="http://localhost:1313/warum/index.xml" title="Thomas Internet Garden" />    <link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon_io/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
+<link rel="manifest" href="/favicon_io/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+ 
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/custom.css">
+
+
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
+    <header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
+  <ol>
+    
+  
+    
+  
+  <li>
+    /
+    <a href="/">Thomas Internet Garden</a>
+    /
+  </li>
+
+  
+  <li class="current">
+    
+    <a href="/warum/">Warum</a>
+    
+  </li>
+
+  </ol>
+</nav>
+
+
+
+</header>
+    <main id="main-content" role="main">
+    <h1>Warum</h1>
+    
+
+<h2 id="über-mich-und-warum">
+  Über mich und Warum
+</h2>
+
+
+<h3 id="über-mich">
+  über mich
+</h3>
+<p>Ich bin Thomas</p>
+
+
+<h3 id="warum">
+  warum
+</h3>
+<p>und ich schreibe hier auf dieser Page einfach meine Gedanken, wie sie mir kommen zu den Themen Liebe, Beziehungen und was da so alles an Zeug dazu gehört. Ich schreibe das im Wesentlichen für mich, um meine Gedanken ein wenig zu ordnen und zu strukturieren. Wenn Euch was gefällt, nehmt es für Euch. Kommentiert gerne die Gedanken, fügt Eure hinzu &hellip;</p>
+
+    <div class="time-list">
+        <ul>
+            
+        </ul>
+    </div>
+</main>
+    <footer role="contentinfo"><p role="contentinfo">
+  &copy; Copyright 2026 &middot;
+  Thomas
+</p>
+</footer>
+  </body>
+</html>
diff --git a/homepage/public/warum/index.xml b/homepage/public/warum/index.xml
new file mode 100644
index 0000000..acfc9c3
--- /dev/null
+++ b/homepage/public/warum/index.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Warum on Thomas Internet Garden</title>
+    <link>http://localhost:1313/warum/</link>
+    <description>Recent content in Warum on Thomas Internet Garden</description>
+    <generator>Hugo</generator>
+    <language>en-us</language>
+    <managingEditor>Thomas.Sindt@gmx.de (Thomas)</managingEditor>
+    <webMaster>Thomas.Sindt@gmx.de (Thomas)</webMaster>
+    <atom:link href="http://localhost:1313/warum/index.xml" rel="self" type="application/rss+xml" />
+  </channel>
+</rss>
diff --git a/homepage/themes/shibui b/homepage/themes/shibui
new file mode 160000
index 0000000..31cd804
--- /dev/null
+++ b/homepage/themes/shibui
@@ -0,0 +1 @@
+Subproject commit 31cd8046a42444053bbf77a755f978e5106d03e5