ADD table of contents

assets/scss/index.scss

@@ -241,6 +241,75 @@ a {
 
 /* Sections */
 
+.table-of-contents {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+
+  .extend {
+    margin: auto;
+    padding-block: 1rem;
+    padding-inline: 0.4rem;
+    border-radius: 0rem 0.5rem 0.5rem 0rem;
+    background-color: black;
+    cursor: pointer;
+  }
+}
+
+#TableOfContents {
+  display: none;
+  margin: auto;
+  padding-inline: 20px;
+  border-radius: 0rem 0.5rem 0.5rem 0rem;
+  background-color: black;
+  font-size: larger;
+
+  ul {
+    counter-reset:toc1; 
+    list-style-type:none;
+    padding-inline-start: 0rem;
+    padding-block: 0.5rem;
+  }
+
+  li {
+    list-style-type:none;
+
+    ul {
+      counter-reset:toc2;
+
+      li {
+        list-style-type:none;
+
+        ul {
+          counter-reset:toc3;
+
+          li:before {
+            counter-increment:toc3;
+            content:counter(toc1) "." counter(toc2) "." counter(toc3) " ";
+          }
+        }
+      }
+
+      li:before {
+        counter-increment:toc2;
+        content:counter(toc1) "." counter(toc2) " ";
+      }
+    }
+  }
+
+  li:before {
+    counter-increment:toc1;
+    content:counter(toc1) ". ";
+  }
+}
+
+#TableOfContents.show {
+  display: block;
+}
+
 #content {
   flex-grow: 1;
   display: flex;
@@ -248,7 +317,8 @@ a {
 }
 
 .title h1 {
-  font-size: xx-large;
+  font-size: xxx-large;
+  padding-block-end: 3rem;
 }
 
 .content {

layouts/_default/single.html

@@ -14,6 +14,12 @@
             </div>
         {{ end }}
         <!-- <h6>{{ .Date.Format "Mon, Jan 2, 2006" }}</h6> -->
+        {{ if gt (.TableOfContents | findRE `<li>` | len) 4}}
+            <div class="table-of-contents">
+                {{ .TableOfContents }}
+                <div class="extend" onclick="toggleTableOfContent(event)"><i class="icon-angle-right"></i></div>
+            </div>
+        {{ end }}
         {{ .Content }}
     </div>
 {{ end }}

layouts/partials/head.html

@@ -5,28 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="color-scheme" content="dark light">
+  {{ template "_internal/opengraph.html" . }}
   <title>{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}</title>
-  {{ block "opengraph" . }}
-    <meta property="og:type" content="website" />
-    {{ with .Site.LanguageCode }}
-      <meta property="og:locale" content='{{ replace . "-" "_" }}' />
-    {{ end }}
-    <meta property="og:title" content="{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}" />
-    <meta property="og:url" content="{{ .Permalink }}" />
-    <meta property="og:site_name" content="{{ .Site.Title }}" />
-    {{ if .Params.image }}
-      <meta property="og:image" content="{{ .Params.image | absURL }}" />
-    {{ else }}
-      <meta property="og:image" content="{{ .Site.Params.logo | absURL }}" />
-    {{ end }}
-    {{ if .Params.summary }}
-      <meta property="og:description" content="{{ .Params.summary }}" />
-    {{ else if .Content }}
-      <meta property="og:description" content="{{ .Content | safeHTML | truncate 100 }}" />
-    {{ else }}
-      <meta property="og:description" content="{{ .Site.Params.Description }}" />
-    {{ end }}
-  {{ end }}
   {{ with .Site.Params.favIcon }}
     {{ if .ico }}
       <link rel="icon" type="image/x-icon" href="{{ .ico }}">
@@ -47,6 +27,7 @@
     <link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
   {{ end }}
   <link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
+  <script src="/js/index.js"></script>
   <script src="/js/theme.js"></script>
   <script src="/js/scroll.js"></script>
 </head>

static/js/index.js

@@ -0,0 +1,7 @@
+function toggleTableOfContent(e) {
+  const toc = document.getElementById('TableOfContents');
+  toc.classList.toggle("show");
+  const extend = toc.parentElement.getElementsByClassName("extend")[0];
+  extend.children[0].classList.toggle("icon-angle-right");
+  extend.children[0].classList.toggle("icon-angle-left");
+}