diff --git a/.babelrc b/.babelrc index 002b4aa..0ef5ffc 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["env"] + "presets": ["@babel/env"] } diff --git a/.travis.yml b/.travis.yml index b41f56c..3872af7 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: ruby rvm: - - 2.4 + - 2.5 cache: bundler: true @@ -8,7 +8,7 @@ cache: - $TRAVIS_BUILD_DIR/node_modules before_install: - - nvm install 9 + - nvm install 10 before_script: "_ci/setup.sh" script: "_ci/build.sh" diff --git a/README.md b/README.md index 837f9f2..1f2b996 100644 --- a/README.md +++ b/README.md @@ -5,38 +5,35 @@ **Note: As of February 2nd, 2018, IPDB will be shutting down. [Read about why](https://ipdb.io).** -[![Build Status](https://travis-ci.org/ipdb/website.svg?branch=master)](https://travis-ci.org/ipdb/website) +[![Build Status](https://travis-ci.com/ipdb/website.svg?branch=master)](https://travis-ci.com/ipdb/website) [![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb) [![js ascribe](https://img.shields.io/badge/js-ascribe-39BA91.svg)](https://github.com/ascribe/javascript) [![Greenkeeper badge](https://badges.greenkeeper.io/ipdb/website.svg)](https://greenkeeper.io/) ---- - [**Live**](https://ipdb.io) | [**Styleguide**](https://ipdb.io/styleguide/) ---- - -# Contents +## Table of Contents - [Content editing](#content-editing) - - [Pages](#pages) - - [Special pages](#special-pages) - - [Front page](#front-page) + - [Pages](#pages) + - [Special pages](#special-pages) - [Development](#development) - - [Install dependencies](#install-dependencies) - - [Development build](#development-build) + - [Install dependencies](#install-dependencies) + - [Development build](#development-build) - [Continuous deployment: always be shipping](#continuous-deployment-always-be-shipping) - [Manual deployment](#manual-deployment) - - [Prerequisite: authentication](#prerequisite-authentication) - - [Staging build & beta deployment](#staging-build--beta-deployment) - - [Production build & live deployment](#production-build--live-deployment) -- [Coding conventions](#coding-conventions--browser-support) - - [(S)CSS](#scss) - - [js](#js) -- [Authors & Contributors](#authors--contributors) + - [Prerequisite: authentication](#prerequisite-authentication) + - [Staging build & beta deployment](#staging-build-beta-deployment) + - [Production build & live deployment](#production-build-live-deployment) +- [Coding conventions & Browser support](#coding-conventions-browser-support) + - [(S)CSS](#s-css) + - [js](#js) +- [Authors & Contributors](#authors-contributors) - [License](#license) -# Content editing +--- + +## Content editing Most content on the site can be edited on GitHub without messing with HTML markup. @@ -44,7 +41,7 @@ The site's source and structure is in the [`_src/`](_src) folder. Ignore everyth When viewing a file on GitHub you will see a small pencil icon in the top right. Click that to edit the file. -## Pages +### Pages All pages are simple Markdown files. Markdown is a way of telling the site how an element should be marked up, like headings & bold text: @@ -57,24 +54,22 @@ I'm a simple paragraph. No fancy symbols needed. You can make text **bold like so** ``` -## Special pages +### Special pages Some pages like front page source their content dynamically during site build. This is so we have a single source of truth for content used in multiple places on the site. - [`_src/_data/content-front.yml`](_src/_data/content-front.yml) - [`_src/_data/content-foundation.yml`](_src/_data/content-foundation.yml) - -# Development +## Development You need to have the following tools installed on your development machine before moving on: -- [node.js](http://nodejs.org/) & [npm](https://npmjs.org/) -- (optional) use [Yarn](https://yarnpkg.com) instead of npm for faster dependency installations +- [Node.js](http://nodejs.org/) & [npm](https://npmjs.org/) - [Ruby](https://www.ruby-lang.org) (for sanity, install with [rvm](https://rvm.io/)) - [Bundler](http://bundler.io/) -## Install dependencies +### Install dependencies Run the following command from the repository's root folder to install all dependencies. @@ -82,13 +77,7 @@ Run the following command from the repository's root folder to install all depen npm i && bundle install ``` -or - -```bash -yarn && bundle install -``` - -## Development build +### Development build Spin up local dev server and livereloading watch task, reachable under [https://localhost:1337](https://localhost:1337): @@ -96,7 +85,7 @@ Spin up local dev server and livereloading watch task, reachable under [https:// gulp ``` -# Continuous deployment: always be shipping +## Continuous deployment: always be shipping The site gets built & deployed automatically via Travis. This is the preferred way of deployment, it makes sure the site is always deployed with fresh dependencies and only after a successful build. @@ -106,15 +95,15 @@ Build & deployment happens under the following conditions on Travis: - **live deployment**: every push to the master branch initiates a live deployment - **beta deployment**: every new pull request and every subsequent push to it initiates a beta deployment -# Manual deployment +## Manual deployment For emergency live deployments or beta deployments, the manual method can be used. The site is hosted in an S3 bucket and gets deployed via a gulp task. -## Prerequisite: authentication +### Prerequisite: authentication To deploy the site, you must authenticate yourself against the AWS API with your AWS credentials. Get your AWS access key and secret and add them to `~/.aws/credentials`: -``` +```bash [default] aws_access_key_id = aws_secret_access_key = @@ -130,7 +119,7 @@ AWS_PROFILE=ipdb gulp deploy --live In case that you get authentication errors or need an alternative way to authenticate with AWS, check out the [AWS documentation](http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/node-configuring.html). -## Staging build & beta deployment +### Staging build & beta deployment The staging build is a full production build but prevents search engine indexing & Google Analytics tracking. @@ -146,7 +135,7 @@ gulp build --staging gulp deploy --beta ``` -## Production build & live deployment +### Production build & live deployment ```bash # make sure your local npm packages & gems are up to date @@ -159,7 +148,7 @@ gulp build --production gulp deploy --live ``` -# Coding conventions & Browser support +## Coding conventions & Browser support Lint with ESLint & [stylelint](https://stylelint.io) in your editor or run: @@ -169,11 +158,11 @@ npm test As a rule of thumb, make your CSS & JavaScript work in the last 2 versions of modern browsers, and ideally in IE 11. Adapt the `browserslist` key values in the [`package.json`](package.json) when a change in visitor statistics allows that. -## (S)CSS +### (S)CSS Follows [stylelint-config-bigchaindb](https://github.com/bigchaindb/stylelint-config-bigchaindb) which itself extends [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard). -## js +### js Follows [ascribe/javascript](https://github.com/ascribe/javascript) which itself extends [airbnb/javascript](https://github.com/airbnb/javascript). @@ -181,7 +170,7 @@ Try to not use any jQuery, always prefer vanilla JavaScript. At the moment, jQuery is only used for the form submissions for its simple `$.ajax` functionality, and neither `XMLHttpRequest` or `fetch` seem to work with MailChimp. -# Authors & Contributors +## Authors & Contributors - Greg McMullen ([@gmcmullen](https://github.com/gmcmullen)) - [IPDB Foundation](https://ipdb.io) - Morgan Sutherland ([@msutherl](https://github.com/msutherl)) - [IPDB Foundation](https://ipdb.io) @@ -189,13 +178,12 @@ At the moment, jQuery is only used for the form submissions for its simple `$.aj - Members of the BigchainDB development team - Representatives of Caretakers in the IPDB - -# License +## License For all code in this repository the Apache License, Version 2.0 is applied. -``` -Copyright Interplanetary Database Foundation 2017. All rights reserved. +```text +Copyright Interplanetary Database Foundation 2018. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/_ci/setup.sh b/_ci/setup.sh index fef53ce..90dd95f 100755 --- a/_ci/setup.sh +++ b/_ci/setup.sh @@ -7,7 +7,7 @@ echo " Installing dependencies " echo "=============================================" echo "$(tput sgr0)" # reset -npm install gulpjs/gulp.git#4.0 -g +npm install gulp@next -g npm install # Travis does that automatically after selecting ruby diff --git a/_src/_assets/js/ipdb.js b/_src/_assets/js/ipdb.js index f7f5884..c6f0925 100644 --- a/_src/_assets/js/ipdb.js +++ b/_src/_assets/js/ipdb.js @@ -3,7 +3,7 @@ /* eslint-disable spaced-comment */ //=include _dnt.js //=include _newsletter.js -//=include smooth-scroll/dist/js/smooth-scroll.js +//=include smooth-scroll/dist/smooth-scroll.js //=include textarea-autogrow/textarea-autogrow.js //=include cookie-banner/src/cookiebanner.js /* eslint-enable spaced-comment */ diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 1d7a683..974bba2 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -1,6 +1,6 @@ /* eslint-disable no-console */ - import fs from 'fs' +import cp from 'child_process' import { src, dest, watch, parallel, series } from 'gulp' import del from 'del' import parallelize from 'concurrent-transform' @@ -8,16 +8,17 @@ import browser from 'browser-sync' import critical from 'critical' import yaml from 'js-yaml' import request from 'request' +import chalk from 'chalk' +import minimist from 'minimist' // required to get our mix of old and ES6+ js to work with ugify-js 3 import uglifyjs from 'uglify-es' import composer from 'gulp-uglify/composer' // get all the configs: `pkg` and `site` -import pkg from './package.json' +import pkg from './package' // load plugins -const spawn = require('child_process').spawn const $ = require('gulp-load-plugins')() const minify = composer(uglifyjs, console) @@ -25,14 +26,16 @@ const site = yaml.safeLoad(fs.readFileSync('./_config.yml')) // handle errors const onError = (error) => { - console.log($.util.colors.red('\nYou fucked up:', error.message, 'on line', error.lineNumber, '\n')) + console.log(chalk.red('\nYou fucked up:', error.message, 'on line', error.lineNumber, '\n')) this.emit('end') } // 'development' is just default, production overrides are triggered // by adding the production flag to the gulp command e.g. `gulp build --production` -const isProduction = ($.util.env.production === true) -const isStaging = ($.util.env.staging === true) +const options = minimist(process.argv.slice(2)) + +const isProduction = options.production === true +const isStaging = options.staging === true // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -109,9 +112,15 @@ export const jekyll = (done) => { jekyllOptions = 'jekyll build --incremental --drafts --future' } - const jekyllInstance = spawn('bundle', ['exec', jekyllOptions], { stdio: 'inherit' }) + const jekyllInstance = cp.execFile('bundle', ['exec', jekyllOptions], { stdio: 'inherit' }) - jekyllInstance.on('error', (error) => onError(error)).on('close', done) + const jekyllLogger = (buffer) => { + buffer.toString() + .split(/\n/) + .forEach((message) => console.log(message)) + } + + jekyllInstance.stdout.on('data', jekyllLogger).on('close', done) } @@ -291,17 +300,17 @@ export const watchSrc = () => { const buildBanner = (done) => { let buildEnvironment - if ($.util.env.production) { + if (isProduction) { buildEnvironment = 'production' - } else if ($.util.env.staging) { + } else if (isStaging) { buildEnvironment = 'staging' } else { buildEnvironment = 'dev' } - console.log($.util.colors.gray(' ------------------------------------------')) - console.log($.util.colors.green(` Building ${buildEnvironment} version...`)) - console.log($.util.colors.gray(' ------------------------------------------')) + console.log(chalk.gray(' ------------------------------------------')) + console.log(chalk.green(` Building ${buildEnvironment} version...`)) + console.log(chalk.gray(' ------------------------------------------')) done() } @@ -313,18 +322,18 @@ const buildBanner = (done) => { const deployBanner = (done) => { let deployTarget - if ($.util.env.live) { + if (options.live) { deployTarget = 'Live' } else { deployTarget = 'Beta' } - if (($.util.env.live || $.util.env.beta || $.util.env.gamma) === true) { - console.log($.util.colors.gray(' ------------------------------------------')) - console.log($.util.colors.green(` Deploying to ${deployTarget}... `)) - console.log($.util.colors.gray(' ------------------------------------------')) + if ((options.live || options.beta || options.gamma) === true) { + console.log(chalk.gray(' ------------------------------------------')) + console.log(chalk.green(` Deploying to ${deployTarget}... `)) + console.log(chalk.gray(' ------------------------------------------')) } else { - console.log($.util.colors.red('\nHold your horses! You need to specify a deployment target like so: gulp deploy --beta. Possible targets are: --live, --beta, --gamma\n')) + console.log(chalk.red('\nHold your horses! You need to specify a deployment target like so: gulp deploy --beta. Possible targets are: --live, --beta, --gamma\n')) } done() } @@ -352,9 +361,7 @@ export const build = series( // // `gulp dev` // -export const dev = series( - build, server, watchSrc -) +export const dev = series(build, server, watchSrc) // Set `gulp dev` as default: `gulp` export default dev @@ -373,14 +380,14 @@ export const s3 = () => { // create publisher, define config let publisher - if ($.util.env.live === true) { + if (options.live === true) { publisher = $.awspublish.create({ 'params': { 'Bucket': S3BUCKET }, 'accessKeyId': process.env.AWS_ACCESS_KEY, 'secretAccessKey': process.env.AWS_SECRET_KEY, 'region': S3REGION }) - } else if ($.util.env.beta === true) { + } else if (options.beta === true) { publisher = $.awspublish.create({ 'params': { 'Bucket': S3BUCKET_BETA }, 'accessKeyId': process.env.AWS_BETA_ACCESS_KEY, @@ -456,17 +463,17 @@ export const seo = (done) => { const showResponse = (error, response) => { if (error) { - $.util.log($.util.colors.red(error)) + console.log(chalk.red(error)) } else { - $.util.log($.util.colors.gray('Status:', response && response.statusCode)) + console.log(chalk.gray('Status:', response && response.statusCode)) if (response.statusCode === 200) { - $.util.log($.util.colors.green('Successfully notified')) + console.log(chalk.green('Successfully notified')) } } } - if ($.util.env.live === true) { + if (options.live === true) { request(`${googleUrl + site.url}/sitemap.xml`, showResponse) request(`${bingUrl + site.url}/sitemap.xml`, showResponse) } diff --git a/package.json b/package.json index 8680f49..43f98b0 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "ipdb-site", + "name": "@ipdb/website", "version": "1.0.0", "author": { "name": "Matthias Kretschmann", @@ -7,7 +7,7 @@ }, "description": "The blockchain database governance the universe needs", "homepage": "https://ipdb.io", - "license": "(c) 2017 IPDB Foundation - All Rights Reserved", + "license": "(c) 2018 IPDB Foundation - All Rights Reserved", "main": "gulpfile.babel.js", "scripts": { "start": "gulp", @@ -30,50 +30,52 @@ "dependencies": { "ajaxchimp": "^1.3.0", "cookie-banner": "github:dobarkod/cookie-banner", - "jquery": "^3.2.1", - "smooth-scroll": "^12.1.5", + "jquery": "^3.3.1", + "smooth-scroll": "^14.2.1", "textarea-autogrow": "^1.0.0" }, "devDependencies": { - "babel-core": "^6.26.0", - "babel-eslint": "^8.1.2", - "babel-preset-env": "^1.6.1", - "browser-sync": "^2.23.2", + "@babel/core": "^7.1.0", + "@babel/preset-env": "^7.1.0", + "@babel/register": "^7.0.0", + "babel-eslint": "^10.0.1", + "browser-sync": "^2.24.7", + "chalk": "^2.4.1", "concurrent-transform": "^1.0.0", - "critical": "^1.1.0", - "cross-spawn": "^5.1.0", + "critical": "^1.3.4", + "cross-spawn": "^6.0.5", "del": "^3.0.0", - "eslint": "^4.14.0", + "eslint": "^5.6.0", "eslint-config-ascribe": "^3.0.5", - "eslint-plugin-import": "^2.8.0", - "gulp": "github:gulpjs/gulp#4.0", - "gulp-autoprefixer": "^4.1.0", - "gulp-awspublish": "^3.3.0", - "gulp-awspublish-router": "^0.1.3", - "gulp-clean-css": "^3.9.2", - "gulp-cli": "^2.0.0", + "eslint-plugin-import": "^2.14.0", + "gulp": "next", + "gulp-autoprefixer": "^6.0.0", + "gulp-awspublish": "^3.4.0", + "gulp-awspublish-router": "^0.1.5", + "gulp-clean-css": "^3.10.0", + "gulp-cli": "^2.0.1", "gulp-concat": "^2.6.1", - "gulp-header": "^1.8.9", - "gulp-htmlmin": "^4.0.0", + "gulp-header": "^2.0.5", + "gulp-htmlmin": "^5.0.1", "gulp-if": "^2.0.2", "gulp-imagemin": "^4.1.0", "gulp-include": "^2.3.1", "gulp-load-plugins": "^1.5.0", - "gulp-rename": "^1.2.2", - "gulp-replace": "^0.6.1", + "gulp-rename": "^1.4.0", + "gulp-replace": "^1.0.0", "gulp-rev": "^8.1.1", - "gulp-rev-replace": "^0.4.3", - "gulp-sass": "^3.1.0", - "gulp-sourcemaps": "^2.6.3", - "gulp-svg-sprite": "^1.3.7", - "gulp-uglify": "^3.0.0", - "gulp-util": "^3.0.8", - "js-yaml": "^3.10.0", - "request": "^2.83.0", - "stylelint": "^8.4.0", - "stylelint-config-bigchaindb": "^1.2.0", - "stylelint-config-standard": "^18.0.0", - "uglify-es": "^3.3.4" + "gulp-rev-replace": "^0.4.4", + "gulp-sass": "^4.0.1", + "gulp-sourcemaps": "^2.6.4", + "gulp-svg-sprite": "^1.5.0", + "gulp-uglify": "^3.0.1", + "js-yaml": "^3.12.0", + "minimist": "^1.2.0", + "request": "^2.88.0", + "stylelint": "^9.6.0", + "stylelint-config-bigchaindb": "^1.2.1", + "stylelint-config-standard": "^18.2.0", + "uglify-es": "^3.3.9" }, "engines": { "node": ">=7.0.0"