diff --git a/src/components/ErrorBoundaryFallback.tsx b/src/components/ErrorBoundaryFallback.tsx index aca3f51..02b122f 100644 --- a/src/components/ErrorBoundaryFallback.tsx +++ b/src/components/ErrorBoundaryFallback.tsx @@ -1,7 +1,8 @@ import { useNavigate } from "@solidjs/router"; -import { createSignal } from "solid-js"; +import { createSignal, onCleanup, onMount } from "solid-js"; import { TerminalErrorPage } from "~/components/TerminalErrorPage"; import { useDarkMode } from "~/context/darkMode"; +import { glitchText } from "~/lib/client-utils"; export interface ErrorBoundaryFallbackProps { error: Error; @@ -28,9 +29,15 @@ export default function ErrorBoundaryFallback( isDark = () => true; } - const [glitchText, setGlitchText] = createSignal("ERROR"); + const [glitchError, setGlitchError] = createSignal("ERROR"); - console.error(props.error); + onMount(() => { + const interval = glitchText(glitchError(), setGlitchError); + + onCleanup(() => { + clearInterval(interval); + }); + }); const errorContent = (
@@ -43,7 +50,7 @@ export default function ErrorBoundaryFallback(
✗
-
{glitchText()}
+
{glitchError()}
Application encountered an unexpected error
@@ -119,11 +126,6 @@ export default function ErrorBoundaryFallback( return ( ?~`"} - glitchSpeed={150} - glitchThreshold={0.8} - glitchIntensity={0.6} navigate={navigate!} location={{ pathname: typeof window !== "undefined" ? window.location.pathname : "/" @@ -136,7 +138,6 @@ export default function ErrorBoundaryFallback( Runtime Exception } - onGlitchTextChange={setGlitchText} commandContext={{ isDark }} /> ); diff --git a/src/components/TerminalErrorPage.tsx b/src/components/TerminalErrorPage.tsx index 85f9ef7..8a1e10f 100644 --- a/src/components/TerminalErrorPage.tsx +++ b/src/components/TerminalErrorPage.tsx @@ -1,12 +1,4 @@ -import { - createSignal, - createEffect, - onMount, - onCleanup, - For, - Show, - JSX -} from "solid-js"; +import { createSignal, createEffect, onMount, For, Show, JSX } from "solid-js"; import { CommandHistoryItem, createTerminalCommands, @@ -16,22 +8,16 @@ import { import { Btop } from "~/components/Btop"; interface TerminalErrorPageProps { - glitchText: string; - glitchChars: string; - glitchSpeed?: number; - glitchThreshold?: number; - glitchIntensity?: number; navigate: (path: string) => void; location: { pathname: string }; errorContent: JSX.Element; quickActions: JSX.Element; footer: JSX.Element; - onGlitchTextChange?: (text: string) => void; commandContext?: Partial; + disableTerminal?: boolean; } export function TerminalErrorPage(props: TerminalErrorPageProps) { - const [glitchText, setGlitchText] = createSignal(props.glitchText); const [command, setCommand] = createSignal(""); const [history, setHistory] = createSignal([]); const [historyIndex, setHistoryIndex] = createSignal(-1); @@ -109,38 +95,7 @@ export function TerminalErrorPage(props: TerminalErrorPageProps) { }; onMount(() => { - const originalText = props.glitchText; - const glitchChars = props.glitchChars; - const glitchSpeed = props.glitchSpeed || 300; - const glitchThreshold = props.glitchThreshold || 0.85; - const glitchIntensity = props.glitchIntensity || 0.7; - - const glitchInterval = setInterval(() => { - if (Math.random() > glitchThreshold) { - let glitched = ""; - for (let i = 0; i < originalText.length; i++) { - if (Math.random() > glitchIntensity) { - glitched += - glitchChars[Math.floor(Math.random() * glitchChars.length)]; - } else { - glitched += originalText[i]; - } - } - setGlitchText(glitched); - props.onGlitchTextChange?.(glitched); - - setTimeout(() => { - setGlitchText(originalText); - props.onGlitchTextChange?.(originalText); - }, 100); - } - }, glitchSpeed); - inputRef?.focus(); - - onCleanup(() => { - clearInterval(glitchInterval); - }); }); return ( @@ -198,27 +153,27 @@ export function TerminalErrorPage(props: TerminalErrorPageProps) {
- - {/* Interactive input */} -
-
- freno@terminal - : - ~ - $ - setCommand(e.currentTarget.value)} - onKeyDown={handleKeyDown} - class="text-text caret-text ml-1 flex-1 border-none bg-transparent outline-none" - autocomplete="off" - autocapitalize="off" - spellcheck={false} - /> + +
+
+ freno@terminal + : + ~ + $ + setCommand(e.currentTarget.value)} + onKeyDown={handleKeyDown} + class="text-text caret-text ml-1 flex-1 border-none bg-transparent outline-none" + autocomplete="off" + autocapitalize="off" + spellcheck={false} + /> +
-
+ {/* Footer */}
{ - const interval = glitchText( - "401", - setGlitchText, - ERROR_PAGE_CONFIG.GLITCH_INTERVAL_MS, - ERROR_PAGE_CONFIG.GLITCH_DURATION_MS - ); + const location = useLocation(); - onCleanup(() => clearInterval(interval)); + onMount(() => { + const interval = glitchText(glitch401(), setGlitch401); + + onCleanup(() => { + clearInterval(interval); + }); }); - const createParticles = () => { - return Array.from({ length: ERROR_PAGE_CONFIG.PARTICLE_COUNT }, (_, i) => ({ - id: i, - left: `${Math.random() * 100}%`, - top: `${Math.random() * 100}%`, - animationDelay: `${Math.random() * 3}s`, - animationDuration: `${2 + Math.random() * 3}s` - })); - }; + const errorContent = ( +
+
+ {glitch401()} +
+
+ error: + Unauthorized +
+
- function doubleBack() { - window.history.go(-2); +
+
+ ✗ +
+
Access Denied
+
+ Authentication required to access this resource +
+
+
+ +
+ → Location:{" "} + {location.pathname} +
+
+ +
+
+ ℹ + + Type help to see available commands, + or try one of the suggestions below + +
+
+
+ ); + const quickActions = ( +
+
Quick actions:
+ + + + + + +
+ ); + + let isDark: () => boolean; + try { + const darkMode = useDarkMode(); + isDark = darkMode.isDark; + } catch (e) { + isDark = () => true; } - return ( <> -
- {/* Animated particle background */} -
- - {(particle) => ( -
-
-
- )} - -
- - {/* Animated grid background */} -
-
-
- - {/* Logo overlay */} -
- - - logo - -
- - {/* Main content */} -
- {/* Glitchy 401 */} -
-

- {glitchText()} -

-
-
- - {/* Error message */} -
-

- Access Denied -

-

- You lack authentication sufficient for that page. -
- Please log in or return to a safe location. -

-
- - {/* Action buttons */} -
- - - - - -
- - {/* Floating elements */} -
-
-
-
-
-
-
-
-
- - {/* Footer */} -
-

- Error Code: 401 • Unauthorized Access -

-
-
- - {/* Custom styles */} - -
+ + 401{" "} + | Unauthorized Access + + } + commandContext={{ isDark }} + /> ); } diff --git a/src/routes/[...404].tsx b/src/routes/[...404].tsx index 493196a..28847c5 100644 --- a/src/routes/[...404].tsx +++ b/src/routes/[...404].tsx @@ -1,9 +1,10 @@ import { PageHead } from "~/components/PageHead"; import { HttpStatusCode } from "@solidjs/start"; import { useNavigate, useLocation } from "@solidjs/router"; -import { createSignal, Show } from "solid-js"; +import { createSignal, onCleanup, onMount, Show } from "solid-js"; import { TerminalErrorPage } from "~/components/TerminalErrorPage"; import { useDarkMode } from "~/context/darkMode"; +import { glitchText } from "~/lib/client-utils"; // Component that crashes when rendered function CrashComponent() { @@ -14,14 +15,26 @@ export default function NotFound() { const navigate = useNavigate(); const location = useLocation(); const { isDark } = useDarkMode(); - const [glitchText, setGlitchText] = createSignal("404"); + const [glitch404, setGlitch404] = createSignal("404"); const [shouldCrash, setShouldCrash] = createSignal(false); + onMount(() => { + const interval = glitchText(glitch404(), setGlitch404); + + onCleanup(() => { + clearInterval(interval); + }); + }); + const errorContent = (
- error: - HTTP {glitchText()} - Not Found + {glitch404()} +
+
+ error: + Not Found +
@@ -107,11 +120,6 @@ export default function NotFound() { /> ?~`0123456789"} - glitchSpeed={150} - glitchThreshold={0.85} - glitchIntensity={0.7} navigate={navigate} location={location} errorContent={errorContent} @@ -122,7 +130,6 @@ export default function NotFound() { | Page Not Found } - onGlitchTextChange={setGlitchText} commandContext={{ triggerCrash: () => setShouldCrash(true), isDark: isDark