Update to Astro 5/Tailwind 4/Daisyui 5 (#249)

Signed-off-by: Jean-Baptiste Bianchi <jb.bianchi@neuroglia.io>

Author: JBBianchi

astro.config.mjs

@@ -2,13 +2,13 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
-import tailwind from '@astrojs/tailwind';
+import tailwindcss from "@tailwindcss/vite";
 import netlify from '@astrojs/netlify';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://serverlessworkflow.io/',
-  integrations: [mdx(), sitemap(), tailwind()],
+  integrations: [mdx(), sitemap()],
   markdown: {
     syntaxHighlight: 'shiki',
     shikiConfig: {
@@ -20,4 +20,7 @@ export default defineConfig({
     },
   },
   adapter: netlify(),
+  vite: {
+    plugins: [tailwindcss()],
+  }
 });

package-lock.json

@@ -9,16 +9,16 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.0.3",
-    "@astrojs/netlify": "^6.0.1",
+    "@astrojs/mdx": "^4.1.1",
+    "@astrojs/netlify": "^6.2.3",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.4",
-    "astro": "^5.1.2",
-    "tailwindcss": "^3.4.17"
+    "@tailwindcss/vite": "^4.0.13",
+    "astro": "^5.4.3",
+    "tailwindcss": "^4.0.13"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.15",
-    "daisyui": "^4.12.23"
+    "@tailwindcss/typography": "^0.5.16",
+    "daisyui": "^5.0.2"
   }
 }

package.json

@@ -14,7 +14,7 @@ import Section from "./Section.astro";
   <p class="text-center text-xl">👉<a class="link link-accent" target="_blank" rel="noopener" href={GITHUB_LINK}>Star our GitHub Repository</a></p>
 </Section>
 <footer class="bg-neutral text-neutral-content p-10">
-  <div class="footer max-w-7xl mx-auto">
+  <div class="footer md:footer-horizontal max-w-7xl mx-auto">
     <aside>
       <p>
         &copy; Serverless Workflow Authors | 

src/components/Footer.astro

@@ -22,7 +22,7 @@ import ThemeIcon from './ThemeIcon.astro';
 <style>
   .logo-header {
     width: 24px;
-    background-color: var(--fallback-bc,oklch(var(--bc)/1));
+    background-color: var(--color-base-content);
     mask: url(/icons/logo.svg) no-repeat center / contain;
   }
 </style>

src/components/Header.astro

@@ -6,9 +6,8 @@ import Section from '../components/Section.astro';
 import { Code } from 'astro:components';
 import { getCollection } from 'astro:content';
 
-const examples = (await getCollection('example'));
+const examples = (await getCollection('example')).sort((a,b) => a.data.title.localeCompare(b.data.title));
 ---
-
 <Layout>
   <!-- Hero -->
   <div class="hero min-h-[60vh]">
@@ -68,7 +67,7 @@ const examples = (await getCollection('example'));
 
   <!-- Samples -->
   <Section title="User-Friendly DSL: Workflows Made Simple" class="bg-base-200">
-      <div role="tablist" class="tabs tabs-lifted tabs-sm overflow-auto">
+      <div role="tablist" class="tabs tabs-lift tabs-sm overflow-auto">
         {
           examples.map((entry, idx) => (
             <input type="radio" name="code_tabs" role="tab" class="tab h-12" aria-label={entry.data.title} checked={idx===0} />
@@ -173,4 +172,10 @@ const examples = (await getCollection('example'));
       <Card image="img/logos/lf-stacked-color.svg" imageDark="img/logos/lf-stacked-white.svg" imageSize="medium"></Card>
     </div>
   </Section>
-</Layout>
+</Layout>
+
+<style>
+  .hero-content {
+    z-index: 0;
+  }
+</style>

src/pages/index.astro

@@ -1,3 +1,25 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@plugin "daisyui";
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+  --color-primary: oklch(46.2% 0.0713 255.54);
+  --color-secondary: oklch(78.95% 0.0554 234.08);
+  --color-accent: oklch(68.35% 0.1676 34.7);
+}
+@plugin "daisyui/theme" {
+  name: "dark";
+  default: false;
+  --color-primary: oklch(96.89% 0.0281 199.41);
+  --color-primary-content: #293241;
+  --color-secondary: oklch(78.95% 0.0554 234.08);
+  --color-accent: oklch(68.35% 0.1676 34.7);
+  --color-accent-content: oklab(0.14 0.03 0.02);
+  --color-neutral: #293241;
+  --color-neutral-content: #A6ADBB;
+}
+
 html[data-theme="dark"] .astro-code,
 html[data-theme="dark"] .astro-code span {
   color: var(--shiki-dark) !important;