-
Notifications
You must be signed in to change notification settings - Fork 765
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* draft sidebar promo item * swizzled sidebar * created promo.tsx wich loads above the nav bar on desktop only, we can easily change the text and links when ever * fixed build errors due to location not being set * remove comments * update promos and stylinh * open links in new tabs --------- Co-authored-by: Petra Donka <[email protected]>
- Loading branch information
1 parent
1fa29e3
commit 1c628fa
Showing
10 changed files
with
435 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| export const Promo = () => { | ||
| type PromoOptions = { | ||
| text: string; | ||
| link: string; | ||
| color: "teal" | "indigo"; | ||
| }[]; | ||
|
|
||
| const promoOptions: PromoOptions = [ | ||
| { | ||
| text: `Want real-time updates from your database without manual polling?`, | ||
| link: 'https://prisma.io/data-platform/pulse?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=real-time-updates-without-polling', | ||
| color: 'teal', | ||
| }, | ||
| { | ||
| text: `Need to sync data instantly to your applications?`, | ||
| link: 'https://prisma.io/data-platform/pulse?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=sync-data-to-apps', | ||
| color: 'indigo', | ||
| }, | ||
| { | ||
| text: `Want to react to database changes in your app, as they happen?`, | ||
| link: 'https://prisma.io/data-platform/pulse?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=react-to-database-changes', | ||
| color: 'teal', | ||
| }, | ||
| { | ||
| text: `Working on real-time interactions in your distributed systems?`, | ||
| link: 'https://prisma.io/data-platform/pulse?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=real-time-interactions-distributed-systems', | ||
| color: 'indigo', | ||
| }, | ||
| { | ||
| text: `Working on critical workflows triggered by changes in your db?`, | ||
| link: 'https://prisma.io/data-platform/pulse?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=critical-workflows-triggered-by-db', | ||
| color: 'indigo', | ||
| }, | ||
| { | ||
| text: `Need your database queries to be 1000x faster?`, | ||
| link: 'https://prisma.io/data-platform/accelerate?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=queries-1000x-faster', | ||
| color: 'teal', | ||
| }, | ||
| { | ||
| text: `Working on highly scaleable serverless or edge applications?`, | ||
| link: 'https://prisma.io/data-platform/accelerate?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=scaleable-serverless-edge-apps', | ||
| color: 'indigo', | ||
| }, | ||
| { | ||
| text: `Want to to enhance response times while reducing database load?`, | ||
| link: 'https://prisma.io/data-platform/accelerate?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=enhance-response-times-reduce-load', | ||
| color: 'teal', | ||
| }, | ||
| { | ||
| text: `Interested in query caching in just a few lines of code?`, | ||
| link: 'https://prisma.io/data-platform/accelerate?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=caching-few-lines-of-code', | ||
| color: 'teal', | ||
| }, | ||
| { | ||
| text: `Does your serverless architecture handle global scaling effectively?`, | ||
| link: 'https://prisma.io/data-platform/accelerate?utm_medium=sidebar-promo&utm_source=docs&utm_campaign=serverless-architecture-global-scaling', | ||
| color: 'indigo', | ||
| }, | ||
| ]; | ||
|
|
||
| let promo = promoOptions[Math.floor(Math.random() * promoOptions.length)]; | ||
|
|
||
| return ( | ||
| <a className={`sidebar-promo sidebar-promo-${promo.color}`} href={promo.link} target="_blank"> | ||
| {promo.text} | ||
| </a> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import {translate} from '@docusaurus/Translate'; | ||
| import IconArrow from '@theme/Icon/Arrow'; | ||
| import type {Props} from '@theme/DocSidebar/Desktop/CollapseButton'; | ||
|
|
||
| import styles from './styles.module.css'; | ||
|
|
||
| export default function CollapseButton({onClick}: Props): JSX.Element { | ||
| return ( | ||
| <button | ||
| type="button" | ||
| title={translate({ | ||
| id: 'theme.docs.sidebar.collapseButtonTitle', | ||
| message: 'Collapse sidebar', | ||
| description: 'The title attribute for collapse button of doc sidebar', | ||
| })} | ||
| aria-label={translate({ | ||
| id: 'theme.docs.sidebar.collapseButtonAriaLabel', | ||
| message: 'Collapse sidebar', | ||
| description: 'The title attribute for collapse button of doc sidebar', | ||
| })} | ||
| className={clsx( | ||
| 'button button--secondary button--outline', | ||
| styles.collapseSidebarButton, | ||
| )} | ||
| onClick={onClick}> | ||
| <IconArrow className={styles.collapseSidebarButtonIcon} /> | ||
| </button> | ||
| ); | ||
| } |
40 changes: 40 additions & 0 deletions
40
src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| :root { | ||
| --docusaurus-collapse-button-bg: transparent; | ||
| --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%); | ||
| } | ||
|
|
||
| [data-theme='dark']:root { | ||
| --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%); | ||
| --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%); | ||
| } | ||
|
|
||
| @media (min-width: 997px) { | ||
| .collapseSidebarButton { | ||
| display: block !important; | ||
| background-color: var(--docusaurus-collapse-button-bg); | ||
| height: 40px; | ||
| position: sticky; | ||
| bottom: 0; | ||
| border-radius: 0; | ||
| border: 1px solid var(--ifm-toc-border-color); | ||
| } | ||
|
|
||
| .collapseSidebarButtonIcon { | ||
| transform: rotate(180deg); | ||
| margin-top: 4px; | ||
| } | ||
|
|
||
| [dir='rtl'] .collapseSidebarButtonIcon { | ||
| transform: rotate(0); | ||
| } | ||
|
|
||
| .collapseSidebarButton:hover, | ||
| .collapseSidebarButton:focus { | ||
| background-color: var(--docusaurus-collapse-button-bg-hover); | ||
| } | ||
| } | ||
|
|
||
| .collapseSidebarButton { | ||
| display: none; | ||
| margin: 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import React, {useState} from 'react'; | ||
| import clsx from 'clsx'; | ||
| import {ThemeClassNames} from '@docusaurus/theme-common'; | ||
| import { | ||
| useAnnouncementBar, | ||
| useScrollPosition, | ||
| } from '@docusaurus/theme-common/internal'; | ||
| import {translate} from '@docusaurus/Translate'; | ||
| import DocSidebarItems from '@theme/DocSidebarItems'; | ||
| import type {Props} from '@theme/DocSidebar/Desktop/Content'; | ||
|
|
||
| import styles from './styles.module.css'; | ||
|
|
||
| function useShowAnnouncementBar() { | ||
| const {isActive} = useAnnouncementBar(); | ||
| const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive); | ||
|
|
||
| useScrollPosition( | ||
| ({scrollY}) => { | ||
| if (isActive) { | ||
| setShowAnnouncementBar(scrollY === 0); | ||
| } | ||
| }, | ||
| [isActive], | ||
| ); | ||
| return isActive && showAnnouncementBar; | ||
| } | ||
|
|
||
| export default function DocSidebarDesktopContent({ | ||
| path, | ||
| sidebar, | ||
| className, | ||
| }: Props): JSX.Element { | ||
| const showAnnouncementBar = useShowAnnouncementBar(); | ||
|
|
||
| return ( | ||
| <nav | ||
| aria-label={translate({ | ||
| id: 'theme.docs.sidebar.navAriaLabel', | ||
| message: 'Docs sidebar', | ||
| description: 'The ARIA label for the sidebar navigation', | ||
| })} | ||
| className={clsx( | ||
| 'menu thin-scrollbar', | ||
| styles.menu, | ||
| showAnnouncementBar && styles.menuWithAnnouncementBar, | ||
| className, | ||
| )}> | ||
| <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}> | ||
| <DocSidebarItems items={sidebar} activePath={path} level={1} /> | ||
| </ul> | ||
| </nav> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| @media (min-width: 997px) { | ||
| .menu { | ||
| flex-grow: 1; | ||
| padding: 0.5rem; | ||
| } | ||
| @supports (scrollbar-gutter: stable) { | ||
| .menu { | ||
| padding: 0.5rem 0 0.5rem 0.5rem; | ||
| scrollbar-gutter: stable; | ||
| } | ||
| } | ||
|
|
||
| .menuWithAnnouncementBar { | ||
| margin-bottom: var(--docusaurus-announcement-bar-height); | ||
| } | ||
| } |
Oops, something went wrong.