Make header linkable + fix bug

exampleSite/data/about.yaml

@@ -5,13 +5,11 @@ company:
   name: Example Co.
   url: "https://www.example.com"
 
-# your resume
+# your resume. this file path should be relative to you "static" directory
 resume: "files/resume.pdf"
 
 # a summary about you
-summary: 'I am a passionate software engineer with x years of working
-  experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools helps people to
-  deploy their workloads in Kuberenetes. Sometimes, I work on some fun projects such as writing a theme etc.'
+summary: 'I am a passionate software engineer with x years of working experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools help people to deploy their workloads in Kubernetes. Sometimes, I work on some fun projects such as writing a theme, etc.'
 
 # your social links
 # give as many as you want. use font-awesome for the icons.
@@ -38,9 +36,10 @@ socialLinks:
 
 - name: Facebook
   icon: "fab fa-facebook"
+  url: "#"
 
 # your soft skills
-# give the percentage between 50 to 100 with 5 interval.
+# give the percentage between 50 to 100 with 5 intervals.
 # currently supported color: blue, yellow, pink, green
 softSkills:
 - name: Leadership

layouts/_default/single.html

@@ -80,6 +80,7 @@
 
 {{ define "scripts" }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
+<script src="/assets/js/single.js"></script>
 <script>
   hljs.initHighlightingOnLoad();
 </script>

layouts/partials/about.html

@@ -1,39 +1,41 @@
 <div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about">
   <div class="container">
     <div class="row pt-sm-2 pt-md-4 align-self-center">
-      <!-- summery -->
-      <div class="col-md-6">
-        <h3 class="p-1">{{ .Site.Data.home.author.name }}</h3>
-        <h5 class="p-1">
-          {{ .Site.Data.about.designation }} at
-          <a href="{{ .Site.Data.about.company.url }}"
-            >{{ .Site.Data.about.company.name }}</a
+      {{ if .Site.Data.about }}
+        <!-- summery -->
+        <div class="col-md-6">
+          <h3 class="p-1">{{ .Site.Data.home.author.name }}</h3>
+          <h5 class="p-1">
+            {{ .Site.Data.about.designation }} at
+            <a href="{{ .Site.Data.about.company.url }}"
+              >{{ .Site.Data.about.company.name }}</a
+            >
+          </h5>
+          <p class="p-1 text-justify">
+            {{ .Site.Data.about.summary | markdownify }}
+          </p>
+          <div class="text-container ml-auto">
+            <ul class="social-link d-flex">
+              {{ range .Site.Data.about.socialLinks }}
+              <li>
+                <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+              </li>
+              {{ end }}
+            </ul>
+          </div>
+          <a href="{{ .Site.Data.about.resume }}" target="#"
+            ><button class="btn btn-dark">My Resume</button></a
           >
-        </h5>
-        <p class="p-1 text-justify">
-          {{ .Site.Data.about.summary | markdownify }}
-        </p>
-        <div class="text-container ml-auto">
-          <ul class="social-link d-flex">
-            {{ range .Site.Data.about.socialLinks }}
-            <li>
-              <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-            </li>
-            {{ end }}
-          </ul>
         </div>
-        <a href="{{ .Site.Data.about.resume }}" target="#"
-          ><button class="btn btn-dark">My Resume</button></a
-        >
-      </div>
-      <!-- soft skills circular-progressbar -->
-      <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
-        <div class="row">
-          {{ range .Site.Data.about.softSkills }}
-            {{ partial "progress/soft-skills" . }}
-          {{ end }}
+        <!-- soft skills circular-progressbar -->
+        <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
+          <div class="row">
+            {{ range .Site.Data.about.softSkills }}
+              {{ partial "progress/soft-skills" . }}
+            {{ end }}
+          </div>
         </div>
-      </div>
+      {{ end }}
     </div>
   </div>
 </div>

layouts/partials/achievements.html

@@ -1,14 +1,16 @@
 <div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
-  <h1 class="text-center">Achievements</h1>
+  {{ if .Site.Data.achievements }}
+    <h1 class="text-center">Achievements</h1>
 
-  <div class="container">
-    <div class="row" id="gallery">
+    <div class="container">
+      <div class="row" id="gallery">
+      </div>
     </div>
-  </div>
-  <!-- achievements-holder holds achievement-entry -->
-  <div class="d-none" id="achievements-holder">
-    {{ range .Site.Data.achievements.achievements }}
-      {{ partial "misc/achievement.html" . }}
-    {{ end }}
-  </div>
+    <!-- achievements-holder holds achievement-entry -->
+    <div class="d-none" id="achievements-holder">
+      {{ range .Site.Data.achievements.achievements }}
+        {{ partial "misc/achievement.html" . }}
+      {{ end }}
+    </div>
+  {{ end }}
 </div>

layouts/partials/cards/recent-post.html

@@ -2,7 +2,7 @@
   <a href="{{ .RelPermalink }}" class="post-card-link">
     <div class="card">
       <div class="card-head">
-        <img class="card-img-top" src='{{ partial "helpers/get-hero.html" .Params }}'
+        <img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'
           alt="Card image cap"
         />
       </div>

layouts/partials/experiences.html

@@ -1,7 +1,8 @@
 <div class="container-fluid experiences bg-white anchor" id="experiences">
-  <h1 class="text-center">Experiences</h1>
-  <div class="container timeline text-justify">
-    {{ if .Site.Data }}  
+  {{ if .Site.Data.experiences }}
+    <h1 class="text-center">Experiences</h1>
+
+    <div class="container timeline text-justify">
       {{ $total:= len .Site.Data.experiences.experiences }}
       {{ range $idx,$val:= .Site.Data.experiences.experiences }}
         {{ if eq (mod $idx 2) 0 }}
@@ -22,6 +23,6 @@
           {{ end }}
         {{ end }}
       {{ end }}
-    {{ end }}
-  </div>
+    </div>
+  {{ end }}
 </div>

layouts/partials/footer.html

@@ -3,13 +3,15 @@
     <div class="row text-left">
       <div class="col-md-4 col-sm-12">
         <h5>Navigation</h5>
-        <ul>
-          {{ range .Site.Data.site.menus }}
-          <li class="nav-item">
-            <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
-          </li>
-          {{ end }}
-        </ul>
+        {{ if .Site.Data.site }}
+          <ul>
+            {{ range .Site.Data.site.menus }}
+            <li class="nav-item">
+              <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+            </li>
+            {{ end }}
+          </ul>
+        {{ end }}
       </div>
       <div class="col-md-4 col-sm-12">
         <h5>Contact Me</h5>

layouts/partials/home.html

@@ -1,14 +1,14 @@
 <div class="container-fluid home" id="home">
   <div
     class="background container-fluid"
-    style="background-image: url('{{ .Site.Data.site.background }}');"
+    style="background-image: url('{{ if .Site.Data.site.background }}{{ .Site.Data.site.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
   ></div>
   <div class="container content text-center">
-    <img
-      src="{{ .Site.Data.site.author.image }}"
+    <img src="{{ if .Site.Data.site.author.image }}{{ .Site.Data.site.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
       class="rounded-circle mx-auto d-block img-fluid"
     />
-    <h1 class="greeting">Hi, I am {{ .Site.Data.site.author.name -}}</h1>
+    <h1 class="greeting">Hi, I am {{ if .Site.Data.author.name }}{{ .Site.Data.site.author.name }}{{ else }}Jane Doe{{ end }}
+    </h1>
     <div class="typing-carousel">
       <span id="ityped" class="ityped"></span>
       <span class="ityped-cursor"></span>

layouts/partials/projects.html

@@ -1,19 +1,21 @@
 <div class="container-fluid projects bg-dimmed anchor pb-5" id="projects">
-  <h1 class="text-center">Projects</h1>
-  <div class="container ml-auto text-center">
-    <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
-      {{ range .Site.Data.projects.buttons }}
-      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
-        {{ .name }}
-      </button>
-      {{ end }}
+  {{ if .Site.Data.projects }}
+    <h1 class="text-center">Projects</h1>
+    <div class="container ml-auto text-center">
+      <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
+        {{ range .Site.Data.projects.buttons }}
+        <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+          {{ .name }}
+        </button>
+        {{ end }}
+      </div>
     </div>
-  </div>
-  <div class="container filtr-projects">
-    <div class="row" id="project-card-holder">
-      {{ range .Site.Data.projects.projects }}
-        {{ partial "cards/project" . }}
-      {{ end }}
+    <div class="container filtr-projects">
+      <div class="row" id="project-card-holder">
+        {{ range .Site.Data.projects.projects }}
+          {{ partial "cards/project" . }}
+        {{ end }}
+      </div>
     </div>
-  </div>
+  {{ end }}
 </div>

layouts/partials/recent-posts.html

@@ -2,7 +2,7 @@
   <h1 class="text-center">Recent Posts</h1>
   <div class="container">
     <div class="row" id="recent-post-cards">
-      {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "!=" "section" )}}
+      {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
         {{ partial "cards/recent-post.html" . }}
       {{ end }}
     </div>

layouts/partials/skills.html

@@ -1,11 +1,13 @@
 <div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
-  <h1 class="text-center">Skills</h1>
+  {{ if .Site.Data.skills }}
+    <h1 class="text-center">Skills</h1>
 
-  <div class="container d-flex-block">
-    <div class="row" id="primary-skills">
-      {{ range .Site.Data.skills.skills }}
-        {{ partial "cards/skill.html" . }}
-      {{ end }}
+    <div class="container d-flex-block">
+      <div class="row" id="primary-skills">
+        {{ range .Site.Data.skills.skills }}
+          {{ partial "cards/skill.html" . }}
+        {{ end }}
+      </div>
     </div>
-  </div>
+  {{ end }}
 </div>

static/assets/css/single.css

@@ -136,6 +136,24 @@ pre>code {
   padding: 10px !important;
 }
 
+a.header-anchor{
+  text-decoration: none;
+  color: #1c2d41;
+}
+
+a.header-anchor i{
+  font-size: 10pt;
+  color: #3c4858;
+  display: none;
+  margin-left: 0.5rem;
+}
+a.header-anchor:hover i{
+  display: inline-block;
+}
+a.header-anchor code{
+  color: #e83e8c;
+}
+
 .navbar-toggler {
   display: none;
 }

static/assets/js/single.js

@@ -19,87 +19,19 @@ var isMobile = false, isTablet = false, isLaptop = false;
       }
     }
     detectDevice();
-    console.log(isMobile);
 
-    // ======= Add table wrapper ===========
-    function adjustPostCardsHeight() {
-      if (!isMobile) { // no need to adjust height for mobile devices
-        let el = document.getElementById("post-cards").children;
-        let maxHeight = 0;
-        for (let i = 0; i < el.length; i++) {
-          if (el[i].children[0].clientHeight > maxHeight) {
-            maxHeight = el[i].children[0].clientHeight;
-          }
-        }
-        for (let i = 0; i < el.length; i++) {
-          el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
-        }
-      }
+    // =========== Add anchor to the headers ================
+    function addAnchor(element) {
+      element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link"></i></sup></a>`;
     }
-    adjustPostCardsHeight();
-
-    // ============= Sidebar Tre ================
-    function buildSidebarMenu() {
-      var openedClass = "fa-minus-circle";
-      var closedClass = "fa-plus-circle";
-      // initialize top level
-      var tree = $("#tree");
-      // add expand icon to those li who has ul as children
-      tree.find("li").has("ul").each(function () {
-        var branch = $(this);
-        branch.prepend('<i class="fas ' + closedClass + '"></i>');
-        branch.on('click', function (e) {
-          if (this.children[1] == e.target) {
-            // toggle "expand" class and icon
-            branch.toggleClass("expand");
-            var icon = $(this).children('i:first');
-            icon.toggleClass(openedClass + " " + closedClass);
-          }
-        });
-      });
 
-      // remove "expnad" class from siblings of the clicked item
-      tree.find("li").on("click", function () {
-        var item = $(this);
-        var shiblings = item.siblings().each(function () {
-          var sibling = $(this);
-          if (sibling.hasClass("expand")) {
-            sibling.removeClass("expand");
-            var icon = sibling.children('i:first');
-            icon.toggleClass(openedClass + " " + closedClass);
-          }
-        });
-      });
-
-      // focus the cliked item
-      tree.find("a").on("click", function () {
-        // clear other focused link
-        tree.find("a.focused").each(function () {
-          $(this).removeClass("focused");
-        });
-        // focus cliked link
-        $(this).addClass("focused");
-      });
+    var headerTypes = ["h1", "h2", "h3", "h4", "h5", "h6"];
+    for (var i = 0; i < headerTypes.length; i++) {
+      var headers = document.querySelectorAll(headerTypes[i]);
+      if (headers) {
+        headers.forEach(addAnchor);
+      }
     }
 
-    buildSidebarMenu();
-    // initialize filterizr
-    filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
   });
 })(jQuery);
-
-// toggle sidebar on click
-function toggleSidebar() {
-  document.getElementById("sidebar").classList.toggle("hide");
-  document.getElementById("content").classList.toggle("overley");
-
-  // if it is mobile device. then scroll to top.
-  if (isMobile && $("#sidebar").hasClass("hide")) {
-    document.body.scrollTop = 0;
-    document.documentElement.scrollTop = 0;
-  }
-
-  setTimeout(function () {
-    filterizd.filterizr('sort');
-  }, 300);
-}