Docs: update lading page (banner & latest release fetch) (#883)

* feat: add banner to landing page

* fix: revert latest news id change

* feat: fetch latest release version from gh api

Author: p-malecki

landing/src/components/ui/AdBanner.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState, useRef } from "react";
+
+export interface AdBannerProps {
+  zoneId: string;
+  contentId: string;
+}
+
+export const AdBanner = ({ zoneId, contentId }: AdBannerProps) => {
+  const [isAdLoaded, setIsAdLoaded] = useState(false);
+  const adContainerRef = useRef<HTMLDivElement>(null);
+  const adContentRef = useRef<HTMLDivElement>(null);
+  const adDetectedRef = useRef(false);
+
+  useEffect(() => {
+    const adContainer = adContainerRef.current;
+    if (!adContainer) return;
+
+    const insElement = adContainer.querySelector("ins");
+    if (!insElement) return;
+
+    const checkForAd = () => {
+      if (adDetectedRef.current) return true;
+
+      const isLoaded =
+        insElement.getAttribute("data-content-loaded") === "1" ||
+        insElement.querySelector(".revive-banner") !== null ||
+        insElement.querySelector("a.revive-banner") !== null ||
+        (insElement.children.length > 0 && insElement.offsetHeight > 10);
+
+      if (isLoaded) {
+        adDetectedRef.current = true;
+        setIsAdLoaded(true);
+        return true;
+      }
+      return false;
+    };
+
+    const observer = new MutationObserver(() => {
+      checkForAd();
+    });
+
+    observer.observe(insElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-content-loaded", "style", "class", "id"],
+    });
+
+    observer.observe(adContainer, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    });
+
+    const handleAdLoaded = () => {
+      if (!adDetectedRef.current) {
+        adDetectedRef.current = true;
+        setIsAdLoaded(true);
+      }
+    };
+
+    const eventName = `content-${contentId}-loaded`;
+    document.addEventListener(eventName, handleAdLoaded);
+
+    checkForAd();
+
+    const intervals = [
+      setTimeout(checkForAd, 500),
+      setTimeout(checkForAd, 1000),
+      setTimeout(checkForAd, 2000),
+      setTimeout(checkForAd, 3000),
+      setTimeout(checkForAd, 5000),
+    ];
+
+    return () => {
+      observer.disconnect();
+      intervals.forEach(clearTimeout);
+      document.removeEventListener(eventName, handleAdLoaded);
+    };
+  }, [contentId]);
+
+  useEffect(() => {
+    const container = adContainerRef.current;
+    const content = adContentRef.current;
+    if (!container || !content) return;
+
+    if (isAdLoaded) {
+      const updateHeight = () => {
+        const height = content.scrollHeight || content.offsetHeight || 100;
+        container.style.maxHeight = `${Math.max(height, 100)}px`;
+        container.style.overflow = "visible";
+      };
+      requestAnimationFrame(updateHeight);
+      setTimeout(updateHeight, 100);
+      setTimeout(updateHeight, 500);
+    } else {
+      container.style.maxHeight = "0px";
+      container.style.overflow = "hidden";
+    }
+  }, [isAdLoaded]);
+
+  return (
+    <div
+      ref={adContainerRef}
+      className="w-full transition-all duration-500 ease-in-out"
+      style={{
+        opacity: isAdLoaded ? 1 : 0,
+      }}
+    >
+      <div ref={adContentRef} className="w-full">
+        <ins data-content-zoneid={zoneId} data-content-id={contentId}></ins>
+      </div>
+      <script
+        async
+        src="//revive-adserver.swmansion.com/www/assets/js/lib.js"
+      ></script>
+    </div>
+  );
+};

landing/src/components/ui/Header.tsx

@@ -2,11 +2,14 @@ import React, { useEffect, useState, useRef, useImperativeHandle } from "react";
 import { cn } from "@/lib/utils";
 import { Logo } from "@/components/ui/Logo";
 import { Github } from "@/components/ui/Github";
+import { AdBanner } from "@/components/ui/AdBanner";
 import { getStorageValue } from "@/lib/utils";
 
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {}
 
-const LATEST_NEWS_ID = "v0.4.2";
+const DEFAULT_LATEST_NEWS_ID = "v0.5.0";
+const GITHUB_API_URL =
+  "https://api.github.com/repos/software-mansion/live-debugger/releases/latest";
 
 const navItems = [
   { name: "Features", href: "#features" },
@@ -44,15 +47,34 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(
     const [isScrolled, setIsScrolled] = useState(false);
     const [showIndicator, setShowIndicator] = useState(false);
     const [activeTheme, setActiveTheme] = useState("dark");
+    const [latestNewsId, setLatestNewsId] = useState(DEFAULT_LATEST_NEWS_ID);
 
     const localHeaderRef = useRef<HTMLElement>(null);
     useImperativeHandle(ref, () => localHeaderRef.current!);
 
     useEffect(() => {
-      const seenVersion = getStorageValue("seenNewsVersion", null);
-      setShowIndicator(seenVersion !== LATEST_NEWS_ID);
+      const fetchLatestRelease = async () => {
+        try {
+          const response = await fetch(GITHUB_API_URL);
+          if (response.ok) {
+            const data = await response.json();
+            if (data.tag_name) {
+              setLatestNewsId(data.tag_name);
+            }
+          }
+        } catch (error) {
+          console.error("Failed to fetch latest release:", error);
+        }
+      };
+
+      fetchLatestRelease();
     }, []);
 
+    useEffect(() => {
+      const seenVersion = getStorageValue("seenNewsVersion", null);
+      setShowIndicator(seenVersion !== latestNewsId);
+    }, [latestNewsId]);
+
     useEffect(() => {
       const handleScroll = () => {
         const scrollY = window.scrollY;
@@ -101,6 +123,7 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(
         )}
         {...props}
       >
+        <AdBanner zoneId="3" contentId="ea15c4216158c4097b65fe6504a4b3b7" />
         <div className="mx-auto flex h-20 w-full max-w-[1360px] items-center justify-between px-7 sm:px-8">
           <a href="#hero" className="mr-6 flex items-center gap-2">
             <Logo className="size-36 sm:size-42 md:size-45" />
@@ -124,7 +147,7 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(
                   if (item.href === "#whatsnew") {
                     setShowIndicator(false);
                     try {
-                      localStorage.setItem("seenNewsVersion", LATEST_NEWS_ID);
+                      localStorage.setItem("seenNewsVersion", latestNewsId);
                     } catch (error) {
                       console.error("Error setting localStorage", error);
                     }