Merge branch 'sepolia-launch-fixes' of github.com:scroll-tech/scroll-…

…documentation into sepolia-launch-fixes
scroll-tech · Aug 8, 2023 · c4296ab · c4296ab
2 parents 84cf25e + 8c25147
commit c4296ab
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css
@@ -129,6 +129,11 @@
   box-sizing: content-box;
 }
 
+.hitWrapper {
+  max-height: 40vh;
+  overflow: overlay;
+}
+
 .hitWrapper ol {
   list-style: none;
 }
@@ -155,11 +160,12 @@
 
 .hitList li {
   list-style: none;
+  cursor: pointer;
   @apply pl-2;
 }
 
-.hitList li:hover {
-  @apply bg-background-secondary;
+.hitList li:hover * {
+  color: var(--orange-500);
 }
 
 .hitList li a {
@@ -217,6 +223,11 @@
     @apply mt-0;
   }
 
+  .hitWrapper {
+    max-height: calc(80vh - 100px);
+    overflow: scroll;
+  }
+
   .hitList li {
     @apply pl-0;
   }

diff --git a/src/components/Header/Search/Search.tsx b/src/components/Header/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react"
+import React, { useState, useCallback, useEffect } from "react"
 import styles from "./Search.module.css"
 
 import { useKeyPress } from "~/hooks/useKeyPress"
@@ -11,6 +11,16 @@ export default function Search() {
     setIsOpen(true)
   }, [setIsOpen])
 
+
+  useEffect(() => {
+    const body = document.getElementsByTagName("body")[0]
+    if (isOpen) {
+      body.classList.add("mobile-sidebar-toggle")
+    } else {
+      body.classList.remove("mobile-sidebar-toggle")
+    }
+  }, [isOpen])
+
   const onClose = useCallback(() => {
     setTimeout(() => {
       setIsOpen(false)

diff --git a/src/components/Header/Search/SearchModal.tsx b/src/components/Header/Search/SearchModal.tsx
@@ -84,6 +84,15 @@ function EmptyQueryBoundary({ children, fallback }) {
   return children
 }
 
+function transformPath(path) {
+  path = path.replace('src/content/docs', '');
+
+  path = path.substring(0, path.lastIndexOf('.')) || path;
+
+  return path;
+}
+
+
 function NoResultsBoundary({ children }) {
   const { results } = useInstantSearch()
 
@@ -118,7 +127,7 @@ function CustomHits({ title, hitClassName, ...props }: UseHitsProps & { title: s
             <li style={{ borderRadius: "var(--border-radius-primary)" }}>
               <a
                 // style={{ padding: "var(--space-1x) var(--space-2x)" }}
-                href={hit.url}
+                href={hit.url && transformPath(hit.url)}
                 className={clsx(styles.hit, hitClassName, "paragraph-200")}
                 dangerouslySetInnerHTML={{
                   __html: hit._highlightResult.title.value,

diff --git a/src/pages/[lang]/[...slug].astro b/src/pages/[lang]/[...slug].astro
@@ -18,6 +18,7 @@ export async function getStaticPaths() {
       allPaths.push({ params: { lang, slug: slug || undefined } })
     }
   }
+
   const paths = allPaths.map((path) => {
     let page = pages.find((page) => {
       const [pageLang, ...pageSlug] = page.slug.split("/")