feat: 404 page

This commit is contained in:
techpixel 2026-01-21 16:50:27 -05:00
parent b0f905ceb9
commit 92be62beaf
No known key found for this signature in database
GPG key ID: 34D6A091A305A398
2 changed files with 45 additions and 3 deletions

View file

@ -8,9 +8,10 @@ interface UnderConstructionProps {
event_name: string;
record_id?: string;
error?: string;
is404?: boolean;
}
function UnderConstruction({ event_name, record_id, error = "" }: UnderConstructionProps) {
function UnderConstruction({ event_name, record_id, error = "", is404 = false }: UnderConstructionProps) {
const [email, setEmail] = useState("");
const emailRef = useRef<HTMLInputElement>(null);
@ -104,7 +105,7 @@ function UnderConstruction({ event_name, record_id, error = "" }: UnderConstruct
<>
This site is temporarily down! <br /> (Organizers: {error})
</>
) : "This event is confirmed, but were still finalizing the exact schedule! The site will be live in 3-4 business days"
) : is404 ? "This page doesn't exist!" : "This event is confirmed, but were still finalizing the exact schedule! The site will be live in 3-4 business days"
}
</p>
<p
@ -113,7 +114,7 @@ function UnderConstruction({ event_name, record_id, error = "" }: UnderConstruct
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
}}
>
You can still sign up below:
{is404 ? "Sign up for campfire below:" : "You can still sign up below:"}
</p>
</div>
</div>

41
astro/src/pages/404.astro Normal file
View file

@ -0,0 +1,41 @@
---
import "../styles/global.css";
//@ts-ignore
import UnderConstruction from "../components/pages/UnderConstruction";
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hack Club Campfire</title>
<!-- OpenGraph meta tags -->
<meta property="og:title" content="Hack Club Campfire" />
<meta property="og:description" content="Join Hack Club's annual game jam! Build amazing games and compete for epic prizes." />
<meta property="og:image" content="/og-banner.png" />
<meta property="og:url" content="https://campfire.hackclub.com" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Hack Club Campfire" />
<!-- Twitter Card meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@hackclub" />
<meta name="twitter:title" content="Hack Club Campfire" />
<meta name="twitter:description" content="Join Hack Club's annual game jam! Build amazing games and compete for epic prizes." />
<meta name="twitter:image" content="/og-banner.png" />
<!-- Privacy-friendly analytics by Plausible
<script async src="https://plausible.io/js/pa-N_oKgCwiYwq16gm7VPPeD.js"></script>
<script>
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
plausible.init()
</script> -->
</head>
<body>
<UnderConstruction event_name="" is404={true}/>
</body>
</html>