Add story 26 - Nivo and State of JavaScript 2018

data/collections/stories/story-026.md

@@ -0,0 +1,11 @@
+---
+number: 26
+---
+
+Number one this week, _Nivo_ is a data visualization library for React made by our friend Raphaël Benitte.
+
+It provides 15 kinds of chart components including bar charts, calendars, tree maps, heat maps...
+
+To see the _Nivo_ components in action while learning about the JavaScript landscape, check the results of our annual survey: [2018 State of JavaScript](https://2018.stateofjs.com/).
+
+This year too, Sacha Grief and Raphaël Benitte did an amazing work to gather the answers from more than 20,000 developers, provide useful insights and beautiful visualizations... powered by _Nivo_ of course!

data/rankings/weekly-026.json

@@ -0,0 +1 @@
+{"date":"2018-11-24T23:43:59.535Z","projects":[{"name":"Nivo","stars":3909,"deltas":[153,246,251,119,82,35,2],"monthly":[1825,2185,2459,2678,2795,2879,3756],"full_name":"plouc/nivo","description":"nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries","owner_id":501642,"pushed_at":"2018-11-24T12:49:47.000Z","tags":["react","chart","svg","d3"],"contributor_count":20,"url":"https://nivo.rocks","npm":"nivo","weekly":888},{"name":"Slate","stars":11991,"deltas":[13,47,82,130,156,265,132],"monthly":[6025,6651,7509,8339,8742,9421,11978],"full_name":"ianstormtaylor/slate","description":"A completely customizable framework for building rich text editors.","owner_id":311752,"pushed_at":"2018-11-24T05:21:20.000Z","tags":["rich-text-editor"],"contributor_count":203,"url":"http://slatejs.org","npm":"slate","icon":"slate.png","weekly":825},{"name":"33 JS Concepts","stars":19542,"deltas":[44,77,128,209,198,104,50],"monthly":[13134,19498],"full_name":"leonardomso/33-js-concepts","description":"📜 33 concepts every JavaScript developer should know.","owner_id":8030067,"pushed_at":"2018-11-24T12:47:42.000Z","tags":["learning"],"contributor_count":45,"weekly":810},{"name":"Squoosh","stars":4544,"deltas":[41,77,115,125,198,249],"monthly":[4503],"full_name":"GoogleChromeLabs/squoosh","description":"Make images smaller using best-in-class codecs, right in the browser.","owner_id":31970254,"pushed_at":"2018-11-22T14:09:13.000Z","tags":["image"],"contributor_count":13,"url":"https://squoosh.app","weekly":805},{"name":"Vue.js","stars":120014,"deltas":[68,129,116,137,115,105,70],"monthly":[74684,84600,95076,111798,114641,117142,119946],"full_name":"vuejs/vue","description":"🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.","owner_id":6128107,"pushed_at":"2018-11-24T16:56:23.000Z","tags":["framework","vdom","vue"],"contributor_count":215,"url":"http://vuejs.org","branch":"dev","npm":"vue","icon":"vue.svg","weekly":740},{"name":"Carlo","stars":6933,"deltas":[108,274,55,53,91,81,39],"monthly":[6825],"full_name":"GoogleChromeLabs/carlo","description":"Web rendering surface for Node applications","owner_id":31970254,"pushed_at":"2018-11-23T23:51:43.000Z","tags":["auto","desktop"],"contributor_count":16,"npm":"carlo","weekly":701},{"name":"HTM","stars":2366,"deltas":[175,459],"monthly":[2191],"full_name":"developit/htm","description":"Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.","owner_id":105127,"pushed_at":"2018-11-24T19:44:36.000Z","tags":["template","vdom"],"contributor_count":7,"npm":"htm","weekly":634},{"name":"XState","stars":3632,"deltas":[15,10,46,140,232,64,19],"monthly":[628,1139,1652,2284,2552,2712,3617],"full_name":"davidkpiano/xstate","description":"State machines and statecharts for the modern web.","owner_id":1093738,"pushed_at":"2018-11-24T21:00:59.000Z","tags":["state-machine"],"contributor_count":34,"url":"https://xstate.js.org/docs","npm":"xstate","weekly":526},{"name":"Imba","stars":2775,"deltas":[32,43,118,163,168],"monthly":[2743],"full_name":"somebee/imba","description":"The new programming language for web apps","owner_id":8467,"pushed_at":"2018-11-22T14:02:23.000Z","tags":["framework"],"contributor_count":10,"url":"http://imba.io","weekly":524},{"name":"30 seconds of code","stars":32859,"deltas":[39,63,88,89,116,61,44],"monthly":[17875,20088,21455,21819,29841,32820],"full_name":"30-seconds/30-seconds-of-code","description":"Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.","owner_id":43479428,"pushed_at":"2018-11-22T14:23:56.000Z","tags":["learning"],"contributor_count":147,"url":"https://30secondsofcode.org/","weekly":500}]}

src/utils/fetch-content.js

@@ -1,18 +1,17 @@
 const fetchAndPopulate = require('./fetch-and-populate')
 const fetchStories = require('./fetch-stories')
 
-async function fetchContent() {
+async function fetchContent () {
   const rankings = await fetchAndPopulate()
   const stories = await fetchStories()
   const findStory = number => {
     const story = stories.find(story => story.number === number)
     return story ? story.contents : ''
   }
-  console.log(rankings.length)
-
+  console.log(rankings.length, 'rankings found')
   return rankings.map(report => ({
     ...report,
-    story: findStory(report.number)
+    story: findStory(report.number),
   }))
 }