From deef076a4fe688c3cb33365cab7a633d3803d85e Mon Sep 17 00:00:00 2001 From: Lieuwe Leene Date: Sun, 31 Oct 2021 15:18:54 +0100 Subject: [PATCH] content update October --- content/posts/{ => 2021}/building-svg.md | 18 +--- content/posts/{ => 2021}/calibre.md | 0 content/posts/2021/configure-nginx.md | 11 ++ content/posts/{ => 2021}/domain-setup.md | 0 content/posts/2021/hugo-integration.md | 19 ++++ content/posts/2021/mermaid-uml.md | 122 ++++++++++++++++++++++ content/posts/{ => 2021}/mile-stones.md | 0 content/posts/{ => 2021}/pyside.md | 0 content/posts/{ => 2021}/python-urllib.md | 0 content/posts/{ => 2021}/site-setup.md | 0 content/posts/{ => 2021}/spice-monkey.md | 0 static/images/example_mermaid.svg | 1 + static/images/example_pyviewer.svg | 1 + 13 files changed, 156 insertions(+), 16 deletions(-) rename content/posts/{ => 2021}/building-svg.md (94%) rename content/posts/{ => 2021}/calibre.md (100%) create mode 100644 content/posts/2021/configure-nginx.md rename content/posts/{ => 2021}/domain-setup.md (100%) create mode 100644 content/posts/2021/hugo-integration.md create mode 100644 content/posts/2021/mermaid-uml.md rename content/posts/{ => 2021}/mile-stones.md (100%) rename content/posts/{ => 2021}/pyside.md (100%) rename content/posts/{ => 2021}/python-urllib.md (100%) rename content/posts/{ => 2021}/site-setup.md (100%) rename content/posts/{ => 2021}/spice-monkey.md (100%) create mode 100644 static/images/example_mermaid.svg create mode 100644 static/images/example_pyviewer.svg 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. + +![example_mermaid.svg](/images/example_mermaid.svg) + +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. + +![example_pyviewer.svg](/images/example_pyviewer.svg) + +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 @@ +
foo
bar
baz
 \ 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 @@ +
ApplicationWindow
int[2] layout
int max_count
navigate(keyPress)
update()
PyViewer
signal image_changed
load_file_map(str path)
load_archive(int index)
set_max_count(int max_count)
ArchiveLoader
generate_map(str path)
extract_current_index()
check_media()
ArchiveManager
int max_count
Qbyte[] images
load_archive(str archive_path)
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)
 \ No newline at end of file