feat: enhance ui

src/css/custom.css

@@ -4,6 +4,7 @@
 
 @layer base {
  :root {
+ --content-background: #fdfdfd;
  --ifm-color-primary: #12affa;
  --ifm-color-primary-dark: #05a1ec;
  --ifm-color-primary-darker: #0598df;
@@ -16,6 +17,7 @@
 
  --ifm-heading-font-family: ui-sans-serif, system-ui, -apple-system;
 
+ --ifm-navbar-background-color: var(--content-background);
  --ifm-navbar-shadow: 0 4px 28px rgb(0 0 0 / 10%);
 
  --ifm-menu-color: #0d203a;
@@ -45,8 +47,6 @@
  --ifm-border-color: #e5e7eb;
  --ifm-toc-border-color: var(--ifm-border-color);
 
- --content-background: #fdfdfd;
-
  --blog-item-background-color: linear-gradient(180deg, #fcfcfc, #fff);
  --blog-item-shadow: 0 10px 18px #f1f5f9dd, 0 0 10px 0 #e4e4e7dd;
  --blog-item-shade: #f4f4f5;
@@ -57,16 +57,18 @@
  }
 
  html[data-theme='dark'] {
+ --content-background: #18181b;
  --ifm-color-primary: hsl(214deg 100% 60%);
  --ifm-color-primary-light: hsl(214deg 100% 75%);
  --ifm-heading-color: hsl(0deg 0% 100%);
  --ifm-menu-color: #eceef1;
  --ifm-text-color: var(--ifm-menu-color);
  --ifm-secondary-text-color: #eee;
  --ifm-border-color: #313131;
+
+ --ifm-navbar-background-color: var(--content-background);
  --ifm-toc-border-color: var(--ifm-border-color);
 
- --content-background: #18181b;
  --blog-item-background-color: linear-gradient(180deg, #171717, #18181b);
  --blog-item-shadow: 0 10px 18px #25374833, 0 0 8px #25374866;
  --blog-item-shade: #27272a;
@@ -174,7 +176,6 @@ article p > span > a {
 
 .navbar {
  box-shadow: none;
- background-color: transparent;
 }
 
 .navbar-sidebar__items {

src/hooks/useReadPercent.ts

@@ -10,7 +10,7 @@ export const useReadPercent = () => {
  postRef.current = document.getElementById('__blog-post-container')
  }, [])
 
- useMotionValueEvent(scrollYProgress, 'change', latest => {
+ useMotionValueEvent(scrollYProgress, 'change', (latest) => {
  setScrollProgress(latest)
  })
 

src/theme/BlogPostGridItems/index.tsx

@@ -38,7 +38,7 @@ export default function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.El
  onMouseEnter={() => setHoveredIndex(idx)}
  onMouseLeave={() => setHoveredIndex(null)}
  >
- <Link href={item.link}>
+ <Link href={item.link} className="hover:no-underline">
  <AnimatePresence>
  {hoveredIndex === idx && (
  <motion.span

src/theme/BlogPostItem/Container/index.tsx

@@ -2,26 +2,30 @@ import { useBlogPost } from '@docusaurus/theme-common/internal'
 import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'
 import { cn } from '@site/src/lib/utils'
 import type { Props } from '@theme/BlogPostItem/Container'
-import React from 'react'
-
-import styles from './styles.module.css'
 
 export default function BlogPostItemContainer({ children, className }: Props): JSX.Element {
  const { frontMatter, assets } = useBlogPost()
  const { withBaseUrl } = useBaseUrlUtils()
  const image = assets.image ?? frontMatter.image
  return (
  <article
- className={cn(className, styles.article)}
+ className={cn('relative px-4 pt-4 pb-3 lg:px-4', className)}
  itemProp="blogPost"
  itemScope
  itemType="http://schema.org/BlogPosting"
  >
  {image && (
  <>
  <meta itemProp="image" content={withBaseUrl(image, { absolute: true })} />
- <div className={styles.cover}>
- <div className={styles.coverMask} style={{ backgroundImage: `url("${image}")` }} />
+ <div className={'absolute inset-0 z-1 h-[224px]'}>
+ <div
+ className="size-full rounded-[var(--ifm-pagination-nav-border-radius)] bg-center bg-cover bg-no-repeat"
+ style={{
+ WebkitMaskImage: 'linear-gradient(180deg, #fff -17.19%, #00000000 92.43%)',
+ maskImage: 'linear-gradient(180deg, #fff -17.19%, #00000000 92.43%)',
+ backgroundImage: `url("${image}")`,
+ }}
+ />
  </div>
  <div style={{ height: '120px' }} />
  </>

src/theme/BlogPostPage/index.tsx

@@ -10,7 +10,7 @@ import type { Props } from '@theme/BlogPostPage'
 import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata'
 import BlogPostPaginator from '@theme/BlogPostPaginator'
 import TOC from '@theme/TOC'
-import React, { type ReactNode } from 'react'
+import { type ReactNode } from 'react'
 
 function BlogPostPageContent({
  sidebar,

src/theme/Navbar/ColorModeToggle/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
+import ColorModeToggle from '@theme/ColorModeToggle';
+import type {Props} from '@theme/Navbar/ColorModeToggle';
+import styles from './styles.module.css';
+
+export default function NavbarColorModeToggle({
+ className,
+}: Props): JSX.Element | null {
+ const navbarStyle = useThemeConfig().navbar.style;
+ const disabled = useThemeConfig().colorMode.disableSwitch;
+ const {colorMode, setColorMode} = useColorMode();
+
+ if (disabled) {
+ return null;
+ }
+
+ return (
+ <ColorModeToggle
+ className={className}
+ buttonClassName={
+ navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
+ }
+ value={colorMode}
+ onChange={setColorMode}
+ />
+ );
+}

src/theme/Navbar/ColorModeToggle/styles.module.css

@@ -0,0 +1,3 @@
+.darkNavbarColorModeToggle:hover {
+ background: var(--ifm-color-gray-800);
+}

src/theme/Navbar/Content/index.tsx

@@ -0,0 +1,90 @@
+import React, {type ReactNode} from 'react';
+import {useThemeConfig, ErrorCauseBoundary} from '@docusaurus/theme-common';
+import {
+ splitNavbarItems,
+ useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+
+import styles from './styles.module.css';
+
+function useNavbarItems() {
+ // TODO temporary casting until ThemeConfig type is improved
+ return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+function NavbarItems({items}: {items: NavbarItemConfig[]}): JSX.Element {
+ return (
+ <>
+ {items.map((item, i) => (
+ <ErrorCauseBoundary
+ key={i}
+ onError={(error) =>
+ new Error(
+ `A theme navbar item failed to render.
+Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+${JSON.stringify(item, null, 2)}`,
+ {cause: error},
+ )
+ }>
+ <NavbarItem {...item} />
+ </ErrorCauseBoundary>
+ ))}
+ </>
+ );
+}
+
+function NavbarContentLayout({
+ left,
+ right,
+}: {
+ left: ReactNode;
+ right: ReactNode;
+}) {
+ return (
+ <div className="navbar__inner">
+ <div className="navbar__items">{left}</div>
+ <div className="navbar__items navbar__items--right">{right}</div>
+ </div>
+ );
+}
+
+export default function NavbarContent(): JSX.Element {
+ const mobileSidebar = useNavbarMobileSidebar();
+
+ const items = useNavbarItems();
+ const [leftItems, rightItems] = splitNavbarItems(items);
+
+ const searchBarItem = items.find((item) => item.type === 'search');
+
+ return (
+ <NavbarContentLayout
+ left={
+ // TODO stop hardcoding items?
+ <>
+ {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+ <NavbarLogo />
+ <NavbarItems items={leftItems} />
+ </>
+ }
+ right={
+ // TODO stop hardcoding items?
+ // Ask the user to add the respective navbar items => more flexible
+ <>
+ <NavbarItems items={rightItems} />
+ <NavbarColorModeToggle className={styles.colorModeToggle} />
+ {!searchBarItem && (
+ <NavbarSearch>
+ <SearchBar />
+ </NavbarSearch>
+ )}
+ </>
+ }
+ />
+ );
+}

src/theme/Navbar/Content/styles.module.css

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+ .colorModeToggle {
+ display: none;
+ }
+}

src/theme/Navbar/Layout/index.tsx

@@ -0,0 +1,51 @@
+import { translate } from '@docusaurus/Translate'
+import { useThemeConfig } from '@docusaurus/theme-common'
+import { useHideableNavbar, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
+import type { Props } from '@theme/Navbar/Layout'
+import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar'
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import styles from './styles.module.css'
+
+function NavbarBackdrop(props: ComponentProps<'div'>) {
+ return <div role="presentation" {...props} className={clsx('navbar-sidebar__backdrop', props.className)} />
+}
+
+export default function NavbarLayout({ children }: Props): JSX.Element {
+ const {
+ navbar: { hideOnScroll, style },
+ } = useThemeConfig()
+ const mobileSidebar = useNavbarMobileSidebar()
+ const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll)
+
+ const location = useLocation()
+ const isHomePage = location.pathname === '/'
+
+ return (
+ <nav
+ ref={navbarRef}
+ aria-label={translate({
+ id: 'theme.NavBar.navAriaLabel',
+ message: 'Main',
+ description: 'The ARIA label for the main navigation',
+ })}
+ className={clsx(
+ 'navbar',
+ 'navbar--fixed-top',
+ isHomePage && 'bg-transparent',
+ hideOnScroll && [styles.navbarHideable, !isNavbarVisible && styles.navbarHidden],
+ {
+ 'navbar--dark': style === 'dark',
+ 'navbar--primary': style === 'primary',
+ 'navbar-sidebar--show': mobileSidebar.shown,
+ },
+ )}
+ >
+ {children}
+ <NavbarBackdrop onClick={mobileSidebar.toggle} />
+ <NavbarMobileSidebar />
+ </nav>
+ )
+}

src/theme/Navbar/Layout/styles.module.css

@@ -0,0 +1,7 @@
+.navbarHideable {
+ transition: transform var(--ifm-transition-fast) ease;
+}
+
+.navbarHidden {
+ transform: translate3d(0, calc(-100% - 2px), 0);
+}

src/theme/Navbar/Logo/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Logo from '@theme/Logo';
+
+export default function NavbarLogo(): JSX.Element {
+ return (
+ <Logo
+ className="navbar__brand"
+ imageClassName="navbar__logo"
+ titleClassName="navbar__title text--truncate"
+ />
+ );
+}

src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import IconClose from '@theme/Icon/Close';
+import NavbarLogo from '@theme/Navbar/Logo';
+
+function CloseButton() {
+ const mobileSidebar = useNavbarMobileSidebar();
+ return (
+ <button
+ type="button"
+ aria-label={translate({
+ id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+ message: 'Close navigation bar',
+ description: 'The ARIA label for close button of mobile sidebar',
+ })}
+ className="clean-btn navbar-sidebar__close"
+ onClick={() => mobileSidebar.toggle()}>
+ <IconClose color="var(--ifm-color-emphasis-600)" />
+ </button>
+ );
+}
+
+export default function NavbarMobileSidebarHeader(): JSX.Element {
+ return (
+ <div className="navbar-sidebar__brand">
+ <NavbarLogo />
+ <NavbarColorModeToggle className="margin-right--md" />
+ <CloseButton />
+ </div>
+ );
+}

src/theme/Navbar/MobileSidebar/Layout/index.tsx

@@ -2,7 +2,6 @@ import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
 import UserCard from '@site/src/components/UserCard'
 import { cn } from '@site/src/lib/utils'
 import type { Props } from '@theme/Navbar/MobileSidebar/Layout'
-import React from 'react'
 
 export default function NavbarMobileSidebarLayout({ header, primaryMenu, secondaryMenu }: Props): JSX.Element {
  const { shown: secondaryMenuShown } = useNavbarSecondaryMenu()