Added cookie consent

_config.yml

@@ -101,6 +101,7 @@ analytics:
     tracking_id          :
     anonymize_ip         : # true, false (default)
 
+ganalytics: G-757Y2SND4F
 
 # Site Author
 author:
@@ -112,13 +113,13 @@ author:
   links:
     - label: "Email"
       icon: "fas fa-fw fa-envelope-square"
-      # url: "mailto:langley@codeninjas.com"
+      url: "mailto:langley@codeninjas.com"
     - label: "Website"
       icon: "fas fa-fw fa-link"
-      # url: "https://codeninjas.com"
+      url: "https://codeninjas.com"
     - label: "Twitter"
-      icon: "fab fa-fw fa-twitter-square"
-      # url: "https://twitter.com/"
+      icon: "fa fa-fw fa-twitter-square"
+      url: "https://twitter.com/"
     # - label: "Facebook"
     #   icon: "fab fa-fw fa-facebook-square"
     #   # url: "https://facebook.com/"
@@ -127,23 +128,24 @@ author:
     #   # url: "https://github.com/"
     - label: "Instagram"
       icon: "fab fa-fw fa-instagram"
-      # url: "https://instagram.com/codeninjaslangley"
+      url: "https://instagram.com/codeninjaslangley"
 
 # Site Footer
 footer:
   links:
     - label: "Twitter"
-      icon: "fab fa-fw fa-twitter-square"
+      icon: "fab fa-fw fa-twitter"
       # url:
     - label: "Facebook"
-      icon: "fab fa-fw fa-facebook-square"
+      icon: "fab fa-fw fa-facebook"
+      url: "https://www.facebook.com/CodeNinjasLangley"
 
     - label: "Code Ninjas"
-      icon: "fab fa-fw fa-globe"
+      icon: "fa fa-fw fa-globe"
       url: "https://codeninjas.com"
     
-    - label: "Code Ninjas Langley"
-      icon: "fab fa-fw fa-youtube-play"
+    - label: "YouTube Channel"
+      icon: "fab fa-fw fa-youtube"
       url: "https://www.youtube.com/channel/UC_TJJk5_k-uc40hqWIViOAQ"
       # url:
     # - label: "GitHub"
@@ -157,7 +159,7 @@ footer:
     #   # url:
     - label: "Instagram"
       icon: "fab fa-fw fa-instagram"
-      # url:
+      url: "https://www.instagram.com/codeninjaslangley"
 
 
 # Reading Files

_includes/cookie.html

@@ -0,0 +1,66 @@
+<!-- Only add all this in production, why would I analyse myself when writing the post anyway. -->
+
+<!-- Add cookie consent css & js -->
+<link rel="stylesheet"
+    type="text/css"
+    href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css"/>
+<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
+    data-cfasync="false"></script>
+
+<!-- Add google analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{site.ganalytics}}"></script>
+
+<script>
+    // Reads the value of a cookie by name or returns empty string
+    function getCookie(name) {
+        var b = document.cookie.match('(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)');
+        return b ? b.pop() : '';
+    }
+
+    // Actually starting analytics up
+    function addAnalytics() {
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+
+        gtag('js', new Date());
+        gtag('config', '{{site.ganalytics}}');
+    }
+
+    // Waiting for the load event
+    window.addEventListener("load", function () {
+        // Reading "cookieconsent_status" cookie
+        const cookieConsent = getCookie('cookieconsent_status');
+
+        // Start analytics if user consented or did not deny
+        if (cookieConsent === 'allow' || cookieConsent === '') {
+            addAnalytics();
+        }
+
+        // Initialise cookie consent banner
+        window.cookieconsent.initialise({
+            "palette": {
+                "popup": {
+                    "background": "#efefef",
+                    "text": "#404040"
+                },
+                "button": {
+                    "background": "#8ec760",
+                    "text": "#ffffff"
+                }
+            },
+            "type": "opt-out",
+            "content": {
+                "allow": "Approve",
+                "dismiss": "Approve",
+                "deny": "Reject"
+            },
+            // Reload the page on user choice to make sure cookie is set
+            onStatusChange: function (status, chosenBefore) {
+                location.reload();
+            }
+        })
+    });
+</script>

_layouts/default.html

@@ -36,6 +36,6 @@
     </div>
 
     {% include scripts.html %}
-
+    {% include cookie.html %}
   </body>
 </html>