Add touch events.

package-lock.json

@@ -2988,6 +2988,11 @@
         "repeating": "2.0.1"
       }
     },
+    "detect-passive-events": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.4.tgz",
+      "integrity": "sha1-btR35uW863kHlzXc01d4nTf5qRo="
+    },
     "detect-port": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.2.2.tgz",
@@ -10407,6 +10412,15 @@
         "shallowequal": "1.0.2"
       }
     },
+    "react-swipeable": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-4.2.0.tgz",
+      "integrity": "sha1-VT1iyP5i6skwj1WQacAmk8x4Zlw=",
+      "requires": {
+        "detect-passive-events": "1.0.4",
+        "prop-types": "15.6.0"
+      }
+    },
     "react-transition-group": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "gatsby-source-filesystem": "^1.5.18",
     "gatsby-transformer-remark": "^1.7.31",
     "history": "^4.7.2",
+    "react-swipeable": "^4.2.0",
     "react-transition-group": "^2.2.1"
   },
   "keywords": [

src/layouts/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Link, { navigateTo } from 'gatsby-link';
 import Helmet from 'react-helmet';
+import Swipeable from 'react-swipeable';
 
 import './index.css';
 
@@ -15,10 +16,19 @@ const Header = ({ name, title, date }) => (
 );
 
 class TemplateWrapper extends Component {
+  NEXT = 39;
+  PREV = 37;
+
+  swipeLeft = () => {
+    this.navigate({ keyCode: this.NEXT });
+  };
+
+  swipeRight = () => {
+    this.navigate({ keyCode: this.PREV });
+  };
+
   navigate = ({ keyCode }) => {
     const now = parseInt(location.pathname.substr(1));
-    const NEXT = 39;
-    const PREV = 37;
 
     const slides = this.props.data.allMarkdownRemark.edges.filter(
       ({ node }) => {
@@ -31,13 +41,13 @@ class TemplateWrapper extends Component {
     );
 
     if (now) {
-      if (keyCode === PREV && now === 1) {
+      if (keyCode === this.PREV && now === 1) {
         return false;
-      } else if (keyCode === NEXT && now === slides.length) {
+      } else if (keyCode === this.NEXT && now === slides.length) {
         return false;
-      } else if (keyCode === NEXT) {
+      } else if (keyCode === this.NEXT) {
         navigateTo(`/${now + 1}`);
-      } else if (keyCode === PREV) {
+      } else if (keyCode === this.PREV) {
         navigateTo(`/${now - 1}`);
       }
     }
@@ -56,16 +66,20 @@ class TemplateWrapper extends Component {
     return (
       <div>
         <Helmet
-          title={`${data.site.siteMetadata.title} — ${
-            data.site.siteMetadata.name
-          }`}
+          title={`${data.site.siteMetadata.title} — ${data.site.siteMetadata
+            .name}`}
         />
         <Header
           name={data.site.siteMetadata.name}
           title={data.site.siteMetadata.title}
           date={data.site.siteMetadata.date}
         />
-        <div id="slide">{children()}</div>
+        <Swipeable
+          onSwipingLeft={this.swipeLeft}
+          onSwipingRight={this.swipeRight}
+        >
+          <div id="slide">{children()}</div>
+        </Swipeable>
       </div>
     );
   }
@@ -73,7 +87,7 @@ class TemplateWrapper extends Component {
 
 TemplateWrapper.propTypes = {
   children: PropTypes.func,
-  data: PropTypes.object
+  data: PropTypes.object,
 };
 
 export default TemplateWrapper;