feat(tailwind):mid migration, very dirty

2025-01-27 23:52:40 -05:00
parent 25cabeb8df
commit e62e465fec
10 changed files with 136 additions and 134 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,5 @@
@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');
+@import "tailwind";

 :root {
  --line-height: 1.2rem;
@@ -14,9 +15,6 @@
  }
 }

-@tailwind base;
-@tailwind components;
-@tailwind utilities;

 * {
  box-sizing: border-box;
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,6 +1,5 @@
 import { A } from "@solidjs/router";
-import { For, type ParentComponent } from "solid-js";
-import { TextHoverJump } from "./TextHoverJump";
+import type { ParentComponent } from "solid-js";
 import { clientOnly } from "@solidjs/start";

 const DarkModeToggle = clientOnly(() =>
@@ -9,6 +8,18 @@ const DarkModeToggle = clientOnly(() =>
 	})),
 );

+function changeFavicon(newFaviconPath: string) {
+	const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
+	if (link) {
+		link.href = newFaviconPath;
+	} else {
+		const newLink = document.createElement("link");
+		newLink.rel = "icon";
+		newLink.href = newFaviconPath;
+		document.head.appendChild(newLink);
+	}
+}
+
 export const Layout: ParentComponent = (props) => {
 	return (
 		<>
@@ -18,7 +29,7 @@ export const Layout: ParentComponent = (props) => {
 			<div class="flex flex-col min-h-screen pt-2v py-1v px-2h max-w-thread mx-auto relative overflow-x-hidden leading-1 box-border decoration-2 underline-offset-2">
 				<header class="flex flex-col items-center justify-center gap-2v px-4h py-2v">
 					<a href="/" class="text-2v leading-2 font-bold">
-						<TextHoverJump text="~/minhtrannhat.com" />
+						~/minhtrannhat
 					</a>

 					<DarkModeToggle />
@@ -44,7 +55,12 @@ export const Layout: ParentComponent = (props) => {
 							>
 								Tags
 							</A>
-							<a href="/resume.pdf" target="_blank" rel="noreferrer">
+							<a
+								href="/resume.pdf"
+								target="_blank"
+								rel="noreferrer"
+								onClick={() => changeFavicon("./favicon.ico")}
+							>
 								Resume
 							</a>
 						</ul>
--- a/src/components/TextHoverJump.tsx
+++ b/src/components/TextHoverJump.tsx
@@ -1,20 +0,0 @@
-import { For, type Component } from "solid-js";
-
-export const TextHoverJump: Component<{ text: string }> = (props) => {
-	return (
-		<span class="jump-text flex items-baseline">
-			<For each={[...props.text]}>
-				{(i, index) => (
-					<span
-						class="jump-text block"
-						style={{
-							"--animation-delay": `${index() * 20}ms`,
-						}}
-					>
-						{i}
-					</span>
-				)}
-			</For>
-		</span>
-	);
-};
--- a/src/data/posts.json
+++ b/src/data/posts.json
@@ -0,0 +1 @@
+[]
--- a/src/entry-server.tsx
+++ b/src/entry-server.tsx
@@ -8,8 +8,7 @@ export default createHandler(() => (
 				<head>
 					<meta charset="utf-8" />
 					<meta name="viewport" content="width=device-width, initial-scale=1" />
-					<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-					<link rel="icon" type="image/png" href="/favicon.png" />
+					<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 					<script>
 						{`document.documentElement.classList.toggle('dark', window.matchMedia('(prefers-color-scheme: dark)').matches)`}
 					</script>
--- a/src/routes/(home).tsx
+++ b/src/routes/(home).tsx
@@ -5,6 +5,7 @@ import { Posts } from "~/components/Posts";
 const links = [
 	"https://github.com/minhtrannhat",
 	"https://linkedin.com/in/minh-tran-nhat",
+	"https://git.minhtrannhat.com/explore/repos",
 ];
 const Homepage = () => {
 	return (
@@ -12,11 +13,6 @@ const Homepage = () => {
 			<section class="flex flex-col sm:flex-row gap-2v sm:gap-3h">
 				<div class="font-medium">
 					<div class="flex items-end mb-1v gap-1h">
-						<img
-							class="inline-block h-2v select-none wave-image"
-							alt="wave emoji"
-							src="/images/wave-pixel.png"
-						/>
 						<p>Hi, Minh here.</p>
 					</div>
 					<p class="mb-1v">