Skip to content

Commit e5602f2

Browse files
slax57slax57
committed
new banner script
1 parent 4501ed7 commit e5602f2

File tree

4 files changed

+73
-101
lines changed

4 files changed

+73
-101
lines changed

‎docs/_includes/banner.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div
2+
id="banner"
3+
style="
4+
background-color: #db2777;
5+
padding: 6px 20px;
6+
text-align: center;
7+
justify-content: center;
8+
display: none;
9+
"
10+
>
11+
<!-- <a
12+
href="https://react-admin.lemonsqueezy.com/"
13+
style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
14+
>
15+
<span aria-hidden="true" id="randomEmoji"></span>
16+
<span style="text-align: center">
17+
<strong> - Save 30% on all yearly plans </strong>
18+
until December 20th with code
19+
<strong>XMAS</strong>
20+
<strong>&gt;</strong>
21+
</span>
22+
</a> -->
23+
<a
24+
href="https://marmelab.com/shadcn-admin-kit/"
25+
style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
26+
>
27+
<span style="text-align: center">
28+
📣 React-admin for Shadcn UI is here! Check out
29+
<b>Shadcn Admin Kit</b>
30+
📣
31+
</span>
32+
</a>
33+
<span
34+
id="closeBanner"
35+
aria-label="Close"
36+
style="position: absolute; right: 10px; top: 6px"
37+
>
38+
<a href="javascript:hideBanner()" style="color: #fff">
39+
<span>✕</span>
40+
</a>
41+
</span>
42+
</div>

‎docs/_includes/banner_script.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script>
2+
function hideBanner() {
3+
const banner = document.getElementById("banner");
4+
if (banner) {
5+
banner.style.display = "none";
6+
}
7+
window.localStorage.setItem("hideBannerDate", Date.now().toString());
8+
}
9+
const hideBannerDate = parseInt(
10+
window.localStorage.getItem("hideBannerDate") || "0",
11+
10
12+
);
13+
if (
14+
!hideBannerDate ||
15+
Date.now() - hideBannerDate > 14 * 24 * 60 * 60 * 1000
16+
) {
17+
const emojis = ["🎄", "🎅", "🎁", "🎉", "🦌", "🤶", "🌟", "🔔", "🧦"];
18+
const randomEmoji = document.getElementById("randomEmoji");
19+
if (randomEmoji) {
20+
randomEmoji.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
21+
}
22+
const banner = document.getElementById("banner");
23+
if (banner) {
24+
banner.style.display = "flex";
25+
}
26+
}
27+
</script>

‎docs/_layouts/default.html‎

Lines changed: 2 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -96,15 +96,6 @@
9696
font-family: 'Helvetica', sans-serif;
9797
color: #c0ccda;
9898
}
99-
100-
#closeBanner {
101-
cursor: pointer;
102-
}
103-
@media screen and (max-width: 576px) {
104-
#closeBanner {
105-
display: none;
106-
}
107-
}
10899
</style>
109100
<link
110101
rel="stylesheet"
@@ -114,37 +105,7 @@
114105

115106
<body>
116107
<header>
117-
<span
118-
id="banner"
119-
style="
120-
background-color: #db2777;
121-
padding: 3px;
122-
text-align: center;
123-
color: #fff;
124-
display: flex;
125-
justify-content: center;
126-
align-items: center;
127-
gap: 0.5rem;
128-
padding: 0.75rem;
129-
"
130-
>
131-
<span aria-hidden="true" id="randomEmoji"></span>
132-
<span style="text-align: center">
133-
📣 React-admin for Shadcn UI is here! Check out
134-
<a
135-
style="text-decoration: underline; color: #fff"
136-
href="https://marmelab.com/shadcn-admin-kit/"
137-
>Shadcn Admin Kit</a
138-
> 📣
139-
</span>
140-
<span
141-
id="closeBanner"
142-
aria-label="Close"
143-
style="position: absolute; right: 10px"
144-
>
145-
<span aria-hidden="true">X</span>
146-
</span>
147-
</span>
108+
{% include banner.html %}
148109
{% include nav.html %}
149110
<ul id="slide-out" class="sidenav sidenav-fixed">
150111
<li class="logo">
@@ -233,20 +194,6 @@
233194
var AUTOHIDE = Boolean(0);
234195
</script>
235196

236-
<script>
237-
function hideBanner() {
238-
const banner = document.getElementById('banner');
239-
if (banner) {
240-
banner.style.display = 'none';
241-
}
242-
}
243-
const closeBanner = document.getElementById('closeBanner');
244-
if (closeBanner) {
245-
closeBanner.addEventListener('click', e => {
246-
e.preventDefault();
247-
hideBanner();
248-
});
249-
}
250-
</script>
197+
{% include banner_script.html %}
251198
</body>
252199
</html>

‎docs/documentation.html‎

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -106,37 +106,7 @@
106106

107107
<body>
108108
<header>
109-
<span
110-
id="banner"
111-
style="
112-
background-color: #db2777;
113-
padding: 3px;
114-
text-align: center;
115-
color: #fff;
116-
display: flex;
117-
justify-content: center;
118-
align-items: center;
119-
gap: 0.5rem;
120-
padding: 0.75rem;
121-
"
122-
>
123-
<span aria-hidden="true" id="randomEmoji"></span>
124-
<span style="text-align: center">
125-
📣 React-admin for Shadcn UI is here! Check out
126-
<a
127-
style="text-decoration: underline; color: #fff"
128-
href="https://marmelab.com/shadcn-admin-kit/"
129-
>Shadcn Admin Kit</a
130-
> 📣
131-
</span>
132-
<span
133-
id="closeBanner"
134-
aria-label="Close"
135-
style="position: absolute; right: 10px"
136-
>
137-
<span aria-hidden="true">X</span>
138-
</span>
139-
</span>
109+
{% include banner.html %}
140110
{% include nav.html %}
141111
<ul id="slide-out" class="sidenav sidenav-fixed">
142112
<li class="logo">
@@ -402,20 +372,6 @@ <h2>Recipes</h2>
402372
var AUTOHIDE = Boolean(0);
403373
</script>
404374

405-
<script>
406-
function hideBanner() {
407-
const banner = document.getElementById('banner');
408-
if (banner) {
409-
banner.style.display = 'none';
410-
}
411-
}
412-
const closeBanner = document.getElementById('closeBanner');
413-
if (closeBanner) {
414-
closeBanner.addEventListener('click', e => {
415-
e.preventDefault();
416-
hideBanner();
417-
});
418-
}
419-
</script>
375+
{% include banner_script.html %}
420376
</body>
421377
</html>

0 commit comments

Comments
 (0)