[Fix] React component サブディレクトリ時のpath変更対応

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "astro dev",
+    "dev:gh-pages": "TARGET=gh-pages astro dev",
     "start": "astro dev",
     "build": "astro check && astro build",
     "build:gh-pages": "astro check && TARGET=gh-pages astro build",

src/components/WorksSlide/index.tsx

@@ -3,15 +3,15 @@ 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;
   titleEn: string;
   items: Work[];
+  path: string;
 };
 
-const WorksSlide = ({ title, titleEn, items }: Props) => {
+const WorksSlide = ({ title, titleEn, items, path }: Props) => {
   const [selectedOption, setSelectedOption] = useState('ALL');
   const [open, setOpen] = useState(false);
   const wrapper = useRef<HTMLDivElement | null>(null);
@@ -55,13 +55,13 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
                 }
               >
                 <a
-                  href={updatePath(`/works/${item.slug}/`)}
+                  href={`${path}/works/${item.slug}/`}
                   className="ts-image-link flex flex-col h-full"
                 >
                   <div className="flex flex-1">
                     <picture className="flex-1">
                       <img
-                        src={updatePath(item.image)}
+                        src={`${path}${item.image}`}
                         alt={item.title}
                         className="w-full h-full object-cover"
                       />

src/pages/works.astro

@@ -3,6 +3,7 @@ import Layout from '@/layouts/Layout.astro';
 import WorksSlide from '@/components/WorksSlide';
 import works from '@/data/works';
 import Stalker from '@/components/Stalker';
+const path = import.meta.env.TARGET === 'gh-pages' ? '/st-portfolio' : '';
 const title = '制作実績';
 const titleEn = 'WORKS';
 ---
@@ -12,6 +13,7 @@ const titleEn = 'WORKS';
     title={title}
     titleEn={titleEn}
     items={works}
+    path={path}
     client:only="react"
   />
   <Stalker client:only="react" />