Added a way to load a preset from a gist

package.json

@@ -1,44 +1,45 @@
 {
-	"name": "qmkbuilder",
-	"version": "1.0.0",
-	"description": "QMK Firmware Builder",
-	"main": "index.js",
-	"scripts": {
-		"build": "cross-env NODE_PATH=./src node index.js",
-		"deploy": "cross-env NODE_PATH=./src NODE_ENV=production node deploy.js",
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/ruiqimao/qmkbuilder.git"
-	},
-	"author": "ruiqimao",
-	"license": "ISC",
-	"bugs": {
-		"url": "https://github.com/ruiqimao/qmkbuilder/issues"
-	},
-	"homepage": "https://github.com/ruiqimao/qmkbuilder#readme",
-	"dependencies": {
-		"babel": "^6.5.2",
-		"babel-preset-es2015": "^6.18.0",
-		"babel-preset-react": "^6.16.0",
-		"babelify": "^7.3.0",
-		"body-parser": "^1.15.2",
-		"browserify": "^13.1.1",
-		"classnames": "^2.2.5",
-		"co": "^4.6.0",
-		"codemirror": "^5.22.0",
-		"crypto": "0.0.3",
-		"errorify": "^0.3.1",
-		"express": "^4.14.0",
-		"react": "^15.4.1",
-		"react-codemirror": "^0.3.0",
-		"react-dom": "^15.4.1",
-		"superagent": "^3.3.1",
-		"uglifyify": "^3.0.4",
-		"watchify": "^3.7.0"
-	},
-	"devDependencies": {
-		"cross-env": "^3.1.4"
-	}
+  "name": "qmkbuilder",
+  "version": "1.0.0",
+  "description": "QMK Firmware Builder",
+  "main": "index.js",
+  "scripts": {
+    "build": "cross-env NODE_PATH=./src node index.js",
+    "deploy": "cross-env NODE_PATH=./src NODE_ENV=production node deploy.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ruiqimao/qmkbuilder.git"
+  },
+  "author": "ruiqimao",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ruiqimao/qmkbuilder/issues"
+  },
+  "homepage": "https://github.com/ruiqimao/qmkbuilder#readme",
+  "dependencies": {
+    "babel": "^6.5.2",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babelify": "^7.3.0",
+    "body-parser": "^1.15.2",
+    "browserify": "^13.1.1",
+    "classnames": "^2.2.5",
+    "co": "^4.6.0",
+    "codemirror": "^5.22.0",
+    "crypto": "0.0.3",
+    "errorify": "^0.3.1",
+    "express": "^4.14.0",
+    "query-string": "^4.3.1",
+    "react": "^15.4.1",
+    "react-codemirror": "^0.3.0",
+    "react-dom": "^15.4.1",
+    "superagent": "^3.3.1",
+    "uglifyify": "^3.0.4",
+    "watchify": "^3.7.0"
+  },
+  "devDependencies": {
+    "cross-env": "^3.1.4"
+  }
 }

src/main/main.js

@@ -6,6 +6,7 @@ const C = require('const');
 const Utils = require('utils');
 
 const Request = require('superagent');
+const queryString = require("query-string");
 
 class Main extends React.Component {
 
@@ -16,6 +17,7 @@ class Main extends React.Component {
 		this.upload = this.upload.bind(this);
 		this.useKLE = this.useKLE.bind(this);
 		this.usePreset = this.usePreset.bind(this);
+		this.useGist = this.useGist.bind(this);
 	}
 
 	/*
@@ -108,6 +110,60 @@ class Main extends React.Component {
 			});
 	}
 
+	/*
+	 * Use a GitHub Gist.
+	 *
+	 * @param {String} id The id of the Gist.
+	 */
+	useGist(id) {
+		const state = this.props.state;
+
+		Request
+			.get('https://api.github.com/gists/' + id)
+			.end((err, res) => {
+				if (err) return state.error('Unable to load preset.');
+
+				try {
+					// Get files in gist
+					const files = res.body.files;
+
+					// Get the contents of the first file
+					const serialized = files[Object.keys(files)[0]].content;
+
+					// Deserialize the contents.
+					const deserialized = JSON.parse(serialized);
+
+					// Ensure the version is correct.
+					if (deserialized.version !== C.VERSION) throw 'version mismatch';
+
+					// Build a new keyboard.
+					const keyboard = Keyboard.deserialize(state, deserialized.keyboard);
+
+					state.update({
+						keyboard: keyboard,
+						screen: C.SCREEN_KEYMAP // Switch to the keymap screen.
+					});
+				} catch (e) {
+					console.error(e);
+					state.error('Invalid configuration');
+				}
+			});
+	}
+
+	componentDidMount() {
+		// Check for GitHub Gist to load preset from
+		const parsedQueryString = queryString.parse(location.search);
+		const gist = parsedQueryString.gist;
+
+		if (gist) {
+			// Validate that the gist id is a valid hash
+			if (/^[A-Za-z0-9]+$/.test(gist)) {
+				// Fetch the gist
+				this.useGist(gist);
+			}
+		}
+	}
+
 	render() {
 		const state = this.props.state;