Merge pull request #29 from khaykingleb/improve-seo

feat(seo): introduce dynamic sitemap.xml and robots.txt

app/root.tsx

@@ -2,7 +2,7 @@ import "react-notion-x/src/styles.css";
 import "prismjs/themes/prism-tomorrow.css";
 import "katex/dist/katex.min.css";
 
-import { LinksFunction, MetaFunction } from "@remix-run/node";
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import {
   Links,
   Meta,

app/routes/[robots.txt].ts

@@ -0,0 +1,7 @@
+import { generateRobotsTxt } from "@nasa-gcn/remix-seo";
+
+export function loader() {
+  return generateRobotsTxt([
+    { type: "sitemap", value: "https://khaykingleb.com/sitemap.xml" },
+  ]);
+}

app/routes/[sitemap.xml].tsx

@@ -0,0 +1,12 @@
+import { generateSitemap } from "@nasa-gcn/remix-seo";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+// @ts-expect-error Virtual modules are not recognized by TypeScript
+// https://github.com/nasa-gcn/remix-seo/issues/7
+// eslint-disable-next-line import/no-unresolved
+import { routes } from "virtual:remix/server-build";
+
+export function loader({ request }: LoaderFunctionArgs) {
+  return generateSitemap(request, routes, {
+    siteUrl: "https://khaykingleb.com",
+  });
+}

app/routes/_index.tsx

@@ -1,3 +1,4 @@
+import { SEOHandle } from "@nasa-gcn/remix-seo";
 import { MetaFunction } from "@remix-run/node";
 
 import { Avatar } from "~/components/atoms/Avatar";
@@ -20,6 +21,12 @@ export const meta: MetaFunction = () => {
   ];
 };
 
+export const handle: SEOHandle = {
+  getSitemapEntries: async () => {
+    return [{ route: "/", priority: 1, changefreq: "monthly" }];
+  },
+};
+
 export default function IndexRoute() {
   return (
     <div className="flex min-h-screen flex-col">

app/routes/blog.$slug.tsx

@@ -1,3 +1,4 @@
+import { SEOHandle } from "@nasa-gcn/remix-seo";
 import {
   defer,
   LoaderFunction,
@@ -111,6 +112,16 @@ export const loader: LoaderFunction = async ({
   return defer({ post, recordMap: recordMapPromise });
 };
 
+export const handle: SEOHandle = {
+  getSitemapEntries: async () => {
+    return posts.map((post) => ({
+      route: `/blog/${post.slug}`,
+      priority: 0.7,
+      changefreq: "monthly",
+    }));
+  },
+};
+
 // @ts-expect-error: Expect not assignable type (otherwise, it would be a server timeout)
 export const meta: MetaFunction = ({ data }: { data: { post: Post } }) => {
   const { post } = data;

app/routes/blog._index.tsx

@@ -1,3 +1,4 @@
+import { SEOHandle } from "@nasa-gcn/remix-seo";
 import { MetaFunction } from "@remix-run/node";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -8,6 +9,12 @@ import { Header } from "~/components/organisms/Header";
 import { Pagination } from "~/components/organisms/Pagination";
 import { posts } from "~/data/posts";
 
+export const handle: SEOHandle = {
+  getSitemapEntries: async () => {
+    return [{ route: "/blog", priority: 1, changefreq: "weekly" }];
+  },
+};
+
 export const meta: MetaFunction = () => {
   return [
     { charset: "utf-8" },

cspell.config.js

@@ -26,5 +26,6 @@ export default {
     "vercel",
     "katex",
     "pageid",
+    "changefreq",
   ],
 };

package.json

@@ -14,6 +14,7 @@
     "stylelint": "stylelint --cache --cache-location ./node_modules/.cache/stylelint \"app/**/*.{css,js}\""
   },
   "dependencies": {
+    "@nasa-gcn/remix-seo": "^2.0.1",
     "@remix-run/node": "^2.11.2",
     "@remix-run/react": "^2.11.2",
     "@remix-run/serve": "^2.11.2",