migrate to astro v3

astro.config.mjs

@@ -1,10 +1,9 @@
-import image from "@astrojs/image";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 import AutoImport from "astro-auto-import";
-import { defineConfig } from "astro/config";
+import { defineConfig, squooshImageService } from "astro/config";
 import remarkCollapse from "remark-collapse";
 import remarkToc from "remark-toc";
 import config from "./src/config/config.json";
@@ -14,6 +13,9 @@ export default defineConfig({
   site: config.site.base_url ? config.site.base_url : "http://examplesite.com",
   base: config.site.base_path ? config.site.base_path : "/",
   trailingSlash: config.site.trailing_slash ? "always" : "never",
+  image: {
+    service: squooshImageService(),
+  },
   integrations: [
     react(),
     sitemap(),
@@ -22,9 +24,6 @@ export default defineConfig({
         applyBaseStyles: false,
       },
     }),
-    image({
-      serviceEntryPoint: "@astrojs/image/sharp",
-    }),
     AutoImport({
       imports: [
         "@/shortcodes/Button",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "1.4.2",
+  "version": "2.0.0",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "@astrojs/image": "^0.17.3",
-    "@astrojs/mdx": "^0.19.7",
-    "@astrojs/react": "^2.3.2",
-    "@astrojs/rss": "^2.4.4",
-    "@astrojs/sitemap": "^2.0.2",
-    "@astrojs/tailwind": "^4.0.0",
-    "astro": "^2.10.12",
+    "@astrojs/mdx": "^1.0.0",
+    "@astrojs/react": "^3.0.0",
+    "@astrojs/rss": "^3.0.0",
+    "@astrojs/sitemap": "^3.0.0",
+    "@astrojs/tailwind": "^5.0.0",
+    "astro": "^3.0.7",
     "astro-auto-import": "^0.3.1",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
@@ -27,9 +27,9 @@
     "fuse.js": "^6.6.2",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "marked": "^7.0.3",
-    "prettier-plugin-astro": "^0.11.1",
-    "prettier-plugin-tailwindcss": "^0.5.3",
+    "marked": "^8.0.0",
+    "prettier-plugin-astro": "^0.12.0",
+    "prettier-plugin-tailwindcss": "^0.5.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -41,21 +41,21 @@
     "swiper": "^10.2.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.4",
+    "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.5.9",
     "@types/marked": "^5.0.1",
-    "@types/node": "20.5.1",
-    "@types/react": "18.2.20",
+    "@types/node": "20.5.9",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "^10.4.15",
-    "eslint": "^8.47.0",
-    "postcss": "^8.4.28",
-    "prettier": "^3.0.2",
-    "prettier-plugin-astro": "^0.11.1",
-    "prettier-plugin-tailwindcss": "^0.5.3",
+    "eslint": "^8.48.0",
+    "postcss": "^8.4.29",
+    "prettier": "^3.0.3",
+    "prettier-plugin-astro": "^0.12.0",
+    "prettier-plugin-tailwindcss": "^0.5.4",
     "sass": "^1.66.1",
     "tailwindcss": "^3.3.3",
     "tailwind-bootstrap-grid": "^5.0.1",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   }
 }

src/env.d.ts

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

src/layouts/PostSingle.astro

@@ -7,7 +7,7 @@ import { getSinglePage } from "@/lib/contentParser.astro";
 import dateFormat from "@/lib/utils/dateFormat";
 import similerItems from "@/lib/utils/similarItems";
 import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import {
   FaRegClock,
   FaRegFolder,

src/layouts/components/AuthorCard.astro

@@ -1,6 +1,6 @@
 ---
 import { plainify } from "@/lib/utils/textConverter";
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import Social from "./Social.astro";
 
 const { data } = Astro.props;

src/layouts/components/BlogCard.astro

@@ -1,7 +1,7 @@
 ---
 import config from "@/config/config.json";
 import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import { FaRegFolder, FaRegUserCircle } from "react-icons/fa/index.js";
 
 const {

src/layouts/components/Logo.astro

@@ -1,6 +1,6 @@
 ---
 import config from "@/config/config.json";
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 
 const { src, srcDarkmode }: { src?: string; srcDarkmode?: string } =
   Astro.props;

src/layouts/partials/CallToAction.astro

@@ -1,6 +1,6 @@
 ---
 import { markdownify } from "@/lib/utils/textConverter";
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 const { call_to_action } = Astro.props;
 ---
 

src/layouts/partials/Testimonial.astro

@@ -1,6 +1,6 @@
 ---
 import { markdownify } from "@/lib/utils/textConverter";
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 const { testimonial } = Astro.props;
 ---
 

src/lib/utils/textConverter.ts

@@ -1,11 +1,6 @@
 import { slug } from "github-slugger";
 import { marked } from "marked";
 
-marked.use({
-  mangle: false,
-  headerIds: false,
-});
-
 // slugify
 export const slugify = (content: string) => {
   return slug(content);

src/pages/about.astro

@@ -1,7 +1,7 @@
 ---
 import Base from "@/layouts/Base.astro";
 import { markdownify } from "@/lib/utils/textConverter";
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import { getEntryBySlug } from "astro:content";
 
 const about = await getEntryBySlug("about", "-index");

src/pages/authors/[single].astro

@@ -5,7 +5,7 @@ import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { slugify } from "@/lib/utils/textConverter";
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 
 export async function getStaticPaths() {
   const authors = await getSinglePage("authors");

src/pages/index.astro

@@ -4,7 +4,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 { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import { getEntryBySlug } from "astro:content";
 import { FaCheck } from "react-icons/fa/index.js";