mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-10-26 10:20:54 +03:00
Docs: New What's New Notification
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8966 GitOrigin-RevId: 5bdc8c0b095e18d0b74a8afb7226bed74fd5ba55
This commit is contained in:
parent
f9c55a2a04
commit
3126f0b568
@ -176,6 +176,7 @@ const config = {
|
||||
{
|
||||
to: 'https://hasura.io/changelog',
|
||||
label: "What's New",
|
||||
id: 'whats-new-link',
|
||||
position: 'left',
|
||||
},
|
||||
{
|
||||
|
@ -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;
|
||||
};
|
14
docs/src/components/HasuraReleaseNotification/styles.css
Normal file
14
docs/src/components/HasuraReleaseNotification/styles.css
Normal file
@ -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;
|
||||
}
|
@ -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 && (
|
||||
|
Loading…
Reference in New Issue
Block a user