Add support for blog tags with meta v2

remix-austin · Jul 19, 2023 · 7979a8b · 7979a8b
1 parent 304fab0
commit 7979a8b
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 46 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -2,7 +2,7 @@ import { redirect } from "@remix-run/node";
 import type {
   LinksFunction,
   LoaderFunction,
-  MetaFunction,
+  V2_MetaFunction,
 } from "@remix-run/node";
 import {
   Links,
@@ -29,23 +29,65 @@ const defaultDescription =
 const baseUrl = "https://remixaustin.com/";
 const logoUrl = "https://remixaustin.com/img/remix-logo-rainbow.jpg";
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: defaultTitle,
-  description: defaultDescription,
-  viewport: "width=device-width,initial-scale=1",
-  "twitter:card": "summary_large_image",
-  "twitter:title": defaultTitle,
-  "twitter:description": defaultDescription,
-  "twitter:image": logoUrl,
-  "twitter:image:alt": "Remix Austin logo",
-  "og:type": "website",
-  "og:title": defaultTitle,
-  "og:site_name": "Remix Austin 💿",
-  "og:description": defaultDescription,
-  "og:url": baseUrl,
-  "og:image": logoUrl,
-});
+export const meta: V2_MetaFunction = () => [
+  {
+    name: "charset",
+    content: "utf-8",
+  },
+  { title: defaultTitle },
+  {
+    name: "description",
+    content: defaultDescription,
+  },
+  {
+    name: "viewport",
+    content: "width=device-width,initial-scale=1",
+  },
+  {
+    name: "twitter:card",
+    content: "summary_large_image",
+  },
+  {
+    name: "twitter:title",
+    content: defaultTitle,
+  },
+  {
+    name: "twitter:description",
+    content: defaultDescription,
+  },
+  {
+    name: "twitter:image",
+    content: logoUrl,
+  },
+  {
+    name: "twitter:image:alt",
+    content: "Remix Austin logo",
+  },
+  {
+    name: "og:type",
+    content: "website",
+  },
+  {
+    name: "og:title",
+    content: defaultTitle,
+  },
+  {
+    name: "og:site_name",
+    content: "Remix Austin 💿",
+  },
+  {
+    name: "og:description",
+    content: defaultDescription,
+  },
+  {
+    name: "og:url",
+    content: baseUrl,
+  },
+  {
+    name: "og:image",
+    content: logoUrl,
+  },
+];
 
 export const loader: LoaderFunction = async ({ request }) => {
   // Redirect if "www." is in the url.

diff --git a/app/routes/blog.$slug.test.tsx b/app/routes/blog.$slug.test.tsx
@@ -96,4 +96,32 @@ Hello, world.
       expect(cacheControlHeader).toBe(LONG_CACHE_MAX_AGE);
     });
   });
+
+  it("should have blog tags in <head> for <meta>", async () => {
+    const tag = "testTag";
+    const todayPublishDate = new Date().toISOString();
+    const testMdx = `---
+title: Title
+date: ${todayPublishDate}
+tags:
+  - ${tag}
+---
+# Header
+
+Hello, world.
+`;
+    mockUrlResponse(TEST_GET_BLOG_POST_URL, {
+      json: await bundleMdx(testMdx, SLUG, POSTS_BUILD_DIR),
+    });
+    const args = urlToLoaderArgs(TEST_POST_URL, { path: { slug: SLUG } });
+    const response = await loader(args);
+    const loaderData = await response.json();
+    const {
+      post: { code, ...metaProps },
+    } = loaderData;
+    expect(metaProps).toEqual({
+      slug: SLUG,
+      frontmatter: { title: "Title", date: todayPublishDate, tags: [tag] },
+    });
+  });
 });
diff --git a/app/routes/blog.$slug.tsx b/app/routes/blog.$slug.tsx
@@ -1,4 +1,4 @@
-import type { HeadersFunction, MetaFunction } from "@remix-run/node";
+import type { HeadersFunction, V2_MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { type LoaderArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
@@ -47,35 +47,87 @@ export const headers: HeadersFunction = ({ loaderHeaders }) => ({
   "Cache-Control": loaderHeaders.get("Cache-Control") ?? "no-cache",
 });
 
-/**
- * TODO: When we update to Remix v2, we need to change this function according to this
- * page in the docs: https://remix.run/docs/en/1.16.0/pages/v2#route-meta
- * Blog tags can't be added to meta in Remix v1. We need to wait until v2.
- */
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
+  if (!data) {
+    return [];
+  }
   const {
-    frontmatter: { title, author, date, imageUrl, imageAlt, description },
+    frontmatter: { title, author, date, imageUrl, imageAlt, description, tags },
   } = data.post;
   const origin = new URL(data.url).origin;
-  return {
-    title,
-    description,
-    "og:url": data.url,
-    "og:type": "article",
-    "og:author": author,
-    "og:published_time": new Date(date).toISOString(),
-    "og:title": title,
-    "og:description": description,
-    "og:image": imageUrl[0] === "/" ? `${origin}${imageUrl}` : imageUrl,
-    "og:image:alt": imageAlt,
-    "og:image:type": "image/jpeg",
-    "og:image:width": "1200",
-    "og:image:height": "630",
-    "twitter:image": imageUrl[0] === "/" ? `${origin}${imageUrl}` : imageUrl,
-    "twitter:image:alt": imageAlt,
-    "twitter:description": description,
-    "twitter:title": title,
-  };
+  return [
+    { title },
+    {
+      name: "description",
+      content: description,
+    },
+    {
+      name: "og:url",
+      content: data.url,
+    },
+    {
+      name: "og:type",
+      content: "article",
+    },
+    {
+      name: "og:author",
+      content: author,
+    },
+    {
+      name: "og:published_time",
+      content: new Date(date).toISOString(),
+    },
+    {
+      name: "og:title",
+      content: title,
+    },
+    {
+      name: "og:description",
+      content: description,
+    },
+    {
+      name: "og:image",
+      content: imageUrl[0] === "/" ? `${origin}${imageUrl}` : imageUrl,
+    },
+    {
+      name: "og:image:alt",
+      content: imageAlt,
+    },
+    {
+      name: "og:image:type",
+      content: "image/jpeg",
+    },
+    {
+      name: "og:image:width",
+      content: "1200",
+    },
+    {
+      name: "og:image:height",
+      content: "630",
+    },
+    {
+      name: "twitter:image",
+      content: imageUrl[0] === "/" ? `${origin}${imageUrl}` : imageUrl,
+    },
+    {
+      name: "twitter:image:alt",
+      content: imageAlt,
+    },
+    {
+      name: "twitter:description",
+      content: description,
+    },
+    {
+      name: "twitter:title",
+      content: title,
+    },
+    ...(tags
+      ? tags.map((tag) => ({
+          name: "article:tag",
+          content: tag,
+        }))
+      : []),
+  ];
 };
 
 export default function BlogSlugRoute() {

diff --git a/blog/posts/making-the-remix-austin-blog.mdx b/blog/posts/making-the-remix-austin-blog.mdx
@@ -5,6 +5,13 @@ author: Matt Hernandez
 description: How did we make a blog integration in Remix? Read about the crazy winding journey here.
 imageUrl: /posts/img/blog-banner-resized-690.jpg
 imageAlt: The word "Blog" over a blurred image of a code editor
+tags:
+  - Remix
+  - React
+  - Javascript
+  - Web development
+  - Blog
+  - Austin
 ---
 
 import { BlogImage } from "./components/BlogImage";

diff --git a/remix.config.js b/remix.config.js
@@ -6,7 +6,7 @@ module.exports = {
   tailwind: true,
   future: {
     v2_errorBoundary: true,
-    v2_meta: false,
+    v2_meta: true,
     v2_normalizeFormMethod: true,
     v2_routeConvention: true,
     unstable_dev: true,