Add admonitions to single-page, Add collapsible to html and single

docs/01_Features/Collapsible.md

@@ -0,0 +1,22 @@
+
+Collapsible sections can be done using standard HTML
+
+<details>
+  <summary>Click to expand!</summary>
+
+  1. A numbered
+  2. list
+     * With some
+     * Sub bullets
+</details>
+
+```html
+<details>
+  <summary>Click to expand!</summary>
+
+  1. A numbered
+  2. list
+     * With some
+     * Sub bullets
+</details>
+```

docs/01_Features/Multiple_Output_Formats.md

@@ -9,13 +9,16 @@ Daux.io is extendable and comes by default with three export formats:
 |                    Feature | HTML | Single Page HTML |         Confluence          |
 | -------------------------: | :--: | :--------------: | :-------------------------: |
 |                Index Pages |  √   |        √         |              √              |
-|             Internal Links |  √   |        X         |              √              |
-|              Landing Pages |  √   |        X         |              X              |
-|             Code Highlight |  √   |        X         |      √ (Using macros)       |
-| Math, Diagrams, Flowcharts |  √   |        X         |              X              |
-|                  Live Mode |  √   |        X         |              X              |
-|              Multilanguage |  √   |        X         |              X              |
+|             Internal Links |  √   |        √         |              √              |
+|              Landing Pages |  √   |       N/A        |              X              |
+|             Code Highlight |  √   |        √         |      √ (Using macros)       |
+| Math, Diagrams, Flowcharts |  √   |        X         |    √ (Using HTML macro)     |
+|                  Live Mode |  √   |       N/A        |             N/A             |
+|              Multilanguage |  √   |        X         |             N/A             |
 |             Pages Ordering |  √   |        √         |     X (Limited by API)      |
+|                Admonitions |  √   |        √         |              √              |
+|         Collapsible Blocks |  √   |        √         |              X              |
+|                  Dark Mode |  √   |        X         |              X              |
 |   Google / Piwik analytics |  √   |        √         | √ (Configured on Conflence) |
 
 ## Confluence Example

libs/Format/HTMLFile/Generator.php

@@ -24,7 +24,7 @@ public function __construct(Daux $daux)
 
         $this->daux = $daux;
         $this->templateRenderer = new Template($config);
-        $config->templateRenderer = $this->templateRenderer;
+        $config->setTemplateRenderer($this->templateRenderer);
     }
 
     /**

src/css/theme_daux/_typography.scss

@@ -251,6 +251,22 @@ h6 {
         color: inherit;
     }
 
+    details {
+        background: var(--details-bg-color);
+        border-radius: var(--details-border-radius);
+        padding: var(--details-padding);
+        margin-bottom: 1.3em;
+    }
+
+    summary {
+        display: list-item;
+        list-style: disclosure-closed inside;
+    }
+
+    details[open] > summary {
+        list-style-type: disclosure-open;
+    }
+
     // stylelint-disable-next-line selector-class-pattern
     .mermaid {
         background: #fff;

src/css/theme_daux/_variables.scss

@@ -137,6 +137,10 @@
     --admonition-danger-title-background: color-mod(
         var(--color-danger) lightness(85%)
     );
+
+    --details-bg-color: #efefef;
+    --details-border-radius: 0.5rem;
+    --details-padding: 0.6rem;
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
@@ -226,6 +230,8 @@
     --admonition-danger-title-background: color-mod(
         var(--color-danger) lightness(10%)
     );
+
+    --details-bg-color: #1a1a1a;
 }
 
 /*

src/css/theme_daux_singlepage/_typography.scss

@@ -218,4 +218,72 @@ h6 {
             border: none;
         }
     }
+
+    details {
+        background: var(--details-bg-color);
+        border-radius: var(--details-border-radius);
+        padding: var(--details-padding);
+        margin-bottom: 1.3em;
+    }
+
+    summary {
+        display: list-item;
+        list-style: disclosure-closed inside;
+    }
+
+    details[open] > summary {
+        list-style-type: disclosure-open;
+    }
+}
+
+.Admonition {
+    border: 1px solid var(--admonition-border-color);
+    background: var(--admonition-bg-color);
+    box-shadow: var(--admonition-box-shadow);
+    border-radius: var(--admonition-border-radius);
+    display: flow-root;
+    margin-bottom: 1.3em;
+    padding: 0.6rem;
+    page-break-inside: avoid;
+
+    *:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.Admonition__title {
+    background-color: var(--admonition-title-bg-color);
+    border-top-left-radius: var(--admonition-border-radius);
+    border-top-right-radius: var(--admonition-border-radius);
+    font-weight: bold;
+    margin: -0.6rem -0.6rem 0.4rem -0.6rem !important;
+    padding: 0.4rem 0.6rem;
+    position: relative;
+}
+
+.Admonition--info {
+    border-color: var(--admonition-info-border-color);
+    background: var(--admonition-info-background);
+
+    .Admonition__title {
+        background: var(--admonition-info-title-background);
+    }
+}
+
+.Admonition--warning {
+    border-color: var(--admonition-warning-border-color);
+    background: var(--admonition-warning-background);
+
+    .Admonition__title {
+        background: var(--admonition-warning-title-background);
+    }
+}
+
+.Admonition--danger {
+    border-color: var(--admonition-danger-border-color);
+    background: var(--admonition-danger-background);
+
+    .Admonition__title {
+        background: var(--admonition-danger-title-background);
+    }
 }

src/css/theme_daux_singlepage/_variables.scss

@@ -0,0 +1,46 @@
+:root {
+    --font-family-text: -apple-system, ".SFNSText-Regular", "San Francisco",
+        "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial,
+        sans-serif;
+    --font-family-monospace: Monaco, Menlo, Consolas, "Lucida Console",
+        "Courier New", monospace;
+    --font-family-heading: var(--font-family-text);
+
+    --color-info: #00b8d4;
+    --color-warning: #ff9100;
+    --color-danger: #f50057;
+
+    --admonition-border-radius: 4px;
+    --admonition-border-color: #9e9e9e;
+    --admonition-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
+    --admonition-bg-color: color-mod(
+        var(--admonition-border-color) lightness(98%)
+    );
+    --admonition-title-bg-color: #efefef;
+
+    --admonition-info-border-color: var(--color-info);
+    --admonition-info-background: color-mod(var(--color-info) lightness(95%));
+    --admonition-info-title-background: color-mod(
+        var(--color-info) lightness(85%)
+    );
+
+    --admonition-warning-border-color: var(--color-warning);
+    --admonition-warning-background: color-mod(
+        var(--color-warning) lightness(95%)
+    );
+    --admonition-warning-title-background: color-mod(
+        var(--color-warning) lightness(85%)
+    );
+
+    --admonition-danger-border-color: var(--color-danger);
+    --admonition-danger-background: color-mod(
+        var(--color-danger) lightness(95%)
+    );
+    --admonition-danger-title-background: color-mod(
+        var(--color-danger) lightness(85%)
+    );
+
+    --details-bg-color: #efefef;
+    --details-border-radius: 0.5rem;
+    --details-padding: 0.6rem;
+}

src/css/theme_daux_singlepage/main.scss

@@ -1,6 +1,6 @@
 // Core variables and mixins
 @import "vendor/highlight.scss";
-@import "_fonts.scss";
+@import "_variables.scss";
 @import "_typography.scss";
 
 * {

themes/daux_singlepage/config.json

@@ -0,0 +1,5 @@
+{
+    "css": [
+        "<theme_url>css/main.min.css"
+    ]
+}