Merge pull request #33 from kremalicious/fixes

fixes

.dockerignore

@@ -1 +1,4 @@
 node_modules
+.git*
+.cache
+public

Dockerfile

@@ -1,7 +1,5 @@
 FROM node:alpine
 
-EXPOSE 8000
-
 RUN apk update && \
   apk add --update --repository http://dl-3.alpinelinux.org/alpine/edge/testing \
   vips-tools \
@@ -21,8 +19,9 @@ RUN apk update && \
 
 RUN mkdir -p /portfolio
 WORKDIR /portfolio
-VOLUME /portfolio
 
-COPY ./scripts/entry.sh /
-RUN chmod +x /entry.sh
-ENTRYPOINT ["/entry.sh"]
+COPY package.json .
+
+RUN npm install --quiet && npm cache clean --force
+
+#CMD [ "npm", "run", "dev" ]

README.md

@@ -22,6 +22,7 @@
   - [💅 Theme switcher](#theme-switcher)
   - [🏆 SEO component](#seo-component)
   - [📇 Client-side vCard creation](#client-side-vcard-creation)
+  - [💫 Page transitions](#page-transitions)
   - [📈 Matomo (formerly Piwik) analytics tracking](#matomo-formerly-piwik-analytics-tracking)
   - [🖼 Project images](#project-images)
   - [💎 Importing SVG assets](#importing-svg-assets)
@@ -66,6 +67,10 @@ The _Add to addressbook_ link in the footer automatically creates a downloadable
 
 If you want to know how, have a look at the respective component under [`src/components/atoms/Vcard.jsx`](src/components/atoms/Vcard.jsx)
 
+### 💫 Page transitions
+
+Includes mechanism for transitioning between route changes with full page transitions defined with [react-pose](https://popmotion.io/pose/). Mechanism ~~stolen~~ inspired by [gatsby-universal](https://github.com/fabe/gatsby-universal)
+
 ### 📈 Matomo (formerly Piwik) analytics tracking
 
 Site sends usage statistics to my own [Matomo](https://matomo.org) installation. To make this work in Gatsby, I created and open sourced a plugin, [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo), which is in use on this site.

docker-compose.yml

@@ -2,7 +2,9 @@ version: '3'
 services:
   gatsby:
     build: .
+    command: npm run dev
     volumes:
       - .:/portfolio
+      - /portfolio/node_modules
     ports:
-     - "8000:8000"
+      - '8000:8000'

gatsby-config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const yaml = require('js-yaml')
 const meta = yaml.load(fs.readFileSync('./data/meta.yml', 'utf8'))
-const { url, matomoSite, matomoUrl, title } = meta
+const { title, description, url, matomoSite, matomoUrl } = meta
 
 module.exports = {
   siteMetadata: {
@@ -60,15 +60,37 @@ module.exports = {
       }
     },
     {
-      resolve: 'gatsby-plugin-manifest',
+      resolve: 'gatsby-plugin-favicon',
       options: {
-        name: title.toLowerCase(),
-        short_name: 'mk',
-        start_url: '/',
-        background_color: '#e7eef4',
+        logo: './src/images/favicon.png',
+
+        // WebApp Manifest Configuration
+        appName: title.toLowerCase(),
+        appDescription: description,
+        developerName: null,
+        developerURL: null,
+        dir: 'auto',
+        lang: 'en-US',
+        background: '#e7eef4',
         theme_color: '#88bec8',
         display: 'minimal-ui',
-        icon: 'src/images/favicon.png'
+        orientation: 'any',
+        start_url: '/?homescreen=1',
+        short_name: 'mk',
+        version: '1.0',
+
+        icons: {
+          android: true,
+          appleIcon: true,
+          appleStartup: true,
+          coast: false,
+          favicons: true,
+          firefox: true,
+          opengraph: false,
+          twitter: false,
+          yandex: false,
+          windows: false
+        }
       }
     },
     'gatsby-plugin-react-helmet',

package.json

@@ -7,11 +7,12 @@
   "license": "MIT",
   "author": "Matthias Kretschmann <m@kretschmann.io>",
   "scripts": {
+    "start": "npm run dev",
     "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.{js,jsx}",
     "lint:css": "stylelint ./src/**/*.{css,scss}",
     "lint": "npm run svg && npm run lint:js && npm run lint:css",
     "build": "npm run svg && ./node_modules/gatsby/dist/bin/gatsby.js build",
-    "start": "npm run svg && ./node_modules/gatsby/dist/bin/gatsby.js develop",
+    "dev": "npm run svg && ./node_modules/gatsby/dist/bin/gatsby.js develop",
     "format": "prettier --write 'src/**/*.{js,jsx}'",
     "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
     "test": "npm run lint && ./node_modules/.bin/ava **/*.test.js --verbose",
@@ -21,9 +22,9 @@
   },
   "dependencies": {
     "file-saver": "^1.3.8",
-    "gatsby": "^2.0.4",
-    "gatsby-image": "^2.0.0",
-    "gatsby-plugin-manifest": "^2.0.2",
+    "gatsby": "^2.0.6",
+    "gatsby-image": "^2.0.6",
+    "gatsby-plugin-favicon": "^3.1.4",
     "gatsby-plugin-matomo": "^0.5.0",
     "gatsby-plugin-offline": "^2.0.0",
     "gatsby-plugin-react-helmet": "^3.0.0",

src/components/molecules/ProjectImage.jsx

@@ -22,7 +22,7 @@ ProjectImage.propTypes = {
 export const projectImage = graphql`
   fragment ProjectImageFluid on ImageSharp {
     fluid(maxWidth: 1200, quality: 85) {
-      ...GatsbyImageSharpFluid_withWebp
+      ...GatsbyImageSharpFluid_withWebp_noBase64
     }
   }
 `