diff --git a/content/posts/building-svg.md b/content/posts/2021/building-svg.md
similarity index 94%
rename from content/posts/building-svg.md
rename to content/posts/2021/building-svg.md
index 9ecde47..c44010d 100644
--- a/content/posts/building-svg.md
+++ b/content/posts/2021/building-svg.md
@@ -6,8 +6,8 @@ toc: true
tags:
- svg
- xml
- - hugo
- - golang
+ - python
+ - code
---
SVG is generally my image format of choice having used it for illustrations,
@@ -130,17 +130,3 @@ The final result is shown below.
Note that this figure is quite a bit more compact but adding additional labels
or customizations outside the scope of the library will probably require
quite a bit of manual work. This could be a fun side project though.
-
-## Mermaid CLI
-
-
-
-# Hugo Integration
-
-The hope here is that we can call a predefined go procedure that parses
-some section of markdown source code and instantiates the corresponding svg file
-under our static folder that is then referenced.
-
-``` go
-{{/* a comment */}}
-```
diff --git a/content/posts/calibre.md b/content/posts/2021/calibre.md
similarity index 100%
rename from content/posts/calibre.md
rename to content/posts/2021/calibre.md
diff --git a/content/posts/2021/configure-nginx.md b/content/posts/2021/configure-nginx.md
new file mode 100644
index 0000000..8926987
--- /dev/null
+++ b/content/posts/2021/configure-nginx.md
@@ -0,0 +1,11 @@
+---
+title: "Configure Nginx 🧩"
+date: 2021-10-31T15:08:33+01:00
+draft: false
+toc: false
+images:
+tags:
+ - untagged
+---
+
+This is a test
diff --git a/content/posts/domain-setup.md b/content/posts/2021/domain-setup.md
similarity index 100%
rename from content/posts/domain-setup.md
rename to content/posts/2021/domain-setup.md
diff --git a/content/posts/2021/hugo-integration.md b/content/posts/2021/hugo-integration.md
new file mode 100644
index 0000000..7c9802e
--- /dev/null
+++ b/content/posts/2021/hugo-integration.md
@@ -0,0 +1,19 @@
+---
+title: "Hugo Integration 🧭"
+date: 2021-10-30T15:42:22+02:00
+draft: true
+toc: false
+images:
+tags:
+ - untagged
+---
+
+## This is Word in Progress
+
+The hope here is that we can call a predefined go procedure that parses
+some section of markdown source code and instantiates the corresponding svg file
+under our static folder that is then referenced.
+
+``` go
+{{/* a comment */}}
+```
diff --git a/content/posts/2021/mermaid-uml.md b/content/posts/2021/mermaid-uml.md
new file mode 100644
index 0000000..960f321
--- /dev/null
+++ b/content/posts/2021/mermaid-uml.md
@@ -0,0 +1,122 @@
+---
+title: "Unified Modelling Language 🐬"
+date: 2021-10-30T15:42:47+02:00
+draft: false
+toc: false
+images:
+tags:
+ - svg
+ - uml
+ - code
+---
+
+## Mermaid CLI
+
+[Mermaid](https://mermaid-js.github.io/mermaid) is a JS based diagram and
+charting tool which aspires to generate diagrams in a markdown fashion. The
+main advantage here is that Mermaid is well integrated into quite a few
+editing and content management
+[packages](https://mermaid-js.github.io/mermaid/#/./integrations).
+There is command-line node-package that installs on both linux and WSL
+environments. You do need NPM version 10+ so installing in
+[Windows](https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl)
+takes a few extra steps in order to get the latest version.
+
+```bash
+npm install @mermaid-js/mermaid-cli
+```
+
+Additionally this
+package will sandbox a instance of chromium which doesn't operate correctly
+with WLS version 1. Upgrading to WLS version 2 will allow you to run the
+following example using `mmdc -i input.mmd -o output.svg -c config.json`.
+
+```text
+graph LR
+ S[fa:fa-dot] --> A
+ A{foo}
+ A --> B(bar)
+ A --> C(baz)
+ style S fill:none, stroke:none
+```
+
+This example generates the diagram show below.
+
+
+
+There are four base themes: dark, default, forest, neutral. Additional
+[customization](https://mermaid-js.github.io/mermaid/#/theming) is possible.
+The `config.json` is shown below which sets similar styling as
+[before]({{< relref "building-svg.md" >}} "building svg") using the other
+command-line tools.
+
+```json
+{
+ "theme": "neutral",
+ "themeVariables": {
+ "fontFamily":"monospace",
+ "fontSize":"14px",
+ "classText" : "white",
+ "nodeBorder" : "white",
+ "nodeTextColor" : "white",
+ "lineColor" : "white",
+ "arrowheadColor" : "white",
+ "mainBkg" : "none"
+ }
+}
+```
+
+## UML diagrams
+
+Mermaid is quite a bit more versatile and is geared towards making structured
+diagrams of classes and inter-related structures. For example the UML diagram below presents the overall composition of
+[pyviewer]({{< relref "pyside.md" >}} "pyside") which is image simple
+browsing utility for compressed archives.
+
+
+
+This does quite well at illustrating how classes are composed and which methods
+are available at various scopes. It also helps organizing and structuring a
+code-base when there means to reason in a visual way. The source code for this
+diagram is shown below for reference.
+
+```text
+classDiagram
+ class ApplicationWindow{
+ int[2] layout
+ int max_count
+ navigate(keyPress)
+ update()
+ }
+ class PyViewer{
+ signal image_changed
+ load_file_map(str path)
+ load_archive(int index)
+ set_max_count(int max_count)
+ }
+ class ArchiveLoader{
+ generate_map(str path)
+ extract_current_index()
+ check_media()
+ }
+ class ArchiveManager{
+ int max_count
+ Qbyte[] images
+ load_archive(str archive_path)
+ }
+ class TagManager{
+ int index
+ dict media_map
+ dict tag_filter
+ list tag_history
+ update_filter(str tag, bool state)
+ undo_last_filter()
+ adjust_index(int change)
+ tag_at(int index)
+ set_index(str tag_name)
+ }
+ ArchiveLoader <|-- TagManager
+ ArchiveLoader <|-- ArchiveManager
+ PyViewer <-- ArchiveLoader
+ PyViewer <-- ApplicationWindow
+```
diff --git a/content/posts/mile-stones.md b/content/posts/2021/mile-stones.md
similarity index 100%
rename from content/posts/mile-stones.md
rename to content/posts/2021/mile-stones.md
diff --git a/content/posts/pyside.md b/content/posts/2021/pyside.md
similarity index 100%
rename from content/posts/pyside.md
rename to content/posts/2021/pyside.md
diff --git a/content/posts/python-urllib.md b/content/posts/2021/python-urllib.md
similarity index 100%
rename from content/posts/python-urllib.md
rename to content/posts/2021/python-urllib.md
diff --git a/content/posts/site-setup.md b/content/posts/2021/site-setup.md
similarity index 100%
rename from content/posts/site-setup.md
rename to content/posts/2021/site-setup.md
diff --git a/content/posts/spice-monkey.md b/content/posts/2021/spice-monkey.md
similarity index 100%
rename from content/posts/spice-monkey.md
rename to content/posts/2021/spice-monkey.md
diff --git a/static/images/example_mermaid.svg b/static/images/example_mermaid.svg
new file mode 100644
index 0000000..5e194d4
--- /dev/null
+++ b/static/images/example_mermaid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/images/example_pyviewer.svg b/static/images/example_pyviewer.svg
new file mode 100644
index 0000000..c9377a0
--- /dev/null
+++ b/static/images/example_pyviewer.svg
@@ -0,0 +1 @@
+
\ No newline at end of file