- Node.js
- Yarn package manager
- Gatsby
- Manages page builds and deployment
- Configurable in
gatsby-node.ts,gatsby-browser.ts,gatsby-config.ts, andgatsby-ssr.ts - Gatsby Tutorial
- Gatsby Docs
- React - A JavaScript library for building component-based user interfaces
- Typescript - TypeScript is a strongly typed programming language that builds on JavaScript
- Chakra UI - A UI library (Migration in progress)
- 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.ts
- Primary implementation:
- 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
masterbuild. - Gatsby Cloud - Site builds and automatic preview deployments for all pull requests
- Storybook - For UI development, testing, and documentation. Check out our storybook!
- Chromatic - Visual testing & UI reviews. Visit our chromatic project
| Folder | Primary use |
|---|---|
/src |
Main source folder for development |
/src/assets |
Image assets |
/src/components |
React components that do not function as standalone pages |
/public/content |
Markdown/MDX files for site content stored here. For example: ethereum.org/en/about/ is built from public/content/about/index.md The markdown files are parsed and rendered by src/templates/static.ts* |
/public/content/developers/docs |
*Markdown files in here use the Docs template: src/templates/docs.ts |
/public/content/developers/tutorials |
*Markdown files in here use the Tutorial template: src/templates/tutorial.ts |
/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.ts |
/src/scripts/src/utils |
Custom utility scripts |
/src/styles |
Stores layout.css which contains root level css styling |
/src/templates |
TSX templates that define layouts of different regions of the site |
/src/theme.ts |
Declares site color themes, breakpoints and other constants (try to utilize these colors first) |