coerick / wochap.github.io

Personal website

wochap

Personal website powered by React and Webpack

Quick start

IMPORTANT Rename .env.example to .env. Then:

# install dependencies
$ yarn

# serve with hot reload
$ yarn dev

# serve with hot reload and inspect webpack dev server
# https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js
$ yarn dev:inspect

# build for production with minification
# build static html files
$ yarn build

# run tests
$ yarn test

# run tests and watch
$ yarn test:watch

# run test coverage report
$ yarn test:coverage

NOTE: For disable source map or bundle analyzer report (both on production only) and browser sync (on development), just remove it from .env file.

Documentation

Boilerplate

Stack

• React
• React router
• Redux
• wocss

Structure

• App: Route hierarchy
• Styles: ITCSS

Development

Icon font

This project uses Icomoon, to add new icons you have to import the src/icomoon/selection.json in the icomoon app, then download the new font from it and drop to src/icomoon folder, maybe you must restart webpack.

Redux store

Collection

Requeriments:

• Custom loaders:

  • lazy-dir-loader: generate a single chunk with all markdown files.
  • lazy-loader: generate a single chunk per markdown file.
  • front-matter loader: transform markdown files to a custom format.
  • markdown-loader: transform markdown files to a custom format.

• redux-promise-middleware

There is collections store, it handles markdown files from src/data folder.

To add a new collection dispatch the actions from src/app/actions/collections.js module, these actions use the webpack api to generate chunks, and make webpackJsonp requests.

To learn

• Share propTypes between components
• Complete intro to react

Content

Writing blog posts

Write the dates in 'DD-MM-YYYY' format.