diff --git a/README.md b/README.md index eca00ab..e0a943c 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,42 @@ # nuxt-portfolio-dev -a portfolio for developers w/ a blog powered by [Notion](https://www.notion.so/) + +a portfolio for developers w/ a blog powered by [Notion](https://www.notion.so/) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/aymaneMx/nuxt-portfolio-dev) Demo: https://aymaneMx.com +**Features** -**Features** - -- :smiling_face_with_three_hearts: minimal and clean portfolio +- :smiling_face_with_three_hearts: minimal and clean portfolio - :last_quarter_moon: the dark/light mode (Auto detect the system color-mode) - :iphone: responsive (tablet & mobile friendly) - :gear: render articles from [Notion](https://www.notion.so/) :rocket: - :star: fetches your Github pinned projects with most stars - :dizzy: Eslint & Prettier configured -- :chart_with_upwards_trend: google analytics integration +- :chart_with_upwards_trend: google analytics integration - :zap: generate sitemap (visit /sitemap.xml) -- :rocket: one click deployment to netlify +- :rocket: one click deployment to netlify ### Prerequisites -1. create [Notion](https://www.notion.so/) account +1. create [Notion](https://www.notion.so/) account 2. duplicate [this template](https://aymanemx.notion.site/aymanemx/ceef6f1a895a46b2a0e4a87b41405547?v=8427738adccd4b2a8c28156be3757156) by clicking on "duplicate" button located at the top of the page. 3. make your notion table public (by clicking on "share" button located at the top of the page) 4. grab the table id from the table link: -eg: + eg: + ``` link: https://aymanemx.notion.site/aymanemx/ceef6f1a895a46b2a0e4a87b41405547?v=8427738adccd4b2a8c28156be3757156 id: ceef6f1a895a46b2a0e4a87b41405547 ``` + 5. do the same thing for about page id (we gonna use it as an env variable NOTION_ABOUT_PAGE_ID) -5. get your Google analytics id (optional) -6. now you can click to the deploy button and fill the netlify form +6. get your Google analytics id (optional) +7. now you can click to the deploy button and fill the netlify form [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/aymaneMx/nuxt-portfolio-dev) - - ### Build Setup create a `.env` file with the following variables @@ -66,17 +66,16 @@ $ yarn install $ yarn dev ``` - ### Sites using this template 🌎 + List of portfolios that are using this template. - [AymaneMx's Blog](https://aymanemx.com) -if you're using it too, we'd be happy to [feature](https://github.com/aymaneMx/nuxt-portfolio-dev/issues/26) you here +if you're using it too, we'd be happy to [feature](https://github.com/aymaneMx/nuxt-portfolio-dev/issues/26) you here -### Credits +### Credits - :moon: The dark mode : [eggsy](https://github.com/eggsy/website) - :art: the minimal design : [Monotone](https://github.com/dev-ggaurav/Monotone) - :star: The open source section : [mouadziani](https://github.com/MouadZIANI/mouadziani.com) and [smakosh](https://github.com/smakosh/smakosh.com) - diff --git a/components/Icon/Angular.vue b/components/Icon/Angular.vue new file mode 100644 index 0000000..f762fe1 --- /dev/null +++ b/components/Icon/Angular.vue @@ -0,0 +1,3 @@ + diff --git a/components/Icon/Gcp.vue b/components/Icon/Gcp.vue new file mode 100644 index 0000000..50fc0a0 --- /dev/null +++ b/components/Icon/Gcp.vue @@ -0,0 +1,3 @@ + diff --git a/components/Icon/Node.vue b/components/Icon/Node.vue new file mode 100644 index 0000000..4929d82 --- /dev/null +++ b/components/Icon/Node.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/components/Icon/React.vue b/components/Icon/React.vue new file mode 100644 index 0000000..b45bc58 --- /dev/null +++ b/components/Icon/React.vue @@ -0,0 +1,3 @@ + diff --git a/components/TechStack.vue b/components/TechStack.vue index 4677e58..5732b05 100644 --- a/components/TechStack.vue +++ b/components/TechStack.vue @@ -1,20 +1,18 @@ diff --git a/pages/index.vue b/pages/index.vue index 4adaff9..22aee25 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,27 +1,35 @@ diff --git a/plugins/vue-gtag.js b/plugins/vue-gtag.js index 7e064e5..8f7a6e7 100644 --- a/plugins/vue-gtag.js +++ b/plugins/vue-gtag.js @@ -1,6 +1,34 @@ -import Vue from 'vue' -import VueGtag from 'vue-gtag' +export default ({ app }) => { + /* + ** Only run on client-side and only in production mode + */ + if (process.env.NODE_ENV === 'production' && process.client) { -Vue.use(VueGtag, { - config: { id: process.env.GOOGLE_ANALYTICS_ID } -}) \ No newline at end of file + const analyticsID = process.env.GOOGLE_ANALYTICS_ID + + // first check to see if our script is already in the DOM + const myScriptExists = Boolean( + document.querySelector( + `head > script[src="https://www.googletagmanager.com/gtag/js?id=${analyticsID}"]` + ) + ) + + if (!myScriptExists) { + // if it isn't already in the DOM, create and insert our script + const myScript = document.createElement('script') + myScript.type = 'text/javascript' + myScript.src = `https://www.googletagmanager.com/gtag/js?id=${analyticsID}` + myScript.hid = 'gtm' + myScript.async = true + document.head.appendChild(myScript); + } + + // part 2 of Google Analytics script + window.dataLayer = window.dataLayer || []; + // eslint-disable-next-line no-undef + function gtag() { dataLayer.push(arguments); } + gtag('js', new Date()); + gtag('set', { cookie_flags: 'SameSite=None;Secure' }); + gtag('config', `${analyticsID}`); + } +} \ No newline at end of file