docs: redesigned announcement bar (#2559)

scripts/doc-change-release.js

@@ -40,11 +40,9 @@ async function main () {
 
     //add new announcement
     announcement = {
-      id: `release-${version.replace(/\./g, '-')}`,
+      id: response.data.html_url,
-      content: `New Release! Version ${version} of Medusa is out now! Read all about it <a href='${response.data.html_url}'>here</a>.`,
+      content: `${version} is out`,
-      backgroundColor: '#7C53FF',
+      isCloseable: true,
-      textColor: '#fff',
-      isCloseable: false,
     }
   }
 

www/docs/announcement.json

@@ -1 +1 @@
-{"id":"release-v1-6-0","content":"New Release! Version v1.6.0 of Medusa is out now! Read all about it <a href='https://github.com/medusajs/medusa/releases/tag/v1.6.0'>here</a>.","backgroundColor":"#7C53FF","textColor":"#fff","isCloseable":false}
+{"id":"https://github.com/medusajs/medusa/releases/tag/v1.6.0","content":"v1.6.1 is out","isCloseable":true}

www/docs/src/css/_card.css

@@ -29,8 +29,7 @@
   position:absolute;
   bottom: -1px;
   left: 0;
-  background: linear-gradient(90deg, rgba(146, 144, 254, 0) 0%, rgba(163, 219, 254, 0.4) 26.04%,
+  background: var(--ifm-primary-gradient);
-    #9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%);
 }
 
 html:not([data-theme=dark]) .card {

www/docs/src/css/_variables.css

@@ -13,6 +13,8 @@
   --ifm-color-primary: #111827;
   --ifm-medusa-gray: #f0f0f0;
   --ifm-color-content: #6B7280;
+  --ifm-primary-gradient: linear-gradient(90deg, rgba(146, 144, 254, 0) 0%, rgba(163, 219, 254, 0.4) 26.04%,
+  #9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%);
 
   /* Fonts */
   --ifm-code-font-size: 14px;
@@ -124,6 +126,16 @@
   --docsearch-hit-icon-color: #9CA3AF;
   --docsearch-hit-border-color: #E5E7EB;
   --docsearch-hit-title-color: #000000;
+
+  /* Announcement Bar */
+  --ifm-announcement-bar-bg: #FFFFFF;
+  --ifm-announcement-bar-border-color: #E5E7EB;
+  --ifm-announcement-bar-hover-bg: #F9FAFB;
+  --ifm-announcement-bar-icon-bg: #F3F4F6;
+  --ifm-announcement-bar-icon-border-color: var(--ifm-announcement-bar-border-color);
+  --ifm-announcement-bar-title-color: var(--ifm-color-headers);
+  --ifm-announcement-bar-text-color: var(--ifm-color-content);
+  --ifm-announcement-bar-close-icon-color: #9CA3AF;
 }
 
 html[data-theme="dark"] {
@@ -217,4 +229,12 @@ html[data-theme="dark"] {
   --docsearch-hit-icon-color: #737373;
   --docsearch-hit-border-color: #393939;
   --docsearch-hit-title-color: #F3F3F3;
+
+  /* Announcement Bar */
+  --ifm-announcement-bar-bg: #222222;
+  --ifm-announcement-bar-border-color: #2D2D2D;
+  --ifm-announcement-bar-hover-bg: #2D2D2D;
+  --ifm-announcement-bar-icon-bg: #393939;
+  --ifm-announcement-bar-icon-border-color: #393939;
+  --ifm-announcement-bar-text-color: #737373;
 }

www/docs/src/theme/AnnouncementBar/Content/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function AnnouncementBarContent(props) {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar;
+  return (
+    <div
+    className={clsx(styles.contentWrapper, props.className)}>
+      <div
+        {...props}
+        className={clsx(styles.contentTitle)}
+        // Developer provided the HTML, so assume it's safe.
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{__html: content}}
+      />
+      <span className={styles.moreText}>Read more</span>
+    </div>
+  );
+}

www/docs/src/theme/AnnouncementBar/Content/styles.module.css

@@ -0,0 +1,10 @@
+.contentWrapper {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--ifm-announcement-bar-text-color);
+}
+
+.contentTitle {
+  font-weight: 600;
+  color: var( --ifm-announcement-bar-title-color);
+}

www/docs/src/theme/AnnouncementBar/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+
+export default function AnnouncementBar() {
+  const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
+  if (!isActive) {
+    return null;
+  }
+  const {backgroundColor, textColor, isCloseable, id} = announcementBar;
+  return (
+    <div
+      className={styles.announcementBar}
+      style={{backgroundColor, color: textColor}}>
+      <div
+        className={styles.announcementBarIconWrapper}>
+        <ThemedImage alt="announcement" sources={{
+          light: useBaseUrl('/img/bell.png'),
+          dark: useBaseUrl('/img/bell-dark.png')
+        }} className={styles.announcementBarIcon} />
+      </div>
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className={styles.announcementBarClose}
+        />
+      )}
+      <a href={id} className={styles.announcementBarLink} />
+    </div>
+  );
+}

www/docs/src/theme/AnnouncementBar/styles.module.css

@@ -0,0 +1,95 @@
+:root {
+  --docusaurus-announcement-bar-height: auto !important;
+}
+
+.announcementBar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--docusaurus-announcement-bar-height);
+  background-color: var(--ifm-announcement-bar-bg);
+  padding: 12px 20px 12px 12px;
+  border: 1px solid var(--ifm-announcement-bar-border-color);
+  border-radius: var(--ifm-global-radius);
+  margin: 0 16px 16px 16px;
+}
+
+.announcementBar:after {
+  content: '';
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  background: var(--ifm-primary-gradient);
+}
+
+.announcementBar:hover {
+  background-color: var(--ifm-announcement-bar-hover-bg);
+}
+
+html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
+  display: none;
+}
+
+.announcementBarContent {
+  flex: 1;
+}
+
+.announcementBarClose {
+  z-index: 101;
+  text-align: right;
+  color: var(--ifm-announcement-bar-text-color) !important;
+}
+
+.announcementBarClose svg {
+  /* color: var(--ifm-announcement-bar-close-icon-color); */
+  width: 8px !important;
+  height: 8px !important;
+}
+
+.announcementBarClose svg g {
+  stroke-width: 1.9px !important;
+}
+
+.announcementBarIconWrapper {
+  padding: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--ifm-announcement-bar-icon-bg);
+  border: 1px solid var(--ifm-announcement-bar-icon-border-color);
+  border-radius: var(--ifm-global-radius);
+  margin-right: 12px;
+}
+
+.announcementBarIcon {
+  width: 20px;
+  height: 20px;
+}
+
+.announcementBarLink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+
+@media print {
+  .announcementBar {
+    display: none;
+  }
+}
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: 30px;
+  }
+
+  .announcementBarPlaceholder,
+  .announcementBarClose {
+    flex-basis: 50px;
+  }
+}

www/docs/src/theme/DocSidebar/Desktop/index.js

@@ -8,6 +8,7 @@ import styles from './styles.module.css';
 import DocSidebarItem from '@theme/DocSidebarItem';
 import SearchBar from '../../SearchBar';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import AnnouncementBar from '@theme/AnnouncementBar';
 
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   const {
@@ -21,18 +22,12 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   const sidebarRef = useRef(null)
 
   useEffect(() => {
-    console.log("here1", isBrowser, sidebarRef.current)
     if (isBrowser && sidebarRef.current) {
-      console.log("here2")
       function handleScroll () {
-        console.log("handlescroll")
         if (!sidebarRef.current.classList.contains('scrolling')) {
-          console.log("scrolling")
           sidebarRef.current.classList.add('scrolling');
           const intervalId = setInterval(() => {
-            console.log("interval")
             if (!sidebarRef.current.matches(':hover')) {
-              console.log("remove class")
               sidebarRef.current.classList.remove('scrolling');
               clearInterval(intervalId);
             }
@@ -62,6 +57,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
       <div className={styles.sidebarSearchContainer}>
         <SearchBar />
       </div>
+      <AnnouncementBar />
       <Content path={path} sidebar={sidebar} />
       {sidebarFooter.length > 0 && (
         <ul className={

www/docs/src/theme/Layout/index.js

@@ -1,10 +1,30 @@
 import React, { useEffect } from 'react';
-
+import clsx from 'clsx';
-import Layout from '@theme-original/Layout';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
+import SkipToContent from '@theme/SkipToContent';
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+import LayoutProvider from '@theme/Layout/Provider';
+import ErrorPageContent from '@theme/ErrorPageContent';
+import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {useLocation} from '@docusaurus/router';
 
-export default function LayoutWrapper(props) {
+export default function Layout(props) {
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    // Not really layout-related, but kept for convenience/retro-compatibility
+    title,
+    description,
+  } = props;
 
   const isBrowser = useIsBrowser();
   const location = useLocation();
@@ -29,9 +49,29 @@ export default function LayoutWrapper(props) {
     }
   }, [isBrowser, location.pathname]);
 
+
+  useKeyboardNavigation();
   return (
-    <>
+    <LayoutProvider>
-      <Layout {...props} />
+      <PageMetadata title={title} description={description} />
-    </>
+
+      <SkipToContent />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}>
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+
+      {!noFooter && <Footer />}
+    </LayoutProvider>
   );
 }

www/docs/src/theme/Layout/styles.module.css

@@ -0,0 +1,19 @@
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}