COVID-19 in HK｜武漢肺炎民間資訊

This is the repository for covid19.vote4.hk

📍 Data

The data is updated automatically every 5 minutes. The information are all open for use. If you wish to cite anything from this site, please credit us as covid19.vote4.hk - COVID-19 in HK or covid19.vote4.hk - 武漢肺炎民間資訊.

• High-risk Areas
• Confirmed Cases

🚀 Quick start

Set up your environment

Navigate to the project directory and run the below command to install all the dependencies of project

yarn

Start your local development

gatsby develop

Your site is now running at http://localhost:8000!

Note:

• You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
• Gatsby requires Node.js 10.13.0 or higher. If your version is below the required one, try to upgrade it or following the below steps to switch to the desired version using nvm: Run the following command to use the version from inside the .nvmrc file

  nvm use

  If the specified version is not found, please run the following command to install

  nvm install

🌟 How to contribute

All contributions are welcome.

For Volunteers:

• Apply through Google Form.
• Submit Github Issues for reporting bugs. (See below Issues section for more).

For Developers:

• See below Development section for more.

Issues

• Please follow our issue template when creating an issue. We only accept bug report and feature request. Before creating an issue, make sure there is no similar issues.
• If you plan to work on an issue, please leave a comment to inform us and we will assign it to you. We recommend beginners to pick up issues with good first issue tag.

Pull Requests

• Please follow our pull request template when creating a pull request. Make sure your pull request fulfils our requirement.
• Please create a new branch (for each PR) based on the latest dev or the feature branch and name it either feat/<meaningful_name> or fix/<meaningful_name>.
• Please follow our naming convention 🌟[feat/fix]: [summary] (pick your favourite emoji 😉) for pull request title.

Communication

• We make communication in a Telegram Group. Feel free to join us by clicking here.

💻 Development

Branches

Purpose	Branch	URL	Remarks
Development	dev	https://wars-dev.vote4.hk/	Default development branch. All pull requests will be reviewed and then merged to this branch
Production	master	https://covid19.vote4.hk/	Only pull requests created by administrators are allowed
Hotfix	fix/*	None	Fixes created by the administrators
Feature	feat/*	None	Features branch before merging to Development branch

Checkout the latest code

Please setup dev repo github.com/nandiheath/warsinhk as upstream and git fetch upstream -p everytime before making commits. And remember to rebase your branches onto latest upstream:dev.

Internationalization (i18n)

We are using react-i18next to assert that the internationalized content can be loaded or that it gets rendered when the language changes.

The translation json files for en and zh are located at src/locales/en/translation.json and src/locales/zh/translation.json respectively. By default, zh is used. If you have changes to the wordings, please make sure they are added or updated in both json files.

Examples:

src/locales/en/translation.json

{
  "world.page_title": "Global Cases"
}

src/locales/zh/translation.json

{
  "world.page_title": "全球疫情追蹤"
}

Use useTranslation() for functional components:

// 1. import useTranslation from react-i18next
import { useTranslation } from "react-i18next"
// 2. define t from useTranslation()
const { t } = useTranslation()
// 3. use the t function with the key as the parameter
const title = t("world.page_title")

Use withLanguage() to translate the target field within an object

// 1. import withLanguage from custom utils
import { withLanguage } from "@/utils/i18n"
// 2. define i18n from useTranslation()
const { i18n } = useTranslation()
// 3. pass i18n, the target object, and the target field name to withLanguage
// if the locale is en, the link would be ``node.address_en``
// if the locale is zh, the link would be ``node.address_zh``
const address = withLanguage(i18n, node, "address")

Use getLocalizedPath(i18n, path) to get the localized path

// 1. import getLocalizedPath from custom utils
import { getLocalizedPath } from "@/utils/i18n"
// 2. define i18n from useTranslation()
const { i18n } = useTranslation()
// 3. pass i18n and the path to getLocalizedPath
// if the locale is en, the link would be ``/en/world``
// if the locale is zh, the link would be ``/zh/world``
<Link
  href={getLocalizedPath(i18n, "/world")}
>
  ...
</Link>

For interpolation, surround the dynamic value by curly brackets in translation.json

{
  "world.border_shutdown_last_update": "Last update: {{date}}"
}

and pass an object with the key defined in curly brackets and the dynamic value in the second parameter

{
  t("world.border_shutdown_last_update", { date: last_update })
}

Analyse code for potential errors

Run eslint to ensure it fits linting

yarn lint
yarn lint:fix

Try to build to see if there are any errors.

yarn build

📄 License

This software is released under the MIT License, while the content on this site is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.