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
2023-08-16 11:38:50 +03:00
parent 914d773d3a
commit 9cc0bc6c9d
19 changed files with 62 additions and 41 deletions
--- 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
--- 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",
--- 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": {
--- a/www/api-reference/components/CodeBlock/index.tsx
+++ b/www/api-reference/components/CodeBlock/index.tsx
@@ -26,7 +26,7 @@ const CodeBlock = ({
    <div
      className={clsx(
        "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark relative mb-1 rounded",
-        "border-medusa-code-border w-full max-w-full border",
+        "border-medusa-code-border dark:border-medusa-code-border-dark w-full max-w-full border",
        "xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade xs:dark:after:bg-code-fade-dark",
        collapsed && "max-h-[400px] overflow-auto",
        className
@@ -37,7 +37,7 @@ const CodeBlock = ({
          ...themes.vsDark,
          plain: {
            ...themes.vsDark.plain,
-            backgroundColor: colorMode === "light" ? "#111827" : "#1C1C1F",
+            backgroundColor: colorMode === "light" ? "#111827" : "#1B1B1B",
          },
        }}
        code={source.trim()}
@@ -78,7 +78,7 @@ const CodeBlock = ({
                      {tokens.length > 1 && (
                        <span
                          className={clsx(
-                            "text-medusa-fg-subtle mr-1 table-cell select-none",
+                            "text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark mr-1 table-cell select-none",
                            "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark sticky left-0 w-[1%] px-1 text-right"
                          )}
                        >
--- 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 = ({
    <div className={clsx("mt-2 flex flex-col gap-2", className)}>
      <div
        className={clsx(
-          "bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark border-medusa-border-base dark:border-medusa-border-base-dark px-0.75 rounded border py-0.5",
+          "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark border-medusa-border-base dark:border-medusa-border-base-dark px-0.75 rounded border py-0.5",
          "text-code-body flex w-full justify-between gap-1"
        )}
      >
--- 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<MDXContentClientProps>(
 ) as React.FC<MDXContentClientProps>

 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 (
    <div
--- a/www/api-reference/providers/sidebar.tsx
+++ b/www/api-reference/providers/sidebar.tsx
@@ -259,6 +259,14 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
    }
  }

+  // 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 (
    <SidebarContext.Provider
--- a/www/docs/.eslintrc.js
+++ b/www/docs/.eslintrc.js
@@ -1,6 +1,7 @@
 module.exports = {
  extends: [
+    "plugin:@docusaurus/recommended",
+    "google",
    "../.eslintrc.js",
-    "plugin:@docusaurus/recommended"
  ]
 }
--- a/www/docs/src/components/Navbar/Actions/index.tsx
+++ b/www/docs/src/components/Navbar/Actions/index.tsx
@@ -17,6 +17,7 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({
    <div className={clsx("lg:block hidden", className)}>
      {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<NavbarActionsProps> = ({
                  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 && <ItemIcon />}
                </a>
              </Tooltip>
@@ -50,12 +52,13 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({
              >
                <button
                  className={clsx(
-                    ItemIcon && "navbar-action-icon-item",
+                    (ItemIcon || ItemIconElm) && "navbar-action-icon-item",
                    item.className
                  )}
                  {...item.events}
                >
                  {item.label}
+                  {ItemIconElm}
                  {ItemIcon && <ItemIcon />}
                </button>
              </Tooltip>
--- 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 {
--- 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;
  }

--- 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<IconProps> = ({
        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"
--- 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<IconProps> = ({
        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"
--- 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 (
    <ColorModeToggle
      className={className}
-      buttonClassName={
+      buttonClassName={clsx(
        "hover:!bg-medusa-button-neutral-hover dark:hover:!bg-medusa-button-neutral-hover-dark"
-      }
+      )}
      value={colorMode}
      onChange={setColorMode}
    />
--- 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 ? (
+                    <IconSidebar iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+                  ) : (
+                    <IconChevronDoubleLeftMiniSolid iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+                  ),
                },
              ]}
              className="sidebar-toggler"
@@ -151,7 +155,6 @@ export default function NavbarContent(): JSX.Element {
          <Tooltip text="Switch theme">
            <NavbarColorModeToggle
              className={clsx(
-                "lg:block hidden",
                "navbar-action-icon-item !w-2 !h-2 [&>button]:!rounded"
              )}
            />
--- 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"
      />
      <MobileLogo
-        className="navbar__brand lg:hidden"
+        className="navbar__brand lg:hidden mx-auto"
        imageClassName="navbar__logo"
        titleClassName="navbar__title text--truncate"
      />
--- 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 && <IconSidebar />}
-      {shown && <IconXMark />}
+      {!shown && (
+        <IconSidebar iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
+      {shown && (
+        <IconXMark iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
+      )}
    </button>
  )
 }
--- 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<HTMLButtonElement>
+      onMouseEnter?: MouseEventHandler<HTMLButtonElement>
+      onMouseLeave?: MouseEventHandler<HTMLButtonElement>
+      onMouseOver?: MouseEventHandler<HTMLButtonElement>
    }
  }

--- 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%)",