Skip to content

Latest commit

 

History

History
67 lines (45 loc) · 3.9 KB

README.md

File metadata and controls

67 lines (45 loc) · 3.9 KB
Raw

Project Status Web Page

This package contains the source code of React web application. The web application has to be instantiated by your own configuration like information page markdown file. The data consumed by the app is preprocessed by action package so no need for a backend and can be easily published on services like Github Packages.

The look and feel of this web application mainly relies on the Ant Design React library, which provides a set of high quality components for building rich, interactive user interfaces.

Local Development

If you want to build or contribute to this project you will probably need to build/run this web application locally, here few steps to follow:

  1. Clone the repository
$ git clone git@github.com:kiegroup/chain-status.git
  1. Install all libraries [run it in the project's root]
$ yarn
  1. Run the application in development mode [run it in the webpage package]
$ yarn run

Open http://localhost:3000 to view it in the browser.
Keep in mind that the page will reload if you make edits on the source code.

  1. Build the whole project [run it on the project's root]
$ yarn build

Installation

If you want to install this web application on your repository in an automated way, this project comes with an easy to use Github action that you can use on your Github workflows.

The generate-app action is in charge to checkout this project, build it using yarn and publish it on a specific branch of the repository is including it.

Action Steps

Here the main important steps performed by generate-app action:

  1. Checkout in the branch where you want to store the webpage code and content, the default is gh-pages. [the first time you run this action there will be no webpage]
  2. Checkout in the original chain-status repository, i.e., this one.
  3. Setup nodejs and build the webpage using yarn.
  4. Check if in the target branch (e.g., gh-pages) there are old content/configuration files by checking the data/ folder. If there exists, it copies its content under the newly compiled webpage (under ./packages/webpage/public/).
  5. Deploy the created page using gh-pages tool in the target branch (e.g., gh-pages).

Inputs

Field Required Default Description
github-token true The Github token that must be used to interact with Github API
info-md-url true The url pointing to a Markdown file used to populate info section
gh-pages-branch false gh-pages The branch used by gh-pages tool, where the webpage will be stored

Technical Information

Lazy loading

  1. I use redux to handle states. sectionsShow specifically https://github.com/kiegroup/chain-status/blob/main/packages/webpage/src/service/layout.service.tsx#L43

  2. Then section is only shown based on the state

    chain-status/packages/webpage/src/components/pullrequests/List.tsx

    Line 21 in f891b11

    useEffect(() => {

  3. and then the section is registered on redux machinery based on the callback from

    chain-status/packages/webpage/src/components/shared/MenuSelection.tsx

    Line 29 in f891b11

    (key: string) => dispatch(layoutService.registerSection(key)),
    whenever the section is shown based on an observer with some extra margins

    chain-status/packages/webpage/src/components/shared/MenuSelection.tsx

    Line 86 in 4ac20d8

    const observer = new IntersectionObserver(callback, {