From 8caca83d622e54272493f427946f49bf96bf341d Mon Sep 17 00:00:00 2001 From: Zihua Li Date: Tue, 23 Jan 2024 16:55:44 +0800 Subject: [PATCH 1/5] Implement version dropdown --- .../src/components/ClickOutsideHandler.jsx | 50 ++++++++ packages/website/src/components/Header.jsx | 64 +++++++++- .../website/src/components/Header.module.scss | 120 +++++++++++++++--- packages/website/src/svg/dropdown.svg | 1 + packages/website/src/svg/external-link.svg | 4 + 5 files changed, 217 insertions(+), 22 deletions(-) create mode 100644 packages/website/src/components/ClickOutsideHandler.jsx create mode 100644 packages/website/src/svg/dropdown.svg create mode 100644 packages/website/src/svg/external-link.svg diff --git a/packages/website/src/components/ClickOutsideHandler.jsx b/packages/website/src/components/ClickOutsideHandler.jsx new file mode 100644 index 0000000000..9c1250fe62 --- /dev/null +++ b/packages/website/src/components/ClickOutsideHandler.jsx @@ -0,0 +1,50 @@ +import { useEffect, useRef } from 'react'; + +const TOUCH_EVENT = { react: 'onTouchStart', native: 'touchstart' }; +const MOUSE_EVENT = { react: 'onMouseDown', native: 'mousedown' }; + +const setUpReactEventHandlers = (handler, props) => ({ + ...props, + [TOUCH_EVENT.react]: (e) => { + handler(); + props[TOUCH_EVENT.react]?.(e); + }, + [MOUSE_EVENT.react]: (e) => { + handler(); + props[MOUSE_EVENT.react]?.(e); + }, +}); + +const ClickOutsideHandler = ({ onClickOutside, ...props }) => { + const isTargetInsideReactTreeRef = useRef(false); + + const onClickOutsideRef = useRef(onClickOutside); + useEffect(() => { + onClickOutsideRef.current = onClickOutside; + }, [onClickOutside]); + + useEffect(() => { + const handler = (e) => { + if (!isTargetInsideReactTreeRef.current) { + onClickOutsideRef.current?.(e); + } + + isTargetInsideReactTreeRef.current = false; + }; + + document.addEventListener(TOUCH_EVENT.native, handler, { passive: true }); + document.addEventListener(MOUSE_EVENT.native, handler, { passive: true }); + return () => { + document.removeEventListener(TOUCH_EVENT.native, handler); + document.removeEventListener(MOUSE_EVENT.native, handler); + }; + }, []); + + const handleReactEvent = () => { + isTargetInsideReactTreeRef.current = true; + }; + + return
; +}; + +export default ClickOutsideHandler; diff --git a/packages/website/src/components/Header.jsx b/packages/website/src/components/Header.jsx index a0d9800807..d87552138a 100644 --- a/packages/website/src/components/Header.jsx +++ b/packages/website/src/components/Header.jsx @@ -2,12 +2,66 @@ import classNames from 'classnames'; import LogoIcon from '../svg/logo.svg'; import Link from 'next/link'; import OctocatIcon from '../svg/octocat.svg'; +import ExternalLinkIcon from '../svg/external-link.svg'; +import DropdownIcon from '../svg/dropdown.svg'; import XIcon from '../svg/x.svg'; import GitHub from './GitHub'; import * as styles from './Header.module.scss'; import { DocSearch } from '@docsearch/react'; import { useState } from 'react'; import ActiveLink from './ActiveLink'; +import ClickOutsideHandler from './ClickOutsideHandler'; + +const shortVersion = (version) => { + const parts = version.split('-'); + const matched = parts[0].match(/(\d+)\.(\d+)\.\d+/); + if (!matched) return version; + return `${matched[1]}.${matched[2]}`; +}; + +const VersionSelector = () => { + const [isOpen, setIsOpen] = useState(false); + + return ( + { + setIsOpen(false); + }} + className={styles.versionWrapper} + > +
{ + setIsOpen(!isOpen); + }} + > + v{shortVersion(process.env.version)} +
+
+ + Release Notes + +
Previous Versions
+ + v{'1.3.7'} + +
+ + ); +}; const Header = () => { const [isNavOpen, setIsNavOpen] = useState(false); @@ -46,10 +100,12 @@ const Header = () => {
- - -
v2
- +
+ + + + +
Release Notes + + Contributing +
Previous Versions
{ > - - - Date: Tue, 23 Jan 2024 17:34:07 +0800 Subject: [PATCH 3/5] Improve styles for search bar --- .../website/src/components/Header.module.scss | 36 +++++++++++++++++++ packages/website/src/pages/variables.scss | 2 ++ 2 files changed, 38 insertions(+) diff --git a/packages/website/src/components/Header.module.scss b/packages/website/src/components/Header.module.scss index f3118ba714..13e98b6373 100644 --- a/packages/website/src/components/Header.module.scss +++ b/packages/website/src/components/Header.module.scss @@ -105,6 +105,42 @@ $linkBorderRadius: 8px; font-size: 14px; margin-top: 2px; } + + :global(.DocSearch-Button-Keys) { + display: flex; + justify-content: center; + background: white; + border: 1px solid #ccc; + border-radius: 6px; + min-width: 30px; + text-align: center; + padding: 1px 5px 0; + margin-right: 8px; + height: 20px; + } + + :global(.DocSearch-Search-Icon) { + color: var(--docsearch-muted-color); + } + + :global(.DocSearch-Button-Key) { + margin: 0; + padding: 0; + width: auto; + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Open Sans', + 'Helvetica Neue', + sans-serif; + line-height: 1; + } } .versionWrapper { diff --git a/packages/website/src/pages/variables.scss b/packages/website/src/pages/variables.scss index 20cec8e7f5..50656aedd1 100644 --- a/packages/website/src/pages/variables.scss +++ b/packages/website/src/pages/variables.scss @@ -7,6 +7,8 @@ --docsearch-searchbox-background: var(--color-bg-inset); --docsearch-primary-color: var(--color-accent); + --docsearch-key-shadow: none; + --docsearch-key-gradient: transparent; --width-readable: 800px; } From 3c228e3ca5990b32b193f631f5032f25ca7027f6 Mon Sep 17 00:00:00 2001 From: Zihua Li Date: Tue, 23 Jan 2024 18:05:16 +0800 Subject: [PATCH 4/5] Mobile support for main nav --- packages/website/src/components/Header.jsx | 103 ++++++++---------- .../website/src/components/Header.module.scss | 65 ++++++++++- 2 files changed, 108 insertions(+), 60 deletions(-) diff --git a/packages/website/src/components/Header.jsx b/packages/website/src/components/Header.jsx index 53ecde5715..a14d61ebfc 100644 --- a/packages/website/src/components/Header.jsx +++ b/packages/website/src/components/Header.jsx @@ -19,6 +19,34 @@ const shortVersion = (version) => { return `${matched[1]}.${matched[2]}`; }; +const MainNav = ({ ...props }) => { + return ( + + ); +}; + const VersionSelector = () => { const [isOpen, setIsOpen] = useState(false); @@ -79,37 +107,6 @@ const Header = () => { return (
-
@@ -117,29 +114,7 @@ const Header = () => {
- + + +
+
+
-
); }; diff --git a/packages/website/src/components/Header.module.scss b/packages/website/src/components/Header.module.scss index 13e98b6373..b7450ce474 100644 --- a/packages/website/src/components/Header.module.scss +++ b/packages/website/src/components/Header.module.scss @@ -8,11 +8,12 @@ $linkBorderRadius: 8px; .header { display: flex; + flex-direction: column; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #e2e0e0; - padding: 18px 0; + padding: 14px 0; position: sticky; top: 0; z-index: 90; @@ -75,6 +76,24 @@ $linkBorderRadius: 8px; } } } + + .mobileNavToggle { + border: none; + padding: 0; + right: 0; + top: 7.5em; + + span { + background-color: #333; + display: block; + height: 3px; + margin: 0.53em; + width: 2.5em; + } + } + + @media (min-width: 800px) { + } } .searchBarContainer { @@ -244,3 +263,47 @@ $linkBorderRadius: 8px; } } } + +.header { + .mobileNav, + .mobileNavToggle { + display: none; + } + + .mobileMainNav { + margin-top: 24px; + + a { + display: block; + font-size: 16px; + padding: 8px 0; + } + } + + @media (max-width: 960px) { + :global(.DocSearch-Button) { + display: none; + } + } + + @media (max-width: 800px) { + .headerContent { + .mainNav, + .secondaryNav { + display: none; + } + + & { + justify-content: space-between; + } + } + + .mobileNavToggle { + display: block; + } + + .mobileNav.isNavOpen { + display: block; + } + } +} From 0be5798dda9d230a7aa6765ad54c4eb3e4703c0f Mon Sep 17 00:00:00 2001 From: Zihua Li Date: Tue, 23 Jan 2024 19:22:32 +0800 Subject: [PATCH 5/5] Improve mobile support for page nav --- .../website/src/components/PostLayout.jsx | 20 ++++++++++++++++--- packages/website/src/pages/styles.scss | 12 +++++------ 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/website/src/components/PostLayout.jsx b/packages/website/src/components/PostLayout.jsx index 099f0fad45..cfb50c9078 100644 --- a/packages/website/src/components/PostLayout.jsx +++ b/packages/website/src/components/PostLayout.jsx @@ -7,7 +7,7 @@ import Link from 'next/link'; import slug from '../utils/slug'; import Layout from '../components/Layout'; import OpenSource from '../components/OpenSource'; -import React from 'react'; +import React, { useState } from 'react'; import * as styles from './PostLayout.module.scss'; import flattenData from '../utils/flattenData'; @@ -48,12 +48,26 @@ const PostLayout = ({ title, pageType, filePath, permalink, children }) => { const items = pageType === 'guides' ? guideItems : docsItems; const { prev, next } = getPagination(permalink, items); + const [isNavOpen, setIsNavOpen] = useState(false); + return (
-