fix: show active on dark theme

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"
@@ -49,7 +55,7 @@ dateformMonth = "Jan, 2006"
 
 # Metadata mostly used in document's head
 description = "Hey there, my name is Maik de Kruif, I create websites, bots and other kinds of software. At the moment, I'm still studying computer science at Avans University of Applied Sciences. I am also a big fan of open-source software, which is why you'll find many of my projects on Github. And last but not least, I love playing around with cyber-security related stuff."
-keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif"
+keywords = "Developer, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif"
 images = [""]
 
 genre = "Blog"
@@ -58,7 +64,7 @@ rssLimit = 15
 
 showReadingTimeInList = false
 
-homeSubtitle = "Software Engineering, Linux and Cyber Security"
+homeSubtitle = "Software Engineer and Cyber Security Specialist"
 
 # Prefix of link to the git commit detail page. GitInfo must be enabled.
 gitUrl = "https://github.com/maikka39/Personal-Website/commit/"
@@ -125,9 +131,9 @@ image = "/img/home/portrait.png"
 twitter = "@maik_dev"
 
 # Wallets
-[[params.wallets]]
+# [[params.wallets]]
-name = "XMR"
+# name = "XMR"
-address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi"
+# address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi"
 
 # Social icons
 [[params.social]]

content/about.md

@@ -2,7 +2,7 @@
 author = "Maik de Kruif"
 title = "About"
 date = 2021-11-19T12:26:01+01:00
-description = "Ever since I was a little kid, I've loved coding. From the moment of writing my first program in Python and manipulating it to produce the desired output, I have been obsessed with the idea of writing software to solve practical problems. Programming is like a never-ending puzzle where you continuously have to come up with a new way to solve it."
+description = "I’m a passionate coder with a strong foundation in programming. With a love for solving practical problems through software development, I am driven to continuously explore new ways to create innovative solutions. My personal side-projects and exploration of cybersecurity further enhance my skills and dedication to building powerful and impactful applications."
 images = []
 tags = [
     "aboutme",
@@ -10,12 +10,9 @@ tags = [
 categories = [
     "me",
 ]
+toc = false
 +++
 
 Ever since I was a little kid, I've loved coding. From the moment of writing my first program in Python and manipulating it to produce the desired output, I have been obsessed with the idea of writing software to solve practical problems. Programming is like a never-ending puzzle where you continuously have to come up with a new way to solve it.
 
-Outside of my job, I run a small business with a couple of friends where we develop drone shows. I'm responsible for both designing and writing the control software as well as creating and designing the actual drones.
+When I get home after work, I tend to either continue writing code for some personal side-projects, or play around with cyber-security related stuff. Occasionally, I can also be found working on electronics projects. This is what keeps me up at night, a never-ending thirst to create beautiful, powerful things and share them with the world.
-
-When I get home after work/school, I tend to either continue writing code for some personal side-projects, or play around with cyber-security related stuff. This is what keeps me up at night, a never-ending thirst to create beautiful, powerful things and share them with the world.
-
-Skills/Interests: Python, Java, Scala, JavaScript, Node, CSS, HTML, Git, SQL, MongoDB, Apache, Nginx, Docker.

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>');
+        @mixin link-image($color) {
-        --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>');
+            $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/_portfolio.scss

@@ -109,98 +109,3 @@
         margin: 0 5px;
     }
 }
-
-.pagination {
-    margin-top: 20px;
-
-    &__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;
-
-            .dark-theme & {
-                background: $dark-background;
-                color: $dark-color-secondary;
-            }
-        }
-
-        hr {
-            position: absolute;
-            left: 0;
-            right: 0;
-            width: 100%;
-            margin-top: 15px;
-            z-index: 0;
-        }
-    }
-
-    &__buttons {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        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;
-
-    .dark-theme & {
-        background: $dark-background-secondary;
-    }
-
-    + .button {
-        margin-left: 10px;
-    }
-
-    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;
-    }
-
-    &.next .button__icon {
-        margin-left: 8px;
-    }
-
-    &.previous .button__icon {
-        margin-right: 8px;
-    }
-}

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

@@ -4,6 +4,7 @@
     text-align: left;
     padding: 20px;
     margin: 20px auto;
+    position: relative;
 
     @media #{$media-size-tablet} {
         max-width: 600px;
@@ -73,7 +74,7 @@
 
     &-cover {
         border-radius: 8px;
-    margin: 30px -5.20%;
+        margin: 30px -5.2%;
         width: 110%;
         max-width: 110%;
         text-decoration: none;
@@ -168,9 +169,19 @@
         align-items: center;
         justify-content: center;
 
-    a {
+        ul, ol {
+            list-style-type: none;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 10px;
+        }
+
+        .button a {
             text-decoration: none;
             font-weight: bold;
+            overflow: visible;
         }
     }
 }
@@ -189,15 +200,27 @@
     cursor: pointer;
     appearance: none;
 
+    &:disabled, &[disabled], &.disabled {
+        pointer-events: none;
+    }
+
+    &.active {
+        background: darken($light-background-secondary, 20%);
+    }
+
     .dark-theme & {
         background: $dark-background-secondary;
+
+        &.active {
+            background: lighten($dark-background-secondary, 22%);
+        }
     }
 
     + .button {
         margin-left: 10px;
     }
 
-  a {
+    > * {
         display: flex;
         padding: 8px 16px;
         text-decoration: none;
@@ -206,6 +229,10 @@
         overflow: hidden;
     }
 
+    a {
+        text-decoration: none;
+    }
+
     &__text {
         text-overflow: ellipsis;
         white-space: nowrap;

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

@@ -10,10 +10,6 @@
     <div class="content content-list">{{ .Content }}</div>
     {{- end }}
 
-    {{- if .Paginator.HasPrev }}
-    {{ partial "pagination.html" . }}
-    {{- end }}
-
     <div class="posts-list">
         {{ range $paginator.Pages }}
         <div class="post">

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

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

themes/maik-blog/layouts/partials/footer.html

@@ -16,6 +16,7 @@
                     </a>
                 </span>
             </div>
+            {{- if .Site.Params.wallets }}
             <div class="footer__content__section donations">
                 {{- with .Site.Params.wallets }}
                 {{- range . }}
@@ -24,6 +25,7 @@
                 {{- end }}
                 {{- end }}
             </div>
+            {{- end }}
         </div>
     </div>
 </footer>

themes/maik-blog/layouts/partials/pagination.html

@@ -1,20 +1,46 @@
 <div class="pagination">
     <div class="pagination__buttons">
-        {{ if .Paginator.HasPrev }}
+        {{- if .Paginator.HasPrev }}
         <span class="button previous">
             <a href="{{ .Paginator.Prev.URL }}">
                 <span class="button__icon">←</span>
-                <span class="button__text">Newer posts</span>
+                <span class="button__text">Previous</span>
             </a>
         </span>
-        {{ end }}
+        {{- end }}
-        {{ if .Paginator.HasNext }}
+        {{- with .Paginator }}
+        {{- $currentPage := .PageNumber }}
+        {{- $totalPages := .TotalPages }}
+        {{- if gt $totalPages 1 }}
+        <ol>
+        {{- range .Pagers }}
+            {{- $isFirst := eq .PageNumber 1 }}
+            {{- $isLast := eq .PageNumber $totalPages }}
+            {{- $inWindow := and (ge .PageNumber (sub $currentPage 2)) (le .PageNumber (add $currentPage 2)) }}
+            {{- $showPrevEllipsis := and (gt $currentPage 4) (eq .PageNumber 2) }}
+            {{- $showNextEllipsis := and (lt $currentPage (sub $totalPages 3)) (eq .PageNumber (sub $totalPages 1)) }}
+            {{- if or $showPrevEllipsis $showNextEllipsis }}
+            <li class="button disabled">
+                <span class="button__text">&hellip;</span>
+            </li>
+             {{- else if or $isFirst $isLast $inWindow }}
+            <li class="button {{- if eq $currentPage .PageNumber }} disabled active{{ end }}">
+                <a href="{{ .URL }}">
+                <span class="button__text">{{ .PageNumber }}</span>
+                </a>
+            </li>
+            {{- end }}
+            {{- end }}
+        </ol>
+        {{- end }}
+        {{- end }}
+        {{- if .Paginator.HasNext }}
         <span class="button next">
             <a href="{{ .Paginator.Next.URL }}">
-                <span class="button__text">Older posts</span>
+                <span class="button__text">Next</span>
                 <span class="button__icon">→</span>
             </a>
         </span>
-        {{ end }}
+        {{- end }}
     </div>
 </div>

themes/maik-blog/layouts/writeups/list.html

@@ -10,10 +10,6 @@
     <div class="content content-list">{{ .Content }}</div>
     {{- end }}
 
-    {{- if .Paginator.HasPrev }}
-    {{ partial "pagination.html" . }}
-    {{- end }}
-
     <div class="posts-list masonry">
         {{ range $paginator.Pages }}
         <div class="post">