feat: generate Open Graph images and add og: and twitter: metadata

package.json

@@ -34,6 +34,7 @@
     "@octokit/graphql-schema": "^14.39.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/parse-github-url": "^1.0.2",
+    "astro-og-canvas": "^0.2.1",
     "dotenv": "^16.3.1",
     "linkedom": "^0.16.1",
     "parse-github-url": "^1.0.2",

src/components/HeadSEO.astro

@@ -0,0 +1,36 @@
+---
+import { getOpenGraphImageURL } from "../util/getOpenGraphImageURL";
+
+const { canonicalURL, openGraphData } = Astro.props;
+
+let canonicalImageSrc;
+
+if (openGraphData.staticImage) {
+  const imagePath = canonicalURL.pathname.replaceAll(/\//g, '')
+  canonicalImageSrc = new URL('images/' + (imagePath ? imagePath : 'index') + '.png', Astro.site);
+} else {
+  const ogImageUrl = getOpenGraphImageURL(canonicalURL.pathname, !!Astro.params.fallback);
+  const imageSrc = ogImageUrl ? ogImageUrl : '/images/index.png';
+  canonicalImageSrc = new URL(imageSrc, Astro.site);
+}
+
+---
+
+<link rel="canonical" href={canonicalURL} />
+
+<meta property="og:url" content={canonicalURL} />
+<meta property="og:title" content={openGraphData.title} />
+<meta property="og:description" content={openGraphData.description} />
+<meta property="og:type" content={openGraphData.type} />
+<meta property="og:locale" content="en_US" />
+<meta property="og:image" content={canonicalImageSrc} />
+<meta property="og:image:alt" content={openGraphData.title + '—' + openGraphData.description} />
+<meta property="og:site_name" content="Open {re}Source" />
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={"open_resource"} />
+<meta name="twitter:author" content={"JulienDeramond"} />
+<meta name="twitter:title" content={openGraphData.title} />
+<meta name="twitter:description" content={openGraphData.description} />
+<meta name="twitter:image" content={canonicalImageSrc} />
+<meta name="twitter:image:alt" content={openGraphData.title + '—' + openGraphData.description} />

src/content/config.ts

@@ -1,5 +1,12 @@
 import { z, defineCollection } from 'astro:content';
 
+const OpenGraphSchemaDataSchema = z.object({
+  description: z.string(),
+  staticImage: z.boolean(),
+  title: z.string(),
+  type: z.string(),
+})
+
 const structuredDataSchema = z.object({
   article: z.object({
     headline: z.string().optional(),
@@ -87,6 +94,7 @@ export const collections = {
   'showcase': showcaseCollection
 };
 
+export type OpenGraphData = z.infer<typeof OpenGraphSchemaDataSchema>;
 export type Showcase = z.infer<typeof showcaseSchema>;
 export type ShowcaseLink = z.infer<typeof showcaseLinkSchema>;
 export type ShowcaseUnknownLink = z.infer<typeof showcaseUnknownLinkSchema>;

src/layouts/Layout.astro

@@ -4,7 +4,8 @@ import Footer from '../components/Footer.astro';
 import '../global.css';
 import ProgressScroll from '../components/ProgressScroll.astro';
 import SkipLink from '../components/SkipLink.astro';
-import type { StructuredData } from '../content/config';
+import type { OpenGraphData, StructuredData } from '../content/config';
+import HeadSEO from '../components/HeadSEO.astro';
 
 import '@docsearch/css';
 
@@ -14,18 +15,23 @@ export interface Props {
 	title: string;
   progressScroll?: boolean;
   structuredData: StructuredData;
+  openGraphData: OpenGraphData;
 }
 
-const { home = false, title, description, progressScroll = false, structuredData } = Astro.props;
+// Ensures the canonicalURL always has a trailing slash.
+const canonicalURL = new URL(Astro.url.pathname.replace(/([^/])$/, '$1/'), Astro.site);
+
+const { home = false, title, description, progressScroll = false, structuredData, openGraphData } = Astro.props;
 
 let articleSchema;
+
 if (structuredData?.article) {
   articleSchema = JSON.stringify({
     "@context": "https://schema.org/",
     "@type": "Article",
     "headline": structuredData?.article?.headline,
     "description": structuredData?.article?.description,
-    "image": "https://openresource.dev/og-image.png",
+    "image": "https://openresource.dev/images/open-graph" + canonicalURL.pathname.slice(0, -1) + ".png",
     "author": {
       "@type": "Person",
       "name": "Julien Déramond",
@@ -76,6 +82,7 @@ if (structuredData?.article) {
 		<link href="https://fosstodon.org/@openresource" rel="me">
     <link rel="preconnect" href="https://H12KLKNKCO-dsn.algolia.net" crossorigin />
     <title>Open &lcub;re&rcub;Source - {title}</title>
+    <HeadSEO canonicalURL={canonicalURL} openGraphData={openGraphData} />
     {
       articleSchema && <script type="application/ld+json" set:html={articleSchema}></script>
     }

src/pages/404.astro

@@ -1,12 +1,14 @@
 ---
+export const prerender = true
+
 import Layout from '../layouts/Layout.astro';
 
 const {
   title = 'Your platform for Open Source',
   description = 'Join Open Source, learn to create, manage, and contribute to projects with Open {re}Source. Make a difference today by sharing and collaborating.'
 } = Astro.props;
 ---
-<Layout title={ title } description={ description } home={ true }>
+<Layout title={ title } description={ description } home={ true } openGraphData={{title: title, type: "website", staticImage: true, description: description}}>
 	<section class="hero py-40">
 		<div class="hero-content text-center">
 			<div class="max-w-md prose lg:prose-xl">

src/pages/about-author/index.astro

@@ -9,7 +9,7 @@ const {
   description = 'Find some information about Julien Déramond, the author of Open {re}Source.'
 } = Astro.props;
 ---
-<Layout title={ title } description={ description }>
+<Layout title={ title } description={ description } openGraphData={{title: title, type: "website", staticImage: true, description: description}}>
   <div class="bg-base-100 py-8 flex flex-col justify-center relative overflow-hidden lg:py-12">
     <div class="relative w-full px-6 py-12 bg-base-100 shadow-xl shadow-base-300 ring-1 ring-base-200 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
       <div class="mt-8 prose prose-slate mx-auto lg:prose-lg">

src/pages/articles/[...slug].astro

@@ -27,7 +27,7 @@ entry.data.structuredData = {
 
 const { Content } = await entry.render();
 ---
-<Layout title={entry.data.title} description={entry.data.description} progressScroll={true} structuredData={entry.data.structuredData}>
+<Layout title={entry.data.title} description={entry.data.description} progressScroll={true} structuredData={entry.data.structuredData} openGraphData={{title: entry.data.title, type: "website", description: entry.data.description}}>
   <div class="bg-base-100 py-8 flex flex-col justify-center relative overflow-hidden lg:py-12">
     <div class="relative w-full px-6 py-12 bg-base-100 shadow-xl shadow-base-300 ring-1 ring-base-200 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
       <article class="mt-8 prose prose-slate mx-auto lg:prose-lg">

src/pages/articles/index.astro

@@ -12,7 +12,7 @@ const {
 
 const allArticles = await getCollection('articles');
 ---
-<Layout title={ title } description={ description }>
+<Layout title={ title } description={ description } openGraphData={{title: title, type: "article", staticImage: true, description: description}}>
   <div class="bg-base-100 py-8 flex flex-col justify-center relative overflow-hidden lg:py-12">
     <div class="relative w-full px-6 py-12 bg-base-100 shadow-xl shadow-base-300 ring-1 ring-base-200 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
       <svg class="w-full" height="25" viewBox="0 0 450 78" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

src/pages/cookie-policy/index.astro

@@ -8,7 +8,7 @@ const {
   description = 'Learn about our use of local storage to enhance your browsing experience. Our cookie-free policy prioritizes your privacy and preferences.'
 } = Astro.props;
 ---
-<Layout title={ title } description={ description }>
+<Layout title={ title } description={ description } openGraphData={{title: title, type: "website", staticImage: true, description: description}}>
   <div class="bg-base-100 py-8 flex flex-col justify-center relative overflow-hidden lg:py-12">
     <div class="relative w-full px-6 py-12 bg-base-100 shadow-xl shadow-base-300 ring-1 ring-base-200 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
       <div class="mt-8 prose prose-slate mx-auto lg:prose-lg">

src/pages/guide/[...slug].astro

@@ -45,10 +45,11 @@ export async function getStaticPaths() {
 }
 
 const { entry, isIndex, orderedFilteredChapters, module } = Astro.props;
+
 const { Content } = await entry.render();
 ---
 { isIndex && (
-<Layout title={ entry.data.title } description={ entry.data.metaDescription }>
+<Layout title={ entry.data.title } description={ entry.data.metaDescription } openGraphData={{title: entry.data.title, type: "website", description: entry.data.metaDescription}}>
   <div class="bg-base-100 pb-8 flex flex-col justify-center relative overflow-hidden xl:pb-12">
     <div class="md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-4 lg:pb-4">
       <div class="text-sm breadcrumbs px-2">
@@ -90,7 +91,7 @@ const { Content } = await entry.render();
 )}
 
 { !isIndex && (
-<Layout title={ entry.data.title } description={ entry.data.metaDescription } progressScroll={true}>
+<Layout title={ entry.data.title } description={ entry.data.metaDescription } progressScroll={true} openGraphData={{title: entry.data.title, type: "article", description: entry.data.metaDescription}}>
   <div class="text-sm breadcrumbs pb-8">
     <ul>
       <li><a href="/guide">Guide</a></li>

src/pages/guide/index.astro

@@ -25,7 +25,7 @@ const {
     ).sort((a, b) => a.data.id - b.data.id)
 } = Astro.props;
 ---
-<Layout title={ title } description={ description }>
+<Layout title={ title } description={ description } openGraphData={{title: title, type: "website", staticImage: true, description: description}}>
   <div class="bg-base-100 py-8 flex flex-col justify-center relative overflow-hidden lg:py-12">
     <div class="relative w-full px-6 py-12 bg-base-100 shadow-xl shadow-base-300 ring-1 ring-base-200 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
       <svg class="w-full" height="25" viewBox="0 0 450 78" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

src/pages/index.astro

@@ -9,7 +9,7 @@ const {
   description = 'Join Open Source, learn to create, manage, and contribute to projects with Open {re}Source. Make a difference today by sharing and collaborating.'
 } = Astro.props;
 ---
-<Layout title={ title } description={ description } home={ true }>
+<Layout title={ title } description={ description } home={ true } openGraphData={{title: title, type: "website", staticImage: true, description: description}}>
 	<section class="hero py-40">
 		<div class="hero-content text-center">
 			<div class="max-w-md prose lg:prose-xl">

src/pages/open-graph/[...path].ts

@@ -0,0 +1,46 @@
+import { OGImageRoute } from 'astro-og-canvas';
+
+export const prerender = true;
+
+const pages = await import.meta.glob('/src/content/**/*.mdx', { eager: true });
+
+// Convert the glob result to remove the `/src/content` prefix
+Object.keys(pages).forEach(path => {
+  const newPath = path.replace(/^\/src\/content/, '');
+  pages[newPath] = pages[path];
+  delete pages[path];
+});
+
+export const { getStaticPaths, GET } = OGImageRoute({
+  param: 'path',
+  // A collection of pages to generate images for.
+  pages,
+  // For each page, this callback will be used to customize the OpenGraph
+  // image. For example, if `pages` was passed a glob like above, you
+  // could read values from frontmatter.
+  getImageOptions: (path, page) => ({
+    title: page.frontmatter.title,
+    description: page.frontmatter.description,
+    logo: {
+      path: './src/docs-logo.png',
+    },
+		bgGradient: [[255, 255, 255]],
+		font: {
+			title: {
+				color: [0, 0, 0],
+				families: [
+					'Roboto'
+				]
+			},
+			description: {
+				color: [0, 0, 0],
+				families: [
+					'Roboto'
+				]
+			}
+		},
+		fonts: [
+			'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/fonts/roboto/Roboto-Regular.ttf'
+		]
+  }),
+});

src/pages/open-sourcerers/index.astro

@@ -8,7 +8,7 @@ const {
   description = 'Meet the Open Sourcerers, Open Source enthusiasts who are passionate about sharing their knowledge and experience with the Open Source community.'
 } = Astro.props;
 ---
-<Layout title={ title } description={ description }>
+<Layout title={ title } description={ description } openGraphData={{title: title, type: "website", staticImage: true, description: description}}>
   <div class="bg-base-100 py-8 flex flex-col justify-center relative overflow-hidden lg:py-12">
     <div class="relative w-full px-6 py-12 bg-base-100 shadow-xl shadow-base-300 ring-1 ring-base-200 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
       <svg class="w-full" height="25" viewBox="0 0 450 78" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

src/pages/showcase/index.astro

@@ -33,7 +33,7 @@ const description =
   "Explore what the Open {re}Source community builds for the Open Source world.";
 ---
 
-<Layout title={title} description={description}>
+<Layout title={title} description={description} openGraphData={{title: title, type: "website", staticImage: true, description: description}}>
   <div class="bg-base-100 py-8 flex flex-col justify-center relative overflow-hidden lg:py-12">
     <div class="relative w-full px-6 py-12 bg-base-100 shadow-xl shadow-base-300 ring-1 ring-base-200 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
       <div class="mt-8 prose prose-slate mx-auto lg:prose-lg">

src/util/getOpenGraphImageURL.ts

@@ -0,0 +1,21 @@
+import type { GetStaticPathsOptions, GetStaticPathsResult } from 'astro';
+import { getStaticPaths } from '../pages/open-graph/[...path]';
+
+const routes = (await getStaticPaths({} as GetStaticPathsOptions)) as GetStaticPathsResult;
+
+/**
+ * Get the path to the Open Graph image for a page
+ * @param path Pathname of the page URL.
+ * @param isFallback Whether or not this page is displaying fallback content.
+ * @returns Path to the Open Graph image if found. Otherwise, `undefined`.
+ */
+export function getOpenGraphImageURL(path: string, isFallback: boolean): string | undefined {
+  let imagePath = path.replace(/^\//, '').replace(/\/$/, '') + '.png';
+
+	if (isFallback) {
+		// Replace the language segment with 'en' for fallback pages.
+		imagePath = 'en' + imagePath.slice(imagePath.indexOf('/'));
+	}
+
+  return '/open-graph/' + imagePath;
+}