feat(website): optimize blog images and fix meta/a11y (#973)

website/astro.config.ts

@@ -108,6 +108,10 @@ export default defineConfig({
 
 	compressHTML: true,
 
+	image: {
+		domains: ["avatars.githubusercontent.com"],
+	},
+
 	integrations: [
 		react(),
 		starlight({

website/src/components/BlogPostInfo.astro

@@ -1,6 +1,7 @@
 ---
 import "@src/styles/blog/index.scss";
 import { getEntry, type CollectionEntry } from "astro:content";
+import { Image } from "astro:assets";
 
 export interface Props {
   post: CollectionEntry<"blog">["data"];
@@ -26,7 +27,7 @@ const authors = await getAuthorsData(
     {
       authors.map(({ data: author }) => (
         <span class="avatar">
-          <img src={author.avatar} />
+          <Image src={author.avatar} alt="" height="36" width="36" />
         </span>
       ))
     }

website/src/content/blog/annoucing-biome.mdx

@@ -7,9 +7,9 @@ authors:
   - core
 pubDate: 2023-08-29
 coverImage:
-  src: blog/announcing-biome/biome-logo-slogan.png
+  src: ../../assets/social-logo.png
   alt: The name of the project - "Biome", with the slogan underneath that says "Toolchain of the web"
-socialImage: blog/announcing-biome/biome-logo-slogan.png
+socialImage: ../../assets/social-logo.png
 ---
 
 We are happy to announce Biome, _toolchain of the web_.
@@ -60,11 +60,7 @@ A few new [OSS contributors](#the-core-team) joined the cause and helped in cont
 
 In June, I [gave a talk](https://portal.gitnation.org/contents/rome-a-modern-toolchain) about Rome at JsNation 2023.
 
-<img
-  src="/img/blog/announcing-biome/JsNation_2023.jpg"
-  width="100%"
-  alt="Emanuele Stoppa on the stage of JsNation"
-/>
+![Emanuele Stoppa on the stage of JsNation](../../assets/blog/announcing-biome/JsNation_2023.jpg)
 
 So, the project is still alive, but maintaining it has become challenging:
 

website/src/content/blog/biome-v1.mdx

@@ -6,7 +6,7 @@ authors:
   - ema
   - core
 pubDate: 2023-08-29
-socialImage: social-logo.png
+socialImage: ../../assets/social-logo.png
 ---
 
 In Biome v1, the formatter has options for JSX quotes and parentheses in the arrow functions; the CLI adds a new command `biome lint`, `.jsonc` files are supported, and it's possible to extend the configuration file.

website/src/content/blog/biome-wins-prettier-challenge.md

@@ -7,9 +7,9 @@ authors:
   - team
 pubDate: 2023-11-27
 coverImage:
-  src: blog/prettier-challenge.png
+  src: ../../assets/blog/prettier-challenge.png
   alt: The Prettier challenge banner, with the Biome logo over it
-socialImage: blog/prettier-challenge.png
+socialImage: ../../assets/blog/prettier-challenge.png
 ---
 
 With the release of Biome **`v1.4.0`**, we claim the bounty of the [Prettier challenge](https://console.algora.io/challenges/prettier)!

website/src/content/config.ts

@@ -1,38 +1,39 @@
 import { docsSchema } from "@astrojs/starlight/schema";
 // src/content/config.ts
-import { defineCollection, z } from "astro:content";
+import { type ImageFunction, defineCollection, z } from "astro:content";
 
-const blogSchema = z.object({
-	title: z.string(),
-	subtitle: z.string().optional(),
-	pubDate: z
-		.string()
-		.or(z.date())
-		.transform((val) => new Date(val)),
-	summary: z.string(),
-	description: z.string(),
-	authors: z.array(z.string()),
-	coverImage: z
-		.object({
-			src: z.string(),
-			caption: z.string().optional(),
-			alt: z.string(),
-		})
-		.optional(),
-	socialImage: z.string(),
-});
+const blogSchema = (image: ImageFunction) =>
+	z.object({
+		title: z.string(),
+		subtitle: z.string().optional(),
+		pubDate: z
+			.string()
+			.or(z.date())
+			.transform((val) => new Date(val)),
+		summary: z.string(),
+		description: z.string(),
+		authors: z.array(z.string()),
+		coverImage: z
+			.object({
+				src: image(),
+				caption: z.string().optional(),
+				alt: z.string(),
+			})
+			.optional(),
+		socialImage: image(),
+	});
 
 const authorsSchema = z.object({
 	name: z.string(),
 	avatar: z.string(),
-	url: z.string().optional(),
+	url: z.string().url().optional(),
 });
 
 export const collections = {
 	docs: defineCollection({ schema: docsSchema() }),
 	blog: defineCollection({
 		type: "content",
-		schema: blogSchema,
+		schema: ({ image }) => blogSchema(image),
 	}),
 	authors: defineCollection({
 		type: "data",

website/src/layouts/Blog.astro

@@ -1,6 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import BlogPostInfo from "@src/components/BlogPostInfo.astro";
+import { Image } from "astro:assets";
 
 export interface Props {
   post: CollectionEntry<"blog">["data"];
@@ -13,7 +14,7 @@ const { post } = Astro.props;
   {
     post.coverImage && (
       <figure class="blog-cover">
-        <img alt={post.coverImage.alt} src={`/img/${post.coverImage.src}`} />
+        <Image alt={post.coverImage.alt} src={post.coverImage.src} />
         {post.coverImage.caption && (
           <figcaption class="blog-cover-caption">
             {post.coverImage.caption}

website/src/layouts/StarlightSplashLayout.astro

@@ -5,11 +5,17 @@ import Page from "@astrojs/starlight/components/Page.astro";
 
 export interface Props {
   title: string;
+  description: string;
   slug: string;
+  head?: Array<{
+    tag: string;
+    attrs?: Record<string, string | boolean | undefined>;
+    content?: string;
+  }>;
   editUrl?: string;
 }
 
-function getPageProps(title: string, slug: string, editUrl?: string) {
+function getPageProps({ title, description, slug, head = [], editUrl }: Props) {
   const entryMeta = { dir: "ltr", lang: "en", locale: undefined } as LocaleData;
 
   return {
@@ -22,9 +28,11 @@ function getPageProps(title: string, slug: string, editUrl?: string) {
             tag: "title",
             content: `${title} | Biome`,
           },
+          ...head,
         ],
         pagefind: false,
         title,
+        description,
         template: "splash",
       },
       slug,
@@ -48,9 +56,7 @@ function getPageProps(title: string, slug: string, editUrl?: string) {
   };
 }
 
-const { title, slug, editUrl } = Astro.props;
-
-const pageProps = getPageProps(title, slug, editUrl);
+const pageProps = getPageProps(Astro.props);
 ---
 
 <Page {...pageProps}>

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

@@ -2,6 +2,7 @@
 import { getCollection, type CollectionEntry } from "astro:content";
 import BlogLayout from "@src/layouts/Blog.astro";
 import StarlightSplashLayout from "@src/layouts/StarlightSplashLayout.astro";
+import { getImage } from "astro:assets";
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection("blog");
@@ -19,11 +20,36 @@ const { entry } = Astro.props;
 const { Content } = await entry.render();
 
 const post = entry.data;
+
+const processedImage = await getImage({ src: post.socialImage });
+const socialImageUrl = new URL(
+  processedImage.src,
+  `${Astro.url.origin}/`
+).toString();
+
+const head = [
+  {
+    tag: "meta",
+    attrs: {
+      property: "og:image",
+      content: socialImageUrl,
+    },
+  },
+  {
+    tag: "meta",
+    attrs: {
+      property: "twitter:image",
+      content: socialImageUrl,
+    },
+  },
+];
 ---
 
 <StarlightSplashLayout
   title={post.title}
+  description={post.description}
   slug={entry.slug}
+  head={head}
   editUrl={`https://github.com/biomejs/biome/edit/main/website/src/content/blog/${entry.id}`}
 >
   <BlogLayout post={post}>

website/src/pages/blog/index.astro

@@ -3,6 +3,10 @@ import PostsList from "@src/components/PostsList.astro";
 import StarlightSplashLayout from "@src/layouts/StarlightSplashLayout.astro";
 ---
 
-<StarlightSplashLayout title="Blog" slug="">
+<StarlightSplashLayout
+  title="Blog"
+  description="Biome's toolchain official blog"
+  slug=""
+>
   <PostsList />
 </StarlightSplashLayout>