DoIt icon indicating copy to clipboard operation
DoIt copied to clipboard

Asciidoc documents doesn't generate TOC

Open Thanatermesis opened this issue 2 years ago • 4 comments

This theme is almost perfect, featured, and good looking, unfortunately, there's only the TOC that doesn't with asciidoc posts, the TOC looks simply empty, seems like to be the same issue as in the deprecated loveit bug report: https://github.com/dillonzq/LoveIt/issues/566 (you can see examples and more details about the TOC issue here)

Note: to enable hugo to render asciidoc posts too you must install "ascidoctor" and add this to the config.toml file:

[security.exec]
allow = ["^dart-sass-embedded$", "^go$", "^npx$", "^postcss$", "^asciidoctor$"]
osEnv = ["(?i)^(PATH|PATHEXT|APPDATA|TMP|TEMP|TERM|RUBYLIB)$"]

Thanatermesis avatar May 12 '22 03:05 Thanatermesis

The reason TOC does not work is because it relies on the .headerLink class to select all header elements.

https://github.com/HEIGE-PCloud/DoIt/blob/f065e2076c5a85980efe825d1ff35d037c7cfc2a/layouts/_default/_markup/render-heading.html#L17

Ultimately, you want to generate some HTML like this.

<h2 id="_first_section" class="headerLink">First Section</h2>

I am not sure how you can do this with asciidoc...

HEIGE-PCloud avatar May 12 '22 08:05 HEIGE-PCloud

For the code block, it is the same story, asciidoctor does not generate syntax highlightning by default.

<pre class="highlight">
<code class="language-java" data-lang="java">
@Bean
public MutableAclService mutableAclService() {
  JdbcMutableAclService jdbcMutableAclService = new JdbcMutableAclService(datasource, lookupStrategy(), aclCache());
  jdbcMutableAclService.setAclClassIdSupported(true); <b class="conum">(1)</b>
  jdbcMutableAclService.setClassIdentityQuery("SELECT @@IDENTITY"); <b class="conum">(2)</b>
  jdbcMutableAclService.setSidIdentityQuery("SELECT @@IDENTITY"); <b class="conum">(3)</b>
  return jdbcMutableAclService;
}
</code>
</pre>

It has to tokenize and generate syntax highlighting somehow for the CSS style to apply.

Ultimately, you want to generate some HTML like this.

<code class="language-java" data-lang="java"><span class="line"><span class="cl"><span class="nd">@Bean</span>
</span></span><span class="line"><span class="cl"><span class="kd">public</span> <span class="n">MutableAclService</span> <span class="nf">mutableAclService</span><span class="o">()</span> <span class="o">{</span>
</span></span><span class="line"><span class="cl">  <span class="n">JdbcMutableAclService</span> <span class="n">jdbcMutableAclService</span> <span class="o">=</span> <span class="k">new</span> <span class="n">JdbcMutableAclService</span><span class="o">(</span><span class="n">datasource</span><span class="o">,</span> <span class="n">lookupStrategy</span><span class="o">(),</span> <span class="n">aclCache</span><span class="o">());</span>
</span></span><span class="line"><span class="cl">  <span class="n">jdbcMutableAclService</span><span class="o">.</span><span class="na">setAclClassIdSupported</span><span class="o">(</span><span class="kc">true</span><span class="o">);</span> <span class="o">&lt;</span><span class="n">1</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="n">jdbcMutableAclService</span><span class="o">.</span><span class="na">setClassIdentityQuery</span><span class="o">(</span><span class="s">"SELECT @@IDENTITY"</span><span class="o">);</span> <span class="o">&lt;</span><span class="n">2</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="n">jdbcMutableAclService</span><span class="o">.</span><span class="na">setSidIdentityQuery</span><span class="o">(</span><span class="s">"SELECT @@IDENTITY"</span><span class="o">);</span> <span class="o">&lt;</span><span class="n">3</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="k">return</span> <span class="n">jdbcMutableAclService</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="o">}</span>
</span></span></code>

HEIGE-PCloud avatar May 12 '22 09:05 HEIGE-PCloud

After doing some tests and reading some things on google I found how the TOC Asciidoc can be generated, it basically needs these entries:

---
title: "Introduction test"
(etc)...

toc:
  auto: false     <-- important, needs to be false
---

:toc:
// Set toclevels to be at least your hugo [markup.tableOfContents.endLevel] config key
:toclevels: 3

== Introduction
Foo bar wombat
=== Subsection
Foo bar
== Next chapter
Hello world

About the syntax highlighting, I'm reading this howto which seems like to make it working is needed that the theme supports highlight.js , which syntax theme DoIt uses?

Thanatermesis avatar May 12 '22 17:05 Thanatermesis

For the toc, yes you do need to first enable it in this way. But this does not solve all the problems, the generated toc will not be responsive to scrolling as reported here #566. The reason is because the CSS and JavaScript code uses a class selector .headerLink to grab the headings and render them correctly, but the headings generated by asciidoc does not contain this class. I wonder whether there is an easy way in asciidoc to customize this behavior. But it is always possible for me to tweak around the JavaScript and CSS code to make them directly select headings, and hopefully without bringing in any side effects.

For syntax highlighting, there are two ways of implementation, client-side rendering and server-side rendering, you can read about a more detailed explanation here. But essentially, Hugo has a very good code highlighter built-in, so the syntax highlighting for DoIt is done on server side (when you run hugo). I wonder if it is possible to achieve similar things for asciidoc. Again, it is always possible to introduce something like highlight.js to do the syntax highlighting on the client side, but it is less ideal as it adds extra loading and rendering time for the user.

HEIGE-PCloud avatar May 12 '22 17:05 HEIGE-PCloud