Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #5396

Merged
merged 2 commits into from
Jun 17, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# Hardhat documentation website

This is a NextJS-based application for the Hardhat documentation website. This app is utilizing SSG for creating pages on the build step. It's developed keeping the best practices in mind including accessibility, SEO and Performance optimizations, and scalability
This is a NextJS-based application for the Hardhat documentation website. This app utilizes SSG for creating pages during the build step. It is developed with best practices in mind, including accessibility, SEO, performance optimizations, and scalability.

The app mainly provides two types of pages:

- landing pages (see home page)
- documentation pages (see documentation section)
- Landing pages (see home page)
- Documentation pages (see documentation section)

Landing pages are composed of reusable blocks and separate content files. Blocks are full-width React Components that can be stacked to compose a page. Blocks output content passed to them via props.

Documentation pages are generated from markdown files located in the `src/content` folder. This folder has a nesting structure that is mapped to the page URLs on the website.

It's assumed that the app will be hosted on the Vercel platform which is highly optimized for SSG apps.
It is assumed that the app will be hosted on the Vercel platform, which is highly optimized for SSG apps.

We consider two directions of the follow-up application growing:
We consider two directions for the follow-up application growth:

- by creating and editing new content.
- by adding new features to the app.
- Creating and editing new content
- Adding new features to the app

The first one can be provided by working with human-friendly file formats located in the content folder (MD and YAML). Only minimal tech knowledge is needed for that. The second way requires developers' efforts.

Expand All @@ -28,13 +28,13 @@ https://hardhat-lime.vercel.app/

Website content is located in `*.md` files within `src/content` folder. It's written in Markdown syntax. Folders structure in `content` is reflected on the website.

To tune pages, behavior and appearance also use optional `*.yaml` files with additional configurations.
To adjust page behavior and appearance, also use optional `*.yaml` files with additional configurations.

To preview content locally, launch the app with `pnpm dev` and open http://127.0.0.1:3000 in your browser. See details in [Development](#development) section.

### Layouts

All content is organized by hierarchy levels and the top-level entries are layouts. The layout represents a set of folders and provides navigation within them. Currently, a folder should belong to one of the layouts. In terms of UI, the layout is equal to a sidebar navigation menu with two-level items. Layouts settings can be found in the `src/content/layouts.yaml` file. It contains all layouts (currently "documentation" and "tutorial"). Each layout can have the following settings:
All content is organized by hierarchy levels and the top-level entries are layouts. The layout represents a set of folders and provides navigation within them. Currently, a folder should belong to one of the layouts. In terms of UI, the layout is equivalent to a sidebar navigation menu with two-level items. Layout settings can be found in the `src/content/layouts.yaml` file. It contains all layouts (currently "documentation" and "tutorial"). Each layout can have the following settings:

- title (optional)
- folders - the list of folders should be included in this layout
Expand Down Expand Up @@ -147,7 +147,7 @@ Open [http://127.0.0.1:3000](http://127.0.0.1:3000) with your browser to see the

You can start editing the page by modifying `src/pages/...`. The page auto-updates as you edit the file.

### Folders structure
### Folder structure

When developing the application you might need these main folders

Expand All @@ -173,14 +173,14 @@ Each component can be exposed with different states (stories) independently by p

We also deploy updated storybook on each build. You can find it on https://hardhat-storybook.netlify.app/

## Content generating tech details
## Content generating technical details

There are two relatively independent processes in the build step:

1. Generating pages themselves. We get page paths directly from the files located in the content folder. Their paths are mapped to the page routes. Layout settings don't affect to page's existence.
2. Generating layouts and mapping layouts to pages. For that, we're checking which folders belong to what layout and assigning that layout to a page

Page paths are generated in the `getStaticPaths` functions in files of the `page` folder. The result of these functions is an array of page paths. Page pros are generated with the `getStaticProps` function which is executed once per page with a page path passed as an argument and returns all required page props.
Page paths are generated in the `getStaticPaths` functions in files of the `page` folder. The result of these functions is an array of page paths. Page props are generated with the `getStaticProps` function, which is executed once per page with a page path passed as an argument and returns all required page props.

Execution of `getStaticPaths` and `getStaticProps` is handled by NextJS on a build step and it runs them in isolation (which means we can't share common calculated parameters within them). To optimize building time, we store an intermediate config in a temporary file on the `getStaticPaths` execution and read it from `getStaticProps` functions. It contains layout settings and a map of pages with specific props.

Expand Down
Loading