feat: updated base path

tahasun · Jan 27, 2024 · 748eea6 · 748eea6
1 parent 217c9ea
commit 748eea6
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/icons/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Stories of Our Land</title>
   </head>

diff --git a/public/icons/favicon.ico b/public/icons/favicon.ico
diff --git a/src/components/gallery.tsx b/src/components/gallery.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { IImage } from "../utils/types";
 
 const SCROLL_TIME = 5 * 1000;
+export const BASE_URL = "stories-of-our-land";
 
 interface GalleryProps {
   images: IImage[];
@@ -68,9 +69,13 @@ const Gallery = (props: GalleryProps) => {
     setActiveTab(index);
   };
 
+  const imgSrc = import.meta.env.PROD
+    ? BASE_URL + props.images[activeTab]?.src
+    : props.images[activeTab]?.src;
+
   return (
     <Wrapper>
-      <Image src={props.images[activeTab]?.src ?? ""} />
+      <Image src={imgSrc ?? ""} />
       <Link href={props.images[activeTab]?.link ?? ""}>
         ©{props.images[activeTab]?.attribution ?? ""}
       </Link>

diff --git a/src/components/map.tsx b/src/components/map.tsx
@@ -6,7 +6,7 @@ import * as landmarkData from "../data/landmarks.json";
 import { useMemo, useReducer, useState } from "react";
 import Profile from "./profile";
 import { getLandmarksById } from "../utils/utils";
-import ProfilePreview from "./preview";
+// import ProfilePreview from "./preview";
 import { ILandmark, ViewState } from "../utils/types";
 import { Wrapper, HoverInfo, CopyrightLicense, Link } from "./map.style";
 import { MapController } from "./mapController";
@@ -20,6 +20,7 @@ import {
   MapContext,
 } from "../utils/mapContext";
 import { TopBar } from "./topBar";
+import { BASE_URL } from "./gallery";
 
 const ICON_MAPPING = {
   marker: { x: 0, y: 0, width: 260, height: 280, anchor: 260, mask: true },
@@ -130,7 +131,7 @@ export const Map = () => {
     id: "icon-layer",
     data: data,
     pickable: true,
-    iconAtlas: "/StoriesOfOurLand/icons/pin.png",
+    iconAtlas: `/${BASE_URL}/icons/pin.png`,
     iconMapping: ICON_MAPPING,
     getIcon: () => "marker",
     sizeScale: 10,
@@ -178,7 +179,7 @@ export const Map = () => {
               top: hoverInfo.y,
             }}
           >
-            <ProfilePreview landmark={hoverInfo.object} />
+            {/* <ProfilePreview landmark={hoverInfo.object} /> */}
           </HoverInfo>
         )}
 

diff --git a/src/components/preview.tsx b/src/components/preview.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { ILandmark } from "../utils/types";
+import { BASE_URL } from "./gallery";
 
 const Container = styled.div`
   background-color: white;
@@ -23,10 +24,14 @@ const Img = styled.img`
 `;
 
 const ProfilePreview = ({ landmark }: { landmark: ILandmark }) => {
+  const imgSrc = import.meta.env.PROD
+    ? BASE_URL + landmark.images[0].src
+    : landmark.images[0].src;
+
   return (
     <Container>
       <h2>{landmark.name}</h2>
-      <Img src={landmark.images[0].src ?? ""} />
+      <Img src={imgSrc} />
     </Container>
   );
 };

diff --git a/vite.config.ts b/vite.config.ts
@@ -4,7 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "/StoriesOfOurLand/",
+  base: "/stories-of-our-land/",
   server: {
     port: 3006,
   }