option to customize search placeholder

clean up code

exampleSite/config.yaml

@@ -105,6 +105,7 @@ params:
     # showBrandLogo: false # Show brand logo in nav bar | default is true
     brandName: "Hugo Profile" # Brand name for the brand | default is the title variable
     disableSearch: false
+    # searchPlaceholder: "Search"
     menus:
       disableAbout: false
       disableExperience: false
@@ -121,6 +122,8 @@ params:
     subtitle: "I build things for the web"
     content: "A passionate web app developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly."
     image: /images/hero.svg
+    bottomImage:
+      enable: true
     # roundImage: true # Make hero image circular | default false
     button:
       enable: true
@@ -371,6 +374,8 @@ params:
     readTime:
       enable: true
       content: "min read"
+    scrollprogress:
+      enable: true
 
   # For translations
   terms:

layouts/_default/single.html

@@ -102,6 +102,13 @@
   </button>
 </section>
 
+{{ if or (.Site.Params.singlePages.scrollprogress.enable | default true) (.Params.enableScrollProgress) }}
+<div class="progress">
+  <div id="scroll-progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<Script src="{{.Site.Params.staticPath}}/js/scrollProgressBar.js"></script>
+{{ end }}
+
 <script>
   var topScroll = document.getElementById("topScroll");
   window.onscroll = function() {scrollFunction()};

layouts/partials/sections/header.html

@@ -1,25 +1,22 @@
-{{- /* theme-toggle is enabled */}}
-{{- if (not .Site.Params.theme.disableThemeToggle | default false) }}
 {{- /* theme is auto */}}
 <script>
-    if (localStorage.getItem("pref-theme") === "dark") {
+    let localStorageValue = localStorage.getItem("pref-theme");
+    let mediaQuery = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    switch (localStorageValue) {
+        case "dark":
             document.body.classList.add('dark');
-    } else if (localStorage.getItem("pref-theme") === "light") {
+            break;
-        document.body.classList.remove('dark')
+        case "light":
-    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.body.classList.remove('dark');
+            break;
+        default:
+            if (mediaQuery) {
                 document.body.classList.add('dark');
             }
-
+            break;
-</script>
-{{- /* theme-toggle is disabled and theme is auto */}}
-{{- else if (and (ne .Site.Params.theme.defaultTheme "light") (ne .Site.Params.theme.defaultTheme "dark"))}}
-<script>
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.body.classList.add('dark');
     }
-
 </script>
-{{- end }}
 
 
 <!-- Navbar -->
@@ -39,7 +36,7 @@
 
             {{ if not (.Site.Params.navbar.disableSearch | default false) }}
                 <div>
-                    <input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" placeholder="Ctrl + k"
+                    <input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" placeholder='{{ .Site.Params.navbar.searchPlaceholder | default "Ctrl + k to Search..."}}'
                         aria-label="Search" oninput="searchOnChange(event)">
                 </div>
             {{ end }}
@@ -58,7 +55,7 @@
                     {{ if not (.Site.Params.navbar.disableSearch | default false) }}
                         <li class="nav-item navbar-text d-block d-md-none">
                             <div class="nav-link">
-                                <input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder="Ctrl + k" aria-label="Search" oninput="searchOnChange(event)">
+                                <input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder='{{ .Site.Params.navbar.searchPlaceholder | default "Ctrl + k to Search..."}}' aria-label="Search" oninput="searchOnChange(event)">
                             </div>
                         </li>
                     {{ end }}

layouts/partials/sections/hero/index.html

@@ -43,6 +43,7 @@
             </div>
         </div>
     </div>
+    {{ if .Site.Params.hero.bottomImage.enable | default true }}
     <div class="hero-bottom-svg d-md-block d-lg-block d-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="201" height="201" viewBox="0 0 201 201">
             <g id="Group_1168" data-name="Group 1168" transform="translate(-384 -1392)">
@@ -305,5 +306,6 @@
             </g>
         </svg>
     </div>
+    {{ end }}
 </section>
 {{ end }}

static/css/single.css

@@ -25,6 +25,11 @@
     background-color: var(--secondary-color);
 }
 
+#single .page-content img {
+    max-width: 100%;
+    border-radius: 1rem;
+}
+
 #single .page-content a {
     display: inline-block;
     text-decoration: none;
@@ -282,3 +287,25 @@
     transition: .5s;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
 }
+
+/* Singlepage scroll progress start */
+.progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--background-color);
+    z-index: 999;
+}
+
+.progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: var(--primary-color);
+    transition: width .2s;
+}
+
+/* Singlepage scroll progress end */

static/js/scrollProgressBar.js

@@ -0,0 +1,12 @@
+function getScrollPercent() {
+  const totalHeight = document.body.scrollHeight - window.innerHeight;
+  const scrolled = window.scrollY;
+  return (scrolled / totalHeight) * 100;
+}
+const scrollProgressBar = document.getElementById("scroll-progress-bar");
+
+document.onscroll = function () {
+  var scrollPercent = Math.round(getScrollPercent());
+  scrollProgressBar.style.width = scrollPercent + "%";
+  scrollProgressBar.ariaValueNow = scrollPercent;
+};

static/js/search.js

@@ -6,7 +6,10 @@ async function searchOnChange(evt) {
   });
 
   if (searchQuery !== "") {
-    let searchJson = await fetch("/index.json").then((res) => res.json());
+    if (!window.searchJson) {
+      window.searchJson = await fetch("/index.json").then((res) => res.json());
+    }
+
     let searchResults = searchJson.filter((item) => {
       let res = false;
       if (item.title && item.description && item.content) {
@@ -64,7 +67,9 @@ async function searchOnChange(evt) {
 
 function alignSearchContent() {
   const searchButtonEle = document.querySelectorAll("#search");
-  if (searchButtonEle.value !== "") {
+  // check if search value is not empty
+  for (let i = 0; i < searchButtonEle.length; i++) {
+    if (searchButtonEle[i].value !== "") {
       let searchButtonPosition;
       if (window.innerWidth > 768) {
         searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
@@ -82,6 +87,7 @@ function alignSearchContent() {
         searchButtonPosition.left + "px";
     }
   }
+}
 
 function resetSearch(e) {
   if (