hbstack · razonyang · Aug 17, 2023 · Aug 17, 2023
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,5 +1,6 @@
 {
     ".": "0.5.0",
+    "modules/banner": "0.0.1",
     "modules/docsearch": "0.1.7",
     "modules/language-picker": "0.1.6",
     "modules/search": "0.1.14",

diff --git a/modules/banner/assets/hb/modules/banner/js/index.ts b/modules/banner/assets/hb/modules/banner/js/index.ts
@@ -0,0 +1,16 @@
+(() => {
+  document.addEventListener("DOMContentLoaded", () => {
+    const header = document.querySelector(".hb-header") as HTMLElement;
+    if (!header.hasAttribute("data-banner")) {
+      return;
+    }
+
+    window.addEventListener("scroll", () => {
+      if (document.documentElement.scrollTop === 0) {
+        header.setAttribute("data-banner", "");
+      } else {
+        header.removeAttribute("data-banner");
+      }
+    });
+  });
+})();
diff --git a/modules/banner/assets/hb/modules/banner/scss/index.scss b/modules/banner/assets/hb/modules/banner/scss/index.scss
@@ -0,0 +1,27 @@
+.hb-header {
+    &[data-banner] {
+        height: 100vh;
+
+        .hb-header-nav {
+            background: transparent !important;
+        }
+
+        .navbar-toggler {
+            color: #fff;
+        }
+
+        @include media-breakpoint-up(xxl) {
+            .hb-header-nav {
+                --#{$prefix}navbar-color: #fff;
+            }
+
+            .vr {
+                color: #fff !important;
+            }
+        }
+    }
+}
+
+.hb-header-banner {
+    height: 100vh;
+}
diff --git a/modules/banner/go.mod b/modules/banner/go.mod
@@ -0,0 +1,12 @@
+module github.com/hbstack/header/modules/banner
+
+go 1.18
+
+require (
+	github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20003 // indirect
+	github.com/hbstack/header v0.5.0 // indirect
+	github.com/hugomods/base v0.1.0 // indirect
+	github.com/hugomods/hugopress v0.2.1 // indirect
+	github.com/hugomods/icons v0.6.0 // indirect
+	github.com/twbs/icons v1.10.5 // indirect
+)
diff --git a/modules/banner/go.sum b/modules/banner/go.sum
@@ -0,0 +1,14 @@
+github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20003 h1:pt/JGVD5YYRsVVijOHPZI6YKTUvbR4e0hgV9B0S6rbI=
+github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20003/go.mod h1:mvM05r93HiefwoaxQTaYiJxtJAhTebwQtU1Xh/J+Okk=
+github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000/go.mod h1:mFberT6ZtcchrsDtfvJM7aAH2bDKLdOnruUHl0hlapI=
+github.com/hbstack/header v0.5.0 h1:FJ9BK5NoI6k69pAbnyvggQWPpLAhY2kG5G9w2XKwUOg=
+github.com/hbstack/header v0.5.0/go.mod h1:BMdysr68KL0Qmo0mufE2AepsO5YXSbBkjmIrwydhpng=
+github.com/hugomods/base v0.1.0 h1:3o9Y85BvXHjkYzZfswM/EtthQ8GOYKN8aXHkIWqu3/8=
+github.com/hugomods/base v0.1.0/go.mod h1:hnWCPbVxuhXBwdFax3mmbMlWKmIo/7OP36MCLOyHtT4=
+github.com/hugomods/hugopress v0.2.1 h1:coYEPHUNLuTxKrVWVIPgs0lbZ6yrqxdWjgSriNFuBVo=
+github.com/hugomods/hugopress v0.2.1/go.mod h1:CRYvr60xOkZOf4Atkuj+uEj2EH5pjJ39Ws3aJAkoMkA=
+github.com/hugomods/icons v0.6.0 h1:G6RU93okhPPRDh/jqcew9gwkcYpSpg0rCBv4S6yUAFw=
+github.com/hugomods/icons v0.6.0/go.mod h1:cIkSvK6W0q6N4U6n9KGz+QfRWQXAW0INd+1P31gPNGg=
+github.com/twbs/bootstrap v5.3.0+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+github.com/twbs/icons v1.10.5 h1:F9uvW7cGfDBAautw5aeCmnB3hw4vv3aEQGbHnzcQKaE=
+github.com/twbs/icons v1.10.5/go.mod h1:GnRlymgVWp5iVJCMa0Me5b6tFyGpVc2bSxPMRGIJmyA=
diff --git a/modules/banner/hugo.toml b/modules/banner/hugo.toml
@@ -0,0 +1,8 @@
+[[module.imports]]
+path = "github.com/hbstack/header"
+
+[params.hugopress.modules.hb-header-banner.attributes.hb-header]
+cacheable = false
+
+[params.hugopress.modules.hb-header-banner.hooks.hb-header-end]
+cacheable = false
diff --git a/modules/banner/layouts/partials/hb/modules/header-banner/index.html b/modules/banner/layouts/partials/hb/modules/header-banner/index.html
@@ -0,0 +1,23 @@
+{{- with .Params.header.banner }}
+  {{- $img := relURL .img }}
+  {{- with $.Resources.GetMatch .img }}
+    {{- $img = .RelPermalink }}
+  {{- else }}
+    {{- with resources.GetMatch .img }}
+      {{- $img = .RelPermalink }}
+    {{- end }}
+  {{- end }}
+  <style>
+    .hb-header {
+      background-image: url('{{ $img }}');
+    }
+  </style>
+  <div class="hb-header-banner container d-flex flex-column justify-content-center text-white">
+    <div class="row">
+      <div class="col col-lg-8">
+        <h1 class="display-1">{{ default $.Title .title | markdownify }}</h1>
+        <div class="lead">{{ default $.Description .description | markdownify }}</div>
+      </div>
+    </div>
+  </div>
+{{- end }}
diff --git a/modules/banner/layouts/partials/hugopress/modules/hb-header-banner/attributes/hb-header.html b/modules/banner/layouts/partials/hugopress/modules/hb-header-banner/attributes/hb-header.html
@@ -0,0 +1,5 @@
+{{- $v := newScratch }}
+{{- with .Page.Params.header.banner }}
+  {{- $v.Set "data-banner" "" }}
+{{- end }}
+{{- return $v.Values }}
diff --git a/modules/banner/layouts/partials/hugopress/modules/hb-header-banner/hooks/hb-header-end.html b/modules/banner/layouts/partials/hugopress/modules/hb-header-banner/hooks/hb-header-end.html
@@ -0,0 +1 @@
+{{- partialCached "hb/modules/header-banner/index" .Page .Page }}
diff --git a/release-please-config.json b/release-please-config.json
@@ -22,6 +22,9 @@
                 "themes"
             ]
         },
+        "modules/banner": {
+            "component": "modules/banner"
+        },
         "modules/docsearch": {
             "component": "modules/docsearch"
         },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{{- partialCached "hb/modules/header-banner/index" .Page .Page }}