feat: add back to top progress bar

README.md

@@ -59,3 +59,5 @@ $ docker cp cover.webp kungfux.github.io:/workspaces/kungfux.github.io/assets/me
   `assets/css/jekyll-theme-chirpy.scss`
 - Update site title tag from `<h1>` to `<p>`
   `_includes/sidebar.html`
+- Add progress bar to back to top
+  `assets/js/progress.js`, `assets/css/jekyll-theme-chirpy.scss`

_includes/metadata-hook.html

@@ -1 +1,3 @@
 <meta name="author" content="Alexander Fuks">
+
+<script src="/assets/js/progress.js" defer></script>

assets/css/jekyll-theme-chirpy.scss

@@ -37,3 +37,18 @@ div.highlighter-rouge {
   display: flex;
   justify-content: center;
 }
+
+// Progress bar
+#progress-circle {
+  margin: -1px -1px;
+  top: -2.75rem;
+  position: relative;
+  transform: rotate(-90deg);
+}
+
+#progress-circle circle {
+  stroke: var(--toc-highlight);
+  stroke-dasharray: 2 * 3.14 * 20;
+  stroke-dashoffset: 2 * 3.14 * 20;
+  transition: stroke-dashoffset 0.2s;
+}

assets/js/progress.js

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const btn = document.getElementById('back-to-top');
+
+  if (!btn) {
+    return;
+  }
+
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("id", "progress-circle");
+  svg.setAttribute("width", "44");
+  svg.setAttribute("height", "44");
+
+  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  circle.setAttribute("cx", "22");
+  circle.setAttribute("cy", "22");
+  circle.setAttribute("r", "20");
+  circle.setAttribute("stroke-width", "4");
+  circle.setAttribute("fill", "none");
+
+  svg.appendChild(circle);
+  btn.appendChild(svg);
+
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      const circumference = 2 * 3.14 * 20;
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollFraction = scrollTop / docHeight;
+      const drawLength = circumference * scrollFraction;
+
+      circle.style.strokeDashoffset = circumference - drawLength;
+    }
+  });
+});