Skip to content

Commit 9dde4d7

Browse files
janivojanivo
committed
feat(landingpage): add maintenance banner
1 parent f72d7b9 commit 9dde4d7

4 files changed

Lines changed: 59 additions & 0 deletions

File tree

‎packages/landingpage/src/components/MaintenanceBanner.astro‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
import { useTranslations } from '../i18n';
3+
4+
const t = useTranslations(Astro.currentLocale);
5+
---
6+
7+
<div
8+
id="maintenance-banner"
9+
role="alert"
10+
aria-label={t.maintenance.label}
11+
class="sticky top-0 z-50 bg-warning text-stone-900"
12+
>
13+
<div class="max-w-5xl mx-auto px-6 h-10 flex justify-center items-center gap-3">
14+
<p class="text-sm font-medium text-center">{t.maintenance.message}</p>
15+
<button
16+
id="maintenance-banner-dismiss"
17+
aria-label={t.maintenance.dismiss}
18+
class="cursor-pointer shrink-0 rounded p-1 hover:bg-warning-light"
19+
>
20+
<svg
21+
xmlns="http://www.w3.org/2000/svg"
22+
width="16"
23+
height="16"
24+
viewBox="0 0 24 24"
25+
fill="none"
26+
stroke="currentColor"
27+
stroke-width="2.5"
28+
stroke-linecap="round"
29+
stroke-linejoin="round"
30+
aria-hidden="true"
31+
focusable="false"
32+
>
33+
<line x1="18" y1="6" x2="6" y2="18"></line>
34+
<line x1="6" y1="6" x2="18" y2="18"></line>
35+
</svg>
36+
</button>
37+
</div>
38+
</div>
39+
40+
<script>
41+
const banner = document.getElementById('maintenance-banner');
42+
const btn = document.getElementById('maintenance-banner-dismiss');
43+
44+
btn?.addEventListener('click', () => {
45+
banner?.remove();
46+
});
47+
</script>

‎packages/landingpage/src/i18n/de.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
{
2+
"maintenance": {
3+
"message": "Die inovex elements befinden sich derzeit im Wartungsmodus.",
4+
"label": "Wartungshinweis",
5+
"dismiss": "Schließen"
6+
},
27
"skipToMain": "Zum Hauptinhalt springen",
38
"meta": {
49
"title": "inovex elements – die interoperable UI-Bibliothek für jedes Framework",

‎packages/landingpage/src/i18n/en.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
{
2+
"maintenance": {
3+
"message": "The inovex elements are currently in maintenance mode.",
4+
"label": "Maintenance notice",
5+
"dismiss": "Dismiss"
6+
},
27
"skipToMain": "Skip to main content",
38
"meta": {
49
"title": "inovex elements – the interoperable UI library for any framework",

‎packages/landingpage/src/layouts/Layout.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import '@inovex.de/elements/dist/inovex-elements/inovex-elements.css';
33
import '../global.css';
44
import { getAbsoluteLocaleUrl } from 'astro:i18n';
55
import { useTranslations, defaultLang } from '../i18n';
6+
import MaintenanceBanner from '../components/MaintenanceBanner.astro';
67
78
interface Props {
89
title?: string;
@@ -65,6 +66,7 @@ const defaultHref = getAbsoluteLocaleUrl(defaultLang, '');
6566
<slot name="head" />
6667
</head>
6768
<body class="inovex-elements-theme">
69+
<MaintenanceBanner />
6870
<!-- Skip to main content for keyboard / screen reader users -->
6971
<a
7072
href="#main-content"

0 commit comments

Comments
 (0)