From 9cc0bc6c9dff3e87f501dadc9eb77aaeea8029ca Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Wed, 16 Aug 2023 11:38:50 +0300 Subject: [PATCH] docs,api-ref: design + algolia fixes (#4775) * fix algolia results on same page * fix navigation bar for mobile * fix eslint configurations * fix github action * fix search icon on mobile * fix code block dark mode --- .github/workflows/docs-test.yml | 7 +++++++ www/.eslintrc.js | 1 - www/api-reference/.eslintrc.json | 1 + .../components/CodeBlock/index.tsx | 6 +++--- .../Tags/Operation/CodeSection/index.tsx | 2 +- .../components/Tags/Section/index.tsx | 8 ++++---- www/api-reference/providers/sidebar.tsx | 17 +++++++++-------- www/docs/.eslintrc.js | 3 ++- .../src/components/Navbar/Actions/index.tsx | 7 +++++-- www/docs/src/css/components/docsearch.css | 2 +- www/docs/src/css/custom.css | 8 ++++---- www/docs/src/theme/Icon/DarkMode/index.tsx | 2 +- www/docs/src/theme/Icon/LightMode/index.tsx | 2 +- .../src/theme/Navbar/ColorModeToggle/index.tsx | 5 +++-- www/docs/src/theme/Navbar/Content/index.tsx | 11 +++++++---- www/docs/src/theme/Navbar/Logo/index.tsx | 2 +- .../theme/Navbar/MobileSidebar/Toggle/index.tsx | 8 ++++++-- www/docs/src/types/index.d.ts | 9 +++++---- www/tailwind.config.js | 2 +- 19 files changed, 62 insertions(+), 41 deletions(-) diff --git a/.github/workflows/docs-test.yml b/.github/workflows/docs-test.yml index 884361e285..20f96a3dcf 100644 --- a/.github/workflows/docs-test.yml +++ b/.github/workflows/docs-test.yml @@ -36,6 +36,7 @@ jobs: working-directory: www/docs env: NODE_OPTIONS: "--max-old-space-size=8192" + API_URL: "https://docs.medusajs.com" run: yarn build lint: @@ -99,6 +100,9 @@ jobs: with: fetch-depth: 0 + - name: Install Monorepo dependencies + run: yarn install + - name: Install dependencies working-directory: www/docs run: yarn install @@ -120,6 +124,9 @@ jobs: with: fetch-depth: 0 + - name: Install Monorepo dependencies + run: yarn install + - name: Install dependencies working-directory: www/api-reference run: yarn install diff --git a/www/.eslintrc.js b/www/.eslintrc.js index 07e1258dbd..8fa705b58a 100644 --- a/www/.eslintrc.js +++ b/www/.eslintrc.js @@ -13,7 +13,6 @@ module.exports = { ], extends: [ "eslint:recommended", - "google", "plugin:prettier/recommended", "plugin:react/recommended", "plugin:react/jsx-runtime", diff --git a/www/api-reference/.eslintrc.json b/www/api-reference/.eslintrc.json index 1a0b2bb199..80c4b23f61 100644 --- a/www/api-reference/.eslintrc.json +++ b/www/api-reference/.eslintrc.json @@ -1,6 +1,7 @@ { "extends": [ "next/core-web-vitals", + "google", "../.eslintrc.js" ], "rules": { diff --git a/www/api-reference/components/CodeBlock/index.tsx b/www/api-reference/components/CodeBlock/index.tsx index ca5c13fc0a..4e51fce339 100644 --- a/www/api-reference/components/CodeBlock/index.tsx +++ b/www/api-reference/components/CodeBlock/index.tsx @@ -26,7 +26,7 @@ const CodeBlock = ({
1 && ( diff --git a/www/api-reference/components/Tags/Operation/CodeSection/index.tsx b/www/api-reference/components/Tags/Operation/CodeSection/index.tsx index 864ce2c961..030ba7eec3 100644 --- a/www/api-reference/components/Tags/Operation/CodeSection/index.tsx +++ b/www/api-reference/components/Tags/Operation/CodeSection/index.tsx @@ -28,7 +28,7 @@ const TagOperationCodeSection = ({
diff --git a/www/api-reference/components/Tags/Section/index.tsx b/www/api-reference/components/Tags/Section/index.tsx index 6340ad2521..01452f7a8c 100644 --- a/www/api-reference/components/Tags/Section/index.tsx +++ b/www/api-reference/components/Tags/Section/index.tsx @@ -39,7 +39,7 @@ const MDXContentClient = dynamic( ) as React.FC const TagSection = ({ tag }: TagSectionProps) => { - const { setActivePath } = useSidebar() + const { activePath, setActivePath } = useSidebar() const [loadPaths, setLoadPaths] = useState(false) const slugTagName = useMemo(() => getSectionId([tag.name]), [tag]) const { area } = useArea() @@ -64,8 +64,8 @@ const TagSection = ({ tag }: TagSectionProps) => { }) useEffect(() => { - if (location.hash && location.hash.includes(slugTagName)) { - const tagName = location.hash.replace("#", "").split("_") + if (activePath && activePath.includes(slugTagName)) { + const tagName = activePath.split("_") if (tagName.length === 1 && tagName[0] === slugTagName) { const elm = document.getElementById(tagName[0]) as Element elm?.scrollIntoView() @@ -73,7 +73,7 @@ const TagSection = ({ tag }: TagSectionProps) => { setLoadPaths(true) } } - }, [slugTagName]) + }, [slugTagName, activePath]) return (
{ } } + // this is mainly triggered by Algolia + const handleHashChange = useCallback(() => { + const currentPath = location.hash.replace("#", "") + if (currentPath !== activePath) { + setActivePath(currentPath) + } + }, [activePath]) + useEffect(() => { init() @@ -271,13 +279,6 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => { } } - const handleHashChange = () => { - const currentPath = location.hash.replace("#", "") - if (currentPath !== activePath) { - setActivePath(currentPath) - } - } - window.addEventListener("scroll", handleScroll) window.addEventListener("hashchange", handleHashChange) @@ -285,7 +286,7 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => { window.removeEventListener("scroll", handleScroll) window.removeEventListener("hashchange", handleHashChange) } - }, []) + }, [handleHashChange]) return ( = ({
{items.map((item, index) => { // eslint-disable-next-line no-case-declarations + const ItemIconElm = item.Icon const ItemIcon = item.icon ? Icon[item.icon] : null switch (item.type) { case "link": @@ -31,11 +32,12 @@ const NavbarActions: React.FC = ({ href={item.href} title={item.title} className={clsx( - ItemIcon && "navbar-action-icon-item", + (ItemIcon || ItemIconElm) && "navbar-action-icon-item", item.className )} > {item.label} + {ItemIconElm} {ItemIcon && } @@ -50,12 +52,13 @@ const NavbarActions: React.FC = ({ > diff --git a/www/docs/src/css/components/docsearch.css b/www/docs/src/css/components/docsearch.css index ac18e68cbb..fbdec112a6 100644 --- a/www/docs/src/css/components/docsearch.css +++ b/www/docs/src/css/components/docsearch.css @@ -174,7 +174,7 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path { .DocSearch-Button-Container { @apply before:content-[''] before:h-[20px] before:w-[20px] before:absolute before:left-0.5 before:top-[5px]; - @apply before:bg-magnifying-glass before:bg-no-repeat; + @apply before:bg-magnifying-glass dark:before:bg-magnifying-glass-dark before:bg-no-repeat; } .DocSearch-Button-Placeholder { diff --git a/www/docs/src/css/custom.css b/www/docs/src/css/custom.css index b8a038759c..801f2fbc39 100644 --- a/www/docs/src/css/custom.css +++ b/www/docs/src/css/custom.css @@ -146,10 +146,10 @@ } .navbar-action-icon-item { - @apply bg-docs-button-neutral dark:bg-docs-button-neutral-dark hover:!bg-no-image active:!bg-no-image hover:bg-medusa-button-neutral-hover dark:hover:bg-medusa-button-neutral-hover-dark; - @apply active:bg-medusa-button-neutral-pressed dark:active:bg-medusa-button-neutral-pressed-dark; - @apply focus:shadow-button-secondary-focus dark:focus:shadow-button-secondary-focus-dark; - @apply border border-solid border-medusa-border-loud-muted dark:border-medusa-border-loud-muted-dark rounded; + @apply lg:bg-docs-button-neutral lg:dark:bg-docs-button-neutral-dark hover:!bg-no-image lg:active:!bg-no-image hover:bg-medusa-button-neutral-hover dark:hover:bg-medusa-button-neutral-hover-dark; + @apply lg:active:bg-medusa-button-neutral-pressed lg:dark:active:bg-medusa-button-neutral-pressed-dark; + @apply lg:focus:shadow-button-secondary-focus lg:dark:focus:shadow-button-secondary-focus-dark; + @apply lg:border lg:border-solid lg:border-medusa-border-loud-muted lg:dark:border-medusa-border-loud-muted-dark rounded; @apply w-2 h-2 flex justify-center items-center cursor-pointer; } diff --git a/www/docs/src/theme/Icon/DarkMode/index.tsx b/www/docs/src/theme/Icon/DarkMode/index.tsx index 310fc0ebe9..96161ff8c6 100644 --- a/www/docs/src/theme/Icon/DarkMode/index.tsx +++ b/www/docs/src/theme/Icon/DarkMode/index.tsx @@ -18,7 +18,7 @@ const IconDarkMode: React.FC = ({ d="M18.1267 12.5017C17.136 12.9147 16.0732 13.1265 15 13.1251C10.5125 13.1251 6.875 9.48758 6.875 5.00008C6.875 3.89175 7.09667 2.83591 7.49833 1.87341C6.01789 2.49101 4.75331 3.53287 3.86386 4.86779C2.9744 6.20271 2.49986 7.77098 2.5 9.37508C2.5 13.8626 6.1375 17.5001 10.625 17.5001C12.2291 17.5002 13.7974 17.0257 15.1323 16.1362C16.4672 15.2468 17.5091 13.9822 18.1267 12.5017Z" className={ iconColorClassName || - "stroke-medusa-fg-subtle dark:stroke-medusa-fg-subtle-dark" + "stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/LightMode/index.tsx b/www/docs/src/theme/Icon/LightMode/index.tsx index 782cc6a947..3851206bcd 100644 --- a/www/docs/src/theme/Icon/LightMode/index.tsx +++ b/www/docs/src/theme/Icon/LightMode/index.tsx @@ -18,7 +18,7 @@ const IconLightMode: React.FC = ({ d="M10 2.5V4.375M15.3033 4.69667L13.9775 6.0225M17.5 10H15.625M15.3033 15.3033L13.9775 13.9775M10 15.625V17.5M6.0225 13.9775L4.69667 15.3033M4.375 10H2.5M6.0225 6.0225L4.69667 4.69667M13.125 10C13.125 10.8288 12.7958 11.6237 12.2097 12.2097C11.6237 12.7958 10.8288 13.125 10 13.125C9.1712 13.125 8.37634 12.7958 7.79029 12.2097C7.20424 11.6237 6.875 10.8288 6.875 10C6.875 9.1712 7.20424 8.37634 7.79029 7.79029C8.37634 7.20424 9.1712 6.875 10 6.875C10.8288 6.875 11.6237 7.20424 12.2097 7.79029C12.7958 8.37634 13.125 9.1712 13.125 10Z" className={ iconColorClassName || - "stroke-medusa-fg-subtle dark:stroke-medusa-fg-subtle-dark" + "stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Navbar/ColorModeToggle/index.tsx b/www/docs/src/theme/Navbar/ColorModeToggle/index.tsx index f3837ecb93..67280960b8 100644 --- a/www/docs/src/theme/Navbar/ColorModeToggle/index.tsx +++ b/www/docs/src/theme/Navbar/ColorModeToggle/index.tsx @@ -2,6 +2,7 @@ import React from "react" import { useColorMode, useThemeConfig } from "@docusaurus/theme-common" import ColorModeToggle from "@theme/ColorModeToggle" import type { Props } from "@theme/Navbar/ColorModeToggle" +import clsx from "clsx" export default function NavbarColorModeToggle({ className, @@ -16,9 +17,9 @@ export default function NavbarColorModeToggle({ return ( diff --git a/www/docs/src/theme/Navbar/Content/index.tsx b/www/docs/src/theme/Navbar/Content/index.tsx index 33bc9fb81e..b7ceabb4ec 100644 --- a/www/docs/src/theme/Navbar/Content/index.tsx +++ b/www/docs/src/theme/Navbar/Content/index.tsx @@ -14,6 +14,8 @@ import { ThemeConfig } from "@medusajs/docs" import useIsBrowser from "@docusaurus/useIsBrowser" import clsx from "clsx" import { useSidebar } from "@site/src/providers/Sidebar" +import IconSidebar from "../../Icon/Sidebar" +import IconChevronDoubleLeftMiniSolid from "../../Icon/ChevronDoubleLeftMiniSolid" function useNavbarItems() { // TODO temporary casting until ThemeConfig type is improved @@ -140,9 +142,11 @@ export default function NavbarContent(): JSX.Element { }, 100) }, }, - icon: !sidebarContext?.hiddenSidebarContainer - ? "sidebar" - : "chevron-double-left-mini-solid", + Icon: !sidebarContext?.hiddenSidebarContainer ? ( + + ) : ( + + ), }, ]} className="sidebar-toggler" @@ -151,7 +155,6 @@ export default function NavbarContent(): JSX.Element { button]:!rounded" )} /> diff --git a/www/docs/src/theme/Navbar/Logo/index.tsx b/www/docs/src/theme/Navbar/Logo/index.tsx index cf4647df99..74674b2218 100644 --- a/www/docs/src/theme/Navbar/Logo/index.tsx +++ b/www/docs/src/theme/Navbar/Logo/index.tsx @@ -11,7 +11,7 @@ export default function NavbarLogo(): JSX.Element { titleClassName="navbar__title text--truncate" /> diff --git a/www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx b/www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx index 91104f647e..04c51c93c5 100644 --- a/www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx +++ b/www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx @@ -19,8 +19,12 @@ export default function MobileSidebarToggle(): JSX.Element { className="navbar__toggle !block lg:!hidden clean-btn" type="button" > - {!shown && } - {shown && } + {!shown && ( + + )} + {shown && ( + + )} ) } diff --git a/www/docs/src/types/index.d.ts b/www/docs/src/types/index.d.ts index 627218d0e5..e8d84a2589 100644 --- a/www/docs/src/types/index.d.ts +++ b/www/docs/src/types/index.d.ts @@ -107,6 +107,7 @@ declare module "@medusajs/docs" { type: string title?: string icon?: string + Icon?: React.ReactElement className?: string label?: string html?: string @@ -120,10 +121,10 @@ declare module "@medusajs/docs" { export declare type NavbarActionButton = NavbarActionBase & { type: "button" events?: { - onClick?: (e: MouseEvent) => void - onMouseEnter?: (e: MouseEvent) => void - onMouseLeave?: (e: MouseEvent) => void - onMouseOver?: (e: MouseEvent) => void + onClick?: MouseEventHandler + onMouseEnter?: MouseEventHandler + onMouseLeave?: MouseEventHandler + onMouseOver?: MouseEventHandler } } diff --git a/www/tailwind.config.js b/www/tailwind.config.js index afeeb682e0..ed88b9c005 100644 --- a/www/tailwind.config.js +++ b/www/tailwind.config.js @@ -547,7 +547,7 @@ module.exports = { "button-danger-pressed": "linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.16) 100%)", "button-danger-pressed-dark": "linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.14) 100%)", "code-fade": "linear-gradient(90deg, #11182700, #111827 24px)", - "code-fade-dark": "linear-gradient(90deg, #1C1C1F00, #1C1C1F 24px)", + "code-fade-dark": "linear-gradient(90deg, #1B1B1B00, #1B1B1B 24px)", // TODO remove if not used "docs-button-neutral": "linear-gradient(180deg, #FFF 30.10%, #F8F9FA 100%)", "docs-button-neutral-dark": "linear-gradient(180deg, #2E2E32 0%, #28282C 32.67%)",