Website source has been moved to https://github.com/regen-network/regen-web/tree/dev/web-www
The website for the Regen Network.
web-www: Regen website based on Gatsby
If you haven't already, you can set up system dependencies by running the following commands:
brew install python
sudo ln -s /opt/homebrew/bin/python3 /opt/homebrew/bin/python
brew install vipsNote: python and vips are dependencies via sharp.
yarnSet variables in .env.development and .env.production in web-www/ based on .env.development.example and .env.production.example respectively.
First, run:
yarn developyarn buildTo generate Type definitions from our GraphQL Schema, as well as custom react hooks, make sure the graphQL server is running locally:
yarn graphql:codegen
yarn graphql:codegenThis should be done anytime a .graphql file is created or modified.
As part of https://github.com/regen-network/registry-server/pull/186, we've added some additional filtering features to our GraphQL server (using postgraphile-plugin-connection-filter), though we restricted the filters to only work on certain fields and operators for now for performance and security reasons: https://github.com/regen-network/registry-server/blob/aa97096c9a8e88e1af97655586e0222e263b8df5/server/Server.ts#L111-L115
If you try to use a filter that is not allowed yet, you'll get the following error when trying to generate types:
GraphQLDocumentError: Field "${fieldName}" is not defined by type "${TableName}Filter".
In this case, you might want to submit a PR on https://github.com/regen-network/registry-server first to allow more filtering options.
web-www uses a React 17 compatible version of web-components from regen-web monorepo.
To update this version of web-components:
git checkout react-17inregen-web- make changes, bump version in
regen-web/web-components/package.json, and publish a new version withnpm publish - use new version in
web-www/package.json
Prettier and ESLint are used as code formatter and linter.
Code can be formatted and any auto-fixable errors corrected through the command:
yarn format-and-fixIf you are using VsCode, there are suggested workspace settings in .vscode/settings.json.suggested - copy those over to your workspace settings.json and things should format automatically.
Note: You'll need the VsCode extensions for Prettier and ESLint
This repo utilizes custom MUI Typography components to normalize styles with the mockups based on the typography in figma:
<Title />corresponds to "Header" text in the mockups<Label />corresponds to "Button Text" in the mockups<Subtitle /><Body />
Responsive styles are generally normalized (e.g. an H1 on desktop translates to an H3 on mobile in most cases), however these can be overridden with variant / mobileVariant (for Titles) and size / mobileSize (for the others). For example:
<Title /> // renders an h1 (default) on desktop, h3 on mobile
<Title variant="h3" /> // renders an h3 on desktop, h4 on mobile
<Title variant="h3" mobileVariant="h3" /> // renders an h3 on desktop & mobile
<Subtitle size="xl" mobileSize="sm" />
<Body mobileSize="md" /> // keep default `md` size on mobileOne small gotcha: due to how styled components and the sx prop function together, if you want to use a custom fontSize through sx, you have to pass responsive values:
<Title sx={{ fontSize: 12 }}> // does not work as expected
<Title sx={{ fontSize: [12] }}> // works
<Title sx={{ fontSize: [12, 18] }}> // works
<Title sx={{ fontSize: { xs: 12 } }}> // worksAll of these components also accept MUI's SX Prop.
The <Body> component by default will add styles to child Link and ul/ol elements, which can be overridden through props:
<Body>
<Link>text</Link> // will render as green w/ bold text
<ol>
<li>list text</li> // will render with a green dot and custom positioning
</ol>
</Body>
<Body styleLinks={false} styleLists={false}>
<Link>text</Link> // will render as default text
<ol>
<li>list text</li> // will render with default list styles
</ol>
</Body>| Px | Rem | theme.spacing | Figma Component | UI Components | MUI Variants |
|---|---|---|---|---|---|
| 48px | 3rem | 12 | H1 | Title | H1 |
| 38px | 2.375rem | 9.5 | H2 | Title | H2 |
| 32px | 2rem | 8 | H3 | Title | H3 |
| 24px | 1.5rem | 6 | H4 | Title | H4 |
| 22px | 1.375rem | 5.5 | bodyXLarge, subtitleXLarge | Body, Subtitle | textXLarge |
| 21px | 1.313rem | 5.252 | H5, ButtonLarge | Title, Label | H5 |
| 18px | 1.125rem | 4.5 | H6, subtitleLarge bodyLarge, buttonMedium | Title, Subtitle, Body, Label | h6, textLarge |
| 16px | 1rem | 4 | subtitleMedium, bodyMedium | Subtitle, Label | textMedium |
| 14px | 0.875rem | 3.5 | subtitleSmall, bodySmall, buttonSmall | Subtitle, Body, Label | textSmall |
| 12px | 0.75rem | 3 | subtitleXSmall bodyXSmall, buttonXSmall | Subtitle, Body, Label | textXSmall |
some larger packages don't manage to get downloaded in time for yarn's 30 second timeout, you might see an error like this one
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz: ESOCKETTIMEDOUT".
info If you think this is a bug, please open a bug report with the information provided in "/Users/jared/Dev/registry/yarn-error.log".
a simple workaround via mui/material-ui#12432 is to run
yarn install --network-timeout 500000
instead of yarn install
Currently we use netlify to deploy this application.
Please see the netlify.toml in the project root for information about the different deployment environments.
In case you are seeing a build/deploy failure from Netlify, there is a helpful way to debug. Netlify provides the source code for their build-image. This docker image can be used to run a netlify build worker on your local machine. This allows you to test settings and parameters of the build. Hopefully this allows you to reproduce the error/failure you are dealing with.
git clone https://github.com/netlify/build-image
cd build-images
docker pull netlify/build:focal
./test-tools/start-image.sh ../regen-web/Make sure that any changes you want to test in the local build are committed. Uncommited changes are ignored by the Netlify build image.
After running the start-image.sh script you will drop into the docker container.
Then you will be able to run any commands, i.e. the build:
/opt/build-bin/build yarn build