feat: fix spacing and comment out trpc
This commit is contained in:
Jet Pham
parent
2010438475
commit
234e637b20
8 changed files with 225 additions and 122 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import Anser, { type AnserJsonEntry } from "anser";
|
||||
import { escapeCarriageReturn } from "escape-carriage";
|
||||
import React from "react";
|
||||
import React, { memo, useMemo } from "react";
|
||||
|
||||
const colorMap: Record<string, string> = {
|
||||
"ansi-black": "text-[var(--black)]",
|
||||
|
|
@ -19,7 +19,7 @@ const colorMap: Record<string, string> = {
|
|||
"ansi-bright-magenta": "text-[var(--light-magenta)]",
|
||||
"ansi-bright-cyan": "text-[var(--light-cyan)]",
|
||||
"ansi-bright-white": "text-[var(--white)]",
|
||||
};
|
||||
} as const;
|
||||
|
||||
const bgColorMap: Record<string, string> = {
|
||||
"ansi-black": "bg-transparent",
|
||||
|
|
@ -38,7 +38,7 @@ const bgColorMap: Record<string, string> = {
|
|||
"ansi-bright-magenta": "bg-[var(--light-magenta)]",
|
||||
"ansi-bright-cyan": "bg-[var(--light-cyan)]",
|
||||
"ansi-bright-white": "bg-[var(--white)]",
|
||||
};
|
||||
} as const;
|
||||
|
||||
const decorationMap: Record<string, string> = {
|
||||
bold: "font-bold",
|
||||
|
|
@ -48,7 +48,7 @@ const decorationMap: Record<string, string> = {
|
|||
strikethrough: "line-through",
|
||||
underline: "underline",
|
||||
blink: "animate-pulse",
|
||||
};
|
||||
} as const;
|
||||
|
||||
function fixBackspace(txt: string): string {
|
||||
let tmp = txt;
|
||||
|
|
@ -60,16 +60,16 @@ function fixBackspace(txt: string): string {
|
|||
}
|
||||
|
||||
function createClass(bundle: AnserJsonEntry): string | null {
|
||||
const classes = [];
|
||||
const classes: string[] = [];
|
||||
|
||||
if (bundle.bg && bgColorMap[bundle.bg]) {
|
||||
classes.push(bgColorMap[bundle.bg]);
|
||||
classes.push(bgColorMap[bundle.bg]!);
|
||||
}
|
||||
if (bundle.fg && colorMap[bundle.fg]) {
|
||||
classes.push(colorMap[bundle.fg]);
|
||||
classes.push(colorMap[bundle.fg]!);
|
||||
}
|
||||
if (bundle.decoration && decorationMap[bundle.decoration]) {
|
||||
classes.push(decorationMap[bundle.decoration]);
|
||||
classes.push(decorationMap[bundle.decoration]!);
|
||||
}
|
||||
return classes.length ? classes.join(" ") : null;
|
||||
}
|
||||
|
|
@ -79,30 +79,36 @@ interface Props {
|
|||
className?: string;
|
||||
}
|
||||
|
||||
export default function Ansi({ className, children = "" }: Props) {
|
||||
const input = escapeCarriageReturn(fixBackspace(children));
|
||||
const bundles = Anser.ansiToJson(input, {
|
||||
json: true,
|
||||
remove_empty: true,
|
||||
use_classes: true,
|
||||
});
|
||||
const Ansi = memo(function Ansi({ className, children = "" }: Props) {
|
||||
const bundles = useMemo(() => {
|
||||
const input = escapeCarriageReturn(fixBackspace(children));
|
||||
return Anser.ansiToJson(input, {
|
||||
json: true,
|
||||
remove_empty: true,
|
||||
use_classes: true,
|
||||
});
|
||||
}, [children]);
|
||||
|
||||
const renderedContent = useMemo(
|
||||
() =>
|
||||
bundles.map((bundle, key) => {
|
||||
const bundleClassName = createClass(bundle);
|
||||
return (
|
||||
<span key={key} className={bundleClassName ?? undefined}>
|
||||
{bundle.content}
|
||||
</span>
|
||||
);
|
||||
}),
|
||||
[bundles],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<pre className={className ?? ""} style={{ textAlign: "left" }}>
|
||||
<code>
|
||||
{bundles.map((bundle, key) => {
|
||||
const bundleClassName = createClass(bundle);
|
||||
|
||||
return (
|
||||
<span key={key} className={bundleClassName ?? undefined}>
|
||||
{bundle.content}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</code>
|
||||
<code>{renderedContent}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default Ansi;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export function BorderedBox({
|
|||
}: BorderedBoxProps) {
|
||||
return (
|
||||
<fieldset
|
||||
className={`my-[calc(2ch-2px)] border-2 border-white px-[calc(1.5ch-0.5px)] pb-[1ch] pt-0 ${className}`}
|
||||
className={`mt-[2ch] border-2 border-white px-[calc(1.5ch-0.5px)] pb-[1ch] pt-0 ${className}`}
|
||||
>
|
||||
{label && (
|
||||
<legend className="-mx-[0.5ch] px-[0.5ch] text-white">
|
||||
|
|
|
|||
|
|
@ -1,50 +1,62 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useEffect, useRef, useCallback } from "react";
|
||||
|
||||
export function CgolCanvas() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const initializedRef = useRef(false);
|
||||
const cleanupRef = useRef<(() => void) | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const initializeWasm = useCallback(async () => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const initializeWasm = async () => {
|
||||
try {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas || initializedRef.current) return;
|
||||
try {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas || initializedRef.current) return;
|
||||
|
||||
const cgolModule = await import("cgol");
|
||||
|
||||
// Initialize WASM module
|
||||
const initFunction = cgolModule.default;
|
||||
if (initFunction && typeof initFunction === "function") {
|
||||
await initFunction();
|
||||
}
|
||||
|
||||
// Start CGOL
|
||||
if (typeof cgolModule.start === "function") {
|
||||
cgolModule.start();
|
||||
initializedRef.current = true;
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error("Failed to initialize CGOL WebAssembly module:", error);
|
||||
const cgolModule = await import("cgol");
|
||||
|
||||
// Initialize WASM module
|
||||
const initFunction = cgolModule.default;
|
||||
if (initFunction && typeof initFunction === "function") {
|
||||
await initFunction();
|
||||
}
|
||||
};
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
void initializeWasm();
|
||||
}, 100);
|
||||
// Start CGOL
|
||||
if (typeof cgolModule.start === "function") {
|
||||
cgolModule.start();
|
||||
initializedRef.current = true;
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
const cleanupFn = (cgolModule as { cleanup?: () => void }).cleanup;
|
||||
if (typeof cleanupFn === "function") {
|
||||
cleanupRef.current = cleanupFn;
|
||||
}
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error("Failed to initialize CGOL WebAssembly module:", error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize immediately without delay
|
||||
void initializeWasm();
|
||||
|
||||
return () => {
|
||||
// Call cleanup if available from WASM module
|
||||
if (cleanupRef.current) {
|
||||
cleanupRef.current();
|
||||
}
|
||||
// Reset initialization state on unmount
|
||||
initializedRef.current = false;
|
||||
};
|
||||
}, [initializeWasm]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
id="canvas"
|
||||
className="fixed top-0 left-0 w-screen h-screen -z-10"
|
||||
className="fixed top-0 left-0 -z-10 h-screen w-screen"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,12 +13,15 @@ export function FrostedBox({
|
|||
}: FrostedBoxProps) {
|
||||
return (
|
||||
<div
|
||||
className={`relative my-[calc(2ch-2px)] px-[calc(0.5ch-0.5px)] py-[1ch] ${className}`}
|
||||
className={`relative my-[calc(2ch-2px)] px-[2ch] py-[2ch] ${className}`}
|
||||
>
|
||||
{/* Extended frosted glass backdrop with mask */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 h-[200%] bg-black/60 backdrop-blur-lg"
|
||||
className="pointer-events-none absolute inset-0 h-[200%]"
|
||||
style={{
|
||||
backgroundColor: "rgba(0, 0, 0, 0.75)",
|
||||
backdropFilter: "blur(16px)",
|
||||
WebkitBackdropFilter: "blur(16px)",
|
||||
maskImage:
|
||||
"linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)",
|
||||
WebkitMaskImage:
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import "~/styles/globals.css";
|
||||
|
||||
import { type Metadata } from "next";
|
||||
import { type Metadata, type Viewport } from "next";
|
||||
|
||||
import { TRPCReactProvider } from "~/trpc/react";
|
||||
// import { TRPCReactProvider } from "~/trpc/react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Jet Pham",
|
||||
|
|
@ -13,13 +13,21 @@ export const metadata: Metadata = {
|
|||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
themeColor: "#000000",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<TRPCReactProvider>{children}</TRPCReactProvider>
|
||||
{/* <TRPCReactProvider> */}
|
||||
{children}
|
||||
{/* </TRPCReactProvider> */}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { HydrateClient } from "~/trpc/server";
|
||||
// import { HydrateClient } from "~/trpc/server";
|
||||
import { BorderedBox } from "./_components/bordered-box";
|
||||
import { FrostedBox } from "./_components/frosted-box";
|
||||
import Header from "./_components/header";
|
||||
|
|
@ -9,40 +9,29 @@ import FirstName from "~/assets/Jet.txt";
|
|||
|
||||
export default async function Home() {
|
||||
return (
|
||||
<HydrateClient>
|
||||
// <HydrateClient>
|
||||
<>
|
||||
<CgolCanvas />
|
||||
<main>
|
||||
<div className="flex flex-col items-center justify-start px-4">
|
||||
<FrostedBox className="mt-4 w-full max-w-[66.666667%] min-w-fit px-[calc(1.5ch-0.5px)] md:mt-16">
|
||||
<FrostedBox className="my-[2ch] w-full max-w-[66.666667%] min-w-fit md:mt-[4ch]">
|
||||
<div className="flex flex-col items-center justify-center gap-[2ch] md:flex-row">
|
||||
<div className="order-1 flex flex-col items-center md:order-2">
|
||||
<Header content={FirstName} />
|
||||
<div className="mt-[3ch]">Software Extremist</div>
|
||||
<div className="mt-[2ch]">Software Extremist</div>
|
||||
</div>
|
||||
<div className="order-2 flex-shrink-0 px-[1ch] md:order-1">
|
||||
<div className="md:hidden w-full flex justify-center">
|
||||
<div className="w-full max-w-[250px] aspect-square overflow-hidden">
|
||||
<Image
|
||||
src="/jet.svg"
|
||||
alt="Jet"
|
||||
width={250}
|
||||
height={250}
|
||||
className="w-full h-full object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-2 shrink-0 md:order-1">
|
||||
<Image
|
||||
src="/jet.svg"
|
||||
alt="Jet"
|
||||
width={175}
|
||||
height={263}
|
||||
className="hidden md:block w-[175px] h-[263px]"
|
||||
width={250}
|
||||
height={250}
|
||||
className="aspect-square w-full max-w-[250px] object-cover md:h-[263px] md:w-[175px] md:max-w-none"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<BorderedBox label="Skills">
|
||||
<BorderedBox label="Skills" className="mt-[2ch]">
|
||||
<div>Making crazy stuff</div>
|
||||
</BorderedBox>
|
||||
<BorderedBox label="Links">
|
||||
|
|
@ -76,14 +65,15 @@ export default async function Home() {
|
|||
href="https://x.com/jetpham5"
|
||||
className="inline-flex items-center"
|
||||
>
|
||||
X
|
||||
</Link>
|
||||
X (Twitter)
|
||||
</Link>
|
||||
</li>
|
||||
</ol>
|
||||
</BorderedBox>
|
||||
</FrostedBox>
|
||||
</div>
|
||||
</main>
|
||||
</HydrateClient>
|
||||
</>
|
||||
// </HydrateClient>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue