Add opengraph info to blog posts

.github/workflows/deploy.yml

@@ -75,6 +75,7 @@ jobs:
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BASE_URL: https://ruffle.rs
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

.github/workflows/test.yml

@@ -39,3 +39,4 @@ jobs:
         run: npx --no-install next build
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BASE_URL: https://ruffle.rs

README.md

@@ -15,3 +15,9 @@ For instructions on how to create a PAT, see [Github's documentation](https://do
 The PAT only needs **read only access** to `ruffle-rs/ruffle` (contents and metadata), or to be lazy, pick "Public Repositories (read-only)".
 
 Set the PAT on the `GITHUB_TOKEN` environment variable for `npm run build`/`npm run dev` to pick it up.
+
+## Configure URL
+
+Some parts of the website require absolute URLs, such as opengraph data. It fetches this from the environment variable `BASE_URL`.
+
+In local development you'll probably want to set it to `http://localhost:3000`, and in production we use `https://ruffle.rs`

blog_posts/2024-01-14-2023-in-review.markdown

@@ -3,6 +3,10 @@ title:  "2023 in review"
 date:   2024-01-14 08:28:00 +0100
 author: Dinnerbone
 icon: /undraw/undraw_new_year_2023_pfnc.svg
+images:
+  - /2024-01-14-2023-in-review/ninja-painter.png
+videos:
+  - /2024-01-14-2023-in-review/transformice.mp4
 ---
 It's been a very busy 2023 for Ruffle, so much so that we didn't find the time to write a new progress report with everything going on! Let's fix that!
 

src/app/blog/[year]/[month]/[date]/[slug]/page.tsx

@@ -1,6 +1,36 @@
 import { getPostData, getSortedPostsData, PostPath } from "@/app/blog/utils";
 import { Container } from "@mantine/core";
 import { BlogPost } from "@/app/blog/post";
+import { Metadata } from "next";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: PostPath;
+}): Promise<Metadata> {
+  const post = getPostData(
+    `${params.year}-${params.month}-${params.date}-${params.slug}.markdown`,
+  );
+  const baseUrl = process.env.BASE_URL || "";
+  return {
+    title: `${post.title} - Ruffle`,
+    description: post.excerpt.split("\n")[0].trim(),
+    metadataBase: baseUrl ? new URL(baseUrl) : null,
+    openGraph: {
+      type: "article",
+      title: post.title,
+      siteName: "Ruffle",
+      publishedTime: new Date(
+        Number(post.year),
+        Number(post.month),
+        Number(post.date),
+      ).toISOString(),
+      authors: [post.author],
+      images: post.images?.map((path) => baseUrl + path),
+      videos: post.videos?.map((path) => baseUrl + path),
+    },
+  };
+}
 
 export default function Page({ params }: { params: PostPath }) {
   const post = getPostData(

src/app/blog/utils.tsx

@@ -2,7 +2,7 @@ import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
 
-const postsDirectory = path.join(process.cwd(), "blog_posts");
+export const postsDirectory = path.join(process.cwd(), "blog_posts");
 
 /**
  * This is the block of settings at the top of each blog post file.
@@ -11,6 +11,8 @@ interface PostInformation {
   title: string;
   author: string;
   icon: string;
+  images?: string[];
+  videos?: string[];
 }
 
 export interface PostPath {

src/app/layout.tsx

@@ -10,6 +10,8 @@ export const metadata: Metadata = {
   title: "Ruffle - Flash Emulator",
   description:
     "Ruffle is a Flash Player emulator written in Rust. Ruffle targets both desktop and the web using WebAssembly.",
+  applicationName: "Ruffle",
+  creator: "Ruffle Contributors",
   icons: [
     { url: "/favicon-32.png", sizes: "32x32" },
     { url: "/favicon-64.png", sizes: "64x64" },