News line

docusaurus.config.js

@@ -52,7 +52,12 @@ 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.',
         }
       },
-    }
+    },
+    news: [
+      {title: 'Rootstock Hacktivator Program is Live! Contribute and Earn Rewards!', url: 'https://dev.rootstock.io/resources/contribute/hacktivator-program/'},
+      {title: 'Contribute and Earn Rewards!', url: '/changelog'},
+      {title: 'Rootstock News', url: '/changelog'},
+    ]
   },
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

src/components/NewsLine/index.js

@@ -0,0 +1,27 @@
+import React 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?.news || [];
+
+  return news?.length > 0 && <div
+    className={clsx(`py-10 px-32 border-top border-bottom d-flex align-items-center justify-content-center gap-12 bg-black`, styles.NewsLine)}
+  >
+    <div class="d-flex align-items-center justify-content-center gap-12">
+      {news.map((item, index) => (
+        <Link key={index} href={item.url} className={clsx(`d-flex fs-14 gap-16 align-items-center link-base`)}>
+          {item.title}
+        </Link>
+      ))}
+    </div>
+    <button className="btn-blank d-flex">
+      <svg width="24" height="24">
+        <use xlinkHref="#icon-close-circle"></use>
+      </svg>
+    </button>
+  </div>
+}

src/components/NewsLine/styles.module.scss

@@ -0,0 +1,5 @@
+.NewsLine{
+  position: sticky;
+  top: 88px;
+  z-index: var(--ifm-z-index-fixed);
+}

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 '../../../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 />
     </>
   );