jekyll-theme-endless 0.19.6 → 0.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 38ee02aeccc68d70b0b8a33fc8f7d2be011d9a2a3bee1d5b2d4cbe937c1db18a
-  data.tar.gz: 1ff6d1009a40510eece921d7966e30f7bd85c2201e14c89c278c60697bd27268
+  metadata.gz: da9e8d00d36b95d47ff769418db0639bea2afe705d243e13479950bd71a14f1d
+  data.tar.gz: 85b1892b611410592eac1342cab6f7d4e220b1783e77cc2144c5002325bdd90b
 SHA512:
-  metadata.gz: 5fd6ccced658e8719aebd81bf2cfda4248a7e2d36e578770750d48a0fe02ecc791b8fe5ee8a2f215b617080325301b7021d5dabb8d66d1ed9e0a8f302dab941f
-  data.tar.gz: 8a57c6cdc7bf3711d4b91459e25c903a88d39ac74e1d22b08eaf503cb425a0aa30f66a2e18372fb8ecfbd191d8a5d87250c7ab26af916893c76ab3ff01891fc1
+  metadata.gz: d8329f8520f988b8bd17eb09dcd60317562a578502dfe718aa36916707727b9d007f245fba0020edfa20879176dad6f3f3f789fafff000a6796ade45934fd9df
+  data.tar.gz: 8554d4b79fea958c877dbd9b5ec741d060de7ddf4876fcc00fe618da8b6a5fc0b9afb5964311dd7756b04b64b53606d06c83a809f328946c24466324b04556ba

data/README.adoc

@@ -164,13 +164,13 @@ Contains a *navigation bar* with a configurable brand-label.
 Set `brand` in your `_config.yml`, to determine what is shown on the left side of the navigation.
 Example:
 
-TIP: The values for `brand`, `title` and `subtitle` are _not_ escaped by the layout. Thus, you _can_ use HTML-commands.
-
 [source, yaml]
 ----
 brand: '"<i>endless</i>"-Theme'
 ----
 
+TIP: The values for `brand`, `title` and `subtitle` are _not_ escaped by the layout. Thus, you _can_ use HTML-commands.
+
 Contains a configurable *title bar*.
 Set `title` and `subtitle` in your `_config.yml`, to determine what is shown below the navigation bar.
 If none of the two values is set, the title bar is omitted.
@@ -196,6 +196,15 @@ disclaimer: >- # this means to ignore newlines until the next entry
   Therefore, many things (e.g. the support of AsciiDoc) are based on personal requirements.
   You are welcome to use the theme (at your own risk) and contribute to the development.
 ----
+
+Set `navigation-left` to `true` in your `_config.yml`, to show the navigation on the left side and the main content on the right side
+(by default, the navigation is shown on the right side).
+Example:
+[source, yaml]
+----
+navigation-left: true
+----
+
 --
 
 

data/_config.yml

@@ -30,6 +30,14 @@ url: "" # the base hostname & protocol for your site, e.g. http://example.com
 
 
 
+# Layout settings
+###############################################################################
+navigation-left: false # If true, the navigation bar is rendered on the left and the main content on the right. Default: false.
+
+
+
+
+
 # AsciiDoc settings
 ###############################################################################
 asciidoctor:

data/_layouts/default.html

@@ -68,11 +68,33 @@ layout: html
 
 	<div class="row">
 
-		<div class="col-lg-8 pb-5">
+		{%- comment -%}
+			Assign default Bootstrap grid classes to content and aside sections.
+			This allows for responsive layout with content taking 8 columns and aside taking 4 columns on large screens.
+		{%- endcomment -%}
+		{% assign content_class = "col-lg-8 pb-5" %}
+		{% assign aside_class = "col-lg-4 pb-5" %}
+
+		{%- comment -%}
+			If 'navigation-left' is enabled in site config, swap the order of content and aside on large screens
+			by appending 'order-lg-1' and 'order-lg-2' classes respectively.
+			This enables flexible layout positioning without changing the HTML structure.
+		{%- endcomment -%}
+		{% if site.navigation-left %}
+			{% assign content_class = content_class | append: " order-lg-2" %}
+			{% assign aside_class = aside_class | append: " order-lg-1" %}
+		{% endif %}
+
+
+		{%- comment -%}
+			Renders main content and aside sections.
+			'content' holds page-specific data and is placed first, so it appears before the aside on small devices.
+			The aside contains components like top section, navigation, and info.
+		{%- endcomment -%}
+		<div class="{{ content_class }}">
 			{{ content }}
 		</div>
-
-		<div class="col-lg-4 pb-5">
+		<div class="{{ aside_class }}">
 			{% include aside_top.html %}
 			{% include aside_navigation.html %}
 			{% include aside_info.html %}

data/_sass/adoc-code.scss

@@ -39,24 +39,24 @@
  * Ensure that code annotation symbols are not selected along with the code.
  */
 i.conum, i.conum + b {
-  user-select: none;
+	user-select: none;
 }
 
 i.conum + b {
-  display: none; // Hides the <b> element
+	display: none; // Hides the <b> element
 }
 
 i.conum::after {
-  content: attr(data-value); // Displays the value of data-value in the <i> element
-  font-weight: bold; // Optional: for bold styling if desired
+	content: attr(data-value); // Displays the value of data-value in the <i> element
+	font-weight: bold; // Optional: for bold styling if desired
 
-  display: inline-block; // Enables circular styling
-  background-color: #f0f0f0; // Light gray background
-  border: 1px solid #555; // Thin dark gray border
-  border-radius: 50%; // Rounds the element into a circle
-  padding: 2px 6px; // Adjusts spacing for a circular shape
-  text-align: center; // Centers the text in the circle
-  line-height: 1; // Ensures the character is vertically centered
+	display: inline-block; // Enables circular styling
+	background-color: #f0f0f0; // Light gray background
+	border: 1px solid #555; // Thin dark gray border
+	border-radius: 50%; // Rounds the element into a circle
+	padding: 2px 6px; // Adjusts spacing for a circular shape
+	text-align: center; // Centers the text in the circle
+	line-height: 1; // Ensures the character is vertically centered
 	margin: 0 .5em;
 }
 

data/_sass/adoc-experimental.scss

@@ -15,16 +15,16 @@ b.button {
  * Styles for the output of the AsciiDoc command `kbd`.
  */
 .keyseq kbd {
-  display: inline-block;
-  padding: 0.42em 0.71em;
-  margin: 0 0.2em;
-  background: #f5f5f5;
-  color: #000;
-  font: 600 0.85em/0.85 monospace;
-  letter-spacing: .05em;
-  white-space: nowrap;
-  border: 1px solid #bbb;
-  border-radius: .1em;
-  box-shadow: 2px 2px 0 #888;
+	display: inline-block;
+	padding: 0.42em 0.71em;
+	margin: 0 0.2em;
+	background: #f5f5f5;
+	color: #000;
+	font: 600 0.85em/0.85 monospace;
+	letter-spacing: .05em;
+	white-space: nowrap;
+	border: 1px solid #bbb;
+	border-radius: .1em;
+	box-shadow: 2px 2px 0 #888;
 }
 

data/_sass/adoc-lists.scss

@@ -6,10 +6,10 @@ li {
 }
 
 ul, ol {
-  padding-left: 1.5em;
+	padding-left: 1.5em;
 
-  ul, ol {
-    padding-left: 1em;
-  }
+	ul, ol {
+		padding-left: 1em;
+	}
 }
 

data/_sass/adoc-sidebarblock.scss

@@ -0,0 +1,19 @@
+div.sidebarblock {
+	margin: 1em 0;
+	padding: 0.5em;
+	border: 1px solid #ccc;
+	border-radius: 13px;
+	background-color: lightgoldenrodyellow;
+
+	> .content {
+		padding: 0 0.5em;
+
+		> .title {
+			margin: 0 0 0.5em 0;
+			font-weight: bold;
+			font-size: 1.3em;
+			text-align: center;
+			border-bottom: 1px solid #ccc;
+		}
+	}
+}

data/_sass/adoc-toc.scss

@@ -24,9 +24,9 @@ ul.sectlevel2,
 ul.sectlevel3,
 ul.sectlevel4,
 ul.sectlevel5 {
-    list-style-type: none;
-    padding-left: 1.3em;
-    margin: 4px 0;
+	list-style-type: none;
+	padding-left: 1.3em;
+	margin: 4px 0;
 }
 
 li {

data/_sass/glossary.scss

@@ -61,8 +61,8 @@ div.glossary-index {
 h2.glossary {
 
 	display: flex;
-  justify-content: space-between;
-  align-items: baseline;
+	justify-content: space-between;
+	align-items: baseline;
 	font-weight: bold;
 
 	border-bottom: 2px dotted #ccc;

data/_sass/postlists.scss

@@ -3,45 +3,45 @@
  */
 
 ul.post-list-short {
-  margin-left: 0;
+	margin-left: 0;
 	list-style-type: "⇒ ";
 }
 
 ul.post-list-long {
 
-  list-style: none;
-  padding: 0;
-  margin: 0;
+	list-style: none;
+	padding: 0;
+	margin: 0;
 
-  li {
-    margin-bottom: 20px;
+	li {
+		margin-bottom: 20px;
 
-    h2 {
-      margin-left: .25em;
+		h2 {
+			margin-left: .25em;
 			font-size: 1.7em;
-    }
+		}
 
 		p.summary {
 			margin-bottom: 1.5em;
 		}
 
-    div {
-      position: relative;
-      margin-left: 3em;
+		div {
+			position: relative;
+			margin-left: 3em;
 			padding: .5em 0;
 
-      // Blurred bar on the left side of the div
-      &::before {
-        content: '';
-        position: absolute;
-        left: -2em;
-        top: 0;
-        bottom: 0;
-        width: 1em;
-        background-color: rgba(0, 0, 111, 0.1);
-        filter: blur(3px);
-        border-radius: 5px;
-      }
-    }
-  }
+			// Blurred bar on the left side of the div
+			&::before {
+				content: '';
+				position: absolute;
+				left: -2em;
+				top: 0;
+				bottom: 0;
+				width: 1em;
+				background-color: rgba(0, 0, 111, 0.1);
+				filter: blur(3px);
+				border-radius: 5px;
+			}
+		}
+	}
 }

data/assets/css/main.scss

@@ -33,6 +33,7 @@
  */
 @use "adoc";
 @use "adoc-admonition";
+@use "adoc-sidebarblock";
 @use "adoc-tables";
 @use "adoc-lists";
 @use "adoc-quote";

data/lib/jekyll-theme-endless/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
 	module Endless
-		VERSION = '0.19.6'
+		VERSION = '0.21.0'
 	end
 end

data/pages_examples/showroom-asciidoc.adoc

@@ -234,6 +234,34 @@ Code for the *block* command (here for a NOTE):
 
 
 
+[[sidebarblock]]
+== Sidebar/Aside blocks
+
+.Excursus: Sidebar block with a code example
+****
+Sidebars are used to visually separate auxiliary bits of content
+that supplement the main text.
+They typically contain more information than a simple admonition block.
+
+TIP: They can contain any type of content.
+
+// The standard sidebar block delimiter (****) cannot be used directly inside a code block, and escaping it does not work either.
+// As a workaround, I defined a custom attribute "block-delimiter" and substituted it into the code block below.
+:block-delimiter: ****
+
+.Source code you can use to create a sidebar block. The block-delimiter is `\****`.
+[source, asciidoc, subs="attributes"]
+----
+.Title of the sidebar block
+{block-delimiter}
+Content of the sidebar block.
+{block-delimiter}
+----
+
+****
+
+
+
 
 
 == Tables
@@ -315,7 +343,6 @@ The result is:
 
 
 
-
 == Images
 
 // AsciiDoc commands are not stripped/processed when used within `alt=""`.
@@ -541,12 +568,55 @@ This makes them *ideal for automated workflows* and consistent documentation acr
 Asciidoctor Diagram supports a https://docs.asciidoctor.org/diagram-extension/latest/[wide range of text-based diagram types]
 making it a versatile choice for creating diagrams directly within documentation.
 
+The Docker image provided by jekyll-theme-endless currently ships with the software preinstalled to support the following diagram types:
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/a2s/[ASCIIToSVG],
+// BlockDiag (
+// 	https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/actdiag/[ActDiag],
+// 	https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/blockdiag/[BlockDiag],
+// 	https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/nwdiag/[NwDiag / RackDiag / PacketDiag],
+// 	https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/seqdiag/[SeqDiag]
+// ),
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/bytefield/[Bytefield-SVG],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/dbml/[DBML],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/ditaa/[Ditaa],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/dpic/[Dpic],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/erd/[Erd],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/gnuplot/[Gnuplot],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/graphviz/[Graphviz],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/lilypond/[LilyPond],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/mermaid/[Mermaid],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/msc/[MscGen],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/nomnoml/[Nomnoml],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/penrose/[Penrose],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/pikchr/[Pikchr],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/pintora/[Pintora],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/plantuml/[PlantUML],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/shaape/[Shaape],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/smcat/[State Machine Cat],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/structurizr/[Structurizr],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/svgbob/[SvgBob],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/symbolator/[Symbolator],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/syntrax/[Syntrax / JSyntrax],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/umlet/[UMLet],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/vega/[Vega / Vega-Lite],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/wavedrom/[WaveDrom],
+//
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/barcode/[Barcodes and QR codes],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/bpmn/[BPMN],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/d2/[D2],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/diagrams/[Diagrams],
+// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/meme/[Meme],
+https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/tikz/[TikZ].
+
+
+
 
 
 === Ditaa
 
 Ideal for converting ASCII art into diagrams, especially useful for quick sketches and block diagrams.
 
+
 .Example of a Ditaa diagram illustrating the flow of processing in Asciidoctor Diagram, where a text document is converted through Asciidoctor with Ditaa to produce a PNG output, showcasing the transformation from plain text to visually structured output.
 [ditaa,, svg]
 ....
@@ -592,68 +662,88 @@ This is a unique feature of Ditaa.
 
 
 
-=== PlantUML
 
-Great for creating UML diagrams like class diagrams, sequence diagrams, and activity diagrams.
 
-.Example of a class diagram in PlantUML, depicting a hierarchy where `DiagramBlock` and `BlockProcessor` classes are related, with `DiagramBlock` having subclasses `DitaaBlock` and `PlantUmlBlock`.
-[plantuml, , svg]
+[[dpic]]
+=== Dpic
+Dpic is an implementation of the https://en.wikipedia.org/wiki/PIC_(markup_language)[Pic-DSL] (Pic Domain-Specific Language) and is especially well-suited for generating precise diagrams, graphs, and technical illustrations directly from text-based descriptions.
+
+.This diagram demonstrates a polar coordinate system rendered with the Pic graphics language.
+[dpic,, svg]
 ....
-class BlockProcessor
-class DiagramBlock
-class DitaaBlock
-class PlantUmlBlock
+# Polar coordinate system with variables for better maintainability
+# Degrees-to-radians conversion factor (π/180)
+dtor = atan2(0,-1)/180
 
-BlockProcessor <|-- DiagramBlock
-DiagramBlock <|-- DitaaBlock
-DiagramBlock <|-- PlantUmlBlock
+# Axis length (10% longer than unit circle radius)
+axis_len = 1 + 0.2
+
+# Scaling factor for radial lines and axes
+sf = 1.5
+
+# Concentric circles
+circle at (0,0) radius sf*1.0 colored "lightblue"
+circle at (0,0) radius sf*0.5
+
+# Radial lines (every 5 degrees)
+for d = 0 to 360 by 5 do {
+	# Radial line length (scaled by sf)
+	rf = d / 360 * sf
+  line from (0,0) to (rf*cos(d*dtor), rf*sin(d*dtor))
+}
+
+# "X"-axis (scaled by sf)
+line from (-axis_len*sf, 0) to (axis_len*sf, 0)
+
+# "Y"-axis (scaled by sf)
+line from (0, -axis_len*sf) to (0, axis_len*sf)
+
+# Axis labels
+"0°" at (axis_len*sf - 0.1, -0.2)
+"90°" at (0.2, axis_len*sf - 0.1)
+"180°" at (-axis_len*sf + 0.2, -0.2)
+"270°" at (0.2, -axis_len*sf + 0.1)
+....
+
+
+.This diagram illustrates the 'Magic Triangle of Cost, Time and Quality' created with simple pic code. Lines between the circles are colored and habe a different value for the `thickness`.
+[dpic,, svg]
+....
+circle rad 0.35 "quality"
+circle rad 0.35 "cost" at 1st circle - (0.7, 1.15)
+circle rad 0.35 "time" at 1st circle + (0.7, -1.15)
+
+line color "red" thickness 3.1 from 1st circle to 2nd circle chop 0.35
+line color "blue" thickness 6.2 from 2nd circle to 3rd circle chop 0.35
+line color "green" thickness 9.3 from 3rd circle to 1st circle chop 0.35
+....
+
+
+
+
+
+[[gnuplot]]
+=== Gnuplot
+
+Gnuplot is a powerful plotting utility that allows users to create a wide variety of 2D and 3D plots from data and mathematical functions.
+This makes it ideal for visualizing scientific data, mathematical functions, and statistical information.
+
+.Example of a simple parabola plotted using Gnuplot, demonstrating the function y = x² over the range from -10 to 10, with labeled axes and a title.
+[gnuplot,, svg]
+....
+set xlabel 'x'
+set ylabel 'y'
+set title '{/Arial:BoldItalic Simple Parabola: y = x²}' font ',17'
+set grid
+
+# Define the function
+f(x) = x**2
+
+# Plot the function in the range from -10 to 10
+plot f(x) with lines linewidth 2 linecolor rgb 'blue' title 'y = x²'
 ....
 
-.Example of a sequence diagram in PlantUML, showing an interaction where Bob greets Alice with 'hello,' and Alice responds with 'hi.'
-[plantuml,, format="svg", id="myDiagram", width="200px"]
-----
-Bob->Alice : hello
-Alice --> Bob : hi
-----
 
-[[mindmap-example]]
-.Example of a mind map illustrating concepts in the field of Artificial Intelligence (AI) and Machine Learning (ML).
-[plantuml, format=svg]
-----
-@startmindmap
-* Artificial Intelligence (AI)
-** Symbolic AI
-*** Logic / Knowledge Representation
-*** Expert Systems
-** Machine Learning (ML)
-*** Supervised Learning
-**** Classification
-***** Decision Trees
-***** Neural Networks
-***** Support Vector Machines (SVM)
-**** Regression
-***** Linear Regression
-***** Logistic Regression
-*** Unsupervised Learning
-**** Clustering
-***** K-Means
-***** DBSCAN
-**** Dimensionality Reduction
-***** PCA (Principal Component Analysis)
-***** t-SNE / UMAP
-*** Reinforcement Learning
-**** Q-Learning
-**** Deep Q-Networks (DQN)
-**** Policy Gradient Methods
-*** Deep Learning
-**** CNN (Convolutional Neural Networks)
-**** RNN (Recurrent Neural Networks)
-**** LSTM / GRU
-**** Transformer
-***** BERT
-***** GPT
-@endmindmap
-----
 
 
 
@@ -661,6 +751,7 @@ Alice --> Bob : hi
 
 Useful for directed and undirected graphs, including flowcharts, state diagrams, and dependency graphs.
 
+
 .Example of a directed graph in Graphviz, illustrating nodes with connections, including a self-loop on node b and cyclical paths between nodes.
 [graphviz,,svg]
 ....
@@ -676,11 +767,31 @@ digraph g {
 
 
 
+
+
+=== Lilypond
+
+LilyPond is a music engraving program that enables users to create beautifully typeset sheet music through a text-based input system, focusing on producing high-quality, professional-looking scores suitable for publication.
+
+
+// The output format SVG is not supported by LilyPond.
+.Example of a melody in LilyPond notation, demonstrating a simple sequence of notes with pitches relative to the starting note c'.
+[lilypond]
+....
+\version "2.22.1"
+\relative c' { f d f a d f e d cis a cis e a g f e }
+....
+
+
+
+
+
 [[mermaid]]
 === Mermaid
 
 https://mermaid.js.org/[mermaid.js] is ideal for creating flowcharts, sequence diagrams, Gantt charts, and more.
 
+
 .Example of a Sankey diagram that shows the distribution of construction costs across different trades, as well as the material and labor costs.
 [mermaid, format=svg, background="FFFF0000"]
 ----
@@ -702,6 +813,7 @@ Tiler,Material costs,10000
 Tiler,Labor costs,10000
 ----
 
+
 .Example of a flowchart in Mermaid, demonstrating a simple decision tree with two options.
 [mermaid, format=svg]
 ----
@@ -713,6 +825,7 @@ graph TD;
 		D --> E;
 ----
 
+
 .Example of a pie chart in Mermaid, showing the popularity of different types of cuisine worldwide. Additionally, the use of the background attribute in Mermaid is demonstrated, with the color set to FFEEDD.
 // This example also demonstrates how to:
 // - Use the general "format" attribute of Asciidoctor Diagram.
@@ -736,16 +849,377 @@ pie title Popular Cuisines Around the World
 
 
 
-=== Lilypond
+=== MscGen
 
-LilyPond is a music engraving program that enables users to create beautifully typeset sheet music through a text-based input system, focusing on producing high-quality, professional-looking scores suitable for publication.
+https://www.mcternan.me.uk/mscgen/[MscGen] is a tool for creating message sequence charts (*MSC*s), ideal for visualizing interactions between entities (Systems, Actors, etc.) over time.
 
-// The output format SVG is not supported by LilyPond.
-.Example of a melody in LilyPond notation, demonstrating a simple sequence of notes with pitches relative to the starting note c'.
-[lilypond]
+[msc,, svg]
 ....
-\version "2.22.1"
-\relative c' { f d f a d f e d cis a cis e a g f e }
+msc {
+
+   # The entities
+   A, B, C, D;
+
+   # Small gap before the boxes
+   |||;
+
+   # Next four on same line due to ','
+   A box A [label="box"],
+   B rbox B [label="rbox"],
+   C abox C [label="abox"],
+   D note D [label="note"];
+
+   # Small gap between the examples
+   |||;
+
+   # Example of the boxes with filled backgrounds
+   A abox B [label="abox from A to B", textbgcolour="#ff7f7f"];
+   B rbox C [label="rbox from B to C", textbgcolour="#7fff7f"];
+   C note D [label="note from C to D", textbgcolour="#7f7fff"];
+
+   # Small gap between the examples
+   |||;
+
+   # Example with arrows
+	 --- [label = "Examples with arrows:"];
+   A->B [ label = "Message from A to B" ] ;
+   B=>C [ label = "Function call from B to C"];
+   C=>C [ label = "Loop" ];
+
+}
+....
+
+
+
+
+
+[[nomnoml]]
+=== Nomnoml
+
+https://nomnoml.com/[Nomnoml] is a simple and intuitive tool for creating UML diagrams.
+
+.A flowchart in Nomnoml, illustrating a decision-making process for troubleshooting a non-working lamp, including states, decisions, and actions.
+[nomnoml,, svg]
+....
+#direction: down
+[<start>start] -> [<state>Lamp doesn't work] -> [<choice>Lamp plugged in?] yes -> [<choice>Bulb burned out?] no -> [<state>Repair lamp] -> [<end>end]
+[Lamp plugged in?] no ->[<state>Plug in lamp]
+[Bulb burned out?] yes ->[<state>Replace bulb]
+....
+
+
+
+
+
+[[pintora]]
+=== Pintora
+
+https://pintorajs.vercel.app/docs/intro/[Pintora] is a versatile diagramming tool that supports various types of diagrams, including activity diagrams, sequence diagrams, and class diagrams.
+
+
+.Example of a mind map created with Pintora, illustrating the categorization of UML diagrams into behavior and structural diagrams, along with specific types under each category. The diagram uses a left-to-right layout and custom colors for different levels of nodes.
+[pintora,, svg]
+....
+mindmap
+@param layoutDirection LR
+@param {
+  l1NodeBgColor   #287a5c
+  l1NodeTextColor #fff
+  l2NodeBgColor   #21966b
+  l2NodeTextColor #fff
+  nodeBgColor     #62b999
+  textColor       #fff
+}
++ UML Diagrams
+++ Behavior Diagrams
++++ Activity diagram
++++ Communication diagram
++++ Interaction overview diagram
++++ Sequence diagram
++++ State diagram
++++ Timing diagram
++++ Use case diagram
+++ Structural Diagrams
++++ Class Diagram
++++ Component Diagram
++++ Composite structure diagram
++++ Deployment diagram
++++ Object diagram
++++ Package diagram
++++ Profile diagram
+....
+
+
+.Example of a Gantt chart created with Pintora, outlining a software project plan with various phases, tasks, and dependencies. The chart includes parameters for font color, bar gap, bar height, and grid line padding, as well as markers for the project start date and current date.
+[pintora,, svg]
+....
+gantt
+  @param {
+    fontColor blue
+    barGap 11
+    barHeight 31
+    gridLineStartPadding 20
+  }
+
+  title Software Project — Project Plan
+  dateFormat  YYYY-MM-DD
+  axisFormat  MM-DD
+  axisInterval 1M
+
+  section Project Preparation
+  "Gather Requirements"            : p1, 2025-09-01, 14d
+  "Feasibility Analysis"           : p2, after p1, 10d
+  "Project Planning & Kick-off"    : p3, after p2, 7d
+
+  section Architecture & Design
+  "Design System Architecture"     : d1, after p3, 20d
+  "UI/UX Design"                   : d2, after p3, 14d
+  "API Interfaces"                 : d4, after d2, 20d
+  "Define Technology Stack"        : d3, after d2, 7d
+
+  section Implementation
+  "Backend Development"            : i1, after d3, 40d
+  "Frontend Development"           : i2, after d3, 35d
+  "Frontend-Backend Integration"   : i4, after i2, 15d
+
+  section Quality Assurance
+  "Documentation of QA Strategy"   : q0, after d1, 20d
+  "Unit Tests & Code Review"       : q1, after q0, 30d
+  "Integration Tests"              : q2, after i4, 14d
+  "System Tests"                   : q3, after q2, 14d
+  "User Acceptance Test (UAT)"     : q4, after q3, 10d
+
+  section Deployment & Closure
+  "Training Deployment"            : r1, after q4, 5d
+  "Training & Documentation"       : r2, after q4, 7d
+  "Production Deployment"          : r4, after r1, 5d
+  "Project Closure & Review"       : r3, after r4, 3d
+
+  %% Mark project start
+  markDate 2025-09-01
+  %% Mark current date
+  markDate 2025-09-17
+....
+
+
+
+
+
+[[plantuml]]
+=== PlantUML
+
+Great for creating UML diagrams like class diagrams, sequence diagrams, and activity diagrams.
+
+
+.Example of a class diagram in PlantUML, depicting a hierarchy where `DiagramBlock` and `BlockProcessor` classes are related, with `DiagramBlock` having subclasses `DitaaBlock` and `PlantUmlBlock`.
+[plantuml, , svg]
+....
+class BlockProcessor
+class DiagramBlock
+class DitaaBlock
+class PlantUmlBlock
+
+BlockProcessor <|-- DiagramBlock
+DiagramBlock <|-- DitaaBlock
+DiagramBlock <|-- PlantUmlBlock
+....
+
+
+.Example of a sequence diagram in PlantUML, showing an interaction where Bob greets Alice with 'hello,' and Alice responds with 'hi.'
+[plantuml,, format="svg", id="myDiagram", width="200px"]
+----
+Bob->Alice : hello
+Alice --> Bob : hi
+----
+
+
+[[mindmap-example]]
+.Example of a mind map illustrating concepts in the field of Artificial Intelligence (AI) and Machine Learning (ML).
+[plantuml, format=svg]
+----
+@startmindmap
+* Artificial Intelligence (AI)
+** Symbolic AI
+*** Logic / Knowledge Representation
+*** Expert Systems
+** Machine Learning (ML)
+*** Supervised Learning
+**** Classification
+***** Decision Trees
+***** Neural Networks
+***** Support Vector Machines (SVM)
+**** Regression
+***** Linear Regression
+***** Logistic Regression
+*** Unsupervised Learning
+**** Clustering
+***** K-Means
+***** DBSCAN
+**** Dimensionality Reduction
+***** PCA (Principal Component Analysis)
+***** t-SNE / UMAP
+*** Reinforcement Learning
+**** Q-Learning
+**** Deep Q-Networks (DQN)
+**** Policy Gradient Methods
+*** Deep Learning
+**** CNN (Convolutional Neural Networks)
+**** RNN (Recurrent Neural Networks)
+**** LSTM / GRU
+**** Transformer
+***** BERT
+***** GPT
+@endmindmap
+----
+
+
+
+
+
+[[smcat]]
+=== State Machine Cat
+
+https://github.com/sverweij/state-machine-cat[State Machine Cat] (smcat) is a tool for creating state machine diagrams.
+
+.Example footnote:[Source: https://github.com/sverweij/state-machine-cat?tab=readme-ov-file#colors-and-line-width[Example for colors and line widths in the documentation of State Machine Cat on GitHub]] of a state machine diagram created with State Machine Cat, illustrating the behavior of a cat. The diagram demonstrates the use of colors and different line widths to enhance the visual representation of states and transitions. The diagram is laid out from left to right using the "circo" engine.
+[smcat,, svg, direction="left-right", engine="circo"]
+----
+sleep [color="blue" active],
+eat   [color="#008800"],
+meow  [color="red"],
+play  [color="purple"];
+
+sleep -> meow  [color="red"]            : wake up;
+meow  -> meow  [color="red"]            : no response from human;
+meow  -> eat   [color="#008800"]        : human gives food;
+meow  -> play  [color="purple"]         : human gives toy;
+play  -> sleep [color="blue"]           : tired or bored;
+eat   -> sleep [color="blue" width=3.5] : belly full;
+----
+
+
+
+
+
+[[tikz]]
+=== TikZ
+https://github.com/pgf-tikz/pgf[TikZ] is a powerful and user-friendly syntax layer built upon the PGF (Portable Graphic Format) package for creating high-quality graphics programmatically within LaTeX documents.
+
+
+.Example of a simple diagram created with TikZ, demonstrating the drawing of a grid, coordinates, and arrows between points. The diagram includes a red arrow to highlight a specific direction. The diagram is scaled by a factor of 2.3 and uses ultra thick lines for better visibility.
+[tikz]
+....
+\begin{tikzpicture}[scale=2.3, ultra thick]
+	\draw [help lines] (0,0) grid (3,3);
+	\coordinate (a) at (1,0);
+	\coordinate (b) at (3,2);
+
+	\draw[->] (a) -- (b);
+	\coordinate (c) at (2,2);
+	\draw[->,red] (a) -- (c);
+
+\end{tikzpicture}
+....
+
+
+.Example footnote:[Source: https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/tikz/#example[Example for a TikZ diagram taken from the AsciiDoctor-Diagram documentation]] of a more complex 3D diagram created with TikZ, illustrating a tetrahedron inscribed within a parallelepiped. The diagram uses perspective angles and colors to enhance the visual representation of the shapes and their vertices.
+[tikz]
+....
+\begin{tikzpicture}[font=\LARGE]
+
+% Figure parameters (tta and k needs to have the same sign)
+% They can be modified at will
+\def \tta{ -10.00000000000000 } % Defines the first angle of perspective
+\def \k{    -3.00000000000000 } % Factor for second angle of perspective
+\def \l{     6.00000000000000 } % Defines the width  of the parallelepiped
+\def \d{     5.00000000000000 } % Defines the depth  of the parallelepiped
+\def \h{     7.00000000000000 } % Defines the heigth of the parallelepiped
+
+% The vertices A,B,C,D define the reference plan (vertical)
+\coordinate (A) at (0,0);
+\coordinate (B) at ({-\h*sin(\tta)},{\h*cos(\tta)});
+\coordinate (C) at ({-\h*sin(\tta)-\d*sin(\k*\tta)},
+                    {\h*cos(\tta)+\d*cos(\k*\tta)});
+\coordinate (D) at ({-\d*sin(\k*\tta)},{\d*cos(\k*\tta)});
+
+% The vertices Ap,Bp,Cp,Dp define a plane translated from the
+% reference plane by the width of the parallelepiped
+\coordinate (Ap) at (\l,0);
+\coordinate (Bp) at ({\l-\h*sin(\tta)},{\h*cos(\tta)});
+\coordinate (Cp) at ({\l-\h*sin(\tta)-\d*sin(\k*\tta)},
+                     {\h*cos(\tta)+\d*cos(\k*\tta)});
+\coordinate (Dp) at ({\l-\d*sin(\k*\tta)},{\d*cos(\k*\tta)});
+
+% Marking the vertices of the tetrahedron (red)
+% and of the parallelepiped (black)
+\fill[black]  (A) circle [radius=2pt];
+\fill[red]    (B) circle [radius=2pt];
+\fill[black]  (C) circle [radius=2pt];
+\fill[red]    (D) circle [radius=2pt];
+\fill[red]   (Ap) circle [radius=2pt];
+\fill[black] (Bp) circle [radius=2pt];
+\fill[red]   (Cp) circle [radius=2pt];
+\fill[black] (Dp) circle [radius=2pt];
+
+% painting first the three visible faces of the tetrahedron
+\filldraw[draw=red,bottom color=red!50!black, top color=cyan!50]
+  (B) -- (Cp) -- (D);
+\filldraw[draw=red,bottom color=red!50!black, top color=cyan!50]
+  (B) -- (D)  -- (Ap);
+\filldraw[draw=red,bottom color=red!50!black, top color=cyan!50]
+  (B) -- (Cp) -- (Ap);
+
+% Draw the edges of the tetrahedron
+\draw[red,-,very thick] (Ap) --  (D)
+                        (Ap) --  (B)
+                        (Ap) -- (Cp)
+                        (B)  --  (D)
+                        (Cp) --  (D)
+                        (B)  -- (Cp);
+
+% Draw the visible edges of the parallelepiped
+\draw [-,thin] (B)  --  (A)
+               (Ap) -- (Bp)
+               (B)  --  (C)
+               (D)  --  (C)
+               (A)  --  (D)
+               (Ap) --  (A)
+               (Cp) --  (C)
+               (Bp) --  (B)
+               (Bp) -- (Cp);
+
+% Draw the hidden edges of the parallelepiped
+\draw [gray,-,thin] (Dp) -- (Cp);
+                    (Dp) --  (D);
+                    (Ap) -- (Dp);
+
+% Name the vertices (the names are not consistent
+%  with the node name, but it makes the programming easier)
+\draw (Ap) node [right]           {$A$}
+      (Bp) node [right, gray]     {$F$}
+      (Cp) node [right]           {$D$}
+      (C)  node [left,gray]       {$E$}
+      (D)  node [left]            {$B$}
+      (A)  node [left,gray]       {$G$}
+      (B)  node [above left=+5pt] {$C$}
+      (Dp) node [right,gray]      {$H$};
+
+% Drawing again vertex $C$, node (B) because it disappeared behind the edges.
+% Drawing again vertex $H$, node (Dp) because it disappeared behind the edges.
+\fill[red]   (B) circle [radius=2pt];
+\fill[gray] (Dp) circle [radius=2pt];
+
+% From the reference and this example one can easily draw
+% the twin tetrahedron jointly to this one.
+% Drawing the edges of the twin tetrahedron
+% switching the p_s: A <-> Ap, etc...
+\draw[red,-,dashed, thin] (A)  -- (Dp)
+                          (A)  -- (Bp)
+                          (A)  --  (C)
+                          (Bp) -- (Dp)
+                          (C)  -- (Dp)
+                          (Bp) --  (C);
+\end{tikzpicture}
 ....
 
 
@@ -759,6 +1233,7 @@ For details on how to use the QR code and barcode features, see the https://docs
 
 ==== Block version of QR Codes (PNG and SVG)
 
+
 // Barcode block
 .QR code in SVG format using a code block and a specified x-dimension (value of `7`).
 [qrcode, format="svg", xdim=7]
@@ -766,6 +1241,7 @@ For details on how to use the QR code and barcode features, see the https://docs
 This QR code is generated with Asciidoctor Diagram and presented in SVG format using a barcode block.
 ....
 
+
 // Barcode block macro
 .QR code in PNG format using a block macro and a specified x-dimension (value of `5`).
 qrcode::This QR code is generated with Asciidoctor Diagram and presented in PNG format using the barcode block macro.[format="png", xdim=5]

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-endless
 version: !ruby/object:Gem::Version
-  version: 0.19.6
+  version: 0.21.0
 platform: ruby
 authors:
 - Sven Boekhoff
@@ -270,6 +270,7 @@ files:
 - _sass/adoc-images.scss
 - _sass/adoc-lists.scss
 - _sass/adoc-quote.scss
+- _sass/adoc-sidebarblock.scss
 - _sass/adoc-stem.scss
 - _sass/adoc-tables.scss
 - _sass/adoc-text.scss