Updates ddev.com to astro 4.5, fixes #165, fixes #156, fixes #155, fixes #157, fixes #159

astro.config.mjs

@@ -1,7 +1,6 @@
 import { defineConfig } from "astro/config"
 import { plainTextPlugin } from "@barnabask/astro-minisearch"
 import { remarkReadingTime } from "./src/lib/remark-reading-time.mjs"
-import { astroImageTools } from "astro-imagetools"
 import prefetch from "@astrojs/prefetch"
 import react from "@astrojs/react"
 import robotsTxt from "astro-robots-txt"
@@ -20,7 +19,6 @@ export default defineConfig({
   integrations: [
     tailwind(),
     react(),
-    astroImageTools,
     sitemap({
       serialize(item) {
         if (

package.json

@@ -14,29 +14,28 @@
   },
   "dependencies": {
     "@astrojs/prefetch": "^0.4.0",
-    "@astrojs/react": "^3.0.2",
-    "@astrojs/rss": "^3.0.0",
+    "@astrojs/react": "^3.1.0",
+    "@astrojs/rss": "^4.0.0",
     "@astrojs/sitemap": "^3.0.0",
-    "@astrojs/tailwind": "^5.0.0",
+    "@astrojs/tailwind": "^5.1.0",
     "@barnabask/astro-minisearch": "^2.1.1",
     "@heroicons/react": "^2.0.13",
     "@octokit/auth-app": "^6.0.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.8",
-    "astro": "^3.2.0",
-    "astro-imagetools": "^0.9.0",
+    "astro": "^4.5.10",
     "astro-robots-txt": "^1.0.0",
     "astro-seo": "^0.8.0",
     "autoprefixer": "^10.4.16",
-    "base64-img": "^1.0.4",
     "github-slugger": "^2.0.0",
     "glob": "^10.3.10",
     "image-size": "^1.0.2",
     "linkedom": "^0.15.3",
     "marked": "^9.0.3",
     "mdast-util-to-string": "^4.0.0",
     "nanoid": "^5.0.1",
+    "node-base64-image": "^2.0.6",
     "octokit": "^3.1.1",
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.0",

src/components/BlogPostCard.astro

@@ -3,12 +3,12 @@
  * A single card used to represent a blog post. Should probably be placed in a flex grid.
  */
 import type { CollectionEntry } from "astro:content"
+import { Picture } from 'astro:assets'
 interface Props {
   post: CollectionEntry<"blog">
 }
 
 import { getEntryBySlug } from "astro:content"
-import { Picture } from "astro-imagetools/components"
 import { getSlug, formatDate, getCategoryUrl } from "../lib/api"
 
 const { post } = Astro.props
@@ -45,17 +45,11 @@ const firstCategory = post.data.categories.length
         <img src={featureImageUrl} alt={featureImageAlt} />
       ) : (
         <Picture
-          attributes={{
-            picture: {
-              class: `block h-48 w-full object-cover relative`,
-            },
-          }}
-          format={["webp"]}
+          class="block h-48 w-full object-cover relative",
           src={featureImageUrl}
           alt={featureImageAlt}
           width={600}
           height={400}
-          fit="cover"
         />
       )
     }

src/components/FeatureImage.astro

@@ -1,6 +1,6 @@
 ---
 import { marked } from "marked"
-import { Picture } from "astro-imagetools/components"
+import { Picture } from 'astro:assets'
 
 export interface Props {
   src: string
@@ -24,16 +24,11 @@ const { src, alt, caption = "", credit, shadow = false } = Astro.props
         }
       >
         <Picture
-          format={["webp"]}
-          breakpoints={{ count: 3, maxWidth: 1800 }}
-          attributes={{
-            picture: {
-              class: `block rounded-lg`,
-              style: `clip-path: inset(0% 0% 0% 0% round 0.5rem)`,
-            },
-          }}
+          class= "block rounded-lg"
           src={src}
           alt={alt}
+          width={900}
+          height={500}
         />
       </div>
     )

src/content/config.ts

@@ -1,6 +1,6 @@
-import { z, defineCollection } from 'astro:content'
+import { defineCollection, z} from 'astro:content'
 import fs2 from "fs"
-import glob from "glob"
+import { glob } from "glob"
 
 const allowedCategories = ['Announcements', 'Community', 'DevOps', 'Performance', 'Guides', 'Videos']
 
@@ -19,7 +19,6 @@ const getAuthorNames = () => {
   return authorNames;
 }
 
-
 /**
  * Below we’re defining schemas for our Content Collections so their
  * frontmatter can be validated.

src/lib/search-index.js

@@ -1,5 +1,5 @@
 import fs2 from "fs"
-import glob from "glob"
+import { glob } from "glob"
 import { getSearchIndex } from "@barnabask/astro-minisearch"
 import { fileURLToPath } from "node:url"
 import { parseHTML } from "linkedom"
@@ -101,8 +101,6 @@ export default function searchIndex(config) {
           })
         }
 
-        // console.log(items)
-
         // Generate the index in the format we need
         let index = await getSearchIndex(items)
 

src/pages/blog/feed.json.js

@@ -33,8 +33,9 @@ const feed = {
   items: feedItems,
 }
 
-export async function get({ params, request }) {
-  return {
-    body: JSON.stringify(feed),
-  }
+export async function GET(context) {
+  return Response.json({
+    success: true,
+    result: feed
+  })
 }

src/pages/blog/rss.xml.js

@@ -50,8 +50,8 @@ const items = recentPosts.map((post) => {
 
 const buildDate = new Date().toUTCString()
 
-export const get = () =>
-  rss({
+export async function GET(context) {
+  return rss({
     title: `DDEV Blog`,
     description: BLOG_DESCRIPTION,
     site: blogUrl,
@@ -70,3 +70,4 @@ export const get = () =>
       <webfeeds:logo>${baseUrl}/favicon/type-only.svg</webfeeds:logo>
     `,
   })
+}

src/pages/newsletter.astro

@@ -1,8 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro"
 import Heading from "../components/Heading.astro"
-import CtaButton from "../components/CtaButton.astro"
-// import { Img } from "astro-imagetools/components"
 
 const title = `Newsletter`
 

src/pages/resources/featured-sponsors-darkmode.svg.js

@@ -1,6 +1,6 @@
 import featuredSponsors from "../../featured-sponsors.json"
 import sizeOf from "image-size"
-import base64Img from "base64-img"
+import {encode} from 'node-base64-image';
 
 const baseUrl = import.meta.env.SITE
 
@@ -67,7 +67,7 @@ const buildResponse = () => {
   images.map((image) => {
     response += `
       <a xlink:href="${image.url}" target="_blank">
-        <image href="${base64Img.base64Sync(image.path)}" x="${image.x}" y="${image.y}" height="${image.height}" width="${image.width}" />
+        <image href="${encode(image.path)}" x="${image.x}" y="${image.y}" height="${image.height}" width="${image.width}" />
       </a>
     `
   })

src/pages/resources/featured-sponsors.svg.js

@@ -1,6 +1,6 @@
 import featuredSponsors from "../../featured-sponsors.json"
 import sizeOf from "image-size"
-import base64Img from "base64-img"
+import {encode} from 'node-base64-image';
 
 const baseUrl = import.meta.env.SITE
 
@@ -67,7 +67,7 @@ const buildResponse = () => {
   images.map((image) => {
     response += `
       <a xlink:href="${image.url}" target="_blank">
-        <image href="${base64Img.base64Sync(image.path)}" x="${image.x}" y="${image.y}" height="${image.height}" width="${image.width}" />
+        <image href="${encode(image.path)}" x="${image.x}" y="${image.y}" height="${image.height}" width="${image.width}" />
       </a>
     `
   })

src/pages/support-ddev.astro

@@ -9,7 +9,7 @@ import {
   GITHUB_URL,
 } from "../const"
 import Sponsors from "../components/Sponsors.astro"
-import { Img } from "astro-imagetools/components"
+import { Image } from "astro:assets"
 
 const title = `Support DDEV`
 ---
@@ -52,15 +52,13 @@ const title = `Support DDEV`
           > a GitHub Issue or Pull Request.
         </p>
 
-        <Img
+        <Image
           src="/img/pr.png"
           alt="Screenshot of GitHub PR #217, where @beeradb added new version notifications"
-          placeholder="dominantColor"
-          attributes={{
-            img: {
-              class: `shadow-lg rounded-lg`,
-            },
-          }}
+          class="rounded-lg"
+          width={600}
+          height={400}
+          loading="lazy"
         />
       </div>
 
@@ -104,15 +102,13 @@ const title = `Support DDEV`
           development.
         </p>
 
-        <Img
+        <Image
           src="/img/discord.png"
           alt="Screenshot of Discord server, with several active Q&A channels"
-          placeholder="dominantColor"
-          attributes={{
-            img: {
-              class: `rounded-lg`,
-            },
-          }}
+          class="rounded-lg"
+          width={600}
+          height={400}
+          loading="lazy"
         />
       </div>
 
@@ -137,15 +133,13 @@ const title = `Support DDEV`
         </p>
 
         <figure>
-          <Img
+          <Image
             src="/img/edit-docs.png"
             alt="Screenshot visually highlighting the “Edit this page” icon in the docs and pointing to its corresponding GitHub URL"
-            placeholder="dominantColor"
-            attributes={{
-              img: {
-                class: `rounded-lg`,
-              },
-            }}
+            class="rounded-lg"
+            width={600}
+            height={400}
+            loading="lazy"
           />
 
           <figcaption>
@@ -213,15 +207,13 @@ const title = `Support DDEV`
           to join us!
         </p>
 
-        <Img
+        <Image
           src="/img/advisory-group-call.png"
           alt="Screenshot of an advisory group Zoom call with a grid of sixteen faces"
-          placeholder="dominantColor"
-          attributes={{
-            img: {
-              class: `rounded-lg`,
-            },
-          }}
+          class="rounded-lg"
+          width={600}
+          height={400}
+          loading="lazy"
         />
       </div>