init

src/pages/500.astro

@@ -0,0 +1,75 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { House, ArrowLeft } from "@lucide/astro";
+
+interface Props {
+  error?: unknown;
+}
+
+const { error } = Astro.props;
+
+// Sanitize error for display - NEVER expose sensitive server details in production
+const displayMessage =
+  "An unexpected error occurred while processing your request.";
+
+// Log full error server-side for debugging (only visible in server logs)
+if (error instanceof Error) {
+  console.error("500 Server Error:", {
+    message: error.message,
+    stack: error.stack,
+    timestamp: new Date().toISOString(),
+  });
+}
+---
+
+<Layout
+  title="500 - Server Error | Another Hadi"
+  description="An error occurred while processing your request."
+>
+  <div class="min-h-screen flex items-center justify-center px-4 py-20">
+    <div class="text-center max-w-2xl mx-auto">
+      <!-- Large 500 Number -->
+      <h1 class="text-9xl font-bold text-error mb-4 animate-pulse">500</h1>
+
+      <!-- Error Title -->
+      <h2 class="text-4xl font-bold mb-4">Server Error</h2>
+
+      <!-- Error Description -->
+      <p class="text-xl mb-8 text-base-content/70">
+        {displayMessage}
+        <br />
+        Please try again later or contact me if the problem persists.
+      </p>
+
+      <!-- Divider -->
+      <div class="divider"></div>
+
+      <!-- Action Buttons -->
+      <div class="flex gap-4 justify-center flex-wrap mt-8">
+        <a href="/" class="btn btn-primary gap-2">
+          <House class="size-5" />
+          Go Home
+        </a>
+        <button onclick="history.back()" class="btn btn-outline gap-2">
+          <ArrowLeft class="size-5" />
+          Go Back
+        </button>
+      </div>
+
+      <!-- Helpful Links -->
+      <div class="mt-8">
+        <p class="text-sm text-base-content/60 mb-4">Need help?</p>
+        <div class="flex gap-3 justify-center flex-wrap text-sm">
+          <a href="/#contact" class="link link-hover">Contact</a>
+          <span class="text-base-content/30">•</span>
+          <a
+            href="https://github.com/anotherhadi/blog/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link link-hover">Report Issue</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>