|
2 | 2 |
|
3 | 3 | - [Node.js](https://nodejs.org/) |
4 | 4 | - [Yarn package manager](https://yarnpkg.com/cli/install) |
5 | | -- [Gatsby](https://www.gatsbyjs.org/) |
6 | | - - Manages page builds and deployment |
7 | | - - Configurable in `gatsby-node.ts`, `gatsby-browser.ts`, `gatsby-config.ts`, and `gatsby-ssr.ts` |
8 | | - - [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/) |
9 | | - - [Gatsby Docs](https://www.gatsbyjs.org/docs/) |
| 5 | +- [NextJS](https://nextjs.org/) |
| 6 | + - React framework that provides some goodies out of the box (pages router, SSG, SSR, i18n support, Image component, etc) |
| 7 | + - Configurable in `next.config.js` |
| 8 | + - [NextJS Tutorial](https://nextjs.org/learn/foundations/about-nextjs) |
| 9 | + - [NextJS Docs](https://nextjs.org/docs) |
10 | 10 | - [React](https://reactjs.org/) - A JavaScript library for building component-based user interfaces |
11 | 11 | - [Typescript](https://www.typescriptlang.org/) - TypeScript is a strongly typed programming language that builds on JavaScript |
12 | 12 | - [Chakra UI](https://chakra-ui.com/) - A UI library (Migration in progress) |
13 | | -- [GraphQL](https://graphql.org/) - A query language for APIs |
14 | 13 | - [Algolia](https://www.algolia.com/) - Site indexing, rapid intra-site search results, and search analytics. [Learn more on how we implement Algolia for site search](./docs/ALGOLIA_DOCSEARCH.md). |
15 | 14 | - Primary implementation: `/src/components/Search/index.ts` |
16 | 15 | - [Crowdin](https://crowdin.com/) - crowdsourcing for our translation efforts (See "Translation initiative" below) |
17 | 16 | - [GitHub Actions](https://github.com/features/actions) - Manages CI/CD, and issue tracking |
18 | 17 | - [Netlify](https://www.netlify.com/) - DNS management and primary host for `master` build. |
19 | | -- [Gatsby Cloud](https://www.gatsbyjs.com/) - Site builds and automatic preview deployments for all pull requests |
20 | 18 | - [Storybook](https://storybook.js.org/) - For UI development, testing, and documentation. Check out [our storybook!](https://dev--63b7ea99632763723c7f4d6b.chromatic.com/) |
21 | 19 | - [Chromatic](https://www.chromatic.com/) - Visual testing & UI reviews. Visit [our chromatic project](https://www.chromatic.com/builds?appId=63b7ea99632763723c7f4d6b) |
22 | 20 |
|
23 | 21 | ## Code structure |
24 | 22 |
|
25 | | -| Folder | Primary use | |
26 | | -| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
27 | | -| `/src` | Main source folder for development | |
28 | | -| `/src/assets` | Image assets | |
29 | | -| `/src/components` | React components that do not function as standalone pages | |
30 | | -| `/public/content` | Markdown/MDX files for site content stored here. <br>For example: `ethereum.org/en/about/` is built from `public/content/about/index.md` <br>The markdown files are parsed and rendered by `src/templates/static.ts`\* | |
31 | | -| `/public/content/developers/docs` | \*Markdown files in here use the Docs template: `src/templates/docs.ts` | |
32 | | -| `/public/content/developers/tutorials` | \*Markdown files in here use the Tutorial template: `src/templates/tutorial.ts` | |
33 | | -| `/src/data` | General data files importable by components | |
34 | | -| `/src/hooks` | Custom React hooks | |
35 | | -| `/src/intl` | Language translation JSON files | |
36 | | -| `/src/lambda` | Lambda function scripts for API calls | |
37 | | -| `/src/pages`<br>`/src/pages-conditional` | React components that function as standalone pages. <br>For example: `ethereum.org/en/wallets/find-wallet` is built from `src/pages/wallets/find-wallet.ts` | |
38 | | -| `/src/scripts`<br>`/src/utils` | Custom utility scripts | |
39 | | -| `/src/styles` | Stores `layout.css` which contains root level css styling | |
40 | | -| `/src/templates` | TSX templates that define layouts of different regions of the site | |
41 | | -| `/src/theme.ts` | Declares site color themes, breakpoints and other constants (try to utilize these colors first) | |
| 23 | +| Folder | Primary use | |
| 24 | +| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 25 | +| `/src` | Main source folder for development. | |
| 26 | +| `/public/assets` | Image assets. | |
| 27 | +| `/src/components` | React components that do not function as standalone pages. | |
| 28 | +| `/public/content` | Markdown/MDX files for site content stored here. <br>For example: `ethereum.org/en/about/` is built from `public/content/about/index.md` <br>The markdown files are parsed by `[...slug].tsx` and rendered using the proper layout in `ContentPage.getLayout` method. | |
| 29 | +| `/public/content/developers/docs` | \*Markdown files in here use the Docs layout: `src/layouts/Docs.tsx` | |
| 30 | +| `/public/content/developers/tutorials` | \*Markdown files in here use the Tutorial layout: `src/layouts/Tutorial.tsx` | |
| 31 | +| `/src/data` | General data files importable by components. | |
| 32 | +| `/src/hooks` | Custom React hooks. | |
| 33 | +| `/src/intl` | Language translation JSON files. | |
| 34 | +| `/src/pages/api` | NextJS API Routes (https://nextjs.org/docs/pages/building-your-application/routing/api-routes) | |
| 35 | +| `/src/pages` | React components that function as standalone pages. | |
| 36 | +| `/src/scripts`<br>`/src/lib/utils` | Custom utility scripts. | |
| 37 | +| `src/@chakra-ui` | Stores `theme.ts` which contains our custom Chakra theme, along with src/@chakra-ui/`semanticTokens.ts` (dark/light mode tokens) and custom Chakra components styles. | |
| 38 | +| `src/layouts` | NextJS layouts (https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#with-typescript) that define layouts of different regions of the site. | |
0 commit comments