added view counter

gatsby-browser.js

@@ -1,3 +1,4 @@
+import 'firebase/database';
 import React from "react"
 import './src/styles/global.scss'
 import './src/components/Header/Header.scss'

gatsby-config.js

@@ -1,3 +1,5 @@
+require('dotenv').config()
+
 module.exports = {
   siteMetadata: {
     title: 'devthread.ru',
@@ -70,6 +72,20 @@ module.exports = {
         display: `standalone`,
       },
     },
+    {
+      resolve: 'gatsby-plugin-firebase',
+      options: {
+        credentials: {
+          apiKey: process.env.API_KEY,
+          authDomain: process.env.AUTH_DOMAIN,
+          databaseURL: process.env.DATABASE_URL,
+          projectId: process.env.PROJECT_ID,
+          storageBucket: process.env.STORAGE_BUCKET,
+          messagingSenderId: process.env.MESSAGING_SENDER_ID,
+          appId: process.env.APP_ID,
+        },
+      },
+    },
     "gatsby-plugin-sharp",
 		"gatsby-transformer-sharp",
     {

gatsby-ssr.js

@@ -0,0 +1 @@
+import 'firebase/database';

package-lock.json

@@ -1219,6 +1219,251 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
+    "@firebase/analytics": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.3.9.tgz",
+      "integrity": "sha512-l4dNskm8uQ+UqO6Lw+fuyO1enZBXUV6xNMxeVABEnVrp3wOP90KKb/ZwYgleAxF1It52lorcTtkA1YFpv3iEIQ==",
+      "requires": {
+        "@firebase/analytics-types": "0.3.1",
+        "@firebase/component": "0.1.16",
+        "@firebase/installations": "0.4.14",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "0.2.50",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/analytics-types": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.3.1.tgz",
+      "integrity": "sha512-63vVJ5NIBh/JF8l9LuPrQYSzFimk7zYHySQB4Dk9rVdJ8kV/vGQoVTvRu1UW05sEc2Ug5PqtEChtTHU+9hvPcA=="
+    },
+    "@firebase/app": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.6.8.tgz",
+      "integrity": "sha512-Tm7Pi6Dtpx4FFKcpm0jcrZ/qI9oREBxmP3pWlw1jgDW4syRJHmN9/5DYvfFk6FAhj3FrY8E/6F+ngWJfqONotQ==",
+      "requires": {
+        "@firebase/app-types": "0.6.1",
+        "@firebase/component": "0.1.16",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "0.2.50",
+        "dom-storage": "2.1.0",
+        "tslib": "^1.11.1",
+        "xmlhttprequest": "1.8.0"
+      }
+    },
+    "@firebase/app-types": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.6.1.tgz",
+      "integrity": "sha512-L/ZnJRAq7F++utfuoTKX4CLBG5YR7tFO3PLzG1/oXXKEezJ0kRL3CMRoueBEmTCzVb/6SIs2Qlaw++uDgi5Xyg=="
+    },
+    "@firebase/auth": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.14.8.tgz",
+      "integrity": "sha512-LufoWcFpYAoCUkFDKSELH69xI8NdOjNTUFKvWfADZN7ysr4dpPdDs2ZYnH67FqcMb0tX+Jdx6vWrF6VZ37AAJQ==",
+      "requires": {
+        "@firebase/auth-types": "0.10.1"
+      }
+    },
+    "@firebase/auth-interop-types": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.5.tgz",
+      "integrity": "sha512-88h74TMQ6wXChPA6h9Q3E1Jg6TkTHep2+k63OWg3s0ozyGVMeY+TTOti7PFPzq5RhszQPQOoCi59es4MaRvgCw=="
+    },
+    "@firebase/auth-types": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.10.1.tgz",
+      "integrity": "sha512-/+gBHb1O9x/YlG7inXfxff/6X3BPZt4zgBv4kql6HEmdzNQCodIRlEYnI+/da+lN+dha7PjaFH7C7ewMmfV7rw=="
+    },
+    "@firebase/component": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.1.16.tgz",
+      "integrity": "sha512-FvffvFN0LWgv1H/FIyruTECOL69Dhy+JfwoTq+mV39V8Mz9lNpo41etonL5AOr7KmXxYJVbNwkx0L9Ei88i7JA==",
+      "requires": {
+        "@firebase/util": "0.2.50",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/database": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.6.7.tgz",
+      "integrity": "sha512-vm0ch2zNSoHfXWnDG6WVjf0p/BdXOMBL1lAfkGu3DYH/Rkl4p97x57w0WNOURNfL4GY2LIqScSYKCidV7jqTog==",
+      "requires": {
+        "@firebase/auth-interop-types": "0.1.5",
+        "@firebase/component": "0.1.16",
+        "@firebase/database-types": "0.5.1",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "0.2.50",
+        "faye-websocket": "0.11.3",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/database-types": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.5.1.tgz",
+      "integrity": "sha512-onQxom1ZBYBJ648w/VNRzUewovEDAH7lvnrrpCd69ukkyrMk6rGEO/PQ9BcNEbhlNtukpsqRS0oNOFlHs0FaSA==",
+      "requires": {
+        "@firebase/app-types": "0.6.1"
+      }
+    },
+    "@firebase/firestore": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.16.0.tgz",
+      "integrity": "sha512-RsgGIP9e6HW5soEHIuo0CGVFpeTKe0hqjrgOLk92W0mjL6irzBlqmd5HcGMY4F5QiZryc2vMT1/3LvRhkUyf8g==",
+      "requires": {
+        "@firebase/component": "0.1.16",
+        "@firebase/firestore-types": "1.12.0",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "0.2.50",
+        "@firebase/webchannel-wrapper": "0.2.41",
+        "@grpc/grpc-js": "^1.0.0",
+        "@grpc/proto-loader": "^0.5.0",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/firestore-types": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-1.12.0.tgz",
+      "integrity": "sha512-OqNxVb63wPZdUc7YnpacAW1WNIMSKERSewCRi+unCQ0YI0KNfrDSypyGCyel+S3GdOtKMk9KnvDknaGbnaFX4g=="
+    },
+    "@firebase/functions": {
+      "version": "0.4.48",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.4.48.tgz",
+      "integrity": "sha512-BwI/JzO/f/nquKG1IS3VqmwMaKEhvM58/08vTnp46krHBsOYqsdD9T2amz+HXGT9fe2HhDsUhgFE8D00S0vqbg==",
+      "requires": {
+        "@firebase/component": "0.1.16",
+        "@firebase/functions-types": "0.3.17",
+        "@firebase/messaging-types": "0.4.5",
+        "isomorphic-fetch": "2.2.1",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/functions-types": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.3.17.tgz",
+      "integrity": "sha512-DGR4i3VI55KnYk4IxrIw7+VG7Q3gA65azHnZxo98Il8IvYLr2UTBlSh72dTLlDf25NW51HqvJgYJDKvSaAeyHQ=="
+    },
+    "@firebase/installations": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.4.14.tgz",
+      "integrity": "sha512-hQPsaU7wdTq3CFMtFQwZy6LgdXZAkXoUToV4O+ekPbjM65QzaGVogJVU8O2H6ADXoq37SarcUXKe86pcUWdFLA==",
+      "requires": {
+        "@firebase/component": "0.1.16",
+        "@firebase/installations-types": "0.3.4",
+        "@firebase/util": "0.2.50",
+        "idb": "3.0.2",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/installations-types": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.3.4.tgz",
+      "integrity": "sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q=="
+    },
+    "@firebase/logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.2.6.tgz",
+      "integrity": "sha512-KIxcUvW/cRGWlzK9Vd2KB864HlUnCfdTH0taHE0sXW5Xl7+W68suaeau1oKNEqmc3l45azkd4NzXTCWZRZdXrw=="
+    },
+    "@firebase/messaging": {
+      "version": "0.6.20",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.6.20.tgz",
+      "integrity": "sha512-1MqyljXnbFBeHYhL6QInVM9aO5MW820yhNmOIVxk58wNXq4tOQLzqnKuvlgZ+ttgqlDzrIYiVf3EOHh5DptttQ==",
+      "requires": {
+        "@firebase/component": "0.1.16",
+        "@firebase/installations": "0.4.14",
+        "@firebase/messaging-types": "0.4.5",
+        "@firebase/util": "0.2.50",
+        "idb": "3.0.2",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/messaging-types": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.4.5.tgz",
+      "integrity": "sha512-sux4fgqr/0KyIxqzHlatI04Ajs5rc3WM+WmtCpxrKP1E5Bke8xu/0M+2oy4lK/sQ7nov9z15n3iltAHCgTRU3Q=="
+    },
+    "@firebase/performance": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.3.9.tgz",
+      "integrity": "sha512-Fj22DZXRhhKv1OSUzDxX7AqpJUcDld6tzXK1yxOC8e3v1DFPQMQdM9FoG1m1b/Vrqa6pCCqnqG6gh6VPnEcAzQ==",
+      "requires": {
+        "@firebase/component": "0.1.16",
+        "@firebase/installations": "0.4.14",
+        "@firebase/logger": "0.2.6",
+        "@firebase/performance-types": "0.0.13",
+        "@firebase/util": "0.2.50",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/performance-types": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.0.13.tgz",
+      "integrity": "sha512-6fZfIGjQpwo9S5OzMpPyqgYAUZcFzZxHFqOyNtorDIgNXq33nlldTL/vtaUZA8iT9TT5cJlCrF/jthKU7X21EA=="
+    },
+    "@firebase/polyfill": {
+      "version": "0.3.36",
+      "resolved": "https://registry.npmjs.org/@firebase/polyfill/-/polyfill-0.3.36.tgz",
+      "integrity": "sha512-zMM9oSJgY6cT2jx3Ce9LYqb0eIpDE52meIzd/oe/y70F+v9u1LDqk5kUF5mf16zovGBWMNFmgzlsh6Wj0OsFtg==",
+      "requires": {
+        "core-js": "3.6.5",
+        "promise-polyfill": "8.1.3",
+        "whatwg-fetch": "2.0.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+          "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+        }
+      }
+    },
+    "@firebase/remote-config": {
+      "version": "0.1.25",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.1.25.tgz",
+      "integrity": "sha512-8YWefBhy77HMbWXWdbenalx+IDY/XkS+iURQ9qRYvSIFYx6RL04DzlakZNOY9CQAcxTA+cTSt4NNlhjopBjf2Q==",
+      "requires": {
+        "@firebase/component": "0.1.16",
+        "@firebase/installations": "0.4.14",
+        "@firebase/logger": "0.2.6",
+        "@firebase/remote-config-types": "0.1.9",
+        "@firebase/util": "0.2.50",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/remote-config-types": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.1.9.tgz",
+      "integrity": "sha512-G96qnF3RYGbZsTRut7NBX0sxyczxt1uyCgXQuH/eAfUCngxjEGcZQnBdy6mvSdqdJh5mC31rWPO4v9/s7HwtzA=="
+    },
+    "@firebase/storage": {
+      "version": "0.3.38",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.3.38.tgz",
+      "integrity": "sha512-gWVQr5xqrU3cfhhwbAE+9iJ0XMvzbxWMvteKurn5cRNaGbmSob/O/ISOAvsQgPnk+K9zPMd2OwyzaTOl9PEMrw==",
+      "requires": {
+        "@firebase/component": "0.1.16",
+        "@firebase/storage-types": "0.3.12",
+        "@firebase/util": "0.2.50",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/storage-types": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.3.12.tgz",
+      "integrity": "sha512-DDV6Fs6aYoGw3w/zZZTkqiipxihnsvHf6znbeZYjIIHit3tr1uLJdGPDPiCTfZcTGPpg2ux6ZmvNDvVgJdHALw=="
+    },
+    "@firebase/util": {
+      "version": "0.2.50",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.50.tgz",
+      "integrity": "sha512-vFE6+Jfc25u0ViSpFxxq0q5s+XmuJ/y7CL3ud79RQe+WLFFg+j0eH1t23k0yNSG9vZNM7h3uHRIXbV97sYLAyw==",
+      "requires": {
+        "tslib": "^1.11.1"
+      }
+    },
+    "@firebase/webchannel-wrapper": {
+      "version": "0.2.41",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.41.tgz",
+      "integrity": "sha512-XcdMT5PSZHiuf7LJIhzKIe+RyYa25S3LHRRvLnZc6iFjwXkrSDJ8J/HWO6VT8d2ZTbawp3VcLEjRF/VN8glCrA=="
+    },
     "@graphql-tools/schema": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-6.0.11.tgz",
@@ -1244,6 +1489,30 @@
         "camel-case": "4.1.1"
       }
     },
+    "@grpc/grpc-js": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.1.2.tgz",
+      "integrity": "sha512-k2u86Bkm/3xrjUaSWeIyzXScBt/cC8uE7BznR0cpueQi11R33W6qfJdMrkrsmSHirp5likR55JSXUrcWG6ybHA==",
+      "requires": {
+        "semver": "^6.2.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@grpc/proto-loader": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.5.5.tgz",
+      "integrity": "sha512-WwN9jVNdHRQoOBo9FDH7qU+mgfjPc8GygPYms3M+y3fbQLfnCe/Kv/E01t7JRgnrsOHH8euvSbed3mIalXhwqQ==",
+      "requires": {
+        "lodash.camelcase": "^4.3.0",
+        "protobufjs": "^6.8.6"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2102,6 +2371,60 @@
         "schema-utils": "^2.6.5"
       }
     },
+    "@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
+    },
+    "@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
+    },
+    "@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+      "requires": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
+    },
+    "@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
+    },
+    "@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
+    },
+    "@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
+    },
+    "@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
+    },
     "@reach/router": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz",
@@ -2229,6 +2552,11 @@
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.157.tgz",
       "integrity": "sha512-Ft5BNFmv2pHDgxV5JDsndOWTRJ+56zte0ZpYLowp03tW+K+t8u8YMOzAnpuqPgzX6WO1XpDIUm7u04M8vdDiVQ=="
     },
+    "@types/long": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
+    },
     "@types/mdast": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.3.tgz",
@@ -6442,6 +6770,11 @@
         }
       }
     },
+    "dom-storage": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz",
+      "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q=="
+    },
     "dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
@@ -8179,6 +8512,27 @@
         "semver-regex": "^2.0.0"
       }
     },
+    "firebase": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-7.16.0.tgz",
+      "integrity": "sha512-fYimLYkY0SS/jv4+ZnSp5u2+QdtwsTtLwPUfmWiKQnjqas1M5mqhQr3QB7vPQuSANhC3UJZZ5KPxLbFomMJLcA==",
+      "requires": {
+        "@firebase/analytics": "0.3.9",
+        "@firebase/app": "0.6.8",
+        "@firebase/app-types": "0.6.1",
+        "@firebase/auth": "0.14.8",
+        "@firebase/database": "0.6.7",
+        "@firebase/firestore": "1.16.0",
+        "@firebase/functions": "0.4.48",
+        "@firebase/installations": "0.4.14",
+        "@firebase/messaging": "0.6.20",
+        "@firebase/performance": "0.3.9",
+        "@firebase/polyfill": "0.3.36",
+        "@firebase/remote-config": "0.1.25",
+        "@firebase/storage": "0.3.38",
+        "@firebase/util": "0.2.50"
+      }
+    },
     "flat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.0.tgz",
@@ -8717,6 +9071,11 @@
         "micromatch": "^3.1.10"
       }
     },
+    "gatsby-plugin-firebase": {
+      "version": "0.2.0-beta.4",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-firebase/-/gatsby-plugin-firebase-0.2.0-beta.4.tgz",
+      "integrity": "sha512-F1uh9T5dY38aeNvKzqj+3K655dce1QS70wuG4bhV9L3cnTJR2vitTWyIoCvRJJfPs7Xq7LgjUDmHDrEos4S3gQ=="
+    },
     "gatsby-plugin-manifest": {
       "version": "2.4.17",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.17.tgz",
@@ -10864,6 +11223,11 @@
         }
       }
     },
+    "idb": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-3.0.2.tgz",
+      "integrity": "sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw=="
+    },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@@ -12673,6 +13037,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -12838,6 +13207,11 @@
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz",
       "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA=="
     },
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
     "longest": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@@ -16127,6 +16501,11 @@
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
     },
+    "promise-polyfill": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.3.tgz",
+      "integrity": "sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g=="
+    },
     "prompts": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz",
@@ -16169,6 +16548,33 @@
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
       "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk="
     },
+    "protobufjs": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.10.0.tgz",
+      "integrity": "sha512-Hdz1+CXkrlmGDKkP6DczxysdnUyUuhM1mjeaydnBxOcjxQPbJldLZ8eGE1gX0UTsgv+0QkFfn6dioo5yt9XORw==",
+      "requires": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/long": "^4.0.1",
+        "@types/node": "^13.7.0",
+        "long": "^4.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "13.13.14",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.14.tgz",
+          "integrity": "sha512-Az3QsOt1U/K1pbCQ0TXGELTuTkPLOiFIQf3ILzbOyo0FqgV9SxRnxbxM5QlAveERZMHpZY+7u3Jz2tKyl+yg6g=="
+        }
+      }
+    },
     "protocol-buffers-schema": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz",
@@ -22017,6 +22423,11 @@
         "lodash": "^4.0.0"
       }
     },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+    },
     "xmlhttprequest-ssl": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",

package.json

@@ -18,8 +18,10 @@
     "@reach/router": "^1.3.4",
     "dotenv": "^8.2.0",
     "esm": "^3.2.25",
+    "firebase": "^7.16.0",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.12",
+    "gatsby-plugin-firebase": "^0.2.0-beta.4",
     "gatsby-plugin-manifest": "^2.4.17",
     "gatsby-plugin-netlify-cms": "^4.3.9",
     "gatsby-plugin-react-helmet": "^3.3.8",

src/components/Article/Article.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types'
 import SEO from '../SEO/SEO'
 import Img from "gatsby-image"
+import ViewCounter from '../ViewCounter/ViewCounter'
 import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import slugify from '../../helpers/slugify'
 import { Link } from 'gatsby'
@@ -25,7 +26,7 @@ const Article = ({ data: { slug, keywords, title, image, description, category,
               </div>
               <div className="article-info__views">
                 <ViewsIcon />
-                <span>4252</span>
+                <ViewCounter id={slug} />
               </div> 
             </div>
             <div className="right-info">

src/components/Offers/Popular/PopularItem.js

@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 
-import ViewsIcon from '../../../images/views-icon.svg'
-
 const PopularItem = ({ slug, title }) => {
   return (
     <div className="article-item">
@@ -11,8 +9,6 @@ const PopularItem = ({ slug, title }) => {
         <Link to={`/article/${slug}`}>{title}</Link>
       </div>
       <div className="article-item__views">
-        <ViewsIcon />
-        <span>4252</span>
       </div>
     </div>
   )

src/components/ViewCounter/ViewCounter.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import firebase from 'gatsby-plugin-firebase';
+import incrementViews from '../../lib/increment-views';
+
+const ViewCounter = ({ id }) => {
+  const [viewCount, setViewCount] = useState('');
+
+  useEffect(() => {
+    const onViews = (newViews) => {
+      setViewCount(newViews.val() === 1 ? 0 : newViews.val());
+    };
+
+    incrementViews(id);
+
+    firebase.database().ref(`/views`).child(id).on(`value`, onViews);
+
+    return () => {
+      if (firebase.database()) {
+        firebase.database().ref(`/views`).child(id).off(`value`, onViews);
+      }
+    };
+  }, [id]);
+
+  return (
+    <span>
+      {viewCount ? viewCount : `---`}
+    </span>
+  );
+};
+
+export default ViewCounter;

src/lib/increment-views.js

@@ -0,0 +1,9 @@
+import firebase from 'gatsby-plugin-firebase';
+
+const incrementViews = async id => {
+  const ref = firebase.database().ref(`/views`).child(id);
+
+  ref.transaction(currentViews => currentViews + 1)
+}
+
+export default incrementViews;