dece

2025-12-18 13:35:01 -05:00
parent b43f693295
commit 372a8aa5fc
8 changed files with 59 additions and 177 deletions
--- 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()
--- 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>
  );
 }
--- 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 = () => {
--- 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>