Fix use max height instead of height

config/_default/hugo.toml

@@ -40,6 +40,12 @@ page = ["HTML", "RSS"]
 [pagination]
 pagerSize = 12
 
+[markup]
+[markup.tableOfContents]
+endLevel = 4
+ordered = true
+startLevel = 2
+
 [params]
 dateform = "Jan 2, 2006"
 dateformShort = "Jan 2"

themes/maik-blog/assets/js/main.js

@@ -1,3 +1,14 @@
+const throttle = (func, timeFrame) => {
+    let lastTime = 0;
+    return () => {
+        let now = new Date();
+        if (now - lastTime >= timeFrame) {
+            func();
+            lastTime = now;
+        }
+    };
+};
+
 window.addEventListener("load", () => {
     // Enlarged floating figures
     for (let figure of document.getElementsByTagName("figure")) {
@@ -51,6 +62,50 @@ window.addEventListener("load", () => {
         }
     }
 
+    // set active toc heading
+    const toc = document.getElementById("toc");
+    const tocNav = toc.getElementsByTagName("nav")[0];
+    const headingsForToc = [
+        ...document.getElementsByTagName("article"),
+    ].flatMap((article) =>
+        [...article.querySelectorAll("h1, h2, h3, h4")]
+            .filter((heading) => heading.offsetParent.tagName === "MAIN")
+            .reverse()
+    );
+    const onTocScroll = () => {
+        for (const heading of headingsForToc) {
+            if (window.scrollY + window.innerHeight / 3 > heading.offsetTop) {
+                const headingAnchor = heading.getElementsByTagName("a")[0];
+
+                for (const tocAnchor of toc.getElementsByTagName("a")) {
+                    tocAnchor.classList.remove("current-toc");
+
+                    if (tocAnchor.href !== headingAnchor.href) continue;
+
+                    tocAnchor.classList.add("current-toc");
+
+                    // Scroll toc element into view
+                    const tocNavRect = tocNav.getBoundingClientRect();
+                    const tocAnchorRect = tocAnchor.getBoundingClientRect();
+
+                    const offset =
+                        tocAnchorRect.top -
+                        tocNavRect.top -
+                        tocNav.clientHeight / 2;
+
+                    const direction = offset / Math.abs(offset);
+                    const limit = (tocNav.clientHeight / 2) * 0.5;
+
+                    if (Math.abs(offset) > limit)
+                        tocNav.scrollTop += offset - direction * limit;
+                }
+                return;
+            }
+        }
+    };
+    window.addEventListener("scroll", throttle(onTocScroll, 50));
+    onTocScroll();
+
     // Code copy button
     for (let codeblock of document.querySelectorAll(".highlight pre")) {
         if (codeblock.querySelector(".lnt")) continue; // skip line numbers
@@ -70,6 +125,5 @@ window.addEventListener("load", () => {
 
             button.classList.add("current-code");
         });
-        console.log(codeblock);
     }
 });

themes/maik-blog/assets/scss/_main.scss

@@ -545,13 +545,21 @@ table {
         position: relative;
         text-decoration: none;
 
-        --link-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
-        --check-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+        @mixin link-image($color) {
+            $color: "rgb(" + red($color) + "," + green($color) + "," +
+                blue($color) + ")";
 
-        --background-image: var(--link-image);
+            --background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#{$color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
+        }
+
+        @include link-image($light-color);
+
+        .dark-theme & {
+            @include link-image($dark-color);
+        }
 
         &.current-heading {
-            --background-image: var(--check-image);
+            --background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(0, 128, 0)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
         }
 
         &:hover {
@@ -707,3 +715,130 @@ table {
         }
     }
 }
+
+#toc {
+    &.desktop-only {
+        display: none;
+    }
+
+    .toc-title {
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        font-size: 1.625rem;
+        line-height: 1.3;
+        margin: 0.83em 0;
+    }
+
+    ul,
+    ol {
+        li::marker {
+            content: "- ";
+        }
+    }
+
+    @media (min-width: 1840px) {
+        display: block !important;
+        position: absolute;
+        top: 100vh;
+        height: calc(100% - 100vh - 380px);
+
+        .toc-content {
+            position: sticky;
+            top: 10vh;
+            max-height: 70vh;
+            margin-left: calc(-300px - 100px);
+            display: flex !important;
+            flex-direction: column;
+            width: 300px;
+
+            ::-webkit-scrollbar {
+                width: 6px;
+                height: 6px;
+                background: darken($light-background, 10%);
+                border-radius: 8px;
+            }
+
+            ::-webkit-scrollbar-thumb {
+                background: darken($light-background, 25%);
+                border-radius: 8px;
+
+                &:hover {
+                    background: darken($light-background, 40%);
+                }
+            }
+
+            .dark-theme & {
+                ::-webkit-scrollbar {
+                    background: lighten($dark-background, 10%);
+                }
+
+                ::-webkit-scrollbar-thumb {
+                    background: lighten($dark-background, 25%);
+
+                    &:hover {
+                        background: lighten($dark-background, 40%);
+                    }
+                }
+            }
+
+            .toc-title {
+                font-size: 1.375rem;
+                min-height: calc(1.625rem * 1.3);
+                margin: 0;
+            }
+
+            nav {
+                overflow-y: auto;
+                margin-top: 1em;
+            }
+
+            a {
+                display: block;
+                text-decoration: none;
+                padding: 5px;
+                border-radius: 8px;
+
+                &:hover {
+                    background: darken($light-background, 10%);
+
+                    .dark-theme & {
+                        background: lighten($dark-background, 10%);
+                    }
+                }
+
+                &.current-toc {
+                    background: darken($light-background, 10%);
+
+                    .dark-theme & {
+                        background: lighten($dark-background, 10%);
+                    }
+                }
+
+                &::before {
+                    content: "- ";
+                }
+            }
+
+            ul,
+            ol {
+                margin: 0;
+                padding: 0;
+
+                li::marker {
+                    content: "";
+                }
+
+                li a {
+                    padding-left: 20px;
+                }
+                li li a {
+                    padding-left: 40px;
+                }
+                li li li a {
+                    padding-left: 60px;
+                }
+            }
+        }
+    }
+}

themes/maik-blog/assets/scss/_post.scss

@@ -1,222 +1,223 @@
 .post {
-  width: 100%;
-  max-width: 1000px;
-  text-align: left;
-  padding: 20px;
-  margin: 20px auto;
-
-  @media #{$media-size-tablet} {
-    max-width: 600px;
-  }
-  @media #{$media-size-medium} {
-    max-width: 800px;
-  }
-
-  &-date {
-    &:after {
-      content: "—";
-    }
-  }
-
-  &-title {
-    font-size: 2.625rem;
-    margin: 0 0 20px;
-
-    @media #{$media-size-phone} {
-      font-size: 2rem;
-    }
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  &-subtitle {
-    font-size: 1.9rem;
-    margin: -15px 0 20px;
-
-    @media #{$media-size-phone} {
-      font-size: 1.6rem;
-    }
-  }
-
-  &-breadcrumbs {
-    font-size: 1.15rem;
-    margin: 10px 0 5px;
-
-    @media #{$media-size-phone} {
-      font-size: 0.9rem;
-    }
-  }
-
-  &-description {
-    font-size: 1.15rem;
-    @media #{$media-size-phone} {
-      font-size: 1.075rem;
-    }
-  }
-
-  &-tags {
-    display: block;
-    margin-bottom: 20px;
-    font-size: 1rem;
-    opacity: 0.5;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  &-content {
-    margin-top: 30px;
-  }
-
-  &-cover {
-    border-radius: 8px;
-    margin: 30px -5.20%;
-    width: 110%;
-    max-width: 110%;
-    text-decoration: none;
-
-    @media #{$media-size-medium} {
-      max-width: 860px;
-    }
+    width: 100%;
+    max-width: 1000px;
+    text-align: left;
+    padding: 20px;
+    margin: 20px auto;
+    position: relative;
 
     @media #{$media-size-tablet} {
-      margin: 20px 0;
-      width: 100% !important;
+        max-width: 600px;
+    }
+    @media #{$media-size-medium} {
+        max-width: 800px;
     }
 
-    img {
-      width: 100%;
-    }
-  }
-
-  &-info {
-    margin-top: 30px;
-    font-size: 0.8rem;
-    line-height: normal;
-    @include dimmed;
-
-    p {
-      margin: 0.8em 0;
+    &-date {
+        &:after {
+            content: "—";
+        }
     }
 
-    a:hover {
-      border-bottom: 1px solid white;
+    &-title {
+        font-size: 2.625rem;
+        margin: 0 0 20px;
+
+        @media #{$media-size-phone} {
+            font-size: 2rem;
+        }
+
+        a {
+            text-decoration: none;
+        }
     }
 
-    svg {
-      margin-right: 0.8em;
+    &-subtitle {
+        font-size: 1.9rem;
+        margin: -15px 0 20px;
+
+        @media #{$media-size-phone} {
+            font-size: 1.6rem;
+        }
     }
 
-    .tag {
-      margin-right: 0.5em;
-      display: inline-block;
+    &-breadcrumbs {
+        font-size: 1.15rem;
+        margin: 10px 0 5px;
 
-      &::before {
-        content: "#";
-      }
+        @media #{$media-size-phone} {
+            font-size: 0.9rem;
+        }
     }
-  }
 
-  .flag {
-    border-radius: 50%;
-    margin: 0 5px;
-  }
+    &-description {
+        font-size: 1.15rem;
+        @media #{$media-size-phone} {
+            font-size: 1.075rem;
+        }
+    }
+
+    &-tags {
+        display: block;
+        margin-bottom: 20px;
+        font-size: 1rem;
+        opacity: 0.5;
+
+        a {
+            text-decoration: none;
+        }
+    }
+
+    &-content {
+        margin-top: 30px;
+    }
+
+    &-cover {
+        border-radius: 8px;
+        margin: 30px -5.2%;
+        width: 110%;
+        max-width: 110%;
+        text-decoration: none;
+
+        @media #{$media-size-medium} {
+            max-width: 860px;
+        }
+
+        @media #{$media-size-tablet} {
+            margin: 20px 0;
+            width: 100% !important;
+        }
+
+        img {
+            width: 100%;
+        }
+    }
+
+    &-info {
+        margin-top: 30px;
+        font-size: 0.8rem;
+        line-height: normal;
+        @include dimmed;
+
+        p {
+            margin: 0.8em 0;
+        }
+
+        a:hover {
+            border-bottom: 1px solid white;
+        }
+
+        svg {
+            margin-right: 0.8em;
+        }
+
+        .tag {
+            margin-right: 0.5em;
+            display: inline-block;
+
+            &::before {
+                content: "#";
+            }
+        }
+    }
+
+    .flag {
+        border-radius: 50%;
+        margin: 0 5px;
+    }
 }
 
 .pagination {
-  margin-top: 20px;
+    margin-top: 20px;
 
-  &__title {
-    display: flex;
-    text-align: center;
-    position: relative;
-    margin: 20px 0;
+    &__title {
+        display: flex;
+        text-align: center;
+        position: relative;
+        margin: 20px 0;
 
-    &-h {
-      text-align: center;
-      margin: 0 auto;
-      padding: 5px 10px;
-      background: $light-background;
-      color: $light-color-secondary;
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      text-decoration: none;
-      letter-spacing: 0.1em;
-      z-index: 1;
+        &-h {
+            text-align: center;
+            margin: 0 auto;
+            padding: 5px 10px;
+            background: $light-background;
+            color: $light-color-secondary;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            text-decoration: none;
+            letter-spacing: 0.1em;
+            z-index: 1;
 
-      .dark-theme & {
-        background: $dark-background;
-        color: $dark-color-secondary;
-      }
+            .dark-theme & {
+                background: $dark-background;
+                color: $dark-color-secondary;
+            }
+        }
+
+        hr {
+            position: absolute;
+            left: 0;
+            right: 0;
+            width: 100%;
+            margin-top: 15px;
+            z-index: 0;
+        }
     }
 
-    hr {
-      position: absolute;
-      left: 0;
-      right: 0;
-      width: 100%;
-      margin-top: 15px;
-      z-index: 0;
-    }
-  }
+    &__buttons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-  &__buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    a {
-      text-decoration: none;
-      font-weight: bold;
+        a {
+            text-decoration: none;
+            font-weight: bold;
+        }
     }
-  }
 }
 
 .button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: $light-background-secondary;
-  font-size: 1rem;
-  font-weight: 600;
-  border-radius: 8px;
-  max-width: 40%;
-  padding: 0;
-  cursor: pointer;
-  appearance: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: $light-background-secondary;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 8px;
+    max-width: 40%;
+    padding: 0;
+    cursor: pointer;
+    appearance: none;
 
-  .dark-theme & {
-    background: $dark-background-secondary;
-  }
+    .dark-theme & {
+        background: $dark-background-secondary;
+    }
 
-  + .button {
-    margin-left: 10px;
-  }
+    + .button {
+        margin-left: 10px;
+    }
 
-  a {
-    display: flex;
-    padding: 8px 16px;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
+    a {
+        display: flex;
+        padding: 8px 16px;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
 
-  &__text {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
+    &__text {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
 
-  &.next .button__icon {
-    margin-left: 8px;
-  }
+    &.next .button__icon {
+        margin-left: 8px;
+    }
 
-  &.previous .button__icon {
-    margin-right: 8px;
-  }
+    &.previous .button__icon {
+        margin-right: 8px;
+    }
 }

themes/maik-blog/layouts/_default/single.html

@@ -38,14 +38,12 @@
     {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify) "class" "post-cover") }}
     {{- end }}
 
-    {{- if .Params.toc }}
-    <hr />
-    <aside id="toc">
-      <div class="toc-title">{{ i18n "tableOfContents" }}</div>
-      {{ .TableOfContents }}
+    <aside id="toc" class="{{- if not .Params.toc }}desktop-only{{- end }}">
+      <div class="toc-content">
+        <div class="toc-title">{{ i18n "tableOfContents" }}</div>
+        {{ .TableOfContents }}
+      </div>
     </aside>
-    <hr />
-    {{- end }}
 
     <div class="post-content">
       {{ .Content }}