NOISSUE - Fix S1 Image/Video

README.md

@@ -20,26 +20,26 @@ Astro + Tailwind source for the [Abstract Machines](https://absmach.eu) website
 ## Development
 
 ```bash
-npm install
-npm run dev
+pnpm install
+pnpm run dev
 ```
 
 Astro runs on `http://localhost:4321` by default.
 
 ## Build & Preview
 
 ```bash
-npm run build
-npm run preview
+pnpm run build
+pnpm run preview
 ```
 
 ## Cloudflare Scripts
 
 Use the package scripts for Pages Functions workflows:
 
 ```bash
-npm run cf:dev
-npm run cf:deploy
+pnpm run cf:dev
+pnpm run cf:deploy
 ```
 
 - `cf:dev`: Builds the site and starts local Pages dev server from `dist/` using `wrangler.jsonc`.
@@ -112,7 +112,7 @@ Production does not use `.dev.vars`.
 
 - `.dev.vars` is local-only for `wrangler pages dev`.
 - For production, configure values in Cloudflare Pages:
-Dashboard -> Pages -> your project -> Settings -> Variables and Secrets -> Production.
+  Dashboard -> Pages -> your project -> Settings -> Variables and Secrets -> Production.
 - No separate production env file is required in the repo.
 
 For local Cloudflare Pages function testing, copy `.dev.vars.example` to `.dev.vars` and fill the values.
@@ -128,7 +128,7 @@ See [WRITING.md](WRITING.md) for frontmatter and writing guidelines.
 
 ## Sitemap / robots.txt
 
-- `@astrojs/sitemap` generates `dist/sitemap-index.xml` (and chunk files like `dist/sitemap-0.xml`) during `npm run build`.
+- `@astrojs/sitemap` generates `dist/sitemap-index.xml` (and chunk files like `dist/sitemap-0.xml`) during `pnpm run build`.
 - `src/pages/robots.txt.ts` is prerendered as `/robots.txt` and points to `/sitemap-index.xml`.
 
 ## RSS

src/components/ProductCard.astro

@@ -11,13 +11,15 @@ const {
   subtitle,
   kicker,
   logoSrc,
+  videoSrc,
   logoAlt = "Product logo",
   logoLoading = "lazy",
   logoClass = "",
   cardClass = "",
 } = Astro.props;
 
 const hasLogo = logoSrc || Astro.slots.has("logo");
+const isVideo = videoSrc || (logoSrc && (logoSrc.endsWith('.mp4') || logoSrc.endsWith('.webm') || logoSrc.endsWith('.ogg')));
 const splitClass = featured
   ? "flex flex-col gap-5 md:flex-row md:gap-0"
   : "flex flex-col gap-5 lg:flex-row lg:gap-0";
@@ -42,6 +44,15 @@ const articleClass = featured
             <div class="flex max-w-full items-center gap-1 overflow-hidden">
               <slot name="logo" />
             </div>
+          ) : isVideo ? (
+            <video
+              src={videoSrc || logoSrc!}
+              class={logoImageClass}
+              autoplay
+              muted
+              loop
+              playsinline
+            />
           ) : (
             <Image
               src={logoSrc!}

src/components/ProductPreviewCard.astro

@@ -10,9 +10,11 @@ const {
   logoAlt = "Product logo",
   logoClass = "",
   className = "",
+  videoSrc,
 } = Astro.props;
 
 const hasLogo = logoSrc || Astro.slots.has("logo");
+const isVideo = videoSrc || (logoSrc && (logoSrc.endsWith('.mp4') || logoSrc.endsWith('.webm') || logoSrc.endsWith('.ogg')));
 const cardClass = featured
   ? "rounded-2xl border border-subtle bg-panel p-3 shadow-[var(--shadow-soft)] md:p-4"
   : "rounded-2xl border border-subtle bg-panel p-3 shadow-[var(--shadow-soft)] min-h-[10rem]";
@@ -32,6 +34,15 @@ const defaultLogoClass = featured
               <div class="flex max-w-full items-center gap-1 overflow-hidden">
                 <slot name="logo" />
               </div>
+            ) : isVideo ? (
+              <video
+                src={videoSrc || logoSrc!}
+                class={`${defaultLogoClass} ${logoClass}`}
+                autoplay
+                muted
+                loop
+                playsinline
+              />
             ) : (
               <Image
                 src={logoSrc!}
@@ -67,6 +78,15 @@ const defaultLogoClass = featured
               <div class="flex max-w-full items-center gap-1 overflow-hidden">
                 <slot name="logo" />
               </div>
+            ) : isVideo ? (
+              <video
+                src={videoSrc || logoSrc!}
+                class={`${defaultLogoClass} ${logoClass}`}
+                autoplay
+                muted
+                loop
+                playsinline
+              />
             ) : (
               <Image
                 src={logoSrc!}

src/components/ProductsPreview.astro

@@ -29,16 +29,17 @@ const cards = [
   },
   {
     name: "S0 Gateway",
-    description: "Low-power RISC-V gateway for lightweight edge deployments.",
+    description: "S0 is a low-power, Zephyr RTOS gateway. Built on ESP32-C6 RISC-V, it delivers multi-protocol wireless connectivity for smart metering, industrial automation, and constrained edge deployments.",
     href: "https://hardware.absmach.eu",
-    logoSrc: "/img/s0.png",
+    logoSrc: "/img/s0.webp",
     logoAlt: "S0 Gateway board",
     logoClass: "!h-16 !w-auto !max-w-none sm:!h-[4.5rem]  md:!h-32 xl:!h-40",
   },
   {
     name: "S1 Gateway",
-    description: "Industrial RISC-V gateway for high-reliability deployments.",
+    description: "S1 is a powerful Linux-based IoT gateway built on RISC-V architecture. It offers robust connectivity, advanced processing capabilities, and scalability for industrial IoT applications.",
     href: "https://hardware.absmach.eu",
+    videoSrc: "/img/s1.mp4",
     logoSrc: "/img/beagle.png",
     logoAlt: "S1 Gateway board",
     logoClass: "!h-16 !w-auto !max-w-none sm:!h-[4.5rem] md:!h-32 xl:!h-36 ",
@@ -129,6 +130,7 @@ const hardwareCards = cards.slice(2);
               logoSrc={card.logoSrc}
               logoAlt={card.logoAlt}
               logoClass={card.logoClass}
+              videoSrc={card.videoSrc}
             />
           ))
         }

src/pages/products.astro

@@ -82,7 +82,7 @@ import FinalCTA from "../components/FinalCTA.astro";
           description="Low-power RISC-V gateway designed for lightweight, distributed edge deployments."
           ctaLabel="Learn more"
           href="https://hardware.absmach.eu"
-          logoSrc="/img/s0.png"
+          logoSrc="/img/s0.webp"
           logoAlt="S0 logo"
           logoClass="!h-full !w-full !max-w-full !object-contain mx-auto"
         />
@@ -93,6 +93,7 @@ import FinalCTA from "../components/FinalCTA.astro";
           ctaLabel="Learn more"
           href="https://hardware.absmach.eu"
           logoSrc="/img/beagle.png"
+          videoSrc="/img/s1.mp4"
           logoAlt="S1 logo"
           logoClass="!h-full !w-full !max-w-full !object-contain mx-auto"
         />