https://github.com/usulpro/nodeday.uk

https://github.com/usulpro/nodeday.uk

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/usulpro/nodeday.uk
• Owner: usulpro
• Created: 2020-02-25T13:21:51.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-23T22:27:00.000Z (over 6 years ago)
• Last Synced: 2025-03-31T01:48:45.695Z (over 1 year ago)
• Size: 951 KB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Node Day UK Conference Website

## How to use

Clone this repo and then in command line type:

* `nvm use` to switch node version

* `npm install` or `yarn` - install all dependencies

* `yarn start` - run dev-server and let magic happen, or

* `yarn dev` - same but with mocked content from `content-log.json`

* `gulp build` - build project from sources

* `yarn storybook` - start Storybook locally (http://localhost:6006/)

* `yarn test:watch` - run jest test in watch mode

Deployed Storybook: https://gitnation.github.io/JSNation.com (with production credentials)

--

## Content Layer

There are follow data layers which is used for generating html pages:

1. CMS layer

2. Content layer

3. Templates layer

[1] Data is hosted on headless CMS and fetched via GraphQL API

This process is encapsulated in `@focus-reactive/graphql-content-layer` package

To configure the request the follow variables should be set:

- `CMS_TOKEN` and `CMS_ENDPOINT` environment variables

- `$conferenceTitle` and `$eventYear` GraphQL variables should be passed into `getContent()`

- other conference specific options should be passed into `getContent()` (tagColors)

[2] Received data will be processed and prepared for passing to template engine

The result will be logged to `content-log.json`.

[3] Prepared data will be available during templates generation

Templates can have additional front-matter data. Note that:

1. Front-matter data is isolated withing each template file

2. Front-matter data will be overriden by data coming from [2] layer in case of same field names

[3*] Mocked data

run `yarn dev` to skip [1] and [2] layers. Data will be taken from `content-log.json` file in this case.

## List of Gulp tasks

To run separate task type in command line `gulp [task_name]`.

Almost all tasks also have watch mode - `gulp [task_name]:watch`, but you don't need to use it directly.

### Main tasks

Task name          | Description

:------------------|:----------------------------------

`default`          | will start all tasks required by project in dev mode: initial build, watch files, run server with livereload

`build:dev`        | build dev version of project (without code optimizations)

`build`            | build production-ready project (with code optimizations)

### Other tasks

Task name          | Description

:------------------|:----------------------------------

`sass` 	         | compile .sass/.scss to .css. We also use [postcss](https://github.com/postcss/postcss) for [autoprefixer](https://github.com/postcss/autoprefixer) and [Lost](https://github.com/peterramsing/lost), so feel free to include other awesome postcss [plugins](https://github.com/postcss/postcss#plugins) when needed

`webpack`          | compile .js sources into bundle file

`copy`             | copy common files from `./src` path to `./build` path

`nunjucks`         | compile Mozilla's awesome [nunjucks](https://mozilla.github.io/nunjucks/) templates

`svgo`             | optimize svg files with [svgo](https://github.com/svg/svgo)

`sprite:svg`       | create svg symbol sprites ([css-tricks](https://css-tricks.com/svg-sprites-use-better-icon-fonts/))

`sprite:png`       | create png sprites

`server`           | run dev-server powered by [BrowserSync](https://www.browsersync.io/)

`clean`            | remove `./build` folder

`test`             | run snapshot test of compiled html pages

_This is a full list of tasks, that we use in our projects, but not all of them should be available in current project. For example, we only use one template engine out of these three [`jade`, `nunjucks`, `swig`]. All available tasks are placed in a folder `./gulp/tasks` as separate *.js files. Usually, file name = task name._

## Flags

We have several useful flags.

* `gulp --open` or `gulp server --open` - run dev server and then open preview in browser

* `gulp --tunnel=[name]` or `gulp server --tunnel [name]` - runs dev server and allows you to easily share a web service on your local development machine (powered by [localtunnel.me](https://localtunnel.me/)). Your local site will be available at `[name].localtunnel.me`.

* `gulp [task_name] --prod` or `gulp [task_name] --production` - run task in production mode. Some of the tasks (like, sass or js compilation) have additional settings for production mode (such as code minification), so with this flag you can force production mode. `gulp build` uses this mode by default.

## Other

You can also use [npm scripts](https://docs.npmjs.com/misc/scripts):

* `npm run start` - same as `gulp default`.

* `npm run build` - same as `gulp build`.

* `npm run ghpages` to push only `./build` folder to **gh-pages** branch on github (very useful for previews).

* `npm run lint` - linting javascript with **eslint**.

* `npm run lint-fix` - fix as many issues as possible relatives to **eslint** settings.