diff --git a/scripts/doc-change-release.js b/scripts/doc-change-release.js index 9e209ba3e8..a8568d86f1 100644 --- a/scripts/doc-change-release.js +++ b/scripts/doc-change-release.js @@ -40,11 +40,9 @@ async function main () { //add new announcement announcement = { - id: `release-${version.replace(/\./g, '-')}`, - content: `New Release! Version ${version} of Medusa is out now! Read all about it here.`, - backgroundColor: '#7C53FF', - textColor: '#fff', - isCloseable: false, + id: response.data.html_url, + content: `${version} is out`, + isCloseable: true, } } diff --git a/www/docs/announcement.json b/www/docs/announcement.json index de0d9adfc7..b221cd1cd4 100644 --- a/www/docs/announcement.json +++ b/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 here.","backgroundColor":"#7C53FF","textColor":"#fff","isCloseable":false} \ No newline at end of file +{"id":"https://github.com/medusajs/medusa/releases/tag/v1.6.0","content":"v1.6.1 is out","isCloseable":true} \ No newline at end of file diff --git a/www/docs/src/css/_card.css b/www/docs/src/css/_card.css index ca18f5e889..994c441fec 100644 --- a/www/docs/src/css/_card.css +++ b/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%, - #9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%); + background: var(--ifm-primary-gradient); } html:not([data-theme=dark]) .card { diff --git a/www/docs/src/css/_variables.css b/www/docs/src/css/_variables.css index 9011e2a53a..6eccb04481 100644 --- a/www/docs/src/css/_variables.css +++ b/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; } \ No newline at end of file diff --git a/www/docs/src/theme/AnnouncementBar/Content/index.js b/www/docs/src/theme/AnnouncementBar/Content/index.js new file mode 100644 index 0000000000..39c682503f --- /dev/null +++ b/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 ( +
+
+ Read more +
+ ); +} diff --git a/www/docs/src/theme/AnnouncementBar/Content/styles.module.css b/www/docs/src/theme/AnnouncementBar/Content/styles.module.css new file mode 100644 index 0000000000..186bb94f26 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/www/docs/src/theme/AnnouncementBar/index.js b/www/docs/src/theme/AnnouncementBar/index.js new file mode 100644 index 0000000000..5e0cb45354 --- /dev/null +++ b/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 ( +
+
+ +
+ + {isCloseable && ( + + )} + +
+ ); +} diff --git a/www/docs/src/theme/AnnouncementBar/styles.module.css b/www/docs/src/theme/AnnouncementBar/styles.module.css new file mode 100644 index 0000000000..cff925edaa --- /dev/null +++ b/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; + } +} diff --git a/www/docs/src/theme/DocSidebar/Desktop/index.js b/www/docs/src/theme/DocSidebar/Desktop/index.js index 9d31feca76..706b063cc4 100644 --- a/www/docs/src/theme/DocSidebar/Desktop/index.js +++ b/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}) {
+ {sidebarFooter.length > 0 && (
    - - + + + + + + + +
    + }> + {children} + +
    + + {!noFooter &&