Updated to Astro v5

astro.config.mjs

@@ -3,10 +3,11 @@ import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 import AutoImport from "astro-auto-import";
-import { defineConfig, squooshImageService } from "astro/config";
+import { defineConfig } from "astro/config";
 import remarkCollapse from "remark-collapse";
 import remarkToc from "remark-toc";
 import config from "./src/config/config.json";
+import sharp from "sharp";
 
 // https://astro.build/config
 export default defineConfig({
@@ -14,7 +15,7 @@ export default defineConfig({
   base: config.site.base_path ? config.site.base_path : "/",
   trailingSlash: config.site.trailing_slash ? "always" : "never",
   image: {
-    service: squooshImageService(),
+    service: sharp(),
   },
   integrations: [
     react(),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
@@ -9,53 +9,54 @@
     "dev": "yarn generate-json && astro dev",
     "build": "yarn generate-json && astro build",
     "preview": "astro preview",
+    "check": "astro check",
     "format": "prettier -w ./src",
     "generate-json": "node scripts/jsonGenerator.js",
     "remove-darkmode": "node scripts/removeDarkmode.js && yarn format"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.3",
+    "@astrojs/check": "0.9.4",
-    "@astrojs/mdx": "^3.1.4",
+    "@astrojs/mdx": "4.0.3",
-    "@astrojs/react": "^3.6.2",
+    "@astrojs/react": "4.1.2",
-    "@astrojs/rss": "^4.0.7",
+    "@astrojs/rss": "4.0.11",
-    "@astrojs/sitemap": "^3.1.6",
+    "@astrojs/sitemap": "3.2.1",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/tailwind": "5.1.4",
-    "astro": "^4.14.5",
+    "astro": "5.1.2",
-    "astro-auto-import": "^0.4.2",
+    "astro-auto-import": "^0.4.4",
     "astro-font": "^0.1.81",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "disqus-react": "^1.1.5",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "marked": "^14.1.0",
+    "marked": "^15.0.5",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.6",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-lite-youtube-embed": "^2.4.0",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
-    "swiper": "^11.1.10"
+    "swiper": "^11.2.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.14",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/marked": "^5.0.2",
-    "@types/node": "22.5.0",
+    "@types/node": "22.10.5",
-    "@types/react": "18.3.4",
+    "@types/react": "19.0.2",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "19.0.2",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.1",
+    "eslint": "^9.17.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.6",
+    "prettier-plugin-tailwindcss": "^0.6.9",
-    "sass": "^1.77.8",
+    "sass": "^1.83.1",
     "sharp": "0.33.5",
     "tailwind-bootstrap-grid": "^5.1.0",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.17",
-    "typescript": "^5.5.4"
+    "typescript": "^5.7.2"
   }
 }

readme.md

@@ -66,7 +66,7 @@
 
 ### 📦 Dependencies
 
-- astro v4.12+
+- astro v5.1+
 - node v20.10+
 - npm v10.2+
 - tailwind v3.4+

src/content.config.ts

@@ -0,0 +1,163 @@
+import { glob } from "astro/loaders";
+import { defineCollection, z } from "astro:content";
+
+// Post collection schema
+const blogCollection = defineCollection({
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "src/content/blog" }),
+  schema: z.object({
+    title: z.string(),
+    meta_title: z.string().optional(),
+    description: z.string().optional(),
+    date: z.date().optional(),
+    image: z.string().optional(),
+    author: z.string().default("Admin"),
+    categories: z.array(z.string()).default(["others"]),
+    tags: z.array(z.string()).default(["others"]),
+    draft: z.boolean().optional(),
+  }),
+});
+
+// Author collection schema
+const authorsCollection = defineCollection({
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "src/content/authors" }),
+  schema: z.object({
+    title: z.string(),
+    meta_title: z.string().optional(),
+    email: z.string().optional(),
+    image: z.string().optional(),
+    description: z.string().optional(),
+    social: z
+      .array(
+        z
+          .object({
+            name: z.string().optional(),
+            icon: z.string().optional(),
+            link: z.string().optional(),
+          })
+          .optional(),
+      )
+      .optional(),
+    draft: z.boolean().optional(),
+  }),
+});
+
+// Pages collection schema
+const pagesCollection = defineCollection({
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "src/content/pages" }),
+  schema: z.object({
+    title: z.string(),
+    meta_title: z.string().optional(),
+    description: z.string().optional(),
+    image: z.string().optional(),
+    draft: z.boolean().optional(),
+  }),
+});
+
+// about collection schema
+const aboutCollection = defineCollection({
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "src/content/about" }),
+  schema: z.object({
+    title: z.string(),
+    meta_title: z.string().optional(),
+    description: z.string().optional(),
+    image: z.string().optional(),
+    draft: z.boolean().optional(),
+  }),
+});
+
+// contact collection schema
+const contactCollection = defineCollection({
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "src/content/contact" }),
+  schema: z.object({
+    title: z.string(),
+    meta_title: z.string().optional(),
+    description: z.string().optional(),
+    image: z.string().optional(),
+    draft: z.boolean().optional(),
+  }),
+});
+
+// Homepage collection schema
+const homepageCollection = defineCollection({
+  loader: glob({ pattern: "**/-*.{md,mdx}", base: "src/content/homepage" }),
+  schema: z.object({
+    banner: z.object({
+      title: z.string(),
+      content: z.string(),
+      image: z.string(),
+      button: z.object({
+        enable: z.boolean(),
+        label: z.string(),
+        link: z.string(),
+      }),
+    }),
+    features: z.array(
+      z.object({
+        title: z.string(),
+        image: z.string(),
+        content: z.string(),
+        bulletpoints: z.array(z.string()),
+        button: z.object({
+          enable: z.boolean(),
+          label: z.string(),
+          link: z.string(),
+        }),
+      }),
+    ),
+  }),
+});
+
+// Call to Action collection schema
+const ctaSectionCollection = defineCollection({
+  loader: glob({
+    pattern: "call-to-action.{md,mdx}",
+    base: "src/content/sections",
+  }),
+  schema: z.object({
+    enable: z.boolean(),
+    title: z.string(),
+    description: z.string(),
+    image: z.string(),
+    button: z.object({
+      enable: z.boolean(),
+      label: z.string(),
+      link: z.string(),
+    }),
+  }),
+});
+
+// Testimonials Section collection schema
+const testimonialSectionCollection = defineCollection({
+  loader: glob({
+    pattern: "testimonial.{md,mdx}",
+    base: "src/content/sections",
+  }),
+  schema: z.object({
+    enable: z.boolean(),
+    title: z.string(),
+    description: z.string(),
+    testimonials: z.array(
+      z.object({
+        name: z.string(),
+        avatar: z.string(),
+        designation: z.string(),
+        content: z.string(),
+      }),
+    ),
+  }),
+});
+
+// Export collections
+export const collections = {
+  // Pages
+  homepage: homepageCollection,
+  blog: blogCollection,
+  authors: authorsCollection,
+  pages: pagesCollection,
+  about: aboutCollection,
+  contact: contactCollection,
+
+  // sections
+  ctaSection: ctaSectionCollection,
+  testimonialSection: testimonialSectionCollection,
+};

src/content/config.ts

@@ -1,57 +0,0 @@
-import { defineCollection, z } from "astro:content";
-
-// Post collection schema
-const blogCollection = defineCollection({
-  schema: z.object({
-    title: z.string(),
-    meta_title: z.string().optional(),
-    description: z.string().optional(),
-    date: z.date().optional(),
-    image: z.string().optional(),
-    author: z.string().default("Admin"),
-    categories: z.array(z.string()).default(["others"]),
-    tags: z.array(z.string()).default(["others"]),
-    draft: z.boolean().optional(),
-  }),
-});
-
-// Author collection schema
-const authorsCollection = defineCollection({
-  schema: z.object({
-    title: z.string(),
-    meta_title: z.string().optional(),
-    email: z.string().optional(),
-    image: z.string().optional(),
-    description: z.string().optional(),
-    social: z
-      .array(
-        z
-          .object({
-            name: z.string().optional(),
-            icon: z.string().optional(),
-            link: z.string().optional(),
-          })
-          .optional(),
-      )
-      .optional(),
-    draft: z.boolean().optional(),
-  }),
-});
-
-// Pages collection schema
-const pagesCollection = defineCollection({
-  schema: z.object({
-    title: z.string(),
-    meta_title: z.string().optional(),
-    description: z.string().optional(),
-    image: z.string().optional(),
-    draft: z.boolean().optional(),
-  }),
-});
-
-// Export collections
-export const collections = {
-  blog: blogCollection,
-  authors: authorsCollection,
-  pages: pagesCollection,
-};

src/env.d.ts

@@ -1,2 +0,0 @@
-/// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />

src/layouts/Base.astro

@@ -7,7 +7,7 @@ import Footer from "@/partials/Footer.astro";
 import Header from "@/partials/Header.astro";
 import "@/styles/main.scss";
 import { AstroFont } from "astro-font";
-import { ViewTransitions } from "astro:transitions";
+import { ClientRouter } from "astro:transitions";
 import SearchModal from "./helpers/SearchModal";
 
 // font families
@@ -111,7 +111,7 @@ const { title, meta_title, description, image, noindex, canonical } =
       )}
     />
 
-    <ViewTransitions />
+    <ClientRouter />
 
     <!-- author from config.json -->
     <meta name="author" content={config.metadata.meta_author} />

src/layouts/PostSingle.astro

@@ -8,13 +8,14 @@ import similarItems from "@/lib/utils/similarItems";
 import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
 import { FaRegClock, FaRegFolder, FaRegUserCircle } from "react-icons/fa";
 import ImageMod from "./components/ImageMod.astro";
+import { render } from "astro:content";
 
 const COLLECTION_FOLDER = "blog";
 const { post } = Astro.props;
 
 const posts = await getSinglePage(COLLECTION_FOLDER);
 const similarPosts = similarItems(post, posts);
-const { Content } = await post.render();
+const { Content } = await render(post);
 const { title, description, author, categories, image, date, tags } = post.data;
 ---
 

src/layouts/components/AuthorCard.astro

@@ -23,7 +23,7 @@ const { title, image, social } = data.data;
     )
   }
   <h4 class="mb-3">
-    <a href={`/authors/${data.slug}`}>{title}</a>
+    <a href={`/authors/${data.id}`}>{title}</a>
   </h4>
   <p class="mb-4">
     {plainify(data.body?.slice(0, 100))}

src/layouts/components/BlogCard.astro

@@ -27,7 +27,7 @@ const { title, image, date, author, categories } = data.data;
     )
   }
   <h4 class="mb-3">
-    <a href={`/${blog_folder}/${data.slug}`}>
+    <a href={`/${blog_folder}/${data.id}`}>
       {title}
     </a>
   </h4>
@@ -52,10 +52,7 @@ const { title, image, date, author, categories } = data.data;
     {date && <li class="inline-block">{dateFormat(date)}</li>}
   </ul>
   <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
-  <a
+  <a class="btn btn-outline-primary btn-sm" href={`/${blog_folder}/${data.id}`}>
-    class="btn btn-outline-primary btn-sm"
-    href={`/${blog_folder}/${data.slug}`}
-  >
     read more
   </a>
 </div>

src/lib/contentParser.astro

@@ -6,7 +6,7 @@ import {
 } from "astro:content";
 
 export const getSinglePage = async <C extends CollectionKey>(
-  collectionName: C,
+  collectionName: C
 ): Promise<CollectionEntry<C>[]> => {
   const allPages = await getCollection(collectionName);
   const removeIndex = allPages.filter((data) => data.id.match(/^(?!-)/));

src/pages/[regular].astro

@@ -2,6 +2,7 @@
 import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import PageHeader from "@/partials/PageHeader.astro";
+import { render } from "astro:content";
 
 // get static paths for all pages
 export async function getStaticPaths() {
@@ -11,7 +12,7 @@ export async function getStaticPaths() {
 
   const paths = pages.map((page) => ({
     params: {
-      regular: page.slug,
+      regular: page.id,
     },
     props: { page },
   }));
@@ -20,7 +21,7 @@ export async function getStaticPaths() {
 
 const { page } = Astro.props;
 const { title, meta_title, description, image } = page.data;
-const { Content } = await page.render();
+const { Content } = await render(page);
 ---
 
 <Base

src/pages/about.astro

@@ -2,10 +2,11 @@
 import ImageMod from "@/components/ImageMod.astro";
 import Base from "@/layouts/Base.astro";
 import { markdownify } from "@/lib/utils/textConverter";
-import { getEntry } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import { getEntry, render } from "astro:content";
 
-const about = await getEntry("about", "-index");
+const about = (await getEntry("about", "-index")) as CollectionEntry<"about">;
-const { Content } = await about.render();
+const { Content } = await render(about);
 const { title, description, meta_title, image } = about.data;
 ---
 

src/pages/authors/[single].astro

@@ -5,6 +5,7 @@ import Social from "@/components/Social.astro";
 import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { slugify } from "@/lib/utils/textConverter";
+import { render } from "astro:content";
 
 // get all static paths for authors
 export async function getStaticPaths() {
@@ -13,7 +14,7 @@ export async function getStaticPaths() {
 
   const paths = authors.map((author) => ({
     params: {
-      single: author.slug,
+      single: author.id,
     },
     props: { author },
   }));
@@ -22,13 +23,13 @@ export async function getStaticPaths() {
 
 const { author } = Astro.props;
 const { title, social, meta_title, description, image } = author.data;
-const { Content } = await author.render();
+const { Content } = await render(author);
 
 // get all posts by author
 const BLOG_FOLDER = "blog";
 const posts = await getSinglePage(BLOG_FOLDER);
 const postFilterByAuthor = posts.filter(
-  (post) => slugify(post.data.author) === slugify(title),
+  (post) => slugify(post.data.author) === slugify(title)
 );
 ---
 

src/pages/authors/index.astro

@@ -3,11 +3,14 @@ import AuthorCard from "@/components/AuthorCard.astro";
 import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import PageHeader from "@/partials/PageHeader.astro";
-import { getEntry } from "astro:content";
+import { getEntry, type CollectionEntry } from "astro:content";
 
 const COLLECTION_FOLDER = "authors";
 
-const authorIndex = await getEntry(COLLECTION_FOLDER, "-index");
+const authorIndex = (await getEntry(
+  COLLECTION_FOLDER,
+  "-index"
+)) as CollectionEntry<"authors">;
 const authors = await getSinglePage(COLLECTION_FOLDER);
 ---
 

src/pages/blog/[single].astro

@@ -9,7 +9,7 @@ export async function getStaticPaths() {
 
   const paths = posts.map((post) => ({
     params: {
-      single: post.slug,
+      single: post.id,
     },
     props: { post },
   }));

src/pages/blog/index.astro

@@ -8,11 +8,15 @@ import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { sortByDate } from "@/lib/utils/sortFunctions";
 import PageHeader from "@/partials/PageHeader.astro";
 import PostSidebar from "@/partials/PostSidebar.astro";
+import type { CollectionEntry } from "astro:content";
 import { getEntry } from "astro:content";
 
 const BLOG_FOLDER = "blog";
 
-const postIndex = await getEntry(BLOG_FOLDER, "-index");
+const postIndex = (await getEntry(
+  BLOG_FOLDER,
+  "-index"
+)) as CollectionEntry<"blog">;
 const posts = await getSinglePage(BLOG_FOLDER);
 const allCategories = await getAllTaxonomy(BLOG_FOLDER, "categories");
 const categories = await getTaxonomy(BLOG_FOLDER, "categories");
@@ -28,7 +32,7 @@ const currentPosts = sortedPosts.slice(0, config.settings.pagination);
   image={postIndex.data.image}
   description={postIndex.data.description}
 >
-  <PageHeader title={postIndex.data.title} />
+  <PageHeader title={postIndex?.data.title} />
   <section class="section">
     <div class="container">
       <div class="row gx-5">

src/pages/blog/page/[slug].astro

@@ -8,12 +8,16 @@ import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { sortByDate } from "@/lib/utils/sortFunctions";
 import PageHeader from "@/partials/PageHeader.astro";
 import PostSidebar from "@/partials/PostSidebar.astro";
+import type { CollectionEntry } from "astro:content";
 import { getEntry } from "astro:content";
 
 const BLOG_FOLDER = "blog";
 
 const { slug } = Astro.params;
-const postIndex = await getEntry(BLOG_FOLDER, "-index");
+const postIndex = (await getEntry(
+  BLOG_FOLDER,
+  "-index"
+)) as CollectionEntry<"blog">;
 const posts = await getSinglePage(BLOG_FOLDER);
 const allCategories = await getAllTaxonomy(BLOG_FOLDER, "categories");
 const categories = await getTaxonomy(BLOG_FOLDER, "categories");

src/pages/contact.astro

@@ -3,8 +3,12 @@ import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import PageHeader from "@/partials/PageHeader.astro";
 import { getEntry } from "astro:content";
+import type { CollectionEntry } from "astro:content";
 
-const contact = await getEntry("contact", "-index");
+const contact = (await getEntry(
+  "contact",
+  "-index"
+)) as CollectionEntry<"contact">;
 const { contact_form_action }: { contact_form_action: string } = config.params;
 const { title, description, meta_title, image } = contact.data;
 ---

src/pages/index.astro

@@ -5,6 +5,7 @@ import { markdownify } from "@/lib/utils/textConverter";
 import CallToAction from "@/partials/CallToAction.astro";
 import Testimonial from "@/partials/Testimonial.astro";
 import type { Button, Feature } from "@/types";
+import type { CollectionEntry } from "astro:content";
 import { getEntry } from "astro:content";
 import { FaCheck } from "react-icons/fa";
 
@@ -18,10 +19,22 @@ interface Homepage {
   features: Feature[];
 }
 
-const homepage = await getEntry("homepage", "-index");
+const homepage = (await getEntry(
-const testimonial = await getEntry("sections", "testimonial");
+  "homepage",
-const call_to_action = await getEntry("sections", "call-to-action");
+  "-index"
-const { banner, features }: Homepage = homepage.data;
+)) as CollectionEntry<"homepage">;
+
+const testimonial = (await getEntry(
+  "testimonialSection",
+  "testimonial"
+)) as CollectionEntry<"testimonialSection">;
+
+const call_to_action = (await getEntry(
+  "ctaSection",
+  "call-to-action"
+)) as CollectionEntry<"ctaSection">;
+
+const { banner, features } = homepage.data as Homepage;
 ---
 
 <Base>

tsconfig.json

@@ -19,6 +19,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.astro"],
+  "include": [".astro/types.d.ts", "**/*.ts", "**/*.tsx", "**/*.astro"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "dist"]
 }