Add legacy domain redirect banner
This commit is contained in:
39
src/App.jsx
39
src/App.jsx
@@ -1,3 +1,9 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
const REDIRECT_HOST = 'luna.reversed.dev';
|
||||||
|
const REDIRECT_TARGET = 'https://luna.spaceistyping.com';
|
||||||
|
const REDIRECT_DELAY_SECONDS = 5;
|
||||||
|
|
||||||
const capabilities = [
|
const capabilities = [
|
||||||
{
|
{
|
||||||
title: 'real help, not just replies',
|
title: 'real help, not just replies',
|
||||||
@@ -54,8 +60,41 @@ const contactCards = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
const [secondsLeft, setSecondsLeft] = useState(REDIRECT_DELAY_SECONDS);
|
||||||
|
const shouldRedirect = typeof window !== 'undefined' && window.location.hostname === REDIRECT_HOST;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!shouldRedirect) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSecondsLeft(REDIRECT_DELAY_SECONDS);
|
||||||
|
|
||||||
|
const countdownInterval = window.setInterval(() => {
|
||||||
|
setSecondsLeft((current) => (current > 1 ? current - 1 : 1));
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
const redirectTimeout = window.setTimeout(() => {
|
||||||
|
window.location.replace(REDIRECT_TARGET);
|
||||||
|
}, REDIRECT_DELAY_SECONDS * 1000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.clearInterval(countdownInterval);
|
||||||
|
window.clearTimeout(redirectTimeout);
|
||||||
|
};
|
||||||
|
}, [shouldRedirect]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="site-shell">
|
<div className="site-shell">
|
||||||
|
{shouldRedirect && (
|
||||||
|
<div className="redirect-banner" role="status" aria-live="polite">
|
||||||
|
<p>
|
||||||
|
luna.reversed.dev moved. redirecting you to{' '}
|
||||||
|
<a href={REDIRECT_TARGET}>luna.spaceistyping.com</a>
|
||||||
|
{' '}in {secondsLeft}s.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="ambient ambient-a" />
|
<div className="ambient ambient-a" />
|
||||||
<div className="ambient ambient-b" />
|
<div className="ambient ambient-b" />
|
||||||
<div className="grid-overlay" />
|
<div className="grid-overlay" />
|
||||||
|
|||||||
@@ -96,11 +96,33 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.topbar,
|
.topbar,
|
||||||
main {
|
main,
|
||||||
|
.redirect-banner {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.redirect-banner {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 14px 18px;
|
||||||
|
border: 1px solid rgba(167, 139, 250, 0.28);
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgba(18, 24, 48, 0.78);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.redirect-banner p {
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.redirect-banner a {
|
||||||
|
color: var(--text);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 0.18em;
|
||||||
|
}
|
||||||
|
|
||||||
.topbar {
|
.topbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user