Fix assets path (#834)

Author: matikd13

landing/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
-    "build": "astro build",
+    "build": "astro build && touch dist/.nojekyll",
     "preview": "astro preview",
     "astro": "astro"
   },

landing/src/components/DebugCasesSection.astro

@@ -9,25 +9,25 @@ const debugCases = [
     title: "Explore your component structure",
     description:
       "Quickly identify where issues originate by navigating your LiveView and component hierarchy.",
-    imageUrl: "live-debugger/assets/step-1.png",
+    imageUrl: "/live-debugger/assets/step-1.png",
   },
   {
     title: "Inspect state in real time",
     description:
       "Check the current state of affected components and see how it changes as you interact with your app.",
-    imageUrl: "live-debugger/assets/step-2.png",
+    imageUrl: "/live-debugger/assets/step-2.png",
   },
   {
     title: "Filter and focus on key callbacks",
     description:
       "Apply filters to isolate the most relevant callbacks for faster debugging.",
-    imageUrl: "live-debugger/assets/step-3.png",
+    imageUrl: "/live-debugger/assets/step-3.png",
   },
   {
     title: "Observe state transitions and behavior",
     description:
       "Watch how each callback impacts your component’s state and behavior.",
-    imageUrl: "live-debugger/assets/step-4.png",
+    imageUrl: "/live-debugger/assets/step-4.png",
   },
 ];
 ---

landing/src/components/GettingStartedSection.astro

@@ -30,7 +30,7 @@ const tabData = [
     class="absolute -bottom-25 -left-20 z-1 sm:-right-15 sm:-bottom-25 lg:-right-45 lg:-bottom-30"
   >
     <img
-      src="live-debugger/assets/Vector.svg"
+      src="/live-debugger/assets/Vector.svg"
       alt=""
       class="h-60 w-auto sm:h-80 md:h-100 lg:h-120"
     />

landing/src/components/HeroSection.astro

@@ -19,7 +19,7 @@ import { Button } from "@/components/ui/button";
         >
           <p>Created by</p>
           <img
-            src="live-debugger/assets/logo-swm.svg"
+            src="/live-debugger/assets/logo-swm.svg"
             alt="Software Mansion"
             class="h-10 w-auto md:h-12"
           />
@@ -50,7 +50,7 @@ import { Button } from "@/components/ui/button";
       class="animate-slide-in-up absolute -bottom-20 z-10 hidden sm:block lg:-bottom-25"
     >
       <img
-        src="live-debugger/assets/Screenshot-1.png"
+        src="/live-debugger/assets/Screenshot-1.png"
         alt="screenshot 1"
         class="h-auto sm:w-[552px] sm:max-w-[552px] md:mt-16 md:w-[936px] md:max-w-[936px] lg:mt-20 lg:w-[1100px] lg:max-w-[1100px]"
       />
@@ -60,7 +60,7 @@ import { Button } from "@/components/ui/button";
     class="animate-fade-in absolute top-90 -right-10 z-1 sm:top-0 lg:-right-40"
   >
     <img
-      src="live-debugger/assets/Vector.svg"
+      src="/live-debugger/assets/Vector.svg"
       alt=""
       class="h-60 w-auto md:h-80 lg:h-100"
     />
@@ -69,7 +69,7 @@ import { Button } from "@/components/ui/button";
     class="animate-fade-in absolute top-100 -left-5 z-1 hidden sm:block lg:-left-50"
   >
     <img
-      src="live-debugger/assets/Vector.svg"
+      src="/live-debugger/assets/Vector.svg"
       alt=""
       class="h-60 w-auto md:h-80 lg:h-100"
     />

landing/src/components/RoadmapSection.astro

@@ -68,7 +68,7 @@ const accordionData = [
       url="https://github.com/software-mansion/live-debugger/issues/new/choose"
     >
       <img
-        src={`live-debugger/assets/github-2.svg`}
+        src={`/live-debugger/assets/github-2.svg`}
         class="h-13 w-13"
         alt={"github icon"}
         width="32"

landing/src/components/VideoSection.astro

@@ -30,7 +30,7 @@ import ContentWrapper from "../components/ContentWrapper.tsx";
     class="absolute -right-15 -bottom-20 z-1 sm:-right-15 sm:-bottom-25 lg:-right-45 lg:-bottom-30"
   >
     <img
-      src="live-debugger/assets/Vector.svg"
+      src="/live-debugger/assets/Vector.svg"
       alt=""
       class="h-60 w-auto sm:h-80 md:h-100 lg:h-120"
     />

landing/src/components/ui/Footer.tsx

@@ -8,17 +8,17 @@ export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
 const logos = [
   {
     name: "Popcorn",
-    imageUrl: "live-debugger/assets/logo-popcorn.svg",
+    imageUrl: "/live-debugger/assets/logo-popcorn.svg",
     href: "https://popcorn.swmansion.com/",
   },
   {
     name: "Global Elixir Meetups",
-    imageUrl: "live-debugger/assets/logo-GEM.svg",
+    imageUrl: "/live-debugger/assets/logo-GEM.svg",
     href: "https://globalelixirmeetups.com/",
   },
   {
     name: "Membrane Live",
-    imageUrl: "live-debugger/assets/logo-membrane.svg",
+    imageUrl: "/live-debugger/assets/logo-membrane.svg",
     href: "https://membrane.stream/",
   },
 ];
@@ -76,7 +76,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
               <div className="z-10 flex flex-col items-center">
                 <div className="flex flex-col items-center gap-3">
                   <img
-                    src="live-debugger/assets/logo-swm.svg"
+                    src="/live-debugger/assets/logo-swm.svg"
                     alt="Software Mansion"
                     className="h-7 w-auto"
                   />
@@ -140,7 +140,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
                       className="flex h-6 w-6 transform items-center justify-center rounded-full transition-all duration-300 ease-in-out hover:scale-150 hover:opacity-60"
                     >
                       <img
-                        src={`live-debugger/assets/${icon}.svg`}
+                        src={`/live-debugger/assets/${icon}.svg`}
                         className="h-3 w-3"
                         alt={`${icon} icon`}
                         width="16"
@@ -158,14 +158,14 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
         </ContentWrapper>
         <div className="absolute -top-30 -left-30 z-1 sm:-top-40 sm:-left-20 md:-top-50 lg:-top-65 lg:-left-30">
           <img
-            src="live-debugger/assets/Vector.svg"
+            src="/live-debugger/assets/Vector.svg"
             alt=""
             className="h-60 w-auto sm:h-80 md:h-100 lg:h-120"
           />
         </div>
         <div className="absolute -right-10 -bottom-25 z-1 sm:-right-40 sm:-bottom-35 md:-right-20 md:-bottom-45 lg:-right-60 lg:-bottom-55">
           <img
-            src="live-debugger/assets/Vector.svg"
+            src="/live-debugger/assets/Vector.svg"
             alt=""
             className="h-60 w-auto sm:h-80 md:h-100 lg:h-120"
           />