Fix sitemap reference and add 404 page

Author: julianengel

astro.config.mjs

@@ -4,7 +4,7 @@ import sitemap from '@astrojs/sitemap';
 export default defineConfig({
   site: 'https://simplebytes.com',
   integrations: [sitemap({
-    filter: (page) => !page.includes('/v/'),
+    filter: (page) => !page.includes('/v/') && !page.includes('/404'),
   })],
   build: {
     assets: '_assets'

public/robots.txt

@@ -1,4 +1,4 @@
 User-agent: *
 Allow: /
 
-Sitemap: https://simplebytes.com/sitemap.xml
+Sitemap: https://simplebytes.com/sitemap-index.xml

src/layouts/BaseLayout.astro

@@ -8,13 +8,15 @@ interface Props {
     description?: string;
     image?: string;
     structuredData?: Record<string, unknown> | Record<string, unknown>[];
+    noindex?: boolean;
 }
 
 const {
     title,
     description = "A portfolio of digital products creating tiny, easy to use tools for better productivity and focus.",
     image = "/img/og-image.png",
-    structuredData: pageStructuredData
+    structuredData: pageStructuredData,
+    noindex = false
 } = Astro.props;
 
 const canonicalURL = new URL(Astro.url.pathname, "https://simplebytes.com");
@@ -46,7 +48,7 @@ const structuredDataItems = [
     <title>{title}</title>
     <meta name="description" content={description}>
     <meta name="author" content="Simple Bytes">
-    <meta name="robots" content="index, follow">
+    <meta name="robots" content={noindex ? "noindex, follow" : "index, follow"}>
     <link rel="canonical" href={canonicalURL}>
 
     <!-- Open Graph -->

src/pages/404.astro

@@ -0,0 +1,47 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout
+    title="Page not found - Simple Bytes"
+    description="This Simple Bytes page could not be found."
+    noindex
+>
+    <section class="not-found" aria-labelledby="not-found-heading">
+        <p class="section-label">404</p>
+        <h1 id="not-found-heading">Page not found</h1>
+        <p class="tagline">This page does not exist, or it may have moved.</p>
+        <div class="cta-row">
+            <a href="/" class="btn btn--primary">Go home</a>
+            <a href="/projects" class="btn btn--secondary">Browse projects</a>
+        </div>
+    </section>
+</BaseLayout>
+
+<style>
+    .not-found {
+        max-width: 560px;
+        padding: 5rem 0;
+    }
+
+    h1 {
+        color: var(--text-primary);
+        font-size: clamp(2rem, 5vw, 2.75rem);
+        font-weight: 600;
+        line-height: 1.2;
+        margin: 0 0 1rem;
+    }
+
+    .tagline {
+        color: var(--text-secondary);
+        font-size: 1.125rem;
+        line-height: 1.6;
+        margin: 0 0 1.75rem;
+    }
+
+    .cta-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+</style>