feat: call to action banner

This commit is contained in:
Mirus 2024-07-30 14:37:30 +03:00
parent f7c9337b3f
commit 74f38a9b52
9 changed files with 76 additions and 3 deletions

View File

@ -228,6 +228,15 @@ paginate = 5
# TocTitle = "Table of Contents" # default # 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] [params.twitter]
# set Twitter handles for Twitter cards # set Twitter handles for Twitter cards
# see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution # see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution

23
assets/css/banner.scss Normal file
View File

@ -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;
}
}

View File

@ -11,6 +11,7 @@
@import "post"; @import "post";
@import "pagination"; @import "pagination";
@import "footer"; @import "footer";
@import "banner";
@import "prism"; @import "prism";
@import "syntax"; @import "syntax";

12
assets/js/banner.js Normal file
View File

@ -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);
}
}

View File

@ -18,6 +18,10 @@ themeColor = "blue"
showMenuItems = 2 showMenuItems = 2
fullWidthTheme = false fullWidthTheme = false
centerTheme = true centerTheme = true
[params.banner]
dismissible = false
text = "Check it out on GitHub"
url = "https://github.com/mirus-ua/hugo-theme-re-terminal"
[languages] [languages]
[languages.en.params] [languages.en.params]

View File

@ -11,6 +11,23 @@
</head> </head>
<body class="{{- ( or .Params.color $.Site.Params.ThemeColor ) -}}"> <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") }} {{ $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" "" }}"> <div class="{{- $container -}}{{- cond ($.Site.Params.oneHeadingSize | default true) " headings--one-size" "" }}">

View File

@ -19,5 +19,12 @@
<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script> <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--> <!-- Extended footer section-->
{{ partial "extended_footer.html" . }} {{ partial "extended_footer.html" . }}

View File

@ -35,5 +35,5 @@
"scripts": { "scripts": {
"test": "echo 'Test'" "test": "echo 'Test'"
}, },
"version": "1.1.2" "version": "1.2.0"
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "re-terminal", "name": "re-terminal",
"version": "1.1.2", "version": "1.2.0",
"author": "Mirus <@mirus-ua> <mirusim@gmail.com>", "author": "Mirus <@mirus-ua> <mirusim@gmail.com>",
"main": "index.js", "main": "index.js",
"license": "MIT", "license": "MIT",