Skip to content

Upgrade to Tailwind CSS v4 and modernize dependencies #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dsnsgithub wants to merge 1 commit into
base: master
Choose a base branch
from
+567 −544
Open

Upgrade to Tailwind CSS v4 and modernize dependencies #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .prettierrc.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default {
printWidth: 200,
trailingComma: "none",
plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
tailwindStylesheet: "./src/styles/global.css",
overrides: [
{
files: "*.astro",
Expand Down
9 changes: 6 additions & 3 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import tailwindcss from "@tailwindcss/vite";
import icon from "astro-icon";
import react from "@astrojs/react";
import mdx from "@astrojs/mdx";
import vercel from "@astrojs/vercel";

// https://astro.build/config
export default defineConfig({
integrations: [tailwind(), icon(), react(), mdx()],
adapter: vercel()
integrations: [icon(), react(), mdx()],
adapter: vercel(),
vite: {
plugins: [tailwindcss()]
}
});
842 changes: 417 additions & 425 deletions bun.lock
View file
Open in desktop

Large diffs are not rendered by default.

52 changes: 25 additions & 27 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,41 +9,39 @@
"preview": "astro preview",
"astro": "astro"
},
"overrides": {
"@octokit/openapi-types": "github:dsnsgithub/openapi-types.ts#main"
},
"dependencies": {
"@astrojs/check": "^0.9.6",
"@astrojs/mdx": "^4.3.13",
"@astrojs/react": "^4.4.2",
"@astrojs/tailwind": "^6.0.2",
"@astrojs/vercel": "^9.0.4",
"@fontsource-variable/dm-sans": "^5.0.6",
"@formkit/auto-animate": "^0.8.2",
"@iconify-json/fa6-brands": "^1.2.5",
"@iconify-json/mdi": "^1.2.2",
"@astrojs/check": "^0.9.9",
"@astrojs/mdx": "^7.0.1",
"@astrojs/react": "^6.0.0",
"@astrojs/vercel": "^11.0.1",
"@fontsource-variable/dm-sans": "^5.2.8",
"@formkit/auto-animate": "^0.9.0",
"@iconify-json/fa6-brands": "^1.2.6",
"@iconify-json/mdi": "^1.2.3",
"@octokit/rest": "^22.0.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@octokit/webhooks-types": "^7.6.1",
"@tailwindcss/vite": "^4.3.2",
"@types/react": "^19.2.17",
"@types/react-dom": "^19.2.3",
"@types/whois-json": "^2.0.4",
"astro": "^5.16.11",
"astro": "^7.0.5",
"astro-icon": "^1.1.5",
"bluesky-comments": "^0.9.0",
"jspdf": "^4.1.0",
"bluesky-comments": "^0.13.1",
"jspdf": "^4.2.1",
"jszip": "^3.10.1",
"react": "^18.3.1",
"react-confetti": "^6.1.0",
"react-dom": "^18.3.1",
"react-tooltip": "^5.28.0",
"sharp": "^0.33.4",
"tailwindcss": "^3.4.7",
"typescript": "^5.5.4",
"react": "^19.2.7",
"react-confetti": "^6.4.0",
"react-dom": "^19.2.7",
"react-tooltip": "^6.0.8",
"sharp": "^0.35.3",
"tailwindcss": "^4.3.2",
"typescript": "^6.0.3",
"use-lanyard": "^1.7.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.13",
"@tailwindcss/typography": "^0.5.20",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-tailwindcss": "^0.6.6",
"tailwind-scrollbar": "^3.1.0"
"prettier-plugin-tailwindcss": "^0.8.0",
"tailwind-scrollbar": "^4.0.2"
}
}
10 changes: 5 additions & 5 deletions src/components/DiscordStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const LanyardStatus = () => {
<h3 className="text-md mb-2 font-bold">Listening to Spotify</h3>

<div className="flex items-center space-x-4">
<img src={status.spotify.album_art_url as string} alt="Album Art" className="h-16 w-16 rounded" />
<img src={status.spotify.album_art_url as string} alt="Album Art" className="h-16 w-16 rounded-sm" />
<div>
<h4 className="w-32 truncate text-sm md:w-48 lg:w-32 xl:w-32 2xl:w-48" title={status.spotify.song}>
{status.spotify.song}
Expand Down Expand Up @@ -118,11 +118,11 @@ const LanyardStatus = () => {
<div className="m-2 rounded-lg bg-viola-100 p-8 shadow-lg">
<h2 className="mb-4 text-2xl font-bold">Status</h2>
<div className="flex items-center space-x-4">
<div className="relative flex-shrink-0">
{largeImage && <img src={largeImage} alt="Large Activity Icon" className="h-16 w-16 rounded" />}
<div className="relative shrink-0">
{largeImage && <img src={largeImage} alt="Large Activity Icon" className="h-16 w-16 rounded-sm" />}
{!largeImage && !smallImage && activity.emoji?.name && <span className="text-3xl">{activity.emoji.name}</span>}
{smallImage && !largeImage && <img src={smallImage} alt="Activity Icon" className="h-16 w-16 rounded" />}
{smallImage && largeImage && <img src={smallImage} alt="Small Activity Icon" className="ring-3 absolute bottom-0 right-0 h-6 w-6 rounded" />}
{smallImage && !largeImage && <img src={smallImage} alt="Activity Icon" className="h-16 w-16 rounded-sm" />}
{smallImage && largeImage && <img src={smallImage} alt="Small Activity Icon" className="ring-3 absolute bottom-0 right-0 h-6 w-6 rounded-sm" />}
</div>

<div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/GithubFeed.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const events = await fetchGitHubEvents();
events.map((item) => (
<div class="group mx-2 rounded-xl bg-viola-50 p-4 transition-transform duration-500 hover:scale-[1.01] hover:transition hover:duration-500 sm:mx-4 sm:p-5">
<a href={item.url} target="_blank" rel="noopener noreferrer" class="flex items-start space-x-3 sm:space-x-4">
<img src={item.actor.avatar_url} alt={item.actor.login} class="h-8 w-8 shrink-0 rounded-full border-2 border-white bg-viola-100 shadow-sm sm:h-10 sm:w-10" />
<img src={item.actor.avatar_url} alt={item.actor.login} class="h-8 w-8 shrink-0 rounded-full border-2 border-white bg-viola-100 shadow-xs sm:h-10 sm:w-10" />

<div class="min-w-0 flex-1">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
Expand Down
8 changes: 4 additions & 4 deletions src/components/GithubFeedSkeleton.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@

<div class="min-w-0 flex-1 space-y-3">
<div class="flex justify-between">
<div class="h-4 w-2/3 rounded bg-viola-200"></div>
<div class="h-3 w-12 rounded bg-viola-200"></div>
<div class="h-4 w-2/3 rounded-sm bg-viola-200"></div>
<div class="h-3 w-12 rounded-sm bg-viola-200"></div>
</div>
<div class="h-3 w-full rounded bg-viola-200"></div>
<div class="h-3 w-24 rounded bg-viola-200"></div>
<div class="h-3 w-full rounded-sm bg-viola-200"></div>
<div class="h-3 w-24 rounded-sm bg-viola-200"></div>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/port/RecentGames.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useAutoAnimate } from "@formkit/auto-animate/react";
import { useState } from "react";
import { useState, type ReactNode } from "react";

interface StatusData {
success: boolean;
Expand Down Expand Up @@ -43,7 +43,7 @@ interface HypixelAPIResponse {
};
}

export default function RecentGames({ children }: { children: JSX.Element }) {
export default function RecentGames({ children }: { children: ReactNode }) {
const [username, setUsername] = useState("");
const [actualUsername, setActualUsername] = useState<String | number>("");
const [uuid, setUUID] = useState("");
Expand Down Expand Up @@ -99,7 +99,7 @@ export default function RecentGames({ children }: { children: JSX.Element }) {
type="text"
id="inputBox"
placeholder="Search..."
className="w-5/6 flex-grow rounded-lg border px-6 py-4 text-xl focus:border-viola-500 focus:outline-none"
className="w-5/6 grow rounded-lg border px-6 py-4 text-xl focus:border-viola-500 focus:outline-hidden"
onInput={(e) => setUsername((e.target as HTMLInputElement).value)}
onKeyDown={(e) => e.key === "Enter" && handleInput()}
></input>
Expand Down Expand Up @@ -191,7 +191,7 @@ export default function RecentGames({ children }: { children: JSX.Element }) {
)}

{actualUsername != -1 && uuid && (statusData || recentGamesData) ? (
<div className="m-2 overflow-scroll rounded-xl border-2 border-viola-300 bg-viola-100 p-6 shadow-xl scrollbar-none">
<div className="m-2 scrollbar-none overflow-scroll rounded-xl border-2 border-viola-300 bg-viola-100 p-6 shadow-xl">
<img src={`https://hypixel.paniek.de/signature/${uuid}/general-tooltip`} alt="Hypixel Player Information" className="min-h-[170px] min-w-[430px]"></img>
</div>
) : (
Expand Down
10 changes: 5 additions & 5 deletions src/components/port/ServerStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ export default function ServerStatus() {

{/* All Systems Operational Banner */}
{!loading && allSystemsOperational && (
<div className="mb-8 flex items-center rounded-lg border-l-4 border-green-500 bg-green-100 p-4 text-green-800 shadow" role="alert">
<svg className="h-6 w-6 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<div className="mb-8 flex items-center rounded-lg border-l-4 border-green-500 bg-green-100 p-4 text-green-800 shadow-sm" role="alert">
<svg className="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div className="ml-3">
Expand All @@ -77,8 +77,8 @@ export default function ServerStatus() {

{/* Not all systems operation issue banner */}
{!loading && !allSystemsOperational && (
<div className="mb-8 flex items-center rounded-lg border-l-4 border-red-500 bg-red-100 p-4 text-red-800 shadow" role="alert">
<svg className="h-6 w-6 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<div className="mb-8 flex items-center rounded-lg border-l-4 border-red-500 bg-red-100 p-4 text-red-800 shadow-sm" role="alert">
<svg className="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div className="ml-3">
Expand Down Expand Up @@ -114,7 +114,7 @@ export default function ServerStatus() {
aria-atomic="true"
>
<div className="flex items-center space-x-4">
<img src={image} alt={`${name} favicon`} width={48} className="rounded-full shadow-sm" />
<img src={image} alt={`${name} favicon`} width={48} className="rounded-full shadow-xs" />
<div>
<p className="text-lg font-semibold">{name}</p>
<p className="break-words text-sm text-gray-600">{url}</p>
Expand Down
6 changes: 4 additions & 2 deletions src/content/config.ts → src/content.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { z, defineCollection } from "astro:content";
import { defineCollection } from "astro:content";
import { glob } from "astro/loaders";
import { z } from "astro/zod";

const posts = defineCollection({
type: "content",
loader: glob({ pattern: "**/*.mdx", base: "./src/content/posts" }),
schema: z.object({
title: z.string(),
description: z.string(),
Expand Down
9 changes: 5 additions & 4 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
---
import "@fontsource-variable/dm-sans";
import "../styles/global.css";
import "@fontsource-variable/dm-sans/index.css";
import Nav from "../components/Nav.astro";
import { ViewTransitions } from "astro:transitions";
import { ClientRouter } from "astro:transitions";
import PostHog from "../components/PostHog.astro";

interface Props {
Expand All @@ -13,7 +14,7 @@ const { title, description } = Astro.props;
---

<!doctype html>
<html lang="en" class="overflow-x-hidden overflow-y-scroll scrollbar scrollbar-track-viola-200 scrollbar-thumb-viola-400 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scrollbar-w-2">
<html lang="en" class="scrollbar scrollbar-thumb-viola-400 scrollbar-track-viola-200 overflow-x-hidden overflow-y-scroll scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-2">
<head>
<meta charset="UTF-8" />
<meta property="og:type" content="website" />
Expand All @@ -28,7 +29,7 @@ const { title, description } = Astro.props;
<meta name="generator" content={Astro.generator} />
<title>{title}</title>

<ViewTransitions />
<ClientRouter />
<PostHog />
</head>
<body class="container mx-auto my-10 bg-viola-50">
Expand Down
6 changes: 3 additions & 3 deletions src/pages/blog/[...slug].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import { getCollection } from "astro:content";
import { getCollection, render } from "astro:content";
import type { CollectionEntry } from "astro:content";
import Layout from "../../layouts/Layout.astro";

Expand All @@ -13,7 +13,7 @@ export async function getStaticPaths() {
const posts = await getCollection("posts");

return posts.map((post) => ({
params: { slug: post.slug },
params: { slug: post.id },
props: { post }
}));
}
Expand All @@ -24,7 +24,7 @@ const {
data: { title, description, date }
}
} = Astro.props;
const { Content } = await post.render();
const { Content } = await render(post);
---

<Layout title={title} description={description}>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const allBlogPosts = await getCollection("posts");
return new Date(b.data.date).getTime() - new Date(a.data.date).getTime();
})
.map((post) => (
<a href={`/blog/${post.slug}`} class="m-2 rounded-lg bg-viola-50 p-8 shadow-lg">
<a href={`/blog/${post.id}`} class="m-2 rounded-lg bg-viola-50 p-8 shadow-lg">
<div class="mb-4 flex flex-row items-center justify-between">
<span class="text-lg font-bold">{post.data.title}</span>
<span>{post.data.date.toLocaleDateString()}</span>
Expand Down
18 changes: 9 additions & 9 deletions src/pages/eq.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import Layout from "../layouts/Layout.astro";
<p>
Test headphones/speakers by uploading an audio file and sculpting the sound.
<div class="mt-2 flex flex-wrap gap-3">
<a href="/symbolism.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300">
<a href="/symbolism.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-300">
🌌 <span>Symbolism</span>
</a>
<a href="/invincible.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300">
<a href="/invincible.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-300">
💪 <span>Invincible</span>
</a>
<a href="/mortals.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300">
<a href="/mortals.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-300">
🥁 <span>Mortals</span>
</a>
</div>
Expand All @@ -29,7 +29,7 @@ import Layout from "../layouts/Layout.astro";
type="file"
id="audio-file"
accept=".mp3,.flac,.wav, .m4a, .ogg, .aac"
class="block rounded-lg border border-viola-300 bg-viola-50 px-3 py-2 text-sm file:mr-4 file:rounded-lg file:border-0 file:bg-viola-200 file:px-4 file:py-2 hover:file:bg-viola-300 focus:outline-none focus:ring-2 focus:ring-viola-400"
class="block rounded-lg border border-viola-300 bg-viola-50 px-3 py-2 text-sm file:mr-4 file:rounded-lg file:border-0 file:bg-viola-200 file:px-4 file:py-2 hover:file:bg-viola-300 focus:outline-hidden focus:ring-2 focus:ring-viola-400"
/>

<div class="relative flex items-center gap-2 rounded-lg border border-viola-300 bg-viola-200 p-4 shadow-xl">
Expand All @@ -47,7 +47,7 @@ import Layout from "../layouts/Layout.astro";
/>
<span
id="detail-tooltip"
class="pointer-events-none absolute left-1/2 top-10 -translate-x-1/2 rounded bg-viola-800 px-2 py-1 text-xs text-white opacity-0 transition-opacity duration-200"
class="pointer-events-none absolute left-1/2 top-10 -translate-x-1/2 rounded-sm bg-viola-800 px-2 py-1 text-xs text-white opacity-0 transition-opacity duration-200"
style="white-space:nowrap;"
>
4096
Expand Down Expand Up @@ -96,8 +96,8 @@ import Layout from "../layouts/Layout.astro";
<div id="eq-header" class="hidden items-center justify-between">
<h3 class="text-lg font-semibold">Parametric EQ</h3>
<div class="flex gap-2">
<button id="add-band-btn" class="rounded-lg bg-viola-300 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-400"> + Add Band </button>
<button id="reset-eq-btn" class="rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300"> Reset EQ </button>
<button id="add-band-btn" class="rounded-lg bg-viola-300 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-400"> + Add Band </button>
<button id="reset-eq-btn" class="rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-300"> Reset EQ </button>
</div>
</div>
<div id="eq-details" class="grid grid-cols-1 gap-4 pt-4 md:grid-cols-3 lg:grid-cols-5"></div>
Expand Down Expand Up @@ -381,7 +381,7 @@ import Layout from "../layouts/Layout.astro";
card.innerHTML = `
<div class="flex items-center justify-between mb-2">
<p class="font-bold text-center flex-1" id="freq-display-${index}">${filter.frequency.value < 1000 ? Math.round(filter.frequency.value) + " Hz" : (filter.frequency.value / 1000).toFixed(1) + " kHz"}</p>
<button class="remove-band-btn ml-2 px-2 py-1 bg-viola-600 hover:bg-viola-700 rounded text-xs font-medium text-white transition" data-index="${index}">×</button>
<button class="remove-band-btn ml-2 px-2 py-1 bg-viola-600 hover:bg-viola-700 rounded-sm text-xs font-medium text-white transition" data-index="${index}">×</button>
</div>
<div class="mt-2">
<label for="freq-${index}" class="block text-xs">Frequency: <span id="freq-val-${index}">${filter.frequency.value < 1000 ? Math.round(filter.frequency.value) + " Hz" : (filter.frequency.value / 1000).toFixed(1) + " kHz"}</span></label>
Expand All @@ -393,7 +393,7 @@ import Layout from "../layouts/Layout.astro";
</div>
<div class="mt-2">
<label for="type-${index}" class="block text-xs">Type:</label>
<select id="type-${index}" class="w-full mt-1 px-2 py-1 bg-viola-50 border border-viola-300 rounded text-xs">
<select id="type-${index}" class="w-full mt-1 px-2 py-1 bg-viola-50 border border-viola-300 rounded-sm text-xs">
<option value="peaking" ${filter.type === "peaking" ? "selected" : ""}>Peaking</option>
<option value="lowshelf" ${filter.type === "lowshelf" ? "selected" : ""}>Low Shelf</option>
<option value="highshelf" ${filter.type === "highshelf" ? "selected" : ""}>High Shelf</option>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/pptx.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ import { Icon } from "astro-icon/components";

filesToProcess.forEach(file => {
const row = document.createElement('div');
row.className = "flex items-center justify-between rounded-lg bg-viola-50 p-4 shadow-sm border border-viola-200";
row.className = "flex items-center justify-between rounded-lg bg-viola-50 p-4 shadow-xs border border-viola-200";
row.innerHTML = `
<span class="font-medium text-viola-900 truncate max-w-[70%]">${file.name}</span>
<span id="status-${file.name.replace(/\W/g, '')}" class="text-xs font-bold uppercase tracking-wider text-viola-400">Ready</span>
Expand Down
Loading