First version without any layout

gatsby-config.js

@@ -1,8 +1,8 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    title: `Ionic v4 CheatSheet`,
+    description: `An Ionic Framework v4 CheatSheet`,
+    author: `@anagstef`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -18,8 +18,8 @@ module.exports = {
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
+        name: `ion-cheat-sheet`,
+        short_name: `ioncss`,
         start_url: `/`,
         background_color: `#663399`,
         theme_color: `#663399`,
@@ -30,5 +30,6 @@ module.exports = {
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
+    `gatsby-plugin-netlify`
   ],
 }

gatsby-node.js

@@ -1,7 +1,73 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
+const cheerio = require('cheerio');
+const cloudscraper = require('cloudscraper').defaults({ resolveWithFullResponse: true });
 
-// You can delete this file if you're not using it
+const mainDocsURL = 'https://ionicframework.com';
+const downloadedContent = [];
+
+const getLinksList = (responseBody) => {
+  const $ = cheerio.load(responseBody);
+  const linksSet = new Set();
+
+  $('ul li a').each(function() {
+    linksSet.add($(this).attr('href'));
+  });
+
+  if (linksSet.size < 1) throw new Error('No links found');
+
+  return Array.from(linksSet).filter(str => str.charAt(0) === '/');
+}
+
+const getCSSVars = (responseBody) => {
+  const $ = cheerio.load(responseBody);
+  const cssVars = [];
+
+  $('#css-custom-properties + table > tbody > tr').each(function () {
+    cssVars.push({
+      cssVar: $(this).children(':first-child').text().trim(),
+      cssDesc: $(this).children(':nth-child(2)').text().trim()
+    });
+  });
+
+  return cssVars;
+}
+
+const getPageContent = (link) => {
+  return cloudscraper.get(mainDocsURL + link)
+    .then(response => {
+      const $ = cheerio.load(response.body);
+      downloadedContent.push({
+        title: $('h1').text().trim(),
+        url: mainDocsURL + link,
+        cssVars: getCSSVars(response.body)
+      });
+    });
+}
+
+exports.onPreBootstrap = () => {
+  return cloudscraper.get(mainDocsURL + '/docs/api')
+    .then(response => {
+
+      const linksList = getLinksList(response.body);
+      const promises = linksList.map(link => getPageContent(link));
+
+      return Promise.all(promises);
+    });
+}
+
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+  deletePage(page);
+
+  const isEmpty = downloadedContent.filter(data => data.cssVars.length > 0);
+  if (isEmpty.length < 1) throw new Error('No CSS variables to be displayed');
+
+  const dateNow = new Date();
+  createPage({
+    ...page,
+    context: {
+      ...page.context,
+      downloadedContent: downloadedContent.sort((a, b) => a.title.localeCompare(b.title)),
+      buildDate: dateNow.getDate() + '/' + (dateNow.getMonth()+1) + '/' + dateNow.getFullYear()
+    }
+  });
+}