dynamic title. sure to break.

src/About.js

@@ -45,6 +45,10 @@ class About extends Component {
             </div>
           </div>);
   }
+
+  componentDidMount() {
+    document.title = "About - SongSim";
+  }
 
   render() {
     var chapter = this.props.params.chapter || 'default';

src/Gallery.js

@@ -24,6 +24,10 @@ class Gallery extends Component {
     return this.props.params.cat || DEFAULT_CAT_SLUG;
   }
 
+  componentDidMount() {
+    document.title = "Gallery - SongSim";
+  }
+
   renderCanned = (c, i) => {
     let kls = "img-responsive";
     if (c.mini) {

src/Songsim.js

@@ -99,6 +99,7 @@ class Songsim extends Component {
           this.props.router.replace('/');
         }
       );
+      document.title = config.base_title;
     } else if (props.location.pathname === "/" + CUSTOM_SLUG) {
       // We don't allow editing in mobile mode. Cause I was too lazy to build the UI.
       if (this.state.mobile) {
@@ -114,12 +115,14 @@ class Songsim extends Component {
       var canned = SongSelector.lookupCanned(songId);
       if (canned) {
         SongSelector.loadSong(this.onTextChange, canned);
+        document.title = canned.title + ' - ' + config.base_title;
       } else {
         console.error(`Uh oh. Failed to load slug ${songId}`);
       }
     } else {
       // Return the default landing song.
       var c = LANDING_CANNED;
+      document.title = config.base_title;
       return CannedVerse.fromCanned(c, LANDING_LYRICS);
     }
     // If we've reached this far, we must be loading asynchronously. Return nothing.

src/config.js

@@ -9,6 +9,7 @@ var config = {
   rect_saturation: 100, // range [0-100]
   rect_lightness: 50, // range [0-100]
   testingFBKey: '-KeAcPBicxmHgZNEY9UM',
+  base_title: 'SongSim',
   // Make sure the two options below sum to 1. (I know, this is dumb. Too lazy to refactor.)
   stopwords: false,
   default_ignore_singletons: true,