🚑️ Add <Image /> + `next export` improvements

The <Image /> component makes prepends the basePath to the image src.
This makes all <img /> work with `next export` correctly.

.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "humao.rest-client",
-    "silvenon.mdx",
+    "silvenon.mdx"
-    "xyc.vscode-mdx-preview"
   ]
 }

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"}

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} />;
+}

components/Navbar.module.css

@@ -29,6 +29,10 @@
   cursor: pointer;
 }
 
+.logo img {
+  width: 96px;
+}
+
 .navMenu {
   display: inline-flex;
   flex-direction: row;

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
+            <Image src="/images/logo-icon.png" alt="CSC Logo" />
-              src="/images/logo-icon.png"
-              width={96}
-              height={42}
-              alt="CSC Logo"
-            />
           </a>
         </Link>
         <ul className={styles.navMenu}>

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>

next.config.js

@@ -1,7 +1,9 @@
-const withMDX = require('@next/mdx')({
+const withMDX = require("@next/mdx")({
-  extension: /\.mdx$/
+  extension: /\.mdx$/,
-})
+});
 
 module.exports = withMDX({
-  pageExtensions: ['ts', 'tsx', 'mdx']
+  pageExtensions: ["ts", "tsx", "mdx"],
-})
+  trailingSlash: true,
+  basePath: process.env.BASE_PATH,
+});