feat: add env var for base url

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

Hide file tree

Showing 7 changed files with 45 additions and 23 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_URL = "/vulcain-website"
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;