Closed Sogl closed 1 year ago
That's how I did it. I use inherited Typhoon theme.
In partials/toc.html.twig
:
{% if config.get('plugins.page-toc.active') or attribute(page.header, 'page-toc').active %}
{% set table_of_contents = toc(page.content) %}
{% if table_of_contents is not empty %}
<div class="page-toc prose bg-gray-100 dark:bg-gray-800" x-data="{ open: true }"
:class="{'toc-closed': !open}">
<span class="toc-toggle" @click="open=!open">{{ svg_icon('tabler/chevron-up.svg', '')|raw }}</span>
<h5>{{ 'THEME_TYPHOON.BLOG.TOC'|t }}</h5>
{{ table_of_contents|raw }}
</div>
{% endif %}
{% endif %}
In css/site.css
:
.page-toc {
float: right;
width: 300px;
padding: 0.5rem 0.75rem;
margin-left: 1.5rem;
margin-right: 0;
margin-bottom: 1rem;
margin-top: 10px;
font-size: .8rem;
overflow: hidden;
}
.page-toc.toc-closed {
height: 40px;
margin-bottom: 0.5rem;
}
.page-toc.toc-closed .toc-toggle .icon-tabler-chevron-up {
transform: rotate(180deg);
}
.page-toc h5 {
margin: 0 0 1rem;
font-weight: 500;
font-size: 1rem;
}
.page-toc .toc-toggle {
font-size: 1.2rem;
display: block;
float: right;
margin-top: -8px;
margin-right: -10px;
padding: 5px 10px;
line-height: 1;
color: #667189;
cursor: pointer;
}
.page-toc ul {
margin-left: 1rem;
margin-bottom: 0;
padding-left: 0;
--tw-prose-bullets: #808CA1;
}
.page-toc li {
margin-top: 0;
list-style: decimal;
color: #808ba1;
}
@media (max-width: 600px) {
.page-toc {
float: none;
width: 100%;
margin-top: 0.5rem;
margin-left: 0;
margin-bottom: 0;
}
}
in templates/post.html.twig
:
...
{% block items %}
{% include 'partials/toc.html.twig' %}
<article class="magic-content {{ prose_style }} max-w-none my-6">
...
White color scheme:
Dark color scheme:
Looks good!
Will this be integrated in the next theme version?
How? What styles and templates I need to add?
Like in Grav Learn: