Feature/vite (#19)

* refactor using vite * eslint * fix docker * add background color before initialisation
C2DH · Aug 28, 2023 · 2f4b5d7 · 2f4b5d7
1 parent 9495099
commit 2f4b5d7
Show file tree

Hide file tree

Showing 97 changed files with 2,233 additions and 6,880 deletions.
diff --git a/.env b/.env
@@ -1,9 +1,9 @@
-REACT_APP_PROXY=http://localhost
-REACT_APP_LANGUAGES=en-GB,fr-FR,de-DE
-REACT_APP_EMAIL=[email protected]
-REACT_APP_ORIGIN=https://memorialshoah.lu
-REACT_APP_MAPBOX_ACCESS_TOKEN=pk.eyJ1IjoiZGFuaWVsZWd1aWRvdW5pIiwiYSI6ImNpcm5odTNjbTAwNWdoc2t3bnM5OTl4cnAifQ.4-Ai1NwYuDLEUPRBnDoG7g
-REACT_APP_MAPBOX_STYLE_URL=mapbox://styles/danieleguidouni/cl91d7hxh002g14qob4sbp5fr
-REACT_APP_LOCALSTORAGE_NAME=memorialshoah
-REACT_APP_MATOMO_URLBASE=https://journalofdigitalhistory.matomo.cloud/
-REACT_APP_MATOMO_SITEID=2
+VITE_PROXY=http://localhost
+VITE_LANGUAGES=en-GB,fr-FR,de-DE
+VITE_EMAIL=[email protected]
+VITE_ORIGIN=https://memorialshoah.lu
+VITE_MAPBOX_ACCESS_TOKEN=pk.eyJ1IjoiZGFuaWVsZWd1aWRvdW5pIiwiYSI6ImNpcm5odTNjbTAwNWdoc2t3bnM5OTl4cnAifQ.4-Ai1NwYuDLEUPRBnDoG7g
+VITE_MAPBOX_STYLE_URL=mapbox://styles/danieleguidouni/cl91d7hxh002g14qob4sbp5fr
+VITE_LOCALSTORAGE_NAME=memorialshoah
+VITE_MATOMO_URLBASE=https://journalofdigitalhistory.matomo.cloud/
+VITE_MATOMO_SITEID=2
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app"]
+}
diff --git a/Dockerfile b/Dockerfile
@@ -13,14 +13,16 @@ RUN yarn install
 
 COPY public ./public
 COPY src ./src
+COPY vite.config.js .
+COPY index.html .
 COPY .env .
 
 ENV NODE_ENV production
 ENV NODE_OPTIONS --max_old_space_size=4096
 
-ENV REACT_APP_GIT_TAG=${GIT_TAG}
-ENV REACT_APP_GIT_BRANCH=${GIT_BRANCH}
-ENV REACT_APP_GIT_REVISION=${GIT_REVISION}
+ENV VITE_GIT_TAG=${GIT_TAG}
+ENV VITE_GIT_BRANCH=${GIT_BRANCH}
+ENV VITE_GIT_REVISION=${GIT_REVISION}
 
 RUN yarn run build
 

diff --git a/Makefile b/Makefile
@@ -1,9 +1,9 @@
 BUILD_TAG ?= latest
 
 run-dev:
-	REACT_APP_GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
-	REACT_APP_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
-	REACT_APP_GIT_REVISION=$(shell git rev-parse --short HEAD) \
+	VITE_GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
+	VITE_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
+	VITE_GIT_REVISION=$(shell git rev-parse --short HEAD) \
 	yarn start
 
 build-docker-image:
@@ -13,8 +13,8 @@ build-docker-image:
 	--build-arg GIT_REVISION=$(shell git rev-parse --short HEAD) .
 
 run-deploy-netlify:
-	REACT_APP_GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
-	REACT_APP_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
-	REACT_APP_GIT_REVISION=$(shell git rev-parse --short HEAD) \
+	VITE_GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
+	VITE_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
+	VITE_GIT_REVISION=$(shell git rev-parse --short HEAD) \
 	yarn build && \
 	netlify deploy --prod --dir=build
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Memorial Shoah" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <meta data-react-helmet="true" property="og:image" content="/screen.png" />
+    <meta property="og:title" content="Memorial Shoah" data-react-helmet="true" />
+    <meta
+      name="description"
+      content="The Digital Shoah Memorial in Luxembourg is built in memory of people who lived in Luxembourg, who were persecuted, who were victims of Nazi anti-Semitic legislation during World War II."
+      data-react-helmet="true"
+    />
+    <meta
+      property="og:description"
+      content="The Digital Shoah Memorial in Luxembourg is built in memory of people who lived in Luxembourg, who were persecuted, who were victims of Nazi anti-Semitic legislation during World War II."
+      data-react-helmet="true"
+    />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Memorial Shoah</title>
+    <style>
+      body {
+        background-color: #ffefe5;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -16,11 +16,14 @@
     "@testing-library/user-event": "^13.5.0",
     "@u-wave/react-vimeo": "^0.9.8",
     "@use-gesture/react": "^10.2.20",
+    "@vitejs/plugin-react": "^4.0.4",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0-beta1",
     "citation-js": "^0.6.4",
     "d3-array": "^3.1.6",
     "downsize": "^0.0.8",
+    "eslint": "^8.48.0",
+    "eslint-config-react-app": "^7.0.1",
     "i": "^0.3.7",
     "i18next": "^21.8.8",
     "leva": "^0.9.31",
@@ -40,23 +43,23 @@
     "react-markdown": "^8.0.3",
     "react-query": "^3.39.1",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
     "react-spring": "^9.4.5",
     "remark-footnotes": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "simplex-noise": "^3.0.1",
     "three": "^0.145.0",
     "three.modifiers": "^2.5.7",
     "use-query-params": "^1.2.3",
+    "vite": "^4.4.9",
+    "vite-plugin-eslint": "^1.8.1",
     "web-vitals": "^2.1.4",
     "worker-loader": "^3.0.8",
     "zustand": "^4.0.0-rc.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
     "lint": "eslint -c .eslintrc.js --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "npm run lint -- --fix"
   },
@@ -79,7 +82,6 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^8.17.0",
     "http-proxy-middleware": "^2.0.6",
     "prettier": "^2.7.1"
   }

diff --git a/public/index.html b/public/index.html
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
@@ -26,7 +26,6 @@ console.info('initial languageCode', languageCode)
 const Biographies = lazy(() => import('./pages/Biographies'))
 const Document = lazy(() => import('./pages/Document'))
 const Home = lazy(() => import('./pages/Home'))
-const Lines = lazy(() => import('./pages/Lines'))
 const NotFound = lazy(() => import('./pages/NotFound'))
 const Page = lazy(() => import('./pages/Page'))
 const Person = lazy(() => import('./pages/Person'))
@@ -68,14 +67,7 @@ const App = () => {
                     </React.Suspense>
                   }
                 />
-                <Route
-                  path="lines"
-                  element={
-                    <React.Suspense fallback={<>...</>}>
-                      <Lines isMobile={isMobile} />
-                    </React.Suspense>
-                  }
-                ></Route>
+
                 <Route
                   path="people"
                   element={

diff --git a/src/components/Author.js → src/components/Author.jsx b/src/components/Author.js → src/components/Author.jsx
diff --git a/src/components/AuthorItem.js → src/components/AuthorItem.jsx b/src/components/AuthorItem.js → src/components/AuthorItem.jsx
diff --git a/src/components/AvailableLanguages.js → src/components/AvailableLanguages.jsx b/src/components/AvailableLanguages.js → src/components/AvailableLanguages.jsx
diff --git a/src/components/Breadcrumb.js → src/components/Breadcrumb.jsx b/src/components/Breadcrumb.js → src/components/Breadcrumb.jsx
diff --git a/src/components/Cookies.js → src/components/Cookies.jsx b/src/components/Cookies.js → src/components/Cookies.jsx
@@ -4,7 +4,7 @@ import { Button, Form, Container } from 'react-bootstrap'
 import { usePermanentStore } from '../store'
 import { TermsOfUseRoute } from '../constants'
 import LangLink from './LangLink'
-import styles from '../styles/components/Cookie.css'
+import '../styles/components/Cookie.css'
 import { useTimeout } from '../hooks/timeout'
 
 const Cookies = ({ defaultAcceptCookies }) => {
@@ -66,13 +66,13 @@ const Cookies = ({ defaultAcceptCookies }) => {
             onChange={handleChange}
           />
         </Form>
-        <p className={styles.agreement}>
+        <p className="Cookies__agreement">
           By browsing this website you agree to our cookie policy. Visit{' '}
           <LangLink to={TermsOfUseRoute.to}>{t(TermsOfUseRoute.label)}</LangLink> to review your
           options later.
         </p>
         <div className="mx-3 my-0 my-md-3">
-          <Button className={styles.AgreeButton} onClick={handleClickAgree}>
+          <Button className="Cookies__agreeButton" onClick={handleClickAgree}>
             Agree
           </Button>
         </div>

diff --git a/src/components/CoverItems.js → src/components/CoverItems.jsx b/src/components/CoverItems.js → src/components/CoverItems.jsx
diff --git a/src/components/CreatePebbleMenu.js → src/components/CreatePebbleMenu.jsx b/src/components/CreatePebbleMenu.js → src/components/CreatePebbleMenu.jsx
diff --git a/src/components/DocumentDate.js → src/components/DocumentDate.jsx b/src/components/DocumentDate.js → src/components/DocumentDate.jsx
diff --git a/src/components/DocumentDoc.js → src/components/DocumentDoc.jsx b/src/components/DocumentDoc.js → src/components/DocumentDoc.jsx
diff --git a/src/components/DocumentImage.js → src/components/DocumentImage.jsx b/src/components/DocumentImage.js → src/components/DocumentImage.jsx
diff --git a/src/components/DocumentItem.js → src/components/DocumentItem.jsx b/src/components/DocumentItem.js → src/components/DocumentItem.jsx
diff --git a/src/components/DocumentMetadata.js → src/components/DocumentMetadata.jsx b/src/components/DocumentMetadata.js → src/components/DocumentMetadata.jsx
diff --git a/src/components/DocumentReference.js → src/components/DocumentReference.jsx b/src/components/DocumentReference.js → src/components/DocumentReference.jsx
diff --git a/...mponents/DocumentViewer/DocumentViewer.js → ...ponents/DocumentViewer/DocumentViewer.jsx b/...mponents/DocumentViewer/DocumentViewer.js → ...ponents/DocumentViewer/DocumentViewer.jsx
diff --git a/...nts/DocumentViewer/DocumentViewerAudio.js → ...ts/DocumentViewer/DocumentViewerAudio.jsx b/...nts/DocumentViewer/DocumentViewerAudio.js → ...ts/DocumentViewer/DocumentViewerAudio.jsx
diff --git a/...nts/DocumentViewer/DocumentViewerImage.js → ...ts/DocumentViewer/DocumentViewerImage.jsx b/...nts/DocumentViewer/DocumentViewerImage.js → ...ts/DocumentViewer/DocumentViewerImage.jsx
diff --git a/...nents/DocumentViewer/DocumentViewerPdf.js → ...ents/DocumentViewer/DocumentViewerPdf.jsx b/...nents/DocumentViewer/DocumentViewerPdf.js → ...ents/DocumentViewer/DocumentViewerPdf.jsx
diff --git a/src/components/DocumentViewer/index.js → src/components/DocumentViewer/index.jsx b/src/components/DocumentViewer/index.js → src/components/DocumentViewer/index.jsx
diff --git a/src/components/ErrorBoundary.js → src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.js → src/components/ErrorBoundary.jsx
diff --git a/src/components/Footer.js → src/components/Footer.jsx b/src/components/Footer.js → src/components/Footer.jsx
diff --git a/src/components/GetInTouch.js → src/components/GetInTouch.jsx b/src/components/GetInTouch.js → src/components/GetInTouch.jsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 
 const GetInTouch = ({ emailSubjectTranslationLabel = 'getInTouchSubject' }) => {
   const { t } = useTranslation()
-  const href = `mailto:${process.env.REACT_APP_EMAIL}?subject=${encodeURIComponent(
+  const href = `mailto:${import.meta.env.VITE_EMAIL}?subject=${encodeURIComponent(
     t(emailSubjectTranslationLabel),
   )}`
 

diff --git a/src/components/Header.js → src/components/Header.jsx b/src/components/Header.js → src/components/Header.jsx
@@ -6,9 +6,6 @@ import Logo from './Logo'
 import {
   BootstrapStartColumnLayoutNoOffset,
   BootstrapEndColumnLayout,
-  DefaultLanguageCode,
-  LanguageCodes,
-  LanguagePathRegExp,
   LanguageRootPathRegExp,
   AboutRoute,
   StoryRoute,
@@ -25,13 +22,8 @@ const Header = () => {
   const { t } = useTranslation()
   const routeLabel = useStore((state) => state.routeLabel)
 
-  const activeLanguage = window.location.pathname.match(LanguagePathRegExp)
+  // const activeLanguage = window.location.pathname.match(LanguagePathRegExp)
   const isRootPath = window.location.pathname.match(LanguageRootPathRegExp)
-  const activeLanguageCode = activeLanguage
-    ? activeLanguage[1]
-    : isRootPath
-    ? isRootPath[1]
-    : DefaultLanguageCode
 
   return (
     <header className="Header">
@@ -116,7 +108,7 @@ const Header = () => {
                 </li>
 
                 <li>
-                  <LanguageSwitch className="d-flex" linkClassName="ms-3" />
+                  <LanguageSwitch isRootPath={isRootPath} className="d-flex" linkClassName="ms-3" />
                 </li>
               </ul>
             </nav>

diff --git a/src/components/HelmetItem.js → src/components/HelmetItem.jsx b/src/components/HelmetItem.js → src/components/HelmetItem.jsx
diff --git a/src/components/HomeBiographies.js → src/components/HomeBiographies.jsx b/src/components/HomeBiographies.js → src/components/HomeBiographies.jsx
@@ -133,7 +133,7 @@ const HomeBiographies = ({ isMobile, speed, availableWidth, availableHeight, cla
           empty
         </li>
         {status === StatusSuccess
-          ? data.results.map((story) => (
+          ? data.results?.map((story) => (
               <li
                 key={story.slug}
                 className={`HomeBiographies_storyListItem ${

diff --git a/src/components/HomeLandscape.js → src/components/HomeLandscape.jsx b/src/components/HomeLandscape.js → src/components/HomeLandscape.jsx
diff --git a/src/components/HomeThreeLandscape.js → src/components/HomeThreeLandscape.jsx b/src/components/HomeThreeLandscape.js → src/components/HomeThreeLandscape.jsx
diff --git a/src/components/LangLink.js → src/components/LangLink.jsx b/src/components/LangLink.js → src/components/LangLink.jsx
diff --git a/src/components/LanguageRouter.js → src/components/LanguageRouter.jsx b/src/components/LanguageRouter.js → src/components/LanguageRouter.jsx
diff --git a/src/components/LanguageSwitch.js → src/components/LanguageSwitch.jsx b/src/components/LanguageSwitch.js → src/components/LanguageSwitch.jsx
diff --git a/src/components/LinesMap.js → src/components/LinesMap.jsx b/src/components/LinesMap.js → src/components/LinesMap.jsx
@@ -1,14 +1,15 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import ReactMapboxGl, { MapContext, ZoomControl, Cluster, Marker } from 'react-mapbox-gl'
 import mapboxgl from 'mapbox-gl'
-import MapboxWorker from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker' // eslint-disable-line import/no-webpack-loader-syntax
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker' // eslint-disable-line import/no-webpack-loader-syntax
 import '../styles/components/LinesMap.css'
 import LinesMapLineLayer from './LinesMapLineLayer'
 
 import 'mapbox-gl/dist/mapbox-gl.css'
 
 const Map = ReactMapboxGl({
-  accessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
+  accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
   projection: 'naturalEarth',
 })
 
@@ -103,7 +104,7 @@ const LinesMap = ({
   return (
     <div className={`LinesMap ${className}`} style={{ width, height, overflow: 'hidden' }}>
       <Map
-        style={`${process.env.REACT_APP_MAPBOX_STYLE_URL}?optimize=true`}
+        style={`${import.meta.env.VITE_MAPBOX_STYLE_URL}?optimize=true`}
         className="map h-100 w-100"
         center={center}
         zoom={[zoom]}

diff --git a/src/components/LinesMapLineLayer.js → src/components/LinesMapLineLayer.jsx b/src/components/LinesMapLineLayer.js → src/components/LinesMapLineLayer.jsx
diff --git a/src/components/LinesMapMarker.js → src/components/LinesMapMarker.jsx b/src/components/LinesMapMarker.js → src/components/LinesMapMarker.jsx
diff --git a/src/components/Logo.js → src/components/Logo.jsx b/src/components/Logo.js → src/components/Logo.jsx
diff --git a/src/components/LogoC2dhUnilu.js → src/components/LogoC2dhUnilu.jsx b/src/components/LogoC2dhUnilu.js → src/components/LogoC2dhUnilu.jsx
diff --git a/src/components/Markdown.js → src/components/Markdown.jsx b/src/components/Markdown.js → src/components/Markdown.jsx
diff --git a/src/components/MatomoTracker.js → src/components/MatomoTracker.jsx b/src/components/MatomoTracker.js → src/components/MatomoTracker.jsx
diff --git a/src/components/MobileHeader.js → src/components/MobileHeader.jsx b/src/components/MobileHeader.js → src/components/MobileHeader.jsx
diff --git a/src/components/OrderByDropdown.js → src/components/OrderByDropdown.jsx b/src/components/OrderByDropdown.js → src/components/OrderByDropdown.jsx
diff --git a/src/components/Pebble.js → src/components/Pebble.jsx b/src/components/Pebble.js → src/components/Pebble.jsx
diff --git a/src/components/PebbleSideIcon.js → src/components/PebbleSideIcon.jsx b/src/components/PebbleSideIcon.js → src/components/PebbleSideIcon.jsx
diff --git a/src/components/PeopleCard.js → src/components/PeopleCard.jsx b/src/components/PeopleCard.js → src/components/PeopleCard.jsx
diff --git a/src/components/Person.js → src/components/Person.jsx b/src/components/Person.js → src/components/Person.jsx
diff --git a/src/components/PersonSummary.js → src/components/PersonSummary.jsx b/src/components/PersonSummary.js → src/components/PersonSummary.jsx
diff --git a/src/components/PlayPauseBtn.js → src/components/PlayPauseBtn.jsx b/src/components/PlayPauseBtn.js → src/components/PlayPauseBtn.jsx
diff --git a/...ents/PreciseScrolling/PreciseScrolling.js → ...nts/PreciseScrolling/PreciseScrolling.jsx b/...ents/PreciseScrolling/PreciseScrolling.js → ...nts/PreciseScrolling/PreciseScrolling.jsx
diff --git a/src/components/RouteAdapter.js → src/components/RouteAdapter.jsx b/src/components/RouteAdapter.js → src/components/RouteAdapter.jsx
diff --git a/src/components/ScrollToTop.js → src/components/ScrollToTop.jsx b/src/components/ScrollToTop.js → src/components/ScrollToTop.jsx
diff --git a/src/components/SearchDocuments.js → src/components/SearchDocuments.jsx b/src/components/SearchDocuments.js → src/components/SearchDocuments.jsx
diff --git a/src/components/SearchField.js → src/components/SearchField.jsx b/src/components/SearchField.js → src/components/SearchField.jsx
diff --git a/src/components/SearchStories.js → src/components/SearchStories.jsx b/src/components/SearchStories.js → src/components/SearchStories.jsx
diff --git a/src/components/StoryAuthors.js → src/components/StoryAuthors.jsx b/src/components/StoryAuthors.js → src/components/StoryAuthors.jsx
diff --git a/src/components/StoryEndnotes.js → src/components/StoryEndnotes.jsx b/src/components/StoryEndnotes.js → src/components/StoryEndnotes.jsx
diff --git a/src/components/StoryHelmet.js → src/components/StoryHelmet.jsx b/src/components/StoryHelmet.js → src/components/StoryHelmet.jsx
@@ -24,7 +24,7 @@ const StoryHelmet = ({ story, language }) => {
     description = story.contents.modules[0].text.content[language]
     cover =
       story.covers.length > 0
-        ? String(process.env.REACT_APP_ORIGIN + story.covers[0].data?.resolutions?.medium?.url)
+        ? String(import.meta.env.VITE_ORIGIN + story.covers[0].data?.resolutions?.medium?.url)
         : '/screen.png'
   } catch (error) {
     console.warn('[Storyhelmet] error in rendering, skipping. ', error)
@@ -66,7 +66,7 @@ const StoryHelmet = ({ story, language }) => {
       <meta name="dc:title" content={title} />
       <meta name="dc:publisher" content="C2DH - University of Luxembourg" />
       <meta property="og:site_name" content="memorialshoah.lu" />
-      <meta property="og:url" content={process.env.REACT_APP_ORIGIN + window.location.pathname} />
+      <meta property="og:url" content={import.meta.env.VITE_ORIGIN + window.location.pathname} />
       <meta property="og:title" content={title} />
       <meta name="twitter:site" content="@memorialshoahlu" />
       <meta name="twitter:card" content="summary" />

diff --git a/src/components/StoryItem.js → src/components/StoryItem.jsx b/src/components/StoryItem.js → src/components/StoryItem.jsx
diff --git a/...ponents/StoryModule/FootnoteDefinition.js → ...onents/StoryModule/FootnoteDefinition.jsx b/...ponents/StoryModule/FootnoteDefinition.js → ...onents/StoryModule/FootnoteDefinition.jsx
diff --git a/...mponents/StoryModule/FootnoteReference.js → ...ponents/StoryModule/FootnoteReference.jsx b/...mponents/StoryModule/FootnoteReference.js → ...ponents/StoryModule/FootnoteReference.jsx
diff --git a/src/components/StoryModule/ModuleText.js → src/components/StoryModule/ModuleText.jsx b/src/components/StoryModule/ModuleText.js → src/components/StoryModule/ModuleText.jsx
diff --git a/...omponents/StoryModule/ModuleTextAnchor.js → ...mponents/StoryModule/ModuleTextAnchor.jsx b/...omponents/StoryModule/ModuleTextAnchor.js → ...mponents/StoryModule/ModuleTextAnchor.jsx
@@ -43,9 +43,9 @@ const ModuleTextAnchor = ({ node, children, href, ...props }) => {
     )
   }
   // check if href is the website one (internal links)
-  if (href.indexOf(process.env.REACT_APP_ORIGIN) !== -1) {
+  if (href.indexOf(import.meta.env.VITE_ORIGIN) !== -1) {
     // remove origin, e.g. `https://` and language `/en/` from the href to make page specific
-    const to = href.replace(process.env.REACT_APP_ORIGIN, '').replace(LanguagePathRegExp, '')
+    const to = href.replace(import.meta.env.VITE_ORIGIN, '').replace(LanguagePathRegExp, '')
     return (
       <LangLink className="ModuleTextAnchor" to={to} {...props}>
         {textNode}

diff --git a/src/components/StoryModule/StoryModule.js → src/components/StoryModule/StoryModule.jsx b/src/components/StoryModule/StoryModule.js → src/components/StoryModule/StoryModule.jsx
diff --git a/...onents/StoryModule/StoryModuleNotFound.js → ...nents/StoryModule/StoryModuleNotFound.jsx b/...onents/StoryModule/StoryModuleNotFound.js → ...nents/StoryModule/StoryModuleNotFound.jsx
diff --git a/...components/StoryModule/StoryModuleText.js → ...omponents/StoryModule/StoryModuleText.jsx b/...components/StoryModule/StoryModuleText.js → ...omponents/StoryModule/StoryModuleText.jsx
diff --git a/src/components/StoryModule/index.js → src/components/StoryModule/index.jsx b/src/components/StoryModule/index.js → src/components/StoryModule/index.jsx
diff --git a/src/components/StoryTimeline.js → src/components/StoryTimeline.jsx b/src/components/StoryTimeline.js → src/components/StoryTimeline.jsx
diff --git a/src/components/SvgIcons.js → src/components/SvgIcons.jsx b/src/components/SvgIcons.js → src/components/SvgIcons.jsx
diff --git a/src/components/TermsOfuseCookies.js → src/components/TermsOfuseCookies.jsx b/src/components/TermsOfuseCookies.js → src/components/TermsOfuseCookies.jsx
diff --git a/src/components/Terrain.js → src/components/Terrain.jsx b/src/components/Terrain.js → src/components/Terrain.jsx
diff --git a/src/components/TopDocuments.js → src/components/TopDocuments.jsx b/src/components/TopDocuments.js → src/components/TopDocuments.jsx
diff --git a/src/components/TopStories.js → src/components/TopStories.jsx b/src/components/TopStories.js → src/components/TopStories.jsx
diff --git a/src/constants.js b/src/constants.js
@@ -52,16 +52,16 @@ export const AllRoutes = [
   LinesMapRoute,
 ]
 
-export const Languages = (process.env.REACT_APP_LANGUAGES ?? 'en-GB,fr-FR,de-DE').split(',')
+export const Languages = (import.meta.env.VITE_LANGUAGES ?? 'en-GB,fr-FR,de-DE').split(',')
 export const MillerLanguages = Languages.map((l) => l.split('-').join('_'))
 export const LanguageCodes = Languages.map((l) => l.split('-')[0])
 export const LanguageRoutePattern = `/:lang(${LanguageCodes.join('|')})`
 export const LanguagePathRegExp = new RegExp(`/(${LanguageCodes.join('|')})/`)
 export const LanguageRootPathRegExp = new RegExp(`^/(${LanguageCodes.join('|')})/?$`)
-export const DefaultLanguage = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'en-GB'
+export const DefaultLanguage = import.meta.env.VITE_DEFAULT_LANGUAGE ?? 'en-GB'
 export const DefaultLanguageCode = DefaultLanguage.split('-')[0]
 
-export const MillerAPI = process.env.REACT_APP_MILLER_API ?? '/api'
+export const MillerAPI = import.meta.env.VITE_MILLER_API ?? '/api'
 
 export const BootstrapColumnLayout = Object.freeze({
   md: { span: 11, offset: 1 },

diff --git a/src/hooks/data.js b/src/hooks/data.js
@@ -25,7 +25,7 @@ export const useGetJSON = ({
   url,
   memoid = '',
   delay = 0,
-  timeout = process.env.REACT_APP_API_TIMEOUT || 0,
+  timeout = import.meta.env.VITE_API_TIMEOUT || 0,
   onDownloadProgress,
   params,
 }) => {