Add TOC (#126)

athul · Jan 7, 2025 · e5d9b6b · e5d9b6b
1 parent 3e78ce4
commit e5d9b6b
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 44 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -161,13 +161,29 @@ h6::before { color: var(--maincolor); content: '###### '; }
   letter-spacing: -0.5px;
 }
 
+.post-container {
+  align-items: flex-start;
+  display: flex;
+  gap: 20px;
+}
+
+.post-content {
+  flex: 3;
+  min-width: 0;
+}
+
 .toc {
   background-color: #ececec;
+  border-radius: 5px;
   color: #232333;
+  flex: 0 0 auto;
+  height: auto;
+  margin-left: 20px;
+  max-width: 300px;
+  overflow-y: auto;
   padding: 10px;
-  padding-bottom: 0;
-  border-radius: 5px;
-  display: inline-block;
+  position: sticky;
+  top: 20px;
 }
 
 /* Footer */

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,48 +1,54 @@
 {{ define "main" }}
 <main>
-	<article>
-		<div class="title">
-			<h1 class="title">{{ .Title }}</h1>
-			<div class="meta">Posted on {{ dateFormat ":date_medium" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
-		</div>
-		{{ if isset .Params "tldr" }}
-		<div class="tldr">
-			<strong>tl;dr:</strong>
-			{{ .Params.tldr }}
-		</div>{{ end }}
+  <article>
+    <div class="post-container">
+      <!-- Main Content -->
+      <div class="post-content">
+        <div class="title">
+          <h1 class="title">{{ .Title }}</h1>
+          <div class="meta">Posted on {{ dateFormat ":date_medium" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
+        </div>
+        {{ if isset .Params "tldr" }}
+        <div class="tldr">
+          <strong>tl;dr:</strong>
+          {{ .Params.tldr }}
+        </div>{{ end }}
+        <section class="body">
+          {{ .Content }}
+        </section>
+        <div class="post-tags">
+          {{ if ne .Type "page" }}
+          {{ if gt .Params.tags 0 }}
+          <nav class="nav tags">
+            <ul class="tags">
+              {{ range .Params.tags }}
+              <li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li>
+              {{ end }}
+            </ul>
+          </nav>
+          {{ end }}
+          {{ end }}
+        </div>
+      </div>
 
-		{{ if isset .Params "toc" }}
-		<div class="toc">
-		<strong>Table of contents:</strong>
-		{{ .TableOfContents }}
-		</div>{{ end }}
+      <!-- TOC -->
+      {{ if isset .Params "toc" }}
+      <div class="toc">
+        <strong>Table of contents:</strong>
+        {{ .TableOfContents }}
+      </div>
+      {{ end }}
+    </div>
 
-		<section class="body">
-			{{ .Content }}
-		</section>
+    <!-- Disqus -->
+    {{- $.Scratch.Set "isDisqus" true -}}
+    {{ if not .Site.Config.Services.Disqus.Shortname }}
+    {{- $.Scratch.Set "isDisqus" false -}}
+    {{ end }}
 
-		<div class="post-tags">
-			{{ if ne .Type "page" }}
-			{{ if gt .Params.tags 0 }}
-			<nav class="nav tags">
-				<ul class="tags">
-					{{ range .Params.tags }}
-					<li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li>
-					{{ end }}
-				</ul>
-			</nav>
-			{{ end }}
-			{{ end }}
-		</div>
-		{{- $.Scratch.Set "isDisqus" true -}}
-		<!-- Check if disqus short name is given -->
-		{{ if not .Site.Config.Services.Disqus.Shortname }}
-		{{- $.Scratch.Set "isDisqus" false -}}
-		{{ end }}
-
-		{{- if eq ($.Scratch.Get "isDisqus") true -}}
-		{{- partial "disqus.html" . -}}
-		{{- end -}}
-	</article>
+    {{- if eq ($.Scratch.Get "isDisqus") true -}}
+    {{- partial "disqus.html" . -}}
+    {{- end -}}
+  </article>
 </main>
 {{ end }}