Docs: New What's New Notification

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8966
GitOrigin-RevId: 5bdc8c0b095e18d0b74a8afb7226bed74fd5ba55

docs/docusaurus.config.js

@@ -176,6 +176,7 @@ const config = {
           {
             to: 'https://hasura.io/changelog',
             label: "What's New",
+            id: 'whats-new-link',
             position: 'left',
           },
           {

docs/src/components/HasuraReleaseNotification/HasuraReleaseNotification.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import "./styles.css";
+
+const ENDPOINT_URL = 'https://hasura.io/changelog/api/items?offset=0&product=cloud&limit=10';
+
+const fetchNewReleases = async () => {
+  const response = await fetch(ENDPOINT_URL);
+  const data = await response.json();
+  return data.data.map(entry => entry.version);
+};
+export const HasuraReleaseNotification = () => {
+
+  useEffect(() => {
+
+    /**
+     * Adds or removes the blue dot from the "What's new" link
+     * @param {boolean} newReleaseFound
+     */
+    const updateDot = (newReleaseFound) => {
+      const link = document.getElementById('whats-new-link');
+
+      if (newReleaseFound) {
+        link.classList.add('blue-dot');
+      } else {
+        link.classList.remove('blue-dot');
+      }
+    };
+
+    /**
+     * Fetches the latest releases and updates the blue dot
+     */
+    const fetchReleases = async () => {
+
+      const releases = await fetchNewReleases()
+
+      const seenReleases = JSON.parse(localStorage.getItem('seenReleases')) || [];
+
+      let newReleaseFound = false;
+
+      releases.forEach(release => {
+        if (!seenReleases.includes(release)) {
+          newReleaseFound = true;
+        }
+      });
+
+      updateDot(newReleaseFound);
+    };
+
+    // Fetch releases on page load
+    fetchReleases();
+
+    // Add event listener to "What's new" link to detect when user goes to see new releases on changelog page
+    // At the same time update the local storage to mark the new releases as seen
+    const whatsNewLink = document.getElementById('whats-new-link');
+
+    whatsNewLink.addEventListener('click', () => {
+
+      fetchNewReleases().then(newReleases => {
+
+        let seenReleases = JSON.parse(localStorage.getItem('seenReleases')) || [];
+
+        newReleases.forEach(release => {
+          if (!seenReleases.includes(release)) {
+            seenReleases.push(release);
+          }
+        });
+
+        localStorage.setItem('seenReleases', JSON.stringify(seenReleases));
+
+      })
+
+      // Clear the blue dot
+      updateDot(false);
+
+    });
+  }, []);
+
+  return null;
+};

docs/src/components/HasuraReleaseNotification/styles.css

@@ -0,0 +1,14 @@
+a.blue-dot {
+    position: relative;
+}
+
+.blue-dot::after {
+    content: "";
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #0b89d0;
+}

docs/src/theme/DocItem/Footer/index.js

@@ -7,6 +7,7 @@ import EditThisPage from '@theme/EditThisPage';
 import TagsListInline from '@theme/TagsListInline';
 import styles from './styles.module.css';
 import { Feedback } from '@site/src/components/Feedback/Feedback';
+import {HasuraReleaseNotification} from "@site/src/components/HasuraReleaseNotification/HasuraReleaseNotification";
 function TagsRow(props) {
   return (
     <div className={clsx(ThemeClassNames.docs.docFooterTagsRow, 'row margin-bottom--sm')}>
@@ -45,6 +46,7 @@ export default function DocItemFooter() {
   return (
     <>
       <Feedback metadata={metadata}/>
+      <HasuraReleaseNotification/>
       <footer className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
         {canDisplayTagsRow && <TagsRow tags={tags} />}
         {canDisplayEditMetaRow && (