Manage table of contents differently

global.json

@@ -30,7 +30,8 @@
             "Link_next": "Next",
             "Edit_on": "Edit on :name:",
             "View_on_github": "View On GitHub",
-            "View_documentation": "View Documentation"
+            "View_documentation": "View Documentation",
+            "Table_of_contents": "Table of Contents"
         },
         "fr": {
             "CodeBlocks_title": "Afficher le code",
@@ -43,7 +44,8 @@
             "Link_next": "Suivant",
             "Edit_on": "Editer sur :name:",
             "View_on_github": "Voir sur GitHub",
-            "View_documentation": "Voir la Documentation"
+            "View_documentation": "Voir la Documentation",
+            "Table_of_contents": "Table des matières"
         },
         "de": {
             "CodeBlocks_title": "Code-Blöcke",
@@ -56,7 +58,8 @@
             "Link_next": "Weiter",
             "Edit_on": "Bearbeiten bei :name:",
             "View_on_github": "Bei GitHub anzeigen",
-            "View_documentation": "Dokumentation anzeigen"
+            "View_documentation": "Dokumentation anzeigen",
+            "Table_of_contents": "Inhaltsverzeichnis"
         }
     },
 

libs/Format/HTML/ContentPage.php

@@ -104,8 +104,6 @@ class ContentPage extends \Todaymade\Daux\Format\Base\ContentPage
 
         $context = ['page' => $page, 'params' => $params];
 
-        $template = new Template($params);
-
-        return $template->render($this->isLanding() ? 'theme::home' : 'theme::content', $context);
+        return $this->templateRenderer->render($this->isLanding() ? 'theme::home' : 'theme::content', $context);
     }
 }

libs/Format/HTML/ContentTypes/Markdown/CommonMarkConverter.php

@@ -10,6 +10,6 @@ class CommonMarkConverter extends \Todaymade\Daux\ContentTypes\Markdown\CommonMa
         parent::extendEnvironment($environment, $config);
 
         $environment->addDocumentProcessor(new TOC\Processor($config));
-        $environment->addBlockRenderer('Todaymade\Daux\ContentTypes\Markdown\TableOfContents', new TOC\Renderer());
+        $environment->addBlockRenderer('Todaymade\Daux\ContentTypes\Markdown\TableOfContents', new TOC\Renderer($config));
     }
 }

libs/Format/HTML/ContentTypes/Markdown/TOC/Renderer.php

@@ -3,11 +3,18 @@
 use League\CommonMark\Block\Element\AbstractBlock;
 use League\CommonMark\Block\Renderer\BlockRendererInterface;
 use League\CommonMark\ElementRendererInterface;
+use Todaymade\Daux\Config;
 
 class Renderer implements BlockRendererInterface
 {
+    public function __construct(Config $config)
+    {
+        $this->config = $config;
+    }
+
     public function render(AbstractBlock $block, ElementRendererInterface $htmlRenderer, $inTightList = false)
     {
-        return $htmlRenderer->renderBlocks($block->children());
+        $content = $htmlRenderer->renderBlocks($block->children());
+        return $this->config->templateRenderer->getEngine($this->config)->render('partials/table_of_contents', ['content' => $content]);
     }
 }

libs/Format/HTML/Generator.php

@@ -28,7 +28,11 @@ class Generator implements \Todaymade\Daux\Format\Base\Generator, LiveGenerator
      */
     public function __construct(Daux $daux)
     {
+        $params = $daux->getParams();
+
         $this->daux = $daux;
+        $this->templateRenderer = new Template($params);
+        $params->templateRenderer = $this->templateRenderer;
     }
 
     /**
@@ -234,6 +238,9 @@ class Generator implements \Todaymade\Daux\Format\Base\Generator, LiveGenerator
 
         $params['request'] = $node->getUrl();
 
-        return ContentPage::fromFile($node, $params, $this->daux->getContentTypeHandler()->getType($node));
+        $contentPage = ContentPage::fromFile($node, $params, $this->daux->getContentTypeHandler()->getType($node));
+        $contentPage->templateRenderer = $this->templateRenderer;
+
+        return $contentPage;
     }
 }

libs/Format/HTML/Template.php

@@ -1,6 +1,7 @@
 <?php namespace Todaymade\Daux\Format\HTML;
 
 use League\Plates\Engine;
+use Todaymade\Daux\Config;
 use Todaymade\Daux\Daux;
 use Todaymade\Daux\Tree\Content;
 use Todaymade\Daux\Tree\Directory;
@@ -15,9 +16,17 @@ class Template
      * @param string $base
      * @param string $theme
      */
-    public function __construct($params)
+    public function __construct(Config $params)
     {
         $this->params = $params;
+    }
+
+    public function getEngine(Config $params)
+    {
+        if ($this->engine) {
+            return $this->engine;
+        }
+
         $base = $params['templates'];
         $theme = $params['theme']['templates'];
 
@@ -34,7 +43,9 @@ class Template
         }
         $this->engine->addFolder('theme', $theme, true);
 
-        $this->registerFunctions();
+        $this->registerFunctions($this->engine);
+
+        return $this->engine;
     }
 
     /**
@@ -44,7 +55,9 @@ class Template
      */
     public function render($name, array $data = [])
     {
-        $this->engine->addData([
+        $engine = $this->getEngine($data['params']);
+
+        $engine->addData([
             'base_url' => $data['params']['base_url'],
             'base_page' => $data['params']['base_page'],
             'page' => $data['page'],
@@ -52,18 +65,18 @@ class Template
             'tree' => $data['params']['tree'],
         ]);
 
-        return $this->engine->render($name, $data);
+        return $engine->render($name, $data);
     }
 
-    protected function registerFunctions()
+    protected function registerFunctions($engine)
     {
-        $this->engine->registerFunction('get_navigation', function ($tree, $path, $current_url, $base_page, $mode) {
+        $engine->registerFunction('get_navigation', function ($tree, $path, $current_url, $base_page, $mode) {
             $nav = $this->buildNavigation($tree, $path, $current_url, $base_page, $mode);
 
             return $this->renderNavigation($nav);
         });
 
-        $this->engine->registerFunction('translate', function ($key) {
+        $engine->registerFunction('translate', function ($key) {
             $language = $this->params['language'];
 
             if (array_key_exists($key, $this->params['strings'][$language])) {
@@ -77,7 +90,7 @@ class Template
             return "Unknown key $key";
         });
 
-        $this->engine->registerFunction('get_breadcrumb_title', function ($page, $base_page) {
+        $engine->registerFunction('get_breadcrumb_title', function ($page, $base_page) {
             $title = '';
             $breadcrumb_trail = $page['breadcrumb_trail'];
             $separator = $this->getSeparator($page['breadcrumb_separator']);

templates/layout/05_page.php

@@ -65,7 +65,7 @@
             </div>
         </div>
     </aside>
-    <div class="Columns__right <?= $params['html']['float'] ? 'Columns__right--float' : ''; ?>">
+    <div class="Columns__right <?= $params['html']['float'] ? 'Columns__right--float' : 'Columns__right--full'; ?>">
         <div class="Columns__right__content">
             <div class="doc_content">
                 <?= $this->section('content'); ?>

templates/partials/table_of_contents.php

@@ -0,0 +1,6 @@
+<div class="TableOfContentsContainer">
+    <h4 class="TableOfContentsContainer__title"><?=$this->translate("Table_of_contents") ?></h4>
+    <div class="TableOfContentsContainer__content">
+        <?php echo $content; ?>
+    </div>
+</div>

themes/daux/js/daux.js

@@ -26,12 +26,14 @@ $(function () {
             case 2: // Show code blocks inline
                 toggleCodeBlockBtnFloat.addClass("Button--active");
                 codeBlockView.addClass('Columns__right--float');
+                codeBlockView.removeClass('Columns__right--full');
                 codeBlocks.removeClass('hidden');
                 break;
             case 1: // Show code blocks below
                 toggleCodeBlockBtnBelow.addClass("Button--active");
                 toggleCodeBlockBtn.prop('checked', true);
                 codeBlockView.removeClass('Columns__right--float');
+                codeBlockView.addClass('Columns__right--full');
                 codeBlocks.removeClass('hidden');
                 break;
             case 0: // Hidden code blocks
@@ -39,6 +41,7 @@ $(function () {
                 toggleCodeBlockBtnHide.addClass("Button--active");
                 toggleCodeBlockBtn.prop('checked', false);
                 codeBlockView.removeClass('Columns__right--float');
+                codeBlockView.addClass('Columns__right--full');
                 codeBlocks.addClass('hidden');
                 break;
         }

themes/daux/less/_components.less

@@ -322,9 +322,21 @@ Components
     }
 }
 
-.TableOfContents {
+.TableOfContentsContainer {
+    &__title {
+        border-bottom: 4px solid #efefef;
+        margin-bottom: 0 !important;
+    }
+
+    &__content > .TableOfContents {
+        margin-top: 0;
+    }
+}
+
+ul.TableOfContents {
+    float: none;
     font-size: 16px;
-    padding-left: 0;
+    padding-left: 1.5em;
     border-left: 6px solid #efefef;
 
     p {
@@ -340,6 +352,42 @@ Components
     }
 }
 
+.Columns__right--full .TableOfContentsContainer {
+    float: right;
+    min-width: 300px;
+    max-width: 25%;
+
+    .TableOfContentsContainer__content > .TableOfContents {
+        border-right: 2px solid #efefef;
+    }
+
+    .TableOfContents {
+        list-style-type: none;
+        padding-left: 0;
+    }
+
+    a {
+        display: block;
+        border-bottom: 1px solid #ddd;
+    }
+
+    li a {
+        padding-left: 0.75em;
+    }
+
+    li li a {
+        padding-left: 1.5em;
+    }
+
+    li li li a {
+        padding-left: 2.25em;
+    }
+
+    li li li li a {
+        padding-left: 3em;
+    }
+}
+
 .Pager {
     padding-left: 0;
     margin: 1em 0;