toc with heading

assets/js/theme/design-system/toc.js

@@ -14,7 +14,7 @@ class TableOfContents {
     this.content = this.element.querySelector('.toc-content');
     this.nav = this.element.querySelector('.toc');
     this.links = this.element.querySelectorAll('a');
-    this.sections = document.querySelectorAll('section[id]');
+    this.sections = document.querySelectorAll('.heading[id]');
     // TODO : handle sublinks update in toc 
     this.ctaTitle = document.querySelector('.toc-cta-title span');
     this.togglers = document.querySelectorAll('.toc-cta button, .toc-container button');

layouts/partials/blocks/toc.html

 {{ range . -}}
   {{- if eq .kind "heading" }}
     <li>
-      <a href="#block-{{ .position }}">{{ partial "PrepareHTML" .title }}</a>
+      <a href="#{{ urlize .title }}">{{ partial "PrepareHTML" .title }}</a>
     </li>
   {{ end -}}
 {{- end -}}

layouts/partials/content/list.html → layouts/partials/contents/list.html

@@ -9,7 +9,7 @@
           "context" $context
       )}}
     {{- else if (eq .kind "heading") -}}
-      <div class="heading container">
+      <div class="heading container" id="{{ urlize .title }}">
         <h2>{{ partial "PrepareHTML" .title }}</h2>
       </div>
     {{- end -}}

layouts/partials/posts/sidebar.html

@@ -3,7 +3,7 @@
     <aside>
       {{- partial "posts/post-infos.html" . -}}
     </aside>
-    
+
     {{ partial "toc/container.html"
       (dict
           "toc" "toc/default.html"

layouts/partials/posts/toc.html

-{{ $h2s := partial "H2Extract" .Content }}
-{{- if or .Params.contents $h2s }}
-<nav class="toc" id="nav-toc" aria-label="{{ i18n "commons.toc" }}">
-  <ol>
-    {{- if and (not $h2s) (partial "GetTextFromHTML" .Content) }}
-      <li>
-        <a href="#page-informations">{{ i18n "pages.informations" }}</a>
-      </li>
-    {{ end -}}
-    {{- range $index, $h2 := $h2s }}
-      <li>
-        <a href="#page-h2-{{$index}}">{{ plainify $h2 }}</a>
-      </li>
-    {{- end -}}
-    {{- partial "blocks/toc.html" .Params.contents -}}
-  </ol>
-</nav>
-{{ end -}}