I'd like to render asciidoc pages with JBake that have the floating TOC in the left frame. However, JBake seems to only support putting the TOC at the top of the file.
If I 'bake' my site with pages that have the following document header syntax, the toc is on top.
= Software Engineer
John Doe
2019-01-01
:toc: left
:jbake-type: page
:jbake-tags: documentation, manual
:jbake-status: published
...
However, if I convert the same file using the asciidoctor cli, the toc renders on the left as expected. Is this a limitation of JBake, or am I doing something wrong?
:toc: left is not a valid option for embedded asciidoc. See [1] for details.
However, there is still hope, because you can change your stylesheet.
First, change your templates in order to add the classes "toc2 toc-left" to the body tag. This makes room for the toc on the left side.
Then copy the toc2-styles from the original aciidoctor stylesheet to the toc-style by copy & psting this into the header:
<style>
@media only screen and (min-width:768px){
#toctitle{font-size:1.375em}
#toc.toc{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto; padding-top: 60px;}
#toc.toc #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc>ul{font-size:.9em;margin-bottom:0}
#toc.toc ul ul{margin-left:0;padding-left:1em}
#toc.toc ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
}
@media only screen and (min-width:1280px){
body.toc2{padding-left:20em;padding-right:0}
#toc.toc{width:20em; padding-top: 60px;}
#toc.toc #toctitle{font-size:1.375em}
#toc.toc>ul{font-size:.95em}
#toc.toc ul ul{padding-left:1.25em}
}
</style>
this should solve your problem.
[1] https://asciidoctor.org/docs/user-manual/#using-a-toc-with-embeddable-html