Merge pull request #81 from INxST/feature/#43/fix-detail

[Update] path変更
INxST · Aug 13, 2024 · 96ab17c · 96ab17c
2 parents cd9322f + 02f96ff
commit 96ab17c
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 46 deletions.
diff --git a/src/components/NextWork.astro b/src/components/NextWork.astro
@@ -1,5 +1,6 @@
 ---
 import type { Work } from '@/types/Work';
+import updatePath from '@/libs/updatePath';
 
 interface Props {
   work: Work;
@@ -20,12 +21,12 @@ const { work } = Astro.props;
 
 <picture class="ts-horizontal-scroll-item block mt-9 md:mt-0">
   <a
-    href={`/works/${work.slug}/`}
+    href={updatePath(`/works/${work.slug}/`)}
     aria-label={`${work.title}を見る`}
     class="ts-crossing-link block h-full relative"
   >
     <img
-      src={work.image}
+      src={updatePath(work.image)}
       aria-label={`${work.title}を見る`}
       class="ts-image-white-in md:h-full"
     />

diff --git a/src/components/WorksSlide/index.tsx b/src/components/WorksSlide/index.tsx
@@ -3,6 +3,7 @@ import React, { useState, useRef } from 'react';
 import TitleVertical from '../TitleVertical';
 import scrollSlide from './scrollSlide';
 import filters from '@/data/filters';
+import updatePath from '@/libs/updatePath';
 
 type Props = {
   title: string;
@@ -54,13 +55,13 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
                 }
               >
                 <a
-                  href={`/works/${item.slug}/`}
+                  href={updatePath(`/works/${item.slug}/`)}
                   className="ts-image-link flex flex-col h-full"
                 >
                   <div className="flex flex-1">
                     <picture className="flex-1">
                       <img
-                        src={item.image}
+                        src={updatePath(item.image)}
                         alt={item.title}
                         className="w-full h-full object-cover"
                       />

diff --git a/src/libs/updatePath.ts b/src/libs/updatePath.ts
@@ -1,7 +1,5 @@
-import { loadEnv } from 'vite';
 const updatePath = (src: string) => {
-  const env = loadEnv(process.env.NODE_ENV!, process.cwd(), '');
-  const path = env.TARGET === 'gh-pages' ? '/st-portfolio' : '';
+  const path = import.meta.env.TARGET === 'gh-pages' ? '/st-portfolio' : '';
   return path + src;
 };
 

diff --git a/src/pages/works/5days.astro b/src/pages/works/5days.astro
@@ -49,7 +49,7 @@ const { work, nextWork } = getWork(slug);
 
       <picture class="ts-horizontal-scroll-item">
         <img
-          src={updatePath(`/detail/${work?.slug}/1.jpg`)}
+          src={updatePath(`/detail/${slug}/1.jpg`)}
           alt=""
           class="ts-image-white-in md:h-full"
         />
@@ -84,7 +84,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/2.jpg`)}
+                  src={updatePath(`/detail/${slug}/2.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -93,7 +93,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/3.jpg`)}
+                  src={updatePath(`/detail/${slug}/3.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -102,7 +102,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <video muted loop autoplay class="ts-image-white-in">
                 <source
-                  src={updatePath(`/detail/${work?.slug}/movie.mp4`)}
+                  src={updatePath(`/detail/${slug}/movie.mp4`)}
                   type="video/mp4"
                 />
               </video>

diff --git a/src/pages/works/burst-of-mana.astro b/src/pages/works/burst-of-mana.astro
@@ -39,7 +39,7 @@ const { work, nextWork } = getWork(slug);
 
       <picture class="ts-horizontal-scroll-item">
         <img
-          src={updatePath(`/detail/${work?.slug}/1.jpg`)}
+          src={updatePath(`/detail/${slug}/1.jpg`)}
           alt=""
           class="ts-image-white-in md:h-full"
         />
@@ -84,7 +84,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/2.jpg`)}
+                  src={updatePath(`/detail/${slug}/2.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -94,7 +94,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/3.jpg`)}
+                    src={updatePath(`/detail/${slug}/3.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -103,7 +103,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/4.jpg`)}
+                    src={updatePath(`/detail/${slug}/4.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -113,7 +113,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/5.jpg`)}
+                  src={updatePath(`/detail/${slug}/5.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />

diff --git a/src/pages/works/ceramics.astro b/src/pages/works/ceramics.astro
@@ -48,7 +48,7 @@ const { work, nextWork } = getWork(slug);
 
       <picture class="ts-horizontal-scroll-item">
         <img
-          src={updatePath(`/detail/${work?.slug}/1.jpg`)}
+          src={updatePath(`/detail/${slug}/1.jpg`)}
           alt=""
           class="ts-image-white-in md:h-full"
         />
@@ -93,7 +93,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/2.jpg`)}
+                  src={updatePath(`/detail/${slug}/2.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -102,7 +102,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/3.jpg`)}
+                  src={updatePath(`/detail/${slug}/3.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -111,7 +111,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/4.jpg`)}
+                  src={updatePath(`/detail/${slug}/4.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />

diff --git a/src/pages/works/clinical-diagnostic-reagents-company.astro b/src/pages/works/clinical-diagnostic-reagents-company.astro
@@ -38,7 +38,7 @@ const { work, nextWork } = getWork(slug);
 
       <picture class="ts-horizontal-scroll-item">
         <img
-          src={updatePath(`/detail/${work?.slug}/1.jpg`)}
+          src={updatePath(`/detail/${slug}/1.jpg`)}
           alt=""
           class="ts-image-white-in md:h-full"
         />
@@ -87,7 +87,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/2.jpg`)}
+                  src={updatePath(`/detail/${slug}/2.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -96,7 +96,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/3.jpg`)}
+                  src={updatePath(`/detail/${slug}/3.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -105,7 +105,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/4.jpg`)}
+                  src={updatePath(`/detail/${slug}/4.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />

diff --git a/src/pages/works/keio-fashion-creator.astro b/src/pages/works/keio-fashion-creator.astro
@@ -40,7 +40,7 @@ const { work, nextWork } = getWork(slug);
 
       <picture class="ts-horizontal-scroll-item">
         <img
-          src={updatePath(`/detail/${work?.slug}/1.jpg`)}
+          src={updatePath(`/detail/${slug}/1.jpg`)}
           alt=""
           class="ts-image-white-in md:h-full"
         />
@@ -72,7 +72,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/2.jpg`)}
+                    src={updatePath(`/detail/${slug}/2.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -81,7 +81,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/3.jpg`)}
+                    src={updatePath(`/detail/${slug}/3.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -92,7 +92,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/4.jpg`)}
+                    src={updatePath(`/detail/${slug}/4.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -101,7 +101,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/5.jpg`)}
+                    src={updatePath(`/detail/${slug}/5.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -112,7 +112,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/6.jpg`)}
+                    src={updatePath(`/detail/${slug}/6.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -121,7 +121,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/7.jpg`)}
+                    src={updatePath(`/detail/${slug}/7.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -132,7 +132,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/8.jpg`)}
+                    src={updatePath(`/detail/${slug}/8.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -141,7 +141,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/9.jpg`)}
+                    src={updatePath(`/detail/${slug}/9.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -152,7 +152,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/10.jpg`)}
+                    src={updatePath(`/detail/${slug}/10.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -161,7 +161,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/11.jpg`)}
+                    src={updatePath(`/detail/${slug}/11.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />

diff --git a/src/pages/works/misia-forest.astro b/src/pages/works/misia-forest.astro
@@ -42,7 +42,7 @@ const { work, nextWork } = getWork(slug);
 
       <picture class="ts-horizontal-scroll-item">
         <img
-          src={updatePath(`/detail/${work?.slug}/1.jpg`)}
+          src={updatePath(`/detail/${slug}/1.jpg`)}
           alt=""
           class="ts-image-white-in md:h-full"
         />
@@ -89,7 +89,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/2.jpg`)}
+                  src={updatePath(`/detail/${slug}/2.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -99,7 +99,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/3.jpg`)}
+                    src={updatePath(`/detail/${slug}/3.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -108,7 +108,7 @@ const { work, nextWork } = getWork(slug);
               <li>
                 <picture>
                   <img
-                    src={updatePath(`/detail/${work?.slug}/4.jpg`)}
+                    src={updatePath(`/detail/${slug}/4.jpg`)}
                     alt=""
                     class="ts-image-white-in"
                   />
@@ -118,7 +118,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <picture>
                 <img
-                  src={updatePath(`/detail/${work?.slug}/5.jpg`)}
+                  src={updatePath(`/detail/${slug}/5.jpg`)}
                   alt=""
                   class="ts-image-white-in"
                 />
@@ -127,7 +127,7 @@ const { work, nextWork } = getWork(slug);
             <li>
               <video controls class="ts-image-white-in">
                 <source
-                  src={updatePath(`/detail/${work?.slug}/movie.mp4`)}
+                  src={updatePath(`/detail/${slug}/movie.mp4`)}
                   type="video/mp4"
                 />
               </video>