From 47d6a01484723a289f7d54460927de1e464a2351 Mon Sep 17 00:00:00 2001
From: Riku Rouvila <riku.rouvila@gmail.com>
Date: Sun, 4 Jul 2021 18:08:36 +0300
Subject: [PATCH 1/2] use new og-image service for episode previews

---
 components/Layout.tsx | 28 ++++------------------------
 next.config.js        | 10 ++++++++++
 pages/index.tsx       |  6 +-----
 util/episodes.ts      |  6 +++++-
 4 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/components/Layout.tsx b/components/Layout.tsx
index 41eda2d..71aed40 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,5 +1,6 @@
 import Head from "next/head";
 import React from "react";
+import { episodeTitleWithoutNumber } from "../util/episodes";
 
 interface ILayout {
   children: React.ReactNode;
@@ -18,30 +19,9 @@ export const Layout = ({ children, episode }: ILayout) => {
   const url = episode
     ? `${process.env.NEXT_PUBLIC_SITE_URL}/${episode.number}`
     : process.env.NEXT_PUBLIC_SITE_URL;
-  const coverUrl = `${process.env.NEXT_PUBLIC_SITE_URL}/cover.jpg`;
-
-  const metaTags = [
-    { name: "title", content: title },
-    {
-      name: "keywords",
-      content:
-        "webbidevaus, web dev, podcast, react, node, typescript, javascript",
-    },
-    {
-      name: "description",
-      content: description,
-    },
-    { property: "og:title", content: title },
-    { property: "og:description", content: description },
-    { property: "og:url", content: url },
-    { property: "og:image", content: coverUrl },
-    { property: "og:type", content: "website" },
-    { property: "twitter:title", content: title },
-    { property: "twitter:description", content: description },
-    { property: "twitter:url", content: url },
-    { property: "twitter:image", content: coverUrl },
-    { property: "twitter:card", content: "summary_large_image" },
-  ];
+  const coverUrl = `https://og-webbidevaus.vercel.app/${encodeURIComponent(
+    `**Jakso ${episode.number}**: ${episodeTitleWithoutNumber(episode.title)}`
+  )}?theme=${episode.number % 2 === 0 ? "light" : "dark"}&md=1&fontSize=100px`;
 
   return (
     <>
diff --git a/next.config.js b/next.config.js
index 000483d..16c2652 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,14 @@
 module.exports = {
   // serverless for next-on-netlify
   target: "serverless",
+  webpack: (config, { isServer }) => {
+    // Fixes npm packages that depend on `fs` module
+    if (!isServer) {
+      config.node = {
+        fs: "empty",
+      };
+    }
+
+    return config;
+  },
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 2d45745..baa0dc4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -7,13 +7,9 @@ import { Footer } from "../components/Footer";
 import { Meta } from "../components/Meta";
 import { Player } from "../components/Player";
 import { GetStaticProps } from "next";
-import { getEpisodes } from "../util/episodes";
+import { episodeTitleWithoutNumber, getEpisodes } from "../util/episodes";
 import { ListingEpisode } from "../types/Episode";
 
-function episodeTitleWithoutNumber(title: string) {
-  return title.replace(/^\d*. /, "");
-}
-
 interface IHome {
   allEpisodes: ListingEpisode[];
 }
diff --git a/util/episodes.ts b/util/episodes.ts
index 6c1a73d..c6a54af 100644
--- a/util/episodes.ts
+++ b/util/episodes.ts
@@ -3,7 +3,7 @@ import { Left } from "purify-ts/Either";
 import { Maybe } from "purify-ts/Maybe";
 import { List } from "purify-ts/List";
 import path from "path";
-const fs = require("fs").promises;
+import { promises as fs } from "fs";
 import { ListingEpisodes, ListingEpisode, Episode } from "../types/Episode";
 import { authFetch, plainFetchAuth } from "../util/fetch";
 import { GetType } from "purify-ts";
@@ -76,3 +76,7 @@ export async function getEpisodes(podcastId?: string) {
       .chain((val) => EitherAsync.liftEither(ListingEpisodes.decode(val)))
   ).orDefault({ collection: [] });
 }
+
+export function episodeTitleWithoutNumber(title: string) {
+  return title.replace(/^\d*. /, "");
+}

From 754358618d641df487f2e1d1690d2235a0f7d819 Mon Sep 17 00:00:00 2001
From: Riku Rouvila <riku.rouvila@gmail.com>
Date: Mon, 5 Jul 2021 16:04:42 +0300
Subject: [PATCH 2/2] fix markdown formatting

---
 components/Layout.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/Layout.tsx b/components/Layout.tsx
index 71aed40..ef1af12 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -19,9 +19,13 @@ export const Layout = ({ children, episode }: ILayout) => {
   const url = episode
     ? `${process.env.NEXT_PUBLIC_SITE_URL}/${episode.number}`
     : process.env.NEXT_PUBLIC_SITE_URL;
-  const coverUrl = `https://og-webbidevaus.vercel.app/${encodeURIComponent(
-    `**Jakso ${episode.number}**: ${episodeTitleWithoutNumber(episode.title)}`
-  )}?theme=${episode.number % 2 === 0 ? "light" : "dark"}&md=1&fontSize=100px`;
+  const coverUrl = `https://og-webbidevaus.vercel.app/${`**${encodeURIComponent(
+    `Jakso ${episode.number}`
+  )}**: ${encodeURIComponent(
+    episodeTitleWithoutNumber(episode.title)
+  )}`}?theme=${
+    episode.number % 2 === 0 ? "light" : "dark"
+  }&md=1&fontSize=100px`;
 
   return (
     <>