Merge pull request #2 from mirus-ua/feature/1/call-to-action-banner

feat: call to action banner
mirus-ua · Jul 30, 2024 · 95d2573 · 95d2573
2 parents f7c9337 + 74f38a9
commit 95d2573
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -228,6 +228,15 @@ paginate = 5
   # TocTitle = "Table of Contents" # default
 
 
+  # you can set a banner on the top of the page with a call to action
+  # defaults: dismissible = false; URL is optional
+  # [params.banner]
+  # dismissible = false
+  # text = "Check it out on GitHub"
+  # url = "https://github.com/mirus-ua/hugo-theme-re-terminal"
+
+
+
 [params.twitter]
   # set Twitter handles for Twitter cards
   # see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution

diff --git a/assets/css/banner.scss b/assets/css/banner.scss
@@ -0,0 +1,23 @@
+#banner {
+  width: 100%;
+  height: 2rem;
+  display: grid;
+  grid-template-columns:  1fr auto;
+  background: $accent;
+
+  & span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  & a {
+    color: #1d212c;
+    display: inline;
+  }
+
+  & > button {
+    padding: 0 5px 0 0;
+    margin: 0;
+  }
+} 
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -11,9 +11,10 @@
 @import "post";
 @import "pagination";
 @import "footer";
+@import "banner";
 
 @import "prism";
 @import "syntax";
 @import "code";
 @import "terms";
-@import "gist";
+@import "gist";
diff --git a/assets/js/banner.js b/assets/js/banner.js
@@ -0,0 +1,12 @@
+const banner = document.getElementById("banner");
+const buttons = banner.getElementsByTagName("button");
+
+if (buttons?.[0]) {
+  const listener = buttons[0].addEventListener("click", () => {
+    banner.remove();
+  });
+
+  if (!document.getElementById("banner")) {
+    removeEventListener("click", listener);
+  }
+}
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -18,6 +18,10 @@ themeColor = "blue"
 showMenuItems = 2
 fullWidthTheme = false
 centerTheme = true
+[params.banner]
+dismissible = false
+text = "Check it out on GitHub"
+url = "https://github.com/mirus-ua/hugo-theme-re-terminal"
 
 [languages]
 [languages.en.params]

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -11,6 +11,23 @@
 
 </head>
 <body class="{{- ( or .Params.color $.Site.Params.ThemeColor ) -}}">
+{{ if .Site.Params.Banner }}
+  {{ with .Site.Params.Banner }}
+    <div id="banner">
+      <span>
+        {{ if .url }}
+          <a href="{{ .url }}">{{ .text }}</a>
+        {{ else }}
+          {{ .text }}
+        {{ end }}
+      </span>
+      {{ if .dismissible }}
+        <button type="button">x</button>
+      {{ end }}
+    </div>
+  {{ end }}
+{{ end }}
+
 {{ $container := cond ($.Site.Params.FullWidthTheme | default false) "container full" (cond ($.Site.Params.CenterTheme | default true) "container center" "container") }}
 
 <div class="{{- $container -}}{{- cond ($.Site.Params.oneHeadingSize | default true) " headings--one-size" "" }}">

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -19,5 +19,12 @@
 
 <script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
 
+<!-- Banner JS if it enabled -->
+{{ if .Site.Params.Banner }}
+  {{ $banner := resources.Get "js/banner.js" | js.Build | resources.Minify }}
+
+  <script type="text/javascript" src="{{ $banner.RelPermalink }}"></script>
+{{ end }}
+
 <!-- Extended footer section-->
 {{ partial "extended_footer.html" . }}
diff --git a/package.hugo.json b/package.hugo.json
@@ -35,5 +35,5 @@
   "scripts": {
     "test": "echo 'Test'"
   },
-  "version": "1.1.2"
+  "version": "1.2.0"
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "re-terminal",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "author": "Mirus <@mirus-ua> <[email protected]>",
   "main": "index.js",
   "license": "MIT",