Merge pull request #24 from scroll-tech/develop

Update from develop

.github/workflows/update-algolia-index.yml

@@ -5,7 +5,28 @@ on: [push]
 jobs:
   update-prod-index:
     if: ${{ github.ref == 'refs/heads/main' }}
-    name: Update algolia index
+    name: Update algolia index -- Prod
+    runs-on: ubuntu-latest
+    env:
+      ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+      ALGOLIA_WRITE_API_KEY: ${{ secrets.ALGOLIA_WRITE_API_KEY }}
+      ALGOLIA_INDEX_NAME: prod_scroll-docs
+    defaults:
+      run:
+        working-directory: ./
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+      - name: Install Dependencies
+        run: npm i
+      - name: Build
+        run: npm run build
+      - name: Update index
+        run: npm run update-algolia-index
+
+  update-dev-index:
+    if: ${{ github.ref == 'refs/heads/develop' || github.ref == 'refs/heads/sepolia-content-population' }}
+    name: Update algolia index -- Dev
     runs-on: ubuntu-latest
     env:
       ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}

package.json

@@ -48,7 +48,8 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "tailwindcss": "^3.2.4",
-    "to-querystring": "^1.1.1"
+    "to-querystring": "^1.1.1",
+    "turndown": "^7.1.2"
   },
   "devDependencies": {
     "@astrojs/mdx": "^0.11.6",

src/components/Aside.astro

@@ -40,7 +40,7 @@ const icons = {
     background-color: var(--aside-bg);
 
     /* display: flex; */
-    @apply p-[30px] gap-4 rounded-[27px] text-info;
+    @apply p-[30px] gap-4 rounded-[27px] text-info mb-[1rem];
   }
 
   aside p.title {

src/components/Footer/PureFooter/PureFooter.module.css

@@ -1,9 +1,9 @@
 .footerLayout {
   grid-template-areas: "logo about resource follow version";
-  @apply grid w-full pb-[80px] pt-[60px] px-[20px] grid-cols-2 gap-[1em] bg-[var(--black-100)] md:grid-cols-[2fr_2fr_2fr_2fr_4fr]  md:pb-[100px];
+  @apply grid w-full pb-[80px] pt-[60px] px-[20px] grid-cols-2 gap-[1em] bg-[var(--black-100)] lg:grid-cols-[2fr_2fr_2fr_2fr_4fr]  lg:pb-[100px];
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 50em) {
   .footerLayout {
     grid-template-areas:
       "logo follow"

src/components/Footer/Subscribe/EmailInput.module.css

@@ -81,6 +81,7 @@
 .inputBase::placeholder {
   color: #dcdcdc;
 }
+
 @media (min-width: 50em) {
   .container {
     height: 54px;

src/components/Footer/Subscribe/Subscribe.module.css

@@ -1,9 +1,9 @@
 .container {
-  @apply py-[60px] px-[20px] bg-[#EAF5FD] md:py-[32px];
+  @apply py-[60px] px-[20px] bg-[#EAF5FD] lg:py-[32px];
 }
 
 .subscribeBox {
-  @apply flex  flex-col gap-[18px] items-start md:gap-[22px] md:items-center md:flex-row md:justify-between;
+  @apply flex  flex-col gap-[18px] items-start lg:gap-[22px] lg:items-center lg:flex-row lg:justify-between;
 }
 
 .subscribeIcon {
@@ -33,7 +33,7 @@
   /* margin-top: 32px; */
   flex: 1;
   width: auto;
-  text-align: right;
+  text-align: left;
   width: 100%;
 }
 
@@ -69,6 +69,7 @@
   }
 
   .emailBox {
+    text-align: right;
   }
 
   .errorMessage {

src/components/Header/Header.astro

@@ -35,7 +35,7 @@ const section = frontmatter?.section ?? ""
   <nav class="nav-wrapper" title="Top Navigation">
     <div class="logo flex items-center">
       <a href={localizePath("/")}>
-        <img src={dark ? "/scroll-white.svg" : "/scroll.svg"} alt={CONFIG.SITE.title ?? "Documentation"} />
+        <img src={dark ? "/scroll-docs-white.svg" : "/scroll.svg"} alt={CONFIG.SITE.title ?? "Documentation"} />
       </a>
     </div>
     <div class="right-box">

src/components/Header/Search/Search.module.css

@@ -234,7 +234,7 @@
   }
 }
 
-@media (max-width: 1200px) and (min-width: 50em) {
+@media (max-width: 72em) and (min-width: 50em) {
   :global(.right-box .tools) {
     display: none;
   }

src/components/Header/Search/SearchModal.tsx

@@ -12,20 +12,20 @@ const searchClient = algoliasearch(CONFIG.ALGOLIA.appId, CONFIG.ALGOLIA.publicAp
 
 const recommendedArticles = [
   {
-    title: "Suggested Article A",
-    url: "/",
+    title: "User Guide",
+    url: "/en/user-guide",
   },
   {
-    title: "Suggested Article B",
-    url: "/",
+    title: "Developer Quickstart",
+    url: "/en/developers/developer-quickstart",
   },
   {
-    title: "Suggested Article C",
-    url: "/",
+    title: "Sepolia Testnet Contracts",
+    url: "/en/developers/alpha-testnet-contracts",
   },
   {
-    title: "Suggested Article D",
-    url: "/",
+    title: "Architecture Overview",
+    url: "/en/technology/architecture/scroll-architecture",
   },
 ]
 
@@ -141,7 +141,7 @@ export function SearchModal({ size = "mini", isOpen, onClose }: { size: Size; is
   const getIndexName = () => {
     if (typeof window === "undefined") return
     const host = window.location.hostname
-    if (host === "docs.scroll.io") return CONFIG.ALGOLIA.productionIndexName
+    if (host === "docs.scroll.io" || host === "docs.scroll.xyz") return CONFIG.ALGOLIA.productionIndexName
     return CONFIG.ALGOLIA.testIndexName
   }
 

src/components/HomeSearch/index.module.css

@@ -19,7 +19,7 @@
   width: 22px;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 50em) {
   .container {
     width: 100%;
   }

src/components/MarkmapView/MarkmapaView.tsx

@@ -1,10 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Transformer } from 'markmap-lib';
 import { Markmap } from 'markmap-view';
+import TurndownService from 'turndown';
 
-const transformer = new Transformer();
 
-export default function MarkmapHooks({value}) {
+
+export default function MarkmapHooks({value, children}) {
+  const turndownService = new TurndownService()
+  const transformer = new Transformer();
+
   // Ref for SVG element
   const refSvg = useRef<SVGSVGElement>();
   // Ref for markmap object
@@ -21,7 +25,8 @@ export default function MarkmapHooks({value}) {
     // Update data for markmap once value is changed
     const mm = refMm.current;
     if (!mm) return;
-    const { root } = transformer.transform(value);
+    const  markdown = turndownService.turndown(children?.props?.value) || value
+    const { root } = transformer.transform(markdown);
     mm.setData(root);
     mm.fit();
   }, [refMm.current, value]);

src/components/MarkmapView/index.astro

@@ -6,14 +6,24 @@ import path from "node:path"
 import MarkmapaView from "./MarkmapaView.tsx"
 
 export type Props = {
-  src: string
+  src?: string
+  content?: string
 }
-const { src } = Astro.props as Props
+const { src, content } = Astro.props as Props
+// remove leading slashes
+const cleanSrc = src ? src.replace(/^\/+/, "") : ""
 
-const data = (await fs.readFile(path.join(process.cwd(), "public", src), "utf-8")).toString()
+let data: string = ""
 
-// remove leading slashes
-const cleanSrc = src.replace(/^\/+/, "")
+async function readFromFile(src: string) {
+  return (await fs.readFile(path.join(process.cwd(), "public", src), "utf-8")).toString()
+}
+
+if (src) {
+  data = await readFromFile(src)
+}
 ---
 
-<MarkmapaView client:idle value={data} />
+<MarkmapaView client:idle value={data}>
+  <slot />
+</MarkmapaView>