From 1c22af48468c45075c394f9591316bd0ae221f7e Mon Sep 17 00:00:00 2001
From: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Date: Thu, 18 Aug 2022 18:05:40 +0500
Subject: [PATCH] add smooth scrolling & add relative to absolute links
 converter

---
 website/src/_includes/layouts/article.html |  47 ++++++++--
 website/src/css/blog.css                   | 100 ++++++++++++---------
 2 files changed, 99 insertions(+), 48 deletions(-)

diff --git a/website/src/_includes/layouts/article.html b/website/src/_includes/layouts/article.html
index ae395199d9..05c3bd0c09 100644
--- a/website/src/_includes/layouts/article.html
+++ b/website/src/_includes/layouts/article.html
@@ -71,22 +71,55 @@
     window.addEventListener("click", (e) => {
       if (e.target.tagName === "A") {
         e.preventDefault();
-
-        if (e.target.href.split("#")[1]) {
-          const id = e.target.href.split("#")[1];
+        if (e.target.getAttribute("href").split("#")[0] == "") {
+          const id = e.target.getAttribute("href").split("#")[1];
           const element = document.getElementById(id);
-          const yOffset = -80; // Offset for fixed header
+          const yOffset = 0; // Offset for fixed header
           const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
-
           window.scrollTo({
             top: y,
             behavior: 'smooth'
           });
-        } else {
-          window.open(e.target.href, "_blank");
+        }
+        else {
+          window.open(e.target.href, "_self");
         }
       }
     });
+
+    // convert relative blog links to absolute links
+    document.querySelectorAll("a").forEach((a) => {
+      const dotSepList = a.getAttribute("href").split(".");
+      if (dotSepList[0] == "") {
+        const hashSepList = dotSepList[dotSepList.length - 1].split("#")
+        if (hashSepList[0] == "md") {
+          let str = `/blog${dotSepList[1]}`;
+          for (let i = 2; i < dotSepList.length; i++) {
+            if (dotSepList[i].substring(0, 2) != "md") {
+              str += "." + dotSepList[i];
+            } else break;
+          }
+          if (hashSepList[1]) {
+            str += "#" + hashSepList[1];
+          }
+          a.setAttribute("href", str);
+        }
+      }
+    });
+
+    const url = window.location.href;
+    const hash = url.split("#")[1];
+    if (hash) {
+      console.log("entered")
+      const element = document.getElementById(hash);
+      const yOffset = 0; // Offset for fixed header
+      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+
+      window.scrollTo({
+        top: y,
+        behavior: 'smooth'
+      });
+    }
   </script>
 </body>
 
diff --git a/website/src/css/blog.css b/website/src/css/blog.css
index d7ee821e25..5d2b394781 100644
--- a/website/src/css/blog.css
+++ b/website/src/css/blog.css
@@ -1,58 +1,76 @@
-h1{
-    font-size: 1.8rem;
-    font-weight: 600;
-    letter-spacing: 0.6px;  
+h1 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  letter-spacing: 0.6px;
 }
 
-section.container > div > p:nth-child(2){
-    margin: 0;
-    margin-bottom: 2rem;
-    margin-top: 4px;
-    font-size: 1rem;
+section.container > div > p:nth-child(2) {
+  margin: 0;
+  margin-bottom: 2rem;
+  margin-top: 4px;
+  font-size: 1rem;
 }
 
-h2{
-    font-size: 1.6rem;
-    font-weight: 600;
-    letter-spacing: 0.6px;
-    margin-bottom: 1rem;
-    margin-top: 2.2rem;
+h2 {
+  font-size: 1.6rem;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  margin-bottom: 1rem;
+  margin-top: 2.2rem;
 }
 
-h3{
-    font-size: 1.2rem;
-    font-weight: 600;
-    letter-spacing: 0.6px;
-    margin-bottom: 1rem;
-    margin-top: 1.8rem;
+h3 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  margin-bottom: 1rem;
+  margin-top: 1.8rem;
 }
 
-ul li,ol li{
-    text-decoration: none;
-    /* list-style: none; */
-    font-size: 1.1rem;
-    line-height: 30px;
-    letter-spacing: 0.6px;
-    margin: 0.5rem 0;
+ul li,
+ol li {
+  text-decoration: none;
+  /* list-style: none; */
+  font-size: 1.1rem;
+  line-height: 30px;
+  letter-spacing: 0.6px;
+  margin: 0.5rem 0;
 }
-ul,ol{
-    list-style-position: inside;
-    /* list-style-type: decimal; */
-    overflow: auto;
+ul,
+ol {
+  list-style-position: inside;
+  /* list-style-type: decimal; */
+  overflow: auto;
 }
-ul li::marker, ol li::marker{
-    /* content: "->   "; */
-    font-weight: 600;
-    /* color: #fbd561; */
+ul li::marker,
+ol li::marker {
+  /* content: "->   "; */
+  font-weight: 600;
+  /* color: #fbd561; */
 }
-pre{
-    overflow: auto;
+pre {
+  overflow: auto;
 }
 /* code{
     width: 100%;
     height: auto;
 } */
 
-p{
-    margin: 1rem 0;
-}
\ No newline at end of file
+p {
+  margin: 1rem 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+h1::before,
+h2::before,
+h3::before {
+  display: block;
+  content: " ";
+  margin-top: -80px;
+  height: 80px;
+  visibility: hidden;
+  pointer-events: none;
+}