Skip to content

Commit

Permalink
Add scrolling table of contents for navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
victorliu5296 committed Oct 20, 2024
1 parent acb8d55 commit 84a52f0
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 0 deletions.
62 changes: 62 additions & 0 deletions source/assets/css/extended/sidetoc.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/* General layout container */
.page-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
}

/* Main content on the left */
.content-area {
flex: 1;
max-width: 800px;
padding: 0 20px;
}

/* ToC Sidebar */
.toc-sidebar {
position: fixed;
top: 100px;
right: 20px;
/* Positioned to the right */
width: calc(20%);
/* Dynamic width */
max-width: 400px;
/* Maximum width */
min-width: 200px;
/* Minimum width */
max-height: 80vh;
/* Scrollable height */
overflow-y: auto;
/* Allow scrolling if content exceeds height */
padding-left: 20px;
z-index: 1000;
}

/* Style for the <details> element */
.toc-sidebar details {
border-radius: 5px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Style for the summary element */
.toc-sidebar summary {
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
outline: none;
padding-bottom: 10px;
}

/* Media query for smaller screens */
@media (max-width: 1200px) {
.toc-sidebar {
display: none;
/* Hide the ToC on smaller screens */
}

.content-area {
max-width: 100%;
}
}
71 changes: 71 additions & 0 deletions source/layouts/_default/single.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
{{ define "main" }}
<div class="page-container">
<!-- Main Content -->
<div class="content-area">
<article class="post-single">
<header class="post-header">
{{ partial "breadcrumbs.html" . }}
<h1 class="post-title">
{{ .Title }}
{{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
</h1>
{{ if .Description }}
<div class="post-description">
{{ .Description }}
</div>
{{ end }}
{{ if not (.Param "hideMeta") }}
<div class="post-meta">
{{- partial "post_meta.html" . -}}
</div>
{{ end }}
</header>

{{- if .Params.cover.image }}
<figure class="entry-cover">
{{- partial "cover.html" . -}}
</figure>
{{- end }}

<div class="post-content">
<article>
{{- if not (.Param "disableAnchoredHeadings") }}
{{- partial "anchored_headings.html" .Content -}}
{{- else }}{{ .Content }}{{ end }}
</article>
</div>

<footer class="post-footer">
{{- if .Params.tags }}
<ul class="post-tags">
{{- range ($.GetTerms "tags") }}
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</ul>
{{- end }}

{{- if (.Param "ShowPostNavLinks") }}
{{- partial "post_nav_links.html" . }}
{{- end }}

{{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
{{- partial "share_icons.html" . -}}
{{- end }}
</footer>

{{- if (.Param "comments") }}
{{- partial "comments.html" . }}
{{- end }}
</article>
</div>

<aside class="toc-sidebar">
<details open>
<summary>Table of Contents</summary>
<div class="toc-content">
{{ .TableOfContents }}
</div>
</details>
</aside>
</div>
{{ end }}
6 changes: 6 additions & 0 deletions source/layouts/partials/toc.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{{ if and (gt .WordCount 400) (.Params.toc | default true) }}
<aside class="toc-sidebar">
<h2>Table of Contents</h2>
{{ .TableOfContents }}
</aside>
{{ end }}

0 comments on commit 84a52f0

Please sign in to comment.