bump (move to next@canary), use tailwindcss v4

2025-02-17 11:49:18 -05:00 · 2025-02-17 11:49:18 -05:00 · ffe9419db1
commit ffe9419db1
parent 3e1c75f01f
21 changed files with 67 additions and 60 deletions
--- a/.gitignore
+++ b/.gitignore
@ -48,3 +48,6 @@ package-lock.json

 # vs code
 .vscode/
+
+# webstorm
+.idea/
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@ -6,7 +6,7 @@ export default function About() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <AboutPg />
      </main>
      <Footer />
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@ -6,7 +6,7 @@ export default function Contact() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <ContactPg />
      </main>
      <Footer />
--- a/app/domains/page.tsx
+++ b/app/domains/page.tsx
@ -6,7 +6,7 @@ export default function Domains() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <DomainsPg />
      </main>
      <Footer />
--- a/app/globals.css
+++ b/app/globals.css
@ -1,26 +1,47 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';

-:root {
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 0, 0, 0;
-  --background-end-rgb: 0, 0, 0;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }

-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@utility text-balance {
+  text-wrap: balance;
 }

@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+
+  body {
+    color: rgb(var(--foreground-rgb));
+    background: linear-gradient(
+        to bottom,
+        transparent,
+        rgb(var(--background-end-rgb))
+      )
+      rgb(var(--background-start-rgb));
  }
 }

--- a/app/manifesto/page.tsx
+++ b/app/manifesto/page.tsx
@ -6,7 +6,7 @@ export default function Manifesto() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <ManifestoPg />
      </main>
      <Footer />
--- a/app/music/page.tsx
+++ b/app/music/page.tsx
@ -7,7 +7,7 @@ export default function Music() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <MusicWidget />
        <MusicInfo />
      </main>
--- a/app/page.tsx
+++ b/app/page.tsx
@ -6,7 +6,7 @@ export default function Home() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <HomePg />
      </main>
      <Footer />
--- a/app/time-periods/early-summer-2024/page.tsx
+++ b/app/time-periods/early-summer-2024/page.tsx
@ -6,7 +6,7 @@ export default function EarlySummer2024() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <WhatWasGoingOn />
      </main>
      <Footer />
--- a/app/time-periods/early-summer-2024/what-was-going-on/page.tsx
+++ b/app/time-periods/early-summer-2024/what-was-going-on/page.tsx
@ -6,7 +6,7 @@ export default function Music() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <WhatWasGoingOn />
      </main>
      <Footer />
--- a/app/time-periods/late-summer-2024/page.tsx
+++ b/app/time-periods/late-summer-2024/page.tsx
@ -6,7 +6,7 @@ export default function LateSummer2024() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <WhatWasGoingOn />
      </main>
      <Footer />
--- a/app/time-periods/late-summer-2024/what-was-going-on/page.tsx
+++ b/app/time-periods/late-summer-2024/what-was-going-on/page.tsx
@ -6,7 +6,7 @@ export default function Music() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
        <WhatWasGoingOn />
      </main>
      <Footer />
--- a/components/Header.tsx
+++ b/components/Header.tsx
@ -30,7 +30,7 @@ export default function Header() {
        <Link href="/" className="text-gray-300 hover:text-white text-2xl font-bold transition-all duration-300 hover:glow">
          aidxn.cc
        </Link>
-        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
+        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-hidden">
          {isOpen ? <X className="text-2xl" /> : <Menu className="text-2xl" />}
        </button>
        <ul className={`flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto p-4 md:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden md:flex'}`}>
--- a/components/objects/BackButton.tsx
+++ b/components/objects/BackButton.tsx
@ -12,7 +12,7 @@ const BackButton: React.FC<BackButtonProps> = ({ href, label = 'Back' }) => {
  return (
    <Link 
      href={href}
-      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
      aria-label={`Go back to ${label}`}
    >
      <FontAwesomeIcon icon={faArrowLeft} className="mr-2" />
--- a/components/objects/Button.tsx
+++ b/components/objects/Button.tsx
@ -10,7 +10,7 @@ const MusicInfoButton: React.FC<MusicInfoButtonProps> = ({ href, label }) => {
  return (
    <Link 
      href={href}
-      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
    >
      {label}
    </Link>
--- a/components/widgets/FeaturedRepos.tsx
+++ b/components/widgets/FeaturedRepos.tsx
@ -13,7 +13,7 @@ export default function GitHubFeatured() {
            <h3 className="text-xl font-bold text-gray-100 mb-3">
              <FontAwesomeIcon icon={project.github ? faGithub : faGitAlt} className="mr-2" /> {project.name}
            </h3>
-            <p className="text-gray-300 flex-grow">{project.description}</p>
+            <p className="text-gray-300 grow">{project.description}</p>
          </div>
          <div className="pt-4 border-t border-gray-700 flex justify-between items-center mt-auto">
            <Link href={project.url} className="text-blue-400 hover:underline">View Repo</Link>
--- a/components/widgets/LastPlayed.tsx
+++ b/components/widgets/LastPlayed.tsx
@ -40,7 +40,7 @@ const LastPlayed: React.FC = () => {
  return (
    <div className="max-w-2xl mx-auto mb-12">
      <h2 className="text-2xl font-bold mb-4 text-gray-200">Last Played Song</h2>
-      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg">
+      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white/10 backdrop-filter backdrop-blur-lg">
        <Image 
          src={track.image.find(img => img.size === 'large')?.['#text'] || '/placeholder.png'} 
          alt={track.name} 
--- a/components/widgets/Music.tsx
+++ b/components/widgets/Music.tsx
@ -59,7 +59,7 @@ export default function Home() {
            id="timePeriod"
            value={timePeriod}
            onChange={(e) => setTimePeriod(e.target.value)}
-            className="ml-2 p-2 bg-gray-700 text-gray-300 rounded"
+            className="ml-2 p-2 bg-gray-700 text-gray-300 rounded-sm"
          >
            <option value="Early Summer 2024">Early Summer 2024</option>
          </select>
--- a/package.json
+++ b/package.json
@ -15,19 +15,20 @@
    "@fortawesome/react-fontawesome": "^0.2.2",
    "geist": "^1.3.1",
    "lucide-react": "^0.469.0",
-    "next": "15.1.3",
+    "next": "^15.2.0-canary.63",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
-    "typescript": "^5.7.3",
+    "@eslint/eslintrc": "^3.2.0",
+    "@tailwindcss/postcss": "^4.0.0",
    "@types/node": "^20.17.19",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "postcss": "^8.5.2",
-    "tailwindcss": "^3.4.17",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
    "eslint": "^9.20.1",
    "eslint-config-next": "15.1.3",
-    "@eslint/eslintrc": "^3.2.0"
+    "postcss": "^8.5.2",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.3"
  }
 }
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
  plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
  },
 };

--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;