Replace Jekyll (ruby) engine with Phenomic (JavaScript/React/Webpack)

[MoOx]

According to #1, you were looking for a nice platform to make a website.
Jekyll is imo outdated. The HTML approach has its benefit, but also a lot of downside.
And since istanbul/nyc are JavaScript project, what about making this website with JavaScript? @kentcdodds said everything I think here #1 (comment)

So here is a commit to replace Jekyll by Phenomic. Why Phenomic?
Here is my answer :)
#1 (comment)

Here is a “Getting Started” page that might help you starting with Phenomic https://phenomic.io/docs/getting-started/.

If there is not enough things, feel free to reach us on the community chat https://gitter.im/MoOx/phenomic

Benefits

• Modern JavaScript (Babel) and CSS (PostCSS + cssnext)
• Webpack: all assets are tracked. No missing background image or
  things like that.
• Component approach thanks to React. You build your website with lego
  blocks: layouts & partials are just React components.
• CSS Modules. No more global styles! (well there is some but just a
  bit)
• Awesome developer/writer experience: HOT LOADING (no full page
  refresh needed, just work on a file and save it: BOOM auto partial
  reload!)
• Client-side navigation when JS is on: no full page refresh! (If JS is
  off, no problem, HTML pages are generated during deploy)

Possibilities

• OFFLINE support. You can offer offline via AppCache (legacy solution)
  or ServiceWorker (require HTTPS). Latest is recommended and can be
  activated via a flag
• Live search (sort of built-in will be added soon, feel free to track
  Add Search capabilities MoOx/phenomic#142 - it’s already possible,
  but require some boilerplate - some people already implemented it on
  their websites)

Minor changes (that can be reverted/changed anyway)

• Tutorials are not “posts”, but real simple pages
• Website is now responsive :)
• No dropdown for "Tutorials", this is not fun to implement on mobile. A simple proxy page has been added (see screenshots below). This can be a nice opportunity to add test runner LOGOs :)
• Phenomic default boilerplate provide system font, which I think is a
  good thing https://medium.design/system-shock-6b1dc6d6596f#.yupv0c7mu
• Reference to Phenomic in the footer
• I added a link to github org in the header, I found this was missing
• I added a Blog section in the header, hidden on production for now
  since blog entries are dumb :)
• I converted some content to markdown

Downside

• No native integration with Github Pages, so you will need to follow
  some instructions to setup auto deploy via Travis (don’t worry, this is
  very easy https://phenomic.io/docs/usage/gh-pages/)

Screenshots

---

This PR is probably just a start, discussion is open :)
Feel free to ask me anything. Phenomic is still young, but if you have any requirements that cannot be implemented atm, I will be more than happy to help :)

[kentcdodds]

Wow! That was a lot of work dude! Great work. I'm personally in favor of this change. But I haven't contributed much so my vote doesn't count for much.

[bcoe]

@MoOx @kentcdodds this rocks! and I'm really excited to switch our site over to something in pure JavaScript. I'm on a quick vacation in NYC (i know right!), so will play with things more shortly. A few initial comments:

• tests are failing for me locally with the error: Error: Files glob patterns specified did not match any files.

• I like the idea of using system fonts, and I feel that the site looks better (and feels a lot faster) with the changes you've made.

• there are some rendering errors on the tutorials that haven't been filed out yet:

  

  • I think it would be worth just simply adding some placeholder text on these pages, e.g., "Using Istanbul with AVA", tutorial coming soon. Maybe we could link to the open issue here.

• I love your idea of adding the logo for each test-framework on the tutorials page, and am fine with the drop-down being eliminated.

@MoOx I really appreciate this work, and am excited to showcase Phenomic.

[thangngoc89]

I deployed @MoOx work here https://istanbul.surge.sh in case you want to check it out (and too lazy to build it locally)

[MoOx]

• I fixed the "test" command: it was CSS linter that were looking for files in the wrong place. I used Phenomic default boilerplate but changed the structure as the current default is confusing for some people. So the current setup here should have a more simple file tree, less confusing.
• I update the tutorials that were just "moved". For AVA and node tap, I copied mocha content and adjusted the command, from my experience it should be the same. For webpack and es2015+, I added a "tutorial coming soon" with a link to the issue.
• I didn't handle the logo since my time is limited and I am a bit lazy, but it should be very easy to handle :D
  Not sure why Travis still try to use ruby as the detected config said "node"... https://travis-ci.org/istanbuljs/istanbuljs.github.io/jobs/155862811/config

[thangngoc89]

@MoOx try

language": "node_js",

[MoOx]

Haha all my projects have "language: node". I learned a thing today :D

[MoOx]

So tests are passing!

[bcoe]

@MoOx thanks for the hard work. this is now in production, and Travis is setup to automatically deploy.

[MoOx]

Cool, I will add this on the Showcase page :)