docs: general fixes for docs workspace (#5184)

www/apps/api-reference/css/globals.css

@@ -50,11 +50,6 @@
   body[data-modal="opened"] {
     @apply !overflow-hidden;
   }
-
-  mark {
-    @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
-    @apply text-medusa-fg-interactive dark:text-medusa-fg-interactive-dark;
-  }
 }
 
 @layer utilities {

www/apps/api-reference/vercel.json

@@ -7,5 +7,5 @@
   "installCommand": "yarn install",
   "buildCommand": "turbo run build",
   "outputDirectory": ".next",
-  "ignoreCommand": "git diff HEAD^ HEAD --quiet -- ../../.."
+  "ignoreCommand": "bash ../../ignore-build-script.sh"
 }

www/apps/docs/src/css/custom.css

@@ -6,11 +6,6 @@
   body[data-modal="opened"] {
     @apply !overflow-hidden;
   }
-
-  mark {
-    @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
-    @apply text-medusa-fg-interactive dark:text-medusa-fg-interactive-dark;
-  }
 }
 
 @layer components {

www/apps/docs/vercel.json

@@ -486,6 +486,6 @@
   "installCommand": "yarn install",
   "buildCommand": "turbo run build",
   "outputDirectory": "build",
-  "ignoreCommand": "git diff HEAD^ HEAD --quiet -- ../../..",
+  "ignoreCommand": "bash ../../ignore-build-script.sh",
   "devCommand": "yarn dev"
 }

www/apps/ui/src/components/figma-icon.tsx

@@ -1,6 +1,13 @@
 import { BorderedIcon } from "docs-ui"
-import { basePathUrl } from "@/lib/base-path-url"
+import { Figma } from "./icons"
 
 export const FigmaIcon = () => {
-  return <BorderedIcon icon={basePathUrl("/images/figma.png")} />
+  return (
+    <BorderedIcon
+      IconComponent={Figma}
+      iconWrapperClassName={
+        "bg-medusa-button-inverted bg-button-inverted !p-[6px]"
+      }
+    />
+  )
 }

www/apps/ui/src/components/icons.tsx

@@ -0,0 +1,47 @@
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const Figma = (props: IconProps) => {
+  return (
+    <svg
+      width={props.width || "20"}
+      height={props.height || "20"}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_5033_198)">
+        <path
+          d="M10 9.99998C10 8.36002 11.3295 7.03052 12.9695 7.03052C14.6094 7.03052 15.9389 8.36002 15.9389 9.99998C15.9389 11.64 14.6094 12.9694 12.9695 12.9694C11.3295 12.9694 10 11.64 10 9.99998Z"
+          fill="#1ABCFE"
+        />
+        <path
+          d="M4.06128 15.9389C4.06128 14.299 5.39075 12.9695 7.03074 12.9695H10.0002V15.9389C10.0002 17.5789 8.67074 18.9084 7.03074 18.9084C5.39075 18.9084 4.06128 17.5789 4.06128 15.9389Z"
+          fill="#0ACF83"
+        />
+        <path
+          d="M10 1.09167V7.03057H12.9695C14.6095 7.03057 15.9389 5.70111 15.9389 4.06113C15.9389 2.42115 14.6095 1.09167 12.9695 1.09167H10Z"
+          fill="#FF7262"
+        />
+        <path
+          d="M4.06128 4.06113C4.06128 5.70112 5.39075 7.03057 7.03074 7.03057H10.0002V1.09167H7.03074C5.39075 1.09167 4.06128 2.42115 4.06128 4.06113Z"
+          fill="#F24E1E"
+        />
+        <path
+          d="M4.06128 9.99998C4.06128 11.64 5.39075 12.9694 7.03074 12.9694H10.0002V7.03052H7.03074C5.39075 7.03052 4.06128 8.36002 4.06128 9.99998Z"
+          fill="#A259FF"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5033_198">
+          <rect
+            width="12"
+            height="18"
+            fill="white"
+            transform="translate(4 1)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

www/apps/ui/src/config/site.ts

@@ -1,13 +1,11 @@
 type SiteConfig = {
   name: string
   url: string
-  ogImage: string
   description: string
 }
 
 export const siteConfig: SiteConfig = {
   name: "Medusa UI",
   url: `${process.env.NEXT_PUBLIC_DOCS_URL}/ui`,
-  ogImage: `${process.env.NEXT_PUBLIC_DOCS_URL}/ui/images/medusa-og.png`,
   description: "Primitives for building Medusa applications.",
 }

www/apps/ui/src/styles/globals.css

@@ -17,4 +17,8 @@
   pre *::selection {
     @apply !bg-medusa-code-text-highlight;
   }
+
+  body[data-modal="opened"] {
+    @apply !overflow-hidden;
+  }
 }

www/apps/ui/vercel.json

@@ -3,5 +3,5 @@
   "installCommand": "yarn install",
   "buildCommand": "turbo run build",
   "outputDirectory": ".next",
-  "ignoreCommand": "git diff HEAD^ HEAD --quiet -- ../../.."
+  "ignoreCommand": "bash ../../ignore-build-script.sh"
 }

www/ignore-build-script.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+echo "VERCEL_ENV: $VERCEL_ENV"
+echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
+
+if [[ "$VERCEL_ENV" == "production" || "$VERCEL_GIT_COMMIT_REF" = "docs/"* ]] ; then
+  # Proceed with the build
+  echo "✅ - Build can proceed"
+  exit 1;
+else
+  # Don't build
+  echo "🛑 - Build cancelled"
+  exit 0;
+fi

www/packages/docs-ui/src/components/BorderedIcon/index.tsx

@@ -5,7 +5,8 @@ import { IconProps } from "@medusajs/icons/dist/types"
 
 export type BorderedIconProps = {
   icon?: string
-  IconComponent?: React.FC<IconProps> | null
+  IconComponent?: ((props: IconProps) => React.JSX.Element) | null
+  // IconComponent?: React.FC<IconProps> | null
   wrapperClassName?: string
   iconWrapperClassName?: string
   iconClassName?: string

www/packages/docs-ui/src/components/Search/Hits/index.tsx

@@ -126,7 +126,11 @@ export const SearchHits = ({
     return (
       Object.keys(item.hierarchy)
         .reverse()
-        .find((key) => item.hierarchy[key as Hierarchy] !== null) || ""
+        .find(
+          (key) =>
+            item.hierarchy[key as Hierarchy] !== null &&
+            item.hierarchy[key as Hierarchy] !== item.content
+        ) || ""
     )
   }
 
@@ -138,7 +142,13 @@ export const SearchHits = ({
   }
 
   return (
-    <div className="overflow-auto">
+    <div
+      className={clsx(
+        "overflow-auto",
+        "[&_mark]:bg-medusa-bg-highlight dark:[&_mark]:bg-medusa-bg-highlight-dark",
+        "[&_mark]:text-medusa-fg-interactive dark:[&_mark]:text-medusa-fg-interactive-dark"
+      )}
+    >
       {Object.keys(grouped).map((groupName, index) => (
         <Fragment key={index}>
           <SearchHitGroupName name={groupName} />
@@ -172,11 +182,12 @@ export const SearchHits = ({
                     "hierarchy",
                     item.type && item.type !== "content"
                       ? item.type
-                      : item.hierarchy.lvl1
+                      : getLastAvailableHeirarchy(item) ||
-                      ? "lvl1"
+                        item.hierarchy.lvl1 ||
-                      : getLastAvailableHeirarchy(item),
+                        "",
                   ]}
                   hit={item}
+                  separator="."
                 />
               </span>
               {item.type !== "lvl1" && (

www/packages/docs-ui/src/components/Search/Modal/index.tsx

@@ -257,11 +257,13 @@ export const SearchModal = ({
                   "content",
                   "hierarchy.lvl1",
                   "hierarchy.lvl2",
+                  "hierarchy.lvl3",
                 ],
                 attributesToHighlight: [
                   "content",
                   "hierarchy.lvl1",
                   "hierarchy.lvl2",
+                  "hierarchy.lvl3",
                 ],
               }}
               indices={algolia.indices}