fix: better responsive image sizes and structured data image

Author: renbou

app/(articles)/ArticlePreview.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Picture from "next-export-optimize-images/image";
+import Picture from "next-export-optimize-images/picture";
 import type { StaticImageData } from "next/image";
 import Link from "next/link";
 import React, { useContext, useState } from "react";
@@ -66,7 +66,7 @@ export default function ArticlePreview(props: PreviewProps) {
         >
           <Picture
             className="absolute inset-0 z-0 h-full w-full rounded-xl object-cover"
-            sizes="100vw, (min-width: 768px) 50vw, (min-width: 1024px) 33vw"
+            sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
             src={props.cover}
             alt={props.title}
             width={1600}

app/(articles)/ctf/[slug]/page.tsx

@@ -113,6 +113,7 @@ export default async function ArticlePage({
       gender: author.gender,
       email: author.email,
       sameAs: author.extraLinks?.map((link) => link.toString()),
+      image: `${baseUrl}/covers/ctf/${slug}/${metadata.cover}`,
     },
   };
 

app/(articles)/ctf/page.tsx

@@ -1,5 +1,5 @@
 import { authors, list, loadMetadata } from "..";
-import { StaticImageData } from "next/image";
+import path from "path";
 
 import "./article-listing.css";
 
@@ -29,11 +29,10 @@ export default async function Articles() {
   let articles: PreviewProps[] = await Promise.all(
     pages.map(async (page): Promise<PreviewProps> => {
       const metadata = await loadMetadata("ctf", page.slug);
-      const image = await import(`@/articles/ctf/${page.slug}/cover.png`);
       return {
         title: metadata.title,
         summary: metadata.summary,
-        cover: image.default as StaticImageData,
+        cover: path.join("/covers", "ctf", page.slug, metadata.cover),
         coverAlt: metadata.coverAlt,
         author: `${authors[metadata.author].name} (${metadata.author})`,
         date: new Date(metadata.publishedAt).toLocaleDateString("en-US", {

app/(articles)/index.ts

@@ -21,6 +21,7 @@ export const ArticleMetadata = z.object({
     .nonempty()
     // https://ogtester.com/blog/what-is-maximum-length-of-og-title-and-og-description
     .max(150, "Summary should be less than 150 characters"),
+  cover: z.string().nonempty(),
   coverAlt: z.string().nonempty(),
   author: z.enum(["renbou", "qwqoro", "slonser"]),
   publishedAt: z.string().datetime(), // exposed in OpenGraph meta

articles/ctf/blazctf-2024-solalloc-writeup/metadata.json

@@ -1,6 +1,7 @@
 {
   "title": "Draining a Solana Vault via Pointer Corruption on BlazCTF",
   "summary": "Step-by-step analysis and exploitation of a binary vulnerability in a Solana smart contract. Writeup for the Solalloc task from BlazCTF 2024.",
+  "cover": "exploding-vault-with-blazctf-dinosaur.png",
   "coverAlt": "Hand pointing at exploding vault with BlazCTF-themed pixelated T-Rex",
   "author": "renbou",
   "publishedAt": "2024-11-23T10:00:00Z",

next.config.mjs

@@ -8,7 +8,7 @@ import withExportImages from "next-export-optimize-images";
 const nextConfig = {
   output: "export",
   images: {
-    deviceSizes: [384, 768, 1024, 2048],
+    deviceSizes: [384, 768, 1200, 2048],
     imageSizes: [128, 256],
   },
   reactStrictMode: false,