asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs,api-ref: design + algolia fixes (#4775)

Browse Source 
* 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
This commit is contained in:
Shahed Nasser
2023-08-16 11:38:50 +03:00
committed by GitHub
parent 914d773d3a
commit 9cc0bc6c9d
19 changed files with 62 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
www/docs/src/components/Navbar/Actions/index.tsx
View File

@@ -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>

2
www/docs/src/css/components/docsearch.css
View File

@@ -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 {

8
www/docs/src/css/custom.css
View File

@@ -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;
}

2
www/docs/src/theme/Icon/DarkMode/index.tsx
View File

@@ -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"

2
www/docs/src/theme/Icon/LightMode/index.tsx
View File

@@ -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"

5
www/docs/src/theme/Navbar/ColorModeToggle/index.tsx
View File

@@ -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}
/>

11
www/docs/src/theme/Navbar/Content/index.tsx
View File

@@ -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"
)}
/>

2
www/docs/src/theme/Navbar/Logo/index.tsx
View File

@@ -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"
/>

8
www/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
View File

@@ -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>
)
}

9
www/docs/src/types/index.d.ts vendored
View File

@@ -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>
}
}