stack.md

The ethereum.org website stack

• Node.js
• Yarn package manager
• Gatsby
  • Manages page builds and deployment
  • Configurable in gatsby-node.js, gatsby-browser.js, gatsby-config.js, and gatsby-ssr.js
  • Gatsby Tutorial
  • Gatsby Docs
• React - A JavaScript library for building component-based user interfaces
• GraphQL - A query language for APIs
• Algolia - Site indexing, rapid intra-site search results, and search analytics. Learn more on how we implement Algolia for site search.
  • Primary implementation: /src/components/Search/index.js
• Crowdin - crowdsourcing for our translation efforts (See "Translation initiative" below)
• GitHub Actions - Manages CI/CD, and issue tracking
• Netlify - DNS management and primary host for master build.
• Gatsby Cloud - Site builds and automatic preview deployments for all pull requests

Code structure

Folder	Primary use
/src	Main source folder for development
/src/assets	Image assets
/src/components	React components that do not function as standalone pages
/src/content	Markdown/MDX files for site content stored here. For example: ethereum.org/en/about/ is built from src/content/about/index.md The markdown files are parsed and rendered by src/templates/static.js*
/src/content/developers/docs	*Markdown files in here use the Docs template: src/templates/docs.js
/src/content/developers/tutorials	*Markdown files in here use the Tutorial template: src/templates/tutorial.js
/src/data	General data files importable by components
/src/hooks	Custom React hooks
/src/intl	Language translation JSON files
/src/lambda	Lambda function scripts for API calls
/src/pages /src/pages-conditional	React components that function as standalone pages. For example: ethereum.org/en/wallets/find-wallet is built from src/pages/wallets/find-wallet.js
/src/scripts /src/utils	Custom utility scripts
/src/styles	Stores layout.css which contains root level css styling
/src/templates	JSX templates that define layouts of different regions of the site
/src/theme.js	Declares site color themes, breakpoints and other constants (try to utilize these colors first)