Merge pull request #84 from kremalicious/post/gatsby-plugin-matomo

Post/gatsby plugin matomo

README.md

@@ -27,7 +27,7 @@
   - [🍬 Typekit component](#-typekit-component)
 - [✨ Development](#-development)
   - [🔮 Linting](#-linting)
-  - [🎈 Add a new project](#-add-a-new-project)
+  - [🎈 Add a new post](#-add-a-new-post)
 - [🚚 Deployment](#-deployment)
 - [🏛 Licenses](#-licenses)
   - [Posts](#-posts)
@@ -163,13 +163,14 @@ npm run format
 npm run format:css
 ```
 
-### 🎈 Add a new project
+### 🎈 Add a new post
 
 ```bash
-npm run new "Hello"
+npm run new "Hello World"
 ```
 
 - [`scripts/new.js`](scripts/new.js)
+- [`scripts/new.md`](scripts/new.md)
 
 ## 🚚 Deployment
 

content/posts/2018-11-01-gatsby-plugin-matomo/index.md

@@ -0,0 +1,58 @@
+---
+type: post
+date: 2018-11-01T19:08:00.367Z
+
+title: Matomo plugin for Gatsby
+image: gatsby-plugin-matomo-teaser.png
+
+tags:
+  - goodies
+  - gatsby
+  - matomo
+---
+
+Plugin for [Gatsby](https://www.gatsbyjs.org) to add tracking with the open-source analytics platform [Matomo](https://matomo.org) (formerly Piwik) onto a site, prioritizing user experience & privacy with sensible defaults.
+
+## Features
+
+* include tracking code in all server-side rendered routes
+* track all route views as custom events
+* load tracking scripts at end of body tag
+* use image tracking fallback for `<noscript>`
+* don't load anything when visitor has Do Not Track enabled
+* don't load anything in non-production environments
+* consent mode for privacy
+* allow loading tracking script locally
+* dev mode for local development
+
+## Usage
+
+First, install the plugin from your project's root:
+
+```bash
+cd yourproject/
+npm i gatsby-plugin-matomo
+```
+
+Then load the plugin from your `gatsby-config.js` and set the required variables:
+
+```js
+plugins: [
+  {
+    resolve: 'gatsby-plugin-matomo',
+    options: {
+      siteId: 'YOUR_SITE_ID',
+      matomoUrl: 'https://YOUR_MATOMO_URL.COM',
+      siteUrl: 'https://YOUR_LIVE_SITE_URL.COM'
+    }
+  }
+]
+```
+
+## Check out & contribute
+
+Head over to GitHub for more documentation, take a peek into the code, or to report some bugs.
+
+<p class="content-download">
+    <a class="icon-github btn-primary" href="https://github.com/kremalicious/hyper-mac-pro">GitHub</a>
+</p>

package.json

@@ -32,7 +32,7 @@
     "dms2dec": "^1.1.0",
     "fast-exif": "^1.0.1",
     "fraction.js": "^4.0.10",
-    "gatsby": "^2.0.34",
+    "gatsby": "^2.0.36",
     "gatsby-image": "^2.0.18",
     "gatsby-plugin-catch-links": "^2.0.6",
     "gatsby-plugin-favicon": "^3.1.4",
@@ -40,10 +40,10 @@
     "gatsby-plugin-lunr": "^1.2.0",
     "gatsby-plugin-matomo": "^0.5.0",
     "gatsby-plugin-meta-redirect": "^1.1.0",
-    "gatsby-plugin-offline": "^2.0.10",
+    "gatsby-plugin-offline": "^2.0.11",
     "gatsby-plugin-react-helmet": "^3.0.1",
-    "gatsby-plugin-sass": "^2.0.2",
+    "gatsby-plugin-sass": "^2.0.3",
-    "gatsby-plugin-sharp": "^2.0.10",
+    "gatsby-plugin-sharp": "^2.0.11",
     "gatsby-plugin-sitemap": "^2.0.2",
     "gatsby-plugin-svgr": "^2.0.0-alpha",
     "gatsby-plugin-webpack-size": "^0.0.3",
@@ -53,7 +53,7 @@
     "gatsby-remark-highlights": "^1.3.4",
     "gatsby-remark-images": "^2.0.5",
     "gatsby-remark-smartypants": "^2.0.6",
-    "gatsby-source-filesystem": "^2.0.6",
+    "gatsby-source-filesystem": "^2.0.7",
     "gatsby-transformer-remark": "^2.1.11",
     "gatsby-transformer-sharp": "^2.1.7",
     "graphql": "^0.13.2",
@@ -69,7 +69,7 @@
     "react-dom": "^16.6.0",
     "react-helmet": "^5.2.0",
     "react-modal": "^3.6.1",
-    "react-pose": "^3.3.7",
+    "react-pose": "^3.4.0",
     "react-qr-svg": "^2.1.0",
     "react-time": "^4.3.0",
     "react-transition-group": "^2.5.0",
@@ -87,6 +87,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
+    "fs-extra": "^7.0.0",
     "markdownlint": "^0.11.0",
     "markdownlint-cli": "^0.13.0",
     "npm-run-all": "^4.1.3",

scripts/new.js

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'fs-extra'
 import path from 'path'
 import slugify from 'slugify'
 import ora from 'ora'
@@ -21,12 +21,24 @@ const date = new Date().toISOString()
 const newContents = template
   .split('TITLE')
   .join(title)
+  .split('TITLE_SLUG')
+  .join(titleSlug)
   .split('DATE')
   .join(date)
 
 const datePath = date.slice(0, 10)
+const file = `${postsPath}/${datePath}-${titleSlug}/index.md`
 
-fs.appendFile(`${postsPath}/${datePath}-${titleSlug}.md`, newContents, err => {
+fs.outputFile(file, newContents)
-  if (err) spinner.fail(`Error creating post: ${err}`)
+  .then(() => fs.readFile(file, 'utf8'))
-  spinner.succeed(`New post '${title}' created.`)
+  .then(() => {
-})
+    spinner.succeed(`New post '${title}' created.`)
+  })
+  .catch(err => {
+    spinner.fail(`Error creating post: ${err}`)
+  })
+
+// fs.appendFile(`${postsPath}/${datePath}-${titleSlug}.md`, newContents, err => {
+//   if (err) spinner.fail(`Error creating post: ${err}`)
+//   spinner.succeed(`New post '${title}' created.`)
+// })

scripts/new.md

@@ -3,6 +3,7 @@ type: post
 date: DATE
 
 title: TITLE
+image: TITLE_SLUG-teaser.png
 
 tags:
   - tag

src/styles/_code.scss

@@ -6,7 +6,7 @@ kbd,
 pre,
 samp {
     font-family: $font-family-monospace;
-    font-size: $font-size-small;
+    font-size: $font-size-mini;
 }
 
 code,
@@ -72,10 +72,6 @@ pre {
         overflow-wrap: normal;
         word-wrap: normal;
         word-break: normal;
-
-        > span {
-            padding-right: $spacer;
-        }
     }
 }
 

src/templates/Post.jsx

@@ -112,7 +112,7 @@ export const pageQuery = graphql`
       }
       fields {
         slug
-        date(formatString: "MMMM DD, YYYY")
+        date
       }
       rawMarkdownBody
     }