Merge pull request #21 from AmruthPillai/feature/add-documentation-link

Feature: Add Documentation Link in About Tab

docs/.vuepress/config.js

@@ -21,4 +21,12 @@ module.exports = {
     ],
     smoothScroll: true,
   },
+  plugins: [
+    [
+      '@vuepress/google-analytics',
+      {
+        ga: 'UA-161860275-1',
+      },
+    ],
+  ],
 };

docs/changelog/README.md

@@ -11,7 +11,8 @@ All notable changes to this project will be documented in this file.
 ### March 29, 2020
 
 - Add Issue Templates in GitHub for Bug Reports and Feature Requests
-- Rewriting Documentation in VuePress
+- Revised Documentation in VuePress
+- Add Google Analytics to VuePress Documentation
 - Implement "Deploy to Netlify" button, by [hwang381](https://github.com/hwang381)
 
 ### March 28, 2020

package-lock.json

@@ -3272,6 +3272,12 @@
         "lodash.debounce": "^4.0.8"
       }
     },
+    "@vuepress/plugin-google-analytics": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vuepress/plugin-google-analytics/-/plugin-google-analytics-1.4.0.tgz",
+      "integrity": "sha512-Q3jTyNovy81vlqfCQ5MewYU2K/brn0DfhAlJJnelXdbYH7XRe1IA3hZCcQQO73rzIMA/HxIsMBWevs8jTQF3QA==",
+      "dev": true
+    },
     "@vuepress/plugin-last-updated": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@vuepress/plugin-last-updated/-/plugin-last-updated-1.4.0.tgz",

package.json

@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^2.1.0",
+    "@vuepress/plugin-google-analytics": "^1.4.0",
     "autoprefixer": "^9.7.5",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
@@ -64,4 +65,4 @@
     "tailwindcss": "^1.2.0",
     "vuepress": "^1.4.0"
   }
-}
+}

public/index.html

@@ -6,6 +6,7 @@
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport"
     content="width=device-width, initial-scale=.5, maximum-scale=5.0, minimum-scale=.25, user-scalable=yes" />
+  <link rel="canonical" href="https://rxresu.me/" />
   <meta name="google-site-verification" content="tF42LXDm9IVlubpb9blnct55r0usS2Z9vm-smbPnxNk" />
   <meta name="theme-color" content="#546e7a" />
   <meta name="description"
@@ -19,7 +20,7 @@
   <meta property="og:description"
     content="A one-of-a-kind resume builder that's not out to get your data. Completely secure, customizable, portable, open-source and free forever. Try it out today!">
   <meta property="og:image" content="https://i.imgur.com/6gDAIu0.png">
-  <meta property="og:url" content="https://rx-resume.web.app/">
+  <meta property="og:url" content="https://rxresu.me/">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@amruthpillai">
 

src/components/RightSidebar/tabs/About.js

@@ -3,6 +3,30 @@ import React from 'react';
 const AboutTab = () => {
   return (
     <div>
+      <div className="shadow text-center p-5">
+        <h6 className="font-bold text-sm mb-2">Documentation</h6>
+
+        <div className="text-sm">
+          Want to know more about the app? Wouldn&apos;t it be nice if there was a guide to setting
+          it up on your local machine? Need information on how to contribute to the project? Look no
+          further, there&apos;s a comprehensive documentation made just for you.
+        </div>
+
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://docs.rxresu.me/"
+          className="flex justify-center items-center mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
+        >
+          <div className="flex justify-center items-center">
+            <i className="material-icons mr-2 font-bold text-base">description</i>
+            <span className="text-sm">Documentation</span>
+          </div>
+        </a>
+      </div>
+
+      <hr className="my-5" />
+
       <div className="shadow text-center p-5">
         <h6 className="font-bold text-sm mb-2">Bug? Feature Request?</h6>
 
@@ -17,7 +41,7 @@ const AboutTab = () => {
             target="_blank"
             rel="noopener noreferrer"
             href="https://github.com/AmruthPillai/Reactive-Resume/issues/new"
-            className="flex justify-center mt-4 bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
+            className="mt-4 bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
           >
             <div className="flex justify-center items-center">
               <i className="material-icons mr-2 font-bold text-base">bug_report</i>
@@ -29,7 +53,7 @@ const AboutTab = () => {
             target="_blank"
             rel="noopener noreferrer"
             href="mailto:im.amruth@gmail.com?subject=Feature Request/Reporting a Bug in Reactive Resume: "
-            className="flex justify-center mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
+            className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
           >
             <div className="flex justify-center items-center">
               <i className="material-icons mr-2 font-bold text-base">email</i>
@@ -53,7 +77,7 @@ const AboutTab = () => {
           target="_blank"
           rel="noopener noreferrer"
           href="https://github.com/AmruthPillai/Reactive-Resume"
-          className="flex justify-center mt-4 bg-green-600 hover:bg-green-700 text-white text-sm font-medium py-2 px-5 rounded"
+          className="flex justify-center items-center mt-4 bg-green-600 hover:bg-green-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex justify-center items-center">
             <i className="material-icons mr-2 font-bold text-base">code</i>
@@ -77,7 +101,7 @@ const AboutTab = () => {
           target="_blank"
           rel="noopener noreferrer"
           href="https://github.com/AmruthPillai/Reactive-Resume/blob/master/LICENSE"
-          className="flex justify-center mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
+          className="flex justify-center items-center mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex justify-center items-center">
             <i className="material-icons mr-2 font-bold text-base">policy</i>