Merge pull request #302 from scroll-tech/develop

Dev Tooling page

Author: dghelm

README.md

@@ -16,6 +16,24 @@ npm install && npm run dev
 - All articles are markdown and stored in `/src/content/docs/`.
 - Navigation is JSON in `/src/config/sidebar.ts`
 
+## Tooling on Scroll
+
+If you'd like to add an entry to our [tooling list](http://docs.scroll.xyz/en/developers/scroll-contracts), create a PR to add a new `mdx` file in the [tooling content folder](src/content/tools), using the following template. You can also refer to other existing entries for reference.
+
+```
+---
+name: "Safe"
+category: ["Identity", "Wallet"]
+excerpt: "Safe allows you to create smart wallet on chain."
+logo: { src: "https://app.safe.global/images/safe-logo-green.png", alt: "Safe Logo" }
+website: "https://app.safe.global"
+network: ["Mainnet", "Testnet]
+noAdditionalInfo: false
+---
+
+Add additional info here about how to access this tool on Scroll (ex. contract addresses, tutorials, API URLs)
+```
+
 ## Credits
 
 - Special thanks to the Chainlink team whose documentation we forked. Their repo is available [here](https://github.com/smartcontractkit/documentation) and viewable at [https://docs.chain.link/](https://docs.chain.link/).

astro.config.ts

@@ -18,6 +18,8 @@ import sitemap from "@astrojs/sitemap"
 
 import tailwind from "@astrojs/tailwind"
 
+import expressiveCode from "astro-expressive-code"
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://docs.scroll.io",
@@ -38,6 +40,21 @@ export default defineConfig({
     }),
     astroCallouts(),
     solidityRemixCode(),
+    expressiveCode({
+      themes: ["dark-plus"],
+      defaultProps: {
+        frame: "code",
+      },
+      styleOverrides: {
+        borderRadius: "27px",
+        borderColor: "transparent",
+        frames: {
+          shadowColor: "transparent",
+          editorTabBorderRadius: "0.5rem",
+          editorBackground: "#2b2b2b",
+        },
+      },
+    }),
     mdx(),
     tailwind({
       applyBaseStyles: false,

package.json

@@ -28,6 +28,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "@nanostores/preact": "^0.3.1",
     "astro-auto-import": "^0.4.2",
+    "astro-expressive-code": "^0.35.3",
     "astro-i18next": "^1.0.0-beta.21",
     "clipboard": "^2.0.11",
     "ethereum-rpc-table": "^0.0.1",
@@ -42,6 +43,7 @@
     "query-string": "^7.1.1",
     "react-instantsearch-hooks-web": "^6.38.1",
     "react-mailchimp-subscribe": "^2.1.3",
+    "rehype-format": "^5.0.0",
     "rehype-katex": "^7.0.0",
     "rehype-mermaidjs": "^1.0.1",
     "remark-gfm": "^4.0.0",

public/assets/github-white-800.svg

@@ -89,6 +89,7 @@
       "erc1155TokenBridge": "ERC1155 Token Bridge",
       "theScrollMessenger": "The Scroll Messenger",
       "transactionFeesOnScroll": "Transaction Fees on Scroll",
+      "toolingDeployedOnScroll": "Tooling deployed On Scroll",
       "l2Fee": "L2 Fee",
       "l1Fee": "L1 Fee",
       "gasOracle": "Gas Oracle",

public/locales/en/translation.json

@@ -21,7 +21,7 @@ const icons = {
 
 <aside class={`content ${type}`} aria-label={title}>
   <div class="icon">
-    <span class="inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white">
+    <span class="inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white-800">
       <Fragment set:html={icons[type]} />
     </span>
   </div>

public/scroll-docs-white-800.svg

@@ -32,9 +32,9 @@ const EmailInput = (props) => {
         onKeyDown={handleEnter}
         className={clsx(
           styles.inputBase,
-          "dark:text-white",
+          "dark:text-white-800",
           "dark:bg-black",
-          "dark:border-white",
+          "dark:border-white-800",
           "placeholder:text-[#dcdcdc]",
           "placeholder:dark:text-[#FFF8F366]",
           "focus:outline-none"