Upgrade all deps and fix all errors

.github/workflows/deploy.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
       - name: Install, build, and upload your site
-        uses: withastro/action@v2
+        uses: withastro/action@v4
         # with:
         # path: . # The root location of your Astro project inside the repository. (optional)
         # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)

.github/workflows/tests.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
       - name: Install & Build
-        uses: withastro/action@v2
+        uses: withastro/action@v4
       - name: Test
         run: bun test
       - name: Format Check

.prettierrc.mjs → .prettierrc.ts

@@ -1,8 +1,6 @@
-/**
- * @see https://prettier.io/docs/en/configuration.html
- * @type {import("prettier").Config}
- */
-const config = {
+// https://prettier.io/docs/en/configuration.html
+
+export default {
   trailingComma: "es5",
   tabWidth: 2,
   semi: true,
@@ -16,6 +14,4 @@ const config = {
       },
     },
   ],
-};
-
-export default config;
+} satisfies import("prettier").Config;

README.md

@@ -48,9 +48,9 @@ All content is parsed through a zod type validator during the build step to ensu
 
 The six most recent posts will be displayed on the site at `/#news`
 
-A new content post can be added by going to `src/content/posts/[route].mdx` and configuring an mdx file like so:
+A new content post can be added by going to `src/content/posts/[route].md` and configuring an md file like so:
 
-```mdx
+```md
 ---
 title: Ladybird Forks from SerenityOS!
 author: Andreas Kling
@@ -69,9 +69,9 @@ Regular MD content here, but note you can embed HTML if you want to with tailwin
 
 ### Newsletter
 
-The newsletters while not currently being displayed render out to `/newsletter/YYYY-MM-DD` and can be added by creating a new one in `src/content/newsletter/[date].mdx`.
+The newsletters while not currently being displayed render out to `/newsletter/YYYY-MM-DD` and can be added by creating a new one in `src/content/newsletter/[date].md`.
 
-```mdx
+```md
 ---
 description: Ladybird browser initiative launched
 date: 2024-07-09

astro.config.mjs → astro.config.ts

@@ -1,13 +1,12 @@
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
 
-import mdx from "@astrojs/mdx";
-
 // https://astro.build/config
 export default defineConfig({
+  output: "static",
   site: "https://ladybird.org",
-  integrations: [tailwind(), sitemap(), mdx()],
+  integrations: [sitemap()],
   // Special case the initial posts from before the astro transition.
   // These are the super-SEO'd links that were shared around.
   redirects: {
@@ -23,4 +22,7 @@ export default defineConfig({
     "/wire.pdf": "/organization#bank-details",
     "/posts.xml": "/posts.rss",
   },
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });

package.json

@@ -8,26 +8,30 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "format": "prettier --write \"**/*.{astro,ts,tsx,md,mdx,js,cjs,mjs,jsx}\"",
-    "format:check": "prettier --check \"**/*.{astro,ts,tsx,md,mdx,js,cjs,mjs,jsx}\""
+    "check": "astro check",
+    "format": "prettier --write \"**/*.{astro,ts,tsx,md,js,cjs,mjs,jsx}\"",
+    "format:check": "prettier --check \"**/*.{astro,ts,tsx,md,js,cjs,mjs,jsx}\""
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
     "@types/bun": "latest",
-    "fast-xml-parser": "^4.5.3",
+    "fast-xml-parser": "^5.2.3",
     "kleur": "^4.1.5",
-    "prettier": "^3.5.3",
-    "prettier-plugin-astro": "^0.14.1"
+    "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1",
+    "typescript": "^5.9.2"
   },
   "dependencies": {
-    "@astrojs/mdx": "3.1.3",
-    "@astrojs/rss": "^4.0.11",
-    "@astrojs/sitemap": "^3.4.0",
-    "@astrojs/tailwind": "^5.1.5",
-    "@astrojs/ts-plugin": "^1.10.4",
-    "astro": "^4.16.18",
-    "tailwindcss": "^3.4.17"
-  }
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/rss": "^4.0.12",
+    "@astrojs/sitemap": "^3.5.1",
+    "@tailwindcss/vite": "^4.1.13",
+    "astro": "^5.13.7",
+    "tailwindcss": "^4.1.13"
+  },
+  "trustedDependencies": [
+    "@tailwindcss/oxide"
+  ]
 }

src/components/global/footer.astro

@@ -1,13 +1,13 @@
-<footer class="bg-[#000] py-0 md:px-20">
+<footer class="bg-black py-0 md:px-20">
   <div class="container">
     <div
-      class="flex items-center h-[335px] sm:h-[380px] bg-cover bg-no-repeat relative z-10 -top-[60px] rounded-[40px] md:rounded-[80px] bg-center bg-[url('../../../assets/img/discover-bg.webp')] w-full"
+      class="flex items-center h-[335px] sm:h-[380px] bg-cover bg-no-repeat relative z-10 -top-[60px] rounded-[40px] md:rounded-[80px] bg-center bg-[url('/assets/img/discover-bg.webp')] w-full"
     >
       <div class="p-7 md:h-[335px] md:p-10 lg:py-12 lg:px-20">
-        <h2 class="text-[#000] mb-1 text-[36px] lg:text-4xl">
+        <h2 class="text-black mb-1 text-[36px] lg:text-4xl">
           Sign up for our newsletter
         </h2>
-        <p class="text-[#000] mb-6 max-w-[832px] lg:text-lg">
+        <p class="text-black mb-6 max-w-[832px] lg:text-lg">
           We'll e-mail you once a month with updates about Ladybird.
         </p>
 
@@ -68,27 +68,27 @@
         class="flex items-center md:items-start flex-col md:flex-row justify-between gap-10"
       >
         <div class="h-fit">
-          <img class="max-w-48" src="/assets/img/logo-new.webp" alt="Logo" />
+          <img class="max-w-48!" src="/assets/img/logo-new.webp" alt="Logo" />
         </div>
         <div>
           <div class="flex gap-14">
             <div class="flex flex-col">
-              <a href="/#about" class="mb-3 font-normal">About</a>
-              <a href="/#news" class="mb-3 font-normal">News</a>
-              <a href="/#gi" class="mb-3 font-normal">Get Involved</a>
+              <a href="/#about" class="mb-3 font-normal!">About</a>
+              <a href="/#news" class="mb-3 font-normal!">News</a>
+              <a href="/#gi" class="mb-3 font-normal!">Get Involved</a>
             </div>
 
             <div class="flex flex-col">
-              <a href="/#sponsors" class="mb-3 font-normal">Sponsors</a>
-              <a href="/#faq" class="mb-3 font-normal">FAQ</a>
-              <a href="/organization/" class="mb-3 font-normal">Organization</a>
+              <a href="/#sponsors" class="mb-3 font-normal!">Sponsors</a>
+              <a href="/#faq" class="mb-3 font-normal!">FAQ</a>
+              <a href="/organization/" class="mb-3 font-normal!">Organization</a>
             </div>
           </div>
         </div>
       </div>
 
       <div
-        class="flex sm:flex-row flex-col gap-10 items-center justify-between py-[30px] pb-5 px-0 border-t-[#303030] border-t-[1px] mt-8 border-solid"
+        class="flex sm:flex-row flex-col gap-10 items-center justify-between py-[30px] pb-5 px-0 border-t-[#303030] border-t mt-8 border-solid"
       >
         <div class="[&>p]:text-[#757575] font-normal">
           <p>© 2024 - {new Date().getFullYear()}. All rights reserved.</p>

src/components/global/head.astro

@@ -1,5 +1,11 @@
 ---
 import "../../styles/global.css";
+type Props = {
+  title?: string;
+  description?: string;
+  author?: string;
+  image?: string;
+};
 const { title, description, author, image } = Astro.props;
 const defaultTitle = "Ladybird";
 const defaultDescription =

src/components/global/navigation.astro

@@ -1,4 +1,4 @@
-<header class="p-[20px] bg-[#000] relative">
+<header class="p-[20px] bg-black relative">
   <div id="header-blobs" class="absolute pointer-events-none z-10 top-0 left-0">
     <img src="/assets/img/header-eclipse.svg" alt="Header Gradient Blobs" />
   </div>
@@ -14,11 +14,11 @@
       />
     </a>
     <div id="header-links" class="flex-row gap-3 z-20 text-sm hidden lg:flex">
-      <a href="/#about" class="font-normal">About</a>
-      <a href="/#news" class="font-normal">News</a>
-      <a href="/#gi" class="font-normal">Get Involved</a>
-      <a href="/#sponsors" class="font-normal">Sponsors</a>
-      <a href="/#faq" class="font-normal">FAQ</a>
+      <a href="/#about" class="font-normal!">About</a>
+      <a href="/#news" class="font-normal!">News</a>
+      <a href="/#gi" class="font-normal!">Get Involved</a>
+      <a href="/#sponsors" class="font-normal!">Sponsors</a>
+      <a href="/#faq" class="font-normal!">FAQ</a>
     </div>
     <div id="header-donate" class="hidden lg:block">
       <a href="https://donorbox.org/ladybird" class="btn btn--small">

src/components/landing/about.astro

@@ -1,4 +1,4 @@
-<section id="about" class="text-[#fff] bg-[#000] pt-12 lg:pt-0 px-4">
+<section id="about" class="text-white bg-black pt-12 lg:pt-0 px-4">
   <div class="container">
     <div
       class="grid grid-cols-[1fr] lg:grid-cols-[1fr_1fr] items-center gap-16"
@@ -8,18 +8,18 @@
       </div>
       <div class="order-1 lg:order-2">
         <h2 class="mb-1">About <span>Ladybird</span></h2>
-        <p class="mb-5 max-w-96">
+        <p class="mb-5! max-w-96">
           Ladybird is a brand-new browser &amp; web engine. Driven by a web
           standards first approach, Ladybird aims to render the modern web with
           good performance, stability and security.
         </p>
-        <p class="mb-5 max-w-96">
+        <p class="mb-5! max-w-96">
           From its humble beginnings as an HTML viewer for the SerenityOS hobby
           operating system project, Ladybird has since grown into a
           cross-platform browser supporting Linux, macOS, and other Unix-like
           systems.
         </p>
-        <p class="mb-5 max-w-96">
+        <p class="mb-5! max-w-96">
           Ladybird is currently in heavy development. We are targeting a first
           Alpha release for early adopters in 2026.
         </p>

src/components/landing/donate.astro

@@ -1,5 +1,5 @@
 <section
-  class="relative z-10 -top-4 text-[#fff] bg-[url('/assets/img/blurp.webp')] bg-center bg-cover mb-12 flex justify-center"
+  class="relative z-10 -top-4 text-white bg-[url('/assets/img/blurp.webp')] bg-center bg-cover mb-12 flex justify-center"
 >
   <div class="p-6 md:p-8 lg:px-16 lg:py-10">
     <h2 class="text-3xl lg:text-4xl mb-[0.8em] lg:mb-[0.4em]">

src/components/landing/hero.astro

@@ -1,23 +1,23 @@
 <section
-  class="bg-[#000] relative flex flex-col items-center pt-[80px] px-5 pb-0 lg:flex-row lg:pt-0 lg:min-h-[892px]"
+  class="bg-black relative flex flex-col items-center pt-[80px] px-5 pb-0 lg:flex-row lg:pt-0 lg:min-h-[892px]"
 >
   <div class="container">
-    <div class="max-w-[800px] relative z-[2]">
-      <h1 class="text-[#fff] mb-4">
+    <div class="max-w-[800px] relative z-2">
+      <h1 class="text-white mb-4!">
         Welcome to <span
-          class="bg-clip-text text-transparent bg-gradient-to-r from-[#6d98cc] to-[#8a64e5]"
+          class="bg-clip-text text-transparent bg-linear-to-r from-[#6d98cc] to-[#8a64e5]"
           style="-webkit-background-clip: text;">Ladybird</span
         >,<br />a truly independent<br />web browser.
       </h1>
-      <p class="mb-8 text-[#fff]">
+      <p class="mb-8! text-white">
         We are building a brand-new browser from scratch, backed by a
         non-profit.
       </p>
       <a href="/#gi" class="btn z-10">Get Involved</a>
     </div>
   </div>
   <div
-    class="relative top-0 right-0 bg-[url('../../../assets/img/hero.webp')] bg-no-repeat bg-cover w-full h-[535px] max-w-[600px] max-h-[695px] block mt-10 lg:absolute lg:top-[105px] lg:h-[695px] lg:m-0"
+    class="relative top-0 right-0 bg-[url('/assets/img/hero.webp')] bg-no-repeat bg-cover w-full h-[535px] max-w-[600px] max-h-[695px] block mt-10 lg:absolute lg:top-[105px] lg:h-[695px] lg:m-0"
   >
   </div>
 </section>

src/components/landing/posts.astro

@@ -1,10 +1,14 @@
 ---
 import { getCollection } from "astro:content";
 
-const posts = await getCollection("posts");
-posts.sort(
-  (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
-);
+const posts = (await getCollection("posts"))
+  .filter((post) => post.data.type !== "Hidden")
+  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
+  .splice(0, 6);
+const newsletter = (await getCollection("newsletter"))
+  .filter((post) => post.data.draft !== true)
+  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
+  .splice(0, 3);
 ---
 
 <section class="news" id="news">
@@ -13,14 +17,32 @@ posts.sort(
     <div class="news__top">
       <h2>News &amp; Announcements</h2>
     </div>
+    <div class="news__grid" style="margin-bottom: 2rem;">
+      {
+        newsletter
+          .map((post) => {
+            return (
+              <a href={`/newsletter/${post.id}`}>
+                <div class="news__box">
+                  <div class="news__box-image">
+                    <div class="news__box-category">
+                      <span>Newsletter</span>
+                    </div>
+                    <img src={null} />
+                  </div>
+                  <h4>{post.data.title}</h4>
+                </div>
+              </a>
+            );
+          })
+      }
+    </div>
     <div class="news__grid">
       {
         posts
-          .filter((post) => post.data.type !== "Hidden")
-          .splice(0, 6)
           .map((post) => {
             return (
-              <a href={`/posts/${post.slug}`}>
+              <a href={`/posts/${post.id}`}>
                 <div class="news__box">
                   <div class="news__box-image">
                     <div class="news__box-category">

src/components/landing/sponsors.astro

@@ -198,18 +198,18 @@ const sponsors = [
         return (
           <div class="mb-[64px] relative">
             <div class="flex items-center mb-6">
-              <span class="block w-full h-[1px] bg-[#d3d2d6]" />
+              <span class="block w-full h-px bg-[#d3d2d6]" />
               <span class="text-2xl shrink-0 font-semibold px-5">
                 {tier.name}
               </span>
-              <span class="block w-full h-[1px] bg-[#d3d2d6]" />
+              <span class="block w-full h-px bg-[#d3d2d6]" />
             </div>
             <div class="flex flex-wrap items-center justify-center gap-4">
               {tier.sponsors.map((sponsor) => {
                 return (
-                  <div class="relative flex items-center justify-center min-h-[102px] border-[6px] border-[#fff] rounded-[30px] shadow-[0_0_8px_0_rgba(202,205,226,0.38)] p-4">
+                  <div class="relative flex items-center justify-center min-h-[102px] border-[6px] border-white rounded-[30px] shadow-[0_0_8px_0_rgba(202,205,226,0.38)] p-4">
                     <a class="text-black" href={sponsor.href} rel="nofollow">
-                      {sponsor.logo ? (
+                      {"logo" in sponsor ? (
                         <img src={sponsor.logo} alt={sponsor.name} />
                       ) : (
                         <span>{sponsor.name}</span>

src/components/organization/initiative.astro

@@ -1,7 +1,7 @@
 <section class="hero hero_single">
   <div class="container custom-row">
     <div class="hero__tf">
-      <h1 class="text-[#fff]">Organization</h1>
+      <h1 class="text-white">Organization</h1>
     </div>
   </div>
 </section>