use safer method of concatenating absolute URLs

lib/config/seo.ts

@@ -1,3 +1,7 @@
+import urlJoin from "url-join";
+import type { StaticImageData } from "next/image";
+import type { DefaultSeoProps, SocialProfileJsonLdProps, ArticleJsonLdProps } from "next-seo";
+
 import * as config from ".";
 
 // favicons (some used here, some re-exported and used elsewhere)
@@ -10,9 +14,6 @@ import maskable512Png from "../../public/static/favicons/maskable-512x512.png";
 import maskable192Png from "../../public/static/favicons/maskable-192x192.png";
 import meJpg from "../../public/static/images/me.jpg";
 
-import type { StaticImageData } from "next/image";
-import type { DefaultSeoProps, SocialProfileJsonLdProps, ArticleJsonLdProps } from "next-seo";
-
 // Most of this file simply takes the data already defined in ./config.js and translates it into objects that are
 // compatible with next-seo's props:
 // https://github.com/garmeeh/next-seo#default-seo-configuration
@@ -27,7 +28,7 @@ export const defaultSeo: DefaultSeoProps = {
     type: "website",
     images: [
       {
-        url: `${config.baseUrl}${meJpg.src}`,
+        url: urlJoin(config.baseUrl, meJpg.src),
         alt: `${config.siteName} – ${config.shortDescription}`,
       },
     ],
@@ -112,9 +113,9 @@ export const defaultSeo: DefaultSeoProps = {
 export const socialProfileJsonLd: SocialProfileJsonLdProps = {
   type: "Person",
   name: config.authorName,
-  url: `${config.baseUrl}/`,
+  url: urlJoin(config.baseUrl, "/"),
   sameAs: [
-    `${config.baseUrl}/`,
+    urlJoin(config.baseUrl, "/"),
     `https://github.com/${config.authorSocial?.github}`,
     `https://keybase.io/${config.authorSocial?.keybase}`,
     `https://twitter.com/${config.authorSocial?.twitter}`,
@@ -130,7 +131,7 @@ export const socialProfileJsonLd: SocialProfileJsonLdProps = {
 export const articleJsonLd: Pick<ArticleJsonLdProps, "authorName" | "publisherName" | "publisherLogo"> = {
   authorName: [config.authorName],
   publisherName: config.siteName,
-  publisherLogo: `${config.baseUrl}${meJpg.src}`,
+  publisherLogo: urlJoin(config.baseUrl, meJpg.src),
 };
 
 // Re-export icons to use their static image data elsewhere

lib/helpers/build-feed.ts

@@ -1,4 +1,5 @@
 import { Feed } from "feed";
+import urlJoin from "url-join";
 import { getAllNotes } from "./parse-notes";
 import * as config from "../config";
 import { RELEASE_DATE } from "../config/constants";
@@ -17,20 +18,20 @@ export const buildFeed = (
 
   // https://github.com/jpmonette/feed#example
   const feed = new Feed({
-    id: `${config.baseUrl}/`,
-    link: `${config.baseUrl}/`,
+    id: urlJoin(config.baseUrl, "/"),
+    link: urlJoin(config.baseUrl, "/"),
     title: config.siteName,
     description: config.longDescription,
     copyright: "https://creativecommons.org/licenses/by/4.0/",
     updated: new Date(RELEASE_DATE),
-    image: `${config.baseUrl}${favicons.meJpg.src}`,
+    image: urlJoin(config.baseUrl, favicons.meJpg.src),
     feedLinks: {
-      rss: `${config.baseUrl}/feed.xml`,
-      atom: `${config.baseUrl}/feed.atom`,
+      rss: urlJoin(config.baseUrl, "feed.xml"),
+      atom: urlJoin(config.baseUrl, "feed.atom"),
     },
     author: {
       name: config.authorName,
-      link: `${config.baseUrl}/`,
+      link: urlJoin(config.baseUrl, "/"),
       email: config.authorEmail,
     },
   });
@@ -43,11 +44,11 @@ export const buildFeed = (
       link: note.permalink,
       title: note.title,
       description: note.description,
-      image: note.image ? `${config.baseUrl}${note.image}` : "",
+      image: note.image ? urlJoin(config.baseUrl, note.image) : "",
       author: [
         {
           name: config.authorName,
-          link: config.baseUrl,
+          link: urlJoin(config.baseUrl, "/"),
         },
       ],
       date: new Date(note.date),

lib/helpers/parse-notes.ts

@@ -3,6 +3,7 @@ import path from "path";
 import { renderToStaticMarkup } from "react-dom/server";
 import matter from "gray-matter";
 import { serialize } from "next-mdx-remote/serialize";
+import urlJoin from "url-join";
 import { minify } from "terser";
 import { compiler } from "markdown-to-jsx";
 import removeMarkdown from "remove-markdown";
@@ -54,7 +55,7 @@ export const getNoteData = (slug: string): Omit<NoteType, "source"> & { content:
       // parsed markdown title:
       htmlTitle,
       slug,
-      permalink: `${baseUrl}/notes/${slug}/`,
+      permalink: urlJoin(baseUrl, "notes", slug, "/"),
       date: new Date(data.date).toISOString(), // validate/normalize the date string provided from front matter
       readingMins: Math.ceil(readingTime(content).minutes),
     },