Merge pull request #8 from montoulieu/v2

v2.1.0 - Added Google Analytics and updated to Next 9.4.0

README.md

@@ -3,5 +3,7 @@
 > A free Linktree alternative, built with React for Github Pages & Netlify.
 
 ## TODO:
+
 [  ] Setup linkent.config.js to host all theme, link, and config data
+
 [  ] Setup proper new-leaf branch as a clean slate for new users

components/DonateButton.js

@@ -3,7 +3,7 @@ function DonateButton() {
     <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="mb-2">
       <input type="hidden" name="cmd" value="_s-xclick" />
       <input type="hidden" name="hosted_button_id" value="VWL33SJH88RNW" />
-      <button type="submit" class="bg-green-400 hover:bg-green-600 text-white p-1 rounded-lg px-4">Buy Me A Coffee</button>
+      <button type="submit" class="bg-green-500 hover:bg-green-600 text-gray-900 font-bold uppercase p-1 rounded-lg px-4">Buy Me A Coffee</button>
       <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
     </form>
   )

components/Header.js

@@ -4,7 +4,8 @@ function Header() {
     <header className="container flex text-center mx-auto py-10">
       <div className="md:w-4/6 mx-auto">
         <img src="/profile-pic.jpg" className="h-24 rounded-full mx-auto mb-5" />
-        <h1 className="font-bold">@montoulieu</h1>
+        <h1 className="font-bold">Pieter Montoulieu</h1>
+        <p>Full Stack Engineer, Game Developer and Audio Engineer</p>
       </div>
     </header>
   );

components/LinkList.js

@@ -4,11 +4,11 @@ import links from '../json/links.json'
 function LinkList() {
   return (
     <main className="flex px-3 sm:px-0">
-      <ul class="w-full md:w-4/5 lg:w-3/6 mx-auto">
+      <ul className="w-full md:w-4/5 lg:w-3/6 mx-auto">
         {links.map(link => (
           <li className="mb-4" key={link.title}>
             <a
-              className="relative transition duration-200 font-bold bg-green-500 border-green-600 border-2 hover:bg-transparent py-4 w-100 block text-center text-gray-800 hover:text-green-400 rounded-lg pl-12 md:px-12"
+              className="relative transition duration-200 font-bold bg-green-500 border-green-500 border-2 hover:bg-transparent py-4 w-100 block text-center text-gray-800 hover:text-green-400 rounded-lg pl-12 md:px-12"
               href={link.url}
               target="_blank"
             >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "link-ent",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A lightweight Linktree alternative, built with React for Github Pages & Netlify.",
   "main": "index.js",
   "scripts": {
@@ -21,9 +21,10 @@
   },
   "homepage": "https://github.com/montoulieu/link-ent#readme",
   "dependencies": {
-    "next": "9.3.6",
+    "next": "9.4.0",
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "react-ga": "^2.7.0"
   },
   "devDependencies": {
     "autoprefixer": "9.7.6",

pages/index.js

@@ -2,8 +2,18 @@ import Header from "../components/Header";
 import LinkList from "../components/LinkList"
 import Footer from "../components/Footer";
 import Head from 'next/head'
+import { initGA, logPageView } from '../utils/analytics'
+import { useEffect } from 'react';
 
 function IndexPage() {
+  useEffect(() => {
+    if (!window.GA_INITIALIZED) {
+      initGA()
+      window.GA_INITIALIZED = true
+    }
+    logPageView()
+  }, []);
+
   return (
     <div className="flex flex-col min-h-screen">
       {/* FontAwesome CDN style tag */}

utils/analytics.js

@@ -0,0 +1,24 @@
+import ReactGA from 'react-ga'
+
+export const initGA = () => {
+  console.log('GA init')
+  ReactGA.initialize('UA-127894545-3')
+}
+
+export const logPageView = () => {
+  console.log(`Logging pageview for ${window.location.pathname}`)
+  ReactGA.set({ page: window.location.pathname })
+  ReactGA.pageview(window.location.pathname)
+}
+
+export const logEvent = (category = '', action = '') => {
+  if (category && action) {
+    ReactGA.event({ category, action })
+  }
+}
+
+export const logException = (description = '', fatal = false) => {
+  if (description) {
+    ReactGA.exception({ description, fatal })
+  }
+}