Webdev 2773

astro.config.mjs

@@ -65,13 +65,13 @@ export default defineConfig({
     "/lts": "/solutions/lts",
     "/automotive-iot-and-edge-devices": "/projects/automotive-iot-edge",
     "/cloud-computing-and-servers": "/projects/cloud-computing",
-    "/windows-on-arm": "/projects/windows-on-arm",
     "/services/hands-on-training": "/services/training",
     "/working-groups": "/",
     "/projects": "/",
     // '/core-technologies/[...slug]': "/",
     "/core-technologies/virtualization": "/projects/automotive-iot-edge",
     "/core-technologies/artificial-intelligence": "/solutions/ai-ml",
+    "/windows-on-arm": "/projects/windows-on-arm",
     "/support": "/contact",
     "/about/team": "/about",
     "/about/tsc": "/about",
@@ -92,7 +92,6 @@ export default defineConfig({
     "/solutions/ai-ml": "/",
     "/projects/cloud-computing": "/",
     "/solutions/codelinaro": "/",
-    "/solutions/iot-embedded": "/",
-    "/projects/windows-on-arm": "/",
+    "/confidential-computing": "/solutions/confidential-computing",
   },
 });

src/components/cloudinary/CloudinaryImg.astro

@@ -16,16 +16,43 @@ interface Props extends CloudinaryProps {
   class?: string;
   svg?: boolean;
   id?: string;
+  width?: number;
+  height?: number;
 }
 
-const { src: initialSrc, ...props } = Astro.props;
+const { src: initialSrc, class: className, width, height, alt, id } = Astro.props;
 
 let src = initialSrc;
 if (!src.startsWith("https://")) {
-  src = getCloudinarySrc({ ...props, src: initialSrc });
+  src = getCloudinarySrc({ ...Astro.props, src: initialSrc });
 }
 
 const url = src;
+const isRemote = url.startsWith("http://") || url.startsWith("https://");
+// Ensure URL is safe for HTML src (e.g. Cloudinary URLs with & in query params)
+const srcAttr = isRemote ? url.replace(/&/g, "&") : url;
 ---
 
-<Image src={url} loading="lazy" inferSize={true} {...props} />
+{isRemote ? (
+  <img
+    src={srcAttr}
+    alt={alt}
+    width={width}
+    height={height}
+    class={className}
+    id={id}
+    loading="lazy"
+    decoding="async"
+  />
+) : (
+  <Image
+    src={url}
+    alt={alt}
+    loading="lazy"
+    inferSize={true}
+    width={width}
+    height={height}
+    class={className}
+    id={id}
+  />
+)}

src/components/hero/Hero.astro

@@ -4,11 +4,13 @@ import type { GetImageResult } from "astro";
 import { getImage } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
 import * as marked from "marked";
+import HeroCarousel from "@/components/sections/HeroCarousel.astro";
 
 type Props = CollectionEntry<"pages">["data"]["hero"];
 
-const { title, background_image, button, description, styles, bottom_fade } =
+const { title, background_image, button, description, styles, bottom_fade, carousel, tagline } =
   Astro.props!;
+const hasCarousel = carousel?.slides?.length;
 let optimizedBackground: GetImageResult | undefined;
 if (background_image) {
   optimizedBackground = await getImage({
@@ -31,15 +33,16 @@ const descriptionMarkdown = description
 
 <section
   class:list={[
-    // style,
-    `relative text-white  w-full max-w-screen overflow-hidden`,
-    styles?.main_container
-      ? styles.main_container
-      : "h-[calc(100vh)] min-h-[800px] max-h-[1200px]",
+    "relative text-white w-full max-w-screen overflow-hidden",
+    hasCarousel
+      ? "pt-12 pb-16 md:pt-16 md:pb-20"
+      : null,
+    !hasCarousel && (styles?.main_container ?? "h-[calc(100vh)] min-h-[800px] max-h-[1200px]"),
+    hasCarousel && styles?.main_container,
   ]}
 >
   {
-    bottom_fade && (
+    bottom_fade && !hasCarousel && (
       <div
         class="pointer-events-none absolute inset-x-0 bottom-0 h-[130px]
            bg-gradient-to-t from-white/15 to-white/0"
@@ -48,8 +51,9 @@ const descriptionMarkdown = description
   }
   <div
     class:list={[
-      "absolute w-full h-full max-w-[160rem] mx-auto pl-0 sm:pl-[20%] z-10 container",
-      styles?.background_container,
+      "absolute inset-0 max-w-[160rem] mx-auto z-10",
+      hasCarousel ? "pl-0" : "pl-0 sm:pl-[20%]",
+      !hasCarousel && styles?.background_container,
     ]}
   >
     <div
@@ -60,41 +64,69 @@ const descriptionMarkdown = description
       ]}
     >
     </div>
+    {background_image && (
+      <div
+        class="absolute inset-0 z-[11] pointer-events-none hero-dark-overlay"
+        aria-hidden="true"
+      />
+    )}
   </div>
   <div
     class:list={[
-      "relative container mx-auto flex flex-col justify-center h-full px-8 z-20",
+      "relative container mx-auto px-8 z-20",
+      hasCarousel
+        ? "flex flex-col items-center text-center pt-6 pb-4"
+        : "flex flex-col justify-center h-full",
     ]}
   >
-    <div class:list={["flex flex-col items-start", styles?.text_container]}>
-      <h1
-        class:list={[
-          "text-inherit text-4xl md:text-5xl text-left leading-tight lg:leading-tight mb-0 prose prose-p:my-0 prose-em:linaro-gradient-text prose-em:not-italic",
-          styles?.title,
-        ]}
-        set:html={titleMarkdown}
-      />
+    <h1
+      class:list={[
+        "text-inherit text-4xl md:text-5xl lg:text-6xl leading-tight mb-0 prose prose-p:my-0 prose-em:linaro-gradient-text prose-em:not-italic",
+        hasCarousel ? "text-center max-w-4xl mx-auto mb-8 md:mb-10" : "text-left",
+        styles?.title,
+      ]}
+      set:html={titleMarkdown}
+    />
 
-      {
-        descriptionMarkdown && (
-          <div
-            class:list={["text-xl", styles?.description]}
-            set:html={descriptionMarkdown}
-          />
-        )
-      }
-      {
-        button && (
-          <a
-            href={button.url}
-            target={button.url.startsWith("https://") ? "_blank" : "self"}
-            class="mt-12 no-underline inline-block"
-          >
-            <div class="linaro-gradient-button">{button.text}</div>
-          </a>
-        )
-      }
-    </div>
+    {
+      hasCarousel ? (
+        <>
+          <div class="w-full max-w-5xl mx-auto">
+            <HeroCarousel slides={carousel.slides} />
+          </div>
+          {
+            tagline && (
+              <p
+                class="text-center max-w-4xl mx-auto text-lg md:text-xl text-white/90 mt-8 px-4"
+                set:html={tagline}
+              />
+            )
+          }
+        </>
+      ) : (
+        <div class:list={["flex flex-col items-start", styles?.text_container]}>
+          {
+            descriptionMarkdown && (
+              <div
+                class:list={["text-xl", styles?.description]}
+                set:html={descriptionMarkdown}
+              />
+            )
+          }
+          {
+            button && (
+              <a
+                href={button.url}
+                target={button.url.startsWith("https://") ? "_blank" : "self"}
+                class="mt-12 no-underline inline-block"
+              >
+                <div class="linaro-gradient-button">{button.text}</div>
+              </a>
+            )
+          }
+        </div>
+      )
+    }
     <span class="hidden" data-pagefind-meta={`summary`}>{description}</span>
     <span class="hidden" data-pagefind-meta={`heading`}>{title}</span>
     {
@@ -115,4 +147,8 @@ const descriptionMarkdown = description
   .hero-background-image {
     background-image: var(--backgroundUrl);
   }
+
+  .hero-dark-overlay {
+    background: rgba(34, 32, 37, 0.4);
+  }
 </style>

src/components/nav/Dropdown.astro

@@ -3,7 +3,7 @@ const { title, lastItem, children } = Astro.props;
 ---
 
 <menu
-  class:list={["astronav-dropdown group "]}
+  class:list={["astronav-dropdown group relative"]}
   aria-expanded="false"
   data-nav-group={title}
 >
@@ -20,13 +20,13 @@ const { title, lastItem, children } = Astro.props;
     class:list={[" astronav-dropdown dropdown-toggle hidden"]}
     aria-expanded="false"
   >
-    <div class:list={[" lg:absolute w-full z-10 mt-1 lg:left-0"]}>
-      <div class="flex flex-col lg:flex-row w-full flex-wrap">
+    <div class:list={[" lg:absolute z-10 mt-1 lg:left-0 w-max min-w-[240px] max-w-[360px]"]}>
+      <div class="flex flex-col w-full min-w-0 bg-background py-2 lg:rounded-xl lg:border lg:border-white/10 lg:shadow-lg">
         {
           children.map((item: any) => (
             <a
               href={item.url}
-              class=" lg:px-3 py-2 text-grey  hover:text-linaro-yellow cursor-pointer whitespace-nowrap text-sm"
+              class="px-4 py-2 text-grey hover:text-linaro-yellow cursor-pointer text-sm hover:bg-white/5 break-words"
               target={item.url.startsWith("https") ? "_blank" : "_self"}
             >
               {item.label}