Add Mixpanel anaylitics tracking

_config.yml

@@ -10,6 +10,7 @@ keywords:
 author: james Peret
 language: en
 timezone: ''
+mixpanel_token: f6a10e1546e61c9f46a4e945ed38318f
 
 # URL
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

readme.md

@@ -34,9 +34,13 @@ Based on [Hexo](http://hexo.io) for building the static website.
   
   - [x] Move video resizing script outside of page body
   
-  - [ ] **Responsive fixes**
+  - [x] **Responsive fixes**
   
   - [ ] **Mix panel tracking**
+  
+  - [ ] **Favicon**
+  
+  - [ ] Lower card height in mobile
 
 - [ ] System Tasks
   
@@ -136,7 +140,7 @@ Based on [Hexo](http://hexo.io) for building the static website.
   
   - [x] Fix Vinheta Lav video embed
   
-  - [ ] Add project Undead Earth
+  - [x] Add project Undead Earth
   
   - [x] Fix project CUB
 

source/about/index.md

@@ -1,5 +1,5 @@
 ---
-title: About
+title: About James Peret 
 date: 2020-06-10 13:07:56
 layout: about
 ---

source/blog/index.md

@@ -1,5 +1,5 @@
 ---
-title: blog
+title: J1X Blog
 date: 2020-06-03 14:11:40
 layout: blog
 ---

source/projects/index.md

@@ -1,5 +1,5 @@
 ---
-title: projects
+title: Projects
 date: 2020-06-03 14:12:39
 layout: projects
 ---

themes/james-theme/layout/_partial/analytics.ejs

@@ -0,0 +1,7 @@
+<% var title = "" %>
+<% if(page.canonical_path == 'index.html') { title = "Landing Page" %>
+<% } else { title = page.title } %>
+
+<script>
+  mixpanel.track("<%- title %>");
+</script>

themes/james-theme/layout/_partial/head.ejs

@@ -55,4 +55,10 @@
   <link rel="icon" type="image/png" href="http://jamesperet.com/favicon-196x196.png" sizes="196x196">
   <%- css('css/style') %>
 
+  <script type="text/javascript">(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+"=([^&]*)")))?m[1]:null};f&&d(f,"state")&&(j=JSON.parse(decodeURIComponent(d(f,"state"))),"mpeditor"===j.action&&(b.sessionStorage.setItem("_mpcehash",f),history.replaceState(j.desiredHash||"",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(".");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,
+0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
+for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
+MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
+mixpanel.init("<%- config.mixpanel_token %>");</script>
+
 </head>

themes/james-theme/layout/_partial/project-dropdown.ejs

@@ -6,12 +6,29 @@
             </button>
             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                 <% link.links.forEach(sublink => { %>
-                    <a class="dropdown-item <%- link.disabled %>" href="<%= get_s3_link(sublink, project) %>"><%= sublink.name %></a>      
+                    <% if(has_s3_link(sublink, project)) { %>
+                        <a class="dropdown-item <%- link.disabled %>" 
+                            href="<%= get_s3_link(sublink, project) %>"
+                            v-on:click="mixpanelTrack('Download Link', {'file': '<%= get_s3_link(sublink, project) %>', 'project': '<%= project.title %>'})"
+                            target="_blank" rel="noopener noreferrer">
+                            <%= sublink.name %>
+                        </a>      
+                    <% } else { %>
+                        <a class="dropdown-item <%- link.disabled %>" 
+                            href="<%= sublink.url %>"
+                            v-on:click="mixpanelTrack('External Link', {'url': '<%= sublink.url %>', 'project': '<%= project.title %>'})"
+                            target="_blank" rel="noopener noreferrer">
+                            <%= sublink.name %>
+                        </a>      
+                    <% } %>
                 <% }); %>
             </div>
         </div> 
     <% } else { %>
-        <a role="button" class="btn btn-outline-secondary <%- link.disabled %>" href="<%- link.url %>">
+        <a role="button" class="btn btn-outline-secondary <%- link.disabled %>" 
+            href="<%- link.url %>"
+            v-on:click="mixpanelTrack('External Link', {'url': '<%= link.url %>', 'project': '<%= project.title %>'})"
+            target="_blank" rel="noopener noreferrer">
             <%= link.name %>
         </a>
     <% } %>

themes/james-theme/layout/_partial/social-icons.ejs

@@ -1,100 +1,139 @@
 <% if(icon == 'facebook') { %>
-    <a href="<%= link %>" title="Facebook" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Facebook" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Facebook'})" 
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-facebook-f"></i>
     </a>
 <% } %>
 <% if(icon == 'youtube') { %>
-    <a href="<%= link %>" title="Youtube" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Youtube" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'YouTube'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-youtube"></i>
     </a>
 <% } %>
 <% if(icon == 'linkedin') { %>
-    <a href="<%= link %>" title="Linkedin" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Linkedin" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Linkedin'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-linkedin"></i>
     </a>
 <% } %>
 <% if(icon == 'vimeo') { %>
-    <a href="<%= link %>" title="Vimeo" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Vimeo" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Vimeo'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-vimeo"></i>
     </a>
 <% } %>
 <% if(icon == 'github') { %>
-    <a href="<%= link %>" title="Github" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Github" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Github'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-github"></i>
     </a>
 <% } %>
 <% if(icon == 'twitter') { %>
-    <a href="<%= link %>" title="Twitter" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Twitter" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Twitter'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-twitter"></i>
     </a>
 <% } %>
 <% if(icon == 'lastfm') { %>
-    <a href="<%= link %>" title="Last.fm" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Last.fm" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'LastFM'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-lastfm"></i>
     </a>
 <% } %>
 <% if(icon == 'tumblr') { %>
-    <a href="<%= link %>" title="'Coisas do James' on Tumblr" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="'Coisas do James' on Tumblr" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Tumblr'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-tumblr"></i>
     </a>
 <% } %>
 <% if(icon == 'itch-io') { %>
-    <a href="<%= link %>" title="My games on Itch.io" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="My games on Itch.io" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Itch.io'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-itch-io"></i>
     </a>
 <% } %>
 <% if(icon == 'steam') { %>
-    <a href="<%= link %>" title="Gamer profile on Steam" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Gamer profile on Steam" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Steam'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-steam"></i>
     </a>
 <% } %>
-<% if(icon == 'steam') { %>
-    <a href="<%= link %>" title="James Peret's projects and posts RSS feed" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+<% if(icon == 'rss') { %>
+    <a href="<%= link %>" title="James Peret's projects and posts RSS feed" 
+        v-on:click="mixpanelTrack('RSS feed')"class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fas fa-rss"></i>
     </a>
 <% } %>
 <% if(icon == 'git') { %>
-    <a href="<%= link %>" title="Code repositories" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Code repositories" 
+        v-on:click="mixpanelTrack('Git Repositories')"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-git-alt"></i>
     </a>
 <% } %>
 <% if(icon == 'soundcloud') { %>
-    <a href="<%= link %>" title="Songs on soundcloud" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Songs on soundcloud" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Soundcloud'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-soundcloud"></i>
     </a>
 <% } %>
 <% if(icon == 'twitch.tv') { %>
-    <a href="<%= link %>" title="Twitch.tv" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Twitch.tv" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Twitch.tv'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-twitch"></i>
     </a>
 <% } %>
 <% if(icon == 'npm') { %>
-    <a href="<%= link %>" title="Node modules on NPM" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Node modules on NPM" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'NPM'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-npm"></i>
     </a>
 <% } %>
 <% if(icon == 'pinterest') { %>
-    <a href="<%= link %>" title="Pinterest" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Pinterest" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Pinterest'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-pinterest"></i>
     </a>
 <% } %>
 <% if(icon == 'unity') { %>
-    <a href="<%= link %>" title="Unity Connect" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Unity Connect" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Unity Connect'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-unity"></i>
     </a>
 <% } %>
 <% if(icon == 'angellist') { %>
-    <a href="<%= link %>" title="Angel List" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Angel List" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Angel List'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-angellist"></i>
     </a>
 <% } %>
 <% if(icon == 'codepen') { %>
-    <a href="<%= link %>" title="codepen" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="codepen" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'CodePen'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-codepen"></i>
     </a>
 <% } %>
 <% if(icon == 'behance') { %>
-    <a href="<%= link %>" title="Portolio on Behance" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+    <a href="<%= link %>" title="Portolio on Behance" 
+        v-on:click="mixpanelTrack('Social Link', {'network': 'Behance'})"
+        class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
         <i class="fab fa-behance"></i>
     </a>
 <% } %>

themes/james-theme/layout/_partial/social-links.ejs

@@ -8,12 +8,10 @@
         </div>
     </div>
     <% var i = 0 %>
-    <div class="row" style="padding-bottom: 50px">
-        <div class="col-12 text-center">
+    <div class="row justify-content-center" style="padding-bottom: 50px">
+        <div class="col-12 col-md-8  text-center">
             <% config.links.forEach(function(link) { %>
                 <%- partial('_partial/social-icons', {link: link.link, icon: link.icon}) %>
-                <% if(i == 12) { %><br><% } %>
-                <% i += 1 %>
             <% }) %>
         </div>
     </div>

themes/james-theme/layout/_partial/vue-app.ejs

@@ -95,6 +95,10 @@
                     app.contactMessageSuccess = false;
                     app.contactMessage.content = ""
                 }
+            },
+            mixpanelTrack: function(event_name, properties){
+                mixpanel.track(event_name, properties);
+                console.log(`Tracking: ${event_name}, ${JSON.stringify(properties)}`)
             }
         },
         computed: {

themes/james-theme/layout/layout.ejs

@@ -30,4 +30,6 @@
       $('[data-toggle="tooltip"]').tooltip()
     })
   </script>
+ 
+  <%- partial('_partial/analytics') %>
 </html>

themes/james-theme/scripts/s3-files.js

@@ -9,4 +9,17 @@ hexo.extend.helper.register('get_s3_link', function(link, project){
         }
     }
     return link.url;
+});
+
+hexo.extend.helper.register('has_s3_link', function(link, project){
+    if(project.files == undefined) return false;
+    for (let i = 0; i < project.files.length; i++) {
+        const file = project.files[i];
+        if(file.title == link.file){
+            if(file.s3 != undefined){
+                return true;
+            }
+        }
+    }
+    return false;
 });