Make all paths relative and configure Next so everything can be run l…

…ocally without needing a webserver, just by opening index.html in a browser (#60)

components/hearts.tsx

@@ -12,7 +12,7 @@ function Heart(props: HeartProps) {
   return (
     <img
       className={classNames(styles.heart, have ? "" : styles.lost)}
-      src="/images/heart.svg"
+      src="./images/heart.svg"
     />
   );
 }
@@ -27,7 +27,7 @@ export default function Hearts(props: Props) {
   return (
     <div className={styles.hearts}>
       {lives}
-      <img className={styles.heart} src="/images/heart.svg" />
+      <img className={styles.heart} src="./images/heart.svg" />
     </div>
   );
 }

components/instructions.tsx

@@ -29,7 +29,7 @@ export default function Instructions(props: Props) {
       <div className={styles.wrapper}>
         <header className={styles.mainHeader}>
           <h1>
-            <img src="/images/logo.png" title="disCO2very" alt="disCO2very" className={styles.logo} />
+            <img src="./images/logo.png" title="disCO2very" alt="disCO2very" className={styles.logo} />
           </h1>
           <h2><Trans>Place the cards in the correct order guessing their CO<sub>2</sub> footprint.</Trans></h2>
           {highscore !== 0 && (
@@ -53,7 +53,7 @@ export default function Instructions(props: Props) {
       <RealCardsGame />
 
       <div className={styles.about}>
-        <p><Trans>Made with <img src="/images/heart.svg" title={_(msg`love`)} alt={_(msg`love`)} className={styles.heartImg} /> by <a href="https://antoine.duparay.fr" rel="noreferrer" target="_blank">Fla</a> &amp; Sara.</Trans></p>
+        <p><Trans>Made with <img src="./images/heart.svg" title={_(msg`love`)} alt={_(msg`love`)} className={styles.heartImg} /> by <a href="https://antoine.duparay.fr" rel="noreferrer" target="_blank">Fla</a> &amp; Sara.</Trans></p>
         <p><Trans>License AGPL - Source code available <a href="https://github.com/flaburgan/disco2very" rel="noreferrer" target="_blank">on github</a>.</Trans></p>
         <p>
           <Trans>

next.config.mjs

@@ -2,16 +2,8 @@
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  output: "export"
-
-  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
-  // trailingSlash: true,
-
-  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
-  // skipTrailingSlashRedirect: true,
-
-  // Optional: Change the output directory `out` -> `dist`
-  // distDir: 'dist',
+  output: "export",
+  assetPrefix: './'
 };
 
 export default nextConfig;

pages/index.tsx

@@ -24,9 +24,9 @@ export default function Index() {
       <meta property="og:image:alt" content="The disCO2very logo, featuring a molecule of CO2." />
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:creator" content="Fla" />
-      <link rel="icon" href="/favicon.svg" />
-      <link rel="apple-touch-icon" href="/images/logo-app.png" />
-      <link rel="manifest" href="/manifest.json" />
+      <link rel="icon" href="./favicon.svg" />
+      <link rel="apple-touch-icon" href="./images/logo-app.png" />
+      <link rel="manifest" href="./manifest.json" />
       <link rel="canonical" href="https://www.disco2very.org/" />
     </Head>
     <App />

public/manifest.json

@@ -4,12 +4,12 @@
   "description": "disCO2very is a free game to discover the orders of magnitude of the CO2 footprint",
   "icons": [
     {
-      "src": "/images/logo-app.png",
+      "src": "./images/logo-app.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/images/logo-app_512.png",
+      "src": "./images/logo-app_512.png",
       "sizes": "512x512",
       "type": "image/png"
     }
@@ -21,7 +21,7 @@
   "orientation": "portrait-primary",
   "screenshots" : [
     {
-      "src": "/images/screenshots/home-page.png",
+      "src": "./images/screenshots/home-page.png",
       "sizes": "750x1334",
       "type": "image/png",
       "label": "Home page of disCO2very"