Rumors list / creation UI, with server-side rendering.
For development, copy .env.sample to .env and make necessary changes.
For production via rumors-deploy, do setups in docker-compose.yml.
This project uses NodeJS 16. Use a node version manager like nvm to install version 16 (ex. nvm install 16)
$ npm install
$ npm run dev # Then visit http://localhost:3000
# Before you pull request, please lint your code first
$ npm run lint
# fix eslint
$ npm run lint:fix
# run test
$ npm tSee: https://github.com/zeit/styled-jsx#syntax-highlighting
Build docker image.
# build en version
$ docker build --build-arg APP_ID=RUMORS_SITE --build-arg LOCALE=en_US -t rumors-site-test-en .
# build tw version
$ docker build --build-arg APP_ID=RUMORS_SITE --build-arg LOCALE=zh_TW -t rumors-site-test-tw .This will build both rumors-site-test image.
Run the docker image on local machine, then visit http://localhost:3000.
# English version:
$ docker run --rm --env-file .env -e NODE_ENV=production -p 3000:3000 rumors-site-test-en
# zh_TW version:
$ docker run --rm --env-file .env -e NODE_ENV=production -p 3000:3000 rumors-site-test-twWe use storybook to demonstrate components.
# run storybook localserver on port 6006
$ npm run storybookwe also use storyshot to do snapshot test with stories, make sure to run:
$ npm test -- -u
before pushing to update stories snapshots. Storybook will be available under /storybook/index.html after build.
This project supports Google Tag Manager. You can prepare the following setup in .env file:
PUBLIC_GTM_ID: Google Tag Manager Container ID (GTM-XXXXXXX)
The application will fire the following custom events in GTM dataLayer:
routeChangeStart- when next-router starts route changerouteChangeComplete- when next-router finish route changedataLoaded- when article / reply is loaded in article & reply page
Also, it will push the following custom variable to dataLayer;
CURRENT_USER- Current user object, set byuseCurrentUser.doc- Set whendataLoadedevent fires. The loaded content itself in object, including its__typename.
Lastly, in Google Tag Manager we use data-ga property to track clicks.
If user clicks a decendant of an React element with data-ga property,
a click event will be sent to Google analytics with the written data-ga.
(It doesn't even need to be rendered, we setup the Google Tag Manager to read private React instance)
Also, if a component has its displayName set,
a click event with that displayName is also sent to Google Analytics when any of its decendant is clicked.
We use ttag to support build-time i18n for the SSR website. During deploy, we build one Docker image for each locale.
Please refer to ttag documentation for annotating strings to translate.
To extract annotated strings to translation files, use:
$ npm run i18n:extract
The translation files are located under i18n/, in Gettext PO format.
en_US.po: Since the language used in code is already English, this empty translation file exists to simplify settings.zh_TW.po: Traditional Chinese translation.ja.po: Japanese translation.
You can replace this with any language you want to support, by leveraging Gettext msginit command.
You will need to change the following to reflect the locale change:
i18n:extractscript inpackage.jsoni18n:validatescript inpackage.json
By default, the chatbot will be built under en_US locale.
During development, changing LOCALE in .env allows you to spin up dev server under a specific locale.
Please set LOCALE to one of en_US, zh_TW or any other language code that exists under i18n/ directory.
When previewing translated site on local machine, sometimes the translated text does not appear.
You may need to set BABEL_DISABLE_CACHE (example: BABEL_DISABLE_CACHE=1 npm run dev) to disable
babel cache for the new translation to appear correctly.
When building using Docker, LOCALE can be provided via build args.
This repository uses GraphQL Code Generator with client preset.
When writing Typescript file with GraphQL, please run this command to generate or update the GraphQL codegen result (TypedDocumentNode in typegen/*):
$ npm run typegenIf encountering GraphQL operations or fragments wrapped with gql, please change to codegen result instead:
// Old syntax
import gql from 'graphql-tag';
gql`...`;
// New syntax
import { graphql } from 'path-to-typegen';
graphql(/* GraphQL */ `...`)To consume the fragments from typed API, see Fragment Masking documentation of the client preset.
LICENSE defines the license agreement for the source code in this repository.
LEGAL.md is the user agreement for Cofacts website users.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
