feat: call to action banner
This commit is contained in:
parent
f7c9337b3f
commit
74f38a9b52
@ -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
|
||||
|
23
assets/css/banner.scss
Normal file
23
assets/css/banner.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -11,9 +11,10 @@
|
||||
@import "post";
|
||||
@import "pagination";
|
||||
@import "footer";
|
||||
@import "banner";
|
||||
|
||||
@import "prism";
|
||||
@import "syntax";
|
||||
@import "code";
|
||||
@import "terms";
|
||||
@import "gist";
|
||||
@import "gist";
|
12
assets/js/banner.js
Normal file
12
assets/js/banner.js
Normal 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);
|
||||
}
|
||||
}
|
@ -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]
|
||||
|
@ -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" "" }}">
|
||||
|
@ -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" . }}
|
||||
|
@ -35,5 +35,5 @@
|
||||
"scripts": {
|
||||
"test": "echo 'Test'"
|
||||
},
|
||||
"version": "1.1.2"
|
||||
"version": "1.2.0"
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "re-terminal",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"author": "Mirus <@mirus-ua> <mirusim@gmail.com>",
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
|
Loading…
Reference in New Issue
Block a user