Merge pull request #185 from rsksmart/feat/news-line

News announcement bar

docusaurus.config.js

@@ -52,7 +52,13 @@ const config = {
           description : 'Looking for information we haven’t covered? Fill out the form below to request a new article, and we’ll consider it in future updates.',
         }
       },
-    }
+    },
+    newsHighlight : [
+      {
+        title : '📣 Rootstock Hacktivator Program is Live! Contribute and Earn Rewards!',
+        url : '/resources/contribute/hacktivator-program/'
+      }
+    ]
   },
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

src/components/NewsLine/index.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect, useLayoutEffect } from 'react'
+import clsx from 'clsx'
+import styles from './styles.module.scss'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import Link from '/src/components/Link'
+
+export default function NewsLine () {
+  const { siteConfig } = useDocusaurusContext()
+  const news = siteConfig?.customFields?.newsHighlight || []
+  const [isClosed, setIsClosed] = useState(false)
+  const [isVisible, setIsVisible] = useState(true)
+  let lastScrollTop = 0
+
+  const handleClose = () => {
+    setIsClosed(true)
+    sessionStorage.setItem('DevportalNewsLineClosed', 'true')
+  }
+  const truncateTitle = (title, maxLength) => {
+    return title.length > maxLength ? `${title.substring(0, maxLength)}...` : title
+  }
+  useLayoutEffect(() => {
+    if (!window) return;
+    setIsClosed(sessionStorage.getItem('DevportalNewsLineClosed') === 'true')
+    const handleScroll = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      if (scrollTop > lastScrollTop) {
+        setIsVisible(false)
+      } else {
+        setIsVisible(true)
+      }
+      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [isClosed])
+
+  return (news?.length > 0 && !isClosed) && (
+    <div className={clsx(styles.NewsLineWrap, { [styles.hidden]: !isVisible })}>
+      <div className={clsx(`py-10`, styles.NewsLine)}>
+        <div className="container d-flex align-self-start align-items-md-center gap-8">
+          <div className="d-flex flex-column flex-wrap flex-md-row align-items-md-center justify-content-md-center gap-8 column-gap-lg-16 flex-grow-1">
+            {news.slice(0, 4).map((item, index) => (
+              <Link key={index} href={item.url} className={clsx(`d-flex fs-14 gap-16 align-items-center link-base`)}>
+                {truncateTitle(item.title, 150)}
+              </Link>
+            ))}
+          </div>
+          <button className="btn-blank d-flex" onClick={handleClose} aria-label="Close">
+            <svg width="16" height="16">
+              <use xlinkHref="#icon-close-circle"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/NewsLine/styles.module.scss

@@ -0,0 +1,38 @@
+.NewsLine {
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-body-color);
+  border-width: 1px 0;
+
+  @media (max-width: 996.98px) {
+    border-width: 0 0 1px;
+  }
+}
+
+.NewsLineWrap {
+  position: sticky;
+  top: 88px;
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+
+  @media (max-width: 996.98px) {
+    top: 73px;
+    margin-top: -24px;
+    margin-bottom: 24px;
+    padding-left: 16px;
+    padding-right: 16px;
+
+    [class*="container"] {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  @media (max-width: 767.98px) {
+    top: 54px;
+    margin-top: -16px;
+    margin-bottom: 24px;
+  }
+
+  &.hidden {
+    transform: translateY(-102%);
+  }
+}

src/theme/Navbar/Layout/index.js

@@ -2,16 +2,14 @@ import React from 'react';
 import clsx from 'clsx';
 import {ErrorCauseBoundary, useThemeConfig} from '@docusaurus/theme-common';
 import {
-  splitNavbarItems,
   useHideableNavbar,
   useNavbarMobileSidebar,
 } from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
 import styles from './styles.module.css';
-import NavbarItem from "@theme/NavbarItem";
 import MainNavDesktop from "../MainNavDesktop";
-import useBrokenLinks from "@docusaurus/core/lib/client/exports/useBrokenLinks";
+import NewsLine from '/src/components/NewsLine'
 
 function NavbarBackdrop(props) {
   return (
@@ -28,7 +26,7 @@ export default function NavbarLayout({children}) {
   } = useThemeConfig();
   const mobileSidebar = useNavbarMobileSidebar();
   const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
-  
+
   return (
     <>
       <nav
@@ -55,6 +53,7 @@ export default function NavbarLayout({children}) {
         <NavbarBackdrop onClick={mobileSidebar.toggle} />
         <NavbarMobileSidebar />
       </nav>
+      <NewsLine />
       <MainNavDesktop />
     </>
   );