Modified the basePath of the site, alongside all of the images, fonts…

…, and links.
framedsc · Dec 28, 2023 · 40579a7 · 40579a7
1 parent 15a1dbf
commit 40579a7
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 58 deletions.
diff --git a/components/global/navigation.tsx b/components/global/navigation.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import React from "react";
 import { Container } from "./container";
 import CSS from 'csstype';
+import { basePath } from '../../next.config';
 
 const recapLogoStyle: CSS.Properties = {
   position: 'relative',
@@ -41,7 +42,7 @@ export const Navigation = () => {
             </Link>
           </li>
           <Link href="/" >
-            <img src="recap-nsub-logo.svg" style={ recapLogoStyle }/>
+            <img src={`${basePath}/recap-nsub-logo.svg`} style={ recapLogoStyle }/>
           </Link>
         </ul>
       </div>

diff --git a/components/home/year-cover.tsx b/components/home/year-cover.tsx
@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState, RefObject } from "react";
 import CSS from 'csstype';
 import { IShot } from "@types";
 import { covers2021, covers2022, covers2023 } from "./covers-lists";
+import { basePath } from '../../next.config';
 
 const getCovers = (year: number) => {
   switch(year) { 
@@ -151,13 +152,13 @@ export function YearCover(year: number) {
   function imageElement(imageURL: string, shouldDisplay: boolean) {
     return (
       <div className="shot-wrapper" style={{ ...coverImageStyle, position: 'absolute', opacity: shouldDisplay ? 1 : 0, transition: 'opacity 0.5s' }}>
-        <img src={imageURL} loading="lazy" style={coverImageStyle} />
+        <img src={`${basePath}/${imageURL}`} loading="lazy" style={coverImageStyle} />
       </div>
     );
   }
 
   return (
-      <a className="year-cover-container" href={year.toString()} style={coverContainerStyle}>
+      <a className="year-cover-container" href={`${basePath}/${year.toString()}`} style={coverContainerStyle}>
         {imageElement(image1.shotUrl, imageToDisplay.current === 1)}
         {imageElement(image2.shotUrl, imageToDisplay.current === 2)}
         <div className="year-cover-frame" style={coverFrameStyle}></div>

diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,13 @@
+const path = require("path");
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  basePath: '/framed-wrapped',
+  assetPrefix: '/framed-wrapped/',
+  reactStrictMode: true,
+  sassOptions: {
+    includePaths: [path.join('/framed-wrapped/', "styles")],
+  },
+};
+
+module.exports = nextConfig;
diff --git a/next.config.mjs b/next.config.mjs
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,6 +3,7 @@ import type { AppProps } from "next/app";
 import { Footer, Navigation } from "@components/global";
 import Head from "next/head";
 import '../public/fonts/stylesheet.css';
+import { basePath } from '../next.config';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -33,7 +34,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <picture>
             <img
               className="absolute top-0 left-0 object-cover"
-              src="wrapped-images/Topography.svg"
+              src={`${basePath}/wrapped-images/Topography.svg`}
               alt=""
               style = {{zIndex: "-1", objectFit: "cover", minHeight: "200%"}}
             />

diff --git a/pages/_year-data.tsx b/pages/_year-data.tsx
@@ -11,6 +11,7 @@ import {
   LoadingSection,
 } from "@components/experience-fragments";
 import CSS from 'csstype';
+import { basePath } from '../next.config';
 
 import { getHofAuthors, getHofImages, getSysImages } from './api/request';
 import { addProperties, normalizeData } from '../util/utils';
@@ -227,7 +228,7 @@ export default function WrapYear(year: number, flavourText: { intro: any; top10s
               <div className="min-h-screen md:flex md:items-center load transition-all -translate-y-10 opacity-0 duration-500 mb-8">
                 <div className="md:grid md:grid-cols-2 md:gap-x-16">
                   <div className="flex flex-col justify-center">
-                    <img src="recap-wsub-logo.svg" style={ recapLogoStyle }/>
+                    <img src={`${basePath}/recap-wsub-logo.svg`} style={ recapLogoStyle }/>
                     <br />
                     <p>
                       Welcome to Framed&apos;s {year} in Review!

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,7 @@
 import Head from "next/head";
 import React from "react";
 import CSS from 'csstype';
+import { basePath } from '../next.config';
 
 import { YearCover} from "@components/home";
 
@@ -33,7 +34,7 @@ const Home = () => {
         <title>A year of FRAMED</title>
       </Head>
 
-      <img src="recap-wsub-logo.svg" style={ recapLogoStyle }/>
+      <img src={`${basePath}/recap-wsub-logo.svg`} style={ recapLogoStyle }/>
 
       <div className='Covers wrapper' style={ coverFrameStyle }>
         { YearCover(2023) }

diff --git a/public/fonts/stylesheet.css b/public/fonts/stylesheet.css
@@ -1,15 +1,17 @@
-  @font-face {
-      font-family: "GalanoGrotesque";
-      font-style: normal;
-      font-weight: normal;
-      src: url("/fonts/Galano-Grotesque/GalanoGrotesque-Bold.woff2") format("woff2");
-      font-display: swap;
-    }
+/* Had to add the basePath manually since I can't import it in here. */
+
+@font-face {
+    font-family: "GalanoGrotesque";
+    font-style: normal;
+    font-weight: normal;
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesque-Bold.woff2") format("woff2");
+    font-display: swap;
+  }
 
   @font-face {
     font-family: "Galano Grotesque Alt (Numbers)";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Italic.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Italic.woff") format("woff");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Italic.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Italic.woff") format("woff");
     font-weight: normal;
     font-style: italic;
     font-display: swap;
@@ -19,8 +21,8 @@
 
   @font-face {
     font-family: "Galano Grotesque Alt (Numbers)";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff") format("woff");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff") format("woff");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
@@ -30,8 +32,8 @@
 
   @font-face {
     font-family: "Galano Grotesque Alt (Numbers)";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff") format("woff");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff") format("woff");
     font-weight: bold;
     font-style: normal;
     font-display: swap;
@@ -41,8 +43,8 @@
 
   @font-face {
     font-family: "Galano Grotesque Alt (Numbers)";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff") format("woff");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff") format("woff");
     font-weight: bold;
     font-style: italic;
     font-display: swap;
@@ -54,8 +56,8 @@
   @font-face {
     font-family: "AtkinsonHyperlegible";
     src: local("☞Atkinson Hyperlegible"), local("AtkinsonHyperlegible-Regular"),
-        url("/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Regular.woff2") format("woff2"),
-        url("/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Regular.woff") format("woff");
+        url("/framed-wrapped/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Regular.woff2") format("woff2"),
+        url("/framed-wrapped/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Regular.woff") format("woff");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
@@ -64,54 +66,54 @@
   @font-face {
     font-family: "AtkinsonHyperlegible";
     src: local("☞Atkinson Hyperlegible"), local("AtkinsonHyperlegible-Bold"),
-        url("/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Bold.woff2") format("woff2"),
-        url("/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Bold.woff") format("woff");
+        url("/framed-wrapped/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Bold.woff2") format("woff2"),
+        url("/framed-wrapped/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Bold.woff") format("woff");
     font-weight: bold;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
     font-family: "Galano Grotesque Alt";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff") format("woff");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff") format("woff");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
     font-family: "Galano Grotesque Alt";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Medium.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Medium.woff") format("woff");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Medium.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Medium.woff") format("woff");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
     font-family: "Galano Grotesque Alt";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-MediumItalic.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-MediumItalic.woff") format("woff");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-MediumItalic.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-MediumItalic.woff") format("woff");
     font-weight: 500;
     font-style: italic;
     font-display: swap;
   }
 
   @font-face {
     font-family: "Galano Grotesque Alt";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff") format("woff");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff") format("woff");
     font-weight: 600;
     font-style: italic;
     font-display: swap;
   }
 
   @font-face {
     font-family: "Galano Grotesque Alt";
-    src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff2") format("woff2"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff") format("woff"),
-         url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.ttf") format("truetype");
+    src: url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff2") format("woff2"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff") format("woff"),
+         url("/framed-wrapped/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.ttf") format("truetype");
     font-weight: 600;
     font-style: normal;
     font-display: swap;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  basePath: '/framed-wrapped',
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",