Merge branch 'ui-refactor' into sepolia-content-population

scroll-tech · Aug 6, 2023 · d7bc77f · d7bc77f
2 parents 431ad58 + 1b6b7e8
commit d7bc77f
Show file tree

Hide file tree

Showing 18 changed files with 148 additions and 47 deletions.
diff --git a/public/fonts/FTPolarMono-Medium.woff2 b/public/fonts/FTPolarMono-Medium.woff2
diff --git a/public/fonts/FTPolarMono-Regular.woff2 b/public/fonts/FTPolarMono-Regular.woff2
diff --git a/public/fonts/TransSansPremium-Bold.woff2 b/public/fonts/TransSansPremium-Bold.woff2
diff --git a/public/scroll-docs-white.svg b/public/scroll-docs-white.svg
diff --git a/public/scroll-white.svg b/public/scroll-white.svg
diff --git a/src/components/Aside.astro b/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 {

diff --git a/src/components/Header/Header.astro b/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">

diff --git a/src/components/Header/Search/SearchModal.tsx b/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",
   },
 ]
 

diff --git a/src/components/MarkmapView/MarkmapaView.tsx b/src/components/MarkmapView/MarkmapaView.tsx
@@ -4,7 +4,7 @@ import { Markmap } from 'markmap-view';
 
 const transformer = new Transformer();
 
-export default function MarkmapHooks({value}) {
+export default function MarkmapHooks({value, children}) {
   // Ref for SVG element
   const refSvg = useRef<SVGSVGElement>();
   // Ref for markmap object
@@ -21,7 +21,7 @@ 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 { root } = transformer.transform(children?.props?.value || value);
     mm.setData(root);
     mm.fit();
   }, [refMm.current, value]);

diff --git a/src/components/MarkmapView/index.astro b/src/components/MarkmapView/index.astro
@@ -16,4 +16,14 @@ const data = (await fs.readFile(path.join(process.cwd(), "public", src), "utf-8"
 const cleanSrc = src.replace(/^\/+/, "")
 ---
 
-<MarkmapaView client:idle value={data} />
+<MarkmapaView client:idle value={data}>
+  {
+    `
+  # markmap 
+  - beautiful1 
+  - useful 
+  - easy 
+  - interactive
+  `
+  }
+</MarkmapaView>
diff --git a/src/config/site.ts b/src/config/site.ts
@@ -18,7 +18,8 @@ export const OPEN_GRAPH = {
 }
 
 // Uncomment this to add an "Edit this page" button to every page of documentation.
-export const GITHUB_EDIT_URL = `https://github.com/scroll-tech/scroll-documentation/tree/main/`
+// export const GITHUB_EDIT_URL = `https://github.com/scroll-tech/scroll-documentation/tree/main/`
+export const GITHUB_EDIT_URL = `https://github.com/scroll-tech/scroll-documentation/tree/ui-refactor/`
 
 // Uncomment this to add an "Join our Community" button to every page of documentation.
 export const COMMUNITY_INVITE_URL = `https://discord.gg/scroll`
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -16,7 +16,7 @@ const { content = {}, frontmatter } = Astro.props
 const headings = Astro.props?.headings || Astro.props?.content?.astro.headings
 
 const currentPage = new URL(Astro.request.url).pathname
-const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.${frontmatter?.file.split(".").pop() || "md"}`
+const currentFile = `src/content/docs${currentPage.replace(/\/$/, "")}.${frontmatter?.file.split(".").pop() || "md"}`
 const githubEditUrl = CONFIG.GITHUB_EDIT_URL + currentFile
 const formattedContentTitle = content.title
   ? `${content.title} | ${CONFIG.SITE.title}`
@@ -46,6 +46,10 @@ changeLanguage(content.lang)
       href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Roboto+Flex:opsz,[email protected],400;8..144,500;8..144,600&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Roboto+Flex:opsz,[email protected],400;8..144,500;8..144,600&display=swap"
+      rel="stylesheet"
+    />
     <style>
       body {
         width: 100%;
@@ -64,6 +68,10 @@ changeLanguage(content.lang)
         margin-right: 20px;
       }
 
+      .layout :global(*) {
+        font-family: var(--font-family-body-text);
+      }
+
       .layout :global(> *) {
         width: 100%;
         height: 100%;

diff --git a/src/pages/en/home/index.astro b/src/pages/en/home/index.astro
@@ -11,13 +11,17 @@ changeLanguage("en")
 
 <HomeLayout dark>
   <div class="header">
-    <p class="header-title">Welcome to<br /> Scroll Documentation</p>
-    <Search client:visible />
+    <div class="inner">
+      <p class="header-title">Welcome to<br /> Scroll Documentation</p>
+      <Search client:visible />
+    </div>
   </div>
   <div class="content">
-    <QuickStart />
-    <Navigate />
-    <ConnectUs />
+    <div class="inner">
+      <QuickStart />
+      <Navigate />
+      <ConnectUs />
+    </div>
   </div>
 </HomeLayout>
 
@@ -27,6 +31,10 @@ changeLanguage("en")
     background-color: var(--color-text-primary);
     padding: 70px 60px 110px;
   }
+  .inner {
+    max-width: 1400px;
+    margin: 0 auto;
+  }
   .header-title {
     color: var(--white);
     font-size: 55px;

diff --git a/src/styles/design-system/components/typography.css b/src/styles/design-system/components/typography.css
@@ -2,7 +2,7 @@
 
 /* Heading styles */
 :where(h1, h2, h3, h4, h5, h6) {
-  @apply font-text leading-[1.3] font-medium tracking-[0.18px];
+  @apply leading-[1.3] font-medium tracking-[0.18px];
 }
 
 :where(h6) {

diff --git a/src/styles/design-system/fonts.css b/src/styles/design-system/fonts.css
@@ -19,37 +19,45 @@
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "fira code";
-  src: url("https://fonts.googleapis.com/css2?family=Fira+Code");
+  font-family: "trans-sans";
+  src: url("/fonts/TransSansPremium-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "Fira Code";
-  font-style: normal;
+  font-family: "trans-sans";
+  src: url("/fonts/TransSansPremium-Medium.woff2") format("woff2");
   font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVD7NuzlojwUKQ.woff2)
-    format("woff2");
+  font-style: normal;
+  font-display: swap;
 }
-
 @font-face {
   font-family: "trans-sans";
-  src: url("/fonts/TransSansPremium-Regular.woff2") format("woff2");
-  font-weight: 400;
+  src: url("/fonts/TransSansPremium-SemiBold.woff2") format("woff2");
+  font-weight: 600;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: "trans-sans";
-  src: url("/fonts/TransSansPremium-Medium.woff2") format("woff2");
+  src: url("/fonts/TransSansPremium-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "FTPolarMono";
+  src: url("/fonts/FTPolarMono-Regular.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "trans-sans";
+  font-family: "FTPolarMono";
   src: url("/fonts/TransSansPremium-SemiBold.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;

diff --git a/src/styles/design-system/values/font.css b/src/styles/design-system/values/font.css
@@ -1,6 +1,6 @@
 :root {
   --font-family-text: "trans-sans", "circular", Arial, "Helvetica Neue", Helvetica, sans-serif;
-  --font-family-code: "fira code", "Courier New", monospace, sans-serif;
+  --font-family-code: "FTPolarMono", "Fira Code", "Courier New", monospace, sans-serif;
   --font-family-body-text: "Roboto Flex", "trans-sans", "circular", Arial, "Helvetica Neue", Helvetica, sans-serif;
 
   /* Font weights */

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -110,8 +110,8 @@ article > section iframe {
   position: relative;
 }
 
-.main-section :not(h1, h2, h3) {
-  font-family: var(--font-family-body-text);
+.main-section :is(h1, h2, h3) {
+  font-family: var(--font-family-text);
 }
 
 .main-section .remix-callout {
@@ -284,8 +284,8 @@ img {
 }
 
 h2.heading {
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 18px;
+  font-weight: 700 !important;
   padding: 0.1rem 0rem;
   /* margin-top: 30px; */
   margin-bottom: 20px;
@@ -389,6 +389,7 @@ h2.heading {
     margin-left: 1rem;
   }
   h2.heading {
+    font-size: 16px;
     padding: 0.1rem 1rem;
   }
 }
diff --git a/src/styles/prism-darcula.css b/src/styles/prism-darcula.css
@@ -11,7 +11,7 @@
 code[class*="language-"],
 pre[class*="language-"] {
   color: #a9b7c6;
-  font-family: Consolas, Monaco, "Andale Mono", monospace;
+  font-family: var(--font-family-code);
   direction: ltr;
   text-align: left;
   white-space: pre;
@@ -29,6 +29,13 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
+code,
+code[class*="language-"] *,
+pre[class*="language-"] * {
+  font-family: var(--font-family-code) !important;
+  font-size: 16px;
+}
+
 pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,