feat: add env var for base url

coopTilleuls · Oct 17, 2023 · 86857f6 · 86857f6
1 parent 3a654d4
commit 86857f6
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 30 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_URL = "/vulcain-website"
diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
@@ -40,6 +40,8 @@ jobs:
         uses: actions/configure-pages@v3
       - name: Install dependencies
         run: pnpm install
+        env:
+        NEXT_PUBLIC_BASE_PATH: '/vulcain-website'
       - name: Build with Next.js
         run: pnpm run prebuild && pnpm run build && pnpm run export && touch ./out/.nojekyll
       - name: Upload artifact

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -16,17 +16,30 @@ const Header: React.ComponentType = () => {
     <>
       <MuiLink href="https://mercure.rocks/" underline="none" className={classes.mercure}>
         Discover
-        <img src="/img/logo-mercure.svg" alt="mercure" width="85" height="16" />| Real-Time with ease
+        <img src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/logo-mercure.svg`} alt="mercure" width="85" height="16" />|
+        Real-Time with ease
       </MuiLink>
       <AppBar position="sticky" color="default" className={classes.appBar}>
         <Toolbar className={classes.toolbar}>
           <Link href="/" passHref>
             <Button className={classes.logoLink} component="a">
-              <img className={classes.logo} src="/img/logo.svg" alt="Vulcain.rocks" width="176" height="40" />
+              <img
+                className={classes.logo}
+                src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/logo.svg`}
+                alt="Vulcain.rocks"
+                width="176"
+                height="40"
+              />
             </Button>
           </Link>
           <a href="https://les-tilleuls.coop/en" target="_blank" rel="noopener noreferrer">
-            <img className={classes.sponsor} alt="sponsor" src="/img/sponsor.svg" width="206" height="40" />
+            <img
+              className={classes.sponsor}
+              alt="sponsor"
+              src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/sponsor.svg`}
+              width="206"
+              height="40"
+            />
           </a>
           {/* @ts-ignore */}
           <Hidden smDown initialWidth="md">

diff --git a/components/home/Animation.tsx b/components/home/Animation.tsx
@@ -153,32 +153,38 @@ const Animation: React.ComponentType = () => {
   return (
     <>
       <Head>
-        <link rel="preload" as="image" href="/img/main-schema/base.svg" />
-        <link rel="preload" as="image" href="/img/main-schema/API.svg" />
+        <link rel="preload" as="image" href={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/base.svg`} />
+        <link rel="preload" as="image" href={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/API.svg`} />
       </Head>
       <Box pl={2} pr={6} position="relative">
         <Paper elevation={20} square className={classes.root} ref={container} id="container">
           <Box position="relative">
-            <img className={classes.base} src={'/img/main-schema/base.svg'} alt="main" width="800" height="821" />
+            <img
+              className={classes.base}
+              src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/base.svg`}
+              alt="main"
+              width="800"
+              height="821"
+            />
             <img
               className={classes.animated}
-              src={`/img/main-schema/${method.folder}/step1.svg`}
+              src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/${method.folder}/step1.svg`}
               alt="step1"
               id="step1"
               width="800"
               height="821"
             />
             <img
               className={classes.animated}
-              src={`/img/main-schema/${method.folder}/step2.svg`}
+              src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/${method.folder}/step2.svg`}
               alt="step2"
               id="step2"
               width="800"
               height="821"
             />
             <img
               className={classes.animated}
-              src={`/img/main-schema/${method.folder}/step2-base.svg`}
+              src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/${method.folder}/step2-base.svg`}
               alt="step2 circle"
               id="step2-base"
               width="800"
@@ -187,7 +193,7 @@ const Animation: React.ComponentType = () => {
             {method.steps > 2 && (
               <img
                 className={classes.animated}
-                src={`/img/main-schema/${method.folder}/step3.svg`}
+                src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/${method.folder}/step3.svg`}
                 alt="step3"
                 id="step3"
                 width="800"
@@ -198,15 +204,15 @@ const Animation: React.ComponentType = () => {
               <>
                 <img
                   className={classes.animated}
-                  src={`/img/main-schema/${method.folder}/step4.svg`}
+                  src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/${method.folder}/step4.svg`}
                   alt="step4"
                   id="step4"
                   width="800"
                   height="821"
                 />
                 <img
                   className={classes.animated}
-                  src={`/img/main-schema/${method.folder}/step4-base.svg`}
+                  src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/${method.folder}/step4-base.svg`}
                   alt="step4 circle"
                   id="step4-base"
                   width="800"
@@ -218,7 +224,7 @@ const Animation: React.ComponentType = () => {
           <MethodSelector method={methodKey} onMethodChange={(method) => setMethodKey(method)} />
         </Paper>
         <Paper elevation={5} square className={classes.api} id="api">
-          <img src="/img/main-schema/API.svg" alt="api" width="493" height="904" />
+          <img src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/main-schema/API.svg`} alt="api" width="493" height="904" />
         </Paper>
       </Box>
     </>

diff --git a/components/home/References.tsx b/components/home/References.tsx
@@ -52,7 +52,7 @@ const References: React.ComponentType = () => {
                 <a href={logo.url} target="_blank" rel="noopener noreferrer">
                   <img
                     className={classes.logoImage}
-                    src={`/img/references/${logo.logo}.png`}
+                    src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/references/${logo.logo}.png`}
                     alt={logo.name}
                     width="300"
                     height="110"
@@ -63,7 +63,7 @@ const References: React.ComponentType = () => {
                   <a>
                     <img
                       className={classes.logoImage}
-                      src={`/img/references/${logo.logo}.png`}
+                      src={`${process.env.NEXT_PUBLIC_BASE_URL}/img/references/${logo.logo}.png`}
                       alt={logo.name}
                       width="300"
                       height="110"

diff --git a/components/home/Support.tsx b/components/home/Support.tsx
@@ -110,7 +110,13 @@ const SupportCard: React.ComponentType<SupportCardProps> = ({ image, title, desc
         <CardContent className={classes.cardMain}>
           <Box px={2} display="flex" alignItems="center" justifyContent="center">
             <div className={classes.cardCircle}>
-              <img src={image} alt={title} className={classes.cardImage} width="150" height="150" />
+              <img
+                src={`${process.env.NEXT_PUBLIC_BASE_URL}${image}`}
+                alt={title}
+                className={classes.cardImage}
+                width="150"
+                height="150"
+              />
             </div>
           </Box>
           <Box py={2} className={classes.cardContent}>

diff --git a/components/markdown/Markdown.tsx b/components/markdown/Markdown.tsx
@@ -64,7 +64,7 @@ const Markdown: React.ComponentType<MarkdownProps> = ({ source }) => {
       return input;
     }
     if (/^schemas\/vulcain_doc/.test(input)) {
-      const result = input.replace('schemas', '/img/schemas');
+      const result = input.replace('schemas', `${process.env.NEXT_PUBLIC_BASE_URL}/img/schemas`);
       return result;
     }
     return `https://raw.githubusercontent.com/dunglas/vulcain/master/${input}`;

diff --git a/next.config.js b/next.config.js
@@ -1,13 +1,9 @@
 const nextConfig = {
-  assetPrefix: '/vulcain-website/',
-  basePath: "/vulcain-website",
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/vulcain-website/' : '/',
+  basePath: process.env.NODE_ENV === 'production' ? '/vulcain-website' : '',
   images: {
     unoptimized: true,
   },
-  experimental: {
-    assetPrefix: '/vulcain-website/',
-    basePath: "/vulcain-website",
-  }
 };
 
 module.exports = nextConfig;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -39,13 +39,48 @@ const App: React.ComponentType<AppProps> = ({ Component, pageProps }) => {
     <>
       <Head>
         <title>Vulcain.rocks: Use HTTP/2 Server Push to create fast and idiomatic client-driven REST APIs</title>
-        <link rel="preload" href="/fonts/roboto/roboto-v20-latin-regular.woff2" as="font" crossOrigin="" />
-        <link rel="preload" href="/fonts/roboto/roboto-v20-latin-500.woff2" as="font" crossOrigin="" />
-        <link rel="preload" href="/fonts/roboto/roboto-v20-latin-700.woff2" as="font" crossOrigin="" />
-        <link rel="preload" href="/fonts/montserrat/montserrat-v15-latin-200.woff2" as="font" crossOrigin="" />
-        <link rel="preload" href="/fonts/montserrat/montserrat-v15-latin-600.woff2" as="font" crossOrigin="" />
-        <link rel="preload" href="/fonts/montserrat/montserrat-v15-latin-800.woff2" as="font" crossOrigin="" />
-        <link rel="preload" href="/fonts/montserrat/montserrat-v15-latin-regular.woff2" as="font" crossOrigin="" />
+        <link
+          rel="preload"
+          href={`${process.env.BASE_URL}/fonts/roboto/roboto-v20-latin-regular.woff2`}
+          as="font"
+          crossOrigin=""
+        />
+        <link
+          rel="preload"
+          href={`${process.env.BASE_URL}/fonts/roboto/roboto-v20-latin-500.woff2`}
+          as="font"
+          crossOrigin=""
+        />
+        <link
+          rel="preload"
+          href={`${process.env.BASE_URL}/fonts/roboto/roboto-v20-latin-700.woff2`}
+          as="font"
+          crossOrigin=""
+        />
+        <link
+          rel="preload"
+          href={`${process.env.BASE_URL}/fonts/montserrat/montserrat-v15-latin-200.woff2`}
+          as="font"
+          crossOrigin=""
+        />
+        <link
+          rel="preload"
+          href={`${process.env.BASE_URL}/fonts/montserrat/montserrat-v15-latin-600.woff2`}
+          as="font"
+          crossOrigin=""
+        />
+        <link
+          rel="preload"
+          href={`${process.env.BASE_URL}/fonts/montserrat/montserrat-v15-latin-800.woff2`}
+          as="font"
+          crossOrigin=""
+        />
+        <link
+          rel="preload"
+          href={`${process.env.BASE_URL}/fonts/montserrat/montserrat-v15-latin-regular.woff2`}
+          as="font"
+          crossOrigin=""
+        />
         <meta
           name="description"
           content="Vulcain is a brand new protocol using HTTP/2 Server Push to create fast and idiomatic client-driven REST APIs."