rumors-site

Rumors list / creation UI, with server-side rendering.

Configuration

For development, copy .env.sample to .env and make necessary changes.

For production via rumors-deploy, do setups in docker-compose.yml.

Development

This project uses NodeJS 12+.

$ 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 t

styled-jsx syntax highlighting

See: https://github.com/zeit/styled-jsx#syntax-highlighting

Try built image on local

Build docker image.

# build
$ IMAGE_NAME=rumors-site-test npm run build

This will build both $IMAGE_NAME-en and $IMAGE_NAME-tw image.

Run the docker image on local machine, then visit http://localhost:3000.

# English version:
$ docker run --rm --env-file .env -p 3000:3000 rumors-site-test-en

# zh_TW version:
$ docker run --rm --env-file .env -p 3000:3000 rumors-site-test-tw

On docker hub, hooks/build is automatically executed on dev and master branch.

Analytics

This project supports Google Tag Manager; populate PUBLIC_GTM_ID in .env with your Google Tag Manager Container ID.

The application will fire the following custom events:

• routeChangeStart - when next-router starts route change
• routeChangeComplete - when next-router finish route change
• dataLoaded - when article / reply is loaded in article & reply page

Design and Mockups

• 真的假的 hackfoldr
• 網站 UI flow