From 372a8aa5fce75e356057adc797a0c7d14f0f5e2b Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Thu, 18 Dec 2025 13:35:01 -0500
Subject: [PATCH] dece

---
 src/app.tsx                       | 55 +++++++---------------------
 src/components/Bars.tsx           | 11 +++---
 src/components/TerminalSplash.tsx | 60 +++++++++----------------------
 src/components/Typewriter.tsx     | 29 +++++----------
 src/components/blog/Card.tsx      | 29 ++++++---------
 src/context/splash.tsx            | 26 --------------
 src/routes/blog/[title]/index.tsx |  9 ++---
 src/routes/blog/index.tsx         | 17 ++-------
 8 files changed, 59 insertions(+), 177 deletions(-)
 delete mode 100644 src/context/splash.tsx

diff --git a/src/app.tsx b/src/app.tsx
index 30b2747..ae7e11a 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -10,7 +10,6 @@ import {
 import "./app.css";
 import { LeftBar, RightBar } from "./components/Bars";
 import { TerminalSplash } from "./components/TerminalSplash";
-import { SplashProvider } from "./context/splash";
 import { MetaProvider } from "@solidjs/meta";
 import ErrorBoundaryFallback from "./components/ErrorBoundaryFallback";
 import { BarsProvider, useBars } from "./context/bars";
@@ -160,33 +159,6 @@ function AppLayout(props: { children: any }) {
 
   return (
     <div class="flex max-w-screen flex-row">
-      {/* Hamburger menu button - only visible on non-touch devices under mobile breakpoint */}
-      <button
-        onClick={() => setLeftBarVisible(!leftBarVisible())}
-        class="hamburger-menu-btn fixed top-4 left-4 z-50 p-2 rounded-md bg-surface0 hover:bg-surface1 transition-colors shadow-md"
-        classList={{
-          "hidden": leftBarVisible()
-        }}
-        aria-label="Toggle navigation menu"
-        style={{
-          display: "none" // Hidden by default, shown via media query for non-touch devices
-        }}
-      >
-        <svg
-          class="w-6 h-6 text-text"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h16"
-          />
-        </svg>
-      </button>
-      
       <LeftBar />
       <div
         style={{
@@ -194,7 +166,7 @@ function AppLayout(props: { children: any }) {
           "margin-left": `${leftBarSize()}px`
         }}
       >
-        <Suspense>{props.children}</Suspense>
+        <Suspense fallback={<TerminalSplash />}>{props.children}</Suspense>
       </div>
       <RightBar />
     </div>
@@ -204,20 +176,17 @@ function AppLayout(props: { children: any }) {
 export default function App() {
   return (
     <MetaProvider>
-      <SplashProvider>
-        <ErrorBoundary
-          fallback={(error, reset) => (
-            <ErrorBoundaryFallback error={error} reset={reset} />
-          )}
-        >
-          <BarsProvider>
-            <TerminalSplash />
-            <Router root={(props) => <AppLayout>{props.children}</AppLayout>}>
-              <FileRoutes />
-            </Router>
-          </BarsProvider>
-        </ErrorBoundary>
-      </SplashProvider>
+      <ErrorBoundary
+        fallback={(error, reset) => (
+          <ErrorBoundaryFallback error={error} reset={reset} />
+        )}
+      >
+        <BarsProvider>
+          <Router root={(props) => <AppLayout>{props.children}</AppLayout>}>
+            <FileRoutes />
+          </Router>
+        </BarsProvider>
+      </ErrorBoundary>
     </MetaProvider>
   );
 }
diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx
index fc80583..6837b46 100644
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -2,6 +2,7 @@ import { Typewriter } from "./Typewriter";
 import { useBars } from "~/context/bars";
 import { onMount, createEffect, createSignal, Show, For } from "solid-js";
 import { api } from "~/lib/api";
+import { TerminalSplash } from "./TerminalSplash";
 
 export function LeftBar() {
   const { setLeftBarSize, leftBarVisible, setLeftBarVisible } = useBars();
@@ -136,7 +137,7 @@ export function LeftBar() {
   return (
     <nav
       ref={ref}
-      class="border-r-overlay2 fixed z-50 h-full w-fit max-w-[25%] border-r-2 transition-transform duration-500 ease-out"
+      class="border-r-overlay2 fixed z-50 h-full w-min border-r-2 transition-transform duration-500 ease-out md:max-w-[20%]"
       classList={{
         "-translate-x-full": !leftBarVisible(),
         "translate-x-0": leftBarVisible()
@@ -160,10 +161,7 @@ export function LeftBar() {
               <div class="flex flex-col gap-2">
                 <span class="text-lg font-semibold">Recent Posts</span>
                 <div class="flex flex-col gap-3">
-                  <Show
-                    when={recentPosts()}
-                    fallback={<div class="text-sm">Loading...</div>}
-                  >
+                  <Show when={recentPosts()} fallback={<TerminalSplash />}>
                     <For each={recentPosts()}>
                       {(post) => (
                         <a
@@ -172,6 +170,7 @@ export function LeftBar() {
                         >
                           <div class="flex flex-col">
                             <span>{post.title.replace(/_/g, " ")}</span>
+
                             <span class="text-subtext0 text-sm">
                               {new Date(post.date).toLocaleDateString("en-US", {
                                 month: "short",
@@ -258,7 +257,7 @@ export function RightBar() {
   return (
     <nav
       ref={ref}
-      class="border-l-overlay2 fixed right-0 z-50 hidden h-full min-h-screen w-fit max-w-[25%] border-l-2 transition-transform duration-500 ease-out md:block"
+      class="border-l-overlay2 fixed right-0 z-50 hidden h-full min-h-screen w-fit border-l-2 transition-transform duration-500 ease-out md:block md:max-w-[20%]"
       classList={{
         "translate-x-full": !rightBarVisible(),
         "translate-x-0": rightBarVisible()
diff --git a/src/components/TerminalSplash.tsx b/src/components/TerminalSplash.tsx
index 31ee466..4f6de15 100644
--- a/src/components/TerminalSplash.tsx
+++ b/src/components/TerminalSplash.tsx
@@ -1,57 +1,31 @@
-import { Show, onMount, onCleanup, createSignal } from "solid-js";
-import { useSplash } from "~/context/splash";
+import { onMount, onCleanup, createSignal } from "solid-js";
+import { isServer } from "solid-js/web";
 
 const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
 export function TerminalSplash() {
-  const { showSplash, setShowSplash } = useSplash();
   const [showing, setShowing] = createSignal(0);
-  const [isVisible, setIsVisible] = createSignal(true);
 
-  onMount(() => {
-    const interval = setInterval(() => {
-      setShowing((prev) => (prev + 1) % spinnerChars.length);
-    }, 50);
+  // Only run animation on client
+  if (!isServer) {
+    onMount(() => {
+      const interval = setInterval(() => {
+        setShowing((prev) => (prev + 1) % spinnerChars.length);
+      }, 50);
 
-    // Hide splash after 1.5 seconds
-    const timeoutId = setTimeout(() => {
-      setShowSplash(false);
-    }, 1500);
-
-    onCleanup(() => {
-      clearInterval(interval);
-      clearTimeout(timeoutId);
+      onCleanup(() => {
+        clearInterval(interval);
+      });
     });
-  });
-
-  // Handle fade out when splash is hidden
-  const shouldRender = () => showSplash() || isVisible();
-
-  // Trigger fade out, then hide after transition
-  const opacity = () => {
-    if (!showSplash() && isVisible()) {
-      setTimeout(() => setIsVisible(false), 500);
-      return "0";
-    }
-    if (showSplash()) {
-      setIsVisible(true);
-      return "1";
-    }
-    return "0";
-  };
+  }
 
   return (
-    <Show when={shouldRender()}>
-      <div
-        class="bg-base fixed inset-0 z-50 mx-auto flex h-screen w-screen flex-col items-center justify-center overflow-hidden transition-opacity duration-500"
-        style={{ opacity: opacity() }}
-      >
-        <div class="text-text max-w-3xl p-8 font-mono text-4xl whitespace-pre-wrap">
-          <div class="flex items-center justify-center">
-            {spinnerChars[showing()]}
-          </div>
+    <div class="bg-base mx-auto flex min-h-full w-full flex-col items-center justify-center overflow-hidden">
+      <div class="text-text max-w-3xl p-8 font-mono text-4xl whitespace-pre-wrap">
+        <div class="flex items-center justify-center">
+          {spinnerChars[showing()]}
         </div>
       </div>
-    </Show>
+    </div>
   );
 }
diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx
index 6b062cc..09e9d2e 100644
--- a/src/components/Typewriter.tsx
+++ b/src/components/Typewriter.tsx
@@ -1,5 +1,4 @@
 import { JSX, onMount, createSignal, children } from "solid-js";
-import { useSplash } from "~/context/splash";
 
 export function Typewriter(props: {
   children: JSX.Element;
@@ -17,7 +16,6 @@ export function Typewriter(props: {
     typeof keepAlive === "number" ? keepAlive : -1
   );
   const resolved = children(() => props.children);
-  const { showSplash } = useSplash();
 
   onMount(() => {
     if (!containerRef || !cursorRef) return;
@@ -69,23 +67,6 @@ export function Typewriter(props: {
       cursorRef.style.height = `${firstChar.offsetHeight}px`;
     }
 
-    // THEN: Wait for splash to be hidden before starting the animation
-    const checkSplashHidden = () => {
-      if (showSplash()) {
-        setTimeout(checkSplashHidden, 10);
-      } else {
-        // Start delay if specified
-        if (delay > 0) {
-          setTimeout(() => {
-            setIsDelaying(false);
-            startReveal();
-          }, delay);
-        } else {
-          startReveal();
-        }
-      }
-    };
-
     const startReveal = () => {
       setIsTyping(true); // Switch to typing cursor
 
@@ -139,7 +120,15 @@ export function Typewriter(props: {
       setTimeout(revealNextChar, 100);
     };
 
-    checkSplashHidden();
+    // Start delay if specified, otherwise start immediately
+    if (delay > 0) {
+      setTimeout(() => {
+        setIsDelaying(false);
+        startReveal();
+      }, delay);
+    } else {
+      startReveal();
+    }
   });
 
   const getCursorClass = () => {
diff --git a/src/components/blog/Card.tsx b/src/components/blog/Card.tsx
index a07e56c..56d54b4 100644
--- a/src/components/blog/Card.tsx
+++ b/src/components/blog/Card.tsx
@@ -25,47 +25,40 @@ export interface CardProps {
 
 export default function Card(props: CardProps) {
   return (
-    <div class="relative z-0 mx-auto h-96 w-full overflow-hidden rounded-lg bg-white shadow-lg dark:bg-zinc-900 md:w-5/6 lg:w-3/4">
+    <div class="bg-base relative z-0 mx-auto h-96 w-full overflow-hidden rounded-lg shadow-lg md:w-5/6 lg:w-3/4 dark:bg-zinc-900">
       <Show when={props.privilegeLevel === "admin"}>
-        <div class="absolute top-0 w-full border-b border-white border-opacity-20 bg-white bg-opacity-40 px-2 py-4 backdrop-blur-md dark:border-black dark:bg-zinc-800 dark:bg-opacity-60 md:px-6">
+        <div class="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 absolute top-0 w-full border-b border-white bg-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-black dark:bg-zinc-800">
           <div class="flex justify-between">
             <Show when={!props.post.published}>
-              <div class="whitespace-nowrap text-center text-lg text-black dark:text-white">
+              <div class="text-center text-lg whitespace-nowrap text-black dark:text-white">
                 Not Published
               </div>
             </Show>
-            <DeletePostButton
-              type="Blog"
-              postID={props.post.id}
-            />
+            <DeletePostButton type="Blog" postID={props.post.id} />
           </div>
         </div>
       </Show>
       <img
-        src={
-          props.post.banner_photo
-            ? props.post.banner_photo
-            : "/bitcoin.jpg"
-        }
+        src={props.post.banner_photo ? props.post.banner_photo : "/bitcoin.jpg"}
         alt={props.post.title.replaceAll("_", " ") + " banner"}
         class="h-full w-full object-cover"
       />
-      <div class="absolute bottom-0 w-full border-t border-white border-opacity-20 bg-white bg-opacity-40 px-2 py-4 backdrop-blur-md dark:border-zinc-900 dark:bg-zinc-800 dark:bg-opacity-60 md:px-6">
+      <div class="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 bg-base absolute bottom-0 w-full border-t border-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-zinc-900 dark:bg-zinc-800">
         <div class="flex flex-col items-center justify-between md:flex-row">
           <div class="text-center md:text-left">
-            <div class="text-lg text-black dark:text-white md:text-xl">
+            <div class="text-lg text-black md:text-xl dark:text-white">
               {props.post.subtitle}
             </div>
-            <div class="text-2xl text-black dark:text-white md:text-3xl">
+            <div class="text-2xl text-black md:text-3xl dark:text-white">
               {props.post.title.replaceAll("_", " ")}
             </div>
           </div>
-          <div class="flex w-full justify-around pt-2 md:w-1/3 md:justify-between md:pl-2 md:pt-0">
+          <div class="flex w-full justify-around pt-2 md:w-1/3 md:justify-between md:pt-0 md:pl-2">
             <div class="my-auto md:h-full">
-              <p class="whitespace-nowrap text-sm text-black dark:text-white">
+              <p class="text-sm whitespace-nowrap text-black dark:text-white">
                 {props.post.total_comments || 0} Comments
               </p>
-              <p class="whitespace-nowrap text-sm text-black dark:text-white">
+              <p class="text-sm whitespace-nowrap text-black dark:text-white">
                 {props.post.total_likes || 0} Likes
               </p>
             </div>
diff --git a/src/context/splash.tsx b/src/context/splash.tsx
deleted file mode 100644
index 31d8629..0000000
--- a/src/context/splash.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Accessor, createContext, useContext } from "solid-js";
-import { createSignal } from "solid-js";
-
-// Create context with initial value
-const SplashContext = createContext<{
-  showSplash: Accessor<boolean>;
-  setShowSplash: (show: boolean) => void;
-}>({
-  showSplash: () => true,
-  setShowSplash: () => {}
-});
-
-export function useSplash() {
-  const context = useContext(SplashContext);
-  return context;
-}
-
-export function SplashProvider(props: { children: any }) {
-  const [showSplash, setShowSplash] = createSignal(true);
-
-  return (
-    <SplashContext.Provider value={{ showSplash, setShowSplash }}>
-      {props.children}
-    </SplashContext.Provider>
-  );
-}
diff --git a/src/routes/blog/[title]/index.tsx b/src/routes/blog/[title]/index.tsx
index fdfac6d..17895ea 100644
--- a/src/routes/blog/[title]/index.tsx
+++ b/src/routes/blog/[title]/index.tsx
@@ -14,6 +14,7 @@ import CommentSectionWrapper from "~/components/blog/CommentSectionWrapper";
 import PostBodyClient from "~/components/blog/PostBodyClient";
 import type { Comment, CommentReaction, UserPublicData } from "~/types/comment";
 import { useBars } from "~/context/bars";
+import { TerminalSplash } from "~/components/TerminalSplash";
 
 // Server function to fetch post by title
 const getPostByTitle = query(async (title: string) => {
@@ -141,13 +142,7 @@ export default function PostPage() {
 
   return (
     <>
-      <Suspense
-        fallback={
-          <div class="w-full pt-[30vh] text-center">
-            <div class="text-xl">Loading post...</div>
-          </div>
-        }
-      >
+      <Suspense fallback={<TerminalSplash />}>
         <Show when={data()} fallback={null}>
           {(loadedData) => (
             <Show when={loadedData().post} fallback={<Navigate href="/404" />}>
diff --git a/src/routes/blog/index.tsx b/src/routes/blog/index.tsx
index a7411ee..641cd17 100644
--- a/src/routes/blog/index.tsx
+++ b/src/routes/blog/index.tsx
@@ -6,6 +6,7 @@ import { api } from "~/lib/api";
 import PostSortingSelect from "~/components/blog/PostSortingSelect";
 import TagSelector from "~/components/blog/TagSelector";
 import PostSorting from "~/components/blog/PostSorting";
+import { TerminalSplash } from "~/components/TerminalSplash";
 
 export default function BlogIndex() {
   const [searchParams] = useSearchParams();
@@ -20,13 +21,7 @@ export default function BlogIndex() {
       <Title>Blog | Michael Freno</Title>
 
       <div class="relative mx-auto min-h-screen rounded-t-lg pt-8 pb-24 shadow-2xl">
-        <Suspense
-          fallback={
-            <div class="mx-auto pt-48">
-              <div class="text-center">Loading...</div>
-            </div>
-          }
-        >
+        <Suspense fallback={<TerminalSplash />}>
           <div class="flex flex-col justify-center gap-4 md:flex-row md:justify-around">
             <PostSortingSelect />
 
@@ -47,13 +42,7 @@ export default function BlogIndex() {
           </div>
         </Suspense>
 
-        <Suspense
-          fallback={
-            <div class="mx-auto pt-48">
-              <div class="text-center">Loading posts...</div>
-            </div>
-          }
-        >
+        <Suspense fallback={<TerminalSplash />}>
           <Show
             when={data() && data()!.posts.length > 0}
             fallback={<div class="pt-12 text-center">No posts yet!</div>}