Merge pull request #22 from scroll-tech/sepolia-launch-fixes

Assorted fixes for Sepolia launch

src/components/Footer/helper.tsx

@@ -50,8 +50,8 @@ export const resourceList = [
     href: "https://scroll.io/blog",
   },
   {
-    name: "User Guide",
-    href: "https://guide.scroll.io/",
+    name: "Documentation",
+    href: "https://docs.scroll.io/",
   },
   {
     name: "Press Kit",

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

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)

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,

src/config/sidebar.ts

@@ -38,9 +38,12 @@ export const getSidebar = () => {
               },
             ],
           },
-          { title: t("sidebar.gettingStarted.scrollSepoliaBlockExplorer"), url: "https://blockscout.scroll.io/" },
+          {
+            title: t("sidebar.gettingStarted.scrollSepoliaBlockExplorer"),
+            url: "https://sepolia-blockscout.scroll.io/",
+          },
           { title: t("sidebar.gettingStarted.sepoliaBlockExplorer"), url: "https://sepolia.etherscan.io/" },
-          { title: t("sidebar.gettingStarted.rollupExplorer"), url: "https://scroll.io/alpha/rollupscan" },
+          { title: t("sidebar.gettingStarted.rollupExplorer"), url: "https://scroll.io/rollupscan" },
         ],
       },
       {

src/content/docs/en/developers/l1-and-l2-bridging/eth-and-erc20-token-bridge.mdx

@@ -29,8 +29,8 @@ All Gateway contracts will form the message and send it to the `L1ScrollMessenge
 <Aside type="tip" title="">
   Users can also bypass the **`L1ScrollMessenger`** and send messages directly to the **`L1MessageQueue`**. If a message
   is sent via the `L1MessageQueue`, the transaction's sender will be the address of the user sending the transaction,
-  not the address of the `L1ScrollMessenger`. Learn more about sending arbitrary messages in the
-  [the-scroll-messenger.md](the-scroll-messenger.md "mention") documentation.&#x20;
+  not the address of the `L1ScrollMessenger`. Learn more about sending arbitrary messages in the [Scroll
+  Messenger](/en/developers/l1-and-l2-bridging/the-scroll-messenger) article.
 </Aside>
 
 When a new block gets created on L1, the Watcher will detect the message on the `L1MessageQueue` and will pass it to the Relayer service, which will submit the transaction to the L2 via the l2geth node. Finally, the l2geth node will pass the transaction to the `L2ScrollMessagner` contract for execution on L2.

src/content/docs/en/developers/transaction-fees-on-scroll.mdx

@@ -4,6 +4,7 @@ date: Last Modified
 title: "Transaction Fees on Scroll"
 lang: "en"
 permalink: "developers/transaction-fees-on-scroll"
+whatsnext: { "Developer Quickstart": "/developers/developer-quickstart" }
 # excerpt: ""
 ---
 

src/layouts/MainLayout.astro

@@ -105,7 +105,7 @@ changeLanguage(content.lang)
         padding-top: 100px;
       }
 
-      @media (min-width: 50em) {
+      @media screen and (min-width: 50em) {
         body {
           width: 100%;
           display: grid;
@@ -115,7 +115,8 @@ changeLanguage(content.lang)
         }
         .layout {
           overflow: initial;
-          grid-template-columns: 1fr 3fr;
+          /* grid-template-columns: 1fr 3fr; */
+          grid-template-columns: 1fr minmax(0, 68vw);
           gap: 1em;
         }
 
@@ -127,7 +128,7 @@ changeLanguage(content.lang)
         }
       }
 
-      @media (min-width: 72em) {
+      @media screen and (min-width: 72em) {
         .layout {
           grid-template-columns: 2fr minmax(0, 56vw) 3fr;
           padding-left: 0;

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("/")

src/pages/en/home/QuickStart.astro

@@ -18,7 +18,7 @@ const toolList = [
   <div class="tools">
     {
       toolList.map(({ icon, name, quickstartAnchor }) => (
-        <a href={`developers/developer-quickstart#${quickstartAnchor}`} class="tools-item">
+        <a href={`/en/developers/developer-quickstart#${quickstartAnchor}`} class="tools-item">
           <figure>
             <img src={icon} alt={name} />
           </figure>