tags: leverage space in taxonomy layout #530

exampleSite/content/basics/installation/_index.en.md

@@ -1,4 +1,5 @@
 +++
+tags = ["documentation"]
 title = "Installation"
 weight = 15
 +++

exampleSite/content/basics/installation/_index.pir.md

@@ -1,4 +1,5 @@
 +++
+tags = ["documentat'n"]
 title = "Installat'n"
 weight = 15
 +++

exampleSite/content/cont/markdown.en.md

@@ -1,4 +1,5 @@
 +++
+tags = ["content"]
 title = "Markdown syntax"
 weight = 3
 +++

exampleSite/content/cont/markdown.pir.md

@@ -1,4 +1,5 @@
 +++
+tags = ["content"]
 title = "Marrrkdown rules"
 weight = 3
 +++

exampleSite/layouts/partials/toc.html

@@ -1,8 +1,23 @@
           <div class="default-animation progress">
             <div class="toc-wrapper">
-{{- partial "shortcodes/piratify.html" (dict
+{{- if eq .Kind "taxonomy" }}
-  "context" .
+<nav id="TableOfContents">
-  "pagefield" "TableOfContents"
+  <ul>
-) }}
+  {{- $lastCapital := "" }}
+  {{- range .Data.Terms.Alphabetical }}
+    {{- $capital := substr .Page.Title 0 1 | upper }}
+    {{- if ne $lastCapital $capital }}
+    <li><a href="#{{ $capital | anchorize }}">{{ $capital }}</a></li>
+    {{- end }}
+    {{- $lastCapital = $capital }}
+  {{- end }}
+  </ul>
+</nav>
+{{- else }}
+  {{- partial "shortcodes/piratify.html" (dict
+    "context" .
+    "pagefield" "TableOfContents"
+  ) }}
+{{- end }}
             </div>
           </div>

layouts/_default/taxonomy.html

@@ -8,8 +8,19 @@
   {{- $title = .Data.Plural | humanize }}
 {{- end }}
 <h1 id="{{ $title | anchorize }}">{{ $title }}</h1>
-<ul>
+<div class="tax-container">
-  {{- range .Data.Terms.Alphabetical }}
+{{- $lastCapital := "" }}
+{{- range .Data.Terms.Alphabetical }}
+  {{- $capital := substr .Page.Title 0 1 | upper }}
+  {{- if ne $lastCapital $capital }}
+    {{- if ne $lastCapital "" }}
+    </ul>
+  </div>
+    {{- end }}
+  <div class="tax-box">
+    <h2 id="{{ $capital | anchorize }}">{{ $capital }}</h2>
+    <ul>
+  {{- end }}
     {{- $c:=""}}{{/* display terms of a taxonomy */}}
     {{- $len := 0 }}
     {{- range .Pages }}
@@ -19,10 +30,15 @@
       {{- end }}
     {{- end }}
     {{- if $len }}
-  <li><a href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .Page) }}">{{ .Page.Title }}</a> ({{ $len }})</li>
+      <li><a href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .Page) }}">{{ .Page.Title }}</a> ({{ $len }})</li>
     {{- end }}
-  {{- end }}
+  {{- $lastCapital = $capital }}
-</ul>
+{{- end }}
+{{- if ne $lastCapital "" }}
+    </ul>
+  </div>
+{{- end }}
+</div>
 
             <footer class="footline">
             </footer>

static/css/theme.css

@@ -1759,3 +1759,12 @@ article ul > li > input[type="checkbox"]:checked::before {
 html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     transform: scaleX(-1);
 }
+
+.tax-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tax-box {
+    width: 18rem;
+}

static/js/theme.js

@@ -428,7 +428,7 @@ function initOpenapi( update, attrs ){
 }
 
 function initAnchorClipboard(){
-    document.querySelectorAll( 'h1~h2,h1~h3,h1~h4,h1~h5,h1~h6').forEach( function( element ){
+    document.querySelectorAll( 'h1~h2,h1~h3,h1~h4,h1~h5,h1~h6,.tax-container h2,.tax-container h3,.tax-container h4,.tax-container h5,.tax-container h6').forEach( function( element ){
         var url = encodeURI( (document.location.origin == "null" ? (document.location.protocol + "//" + document.location.host) : document.location.origin )+ document.location.pathname);
         var link = url + "#" + element.id;
         var new_element = document.createElement( 'span' );