Upgrade to tailwind v4

astro.config.mjs

@@ -1,8 +1,10 @@
 // @ts-check
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
+import tailwind from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()],
+  vite: {
+    plugins: [tailwind()],
+  },
 });

package.json

@@ -9,10 +9,10 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/tailwind": "^5.1.2",
-    "@fontsource/source-serif-4": "^5.1.0",
-    "astro": "^4.16.16",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.7.2"
+    "@fontsource/source-serif-4": "^5.2.8",
+    "@tailwindcss/vite": "^4.1.8",
+    "astro": "^5.8.1",
+    "tailwindcss": "^4.1.8",
+    "typescript": "^5.8.3"
   }
 }

src/layouts/index.astro

@@ -38,8 +38,8 @@ const { title, className } = Astro.props;
     <script
       is:inline
       defer
-      src="https://stat.lua.re/re.js"
-      data-website-id="7d601566-3611-444c-800f-d351e266c02d"></script>
+      data-domain="lua.re"
+      src="https://track.lua.re/js/script.js"></script>
 
     <title>{title ?? "lua.re"}</title>
   </head>

src/pages/index.astro

@@ -1,40 +1,37 @@
 ---
 import Layout from "../layouts/index.astro";
 
-const socials = [
-  ["Bluesky", "bs/lua.re", "https://bsky.app/profile/lua.re"],
-  ["GitHub", "gh/luaneko", "https://github.com/luaneko"],
-];
+// const socials = [
+//   ["Bluesky", "bs/lua.re", "https://bsky.app/profile/lua.re"],
+//   ["GitHub", "gh/luaneko", "https://github.com/luaneko"],
+// ];
 
-const services = [
+const links = [
   ["Twitter", "twt", "https://twitter.com/luanekos"],
   ["Bluesky", "bsky", "https://bsky.app/profile/lua.re"],
   ["Gitea", "git", "https://git.lua.re/"],
   ["Memos", "memo", "https://memo.lua.re/"],
-];
-
-services.sort(([_a, a], [_b, b]) => a.length - b.length || a.localeCompare(b));
+  ["AFFiNE", "docs", "https://docs.lua.re/"],
+].sort(([_a, a], [_b, b]) => a.length - b.length || a.localeCompare(b));
 ---
 
 <Layout>
   <div class="max-w-screen-sm mx-auto p-8">
     <pre
-      class="leading-snug px-5 py-4 bg-white rounded-lg border border-gray-100 hover:border-gray-200 shadow-xs">
+      class="leading-snug px-5 py-4 bg-white rounded-lg border-gray-100 shadow-xs">
   ∧.,,∧ 𝜗𝜚
 (  ̳• · • ̳)   ᭢
-/      づ <a class="mail" class="font-serif"><em><strong>lumi</strong><span class="at"> at </span>lua.re</em></a> ₊˚.⋆⁺₊
+/      づ <a class="mail" class="font-serif"><em><strong class="font-semibold">lumi</strong><span class="at"> at </span>lua.re</em></a> ₊˚.⋆⁺₊
 <!-- 
 {socials.map(([name, text, href]) => (
 <>・:。<small><a href={href} title={name}>{text}</a></small>
 </s>))} -->
-chronic internet meower
-
 🍡 🌸 🎀 🌙
 </pre>
-    <p class="my-4">
+    <p class="my-2">
       <small
         >{
-          services.map(([name, sub, href], i) => (
+          links.map(([name, sub, href], i) => (
             <>
               {i ? " · " : ""}
               <a href={href} title={name}>

src/styles/index.css

@@ -1,3 +1,15 @@
+@import "tailwindcss";
+
+@theme {
+  --font-serif:
+    "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times,
+    serif;
+
+  --color-bg: #fff8f7;
+  --color-white: #fffefe;
+  --color-pink: #f3d0d7;
+}
+
 html {
   @apply bg-bg font-serif;
   font-size: 14px;

tailwind.config.mjs

@@ -1,19 +0,0 @@
-import defaultTheme from "tailwindcss/defaultTheme";
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  theme: {
-    extend: {
-      fontFamily: {
-        serif: [`"Source Serif 4"`, ...defaultTheme.fontFamily.serif],
-      },
-      colors: {
-        bg: "#fff8f7",
-        white: "#fffefe",
-        pink: "#f3d0d7",
-      },
-    },
-  },
-  plugins: [],
-};