From 8a9935ba27b54e1bed87f9382d88344837569ca8 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <aditya.thakral@uwaterloo.ca>
Date: Thu, 20 May 2021 23:30:52 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=EF=B8=8F=20Add=20<Image=20/>=20+?=
 =?UTF-8?q?=20`next=20export`=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The <Image /> component makes prepends the basePath to the image src.
This makes all <img /> work with `next export` correctly.
---
 .vscode/extensions.json             |  3 +--
 components/EventDescriptionCard.tsx |  5 +++--
 components/Image.tsx                | 16 ++++++++++++++++
 components/Navbar.module.css        |  4 ++++
 components/Navbar.tsx               |  9 ++-------
 components/playground.tsx           |  6 +++---
 next.config.js                      | 12 +++++++-----
 7 files changed, 36 insertions(+), 19 deletions(-)
 create mode 100644 components/Image.tsx

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index af0e7c69..174f1cad 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -2,7 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "humao.rest-client",
-    "silvenon.mdx",
-    "xyc.vscode-mdx-preview"
+    "silvenon.mdx"
   ]
 }
\ No newline at end of file
diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx
index 013d977a..32fcba15 100644
--- a/components/EventDescriptionCard.tsx
+++ b/components/EventDescriptionCard.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 // import { Button } from "./Button";
+import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
 import styles from "./EventDescriptionCard.module.css";
 
@@ -37,7 +38,7 @@ const links = {
 export function EventDescriptionCard(props: Props) {
   return (
     <article className={styles.card}>
-      <img className={styles.poster} src={props.poster} alt={props.name} />
+      <Image className={styles.poster} src={props.poster} alt={props.name} />
 
       <div className={styles.details}>
         <h3 className={styles.name}>{props.name}</h3>
@@ -60,7 +61,7 @@ export function EventDescriptionCard(props: Props) {
           )}
           {props.online && (
             <a target="_blank" href={links[props.location]} rel="noreferrer">
-              <img
+              <Image
                 className={styles.logo}
                 alt={props.location}
                 src={"logos/" + props.location + ".png"}
diff --git a/components/Image.tsx b/components/Image.tsx
new file mode 100644
index 00000000..020233d2
--- /dev/null
+++ b/components/Image.tsx
@@ -0,0 +1,16 @@
+import React, { ImgHTMLAttributes } from "react";
+
+export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
+  const { src: relativeSrc = "" } = props;
+
+  let absoluteSrc = process.env.BASE_PATH ?? "/";
+  if (absoluteSrc.endsWith("/") && relativeSrc.startsWith("/")) {
+    absoluteSrc += relativeSrc.slice(1);
+  } else if (absoluteSrc.endsWith("/") || relativeSrc.startsWith("/")) {
+    absoluteSrc += relativeSrc;
+  } else {
+    absoluteSrc += "/" + relativeSrc;
+  }
+
+  return <img {...props} src={absoluteSrc} />;
+}
diff --git a/components/Navbar.module.css b/components/Navbar.module.css
index 9aa5b04b..0bac891e 100644
--- a/components/Navbar.module.css
+++ b/components/Navbar.module.css
@@ -29,6 +29,10 @@
   cursor: pointer;
 }
 
+.logo img {
+  width: 96px;
+}
+
 .navMenu {
   display: inline-flex;
   flex-direction: row;
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 19493239..1111c7a6 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { Image } from "./Image";
 import styles from "./Navbar.module.css";
 
 interface NavLink {
@@ -98,12 +98,7 @@ export function Navbar() {
       <div className={styles.navContent}>
         <Link href="/">
           <a className={styles.logo}>
-            <Image
-              src="/images/logo-icon.png"
-              width={96}
-              height={42}
-              alt="CSC Logo"
-            />
+            <Image src="/images/logo-icon.png" alt="CSC Logo" />
           </a>
         </Link>
         <ul className={styles.navMenu}>
diff --git a/components/playground.tsx b/components/playground.tsx
index baf4e99b..b4181839 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -83,7 +83,7 @@ export function EventDescriptionCardDemo() {
         date={date}
         online={true}
         location="Twitch"
-        poster="images/playground/intro-ootb.jpg"
+        poster="/images/playground/intro-ootb.jpg"
         registerLink="/"
       >
         <p>{short}</p>
@@ -93,7 +93,7 @@ export function EventDescriptionCardDemo() {
         date={date}
         online={true}
         location="Twitch"
-        poster="images/playground/alt-tab.jpg"
+        poster="/images/playground/alt-tab.jpg"
         registerLink="/"
       >
         <p>{short}</p>
@@ -103,7 +103,7 @@ export function EventDescriptionCardDemo() {
         date={date}
         online={true}
         location="Twitch"
-        poster="images/playground/intro-ootb.jpg"
+        poster="/images/playground/intro-ootb.jpg"
         registerLink="/"
       >
         <p>{short}</p>
diff --git a/next.config.js b/next.config.js
index 20725b3e..30e33dc0 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,7 +1,9 @@
-const withMDX = require('@next/mdx')({
-  extension: /\.mdx$/
-})
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx$/,
+});
 
 module.exports = withMDX({
-  pageExtensions: ['ts', 'tsx', 'mdx']
-})
\ No newline at end of file
+  pageExtensions: ["ts", "tsx", "mdx"],
+  trailingSlash: true,
+  basePath: process.env.BASE_PATH,
+});