webdev-2028 - connect pages

.prettierrc.mjs

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

package.json

@@ -54,6 +54,8 @@
   },
   "devDependencies": {
     "postcss": "^8.4.38",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "sass": "^1.72.0",
     "tailwindcss-animated": "^1.0.1",
     "typescript": "^5.4.5"

src/assets/connect-2025-invite.js

@@ -0,0 +1,22 @@
+export const details = `BEGIN:VCALENDAR
+PRODID:-//Google Inc//Google Calendar 70.9054//EN
+VERSION:2.0
+CALSCALE:GREGORIAN
+METHOD:PUBLISH
+X-WR-CALNAME:Linaro Connect 2025
+X-WR-TIMEZONE:Europe/London
+BEGIN:VEVENT
+DTSTART;VALUE=DATE:20250513
+DTEND;VALUE=DATE:20250517
+DTSTAMP:20241007T105954Z
+UID:[email protected]
+CREATED:20241007T105820Z
+LAST-MODIFIED:20241007T105939Z
+LOCATION:Corinthia Lisbon\, Av. Columbano Bordalo Pinheiro 105\, 1099-031 L
+ isboa\, Portugal
+SEQUENCE:0
+STATUS:CONFIRMED
+SUMMARY:Linaro Connect
+TRANSP:TRANSPARENT
+END:VEVENT
+END:VCALENDAR`;

src/components/cloudinary/CloudinaryImg.astro

@@ -15,6 +15,7 @@ interface Props extends CloudinaryProps {
   errorImage?: string;
   class?: string;
   svg?: boolean;
+  id?: string;
 }
 
 const { src: initialSrc, ...props } = Astro.props;

src/components/hero/ConnectHero.astro

@@ -0,0 +1,66 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+import CloudinaryImg from "../cloudinary/CloudinaryImg.astro";
+import * as marked from "marked";
+import CloudinaryVideo from "../cloudinary/CloudinaryVideo.astro";
+
+type Props = CollectionEntry<"pages">["data"]["connectHero"];
+
+const { background, inner_image, description, dates, child_page } =
+  Astro.props!;
+
+const markdown = description && (await marked.parse(description));
+---
+
+{
+  child_page ? (
+    <div class="relative w-full h-auto overflow-hidden border-b-[10px] border-b-[#ffce00] border-solid">
+      <CloudinaryImg
+        src={background}
+        alt="Linaro Connect background"
+        width={2800}
+        height={400}
+        class="m-0"
+      />
+      {inner_image && (
+        <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center text-center">
+          <div class="flex flex-col items-center">
+            <CloudinaryImg
+              src={inner_image}
+              alt="Linaro Connect Logo"
+              width={400}
+              height={400}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  ) : (
+    <div class="relative w-full h-[500px] overflow-hidden border-b-[10px] border-b-[#ffce00] border-solid">
+      <video
+        autoplay
+        muted
+        loop
+        class="absolute top-1/2 left-1/2 w-[100vw] h-auto -translate-x-1/2 -translate-y-1/2 min-h-full"
+      >
+        <source src={background} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+      <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center text-center bg-[rgba(0,_0,_0,_0.6)]">
+        <div class="flex flex-col items-center">
+          {inner_image && (
+            <CloudinaryImg
+              src={inner_image}
+              alt="Linaro Connect Logo"
+              width={200}
+              height={200}
+            />
+          )}
+          <h1 class="text-3xl m-0" set:html={markdown} />
+          <h1 class="text-linaro-yellow text-3xl m-0">{dates}</h1>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/rows/ContainerRow.astro

@@ -3,7 +3,8 @@ import { getCloudinarySrc } from "@/lib/cloudinary";
 import { getImage } from "astro:assets";
 import * as marked from "marked";
 
-const { styles, title, background_image, animation, no_border } = Astro.props;
+const { styles, title, background_image, animation, no_border, full_width } =
+  Astro.props;
 let titleMarkdown;
 if (title) {
   titleMarkdown = await marked.parseInline(title);
@@ -31,7 +32,9 @@ if (background_image) {
     styles?.outer,
   ]}
 >
-  <div class:list={[" container mx-auto px-4 md:px-8"]}>
+  <div
+    class:list={full_width ? [] : ["container", "mx-auto", "px-4", "md:px-8"]}
+  >
     <div class="flex items-center">
       {
         title ? (
@@ -59,7 +62,7 @@ if (background_image) {
       ]}
       data-animate={animation === "none"
         ? null
-        : animation ?? "animate-fade-down"}
+        : (animation ?? "animate-fade-down")}
     >
       <slot />
     </div>

src/components/sections/ConnectContent.astro

@@ -0,0 +1,31 @@
+---
+import type { connectContentSchema } from "@/content/schemas/sections";
+import type { z } from "astro/zod";
+import * as marked from "marked";
+
+type Props = z.infer<typeof connectContentSchema>;
+
+const { text_content, styles, title, description } = Astro.props;
+const d = description && (await marked.parse(description));
+const t = text_content && (await marked.parse(text_content));
+---
+
+<div class:list={[styles, "flex items-center flex-col"]}>
+  <h1 class:list={[styles?.title, "text-4xl text-center"]}>{title}</h1>
+  {
+    d ? (
+      <div
+        class:list={[styles?.description, "text-center text-3xl"]}
+        set:html={d}
+      />
+    ) : null
+  }
+  <div
+    class:list={[
+      styles?.content,
+      "prose-p:mt-0",
+      "prose-li:marker:text-linaro-yellow",
+    ]}
+    set:html={t}
+  />
+</div>

src/components/sections/ConnectSaveDate.astro

@@ -0,0 +1,40 @@
+---
+import type { connectSaveDateSchema } from "@/content/schemas/sections";
+import type { z } from "astro/zod";
+import { details } from "../../assets/connect-2025-invite";
+
+type Props = z.infer<typeof connectSaveDateSchema>;
+
+const { style, btnId } = Astro.props;
+---
+
+<div class:list={[style]}>
+  <button
+    id={btnId}
+    class="linaro-gradient-button self-center mt-4 no-underline"
+    >Save the Date</button
+  >
+</div>
+
+<script define:vars={{ details, btnId }}>
+  if (document.getElementById(btnId) === null) {
+    return;
+  } else {
+    document.getElementById(btnId).addEventListener("click", function () {
+      let icsContent = details;
+
+      let blob = new Blob([icsContent], { type: "text/calendar" });
+      let url = URL.createObjectURL(blob);
+      let a = document.createElement("a");
+      a.href = url;
+      a.download = "linaro-connect.ics";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    });
+
+    function formatDate(date) {
+      return date.toISOString().replace(/[-:]/g, "").split(".")[0] + "Z";
+    }
+  }
+</script>

src/components/sections/ConnectSlogan.astro

@@ -0,0 +1,19 @@
+---
+import type { connectSloganSchema } from "@/content/schemas/sections";
+import type { z } from "astro/zod";
+import * as marked from "marked";
+
+type Props = z.infer<typeof connectSloganSchema>;
+
+const { style } = Astro.props;
+---
+
+<div class:list={[style]}>
+  <p class="text-center">
+    Join us at Linaro Connect, <br />where <span class="text-linaro-yellow"
+      >innovation</span
+    > meets <span class="bg-linaro-gradient text-transparent bg-clip-text"
+      >collaboration!</span
+    >
+  </p>
+</div>

src/components/sections/DateCountdown.astro

@@ -0,0 +1,73 @@
+---
+import type { dateCountdownSchema } from "@/content/schemas/sections";
+import type { z } from "astro/zod";
+
+type Props = z.infer<typeof dateCountdownSchema>;
+
+const { countdownDate } = Astro.props;
+---
+
+<div class="flex align-middle justify-center w-full">
+  <div class="text-sm tracking-wide sm:text-2xl">
+    <span class="text-linaro-yellow" id="days">0</span>
+    <span id="days-text">day</span>
+    <span class="mx-2">|</span>
+    <span class="text-linaro-yellow" id="hours">0</span>
+    <span id="hours-text">hour</span>
+    <span class="mx-2">|</span>
+    <span class="text-linaro-yellow" id="mins">0</span>
+    <span id="mins-text">min</span>
+    <span class="mx-2">|</span>
+    <span class="text-linaro-yellow" id="secs">0</span>
+    <span id="secs-text">sec</span>
+  </div>
+</div>
+
+<script is:inline src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"
+></script>
+<script is:inline src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"
+></script>
+<script is:inline src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"
+></script>
+<script define:vars={{ countdownDate }}>
+  dayjs.extend(dayjs_plugin_utc);
+  dayjs.extend(dayjs_plugin_timezone);
+  const daysElem = document.getElementById("days"),
+    hoursElem = document.getElementById("hours"),
+    minutesElem = document.getElementById("mins"),
+    secondsElem = document.getElementById("secs"),
+    daysText = document.getElementById("days-text"),
+    hoursText = document.getElementById("hours-text"),
+    minutesText = document.getElementById("mins-text"),
+    secondsText = document.getElementById("secs-text");
+  const formatTime = (time, string) => {
+    return time === 1 ? `${string}` : `${string}s`;
+  };
+  const targetTime = dayjs.tz(countdownDate, "Europe/Lisbon");
+
+  const startCountdown = () => {
+    const now = dayjs();
+    const difference = targetTime.diff(now, "second");
+    let days = Math.floor(difference / (60 * 60 * 24));
+    let hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));
+    let minutes = Math.floor((difference % (60 * 60)) / 60);
+    let seconds = Math.floor(difference % 60);
+    daysText.innerHTML = formatTime(days, "day");
+    hoursText.innerHTML = formatTime(hours, "hour");
+    minutesText.innerHTML = formatTime(minutes, "min");
+    secondsText.innerHTML = formatTime(seconds, "sec");
+    daysElem.innerHTML = days;
+    hoursElem.innerHTML = hours;
+    minutesElem.innerHTML = minutes;
+    secondsElem.innerHTML = seconds;
+    if (difference <= 0) {
+      clearInterval(timerInterval);
+    }
+  };
+
+  let timerInterval;
+  window.addEventListener("load", () => {
+    startCountdown();
+    timerInterval = setInterval(startCountdown, 1000);
+  });
+</script>

src/components/sections/FadedLine.astro

@@ -0,0 +1,12 @@
+---
+import type { fadedLineSchema, textSchema } from "@/content/schemas/sections";
+import type { z } from "astro/zod";
+import * as marked from "marked";
+
+type Props = z.infer<typeof fadedLineSchema>;
+---
+
+<div
+  class="h-px w-[20em] mx-auto bg-gradient-to-r from-transparent to-transparent via-white"
+>
+</div>