Merge pull request #35 from creativetimofficial/refactor/change-struc…

…ture refactor: fix images path on live
creativetimofficial · Jul 26, 2023 · 0985d4b · 0985d4b
2 parents 22912b4 + 46dbb68
commit 0985d4b
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 27 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -8,4 +8,5 @@ export default defineConfig({
   integrations: [react()],
   site: 'https://creativetimofficial.github.io',
   base: '/astro-ecommerce',
+  trailingSlash: 'always'
 });
diff --git a/public/data.json b/public/data.json
@@ -2,7 +2,7 @@
   "products": [
     {
       "id": "01",
-      "thumb_src": "../images/suit-3.jpg",
+      "thumb_src": "/images/suit-3.jpg",
       "thumb_alt": "watch-image",
       "images": [
         {
@@ -69,7 +69,7 @@
     },
     {
       "id": "02",
-      "thumb_src": "../images/suit-1.jpg",
+      "thumb_src": "/images/suit-1.jpg",
       "thumb_alt": "watch-image",
       "images": [
         {
@@ -129,7 +129,7 @@
     },
     {
       "id": "03",
-      "thumb_src": "../images/suit-2.jpg",
+      "thumb_src": "/images/suit-2.jpg",
       "thumb_alt": "iMac-image",
       "images": [
         {
@@ -172,7 +172,7 @@
     },
     {
       "id": "04",
-      "thumb_src": "../images/suit-5.jpg",
+      "thumb_src": "/images/suit-5.jpg",
       "thumb_alt": "iPhone_thumb",
       "color": "Blue",
       "title": "iPhone",
@@ -191,37 +191,37 @@
   ],
   "categories": [
     {
-      "thumb_src": "../images/category1.jpg",
+      "thumb_src": "/images/category1.jpg",
       "title": "Silk Dresses",
       "collection": "Pre-fall"
     },
     {
-      "thumb_src": "../images/category2.jpg",
+      "thumb_src": "/images/category2.jpg",
       "title": "Suits",
       "collection": "Designers"
     },
     {
-      "thumb_src": "../images/category3.jpg",
+      "thumb_src": "/images/category3.jpg",
       "title": "Festival",
       "collection": "Summer"
     },
     {
-      "thumb_src": "../images/category4.jpg",
+      "thumb_src": "/images/category4.jpg",
       "title": "Showroom",
       "collection": "Sale"
     },
     {
-      "thumb_src": "../images/product10.jpg",
+      "thumb_src": "/images/product10.jpg",
       "title": "Living Sofas",
       "collection": "Interior Design"
     },
     {
-      "thumb_src": "../images/category5.jpg",
+      "thumb_src": "/images/category5.jpg",
       "title": "Chairs by Designers",
       "collection": "Sale"
     },
     {
-      "thumb_src": "../images/product9.jpg",
+      "thumb_src": "/images/product9.jpg",
       "title": "Home care",
       "collection": "Products"
     }

diff --git a/src/components/complexNavbar.tsx b/src/components/complexNavbar.tsx
@@ -57,7 +57,7 @@ const ComplexNavbar = () => {
                   <a className="dropdown-item border-radius-md" href="#">
                     <div className="py-1 d-flex">
                       <div className="my-auto">
-                        <img src="./images/team-2.jpg" className="avatar avatar-sm  me-3 " alt="user image" />
+                        <img src="/images/team-2.jpg" className="avatar avatar-sm  me-3 " alt="user image" />
                       </div>
                       <div className="d-flex flex-column justify-content-center">
                         <h6 className="mb-1 text-sm font-weight-normal">
@@ -127,7 +127,7 @@ const ComplexNavbar = () => {
             <li className="nav-item dropdown pe-2 d-flex align-items-center">
               <a href="#" className="px-0 nav-link font-weight-bold">
                 <div className="avatar avatar-sm position-relative">
-                  <img src="./images/team-1.jpg" alt="profile_image" className="w-100 border-radius-md" />
+                  <img src="/images/team-1.jpg" alt="profile_image" className="w-100 border-radius-md" />
                 </div>
               </a>
             </li>

diff --git a/src/components/complexNavbarDark.tsx b/src/components/complexNavbarDark.tsx
@@ -57,7 +57,7 @@ const ComplexNavbarDark = () => {
                   <a className="dropdown-item border-radius-md" href="#">
                     <div className="py-1 d-flex">
                       <div className="my-auto">
-                        <img src="./images/team-2.jpg" className="avatar avatar-sm  me-3 " alt="user image" />
+                        <img src="/images/team-2.jpg" className="avatar avatar-sm  me-3 " alt="user image" />
                       </div>
                       <div className="d-flex flex-column justify-content-center">
                         <h6 className="mb-1 text-sm font-weight-normal">
@@ -127,7 +127,7 @@ const ComplexNavbarDark = () => {
             <li className="nav-item dropdown pe-2 d-flex align-items-center">
               <a href="#" className="px-0 text-white nav-link font-weight-bold">
                 <div className="avatar avatar-sm position-relative">
-                  <img src="./images/team-1.jpg" alt="profile_image" className="w-100 border-radius-md" />
+                  <img src="/images/team-1.jpg" alt="profile_image" className="w-100 border-radius-md" />
                 </div>
               </a>
             </li>

diff --git a/src/components/products/cardCategory.tsx b/src/components/products/cardCategory.tsx
@@ -21,7 +21,7 @@ export default function CardProduct({
     <>
       <a href="#">
         <div className={`card card-background align-items-start mb-4 mb-lg-0 ${classList}`}>
-          <div className="full-background" style={{backgroundImage: `url(${thumb_src})`, backgroundSize: 'cover'}}></div>
+          <div className="full-background" style={{backgroundImage: `url(${`${import.meta.env.BASE_URL}${thumb_src}`})`, backgroundSize: 'cover'}}></div>
           <div className={`card-body ${classBody}`}>
             <div className="d-block mt-10">
               <p className="text-white font-weight-bold mb-1">{collection}</p>

diff --git a/src/components/products/cardProduct.tsx b/src/components/products/cardProduct.tsx
@@ -29,7 +29,7 @@ export default function CardProduct({
       <div className="card card-product border mb-5 shadow-xs border-radius-lg">
         <a href="#">
           <div className="height-350">
-            <img className="w-100 h-100 p-4 rounded-top" src={thumb_src} alt={thumb_alt} />
+            <img className="w-100 h-100 p-4 rounded-top" src={`${import.meta.env.BASE_URL}${thumb_src}`} alt={thumb_alt} />
           </div>
           <div className={classList}>
             {(color) && 

diff --git a/src/components/products/productFeature2.tsx b/src/components/products/productFeature2.tsx
@@ -65,16 +65,16 @@ export default function ProductOverview({
                 <div className="col-12 col-lg-6 mb-lg-0 mb-4">
                   <div className="row">
                     <div className="col-6 mb-4">
-                      <img className="w-100 rounded-3" src="./images/product10.jpg" alt="" />
+                      <img className="w-100 rounded-3" src="/images/product10.jpg" alt="" />
                     </div>
                     <div className="col-6 mb-4">
-                      <img className="w-100 rounded-3" src="./images/product11.jpg" alt="" />
+                      <img className="w-100 rounded-3" src="/images/product11.jpg" alt="" />
                     </div>
                     <div className="col-6 mb-4">
-                      <img className="w-100 rounded-3" src="./images/product12.jpg" alt="" />
+                      <img className="w-100 rounded-3" src="/images/product12.jpg" alt="" />
                     </div>
                     <div className="col-6">
-                      <img className="w-100 rounded-3" src="./images/product13.jpg" alt="" />
+                      <img className="w-100 rounded-3" src="/images/product13.jpg" alt="" />
                     </div>
                   </div>
                 </div>

diff --git a/src/components/products/productFeatureImg.tsx b/src/components/products/productFeatureImg.tsx
@@ -12,14 +12,14 @@ export default function ProductGallery({
   return (
     <>
       <div className="d-block d-md-flex">
-        <img className="w-100 max-height-200 rounded-3 mb-4 mb-md-0" src="../images/product7.jpg" alt={images[0].alt} />
+        <img className="w-100 max-height-200 rounded-3 mb-4 mb-md-0" src="/images/product7.jpg" alt={images[0].alt} />
       </div>
       <div className="row mt-4">
         <div className="col-6">
-          <img className="w-100 max-height-200 rounded-3" src="../images/product8.jpg" alt={images[2].alt} />
+          <img className="w-100 max-height-200 rounded-3" src="/images/product8.jpg" alt={images[2].alt} />
         </div>
         <div className="col-6">
-          <img className="w-100 max-height-200 rounded-3" src="../images/product9.jpg" alt={images[3].alt} />
+          <img className="w-100 max-height-200 rounded-3" src="/images/product9.jpg" alt={images[3].alt} />
         </div>
       </div>
     </>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -241,7 +241,7 @@ data.orders.forEach((order) => {
         <p class="mb-5">With large size selector</p>
         <ProductQuickview2 
           colors={data.products[1].colors}
-          thumb_src="./images/mirror.png"
+          thumb_src="/images/mirror.png"
           title="Sofa"
           price={data.products[1].price}
           rating={data.products[1].rating}

diff --git a/src/pages/product.astro b/src/pages/product.astro
@@ -10,8 +10,6 @@ import ReviewSummaryChart from '../components/reviews/reviewSummaryChart';
 
 // filter reviews with ID 01
 let productReviews = data.reviews.filter(x => x.productID == "01");
-
-
 ---
 
 <Layout title="Product Page">