Added support for mermaid and plantuml

.gitignore

@@ -1 +1,11 @@
+# MkDocs
 site/
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/

README.md

@@ -7,7 +7,7 @@ You can see the slides of this repository at https://hogenttin.github.io/hogent-
 ## Installation
 
 1. Install [python](https://www.python.org/downloads/) .
-2. (optional) Create a [Python environment](https://docs.python.org/3/library/venv.html). E.g. for Linux:
+2. (optional) Create a [python environment](https://docs.python.org/3/library/venv.html). E.g. for Linux:
 
     ```console
     python -m venv venv
@@ -17,7 +17,7 @@ You can see the slides of this repository at https://hogenttin.github.io/hogent-
 3. Install the dependencies:
 
     ```console
-    pip install -r requirements.txt
+    pip install --requirement requirements.txt
     ```
 
 ## Basic usage
@@ -52,7 +52,7 @@ A [markdownlint](https://github.com/DavidAnson/markdownlint) config has been add
 
 ### Theme
 
-If you want another theme, you can change edit the `theme.css` header tag in [index.html](./docs/index.html) to point to another CSS file. You can also use an existing link like https://hogenttin.github.io/hogent-docsify/theme.css . Using this specific URL will always keep your theme up to date with the one on this repo.
+If you want another theme, you can change edit the `extra_css` entry in [mkdocs.yml](./mkdocs.yml) to point to another CSS file. You can also use an existing link like https://hogenttin.github.io/hogent-mkdocs/docs/theme.css . Using this specific URL will always keep your theme up to date with the one on this repo.
 
 ### [MkDocs](https://www.mkdocs.org/) options
 

docs/examples/h2.md

@@ -46,7 +46,7 @@ graph TD
 
 You can Also use [PlantUML](https://plantuml.com/news) to create diagrams from text:
 
-```plantuml
+```puml
 @startuml
 participant Participant as Foo
 actor       Actor       as Foo1

docs/theme.css

@@ -0,0 +1,128 @@
+/*
+ *  https://www.hogent.be/dit-is-hogent/huisstijl/huisstijl-kleuren/
+ *  https://fonts.google.com/specimen/Montserrat
+ *  https://fonts.google.com/specimen/Inconsolata
+ */
+
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata&family=Montserrat:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap");
+
+:root {
+    --hogent-blue: #4ca2d5;
+    --hogent-gray: #c3bbaf;
+    --hogent-red: #ef8767;
+    --hogent-white: #ffffff;
+    --hogent-black: #000000;
+
+    /* HOGENT blue is good for slides and accents with bold text, but is too bright for regular text. Therefore, we use 
+      * a darker blue for text, like the blue Wikipedia uses for links.
+      * https://en.wikipedia.org/wiki/Help:Link_color#Standard_colors
+      */
+    --wikipedia-blue: #3366cc;
+    --blue: var(--wikipedia-blue);
+}
+
+body {
+    font-family: "Montserrat", "Arial", sans-serif;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.5em;
+    color: var(--hogent-black);
+}
+
+.rst-content h1,
+.rst-content h2,
+.rst-content h3,
+.rst-content h4,
+.rst-content h5,
+.rst-content h6 {
+    font-family: "Montserrat", "Arial", sans-serif;
+    font-weight: 800;
+}
+
+.rst-content h1 {
+    font-size: 2.5em;
+}
+
+.rst-content h2 {
+    font-size: 1.5em;
+}
+
+.rst-content h3 {
+    font-size: 1.25em;
+}
+
+.rst-content h4 {
+    font-size: 1em;
+}
+
+b,
+strong {
+    color: var(--hogent-red);
+    font-weight: bold;
+}
+
+i,
+em {
+    font-style: italic;
+}
+
+a {
+    color: var(--blue);
+}
+
+a:hover {
+    color: var(--hogent-gray);
+    text-decoration: none;
+}
+
+.rst-content code,
+.rst-content pre code.hljs {
+    font-family: "Inconsolata", monospace;
+    font-size: 1rem;
+}
+
+.rst-content code {
+    color: var(--blue);
+}
+
+blockquote p {
+    font-style: italic;
+    padding: 1em;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--hogent-gray);
+    border-radius: 5px;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
+ul {
+    list-style-type: disc;
+}
+
+ul ul {
+    list-style-type: square;
+}
+
+ul ul ul {
+    list-style-type: circle;
+}
+
+/* Uncomment if you want the theme to fill the entire width of the screen
+ */
+/* .wy-nav-content {
+    max-width: 100%;
+} */
+
+/* tr,
+th {
+    border-style: none;
+}
+
+td {
+    border-style: solid none none none;
+    border-color: var(--hogent-black);
+} */

mkdocs.yml

@@ -14,5 +14,13 @@ markdown_extensions:
     - pymdownx.magiclink
     - pymdownx.tasklist
     - pymdownx.tilde
+plugins:
+    - mermaid2
+    - plantuml:
+          puml_url: https://www.plantuml.com/plantuml/
+          num_workers: 8
+    - search
 extra_javascript:
     - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js
+extra_css:
+    - ./theme.css

requirements.txt

@@ -1,2 +1,4 @@
 mkdocs
 pymdown-extensions
+mkdocs-mermaid2-plugin
+mkdocs_puml