Merge pull request #259 from devsonket/release-3.0.0

Version Updated to Release 3.0.0

Author: zonayedpca

.gitignore

@@ -53,6 +53,7 @@ typings/
 
 # dotenv environment variables file
 .env
+.env.*
 
 # gatsby files
 .cache/

.prettierignore

@@ -0,0 +1,5 @@
+.cache
+package.json
+package-lock.json
+public
+data

.prettierrc

@@ -3,5 +3,6 @@
   "semi": false,
   "singleQuote": false,
   "tabWidth": 2,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "editor.formatOnSave": true
 }

gatsby-config.js

@@ -25,7 +25,7 @@ module.exports = {
         background_color: `#663399`,
         theme_color: `#333`,
         display: `minimal-ui`,
-        icon: `src/images/devsonket-icon.png`,
+        icon: `src/assets/images/devsonket-icon.png`,
       },
     },
     {

gatsby-node.js

@@ -1,9 +1,19 @@
 const path = require("path")
+const axios = require("axios")
+
+const contributorMap = require("./scripts/contributorMap")
+
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
 
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
-  const postTemplate = path.resolve("src/templates/cheatsheet.js")
-  const printTemplate = path.resolve("src/templates/printsheet.js")
+  const postTemplate = path.resolve("src/templates/CheatSheet.js")
+  const printTemplate = path.resolve("src/templates/PrintSheet.js")
+
+  let contributors = {}
+
   return new Promise((resolve, reject) => {
     graphql(`
       query {
@@ -22,10 +32,23 @@ exports.createPages = ({ actions, graphql }) => {
           }
         }
       }
-    `).then(res => {
+    `).then(async res => {
       if (res.errors) {
         return Promise.reject(res.errors)
       }
+      const edges = res.data.allFile.edges
+      for (let i = 0; i < edges.length; i++) {
+        const filename = edges[i].node.name
+        const { data: contributorsRaw } = await axios.get(
+          `https://api.github.com/repos/devsonket/devsonket.github.io/commits?path=data/${filename}.json`,
+          {
+            headers: {
+              Authorization: `Bearer ${process.env.GATSBY_GITHUB_TOKEN}`,
+            },
+          }
+        )
+        contributors[filename] = contributorMap(contributorsRaw)
+      }
       res.data.allFile.edges.map(({ node }) => {
         const filename = node.name
         const data = require(`${__dirname}/data/${filename}`)
@@ -36,6 +59,7 @@ exports.createPages = ({ actions, graphql }) => {
             id: `${data.id}`,
             data,
             filename,
+            contributors: contributors[filename],
           },
         })
         createPage({
@@ -45,6 +69,7 @@ exports.createPages = ({ actions, graphql }) => {
             id: `${data.id}`,
             data,
             filename,
+            contributors: contributors[filename],
           },
         })
         resolve()

package.json

@@ -18,10 +18,13 @@
     "gatsby-source-filesystem": "^2.0.37",
     "gatsby-transformer-sharp": "^2.1.20",
     "prop-types": "^15.7.2",
+    "puppeteer": "^2.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-ga": "^2.7.0",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "react-icons": "^3.9.0",
+    "react-masonry-css": "^1.0.14"
   },
   "devDependencies": {
     "husky": "^2.4.1",
@@ -37,7 +40,8 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "gatsby build",
+    "build": "npm run thumbnail && gatsby build",
+    "thumbnail": "cd scripts && node thumbnail.js",
     "develop": "gatsby develop",
     "format": "prettier --write src/**/*.{js,jsx}",
     "start": "npm run develop",

scripts/contributorMap.js

@@ -0,0 +1,20 @@
+module.exports = data => {
+  const charMap = {}
+  data.forEach(oneData => {
+    if (oneData.author) {
+      const { login } = oneData.author
+      if (!charMap[login]) {
+        charMap[login] = {
+          count: 1,
+          login: oneData.author.login,
+          name: oneData.commit.author.name,
+          avatar_url: oneData.author.avatar_url,
+          html_url: oneData.author.html_url,
+        }
+      } else {
+        charMap[login].count++
+      }
+    }
+  })
+  return charMap
+}

scripts/isItDark.js

@@ -0,0 +1,33 @@
+module.exports = color => {
+  // Variables for red, green, blue values
+  var r, g, b, hsp
+
+  // Check the format of the color, HEX or RGB?
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(
+      /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/
+    )
+
+    r = color[1]
+    g = color[2]
+    b = color[3]
+  } else {
+    // If RGB --> Convert it to HEX: http://gist.github.com/983661
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, "$&$&"))
+
+    r = color >> 16
+    g = (color >> 8) & 255
+    b = color & 255
+  }
+
+  // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+  hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 127.5) {
+    return false
+  } else {
+    return true
+  }
+}

scripts/thumbnail.js

@@ -0,0 +1,116 @@
+const fs = require("fs")
+const puppeteer = require("puppeteer")
+
+const isItDark = require("./isItDark")
+
+const filesRaw = []
+const workingFolder = "../data/"
+const files = fs.readdirSync(workingFolder)
+
+files.forEach(file => {
+  if (file.endsWith(".json")) {
+    const data = require(`../data/${file}`)
+    filesRaw.push({ id: data.id, title: data.title, color: data.colorPref })
+  }
+})
+
+const main = async () => {
+  const browser = await puppeteer.launch()
+
+  browser.on("disconnected", () => {
+    return 0
+  })
+
+  const page = await browser.newPage()
+
+  await page.setViewport({
+    width: 1200,
+    height: 630,
+    deviceScaleFactor: 1,
+  })
+
+  for (let i = 0; i < filesRaw.length; i++) {
+    const imgHTML = `
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+          <title>HTML to Generate Thumbnail</title>
+          <style>
+            @font-face {
+              font-family: "Hind Siliguri";
+              src: url("./src/assets/fonts/HindSiliguri-Light.woff2") format("woff2"),
+                url("./src/assets/fonts/HindSiliguri-Light.woff") format("woff");
+              font-weight: 300;
+              font-style: normal;
+            }
+
+            @font-face {
+              font-family: "Hind Siliguri";
+              src: url("./src/assets/fonts/HindSiliguri-Regular.woff2") format("woff2"),
+                url("./src/assets/fonts/HindSiliguri-Regular.woff") format("woff");
+              font-weight: 400;
+              font-style: normal;
+            }
+
+            @font-face {
+              font-family: "Hind Siliguri";
+              src: url("./src/assets/fonts/HindSiliguri-Bold.woff2") format("woff2"),
+                url("./src/assets/fonts/HindSiliguri-Bold.woff") format("woff");
+              font-weight: 800;
+              font-style: normal;
+            }
+
+            * {
+              margin: 0;
+              padding: 0;
+              box-sizing: border-box;
+            }
+
+            body {
+              font-family: "Hind Siliguri";
+              background: ${filesRaw[i].color};
+              color: ${isItDark(filesRaw[i].color) ? "#fffeff" : "#201f22"}
+            }
+          </style>
+        </head>
+        <body>
+          <div
+            style="height: 100vh; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly"
+          >
+            <div style="font-size: 36px; font-weight: bold;">
+              <span
+                style="display:inline-block; background-color: ${
+                  isItDark(filesRaw[i].color) ? "#fffeff" : "#201f22"
+                }; color: ${
+      filesRaw[i].color
+    }; padding: 0 8px; border-radius: 4px; margin-right: 5px;"
+                >ডেভ</span
+              >সংকেত
+            </div>
+            <div style="text-align: center; padding: 0 120px;">
+              <h2 style="font-size: 72px; line-height: 78px;">${
+                filesRaw[i].title
+              }</h2>
+              <p style="font-size: 22px;">বাংলা ডেভেলপার চিটশিট</p>
+            </div>
+            <pre style="font-family: consolas; font-weight: bold; font-size: 26px;">
+      https://devsonket.com/${filesRaw[i].id}</pre
+            >
+          </div>
+        </body>
+      </html>
+    `
+    await page.setContent(imgHTML)
+    await page.screenshot({
+      type: "jpeg",
+      path: `../static/static/thumbnail/${filesRaw[i].id}.jpg`,
+      quality: 85,
+    })
+  }
+  await browser.close()
+}
+
+main()