init

2025-12-05 09:15:15 +01:00
commit 8837c20d66
1752 changed files with 1123339 additions and 0 deletions
--- a/themes/godocs-4/assets/js/bootstrap.js
+++ b/themes/godocs-4/assets/js/bootstrap.js
@@ -0,0 +1,85 @@
+// bootstrap js components
+// import Alert from "js/bootstrap/src/alert";
+// import Button from "js/bootstrap/src/button";
+// import Carousel from "js/bootstrap/src/carousel";
+import Collapse from "js/bootstrap/src/collapse";
+import Dropdown from "js/bootstrap/src/dropdown";
+import Modal from "js/bootstrap/src/modal";
+// import Offcanvas from "js/bootstrap/src/offcanvas";
+// import Popover from "js/bootstrap/src/popover";
+// import ScrollSpy from "js/bootstrap/src/scrollspy";
+import Tab from "js/bootstrap/src/tab";
+// import Toast from "js/bootstrap/src/toast";
+// import Tooltip from "js/bootstrap/src/tooltip";
+
+
+(function () {
+  "use strict";
+
+  let searchModalEl = document.getElementById('searchModal');
+  let modalOpen = false;
+  let searchModal = new Modal(searchModalEl, {});
+  
+  const params = new Proxy(new URLSearchParams(window.location.search), {
+    get: (searchParams, prop) => searchParams.get(prop),
+  });
+  if (params.search !== null && params.search !== undefined) {
+    searchModal.show();
+    modalOpen = true;
+  } else {
+    searchModal.hide();
+    modalOpen = false;
+  }
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === "Escape") {
+      searchModal.hide();
+    } else if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      if (!modalOpen) {
+        e.preventDefault();
+        searchModal.show();
+        modalOpen = true;
+      } else {
+        e.preventDefault();
+        searchModal.hide();
+        modalOpen = false;
+      }
+    }
+  });
+
+  searchModalEl.addEventListener('hidden.bs.modal', e => {
+    modalOpen = false;
+  });
+  
+  // document.addEventListener('keydown', function(e) {
+  //   let searchModal = new Modal(document.getElementById('searchModal'), {});
+  //   let modalOpen = document.getElementById('searchModal').classList.contains('show');
+    
+  //   if (e.key === "Escape") {
+  //     searchModal.hide();
+  //   } else if (e.ctrlKey && e.key === 'k' || e.metaKey && e.key === 'k') {
+  //     e.preventDefault();
+  //     if (modalOpen) {
+  //       searchModal.hide();
+  //     } else {
+  //       searchModal.show();
+  //     }
+  //   }
+  // });
+
+//   let toastElList = [].slice.call(document.querySelectorAll(".toast"));
+//   let toastList = toastElList.map(function (toastEl) {
+//     return new Toast(toastEl);
+//   });
+
+//   toastList.forEach(function (toast) {
+//     toast.show();
+//   });
+
+//   let popoverTriggerList = [].slice.call(
+//     document.querySelectorAll('[data-bs-toggle="popover"]')
+//   );
+//   popoverTriggerList.map(function (popoverTriggerEl) {
+//     return new Popover(popoverTriggerEl);
+//   });
+})();
--- a/themes/godocs-4/assets/js/script.js
+++ b/themes/godocs-4/assets/js/script.js
@@ -0,0 +1,75 @@
+'use strict';
+
+// searchToggler keyboard shortcut
+const searchToggler = document.querySelectorAll('[data-search-toggler]');
+searchToggler.forEach((item) => {
+	let userAgentData = navigator?.userAgentData?.platform || navigator?.platform || 'unknown';
+
+	if (userAgentData == 'macOS') {
+		item.innerText = `⌘ + K`
+	} else {
+		item.innerText = `Ctrl + K`
+	}
+});
+
+// Navbar fixed
+window.onscroll = function () {
+	if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+		document.querySelector(".navigation").classList.add("nav-bg");
+	} else {
+		document.querySelector(".navigation").classList.remove("nav-bg");
+	}
+};
+
+// Search wrapper show on
+function isScrolledIntoView(el) {
+	var rect = el.getBoundingClientRect();
+	var elemTop = rect.top;
+	var elemBottom = rect.bottom;
+
+	// Only completely visible elements return true:
+	var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
+	// Partially visible elements return true:
+	//isVisible = elemTop < window.innerHeight && elemBottom >= 0;
+	return isVisible;
+}
+
+window.addEventListener("scroll", function () {
+	let header = document.querySelector("header");
+	let banner_searchWrapper = document.querySelector("#banner .search-wrapper");
+	let header_searchWrapper = document.querySelector("header .search-wrapper");
+
+	try {
+		if (isScrolledIntoView(banner_searchWrapper)) {
+			header.classList.remove("search-active");
+		} else {
+			header.classList.add("search-active");
+		}
+	} catch (error) {
+
+	}
+
+});
+
+// copy to clipboard
+let blocks = document.querySelectorAll("pre");
+blocks.forEach((block) => {
+	if (navigator.clipboard) {
+		let button = document.createElement("span");
+		button.innerText = "copy";
+		button.className = "copy-to-clipboard";
+		block.appendChild(button);
+		button.addEventListener("click", async () => {
+			await copyCode(block, button);
+		});
+	}
+});
+async function copyCode(block, button) {
+	let code = block.querySelector("code");
+	let text = code.innerText;
+	await navigator.clipboard.writeText(text);
+	button.innerText = "copied";
+	setTimeout(() => {
+		button.innerText = "copy";
+	}, 700);
+}
--- a/themes/godocs-4/assets/plugins/masonry/masonry.min.js
+++ b/themes/godocs-4/assets/plugins/masonry/masonry.min.js
--- a/themes/godocs-4/assets/plugins/scrollmenu/scrollmenu.min.js
+++ b/themes/godocs-4/assets/plugins/scrollmenu/scrollmenu.min.js
@@ -0,0 +1 @@
+!function(){"use strict";var t=function(t,i){this.initDefaultOptions(),this.extendOptions(i),this.initMenuItems(t),this.getSectionsPositions(),this.bindWindowEvents(),this.bindMenuItems()};t.prototype.initDefaultOptions=function(){this.options={duration:400,activeOffset:40,scrollOffset:10,easingFunction:function(t,i,e,n){return(t/=n/2)<1?e/2*t*t*t+i:e/2*((t-=2)*t*t+2)+i}}},t.prototype.extendOptions=function(t){if(t)for(var i in this.options)this.options.hasOwnProperty(i)&&t[i]&&(this.options[i]=t[i])},t.prototype.initMenuItems=function(t){this.items=[],!1===Array.isArray(t)&&(t=[t]),t.forEach(function(t){var i=[].slice.call(document.querySelectorAll(t));this.items=this.items.concat(i)}.bind(this))},t.prototype.getTargetOffset=function(t){var i=t.getAttribute("href");return i.match(/^#?$/)?0:document.querySelector(i).offsetTop},t.prototype.bindWindowEvents=function(){window.addEventListener("scroll",this.onWindowUpdate.bind(this),!1),window.addEventListener("resize",this.onWindowUpdate.bind(this),!1)},t.prototype.bindMenuItems=function(){this.items.forEach(function(t){t.addEventListener("click",this.onMenuItemClick.bind(this),!1)}.bind(this))},t.prototype.onWindowUpdate=function(){this.getSectionsPositions(),this.updateActiveMenuItem()},t.prototype.getSectionsPositions=function(){this.positions=this.items.map(function(t){return this.getTargetOffset(t)-this.options.activeOffset}.bind(this))},t.prototype.updateActiveMenuItem=function(){if(this.getScrollOffset()+window.innerHeight===document.body.clientHeight)this.changeActiveMenuItem(this.items[this.items.length-1]);else{var t=this.items.filter(function(t,i){return this.positions[i]<=this.getScrollOffset()}.bind(this));t.length>0?this.changeActiveMenuItem(t[t.length-1]):this.resetActiveMenuItem()}},t.prototype.getScrollOffset=function(){return document.body.scrollTop||window.pageYOffset},t.prototype.resetActiveMenuItem=function(){this.items.forEach(function(t){t.classList.remove("active")})},t.prototype.changeActiveMenuItem=function(t){t.classList.contains("active")||(this.resetActiveMenuItem(),t.classList.add("active"))},t.prototype.onMenuItemClick=function(t){t.preventDefault();var i=this.items.indexOf(t.target);-1!==i&&(this.updateLocationHash(i),this.animatePageScroll(i))},t.prototype.updateLocationHash=function(t){var i=this.items[t].getAttribute("href"),e=location.pathname+location.search;i.match(/^#?$/)||(e+=i),history.pushState(i,document.title,e)},t.prototype.animatePageScroll=function(t){var i=-this.options.activeOffset+this.options.scrollOffset,e=this.positions[t]-i;this.scrollTo(e,this.options.duration)},t.prototype.scrollTo=function(t,i,e){if(!(i<=0)){var n=t-this.getScrollOffset();e=(e||0)+10,setTimeout(function(){var o=this.options.easingFunction(e,this.getScrollOffset(),n,i);window.scroll(0,o),i===e?this.updateActiveMenuItem():this.scrollTo(t,i,e)}.bind(this),10)}},window.ScrollMenu=t}();
--- a/themes/godocs-4/assets/plugins/webfont/webfont-loader-2.js
+++ b/themes/godocs-4/assets/plugins/webfont/webfont-loader-2.js
@@ -0,0 +1,735 @@
+/* Web Font Loader v1.6.28 - (c) Adobe Systems, Google. License: Apache 2.0 */
+(function () {
+  function aa(a, b, c) {
+    return a.call.apply(a.bind, arguments)
+  }
+
+  function ba(a, b, c) {
+    if (!a) throw Error();
+    if (2 < arguments.length) {
+      var d = Array.prototype.slice.call(arguments, 2);
+      return function () {
+        var c = Array.prototype.slice.call(arguments);
+        Array.prototype.unshift.apply(c, d);
+        return a.apply(b, c)
+      }
+    }
+    return function () {
+      return a.apply(b, arguments)
+    }
+  }
+
+  function p(a, b, c) {
+    p = Function.prototype.bind && -1 != Function.prototype.bind.toString().indexOf("native code") ? aa : ba;
+    return p.apply(null, arguments)
+  }
+  var q = Date.now || function () {
+    return +new Date
+  };
+
+  function ca(a, b) {
+    this.a = a;
+    this.s = b || a;
+    this.c = this.s.document
+  }
+  var da = !!window.FontFace;
+
+  function t(a, b, c, d) {
+    b = a.c.createElement(b);
+    if (c)
+      for (var e in c) c.hasOwnProperty(e) && ("style" == e ? b.style.cssText = c[e] : b.setAttribute(e, c[e]));
+    d && b.appendChild(a.c.createTextNode(d));
+    return b
+  }
+
+  function u(a, b, c) {
+    a = a.c.getElementsByTagName(b)[0];
+    a || (a = document.documentElement);
+    a.insertBefore(c, a.lastChild)
+  }
+
+  function v(a) {
+    a.parentNode && a.parentNode.removeChild(a)
+  }
+
+  function w(a, b, c) {
+    b = b || [];
+    c = c || [];
+    for (var d = a.className.split(/\s+/), e = 0; e < b.length; e += 1) {
+      for (var f = !1, g = 0; g < d.length; g += 1)
+        if (b[e] === d[g]) {
+          f = !0;
+          break
+        } f || d.push(b[e])
+    }
+    b = [];
+    for (e = 0; e < d.length; e += 1) {
+      f = !1;
+      for (g = 0; g < c.length; g += 1)
+        if (d[e] === c[g]) {
+          f = !0;
+          break
+        } f || b.push(d[e])
+    }
+    a.className = b.join(" ").replace(/\s+/g, " ").replace(/^\s+|\s+$/, "")
+  }
+
+  function y(a, b) {
+    for (var c = a.className.split(/\s+/), d = 0, e = c.length; d < e; d++)
+      if (c[d] == b) return !0;
+    return !1
+  }
+
+  function ea(a) {
+    return a.s.location.hostname || a.a.location.hostname
+  }
+
+  function z(a, b, c) {
+    function d() {
+      m && e && f && (m(g), m = null)
+    }
+    b = t(a, "link", {
+      rel: "stylesheet",
+      href: b,
+      media: "all"
+    });
+    var e = !1,
+      f = !0,
+      g = null,
+      m = c || null;
+    da ? (b.onload = function () {
+      e = !0;
+      d()
+    }, b.onerror = function () {
+      e = !0;
+      g = Error("Stylesheet failed to load");
+      d()
+    }) : setTimeout(function () {
+      e = !0;
+      d()
+    }, 0);
+    u(a, "head", b)
+  }
+
+  function A(a, b, c, d) {
+    var e = a.c.getElementsByTagName("head")[0];
+    if (e) {
+      var f = t(a, "script", {
+          src: b
+        }),
+        g = !1;
+      f.onload = f.onreadystatechange = function () {
+        g || this.readyState && "loaded" != this.readyState && "complete" != this.readyState || (g = !0, c && c(null), f.onload = f.onreadystatechange = null, "HEAD" == f.parentNode.tagName && e.removeChild(f))
+      };
+      e.appendChild(f);
+      setTimeout(function () {
+        g || (g = !0, c && c(Error("Script load timeout")))
+      }, d || 5E3);
+      return f
+    }
+    return null
+  };
+
+  function B() {
+    this.a = 0;
+    this.c = null
+  }
+
+  function C(a) {
+    a.a++;
+    return function () {
+      a.a--;
+      D(a)
+    }
+  }
+
+  function E(a, b) {
+    a.c = b;
+    D(a)
+  }
+
+  function D(a) {
+    0 == a.a && a.c && (a.c(), a.c = null)
+  };
+
+  function F(a) {
+    this.a = a || "-"
+  }
+  F.prototype.c = function (a) {
+    for (var b = [], c = 0; c < arguments.length; c++) b.push(arguments[c].replace(/[\W_]+/g, "").toLowerCase());
+    return b.join(this.a)
+  };
+
+  function G(a, b) {
+    this.c = a;
+    this.f = 4;
+    this.a = "n";
+    var c = (b || "n4").match(/^([nio])([1-9])$/i);
+    c && (this.a = c[1], this.f = parseInt(c[2], 10))
+  }
+
+  function fa(a) {
+    return H(a) + " " + (a.f + "00") + " 300px " + I(a.c)
+  }
+
+  function I(a) {
+    var b = [];
+    a = a.split(/,\s*/);
+    for (var c = 0; c < a.length; c++) {
+      var d = a[c].replace(/['"]/g, ""); - 1 != d.indexOf(" ") || /^\d/.test(d) ? b.push("'" + d + "'") : b.push(d)
+    }
+    return b.join(",")
+  }
+
+  function J(a) {
+    return a.a + a.f
+  }
+
+  function H(a) {
+    var b = "normal";
+    "o" === a.a ? b = "oblique" : "i" === a.a && (b = "italic");
+    return b
+  }
+
+  function ga(a) {
+    var b = 4,
+      c = "n",
+      d = null;
+    a && ((d = a.match(/(normal|oblique|italic)/i)) && d[1] && (c = d[1].substr(0, 1).toLowerCase()), (d = a.match(/([1-9]00|normal|bold)/i)) && d[1] && (/bold/i.test(d[1]) ? b = 7 : /[1-9]00/.test(d[1]) && (b = parseInt(d[1].substr(0, 1), 10))));
+    return c + b
+  };
+
+  function ha(a, b) {
+    this.c = a;
+    this.f = a.s.document.documentElement;
+    this.h = b;
+    this.a = new F("-");
+    this.j = !1 !== b.events;
+    this.g = !1 !== b.classes
+  }
+
+  function ia(a) {
+    a.g && w(a.f, [a.a.c("wf", "loading")]);
+    K(a, "loading")
+  }
+
+  function L(a) {
+    if (a.g) {
+      var b = y(a.f, a.a.c("wf", "active")),
+        c = [],
+        d = [a.a.c("wf", "loading")];
+      b || c.push(a.a.c("wf", "inactive"));
+      w(a.f, c, d)
+    }
+    K(a, "inactive")
+  }
+
+  function K(a, b, c) {
+    if (a.j && a.h[b])
+      if (c) a.h[b](c.c, J(c));
+      else a.h[b]()
+  };
+
+  function ja() {
+    this.c = {}
+  }
+
+  function ka(a, b, c) {
+    var d = [],
+      e;
+    for (e in b)
+      if (b.hasOwnProperty(e)) {
+        var f = a.c[e];
+        f && d.push(f(b[e], c))
+      } return d
+  };
+
+  function M(a, b) {
+    this.c = a;
+    this.f = b;
+    this.a = t(this.c, "span", {
+      "aria-hidden": "true"
+    }, this.f)
+  }
+
+  function N(a) {
+    u(a.c, "body", a.a)
+  }
+
+  function O(a) {
+    return "display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:" + I(a.c) + ";" + ("font-style:" + H(a) + ";font-weight:" + (a.f + "00") + ";")
+  };
+
+  function P(a, b, c, d, e, f) {
+    this.g = a;
+    this.j = b;
+    this.a = d;
+    this.c = c;
+    this.f = e || 3E3;
+    this.h = f || void 0
+  }
+  P.prototype.start = function () {
+    var a = this.c.s.document,
+      b = this,
+      c = q(),
+      d = new Promise(function (d, e) {
+        function f() {
+          q() - c >= b.f ? e() : a.fonts.load(fa(b.a), b.h).then(function (a) {
+            1 <= a.length ? d() : setTimeout(f, 25)
+          }, function () {
+            e()
+          })
+        }
+        f()
+      }),
+      e = null,
+      f = new Promise(function (a, d) {
+        e = setTimeout(d, b.f)
+      });
+    Promise.race([f, d]).then(function () {
+      e && (clearTimeout(e), e = null);
+      b.g(b.a)
+    }, function () {
+      b.j(b.a)
+    })
+  };
+
+  function Q(a, b, c, d, e, f, g) {
+    this.v = a;
+    this.B = b;
+    this.c = c;
+    this.a = d;
+    this.o = g || "BESbswy";
+    this.f = {};
+    this.w = e || 3E3;
+    this.u = f || null;
+    this.m = this.j = this.h = this.g = null;
+    this.g = new M(this.c, this.o);
+    this.h = new M(this.c, this.o);
+    this.j = new M(this.c, this.o);
+    this.m = new M(this.c, this.o);
+    a = new G(this.a.c + ",serif", J(this.a));
+    a = O(a);
+    this.g.a.style.cssText = a;
+    a = new G(this.a.c + ",sans-serif", J(this.a));
+    a = O(a);
+    this.h.a.style.cssText = a;
+    a = new G("serif", J(this.a));
+    a = O(a);
+    this.j.a.style.cssText = a;
+    a = new G("sans-serif", J(this.a));
+    a =
+      O(a);
+    this.m.a.style.cssText = a;
+    N(this.g);
+    N(this.h);
+    N(this.j);
+    N(this.m)
+  }
+  var R = {
+      D: "serif",
+      C: "sans-serif"
+    },
+    S = null;
+
+  function T() {
+    if (null === S) {
+      var a = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgentData);
+      S = !!a && (536 > parseInt(a[1], 10) || 536 === parseInt(a[1], 10) && 11 >= parseInt(a[2], 10))
+    }
+    return S
+  }
+  Q.prototype.start = function () {
+    this.f.serif = this.j.a.offsetWidth;
+    this.f["sans-serif"] = this.m.a.offsetWidth;
+    this.A = q();
+    U(this)
+  };
+
+  function la(a, b, c) {
+    for (var d in R)
+      if (R.hasOwnProperty(d) && b === a.f[R[d]] && c === a.f[R[d]]) return !0;
+    return !1
+  }
+
+  function U(a) {
+    var b = a.g.a.offsetWidth,
+      c = a.h.a.offsetWidth,
+      d;
+    (d = b === a.f.serif && c === a.f["sans-serif"]) || (d = T() && la(a, b, c));
+    d ? q() - a.A >= a.w ? T() && la(a, b, c) && (null === a.u || a.u.hasOwnProperty(a.a.c)) ? V(a, a.v) : V(a, a.B) : ma(a) : V(a, a.v)
+  }
+
+  function ma(a) {
+    setTimeout(p(function () {
+      U(this)
+    }, a), 50)
+  }
+
+  function V(a, b) {
+    setTimeout(p(function () {
+      v(this.g.a);
+      v(this.h.a);
+      v(this.j.a);
+      v(this.m.a);
+      b(this.a)
+    }, a), 0)
+  };
+
+  function W(a, b, c) {
+    this.c = a;
+    this.a = b;
+    this.f = 0;
+    this.m = this.j = !1;
+    this.o = c
+  }
+  var X = null;
+  W.prototype.g = function (a) {
+    var b = this.a;
+    b.g && w(b.f, [b.a.c("wf", a.c, J(a).toString(), "active")], [b.a.c("wf", a.c, J(a).toString(), "loading"), b.a.c("wf", a.c, J(a).toString(), "inactive")]);
+    K(b, "fontactive", a);
+    this.m = !0;
+    na(this)
+  };
+  W.prototype.h = function (a) {
+    var b = this.a;
+    if (b.g) {
+      var c = y(b.f, b.a.c("wf", a.c, J(a).toString(), "active")),
+        d = [],
+        e = [b.a.c("wf", a.c, J(a).toString(), "loading")];
+      c || d.push(b.a.c("wf", a.c, J(a).toString(), "inactive"));
+      w(b.f, d, e)
+    }
+    K(b, "fontinactive", a);
+    na(this)
+  };
+
+  function na(a) {
+    0 == --a.f && a.j && (a.m ? (a = a.a, a.g && w(a.f, [a.a.c("wf", "active")], [a.a.c("wf", "loading"), a.a.c("wf", "inactive")]), K(a, "active")) : L(a.a))
+  };
+
+  function oa(a) {
+    this.j = a;
+    this.a = new ja;
+    this.h = 0;
+    this.f = this.g = !0
+  }
+  oa.prototype.load = function (a) {
+    this.c = new ca(this.j, a.context || this.j);
+    this.g = !1 !== a.events;
+    this.f = !1 !== a.classes;
+    pa(this, new ha(this.c, a), a)
+  };
+
+  function qa(a, b, c, d, e) {
+    var f = 0 == --a.h;
+    (a.f || a.g) && setTimeout(function () {
+      var a = e || null,
+        m = d || null || {};
+      if (0 === c.length && f) L(b.a);
+      else {
+        b.f += c.length;
+        f && (b.j = f);
+        var h, l = [];
+        for (h = 0; h < c.length; h++) {
+          var k = c[h],
+            n = m[k.c],
+            r = b.a,
+            x = k;
+          r.g && w(r.f, [r.a.c("wf", x.c, J(x).toString(), "loading")]);
+          K(r, "fontloading", x);
+          r = null;
+          if (null === X)
+            if (window.FontFace) {
+              var x = /Gecko.*Firefox\/(\d+)/.exec(window.navigator.userAgentData),
+                xa = /OS X.*Version\/10\..*Safari/.exec(window.navigator.userAgentData) && /Apple/.exec(window.navigator.vendor);
+              X = x ? 42 < parseInt(x[1], 10) : xa ? !1 : !0
+            } else X = !1;
+          X ? r = new P(p(b.g, b), p(b.h, b), b.c, k, b.o, n) : r = new Q(p(b.g, b), p(b.h, b), b.c, k, b.o, a, n);
+          l.push(r)
+        }
+        for (h = 0; h < l.length; h++) l[h].start()
+      }
+    }, 0)
+  }
+
+  function pa(a, b, c) {
+    var d = [],
+      e = c.timeout;
+    ia(b);
+    var d = ka(a.a, c, a.c),
+      f = new W(a.c, b, e);
+    a.h = d.length;
+    b = 0;
+    for (c = d.length; b < c; b++) d[b].load(function (b, d, c) {
+      qa(a, f, b, d, c)
+    })
+  };
+
+  function ra(a, b) {
+    this.c = a;
+    this.a = b
+  }
+  ra.prototype.load = function (a) {
+    function b() {
+      if (f["__mti_fntLst" + d]) {
+        var c = f["__mti_fntLst" + d](),
+          e = [],
+          h;
+        if (c)
+          for (var l = 0; l < c.length; l++) {
+            var k = c[l].fontfamily;
+            void 0 != c[l].fontStyle && void 0 != c[l].fontWeight ? (h = c[l].fontStyle + c[l].fontWeight, e.push(new G(k, h))) : e.push(new G(k))
+          }
+        a(e)
+      } else setTimeout(function () {
+        b()
+      }, 50)
+    }
+    var c = this,
+      d = c.a.projectId,
+      e = c.a.version;
+    if (d) {
+      var f = c.c.s;
+      A(this.c, (c.a.api || "https://fast.fonts.net/jsapi") + "/" + d + ".js" + (e ? "?v=" + e : ""), function (e) {
+        e ? a([]) : (f["__MonotypeConfiguration__" +
+          d] = function () {
+          return c.a
+        }, b())
+      }).id = "__MonotypeAPIScript__" + d
+    } else a([])
+  };
+
+  function sa(a, b) {
+    this.c = a;
+    this.a = b
+  }
+  sa.prototype.load = function (a) {
+    var b, c, d = this.a.urls || [],
+      e = this.a.families || [],
+      f = this.a.testStrings || {},
+      g = new B;
+    b = 0;
+    for (c = d.length; b < c; b++) z(this.c, d[b], C(g));
+    var m = [];
+    b = 0;
+    for (c = e.length; b < c; b++)
+      if (d = e[b].split(":"), d[1])
+        for (var h = d[1].split(","), l = 0; l < h.length; l += 1) m.push(new G(d[0], h[l]));
+      else m.push(new G(d[0]));
+    E(g, function () {
+      a(m, f)
+    })
+  };
+
+  function ta(a, b, c, d, e) {
+    this.o = 2 === e ? 2 : 1;
+    e = ua[this.o - 1];
+    a ? this.c = a : this.c = e[0];
+    this.m = e[1];
+    this.a = [];
+    this.f = [];
+    this.j = b || "";
+    this.g = c || "";
+    this.h = d || ""
+  }
+  var ua = [
+    ["https://fonts.googleapis.com/css", "%7C"],
+    ["https://fonts.googleapis.com/css2", "&family="]
+  ];
+
+  function va(a, b) {
+    for (var c = b.length, d = 0; d < c; d++) {
+      var e = b[d].split(":");
+      3 == e.length && a.f.push(e.pop());
+      var f = "";
+      2 == e.length && "" != e[1] && (f = ":");
+      a.a.push(e.join(f))
+    }
+  }
+
+  function wa(a) {
+    if (0 == a.a.length) throw Error("No fonts to load!");
+    if (-1 != a.c.indexOf("kit=")) return a.c;
+    for (var b = a.a.length, c = [], d = 0; d < b; d++) c.push(a.a[d].replace(/ /g, "+"));
+    b = a.c + "?family=" + c.join(a.m);
+    0 < a.f.length && (b += "&subset=" + a.f.join(","));
+    0 < a.j.length && (b += "&text=" + encodeURIComponent(a.j));
+    0 < a.g.length && (b += "&display=" + encodeURIComponent(a.g));
+    0 < a.h.length && (b += "&effect=" + encodeURIComponent(a.h));
+    return b
+  };
+
+  function ya(a) {
+    this.f = a;
+    this.a = [];
+    this.c = {}
+  }
+  var za = {
+      latin: "BESbswy",
+      "latin-ext": "\u00e7\u00f6\u00fc\u011f\u015f",
+      cyrillic: "\u0439\u044f\u0416",
+      greek: "\u03b1\u03b2\u03a3",
+      khmer: "\u1780\u1781\u1782",
+      Hanuman: "\u1780\u1781\u1782"
+    },
+    Aa = {
+      thin: "1",
+      extralight: "2",
+      "extra-light": "2",
+      ultralight: "2",
+      "ultra-light": "2",
+      light: "3",
+      regular: "4",
+      book: "4",
+      medium: "5",
+      "semi-bold": "6",
+      semibold: "6",
+      "demi-bold": "6",
+      demibold: "6",
+      bold: "7",
+      "extra-bold": "8",
+      extrabold: "8",
+      "ultra-bold": "8",
+      ultrabold: "8",
+      black: "9",
+      heavy: "9",
+      l: "3",
+      r: "4",
+      b: "7"
+    },
+    Ba = {
+      i: "i",
+      italic: "i",
+      n: "n",
+      normal: "n"
+    },
+    Ca = /^(thin|(?:(?:extra|ultra)-?)?light|regular|book|medium|(?:(?:semi|demi|extra|ultra)-?)?bold|black|heavy|l|r|b|[1-9]00)?(n|i|normal|italic)?$/;
+
+  function Da(a) {
+    for (var b = a.f.length, c = 0; c < b; c++) {
+      var d = a.f[c].split(":"),
+        e = d[0].replace(/\+/g, " "),
+        f = ["n4"];
+      if (2 <= d.length) {
+        var g;
+        var m = d[1];
+        g = [];
+        if (m)
+          for (var m = m.split(","), h = m.length, l = 0; l < h; l++) {
+            var k;
+            k = m[l];
+            if (k.match(/^[\w-]+$/)) {
+              var n = Ca.exec(k.toLowerCase());
+              if (null == n) k = "";
+              else {
+                k = n[2];
+                k = null == k || "" == k ? "n" : Ba[k];
+                n = n[1];
+                if (null == n || "" == n) n = "4";
+                else var r = Aa[n],
+                  n = r ? r : isNaN(n) ? "4" : n.substr(0, 1);
+                k = [k, n].join("")
+              }
+            } else k = "";
+            k && g.push(k)
+          }
+        0 < g.length && (f = g);
+        3 == d.length && (d = d[2], g = [], d = d ? d.split(",") :
+          g, 0 < d.length && (d = za[d[0]]) && (a.c[e] = d))
+      }
+      a.c[e] || (d = za[e]) && (a.c[e] = d);
+      for (d = 0; d < f.length; d += 1) a.a.push(new G(e, f[d]))
+    }
+  };
+
+  function Ea(a, b) {
+    this.c = a;
+    this.a = b
+  }
+  var Fa = {
+    Arimo: !0,
+    Cousine: !0,
+    Tinos: !0
+  };
+  Ea.prototype.load = function (a) {
+    var b = new B,
+      c = this.c,
+      d = new ta(this.a.api, this.a.text, this.a.display, this.a.effect, this.a.version),
+      e = this.a.families;
+    va(d, e);
+    var f = new ya(e);
+    Da(f);
+    z(c, wa(d), C(b));
+    E(b, function () {
+      a(f.a, f.c, Fa)
+    })
+  };
+
+  function Ga(a, b) {
+    this.c = a;
+    this.a = b
+  }
+  Ga.prototype.load = function (a) {
+    var b = this.a.id,
+      c = this.c.s;
+    b ? A(this.c, (this.a.api || "https://use.typekit.net") + "/" + b + ".js", function (b) {
+      if (b) a([]);
+      else if (c.Typekit && c.Typekit.config && c.Typekit.config.fn) {
+        b = c.Typekit.config.fn;
+        for (var e = [], f = 0; f < b.length; f += 2)
+          for (var g = b[f], m = b[f + 1], h = 0; h < m.length; h++) e.push(new G(g, m[h]));
+        try {
+          c.Typekit.load({
+            events: !1,
+            classes: !1,
+            async: !0
+          })
+        } catch (l) {}
+        a(e)
+      }
+    }, 2E3) : a([])
+  };
+
+  function Ha(a, b) {
+    this.c = a;
+    this.f = b;
+    this.a = []
+  }
+  Ha.prototype.load = function (a) {
+    var b = this.f.id,
+      c = this.c.s,
+      d = this;
+    b ? (c.__webfontfontdeckmodule__ || (c.__webfontfontdeckmodule__ = {}), c.__webfontfontdeckmodule__[b] = function (b, c) {
+      for (var g = 0, m = c.fonts.length; g < m; ++g) {
+        var h = c.fonts[g];
+        d.a.push(new G(h.name, ga("font-weight:" + h.weight + ";font-style:" + h.style)))
+      }
+      a(d.a)
+    }, A(this.c, (this.f.api || "https://f.fontdeck.com/s/css/js/") + ea(this.c) + "/" + b + ".js", function (b) {
+      b && a([])
+    })) : a([])
+  };
+  var Y = new oa(window);
+  Y.a.c.custom = function (a, b) {
+    return new sa(b, a)
+  };
+  Y.a.c.fontdeck = function (a, b) {
+    return new Ha(b, a)
+  };
+  Y.a.c.monotype = function (a, b) {
+    return new ra(b, a)
+  };
+  Y.a.c.typekit = function (a, b) {
+    return new Ga(b, a)
+  };
+  Y.a.c.google = function (a, b) {
+    return new Ea(b, a)
+  };
+  var Z = {
+    load: p(Y.load, Y)
+  };
+  "function" === typeof define && define.amd ? define(function () {
+    return Z
+  }) : "undefined" !== typeof module && module.exports ? module.exports = Z : (window.WebFont = Z, window.WebFontConfig && Y.load(window.WebFontConfig));
+}());
--- a/themes/godocs-4/assets/scss/_buttons.scss
+++ b/themes/godocs-4/assets/scss/_buttons.scss
@@ -0,0 +1,55 @@
+/* Button style */
+.btn {
+  font-size: 16px;
+  font-family: $font-primary;
+  text-transform: capitalize;
+  padding: 13px 30px;
+  border-radius: 6px;
+  border: 1px solid;
+  position: relative;
+  z-index: 1;
+  transition: .2s ease;
+  font-weight: 500;
+
+  &:hover,
+  &:active,
+  &:focus {
+    outline: 0;
+    box-shadow: none !important;
+  }
+  &-sm{
+    font-size: 14px;
+    padding: 10px 25px;
+  }
+}
+
+.btn-primary {
+  background: $color-primary;
+  color: $white;
+  border-color: $color-primary;
+
+  &:active,
+  &:hover,
+  &:focus,
+  &.focus,
+  &.active {
+    background: darken($color: $color-primary, $amount: 10) !important;
+    border-color: darken($color: $color-primary, $amount: 10) !important;
+  }
+}
+
+.btn-outline-primary {
+  background: transparent;
+  color: $color-primary;
+  border-color: $color-primary;
+
+  &:active,
+  &:hover,
+  &:focus,
+  &.focus,
+  &.active {
+    background: $color-primary !important;
+    border-color: $color-primary !important;
+    color: $white;
+  }
+}
--- a/themes/godocs-4/assets/scss/_common.scss
+++ b/themes/godocs-4/assets/scss/_common.scss
@@ -0,0 +1,276 @@
+body {
+  background-color: $body-bg;
+  overflow-x: hidden;
+}
+
+::selection {
+  background: lighten($color: $color-primary, $amount: 10);
+  color: $white;
+}
+
+/* preloader */
+
+.preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.section-title {
+  font-weight: 700;
+}
+
+img {
+  vertical-align: middle;
+  border: 0;
+  max-width: 100%;
+  height: auto;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+}
+
+a,
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+a,
+button,
+select {
+  cursor: pointer;
+  transition: .2s ease;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+a:hover {
+  color: $color-primary;
+}
+
+.slick-slide {
+  outline: 0;
+}
+
+.section {
+  padding-top: 80px;
+  padding-bottom: 80px;
+
+  &-sm {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+
+  &-title {
+    margin-bottom: 40px;
+  }
+}
+
+.bg-cover {
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.border-default {
+  border-color: $border-color !important;
+}
+
+/* overlay */
+
+.overlay {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: $black;
+    opacity: .5;
+  }
+}
+
+.outline-0 {
+  outline: 0 !important;
+}
+
+.rounded {
+  border-radius: 12px !important;
+}
+
+.shadow {
+  box-shadow: 0px 15px 60px rgba(62, 62, 62, 0.102) !important;
+}
+
+.d-unset {
+  display: unset !important;
+}
+
+.bg-primary {
+  background: $color-primary !important;
+}
+
+.text-primary {
+  color: $color-primary !important;
+}
+
+.text-light {
+  color: $text-light !important;
+}
+
+iframe {
+  max-width: 100%;
+}
+
+.zindex-1 {
+  z-index: 1;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.fw-medium {
+  font-weight: 500;
+}
+
+// Arrow Icon
+.nav-next,
+.nav-prev {
+  span {
+    font-size: 18px;
+  }
+
+  i {
+    font-size: 14px;
+    line-height: 29px;
+    transition: transform 0.4s;
+  }
+}
+
+.nav-prev {
+  &:hover i {
+    transform: translateX(-3px);
+  }
+
+  i {
+    margin-left: 3px;
+  }
+}
+
+.nav-next {
+  &:hover i {
+    transform: translateX(3px);
+  }
+
+  i {
+    margin-right: 3px;
+  }
+}
+
+.glightbox:hover {
+  cursor: pointer;
+  opacity: .9;
+  transition: 0.3s;
+}
+
+.glightbox-clean .gslide-title {
+  text-align: center;
+  margin-bottom: 0 !important;
+  font-style: italic;
+  opacity: 0.6;
+}
+
+.glightbox-clean .gdesc-inner {
+  padding: 14px 20px !important;
+}
+
+// Tooltip
+.tooltip-word {
+  position: relative;
+  cursor: help;
+  border-bottom: 1px dotted currentColor;
+}
+
+.tooltip-word::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  z-index: 50;
+
+  bottom: calc(100% + 0.4rem);
+  left: 50%;
+  transform: translate(-50%, 4px);
+
+  display: inline-block;
+  padding: 0.45rem 0.6rem;
+  background: #207495;
+  color: #fff;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  text-align: left;
+  font-weight: normal;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+
+  width: max-content;
+  max-width: 260px;
+  white-space: normal !important;
+  word-break: normal !important;
+  overflow-wrap: break-word;
+
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.tooltip-word:hover::after,
+.tooltip-word:focus::after {
+  opacity: 1;
+  transform: translate(-50%, 0); 
+}
+
+@media (max-width: 575px) { 
+  .tooltip-word::after {
+    position: fixed;
+    bottom: 1.5rem;
+    top: auto;
+    padding:20px;
+
+    left: 0;
+    right: 0;
+    margin: 0 .75rem;
+
+    width: auto;
+    max-width: none;
+    transform: none;
+
+    box-sizing: border-box;
+    text-align: left;
+    white-space: normal;
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  .tooltip-word:hover::after,
+  .tooltip-word:focus::after {
+    transform: none;     // animatie alleen in Y is nu niet meer nodig
+  }
+}
--- a/themes/godocs-4/assets/scss/_mixins.scss
+++ b/themes/godocs-4/assets/scss/_mixins.scss
@@ -0,0 +1,29 @@
+@mixin mobile-xs{
+  @media(max-width:400px){
+    @content;
+  }
+}
+@mixin mobile{
+  @media(max-width:575px){
+    @content;
+  }
+}
+@mixin tablet{
+  @media(max-width:767px){
+    @content;
+  }
+}
+@mixin desktop{
+  @media(max-width:991px){
+    @content;
+  }
+}
+@mixin desktop-lg{
+  @media(max-width:1200px){
+    @content;
+  }
+}
+
+@mixin size($size){
+  width: $size; height: $size;
+}
--- a/themes/godocs-4/assets/scss/_typography.scss
+++ b/themes/godocs-4/assets/scss/_typography.scss
@@ -0,0 +1,93 @@
+/*  typography */
+@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800&display=swap');
+
+body {
+  font-family: $font-primary;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  line-height: 1.6;
+  color: $text-color;
+}
+
+p,
+.paragraph {
+  font-weight: 400;
+  color: $text-color;
+  font-size: 16px;
+  line-height: 26px;
+  font-family: $font-primary;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $text-dark;
+  font-family: $font-primary;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+  font-weight: 600;
+}
+
+h1,
+.h1 {
+  font-size: 50px;
+
+  @include mobile {
+    font-size: 36px;
+  }
+}
+
+h2,
+.h2 {
+  font-size: 42px;
+
+  @include mobile {
+    font-size: 32px;
+  }
+}
+
+h3,
+.h3 {
+  font-size: 32px;
+
+  @include mobile {
+    font-size: 28px;
+  }
+}
+
+h4,
+.h4 {
+  font-size: 26px;
+}
+
+h5,
+.h5 {
+  font-size: 22px;
+}
+
+h6,
+.h6 {
+  font-size: 18px;
+}
+
+
+.display-3 {
+  font-size: 50px;
+  font-weight: 800;
+
+  @include mobile {
+    font-size: 36px;
+    font-weight: 600;
+  }
+}
--- a/themes/godocs-4/assets/scss/style.scss
+++ b/themes/godocs-4/assets/scss/style.scss
@@ -0,0 +1,30 @@
+// site variables
+{{ with site.Params.variables }}
+$color-primary: {{.color_primary}};
+$text-color: {{.text_color}};
+$text-dark: {{.text_dark}};
+$text-light: {{.text_light}};
+$body-bg: {{.body_color}};
+$border-color: {{.border_color}};
+$black: {{.black}};
+$white: {{.white}};
+$light: {{.light}};
+
+$font-size: {{.font_size | default "16px"}}; 
+$font-primary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_primary | default "Lato") "+" " "}}', {{.font_primary_type | default "sans-serif"}};
+$font-secondary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_secondary | default "Lato") "+" " "}}', {{.font_secondary_type | default "sans-serif"}};
+$font-icon: '{{.font_icon | default "Font Awesome 5 Free"}}';
+{{ end }}
+
+@import 'templates/bootstrap';
+@import 'mixins';
+@import 'typography';
+@import 'buttons';
+@import 'common';
+@import 'templates/navigation.scss';
+@import 'templates/main.scss';
+@import 'templates/search-modal';
+@import 'gallery';
+@import 'tabs';
+@import 'notice';
+@import 'collapse';
--- a/themes/godocs-4/assets/scss/templates/_bootstrap.scss
+++ b/themes/godocs-4/assets/scss/templates/_bootstrap.scss
@@ -0,0 +1,53 @@
+// Bootstrap 5.3.0
+
+@import "../bootstrap/mixins/banner";
+@include bsBanner("");
+
+// scss-docs-start import-stack
+// Configuration
+@import "../bootstrap/functions";
+@import "../bootstrap/variables";
+@import "../bootstrap/variables-dark";
+@import "../bootstrap/maps";
+@import "../bootstrap/mixins";
+@import "../bootstrap/utilities";
+
+// Layout & components
+@import "../bootstrap/root";
+@import "../bootstrap/reboot";
+@import "../bootstrap/type";
+@import "../bootstrap/images";
+@import "../bootstrap/containers";
+@import "../bootstrap/grid";
+@import "../bootstrap/tables";
+@import "../bootstrap/forms";
+@import "../bootstrap/buttons";
+@import "../bootstrap/transitions";
+@import "../bootstrap/dropdown";
+// @import "../bootstrap/button-group";
+@import "../bootstrap/nav";
+@import "../bootstrap/navbar";
+@import "../bootstrap/card";
+@import "../bootstrap/accordion";
+@import "../bootstrap/breadcrumb";
+@import "../bootstrap/pagination";
+// @import "../bootstrap/badge";
+// @import "../bootstrap/alert";
+// @import "../bootstrap/progress";
+// @import "../bootstrap/list-group";
+// @import "../bootstrap/close";
+// @import "../bootstrap/toasts";
+@import "../bootstrap/modal";
+// @import "../bootstrap/tooltip";
+// @import "../bootstrap/popover";
+// @import "../bootstrap/carousel";
+// @import "../bootstrap/spinners";
+// @import "../bootstrap/offcanvas";
+// @import "../bootstrap/placeholders";
+
+// Helpers
+@import "../bootstrap/helpers";
+
+// Utilities
+@import "../bootstrap/utilities/api";
+// scss-docs-end import-stack
--- a/themes/godocs-4/assets/scss/templates/_main.scss
+++ b/themes/godocs-4/assets/scss/templates/_main.scss
@@ -0,0 +1,633 @@
+.card {
+  @extend .shadow;
+  @extend .rounded;
+  transition: .2s ease;
+  border: 0;
+
+  &-lg {
+    .card-body {
+      padding: 35px;
+    }
+  }
+
+  &-icon {
+    background: $color-primary;
+    color: $white;
+    padding: 10px 0;
+    width: 53px;
+    display: inline-block;
+    text-align: center;
+    font-size: 22px;
+    @extend .rounded;
+  }
+
+  &-text {
+    margin-bottom: 0;
+  }
+
+  &-title {
+    font-weight: 700;
+  }
+
+  &-body {
+    padding: 25px;
+  }
+
+  &:hover {
+    box-shadow: 0px 15px 60px rgba(62, 62, 62, 0.2) !important;
+  }
+}
+
+.social-icons {
+  margin-bottom: 0;
+
+  a {
+    display: block;
+    height: 42px;
+    width: 42px;
+    line-height: 42px;
+    text-align: center;
+    color: $white;
+    background: $color-primary;
+    border-radius: 6px;
+
+    &:hover {
+      background: darken($color: $color-primary, $amount: 10) !important;
+    }
+  }
+}
+
+.footer-menu {
+  margin-bottom: 0;
+
+  a {
+    display: block;
+    padding: 10px;
+    color: $text-color;
+    transition: .2s ease;
+    font-weight: 500;
+
+    &:hover {
+      color: $color-primary;
+    }
+  }
+}
+
+/* sidenav */
+.sidenav {
+  border-right: 1px solid $border-color;
+  padding: 0 20px 0 10px;
+  position: sticky;
+  top: 80px;
+
+  ul {
+    padding-left: 10px;
+  }
+
+  &>li {
+    a {
+      padding: 10px 0;
+      color: $text-dark;
+      display: block;
+      font-size: 18px;
+      font-weight: 500;
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  .sidelist {
+    ul {
+      display: none;
+    }
+  }
+
+  .parent {
+    &>a {
+      color: $color-primary !important;
+      position: relative;
+      margin-left: 10px;
+
+      &::before {
+        position: absolute;
+        content: "";
+        left: -10px;
+        top: 25%;
+        height: 50%;
+        width: 1px;
+        background: $color-primary;
+      }
+    }
+
+    ul {
+      display: block;
+      margin-bottom: 10px;
+
+      a {
+        padding: 5px 0;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba($text-dark, 0.8);
+      }
+
+      li.active>a {
+        margin-left: 10px;
+
+        &::before {
+          height: 5px;
+          width: 5px;
+          border-radius: 50%;
+          display: block;
+          top: 13px;
+        }
+      }
+    }
+  }
+}
+
+/* /sidenav */
+
+.sidelist {
+  display: none;
+
+  &.parent {
+    display: block;
+    border-bottom: 0 !important;
+
+    .sidelist {
+      display: block;
+    }
+  }
+}
+
+/* /sidenav */
+
+.pagination {
+  margin-top: 50px;
+  justify-content: space-between;
+
+  a {
+    color: $color-primary;
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  svg {
+    height: 28px;
+    font-size: 15px;
+  }
+}
+
+// code-tab
+.code-tabs {
+  border: 1px solid $border-color;
+  overflow: hidden;
+  margin-bottom: 20px;
+
+  .nav-tabs {
+    margin-bottom: 0;
+
+    .nav-item {
+      padding-left: 0;
+      border-right: 1px solid $border-color;
+
+      .nav-link {
+        text-decoration: none;
+        font-weight: 500;
+        border: 0;
+      }
+
+      &::before {
+        display: none;
+      }
+
+      &.active {
+        background: $color-primary;
+
+        .nav-link {
+          color: $white;
+        }
+      }
+    }
+  }
+
+  .tab-content {
+    padding: 20px 15px;
+  }
+}
+
+// copy to clipboard
+
+pre {
+  position: relative;
+
+  .copy-to-clipboard {
+    background: $color-primary;
+    color: $white;
+    cursor: pointer;
+    padding: 4px 5px;
+    line-height: 1;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 4px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+}
+
+:not(pre)>code+span.copy-to-clipboard {
+  display: none;
+}
+
+// autocomplete
+.autocomplete-suggestions {
+  border: 0;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0px 50px 60px rgba(62, 62, 62, 0.102) !important;
+  background: $white;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+
+    &-track {
+      background: $light;
+    }
+
+    &-thumb {
+      background: $border-color;
+    }
+  }
+
+  .autocomplete-suggestion {
+    transition: .2s ease;
+    padding: 10px;
+    font-weight: 500;
+
+    &.selected {
+      background: $color-primary;
+    }
+  }
+}
+
+.search-item {
+  a {
+    color: $text-dark;
+    display: block;
+
+    &:hover {
+      color: $color-primary;
+    }
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.form-group {
+  label {
+    font-size: 15px;
+    font-weight: 500;
+  }
+
+  .form-control {
+    font-size: 16px;
+    height: 40px;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid $border-color;
+    border-radius: 0;
+    padding: 10px 0;
+    color: $text-dark;
+
+    &::placeholder {
+      font-size: 16px;
+      color: $text-light;
+    }
+
+    &:focus {
+      outline: 0;
+      border-color: $color-primary;
+      box-shadow: none;
+    }
+  }
+
+  .form-select {
+    font-size: 16px;
+    color: rgba($text-dark, .8);
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(34,34,34,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-position: right center;
+
+    &:focus {
+      outline: 0;
+      border-color: $color-primary;
+      box-shadow: none;
+    }
+
+    option:checked {
+      font-size: 36px !important;
+    }
+  }
+
+  textarea.form-control {
+    height: 100px;
+    resize: none;
+  }
+}
+
+.form-control {
+  border: 1px solid $border-color;
+  border-radius: 6px;
+
+  &:focus {
+    box-shadow: none !important;
+    outline: 0;
+    border-color: $color-primary;
+  }
+}
+
+textarea.form-control {
+  height: 100px;
+}
+
+.badge {
+  margin-bottom: 20px;
+  font-weight: 500;
+  font-size: 15px;
+  padding: 5px 10px;
+  width: fit-content;
+  border-radius: 4px;
+
+  &.added {
+    background: #3778FF;
+    color: $white;
+  }
+
+  &.fixed {
+    background: #F54773;
+    color: $white;
+  }
+
+  &.changed {
+    background: #3AAA55;
+    color: $white;
+  }
+
+  &.depricated {
+    background: #343434;
+    color: $white;
+  }
+
+  &.removed {
+    background: #3bbfe4;
+    color: $white;
+  }
+
+  &.security {
+    background: #F53535;
+    color: $white;
+  }
+
+  &.unreleased {
+    background: #A037FF;
+    color: $white;
+  }
+}
+
+.collapse-wrapper {
+  padding: 5px 15px;
+
+  .collapse-head {
+    text-decoration: none;
+    color: $text-color;
+    font-size: 18px;
+    font-weight: 500;
+    align-items: center;
+  }
+}
+
+:not(.highlight) pre {
+  background: $light;
+}
+
+// content style
+.content {
+  span[style="color:#585b70;font-style:italic"] {
+    color: #7f818c !important;
+  }
+
+  &>img {
+    border-radius: 5px;
+  }
+
+  * {
+  //  word-break: break-word;
+  //  overflow-wrap: break-word;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  a {
+    text-decoration: underline;
+    color: $color-primary;
+  }
+
+  ol,
+  ul {
+    padding-left: 20px;
+
+    li {
+      margin-bottom: 10px;
+    }
+  }
+
+  ul {
+    padding-left: 0;
+    margin-bottom: 20px;
+
+    li {
+      padding-left: 20px;
+      position: relative;
+
+      &::before {
+        position: absolute;
+        content: '';
+        height: 8px;
+        width: 8px;
+        border-radius: 50%;
+        background: $color-primary;
+        left: 3px;
+        top: 8px;
+      }
+    }
+
+  }
+
+  table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1rem;
+    border: 1px solid #EEEEEE;
+    border-radius: 5px;
+    border-spacing: 0;
+    border-collapse: separate;
+    overflow: hidden;
+  }
+
+  table td,
+  table th {
+    padding: .75rem;
+    vertical-align: top;
+    margin-bottom: 0;
+  }
+
+  tr:not(:last-child) {
+    border-bottom: 1px solid #EEEEEE;
+  }
+
+  th {
+    font-weight: 500;
+  }
+
+  thead {
+    background: $light;
+    margin-bottom: 0;
+
+    tr {
+      border-bottom: 1px solid #EEEEEE;
+    }
+  }
+
+  tbody {
+    background: #fff;
+    margin-bottom: 0;
+  }
+
+  blockquote {
+    padding: 20px 30px;
+    border-left: 2px solid $color-primary;
+    margin: 40px 0;
+    font-weight: bold;
+    background: $light;
+
+    p {
+      color: rgba($text-dark, 0.8);
+      font-size: 18px !important;
+      margin-bottom: 0 !important;
+      line-height: 1.7;
+    }
+  }
+
+  pre {
+    display: block;
+    padding: 15px 20px !important;
+    margin: 10px 0 30px 0 !important;
+    border-radius: 6px;
+  }
+
+  code {
+    margin-bottom: 0 !important;
+    font-size: 100%;
+  }
+
+  iframe {
+    display: block;
+    border-radius: 5px;
+    margin-bottom: 30px;
+  }
+}
+
+.accordion-body {
+  color: $black;
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.tab-nav-button {
+  border-radius: 6px;
+}
+
+.content .tab-nav-button {
+  background-color: #fff;
+}
+
+[data-tab-item] {
+  padding-top: 10px;
+}
+
+blockquote,
+.notices {
+  border-radius: 4px;
+}
+
+.list-styled {
+  padding-left: 0;
+
+  li {
+    padding: 5px 0 5px 20px;
+    position: relative;
+
+    &::before {
+      position: absolute;
+      content: '';
+      height: 8px;
+      width: 8px;
+      border-radius: 50%;
+      background: $color-primary;
+      left: 3px;
+      top: 13px;
+      padding: 2px;
+      border: 2px solid $white;
+      box-shadow: 0 0 0 2px $color-primary;
+    }
+  }
+}
+
+// feedback
+.feedback {
+  padding-top: 50px;
+  margin-top: 50px;
+  border-top: 1px solid $border-color;
+
+  &-btn {
+    display: inline-block;
+    height: 45px;
+    width: 45px;
+    line-height: 45px;
+    text-align: center;
+    font-size: 25px;
+    border-radius: 6px;
+    border: 0;
+
+    &.positive {
+      color: $white;
+      background-color: #00bec4;
+      margin-right: 10px;
+
+      &.collapsed {
+        color: #00bec4;
+        background-color: #00bec427;
+      }
+    }
+
+    &.negative {
+      color: $white;
+      background-color: #f9756e;
+
+      &.collapsed {
+        color: #f9756e;
+        background-color: #f9756e2a;
+      }
+    }
+  }
+}
--- a/themes/godocs-4/assets/scss/templates/_navigation.scss
+++ b/themes/godocs-4/assets/scss/templates/_navigation.scss
@@ -0,0 +1,238 @@
+.navigation {
+  transition: 0.2s ease;
+
+  &.home-nav {
+    transition: unset;
+    top: 0 !important;
+
+    &.nav-bg-home {
+      @include desktop {
+        padding-bottom: 60px;
+        top: -60px !important;
+      }
+    }
+  }
+
+  .container {
+    padding: 0;
+
+    @include tablet {
+      padding: 0 10px;
+    }
+  }
+
+  .navbar {
+    padding: 15px 0;
+  }
+
+  &.nav-bg {
+    background: $white;
+    box-shadow: 0px 5px 20px rgba(62, 62, 62, 0.08) !important;
+
+    @include desktop {
+      top: -60px;
+    }
+
+    @include mobile {
+      top: -50px;
+    }
+
+    @include mobile-xs {
+      top: -45px;
+    }
+  }
+
+  .form-inline {
+    width: 30%;
+
+    input {
+      width: 100%;
+      box-shadow: 0px 5px 10px rgba(62, 62, 62, 0.05) !important;
+    }
+  }
+
+  @include desktop {
+    .form-inline {
+      width: 100%;
+
+      .form-control {
+        box-shadow: none !important;
+        border: 1px solid $border-color;
+
+        &:focus {
+          border: 0;
+          box-shadow: 0px 5px 10px rgba(62, 62, 62, 0.05) !important;
+        }
+      }
+    }
+  }
+}
+
+.language-selector {
+  border: 0;
+  margin-right: 10px;
+}
+
+header .search-wrapper {
+  display: none;
+}
+
+.search-wrapper {
+  position: relative;
+  cursor: text;
+
+  .search-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 15px;
+  }
+
+  .form-control {
+    height: 54px;
+    border: 1px solid $border-color;
+    padding-left: 40px !important;
+    border-radius: 5px;
+    width: 320px;
+    @extend .shadow;
+
+    @include mobile {
+      width: 250px;
+    }
+
+    &-sm {
+      height: 45px;
+      width: 220px;
+    }
+
+    &::placeholder {
+      color: $text-light;
+      font-size: 15px;
+    }
+  }
+
+  .search-button {
+    border: 1px solid $border-color;
+    color: $text-light;
+    background-color: transparent;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: 4px;
+    cursor: text;
+  }
+}
+
+header.search-active.home-nav {
+  .search-wrapper {
+    display: block !important;
+  }
+
+  @include desktop {
+    .logo-wrapper {
+      display: none;
+    }
+
+    .mobile-view {
+      display: none !important;
+    }
+  }
+}
+
+@include desktop {
+
+  #banner .search-wrapper {
+    max-width: 300px;
+    margin: auto;
+    display: block;
+  }
+}
+
+.logo-wrapper {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  flex-wrap: nowrap;
+
+  img {
+    height: 28px;
+    width: auto;
+  }
+
+  .site-logo {
+    white-space: nowrap;
+
+    .site {
+      @include tablet {
+        display: none;
+      }
+    }
+  }
+
+  .logo-devider {
+    height: 30px;
+    width: 3px;
+    background-color: $border-color;
+    margin: 0 10px;
+  }
+
+  .docs-logo {
+    margin-top: 2px;
+  }
+}
+
+.search-sticky {
+  position: fixed !important;
+  top: 10px;
+  z-index: 9999;
+  width: 28%;
+  left: 37%;
+
+  @include desktop {
+    width: calc(100% - 20px);
+    max-width: 700px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @include tablet {
+    max-width: 520px;
+  }
+
+  .form-control {
+    height: 50px !important;
+    box-shadow: 0px 5px 10px rgba(62, 62, 62, 0.05) !important;
+
+    @include desktop {
+      box-shadow: none !important;
+      border: 1px solid $border-color;
+
+      &:focus {
+        border: 0;
+      }
+    }
+
+    @include mobile {
+      height: 40px !important;
+    }
+  }
+
+  .btn-primary {
+    display: none;
+  }
+
+  .d-none {
+    display: block !important;
+  }
+}
+
+.mobile-view {
+  @include mobile {
+    zoom: 0.7;
+  }
+
+  @include mobile-xs {
+    zoom: 0.6;
+  }
+}
--- a/themes/godocs-4/assets/scss/templates/search-modal.scss
+++ b/themes/godocs-4/assets/scss/templates/search-modal.scss
@@ -0,0 +1,106 @@
+// search-modal
+.search-modal-dialog {
+  margin-top: 150px;
+  max-width: 600px;
+  @include desktop {
+    margin-top: 80px;
+  }
+}
+.search-modal {
+  .input-group-text,
+  .search-form-control {
+    border: 2px solid rgba($color-primary, 0.5);
+  }
+  .search-form-control {
+    padding-right: 15px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+  .modal-body {
+    max-height: calc(100vh - 350px);
+    padding: 1rem;
+    overflow-y: auto;
+    background-color: #f5f6f7;
+    box-shadow: inset 0px 2px 18px #ddd;
+    border-bottom-left-radius: calc(0.3rem - 1px);
+    border-bottom-right-radius: calc(0.3rem - 1px);
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      &-track {
+        background: $white;
+      }
+      &-thumb {
+        background: #c7c7c7;
+      }
+    }
+  }
+}
+.search-result-item {
+  &:first-child {
+    .section:not(:empty) {
+      margin-top: -15px;
+    }
+  }
+  &:not(:last-child) a {
+    margin-bottom: -1px;
+  }
+  > .section {
+    padding: 0 0.75rem;
+    display: inline-block;
+    margin-bottom: 10px;
+    margin-top: 25px;
+    font-size: 20px;
+    font-weight: 600;
+    &:empty {
+      display: none;
+    }
+  }
+  .block {
+    display: block;
+    padding: 0.65rem 1rem;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    background-color: #fff;
+    transition: 0.1s;
+    p {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      font-weight: 500;
+      mark:not(:first-child) {
+        background-color: transparent;
+      }
+      mark {
+        color: $color-primary;
+        background-color: rgba($color-primary, 0.05);
+      }
+      &:empty {
+        display: none;
+      }
+    }
+    &:focus,
+    &:hover {
+      background-color: rgba($color-primary, 0.8);
+      * {
+        color: white !important;
+      }
+      mark {
+        color: $color-primary !important;
+        background-color: $white;
+      }
+    }
+  }
+}
+#search-result-body {
+  &:empty {
+    &::after {
+      content: "No result to show!";
+      display: block;
+      text-align: center;
+      margin: 1.5rem 0;
+      opacity: 0.5;
+    }
+  }
+}
--- a/themes/godocs-4/layouts/404.html
+++ b/themes/godocs-4/layouts/404.html
--- a/themes/godocs-4/layouts/_default/baseof.html
+++ b/themes/godocs-4/layouts/_default/baseof.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html
+  lang="{{ site.LanguageCode | default `en-US` }}"
+  itemscope
+  itemtype="http://schema.org/WebPage">
+  <head>
+    <!-- head (don't cache it) -->
+    {{ partial "essentials/head.html" . }}
+    {{ partial "page-transition.html" . }}
+		
+    <!-- cache partial only in production -->
+    {{ if hugo.IsProduction }}
+      {{ partialCached "essentials/style.html" . }}
+    {{ else }}
+      {{ partial "essentials/style.html" . }}
+    {{ end }}
+  </head>
+
+  <body>
+    <!-- cache partial only in production -->
+    {{ if hugo.IsProduction }}
+      {{ partialCached "preloader.html" . }}
+      {{ partialCached "gtm-noscript.html" . }}
+    {{ else }}
+      {{ partial "preloader.html" . }}
+    {{ end }}
+
+
+    <!-- header (don't cache it) -->
+    {{ partial "essentials/header.html" . }}
+
+
+    <main>
+      {{ block "main" . }}{{ end }}
+    </main>
+
+    <!-- cache partial only in production -->
+    {{ if hugo.IsProduction }}
+      {{ partialCached "essentials/footer.html" . }}
+      {{ partialCached "essentials/script.html" . }}
+    {{ else }}
+      {{ partial "essentials/footer.html" . }}
+      {{ partial "essentials/script.html" . }}
+    {{ end }}
+  </body>
+</html>
--- a/themes/godocs-4/layouts/_default/changelog.html
+++ b/themes/godocs-4/layouts/_default/changelog.html
@@ -0,0 +1,17 @@
+{{ define "main" }}
+
+<section class="section">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-10 mx-auto">
+        <div class="p-5 shadow rounded content">
+          <h1 class="mb-4 fw-bold">{{ .Title }}</h1>
+          <p>{{.Params.Description | markdownify}}</p>
+          <div class="mt-5">{{ .Content }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ end }}
--- a/themes/godocs-4/layouts/_default/contact.html
+++ b/themes/godocs-4/layouts/_default/contact.html
@@ -0,0 +1,46 @@
+{{ define "main" }}
+
+<section class="section">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8">
+        <div class="p-4 p-sm-5 shadow rounded content">
+          <h2 class="section-title">{{ .Title }}</h2>
+          <form method="POST" class="row gy-4" action="{{ .Site.Params.contact_form_action }}">
+            <div class="form-group col-md-6">
+              <label for="fname">{{ i18n "first_name" }}</label>
+              <input type="text" class="form-control" id="fname" name="fname" placeholder="Your First Name" required>
+            </div>
+            <div class="form-group col-md-6">
+              <label for="lname">{{ i18n "last_name" }}</label>
+              <input type="text" class="form-control" id="lname" name="lname" placeholder="Your Last Name">
+            </div>
+            <div class="form-group col-12">
+              <label for="email">{{ i18n "email" }}</label>
+              <input type="email" class="form-control" id="email" name="email" placeholder="Your Email Address"
+                required>
+            </div>
+            <div class="form-group col-12">
+              <label for="reason">{{ i18n "contact_reason" }}</label>
+              <select id="reason" class="form-select rounded-0 px-0" name="reason" required>
+                <option selected disabled>Choose Your Reason</option>
+                <option value="business">Business</option>
+                <option value="ticket">Ticket</option>
+                <option value="project">Project</option>
+              </select>
+            </div>
+            <div class="form-group col-12">
+              <label for="message">{{ i18n "write_message" }}</label>
+              <textarea name="message" id="message" class="form-control" placeholder="Your Text here ..."></textarea>
+            </div>
+            <div class="col-12">
+              <button type="submit" class="btn btn-primary">{{ i18n "send" }}</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ end }}
--- a/themes/godocs-4/layouts/_default/index.json
+++ b/themes/godocs-4/layouts/_default/index.json
@@ -0,0 +1,36 @@
+{{- $len := sub (len (.Pages.GroupBy "Section")) 1 -}}
+[{{- range $item, $el := .Pages.GroupBy "Section" -}}
+{{- range $i, $e := .Pages -}}
+{{- if and (not .Params.ignoreSearch) (ne $e.Type "json") -}}
+  {
+    "section": "",
+    "url": "{{ $e.Permalink }}",
+    "title": "{{ with $e.Params.bannertext }}{{htmlEscape .}}{{else}}{{htmlEscape $e.Title}}{{end}}",
+    "description": "{{ htmlEscape .Description}}",
+    "searchKeyword": "{{ htmlEscape .Params.searchKeyword}}",
+    "content": {{$e.Plain | jsonify}}
+  },
+{{- end -}}
+
+{{- if .Section -}}
+{{- $section := (where site.Pages "Section" .Section) | intersect (where site.Pages ".Title" "!=" .Title) -}}
+{{- $sectionLen := len (where site.Pages "Section" .Section) -}}
+{{- $sectionLenTotal := sub $sectionLen 2 -}}
+
+{{- range $index, $page := $section -}}
+{{- if and (not .Params.ignoreSearch) (ne $page.Type "json") -}}
+  {
+    "section": "{{$page.Section | humanize}}",
+    "url": "{{ $page.Permalink }}",
+    "title": "{{ with $page.Params.bannertext }}{{htmlEscape .}}{{else}}{{htmlEscape $page.Title}}{{end}}",
+    "description": "{{ htmlEscape .Description}}",
+    "searchKeyword": "{{ htmlEscape .Params.searchKeyword}}",
+    "content": {{$page.Plain | jsonify}}
+  }{{- if eq $item $len -}}{{- if ne $index $sectionLenTotal -}},{{- end -}}{{- else -}},{{- end -}}
+{{- end -}}
+{{- end -}}
+
+{{- end -}}
+
+{{- end -}}
+{{- end -}}]
--- a/themes/godocs-4/layouts/_default/list.html
+++ b/themes/godocs-4/layouts/_default/list.html
@@ -0,0 +1,5 @@
+{{ define "main" }}
+
+{{ partial "default.html" . }}
+
+{{ end }}
--- a/themes/godocs-4/layouts/_default/search.html
+++ b/themes/godocs-4/layouts/_default/search.html
@@ -0,0 +1,29 @@
+{{ define "main" }}
+
+<section class="section">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8">
+        <h2 class="mb-5 fw-medium">Search result for
+          <span class="text-primary">
+            <script>
+              var str = (window.location.search).substr(3);
+              var result = str.replaceAll("+", " ");
+              document.write(decodeURI(result));
+            </script>
+          </span>
+        </h2>
+        <div class="p-5 shadow rounded">
+          <div id="search-results"></div>
+          <script id="search-result-template" type="text/x-js-template">
+            <div class="py-4 search-item" id="summary-${key}">
+            <a class="h4 mb-0" href="${link}">${title}</a>
+          </div>
+        </script>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ end }}
--- a/themes/godocs-4/layouts/_default/single.html
+++ b/themes/godocs-4/layouts/_default/single.html
@@ -0,0 +1,5 @@
+{{ define "main" }}
+
+{{ partial "default.html" . }}
+
+{{ end }}
--- a/themes/godocs-4/layouts/index.html
+++ b/themes/godocs-4/layouts/index.html
@@ -0,0 +1,93 @@
+{{ define "main" }}
+
+<section class="section pb-0">
+  <div class="container">
+    <div class="row justify-content-between align-items-center">
+      <div class="col-xl-6 col-lg-8 text-center text-lg-start">
+        {{ with .Params.banner }}
+        <h1 class="mb-4">{{ .title | markdownify }}</h1>
+        <p class="mb-4">{{ .subtitle | markdownify }}</p>
+        {{ end }}
+        <div class="d-flex flex-wrap justify-content-center justify-content-lg-start">
+          {{ with .Params.banner_button }}
+          <a class="btn btn-primary ms-2 me-2 me-lg-4 mt-2" href="{{.link | safeURL}}">{{.label}}</a>
+          {{ end }}
+
+          <form class="search-wrapper mt-2 mx-2 mx-lg-0" name="search-form" data-bs-toggle="modal" data-bs-target="#searchModal">
+            <i class="search-icon fas fa-search"></i>
+            <input class="form-control px-4 text-dark" placeholder="{{ i18n `search_placeholder`}}" readonly>
+            <button type="button" class="search-button" data-search-toggler>{{ i18n "search" }}</button>
+          </form>
+        </div>
+      </div>
+      <div class="col-lg-4 d-lg-block d-none">
+        {{ partial "image.html" (dict "Src" .Params.banner.image "Alt" "illustration") }}
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- topics -->
+<section class="section pb-0">
+  <div class="container">
+    <h2 class="section-title">{{ i18n `topics`}}</h2>
+    <div data-masonry='{"percentPosition": true }' class="row">
+      {{ range (where .Pages "Type" "docs") }}
+      <div class="col-lg-4 col-sm-6 mb-4">
+        <div class="card match-height-">
+          <div class="card-body">
+            <h3 class="card-title h4 mb-4"><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
+            <ul class="list-styled text-start mb-4">
+              {{ range .Data.Pages }}
+              <li><a href="{{.Permalink}}">{{.Title}}</a></li>
+              {{end}}
+            </ul>
+            <a href="{{ .Permalink }}" class="btn btn-sm btn-outline-primary">{{ i18n "details" }}</a>
+          </div>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+<!-- /topics -->
+
+<!-- faq -->
+{{ with .GetPage "/faq" }}
+<section class="section pb-0">
+  <div class="container">
+    <h2 class="section-title">{{ .Title }}</h2>
+    <div data-masonry='{"percentPosition": true }' class="row">
+      {{ .Content }}
+    </div>
+  </div>
+</section>
+{{ end }}
+<!-- /faq -->
+
+<!-- call to action -->
+{{ if .Params.call_to_action.enable }}
+{{ with .Params.call_to_action }}
+<section class="section">
+  <div class="container">
+    <div class="row align-items-center">
+      <div class="col-lg-4 text-center d-lg-block d-none">
+        {{ partial "image.html" (dict "Src" .image "Alt" "icon") }}
+      </div>
+      <div class="col-lg-8 text-lg-start text-center">
+        <h2 class="mb-3 fw-bold">{{ .title | markdownify }}</h2>
+        <p>{{ .content | markdownify }}</p>
+        {{ if .button.enable }}
+        {{ with .button }}
+        <a href="{{ .link | absLangURL }}" class="btn btn-primary">{{ .label }}</a>
+        {{ end }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</section>
+{{ end }}
+{{ end }}
+<!-- /call to action -->
+
+{{ end }}
--- a/themes/godocs-4/layouts/partials/components/feedback.html
+++ b/themes/godocs-4/layouts/partials/components/feedback.html
@@ -0,0 +1,43 @@
+<!-- feedback -->
+{{ if site.Params.feedback }}
+{{ with site.Params.feedback }}
+<div class="feedback row" id="feedback">
+  <div class="col-md-8 col-lg-9">
+    <h4 class="fw-bold">{{ .title | markdownify }}</h4>
+    <p>{{ .content | markdownify }}</p>
+  </div>
+  <div class="col-md-4 col-lg-3 mt-2 mb-4 mb-md-0 text-md-end">
+    <button class="feedback-btn collapsed positive" type="button" data-bs-toggle="collapse" data-bs-target="#positive"
+      aria-expanded="true" aria-controls="positive">
+      <i class="far fa-thumbs-up"></i>
+    </button>
+    <button class="feedback-btn collapsed negative" type="button" data-bs-toggle="collapse" data-bs-target="#negative"
+      aria-expanded="false" aria-controls="negative">
+      <i class="far fa-thumbs-down"></i>
+    </button>
+  </div>
+  <div class="col-12">
+    <div id="positive" class="collapse" data-bs-parent="#feedback">
+      <form name="feedback" method="POST" action="{{ site.Params.feedback_form_action }}">
+        <input type="text" name="feedback" id="feedback" value="Positive" hidden>
+        <input type="text" name="URL" id="URL" value="{{.Permalink}}" hidden>
+        <textarea name="comments" id="comments" class="form-control mb-4"
+          placeholder="{{ .positive_placeholder }}" required></textarea>
+        <button type="submit" class="btn btn-primary">{{ i18n "send_feedback" }}</button>
+      </form>
+    </div>
+
+    <div id="negative" class="collapse" data-bs-parent="#feedback">
+      <form name="feedback" method="POST" action="{{ site.Params.feedback_form_action }}">
+        <input type="text" name="feedback" id="feedback" value="Negative" hidden>
+        <input type="text" name="URL" id="URL" value="{{.Permalink}}" hidden>
+        <textarea name="comments" id="comments" class="form-control mb-4"
+          placeholder="{{ .negative_placeholder }}" required></textarea>
+        <button type="submit" class="btn btn-primary">{{ i18n "send_feedback" }}</button>
+      </form>
+    </div>
+  </div>
+</div>
+{{ end }}
+{{ end }}
+<!-- /feedback -->
--- a/themes/godocs-4/layouts/partials/components/search-modal.html
+++ b/themes/godocs-4/layouts/partials/components/search-modal.html
@@ -0,0 +1,93 @@
+<div class="modal search-modal" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog search-modal-dialog">
+    <div class="modal-content border-0"><div class="modal-header border-0" style="padding:1rem"><div class="input-group border-0">
+      <span class="input-group-text bg-transparent text-dark border-end-0" id="Search">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>
+      </span>
+      <input type="text" id="searchInput" class="form-control search-form-control shadow-none text-dark border-start-0 ps-0 ms-0 border-end-0" placeholder="{{i18n `search_placeholder`}}" aria-label="Search" aria-describedby="Search">
+      <span class="input-group-text bg-transparent text-muted border-start-0" style="font-size:14px;">
+        <span class="border border-muted rounded-1 px-1" bs-dismiss="modal" aria-label="Close">ESC</span>
+      </span>
+    </div></div>
+    <div class="modal-body">
+      <div id="search-result-body"></div>
+    </div></div>
+  </div>
+</div>
+
+<script>
+  const searchModal = document.getElementById('searchModal');
+  const searchInput = document.getElementById('searchInput');
+  const searchResult = document.getElementById("search-result-body");
+  searchModal.addEventListener('shown.bs.modal', () => {searchInput.focus()});
+  let jsonData = [];
+  let indexJSON = {{"index.json" | relURL}};
+
+  const loadJsonData = async () => {
+    try {
+      const res = await fetch(indexJSON);
+      jsonData = await res.json();
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  searchInput.addEventListener("keyup", (e) => {
+    const searchString = e.target.value.toLowerCase();
+
+    let filteredJSON = jsonData.reduce((prev, item) => [...new Set([...prev, item.section])], []).map((item) => {
+        let filteredItems = jsonData.filter((i) => i.section === item);
+        return {
+          section: item,
+          data: filteredItems,
+        };
+      });
+
+    let searchItem = filteredJSON.filter((item) => {
+      if (searchString === "" ) {
+        return "";
+      }
+      else if (item.data.find((el) => (el.title?.toLowerCase().includes(searchString)))) {
+        return item
+      }
+      else if (item.data.find((el) => (el.description?.toLowerCase().includes(searchString)))) {
+        return item
+      }
+      else if (item.data.find((el) => (el.searchKeyword?.toLowerCase().includes(searchString)))) {
+        return item
+      }
+      else if (item.data.find((el) => (el.content?.toLowerCase().includes(searchString)))) {
+        return item
+      }
+    });
+
+    displayResult(searchItem, searchString);
+  });
+
+  const displayResult = (searchItems, searchString) => {
+    const htmlString = searchItems.map((item) => {
+      const contentValue = item.data.filter((d) => d.content?.toLowerCase().includes(searchString)).map((innerItem) =>  {
+        const position = innerItem.content?.toLowerCase().indexOf(searchString.toLowerCase());
+        let matches = innerItem.content?.substring(position, searchString.length + position);
+        let matchesAfter = innerItem.content?.substring(searchString.length + position, searchString.length + position + 100);
+        const highlighted = innerItem.content?.replace(innerItem.content, '<mark>' + matches + '</mark>' + matchesAfter);
+        return highlighted;
+      });
+      
+      return`
+      <div class="search-result-item">
+        <p class="section">${item.section}</p>
+        ${item.data.filter((d) => 
+          d.title?.toLowerCase().includes(searchString) || 
+          d.description?.toLowerCase().includes(searchString) || 
+          d.searchKeyword?.toLowerCase().includes(searchString) || 
+          d.content?.toLowerCase().includes(searchString)).map((innerItem) => 
+            `<a class="block" href="${innerItem.url}"><p class="text-dark mb-0 lh-base">${innerItem.title}</p><span></span><p class="small text-muted mt-1 mb-0 lh-base">${contentValue}</p></a>`
+          ).join("")}
+      </div>`
+    }).join("");
+    searchResult.innerHTML = htmlString;
+  };
+  loadJsonData();
+
+</script>
--- a/themes/godocs-4/layouts/partials/default.html
+++ b/themes/godocs-4/layouts/partials/default.html
@@ -0,0 +1,118 @@
+{{ "<!-- details page -->" | safeHTML }}
+<section class="pt-5">
+  <div class="container shadow section-sm rounded">
+    <div class="row">
+      <div class="col-lg-3 col-md-4 d-none d-md-block">
+        <ul class="sidenav">
+          {{ $currentNode := . }}
+          {{range .Site.Home.Sections.ByWeight}}
+          <!-- not render any single page, like contact page. -->
+          {{ $numberOfMainPages := len .Pages }}
+          {{ if eq $numberOfMainPages 0 }}
+          {{ else }}
+          <!-- /not render any single page, like contact page. -->
+          {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode}}
+          {{ end }}
+          {{ end }}
+        </ul>
+      </div>
+      <div class="col-md-8">
+        <div class="px-lg-5 px-sm-4">
+          <h1 class="mb-4 fw-bold">{{ .Title }}</h1>
+          {{ if .Content }}
+          <div class="content">{{ partial "autotooltips.html" . }}</div>
+          {{ else }}
+          <ul class="list-styled text-start mb-4">
+            {{ range .Data.Pages }}
+            <li><a href="{{.Permalink}}">{{.Title}}</a></li>
+            {{end}}
+          </ul>
+          {{ end }}
+          <nav class="pagination">
+            <!-- Next prev page -->
+            {{- $currentNode := . -}}
+            {{- template "menu-nextprev" dict "menu" site.Home "currentnode" $currentNode -}}
+            {{- define "menu-nextprev" -}}
+              {{- $currentNode := .currentnode -}}
+              {{- if ne .menu.Params.hidden true -}}
+                {{- if hasPrefix $currentNode.Permalink .menu.Permalink -}}
+                  {{- $currentNode.Scratch.Set "NextPageOK" "OK" -}}
+                  {{- $currentNode.Scratch.Set "prevPage" ($currentNode.Scratch.Get "prevPageTmp") -}}
+                {{- else -}}
+                  {{- if eq ($currentNode.Scratch.Get "NextPageOK") "OK" -}}
+                    {{- $currentNode.Scratch.Set "NextPageOK" nil -}}
+                    {{- $currentNode.Scratch.Set "nextPage" .menu -}}
+                  {{- end -}}
+                {{- end -}}
+                {{- $currentNode.Scratch.Set "prevPageTmp" .menu -}}
+                {{- $currentNode.Scratch.Set "pages" .menu.Pages -}}
+                {{- if .menu.IsHome -}}
+                  {{- $currentNode.Scratch.Set "pages" .menu.Sections -}}
+                {{- else if .menu.Sections -}}
+                  {{- $currentNode.Scratch.Set "pages" (.menu.Pages | union .menu.Sections) -}}
+                {{- end -}}
+                {{- $pages := ($currentNode.Scratch.Get "pages") -}}
+    
+                {{- range $pages.ByWeight -}}
+                  {{- template "menu-nextprev" dict "menu" . "currentnode" $currentNode -}}
+                {{- end -}}
+              {{- end -}}
+            {{- end -}}
+            
+            {{- with ($.Scratch.Get "prevPage") -}}
+            {{- if .Title -}}
+            <a class="nav nav-prev" href="{{.RelPermalink }}"><i class="fas fa-chevron-left me-2"></i>
+              <span class="d-none d-sm-block">{{.Title}}</span> <span class="d-block d-sm-none">Prev</span>
+            </a>
+            {{- end -}}
+            {{- end -}}
+
+            {{- with ($.Scratch.Get "nextPage") -}}
+            {{- if .Title -}}
+            <a class="nav nav-next" href="{{.RelPermalink }}">
+              <span class="d-none d-sm-block">{{.Title}}</span> <span class="d-block d-sm-none">Next</span><i class="fas fa-chevron-right ms-2"></i>
+            </a>
+            {{- end -}}
+            {{- end -}}
+          </nav>
+          
+          {{ if .Params.Feedback }}
+          {{ partial "components/feedback.html" . }}
+          {{ end }}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+{{ "<!-- /details page -->" | safeHTML }}
+
+<!-- templates -->
+{{ define "section-tree-nav" }}
+{{ $showvisitedlinks := .showvisitedlinks }}
+{{ $currentNode := .currentnode }}
+{{with .sect}}
+{{safeHTML .Params.head}}
+{{ $fileUniqueID := "" }}
+{{ with .File }}{{ $fileUniqueID = .UniqueID }}{{ end }}
+{{ $currentNodeFileUniqueID := "" }}
+{{ with $currentNode.File }}{{ $currentNodeFileUniqueID = .UniqueID }}{{ end }}
+<li data-nav-id="{{.Permalink}}" title="{{.Title}}"
+  class="sidelist {{if .IsAncestor $currentNode }}parent{{end}} {{if eq $fileUniqueID $currentNodeFileUniqueID}}active parent{{end}}">
+  <a href="{{.Permalink}}">{{.Title }}</a>
+  {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
+  {{ if ne $numberOfPages 0 }}
+  <ul>
+    {{ $currentNode.Scratch.Set "pages" .Pages }}
+    {{ if .Sections}}
+    {{ $currentNode.Scratch.Set "pages" (.Pages | union .Sections) }}
+    {{end}}
+    {{ $pages := ($currentNode.Scratch.Get "pages") }}
+
+    {{ range $pages.ByWeight }}
+    {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode }}
+    {{end}}
+  </ul>
+</li>
+{{ end }}
+{{ end }}
+{{ end }}
--- a/themes/godocs-4/layouts/partials/essentials/footer.html
+++ b/themes/godocs-4/layouts/partials/essentials/footer.html
@@ -0,0 +1,34 @@
+<footer>
+  <div class="container">
+    <div class="row align-items-center border-bottom py-5">
+      <div class="col-lg-4">
+        <ul class="list-inline footer-menu text-center text-lg-start">
+          {{ range site.Menus.footer }}
+          <li class="list-inline-item"><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
+          {{ end }}
+        </ul>
+      </div>
+      <div class="col-lg-4 text-center mb-4 mb-lg-0">
+        <a href="{{ site.BaseURL | relLangURL }}">
+          <!-- {{ partial "logo.html" }} -->
+        </a>
+      </div>
+      <div class="col-lg-4">
+        <ul class="list-inline social-icons text-lg-end text-center">
+          {{ range site.Params.social }}
+          <li class="list-inline-item"><a href="{{ .link | safeURL }}"><i class="{{ .icon }}"></i></a></li>
+          {{ end }}
+        </ul>
+      </div>
+    </div>
+    <div class="py-4 text-center">
+      <small class="text-light">
+        {{ site.Params.copyright | markdownify }}<br>
+        {{ if site.Params.theme_copyright }}
+        Made with 💙 by
+        <a target="_blank" rel="noopener noreferrer" href="https://start-it.nl">StartIT</a>
+        {{ end }}
+      </small>
+    </div>
+  </div>
+</footer>
--- a/themes/godocs-4/layouts/partials/essentials/head.html
+++ b/themes/godocs-4/layouts/partials/essentials/head.html
@@ -0,0 +1,55 @@
+<meta charset="utf-8" />
+<title>{{ .Title | default site.Title }}</title>
+
+<!-- responsive meta -->
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
+
+<!-- theme meta -->
+<meta name="theme-name" content="godocs-hugo" />
+
+<!-- favicon -->
+{{ partialCached "favicon" . }}
+
+
+<!-- manifest -->
+{{ partialCached "manifest" . }}
+
+
+<!-- site verifications -->
+{{ partialCached "site-verifications.html" . }}
+
+
+<!-- opengraph and twitter card -->
+{{ partial "basic-seo.html" . }}
+
+
+<!-- custom script -->
+{{ partialCached "custom-script.html" . }}
+
+
+<!-- google analytics -->
+{{ template "_internal/google_analytics.html" . }}
+
+
+<!-- google tag manager -->
+{{ partialCached "gtm.html" . }}
+
+
+<!-- matomo analytics -->
+{{ partialCached "matomo-analytics.html" . }}
+
+
+<!--  Baidu analytics -->
+{{ partialCached "baidu-analytics.html" . }}
+
+
+<!-- Plausible Analytics -->
+<!-- {{ partialCached "plausible-analytics.html" . }} -->
+<script defer data-domain="kennisbank.start-it.nl" src="https://stats.start-it.nl/js/script.file-downloads.outbound-links.js"></script>
+
+<!-- Counter Analytics -->
+{{ partialCached "counter-analytics.html" . }}
+
+
+<!-- Crisp Chat -->
+{{ partialCached "crisp-chat.html" . }}
--- a/themes/godocs-4/layouts/partials/essentials/header.html
+++ b/themes/godocs-4/layouts/partials/essentials/header.html
@@ -0,0 +1,58 @@
+{{ "<!-- navigation -->" | safeHTML }}
+<header class="sticky-top navigation {{if .IsHome}}home-nav{{end}}">
+  <div class="container">
+    <!-- navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-transparent justify-content-between">
+      <div class="logo-wrapper order-1 mobile-view">
+        {{ if site.Params.site_logo }}
+        <a class="site-logo" target="_blank" href="{{site.Params.main_site_link | safeURL}}?ref=docs">
+          {{ partial "logo.html" }}
+        </a>
+        {{ end }}
+        <span class="logo-devider"></span>
+        <a class="docs-logo" href="{{ .Site.BaseURL | relLangURL }}">
+          {{ partial "image.html" (dict "Src" site.Params.docs_logo "Alt" (.Site.Title)) }}</a>
+      </div>
+
+      <form class="form-inline search-wrapper order-3 order-lg-2 {{if not .IsHome}}d-block mt-3{{end}}" data-bs-toggle="modal"
+        data-bs-target="#searchModal">
+        <i class="search-icon fas fa-search"></i>
+        <input class="form-control form-control-sm" placeholder="{{ i18n `search`}}" readonly>
+        <button type="button" class="search-button" style="font-size:12px" data-search-toggler>{{ i18n "search"
+          }}</button>
+      </form>
+
+      <div class="d-flex order-2 order-lg-3 mobile-view">
+        <!-- Language List -->
+        {{ if .IsTranslated }}
+        <select class="language-selector bg-transparent" onchange="location = this.value;">
+          {{ $siteLanguages := .Site.Languages}}
+          {{ $pageLang := .Page.Lang}}
+          {{ range .Page.AllTranslations }}
+          {{ $translation := .}}
+          {{ range $siteLanguages }}
+          {{ if eq $translation.Lang .Lang }}
+          {{ $selected := false }}
+          {{ if eq $pageLang .Lang}}
+          <option value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}</option>
+          {{ else }}
+          <option value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
+          {{ end }}
+          {{ end }}
+          {{ end }}
+          {{ end }}
+        </select>
+        {{ end }}
+        <!-- nav buttons -->
+        {{ range $i, $e:= site.Params.nav_button }}
+        <a href="{{ .link | absLangURL }}"
+          class="btn btn-sm {{if eq .style `outline`}}btn-outline-primary{{else}}btn-primary{{end}} {{if and $i (gt $i 0)}}ms-3{{end}}">{{
+          .label }}</a>
+        {{ end }}
+      </div>
+    </nav>
+  </div>
+</header>
+{{ "<!-- /navigation -->" | safeHTML }}
+
+{{ partial "components/search-modal" . }}
--- a/themes/godocs-4/layouts/partials/essentials/script.html
+++ b/themes/godocs-4/layouts/partials/essentials/script.html
@@ -0,0 +1,59 @@
+<!-- Bootstrap scripts -->
+{{ $bootstrap := resources.Get "js/bootstrap.js" }}
+{{ $params := dict }}
+{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
+{{ $opts := dict "sourceMap" $sourceMap "target" "es2018" "params" $params }}
+{{ $bootstrap = $bootstrap | js.Build $opts }}
+{{ if hugo.IsProduction }}
+  {{ $bootstrap = $bootstrap | fingerprint "sha512" }}
+{{ end }}
+<script crossorigin="anonymous" defer {{ if hugo.IsProduction }}integrity="{{ $bootstrap.Data.Integrity }}"{{end}} type="application/javascript">{{$bootstrap.Content | safeJS}}</script>
+
+<!-- JS Plugins + Main script -->
+{{ $scripts := slice }}
+{{ range site.Params.plugins.js }}
+  {{ if findRE "^http" .link }}
+    <script
+      src="{{ .link | relURL }}"
+      type="application/javascript"
+      {{ .attributes | safeHTMLAttr }}></script>
+  {{ else }}
+    {{ $scripts = $scripts | append (resources.Get .link) }}
+  {{ end }}
+{{ end }}
+
+<!-- main script -->
+{{ $scripts = $scripts | append (resources.Get "js/script.js") }}
+{{ $scripts = $scripts | resources.Concat "js/scripts.js" }}
+{{ if hugo.IsProduction }}
+  {{ $scripts = $scripts | fingerprint "sha512" }}
+{{ end }}
+<script crossorigin="anonymous" defer {{ if hugo.IsProduction }}integrity="{{ $scripts.Data.Integrity }}"{{end}} type="application/javascript">{{$scripts.Content | safeJS}}</script>
+
+<!-- font family -->
+{{ $pf:= site.Params.variables.font_primary }}
+{{ $sf:= site.Params.variables.font_secondary }}
+<script type="application/javascript">
+  WebFont.load({
+    google: {
+      api: 'https://fonts.googleapis.com/css2',
+      families: ['{{$pf | default `Lato:wght@400`}}{{if not $sf}}&display=swap{{end}}'{{with $sf}},'{{. | default `Lato:wght@400`}}&display=swap'{{end}}],
+      version: 2
+    },
+    active: () => {sessionStorage.fontsLoaded = true}
+  });
+</script>
+
+<!-- progressive web app -->
+{{ partialCached "pwa.html" . }}
+
+
+<!-- cookie consent -->
+{{ partialCached "cookie-consent.html" . }}
+
+
+<!-- google adsense -->
+{{ partialCached "adsense-script.html" . }}
+
+{{ $tooltips := resources.Get "js/tooltips.js" | minify }}
+<script src="{{ $tooltips.RelPermalink }}" defer></script>
--- a/themes/godocs-4/layouts/partials/essentials/style.html
+++ b/themes/godocs-4/layouts/partials/essentials/style.html
@@ -0,0 +1,42 @@
+<!-- DNS preconnect -->
+<meta http-equiv="x-dns-prefetch-control" content="on" />
+<link rel="preconnect" href="//ajax.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+<link rel="preconnect" href="https://use.fontawesome.com" crossorigin />
+<link rel="preconnect" href="//cdnjs.cloudflare.com" />
+<link rel="preconnect" href="//www.googletagmanager.com" />
+<link rel="preconnect" href="//www.google-analytics.com" />
+<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
+<link rel="dns-prefetch" href="https://use.fontawesome.com" />
+<link rel="dns-prefetch" href="//ajax.googleapis.com" />
+<link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
+<link rel="dns-prefetch" href="//www.googletagmanager.com" />
+<link rel="dns-prefetch" href="//www.google-analytics.com" />
+<link rel="dns-prefetch" href="//fonts.googleapis.com" />
+<link rel="dns-prefetch" href="//connect.facebook.net" />
+<link rel="dns-prefetch" href="//platform.linkedin.com" />
+<link rel="dns-prefetch" href="//platform.twitter.com" />
+
+<!-- plugins + stylesheet -->
+{{ $styles := slice }}
+{{ range site.Params.plugins.css }}
+  {{ if findRE "^http" .link }}
+    <link crossorigin="anonymous" media="all" rel="stylesheet" href="{{ .link | relURL }}" {{ .attributes | safeHTMLAttr }} />
+  {{ else }}
+    {{ $styles = $styles | append (resources.Get .link) }}
+  {{ end }}
+{{ end }}
+{{ $styles := $styles | append (resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS) }}
+{{ $styles := $styles | resources.Concat "/css/style.css" }}
+
+
+<!-- Purge CSS in Production -->
+{{ if and hugo.IsProduction site.Params.purge_css }}
+  {{ $styles = $styles | css.PostCSS | fingerprint "sha256" }}
+  {{ $styles = $styles | resources.PostProcess }}
+{{ end }}
+
+
+<!-- <link rel="stylesheet" href="{{ $styles.RelPermalink }}" /> -->
+
+<style type="text/css">{{$styles.Content | safeCSS}}</style>
--- a/themes/godocs-4/layouts/shortcodes/changelog.html
+++ b/themes/godocs-4/layouts/shortcodes/changelog.html
@@ -0,0 +1,6 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+
+<div class="mt-4">
+  <div class="badge {{ .Get 0 | lower}}">{{ .Get 0 | title }}</div>
+  {{ .Inner | markdownify }}
+</div>
--- a/themes/godocs-4/layouts/shortcodes/faq.html
+++ b/themes/godocs-4/layouts/shortcodes/faq.html
@@ -0,0 +1,10 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+
+<div class="col-md-6 mb-4">
+  <div class="card card-lg">
+    <div class="card-body">
+      <h3 class="card-title h5 mb-3">{{ .Get 0 | markdownify }}</h3>
+      <p class="card-text content fw-light">{{ .Inner | markdownify }}</p>
+    </div>
+  </div>
+</div>
--- a/themes/godocs-4/layouts/shortcodes/notice.html
+++ b/themes/godocs-4/layouts/shortcodes/notice.html
@@ -0,0 +1,117 @@
+{{ $type:= .Get 0 }}
+{{ $title := .Get 1 }}
+
+{{ range $i, $e:= .Params }}
+  {{ if eq $i "type" }}{{ $type = $e }}{{ end }}
+  {{ if eq $i "title" }}{{ $title = $e }}{{ end }}
+{{ end }}
+
+{{ $type_class := "info" }}
+
+{{ if eq "note" $type }}
+  {{ $type_class = "note" }}
+{{ else if in (slice "abstract" "summary" "tldr") $type }}
+  {{ $type_class = "abstract" }}
+{{ else if eq "info" $type }}
+  {{ $type_class = "info" }}
+{{ else if eq "todo" $type }}
+  {{ $type_class = "todo" }}
+{{ else if in (slice "tip" "hint" "important") $type }}
+  {{ $type_class = "tip" }}
+{{ else if in (slice "success" "check" "done") $type }}
+  {{ $type_class = "success" }}
+{{ else if in (slice "question" "help" "faq") $type }}
+  {{ $type_class = "question" }}
+{{ else if in (slice "warning" "caution" "attention") $type }}
+  {{ $type_class = "warning" }}
+{{ else if in (slice "failure" "fail" "missing") $type }}
+  {{ $type_class = "failure" }}
+{{ else if in (slice "danger" "error") $type }}
+  {{ $type_class = "danger" }}
+{{ else if eq "bug" $type }}
+  {{ $type_class = "bug" }}
+{{ else if eq "example" $type }}
+  {{ $type_class = "example" }}
+{{ else if in (slice "quote" "cite") $type }}
+  {{ $type_class = "quote" }}
+{{ end }}
+
+<div class="notice {{ $type_class }}">
+  <div class="notice-head">
+    {{- if eq $type_class "note" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="22" height="22" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+      </svg>
+
+    {{- else if eq $type_class "abstract" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
+      </svg>
+    {{- else if eq $type_class "info" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+      </svg>
+    {{- else if eq $type_class "todo" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+      </svg>
+    {{- else if eq $type_class "tip" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
+      </svg>
+    {{- else if eq $type_class "success" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+    {{- else if eq $type_class "question" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+      </svg>
+    {{- else if eq $type_class "warning" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+      </svg>
+    {{- else if eq $type_class "failure" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+      </svg>
+    {{- else if eq $type_class "danger" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
+      </svg>
+    {{- else if eq $type_class "bug" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" />
+      </svg>
+    {{- else if eq $type_class "example" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
+      </svg>
+    {{- else if eq $type_class "quote" -}}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
+      </svg>
+    {{- else -}}
+      <svg
+        width="22"
+        height="22"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10 9V14M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19ZM10.0498 6V6.1L9.9502 6.1002V6H10.0498Z"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"></path>
+      </svg>
+    {{- end -}}
+    {{ if $title }}
+      <p>{{ $title }}</p>
+    {{ else }}
+      <p>{{ $type | title }}</p>
+    {{ end }}
+  </div>
+  <div class="notice-body"><p>{{ .Inner | markdownify }}</p></div>
+</div>
				`@@ -0,0 +1 @@`
				!function(){"use strict";var t=function(t,i){this.initDefaultOptions(),this.extendOptions(i),this.initMenuItems(t),this.getSectionsPositions(),this.bindWindowEvents(),this.bindMenuItems()};t.prototype.initDefaultOptions=function(){this.options={duration:400,activeOffset:40,scrollOffset:10,easingFunction:function(t,i,e,n){return(t/=n/2)<1?e/2ttt+i:e/2((t-=2)tt+2)+i}}},t.prototype.extendOptions=function(t){if(t)for(var i in this.options)this.options.hasOwnProperty(i)&&t[i]&&(this.options[i]=t[i])},t.prototype.initMenuItems=function(t){this.items=[],!1===Array.isArray(t)&&(t=[t]),t.forEach(function(t){var i=[].slice.call(document.querySelectorAll(t));this.items=this.items.concat(i)}.bind(this))},t.prototype.getTargetOffset=function(t){var i=t.getAttribute("href");return i.match(/^#?$/)?0:document.querySelector(i).offsetTop},t.prototype.bindWindowEvents=function(){window.addEventListener("scroll",this.onWindowUpdate.bind(this),!1),window.addEventListener("resize",this.onWindowUpdate.bind(this),!1)},t.prototype.bindMenuItems=function(){this.items.forEach(function(t){t.addEventListener("click",this.onMenuItemClick.bind(this),!1)}.bind(this))},t.prototype.onWindowUpdate=function(){this.getSectionsPositions(),this.updateActiveMenuItem()},t.prototype.getSectionsPositions=function(){this.positions=this.items.map(function(t){return this.getTargetOffset(t)-this.options.activeOffset}.bind(this))},t.prototype.updateActiveMenuItem=function(){if(this.getScrollOffset()+window.innerHeight===document.body.clientHeight)this.changeActiveMenuItem(this.items[this.items.length-1]);else{var t=this.items.filter(function(t,i){return this.positions[i]<=this.getScrollOffset()}.bind(this));t.length>0?this.changeActiveMenuItem(t[t.length-1]):this.resetActiveMenuItem()}},t.prototype.getScrollOffset=function(){return document.body.scrollTop\|\|window.pageYOffset},t.prototype.resetActiveMenuItem=function(){this.items.forEach(function(t){t.classList.remove("active")})},t.prototype.changeActiveMenuItem=function(t){t.classList.contains("active")\|\|(this.resetActiveMenuItem(),t.classList.add("active"))},t.prototype.onMenuItemClick=function(t){t.preventDefault();var i=this.items.indexOf(t.target);-1!==i&&(this.updateLocationHash(i),this.animatePageScroll(i))},t.prototype.updateLocationHash=function(t){var i=this.items[t].getAttribute("href"),e=location.pathname+location.search;i.match(/^#?$/)\|\|(e+=i),history.pushState(i,document.title,e)},t.prototype.animatePageScroll=function(t){var i=-this.options.activeOffset+this.options.scrollOffset,e=this.positions[t]-i;this.scrollTo(e,this.options.duration)},t.prototype.scrollTo=function(t,i,e){if(!(i<=0)){var n=t-this.getScrollOffset();e=(e\|\|0)+10,setTimeout(function(){var o=this.options.easingFunction(e,this.getScrollOffset(),n,i);window.scroll(0,o),i===e?this.updateActiveMenuItem():this.scrollTo(t,i,e)}.bind(this),10)}},window.ScrollMenu=t}();