Merge pull request #565 from onwidget/migration-astro-v5

Migration astro v5

Author: prototypa

README.md

@@ -5,7 +5,7 @@
 
 🌟 _Most *starred* & *forked* Astro theme in 2022 & 2023_. 🌟
 
-**AstroWind** is a free and open-source template to make your website using **[Astro 4.0](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account web best practices.
+**AstroWind** is a free and open-source template to make your website using **[Astro 5.0](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account web best practices.
 
 - ✅ **Production-ready** scores in **PageSpeed Insights** reports.
 - ✅ Integration with **Tailwind CSS** supporting **Dark mode** and **_RTL_**.
@@ -65,7 +65,7 @@ We're embarking on an exciting journey with **AstroWind 2.0**, and we want you t
 
 ## Getting started
 
-**AstroWind** tries to give you quick access to creating a website using [Astro 4.0](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/). It's a free theme which focuses on simplicity, good practices and high performance.
+**AstroWind** tries to give you quick access to creating a website using [Astro 5.0](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/). It's a free theme which focuses on simplicity, good practices and high performance.
 
 Very little vanilla javascript is used only to provide basic functionality so that each developer decides which framework (React, Vue, Svelte, Solid JS...) to use and how to approach their goals.
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@onwidget/astrowind",
-  "version": "1.0.0-beta.48",
-  "description": "AstroWind: A free template using Astro 4.0 and Tailwind CSS. Astro starter theme.",
+  "version": "1.0.0-beta.49",
+  "description": "AstroWind: A free template using Astro 5.0 and Tailwind CSS. Astro starter theme.",
   "type": "module",
   "private": true,
   "engines": {
@@ -22,48 +22,48 @@
     "fix:prettier": "prettier -w ."
   },
   "dependencies": {
-    "@astrojs/rss": "^4.0.8",
-    "@astrojs/sitemap": "^3.2.0",
+    "@astrojs/rss": "^4.0.10",
+    "@astrojs/sitemap": "^3.2.1",
     "@astrolib/analytics": "^0.6.1",
     "@astrolib/seo": "^1.0.0-beta.8",
     "@fontsource-variable/inter": "^5.1.0",
-    "astro": "^4.16.2",
-    "astro-embed": "^0.7.4",
-    "astro-icon": "^1.1.1",
+    "astro": "^5.0.3",
+    "astro-embed": "^0.9.0",
+    "astro-icon": "^1.1.4",
     "limax": "4.1.0",
     "lodash.merge": "^4.6.2",
-    "unpic": "^3.18.0"
+    "unpic": "^3.22.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/mdx": "^4.0.1",
     "@astrojs/partytown": "^2.1.2",
-    "@astrojs/tailwind": "5.1.2",
-    "@eslint/js": "^9.12.0",
+    "@astrojs/tailwind": "^5.1.3",
+    "@eslint/js": "^9.16.0",
     "@iconify-json/flat-color-icons": "^1.2.0",
-    "@iconify-json/tabler": "^1.2.5",
+    "@iconify-json/tabler": "^1.2.10",
     "@tailwindcss/typography": "^0.5.15",
     "@types/eslint__js": "^8.42.3",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash.merge": "^4.6.9",
     "@types/mdx": "^2.0.13",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
-    "astro-compress": "2.3.3",
-    "astro-eslint-parser": "^1.0.3",
-    "eslint": "^9.12.0",
-    "eslint-plugin-astro": "^1.2.4",
-    "globals": "^15.11.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "astro-compress": "2.3.5",
+    "astro-eslint-parser": "^1.1.0",
+    "eslint": "^9.16.0",
+    "eslint-plugin-astro": "^1.3.1",
+    "globals": "^15.13.0",
     "js-yaml": "^4.1.0",
     "mdast-util-to-string": "^4.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
     "reading-time": "^1.5.0",
     "sharp": "0.33.5",
-    "tailwind-merge": "^2.5.3",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.8.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.17.0",
     "unist-util-visit": "^5.0.0"
   }
 }

package.json

@@ -17,13 +17,11 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals
 {
   tags && Array.isArray(tags) && (
     <>
-      <>
-        {title !== undefined && (
-          <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">
-            {title}
-          </span>
-        )}
-      </>
+      {title !== undefined && (
+        <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">
+          {title}
+        </span>
+      )}
       <ul class={className}>
         {tags.map((tag) => (
           <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 py-0.5 px-2 lowercase font-medium">

src/components/blog/Tags.astro

@@ -9,8 +9,8 @@
     class="dark:bg-slate-700 bg-white/40 dark:text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-block"
     >NEW</span
   >
-  <a href="https://astro.build/blog/astro-4150/" class="text-muted hover:underline dark:text-slate-400 font-medium"
-    >Astro 4.15 is now available! »</a
+  <a href="https://astro.build/blog/astro-5/" class="text-muted hover:underline dark:text-slate-400 font-medium"
+    >Astro v5.0.0 is now available! »</a
   >
   <a
     target="_blank"

src/components/widgets/Announcement.astro

@@ -1,4 +1,5 @@
 import { z, defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
 
 const metadataDefinition = () =>
   z
@@ -46,6 +47,7 @@ const metadataDefinition = () =>
     .optional();
 
 const postCollection = defineCollection({
+  loader: glob({ pattern: ['*.md', '*.mdx'], base: 'src/data/post' }),
   schema: z.object({
     publishDate: z.date().optional(),
     updateDate: z.date().optional(),

src/content/config.ts

@@ -13,7 +13,7 @@ import Analytics from '~/components/common/Analytics.astro';
 import BasicScripts from '~/components/common/BasicScripts.astro';
 
 // Comment the line below to disable View Transitions
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 
 import type { MetaData as MetaDataType } from '~/types';
 
@@ -37,7 +37,7 @@ const { language, textDirection } = I18N;
     <Analytics />
 
     <!-- Comment the line below to disable View Transitions -->
-    <ViewTransitions fallback="swap" />
+    <ClientRouter fallback="swap" />
   </head>
 
   <body class="antialiased text-default bg-page tracking-tight">

src/content/post/astrowind-template-in-depth.mdx src/data/post/astrowind-template-in-depth.mdx

@@ -60,7 +60,7 @@ const metadata = {
       <span class="hidden sm:inline">
         Elevate your website creation process with <span class="font-semibold">AstroWind</span>'s SaaS solutions.</span
       >
-      Seamlessly blend the power of Astro 4.0 and Tailwind CSS to craft websites that resonate with your brand and audience.
+      Seamlessly blend the power of Astro 5.0 and Tailwind CSS to craft websites that resonate with your brand and audience.
     </Fragment>
   </Hero2>
 
@@ -73,7 +73,7 @@ const metadata = {
     columns={2}
     items={[
       {
-        title: 'Integration of Astro 4.0 and Tailwind CSS',
+        title: 'Integration of Astro 5.0 and Tailwind CSS',
         description:
           'Offers a powerful combination that enhances both the development process and the end-user experience. Also, allows to build dynamic and visually stunning websites with optimized performance.',
         icon: 'tabler:layers-union',
@@ -96,7 +96,7 @@ const metadata = {
       },
       {
         title: 'Fast loading times and production-ready code',
-        description: `Using Astro 4.0 ensures fast loading and seamless rendering, enhancing browsing. The code follows best practices, improving user experience, SEO, and reducing bounce rates.`,
+        description: `Using Astro 5.0 ensures fast loading and seamless rendering, enhancing browsing. The code follows best practices, improving user experience, SEO, and reducing bounce rates.`,
         icon: 'tabler:rocket',
       },
       {
@@ -117,7 +117,7 @@ const metadata = {
       {
         title: 'Description:',
         description:
-          'Are you a startup with big dreams? AstroWind propels your success. Our template forges a seamless online presence, attracting investors and customers from day one. Astro 4.0 and Tailwind CSS ensure striking, responsive sites, leaving lasting impressions. Countless startups leverage AstroWind to kickstart their journey and resonate with audiences.',
+          'Are you a startup with big dreams? AstroWind propels your success. Our template forges a seamless online presence, attracting investors and customers from day one. Astro 5.0 and Tailwind CSS ensure striking, responsive sites, leaving lasting impressions. Countless startups leverage AstroWind to kickstart their journey and resonate with audiences.',
       },
       {
         title: 'Benefits:',
@@ -147,7 +147,7 @@ const metadata = {
     items={[
       {
         title: 'Description:',
-        description: `For SaaS businesses, user experience is key. AstroWind enhances showcasing SaaS solutions intuitively. The template's Astro 4.0 and Tailwind CSS integration guarantees user-friendly experience, mirroring your software's efficiency. Customize pages to communicate SaaS value and solutions for your audience.`,
+        description: `For SaaS businesses, user experience is key. AstroWind enhances showcasing SaaS solutions intuitively. The template's Astro 5.0 and Tailwind CSS integration guarantees user-friendly experience, mirroring your software's efficiency. Customize pages to communicate SaaS value and solutions for your audience.`,
       },
       {
         title: 'Benefits:',

src/content/post/get-started-website-with-astro-tailwind-css.md src/data/post/get-started-website-with-astro-tailwind-css.md

@@ -60,7 +60,7 @@ const metadata = {
 
   <Features2
     title="About us"
-    subtitle="We believe in the magic of turning dreams into stunning realities. Founded by passionate developers with a shared vision, we set out to simplify the website creation process. Our templates bring together the innovation of Astro 4.0 and the versatility of Tailwind CSS, enabling you to express your unique brand identity like never before."
+    subtitle="We believe in the magic of turning dreams into stunning realities. Founded by passionate developers with a shared vision, we set out to simplify the website creation process. Our templates bring together the innovation of Astro 5.0 and the versatility of Tailwind CSS, enabling you to express your unique brand identity like never before."
   >
     <Fragment slot="bg">
       <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>

src/content/post/how-to-customize-astrowind-to-your-brand.md src/data/post/how-to-customize-astrowind-to-your-brand.md

@@ -36,12 +36,12 @@ const metadata = {
   >
     <Fragment slot="title">
       Free template for <span class="hidden xl:inline">creating websites with</span>
-      <span class="text-accent dark:text-white highlight"> Astro 4.0</span> + Tailwind CSS
+      <span class="text-accent dark:text-white highlight"> Astro 5.0</span> + Tailwind CSS
     </Fragment>
 
     <Fragment slot="subtitle">
       <span class="hidden sm:inline">
-        <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 4.0
+        <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 5.0
         + Tailwind CSS.</span
       >
       <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span>
@@ -60,7 +60,7 @@ const metadata = {
     id="features"
     tagline="Features"
     title="What you get with AstroWind"
-    subtitle="One of the most professional and comprehensive templates currently on the market. Most starred & forked Astro theme in 2022."
+    subtitle="One of the most professional and comprehensive templates currently on the market. Most starred & forked Astro theme in 2022, 2023 and 2024."
     items={[
       {
         title: 'Astro + Tailwind CSS Integration',
@@ -109,7 +109,7 @@ const metadata = {
     title="AstroWind's Blueprint: Fun Meets Functionality!"
     items={[
       {
-        title: 'Built on top of Astro 4.0',
+        title: 'Built on top of Astro 5.0',
         description:
           'Benefiting from the performance and developer-friendly features of this modern static site generator.',
       },

src/content/post/landing.md src/data/post/landing.md

@@ -1,5 +1,5 @@
 import type { PaginateFunction } from 'astro';
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import type { Post } from '~/types';
 import { APP_BLOG } from 'astrowind:config';
@@ -41,8 +41,8 @@ const generatePermalink = async ({
 };
 
 const getNormalizedPost = async (post: CollectionEntry<'post'>): Promise<Post> => {
-  const { id, slug: rawSlug = '', data } = post;
-  const { Content, remarkPluginFrontmatter } = await post.render();
+  const { id, data } = post;
+  const { Content, remarkPluginFrontmatter } = await render(post);
 
   const {
     publishDate: rawPublishDate = new Date(),
@@ -57,7 +57,7 @@ const getNormalizedPost = async (post: CollectionEntry<'post'>): Promise<Post> =
     metadata = {},
   } = data;
 
-  const slug = cleanSlug(rawSlug); // cleanSlug(rawSlug.split('/').pop());
+  const slug = cleanSlug(id); // cleanSlug(rawSlug.split('/').pop());
   const publishDate = new Date(rawPublishDate);
   const updateDate = rawUpdateDate ? new Date(rawUpdateDate) : undefined;
 

src/content/post/markdown-elements-demo-post.mdx src/data/post/markdown-elements-demo-post.mdx

@@ -1,14 +1,16 @@
 import getReadingTime from 'reading-time';
 import { toString } from 'mdast-util-to-string';
 import { visit } from 'unist-util-visit';
-import type { MarkdownAstroData, RehypePlugin, RemarkPlugin } from '@astrojs/markdown-remark';
+import type { RehypePlugin, RemarkPlugin } from '@astrojs/markdown-remark';
 
 export const readingTimeRemarkPlugin: RemarkPlugin = () => {
   return function (tree, file) {
     const textOnPage = toString(tree);
     const readingTime = Math.ceil(getReadingTime(textOnPage).minutes);
 
-    (file.data.astro as MarkdownAstroData).frontmatter.readingTime = readingTime;
+    if (typeof file?.data?.astro?.frontmatter !== 'undefined') {
+      file.data.astro.frontmatter.readingTime = readingTime;
+    }
   };
 };
 

src/content/post/useful-resources-to-create-websites.md src/data/post/useful-resources-to-create-websites.md

@@ -8,5 +8,6 @@
       "~/*": ["src/*"]
     }
   },
+  "include": [".astro/types.d.ts", "**/*"],
   "exclude": ["dist/"]
 }