0e602ed91d
- update buf to latest to support ts-proto plugin - add NodeJS dev dependency for web-proto codegen Change-Id: I881f9da7461d5d4ff28a64304a2adc33037598d1 |
||
|---|---|---|
| .. | ||
| .storybook | ||
| .vscode | ||
| __mocks__ | ||
| src | ||
| static | ||
| test-utils | ||
| .babelrc | ||
| .editorconfig | ||
| .env.sample | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| .svgo.yml | ||
| Dockerfile | ||
| README.md | ||
| gatsby-browser.js | ||
| gatsby-config.js | ||
| gatsby-node.js | ||
| gatsby-ssr.js | ||
| jest.config.js | ||
| jsconfig.json | ||
| package-lock.json | ||
| package.json | ||
| tsconfig.json | ||
README.md
wormhole explorer
A web app built with:
Notable files
- Supported Languages - add/remove supported languages here ./src/utils/i18n/supportedLanguages.js
- Multilangual copy ./src/locales
- Top level pages & client side routes. Adding a file here creates a @reach-router route ./src/pages
- SEO config, inherited by all pages ./src/components/SEO/SEO.tsx
- Main layout HOC, contains top-menu nav and footer ./src/components/Layout/DefaultLayout.tsx
- Gatsby plugins ./gatsby-config.js
- Ant Design theme variables, overrides Antd defaults ./src/AntdTheme.js
Repo setup
Installing dependencies with npm:
npm install
Create a .env file for your development environment, from the .env.sample:
cp .env.sample .env.development
Developing
Start the development server with the npm script:
npm run dev
Then open the web app in your browser at http://localhost:8000
Debugging
NodeJs debugging with VSCode
You can debug the Gatsby dev server or build process using VSCode's debbuger. Checkout .vscode/launch.json to see the NodeJS debugging options.
These debugger configs will let you set breakpoints in the Gatsby node programs (./gatsby-config.js, ./gatsby-node.js) to debug webpack, Gatsby plugins, etc.
Browser debugging with VSCode
With the Debugger for Chrome extension installed, you can inspect the web app and set broswer breakpoints from VSCode. With the dev server (npm run dev) running, select & run Debug in Chrome from the debugger pane.
Storybook component rendering
Storybook can render components with sytles and locales, for UI component development.
Run Storybook with:
npm run storybook
See ./src/components/Button/button.stories.tsx
eslint linting & formatting
Check linting:
npm run lint
Fix linting errors:
npm run format
Ant Design Theming
Ant Design default less variables can be overridden in ./src/AntdTheme.js, which is used in ./gatsby-config.js#L51.
Programmatic Translations
Translations can be made for the supported languages (./src/utils/i18n/supportedLanguages.js). The English language definition file (./src/locales/en.json) will be read and used as the source, using either DeepL or Google Translate to supply the translations.
Translating with DeepL
Pass your DeepL Pro api key to the npm script:
npm run translate:deepl -- your-DeepL-Pro-api-key-here
Translating with Google Translate
With your Service Account credentials saved to a file locally, pass the path to the .json file to the npm script:
npm run translate:google -- ./your-GCP-service-account.json