From 8e102dd27dcaa355f7d07dee815a7dadba8b0fd7 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Thu, 17 Mar 2016 14:02:58 -0400
Subject: [PATCH] Add ?language= linking [feature]

---
 CHANGELOG.md          |  7 +++++++
 src/components/app.js | 16 +++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7af080f..7accfbf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+### March 17, 2016
+
+* Support for linking to specific languages. URLs were previously like
+  `#the-section` but now are `?language=JavaScript#the-section` when a language
+  is selected, so that you can link to both a specific section and a specific
+  language.
+
 ### March 14, 2016
 
 * Support for toggling between 1 and 2 column mode
diff --git a/src/components/app.js b/src/components/app.js
index 2523391..411edc8 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -6,11 +6,13 @@ import PureRenderMixin from 'react-pure-render/mixin';
 import GithubSlugger from 'github-slugger';
 import debounce from 'lodash.debounce';
 import { brandNames, brandClasses } from '../../custom';
+import qs from 'querystring';
 
 let slugger = new GithubSlugger();
 let slug = title => { slugger.reset(); return slugger.slug(title); };
 
 let languageOptions = ['cURL', 'CLI', 'Python', 'JavaScript'];
+let defaultLanguage = 'cURL';
 
 let debouncedReplaceState = debounce(hash => {
   window.history.replaceState('', '', hash);
@@ -27,6 +29,9 @@ var App = React.createClass({
 
     if (process.browser) {
       let hash = window.location.hash.split('#').pop();
+      let languageFromURL = qs.parse(window.location.search.substring(1)).language;
+      let language = languageOptions.includes(languageFromURL) ?
+        languageFromURL : defaultLanguage;
       let mqls = {
         desktop: window.matchMedia('(min-width: 961px)'),
         tablet: window.matchMedia('(max-width: 960px)'),
@@ -48,7 +53,7 @@ var App = React.createClass({
         mqls: mqls,
         // object of currently matched queries, like { desktop: true }
         queryMatches: {},
-        language: 'cURL',
+        language: language,
         columnMode: 2,
         activeSection: active,
         // for the toggle-able navigation on mobile
@@ -62,7 +67,7 @@ var App = React.createClass({
         queryMatches: {
           desktop: true
         },
-        language: 'cURL',
+        language: defaultLanguage,
         activeSection: '',
         showNav: false
       };
@@ -105,7 +110,12 @@ var App = React.createClass({
     document.body.removeEventListener('scroll', this.onScroll);
   },
   onChangeLanguage(language) {
-    this.setState({ language });
+    this.setState({ language }, () => {
+      if (window.history) {
+        window.history.pushState(null, null,
+          `?${qs.stringify({ language })}${window.location.hash}`);
+      }
+    });
   },
   componentDidUpdate(_, prevState) {
     if (prevState.activeSection !== this.state.activeSection) {