From 5bee326cea6a3ecacf8e8323a8c6ebf1eea1a84b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Thu, 28 Dec 2023 10:16:17 +0400
Subject: [PATCH] feat(seo): json-ld, siblings article, json-ld, time tag

---
 app/blog/[...slug]/page.tsx | 124 ++++++++++++++++++++++++++++++------
 app/blog/page.tsx           |  18 ++----
 app/blog/sitemap.ts         |  17 +++++
 app/sitemap.xml             |   6 ++
 components/PostCard.tsx     |  31 +++++----
 lib/blog-api.tsx            |   3 +
 next-sitemap.config.js      |   5 ++
 package.json                |   1 +
 pnpm-lock.yaml              |  26 +++++++-
 public/main-sitemap.xml     |   6 ++
 10 files changed, 193 insertions(+), 44 deletions(-)
 create mode 100644 app/blog/sitemap.ts
 create mode 100644 app/sitemap.xml
 create mode 100644 next-sitemap.config.js
 create mode 100644 public/main-sitemap.xml

diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx
index 9405c20..d96cacc 100644
--- a/app/blog/[...slug]/page.tsx
+++ b/app/blog/[...slug]/page.tsx
@@ -1,8 +1,19 @@
 import { Metadata, ResolvingMetadata } from "next";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import * as React from "react";
 
 import { Container } from "@/components/Container";
+import {
+  PostCard,
+  PostCardAuthor,
+  PostCardBody,
+  PostCardDate,
+  PostCardFooter,
+  PostCardImage,
+  PostCardTag,
+  PostCardTitle,
+} from "@/components/PostCard";
 import { getArticleBySlug, getArticles, getDocMdxSource } from "@/lib/blog-api";
 
 type Props = {
@@ -48,33 +59,108 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
+async function Siblings({ slug }: { slug: string }) {
+  const articles = await getArticles();
+  const sideArticles = articles
+    .filter((article) => article.slug !== slug)
+    .map((value) => ({ value, sort: Math.random() }))
+    .sort((a, b) => a.sort - b.sort)
+    .map(({ value }) => value)
+    .slice(0, 2);
+  return (
+    <section>
+      <h3 className="mb-8 text-2xl font-semibold text">Read also</h3>
+      <div className="grid grid-cols-2 gap-x-16 gap-y-20">
+        {sideArticles.map((article) => {
+          return (
+            <Link
+              key={article.slug}
+              href={`/blog/${article.slug}`}
+              className="contents"
+            >
+              <PostCard className="col-span-2 md:col-span-1">
+                <PostCardImage
+                  width={article.image.width}
+                  height={article.image.height}
+                  src={article.image.src}
+                  alt={article.imageAlt}
+                />
+                <PostCardBody>
+                  {article.category && (
+                    <PostCardTag>{article.category}</PostCardTag>
+                  )}
+                  <PostCardTitle>{article.title}</PostCardTitle>
+                  <PostCardFooter>
+                    <PostCardAuthor>{article.author}</PostCardAuthor>
+                    <div className="text-xs text-mauve-10">|</div>
+                    <PostCardDate date={article.date} />
+                  </PostCardFooter>
+                </PostCardBody>
+              </PostCard>
+            </Link>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  dateStyle: "long",
+});
+
 export default async function Page({ params }: Props) {
   const article = await getArticleFromParams(params);
   if (!article) {
     notFound();
   }
   const source = await getDocMdxSource(article);
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "NewsArticle",
+    headline: article.title,
+    image: [article.image.src],
+    datePublished: article.date,
+    dateModified: article.updatedAt ?? article.date,
+    author: [
+      {
+        "@type": "Person",
+        name: article.author,
+      },
+    ],
+  };
   return (
-    <article
-      className="prose mx-auto mb-24 mt-14 max-w-none dark:prose-invert"
-      style={{ contain: "none" }}
-    >
+    <>
+      <article
+        className="prose mx-auto mb-24 mt-14 max-w-none dark:prose-invert"
+        style={{ contain: "none" }}
+      >
+        <Container tight>
+          <header>
+            {article.category && (
+              <div className="mb-4 font-medium text-violet-11">
+                {article.category}
+              </div>
+            )}
+            <h1>{article.title}</h1>
+            <div className="my-4 flex items-center gap-2 text-sm text-low">
+              <time dateTime={article.date}>
+                {dateFormatter.format(new Date(article.date))}
+              </time>
+              <div className="text-xs text-mauve-10">|</div>
+              <address className="not-italic">{article.author}</address>
+            </div>
+          </header>
+          {source}
+        </Container>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </article>
       <Container tight>
-        {article.category && (
-          <div className="mb-4 font-medium text-violet-11">
-            {article.category}
-          </div>
-        )}
-        <h1>{article.title}</h1>
-        <div className="my-4 flex items-center gap-2 text-sm text-low">
-          {new Intl.DateTimeFormat("en-US", {
-            dateStyle: "long",
-          }).format(new Date(article.date))}
-          <div className="text-xs text-mauve-10">|</div>
-          {article.author}
-        </div>
-        {source}
+        <Siblings slug={article.slug} />
       </Container>
-    </article>
+    </>
   );
 }
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index babc187..adedcc1 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -15,12 +15,6 @@ import {
 } from "@/components/PostCard";
 import { getArticles } from "@/lib/blog-api";
 
-const formatDate = (date: string) => {
-  return new Intl.DateTimeFormat("en-US", {
-    dateStyle: "medium",
-  }).format(new Date(date));
-};
-
 export const metadata: Metadata = {
   metadataBase: new URL("https://argos-ci.com"),
   title: "Updates from the Argos team",
@@ -45,8 +39,8 @@ export default async function Page() {
         </h1>
       </div>
       <div className="mt-12 grid grid-cols-2 gap-x-16 gap-y-20">
-        <Link href={`/blog/${firstArticle.slug}`} className="col-span-2">
-          <PostCard>
+        <Link href={`/blog/${firstArticle.slug}`} className="contents">
+          <PostCard className="col-span-2">
             <PostCardImage
               width={firstArticle.image.width}
               height={firstArticle.image.height}
@@ -65,7 +59,7 @@ export default async function Page() {
               <PostCardFooter>
                 <PostCardAuthor>{firstArticle.author}</PostCardAuthor>
                 <span className="text-low">|</span>
-                <PostCardDate>{formatDate(firstArticle.date)}</PostCardDate>
+                <PostCardDate date={firstArticle.date} />
               </PostCardFooter>
             </PostCardBody>
           </PostCard>
@@ -76,9 +70,9 @@ export default async function Page() {
             <Link
               key={article.slug}
               href={`/blog/${article.slug}`}
-              className="col-span-2 md:col-span-1"
+              className="contents"
             >
-              <PostCard>
+              <PostCard className="col-span-2 md:col-span-1">
                 <PostCardImage
                   width={article.image.width}
                   height={article.image.height}
@@ -96,7 +90,7 @@ export default async function Page() {
                   <PostCardFooter>
                     <PostCardAuthor>{article.author}</PostCardAuthor>
                     <div className="text-xs text-mauve-10">|</div>
-                    <PostCardDate>{formatDate(article.date)}</PostCardDate>
+                    <PostCardDate date={article.date} />
                   </PostCardFooter>
                 </PostCardBody>
               </PostCard>
diff --git a/app/blog/sitemap.ts b/app/blog/sitemap.ts
new file mode 100644
index 0000000..fc23025
--- /dev/null
+++ b/app/blog/sitemap.ts
@@ -0,0 +1,17 @@
+import { MetadataRoute } from "next";
+
+import { getArticles } from "@/lib/blog-api";
+
+const BASE_URL = "https://argos-ci.com";
+
+export default async function sitemap({
+  id,
+}: {
+  id: number;
+}): Promise<MetadataRoute.Sitemap> {
+  const articles = await getArticles();
+  return articles.map((article) => ({
+    url: `${BASE_URL}/blog/${article.slug}`,
+    lastModified: article.date,
+  }));
+}
diff --git a/app/sitemap.xml b/app/sitemap.xml
new file mode 100644
index 0000000..2e52963
--- /dev/null
+++ b/app/sitemap.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<sitemap><loc>https://argos-ci.com/main-sitemap.xml</loc></sitemap>
+<sitemap><loc>https://argos-ci.com/blog/sitemap.xml</loc></sitemap>
+<sitemap><loc>https://argos-ci.com/docs/sitemap.xml</loc></sitemap>
+</sitemapindex>
\ No newline at end of file
diff --git a/components/PostCard.tsx b/components/PostCard.tsx
index fa6b0ce..dbaeaf5 100644
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@@ -1,16 +1,9 @@
 import { clsx } from "clsx";
 import Image, { ImageProps } from "next/image";
 import type { ComponentProps, ReactNode } from "react";
+import { twc } from "react-twc";
 
-export const PostCard = ({ children }: { children: ReactNode }) => (
-  <div
-    className={clsx(
-      "rounded-lg border bg-subtle text-left transition duration-300 hover:-translate-y-2 hover:scale-[101%]",
-    )}
-  >
-    {children}
-  </div>
-);
+export const PostCard = twc.div`rounded-lg border bg-subtle text-left transition duration-300 hover:-translate-y-2 hover:scale-[101%]"`;
 
 export interface PostCardImageProps extends ImageProps {
   extended?: Boolean;
@@ -83,6 +76,20 @@ export const PostCardAuthor = (props: ComponentProps<"div">) => (
   <div className="text-low" {...props} />
 );
 
-export const PostCardDate: React.FC<{ children: React.ReactNode }> = (
-  props,
-) => <div className="text-low" {...props} />;
+const formatDate = (date: string) => {
+  return new Intl.DateTimeFormat("en-US", {
+    dateStyle: "medium",
+  }).format(new Date(date));
+};
+
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  dateStyle: "medium",
+});
+
+export const PostCardDate = ({ date }: { date: string }) => {
+  return (
+    <time className="text-low" dateTime={date}>
+      {dateFormatter.format(new Date(date))}
+    </time>
+  );
+};
diff --git a/lib/blog-api.tsx b/lib/blog-api.tsx
index f47809f..8b57caa 100644
--- a/lib/blog-api.tsx
+++ b/lib/blog-api.tsx
@@ -15,6 +15,7 @@ const FrontmatterSchema = z.object({
   title: z.string(),
   description: z.string(),
   date: z.date(),
+  updatedAt: z.date().optional(),
   author: z.string(),
   image: z.string(),
   imageAlt: z.string(),
@@ -26,6 +27,7 @@ export type Article = {
   title: string;
   description: string;
   date: string;
+  updatedAt: string | null;
   author: string;
   image: StaticImageData;
   imageAlt: string;
@@ -72,6 +74,7 @@ async function getArticleDataFromPath(
     description: frontmatter.description,
     slug,
     date: frontmatter.date.toISOString(),
+    updatedAt: frontmatter.updatedAt?.toISOString() ?? null,
     author: frontmatter.author,
     category: frontmatter.category,
   };
diff --git a/next-sitemap.config.js b/next-sitemap.config.js
new file mode 100644
index 0000000..2ad0d98
--- /dev/null
+++ b/next-sitemap.config.js
@@ -0,0 +1,5 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: process.env.SITE_URL || "https://argos-ci.com",
+  generateRobotsTxt: false,
+};
diff --git a/package.json b/package.json
index 0bb6d29..53f32dd 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "next": "^14.0.1",
     "next-mdx-remote": "^4.4.1",
     "next-plausible": "^3.11.3",
+    "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab0437e..31cfac5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ dependencies:
   next-plausible:
     specifier: ^3.11.3
     version: 3.11.3(next@14.0.1)(react-dom@18.2.0)(react@18.2.0)
+  next-sitemap:
+    specifier: ^4.2.3
+    version: 4.2.3(next@14.0.1)
   next-themes:
     specifier: ^0.2.1
     version: 0.2.1(next@14.0.1)(react-dom@18.2.0)(react@18.2.0)
@@ -421,6 +424,10 @@ packages:
     dev: true
     optional: true
 
+  /@corex/deepmerge@4.0.43:
+    resolution: {integrity: sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==}
+    dev: false
+
   /@csstools/selector-specificity@3.0.0(postcss-selector-parser@6.0.13):
     resolution: {integrity: sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==}
     engines: {node: ^14 || ^16 || >=18}
@@ -681,6 +688,10 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@next/env@13.5.6:
+    resolution: {integrity: sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==}
+    dev: false
+
   /@next/env@14.0.1:
     resolution: {integrity: sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A==}
     dev: false
@@ -5512,7 +5523,6 @@ packages:
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: true
 
   /mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
@@ -5584,6 +5594,20 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /next-sitemap@4.2.3(next@14.0.1):
+    resolution: {integrity: sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==}
+    engines: {node: '>=14.18'}
+    hasBin: true
+    peerDependencies:
+      next: '*'
+    dependencies:
+      '@corex/deepmerge': 4.0.43
+      '@next/env': 13.5.6
+      fast-glob: 3.3.2
+      minimist: 1.2.8
+      next: 14.0.1(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /next-themes@0.2.1(next@14.0.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
     peerDependencies:
diff --git a/public/main-sitemap.xml b/public/main-sitemap.xml
new file mode 100644
index 0000000..7277fde
--- /dev/null
+++ b/public/main-sitemap.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+<url><loc>https://argos-ci.com/playwright</loc><lastmod>2023-12-28T05:44:31.942Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://argos-ci.com/pricing</loc><lastmod>2023-12-28T05:44:31.942Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://argos-ci.com/blog</loc><lastmod>2023-12-28T05:44:31.942Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+</urlset>
\ No newline at end of file