feat: Integrate OneSignal into the system

gatsby-config.js

@@ -42,22 +42,20 @@ module.exports = {
         }`,
         feeds: [
           {
-            serialize: ({ query: { site, allContentfulMarkdown } }) =>
-              // GraphQL query the posts from allContentfulMarkdown
-              allContentfulMarkdown.edges.map((edge) => {
-                const url = `${site.siteMetadata.siteUrl}/${dayjs(edge.node.createdDate).format('YYYY/MM/DD')}/${edge.node.url}`;
+            serialize: ({ query: { site, allContentfulMarkdown } }) => allContentfulMarkdown.edges.map((edge) => {
+              const url = `${site.siteMetadata.siteUrl}/${dayjs(edge.node.createdDate).format('YYYY/MM/DD')}/${edge.node.url}`;
 
-                const md = new Remarkable({});
-                const description = md.render(edge.node.content);
+              const md = new Remarkable({});
+              const description = md.render(edge.node.content);
 
-                return {
-                  title: edge.node.title,
-                  description,
-                  date: dayjs(edge.node.createdDate).format('MMMM DD, YYYY, h:mm A'),
-                  url,
-                  guid: url,
-                };
-              }),
+              return {
+                title: edge.node.title,
+                description,
+                date: dayjs(edge.node.createdDate).format('MMMM DD, YYYY, h:mm A'),
+                url,
+                guid: url,
+              };
+            }),
             query: `
               {
                   allContentfulMarkdown(limit: 10,sort: {fields: [createdDate], order: DESC}) {
@@ -99,6 +97,8 @@ module.exports = {
             type: 'image/png',
           },
         ],
+        gcm_sender_id: '482941778795',
+        gcm_sender_id_comment: 'Do not change the GCM Sender ID',
       },
     },
     'gatsby-plugin-offline', // put this after gatsby-plugin-manifest

src/components/Layout/Head.js

@@ -22,8 +22,8 @@ const Head = () => (
     <link
       rel="shortcut icon"
       href={
-        config.meta.favicon ||
-        'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png'
+        config.meta.favicon
+        || 'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png'
       }
     />
     <link
@@ -44,6 +44,7 @@ const Head = () => (
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css"
     />
+    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async="" />
   </Helmet>
 );
 

src/pages/stats.js

@@ -18,28 +18,38 @@ class StatsPage extends Component {
   componentDidMount() {
     const observer = lozad();
     observer.observe();
+
+    const OneSignal = window ? window.OneSignal : [];
+
+    OneSignal.push(() => {
+      OneSignal.init({
+        appId: 'b40b0217-b229-44cc-adb3-093d00acfaa2',
+      });
+    });
   }
 
   render() {
+    const { image, title, description } = this.state;
+
     return (
       <div className="container">
         <div className="row">
           <div className="col">
             <img
-              data-src={this.state.image}
+              data-src={image}
               className="lozad"
-              alt={this.state.title}
+              alt={title}
               style={{ maxHeight: '40rem' }}
             />
           </div>
         </div>
 
         <SEO
           url="/stats/"
-          title={this.state.title}
-          description={this.state.description}
-          image={this.state.image}
-          siteTitleAlt={this.state.title}
+          title={title}
+          description={description}
+          image={image}
+          siteTitleAlt={title}
           isPost={false}
         />
       </div>

static/OneSignalSDKUpdaterWorker.js

@@ -0,0 +1 @@
+importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

static/OneSignalSDKWorker.js

@@ -0,0 +1 @@
+importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');