first wave of changes

Author: dghelm

CONTRIBUTING.md

@@ -1,20 +1,26 @@
 # Contributing to the Scroll Documentation
 
-PRs are welcome! We try to keep a clean commit history, so we'll follow a standard process initially created by the Chainlink team whose documentation we forked:
+As we build out the initial scope of the documentation, we intend to be selective about PRs, especially in our English language documentation. If you're interested in making a code or content contribution, please start by creating an issue and discussing the idea with a member of our team.
 
-- Create a PR
+If you want information about contributing a translation, please see [TRANSLATION.md](./TRANSLATION.md).
+
+We try to keep a clean commit history, so we'll follow a standard process initially created by the Chainlink team whose documentation we forked:
+
+- Create a new issue
+  - Comment on the issue if you'd like to be assigned to it
+- Fork the Repo & Create a PR
   - If your PR contains multiple commits, we'll ask you to squash them
-  - If your PR has conflicts with `main`, we'll ask you to rebase it
+  - If your PR has conflicts with `develop`, we'll ask you to rebase it
 - Someone will review your PR
 - Your PR will be merged, amended, closed, or you'll be asked for changes
 
 ## Standards
 
 - Commit messages
-  - Start with a present tense verb
+  - Start with a present-tense verb
   - Keep your commit headline short but sufficient to understand the scope and focus of the change.
   - Changes are often formatted like `add doc X`, `fix page Y`, `improve docs for Z`.
-  - Example: "`update contract addresses for BSC`".
+  - Example: "`update contract addresses for USDC on Scroll Sepolia`".
 - If you touch any infrastructure, make sure it builds with `yarn build`
 - Trust the autoformatter (prettier)
 - Make sure images are optimized and compressed
@@ -29,7 +35,7 @@ git rebase origin/main
 git push -f
 ```
 
-It's okay to force push over your own PR branch. In fact, that's what we want so that the commits are clean.
+It's okay to force push over your own PR branch. That's what we want so that the commits are clean.
 
 ## How to squash a PR
 

TRANSLATION.md

@@ -0,0 +1,26 @@
+# Translation Initiative
+
+_Our translation initiative hopes to translate Scroll documentation into different languages and make the website accessible to people worldwide._
+
+Our current documentation is only available in English, but with community contributions, we want to support many language communities. Since this is a new initiative and we want to maintain high assurances about the information in our documentation, **we're only accepting contributions in Mandarin and Spanish**. Once we're comfortable with the process and can ensure a good experience for community translators, we'll seek contributions in additional languages.
+
+### Want to get involved as a translator?
+
+Create an issue describing which article you wish to translate. Then get started! If you need help or have any questions, join the [Scroll Discord](https://discord.gg/scroll). Once your translation is submitted, we'll ask a member of our team to do a review.
+
+### Standards and Policies
+
+For now, we will defer to Ethereum.org's excellent [Translation Style Guide](https://ethereum.org/en/contributing/translation-program/translators-guide/). We do not use a translation platform, but please assume all other guidance applies here.
+
+## Starting a translation
+
+1. Fork this repository
+1. Create an issue named using the format "Translation: _[English Article Name]_ (_[lang]_)" -- for example, "Translation: User Guide Faucet (zh)"
+1. Find the article you wish to translate in `src/content/docs/en/` and copy it to a matching folder in `src/content/docs/[lang]/`. All files should maintain the same file name and folder structure as the English version of the site.
+1. To translate UI elements or article names, modify the appropriate entry in `public/locales/[lang]/translation.json`. If you're unsure what to do here, suggest any additional changes to the site in your PR.
+1. Make a PR with the title following the template above. Be sure to mention the original issue in your description.
+1. A team member will review, recommend changes and work with you to get the final version added to the code base.
+
+### Not familiar with Git?
+
+If you don't want to worry about all this Git stuff, contact a team member or community moderator on the [Scroll Discord](https://discord.gg/scroll). We'd be happy to point you at the original file to translate and suggest an online text editor (like [HackMD](https://hackmd.io/)) for sharing your results. We'll take it from there.

public/locales/en/translation.json

@@ -46,7 +46,7 @@
     "gettingStarted": {
       "gettingStarted": "Getting Started",
       "overview": "Overview",
-      "alphaTestnet": "Alpha Testnet",
+      "scrollSepoliaTestnet": "Scroll Seplolia Testnet",
       "userGuide": "User Guide",
       "setup": "Setup",
       "faucet": "Faucet",
@@ -56,6 +56,8 @@
       "rollupExplorer": "Rollup Explorer",
       "alphaBlockExplorer": "Alpha Block Explorer",
       "goerliBlockExplorer": "Goerli Block Explorer",
+      "scrollSepoliaBlockExplorer": "Scroll Sepolia Explorer",
+      "sepoliaBlockExplorer": "Sepolia Explorer",
       "community": "Community",
       "discord": "Discord",
       "communityForum": "Community Forum"
@@ -73,18 +75,23 @@
       "resources": "Resources",
       "rollupExplorer": "Rollup Explorer",
       "alphaBlockExplorer": "Alpha Block Explorer",
-      "goerliBlockExplorer": "Goerli Block Explorer"
+      "goerliBlockExplorer": "Goerli Block Explorer",
+      "scrollSepoliaBlockExplorer": "Scroll Sepolia Explorer",
+      "sepoliaBlockExplorer": "Sepolia Explorer"
     },
     "technology": {
-      "architecture": "Architecture",
-      "scrollArchitecture": "Scroll Architecture",
+      "introduction": "Introduction",
       "principles": "Principles",
+      "scrollArchitecture": "Scroll Architecture",
+      "scrollProtocol": "Scroll Protocol",
+      "overview": "Overview",
+      "rollupProcess": "Rollup Process",
+
       "zkevm": "zkEVM",
       "introToZkevm": "Intro to zkEVM",
       "zkevmOverview": "zkEVM Overview",
       "bridge": "Bridge",
       "bridgeOverview": "Bridge Overview",
-      "rollupProcess": "Rollup Process",
       "sequencer": "Sequencer",
       "executionClient": "Execution Client",
       "zkTrie": "zkTrie",
@@ -98,8 +105,10 @@
       "theScalabilityProblem": "The Scalability Problem",
       "introToRollups": "Intro to Rollups",
       "zeroKnowledge": "Zero Knowledge",
+      "introToZeroKnowledge": "Intro to Zero Knowledge",
       "polynomialCommitmentSchemes": "Polynomial Commitment Schemes",
-      "kzgCommitmentScheme": "KZG Commitment Scheme"
+      "kzgCommitmentScheme": "KZG Commitment Scheme",
+      "additionalResources": "Additional Resources"
     }
   },
   "notTranslated": {

public/locales/es/translation.json

@@ -0,0 +1,5 @@
+{
+  "notTranslated": {
+    "notTranslated": "Esta página aún no ha sido traducida."
+  }
+}

src/config/sidebar.ts

@@ -10,7 +10,7 @@ export const getSidebar = () => {
         contents: [{ title: t("sidebar.gettingStarted.overview"), url: "getting-started/overview" }],
       },
       {
-        section: t("sidebar.gettingStarted.alphaTestnet"),
+        section: t("sidebar.gettingStarted.scrollSepoliaTestnet"),
         contents: [
           {
             title: t("sidebar.gettingStarted.userGuide"),
@@ -38,9 +38,9 @@ export const getSidebar = () => {
               },
             ],
           },
+          { title: t("sidebar.gettingStarted.scrollSepoliaBlockExplorer"), url: "https://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.alphaBlockExplorer"), url: "https://blockscout.scroll.io/" },
-          { title: t("sidebar.gettingStarted.goerliBlockExplorer"), url: "https://goerli.etherscan.io/" },
         ],
       },
       {
@@ -61,11 +61,17 @@ export const getSidebar = () => {
       {
         section: "Developers",
         contents: [
-          { title: t("sidebar.developers.buildingOnScroll"), url: "developers" },
-          { title: t("sidebar.developers.developerQuickstart"), url: "developers/developer-quickstart" },
-          { title: t("sidebar.developers.verifyingSmartContracts"), url: "developers/verifying-smart-contracts" },
-          { title: t("sidebar.developers.alphaTestnetContracts"), url: "developers/alpha-testnet-contracts" },
-          { title: t("sidebar.developers.integrations"), url: "developers/integrations" },
+          { title: t("sidebar.developers.buildingOnScroll"), url: formatUrl("developers") },
+          { title: t("sidebar.developers.developerQuickstart"), url: formatUrl("developers/developer-quickstart") },
+          {
+            title: t("sidebar.developers.verifyingSmartContracts"),
+            url: formatUrl("developers/verifying-smart-contracts"),
+          },
+          {
+            title: t("sidebar.developers.alphaTestnetContracts"),
+            url: formatUrl("developers/alpha-testnet-contracts"),
+          },
+          { title: t("sidebar.developers.integrations"), url: formatUrl("developers/integrations") },
           {
             title: t("sidebar.developers.ethereum&AlphaTestnetDifferences"),
             url: formatUrl("developers/ethereum-and-alpha-testnet-differences"),
@@ -85,14 +91,27 @@ export const getSidebar = () => {
         section: "Resources",
         contents: [
           { title: t("sidebar.developers.rollupExplorer"), url: "https://scroll.io/alpha/rollupscan" },
-          { title: t("sidebar.developers.alphaBlockExplorer"), url: "https://blockscout.scroll.io/" },
-          { title: t("sidebar.developers.goerliBlockExplorer"), url: "https://goerli.etherscan.io/" },
+          { title: t("sidebar.developers.scrollSepoliaBlockExplorer"), url: "https://blockscout.scroll.io/" },
+          { title: t("sidebar.developers.sepoliaBlockExplorer"), url: "https://goerli.etherscan.io/" },
         ],
       },
     ],
     technology: [
       {
-        section: t("sidebar.technology.architecture"),
+        section: t("sidebar.technology.introduction"),
+        contents: [
+          // {
+          //   title: t("sidebar.technology.principles"),
+          //   url: "technology/architecture/principles",
+          // },
+          {
+            title: t("sidebar.technology.scrollArchitecture"),
+            url: "technology/architecture/scroll-architecture",
+          },
+        ],
+      },
+      {
+        section: t("sidebar.technology.scrollProtocol"),
         contents: [
           {
             title: t("sidebar.technology.scrollArchitecture"),
@@ -178,13 +197,21 @@ export const getSidebar = () => {
       {
         section: t("sidebar.learn.zeroKnowledge"),
         contents: [
+          {
+            title: t("sidebar.learn.introToZeroKnowledge"),
+            url: formatUrl("learn/zero-knowledge/introduction-to-zero-knowledge"),
+          },
           {
             title: t("sidebar.learn.polynomialCommitmentSchemes"),
-            url: "learn/zero-knowledge/polynomial-commitment-schemes",
+            url: formatUrl("learn/zero-knowledge/polynomial-commitment-schemes"),
           },
           {
             title: t("sidebar.learn.kzgCommitmentScheme"),
-            url: "learn/zero-knowledge/kzg-commitment-scheme",
+            url: formatUrl("learn/zero-knowledge/kzg-commitment-scheme"),
+          },
+          {
+            title: t("sidebar.learn.additionalResources"),
+            url: formatUrl("learn/zero-knowledge/additional-zk-learning-resources"),
           },
         ],
       },

src/content/docs/en/article-components.mdx

@@ -0,0 +1,138 @@
+---
+section: gettingStarted
+title: "Article Components"
+date: Last Modified
+lang: "en"
+permalink: "/article-components"
+excerpt: "Learn more about the topics of Ethereum Scalability and Zero Knowledge Cryptography"
+isMdx: true
+whatsnext: { "Next Up Page 1": "/", "Second Next Up Page": "/" }
+metadata:
+  title: "Conceptual Overview"
+  description: "Metadata for social media and search results."
+  image:
+    0: "/files/ToDo:-image-file-name.png"
+---
+
+import ClickToZoom from "../../../components/ClickToZoom.astro"
+import priceAggr from "../../../assets/images/contract-devs/price-aggr.png"
+import ToggleElement from "../../../components/ToggleElement.astro"
+import Aside from "../../../components/Aside.astro"
+
+This is body text right under the article title. It typically is just paragraph text that's pretty straightforward. Then there's **bold text**, and _italic text_, and **_bold-italic text_**, and `inline-code` and **`bold inline code`** and even _`italic inline code`_ and **_`bold italic inline code`_**. And of course don't forget [links](#), and [**bold links**](#), and [_italic links_](#), and [**_bold-italic links_**](#).
+
+## Markdown Components (also an H2 Heading)
+
+- We've also got unordered lists!
+- They can have multiple items.
+  - And some sub-items.
+  - That get into details
+- That's an unordered list.
+
+What else do we have?
+
+1. Of course there's also ordered lists.
+1. They look like this.
+1. They're pretty useful.
+
+### H3 Heading
+
+#### H4 Heading
+
+##### H5 Heading
+
+Let's see a horizontal rule.
+
+---
+
+We define the Square-Fibonacci sequence[^1], a variation of the Fibonacci sequence:
+
+### Math
+
+- Let $f_0 = 1, f_1 = 1$
+- For $$i \geq 2$$, define $f_{i} := (f_{i-2})^2 + (f_{i-1})^2 \mod q$
+  - Where $q$ is a large prime integer. We use this modulus to bound the size of each element, so that it can be represented by some predetermined number of bits.
+
+### Tables
+
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+
+### Blockquotes
+
+> #### Success
+>
+> Vitae reprehenderit at aliquid error voluptates eum dignissimos.
+
+### Footnotes
+
+Here's a simple footnote,[^1] and here's a longer one.[^bignote]
+
+[^1]: This is the first footnote.
+[^bignote]: Here's one with multiple paragraphs and code.
+
+### Callout that worked in MD, but might not in MDX?
+
+:::tip[Did you know?]
+Astro helps you build faster websites with “Islands Architecture”.
+:::
+
+## Imported MDX Components
+
+### Callouts
+
+<Aside type="note" title="note">
+  {" "}
+  Astro helps you build faster websites with “Islands Architecture”.{" "}
+</Aside>
+<Aside type="caution" title="caution">
+  {" "}
+  Astro helps you build faster websites with “Islands Architecture”.{" "}
+</Aside>
+<Aside type="danger" title="danger">
+  {" "}
+  Astro helps you build faster websites with “Islands Architecture”.{" "}
+</Aside>
+
+<Aside type="tip" title="tip">
+  For .md file you can use this code.
+</Aside>
+
+```
+:::tip[Did you know?]
+ Astro helps you build faster websites with “Islands Architecture”.
+:::
+```
+
+### Images zoom
+
+<ClickToZoom src={priceAggr} />
+
+### Toggle
+
+<ToggleElement anchor="Why build on Scroll?">
+  <div slot="title">Why build on Scroll?</div>
+  <p>
+    Scroll enables creators to turn their content into interactive, explorable experiences. With Scroll, you can create
+    rich, interactive stories that engage readers, provide a better user experience, and help you stand out from the
+    crowd.
+  </p>
+</ToggleElement>
+<ToggleElement anchor="How does Scroll work?">
+  <div slot="title">How does Scroll work?</div>
+  <p>
+    Scroll combines powerful technologies like WebGL and WebRTC to create immersive, interactive experiences. The
+    platform allows you to build 3D environments, add interactivity, and embed content from popular web services to
+    create a unique, engaging experience for your audience.
+  </p>
+</ToggleElement>
+<ToggleElement anchor="What can I build with Scroll?">
+  <div slot="title">What can I build with Scroll?</div>
+  <p>
+    You can build a wide range of experiences with Scroll, from interactive articles to immersive product demos and
+    virtual tours. Scroll is designed to help you create engaging, interactive experiences that elevate your content and
+    captivate your audience.
+  </p>
+</ToggleElement>