From 502149dc416a5262db79edc179ede60ea2ad53db Mon Sep 17 00:00:00 2001
From: Elias Almqvist <elalmqvist@gmail.com>
Date: Fri, 29 Mar 2024 21:51:45 +0100
Subject: [PATCH] fix: Fixed dumb nextjs hydration error + styling fixes

---
 README.md                |  1 +
 src/app/not-found.tsx    |  4 ++--
 src/app/page.tsx         | 14 +++++++-------
 src/components/age.tsx   | 25 ++++++++++++++-----------
 src/components/ilink.tsx |  6 +++++-
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 1e766b8..201d541 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,3 @@
 # Wych
+
 Source code + blog posts for my website, [wych.dev](https://wych.dev).
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 5543678..7150c1e 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -19,11 +19,11 @@ const NotFound = () => (
     <p className="max-w-md text-foreground/60 space-y-2">
       {quote.split("\n").map((line, i) => (
         <span key={i} className="block">
-          {'>'} {line}
+          {">"} {line}
         </span>
       ))}
     </p>
-    <div>
+    <div className="space-x-8">
       <ILink href="#">Stay</ILink>
       <ILink href="/">Leave</ILink>
     </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cdc28c3..b7b4640 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -26,7 +26,7 @@ export default function Home() {
           <CardHeader>
             <CardTitle>Elias Almqvist</CardTitle>
             <CardDescription className="pl-0 space-y-4">
-              <p>
+              <span className="inline-block">
                 I am a{" "}
                 {
                   <AgeHCyclesDisplay
@@ -38,23 +38,23 @@ export default function Home() {
                 <span className="text-xs text-foreground/40">(± 2 MHz)</span>{" "}
                 old <span className="font-bold">human-</span> founder, engineer,
                 and hacker with a passion for CS, physics, and mathematics.
-              </p>
-              <p>
+              </span>
+              <span className="inline-block">
                 Currently working on{" "}
-                <ILink href="https://rembr.co" target="_blank" className="px-0">
+                <ILink href="https://rembr.co" target="_blank">
                   ingenuity
                 </ILink>
                 . Some of my projects are open-source (FOSS), and if you are
                 interested, you can find them on my{" "}
-                <ILink href="https://git.wych.dev/elal" target="_blank" className="px-0">
+                <ILink href="https://git.wych.dev/elal" target="_blank">
                   self-hosted git-server
                 </ILink>{" "}
                 or{" "}
-                <ILink href="https://github.com/almqv" target="_blank" className="px-0">
+                <ILink href="https://github.com/almqv" target="_blank">
                   GitHub
                 </ILink>
                 .
-              </p>
+              </span>
             </CardDescription>
             <CardContent className="flex flex-col items-center justify-center pb-0 pt-4">
               <ExternalNav className="w-full max-w-48 flex flex-row justify-between" />
diff --git a/src/components/age.tsx b/src/components/age.tsx
index 6147ead..6a8f419 100644
--- a/src/components/age.tsx
+++ b/src/components/age.tsx
@@ -5,12 +5,6 @@ import { useEffect, useState } from "react";
 
 const hydrogenLineFrequency_Hz = 1420.405751768 * 10 ** 6;
 
-function getAge() {
-  let birth = 1050019200;
-  let now = Math.floor(Date.now() / 1000);
-  return now - birth;
-}
-
 function secondsToHydrogenLineCycles(secs: number) {
   return secs * hydrogenLineFrequency_Hz;
 }
@@ -108,18 +102,27 @@ const AgeHCyclesDisplay: React.FC<AgeHCyclesDisplayProps> = ({
   className,
   precision = 2,
 }) => {
-  const [cycles, setCycles] = useState<number>(0);
+  const [age, setAge] = useState<number | null>(null);
+
+  function getAge() {
+    let birth = 1050019200;
+    let now = Math.floor(Date.now() / 1000);
+    return now - birth;
+  }
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCycles(secondsToHydrogenLineCycles(getAge()));
+      setAge(getAge());
     }, 400);
-
     return () => clearInterval(interval);
-  });
+  }, [getAge]);
 
   return (
-    <FormatBigNumber num={cycles} precision={precision} className={className} />
+    <FormatBigNumber
+      num={secondsToHydrogenLineCycles(age ?? 0)}
+      precision={precision}
+      className={className}
+    />
   );
 };
 
diff --git a/src/components/ilink.tsx b/src/components/ilink.tsx
index c9a8afc..858d3e9 100644
--- a/src/components/ilink.tsx
+++ b/src/components/ilink.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Button } from "./ui/button";
+import { cn } from "@/lib/utils";
 
 type ILinkProps = {
   href: string;
@@ -15,7 +16,10 @@ const ILink: React.FC<ILinkProps> = ({
 }) => {
   return (
     <Link href={href} {...props}>
-      <Button className={className} variant="link">
+      <Button
+        className={cn("p-0 m-0 inline-block h-fit w-fit", className)}
+        variant="link"
+      >
         {children}
       </Button>
     </Link>