Manage table of contents differently
This commit is contained in:
parent
e844b51f10
commit
91014cef8b
|
@ -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"
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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']);
|
||||
|
|
|
@ -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'); ?>
|
||||
|
|
|
@ -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>
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue