Add document titles to docs and recipes (#49)

Add page titles to docs and recipes
FormidableLabs · Jul 19, 2016 · 8077187 · 8077187
1 parent 0b3b741
commit 8077187
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 131 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Victory</title>
   <meta name="description" content="A collection of composable React components for building interactive data visualizations.">
-  <meta property="og:title" content="Victory" />
   <meta property="og:site_name" content="Victory" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="http://www.formidable.com/open-source/victory/" />

diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "radium": "^0.17.1",
     "react": "^15.1.0",
     "react-addons-test-utils": "^15.1.0",
+    "react-document-meta": "^2.0.3",
     "react-dom": "^15.1.0",
     "react-ga": "^1.2.1",
     "react-router": "^2.0.1",

diff --git a/src/components/static-entry.jsx b/src/components/static-entry.jsx
@@ -4,6 +4,7 @@ import { renderToString } from "react-dom/server";
 import { Router, RouterContext, match, applyRouterMiddleware, browserHistory } from "react-router";
 import { createMemoryHistory } from "history";
 import useScroll from "react-router-scroll";
+import { renderAsHTML } from "./title-meta";
 
 const routing = {
   base: process.env.NODE_ENV === "production" ? "/open-source/victory/" : "/"
@@ -40,8 +41,10 @@ export default (locals, callback) => {
   const location = history.createLocation(locals.path);
 
   match({ routes, location }, (error, redirectLocation, renderProps) => {
+    const content = renderToString(<RouterContext {...renderProps} />);
     callback(null, Index({
-      content: renderToString(<RouterContext {...renderProps} />),
+      titleMeta: renderAsHTML(),
+      content,
       bundleJs: locals.assets.main,
       baseHref: routing.base
     }));

diff --git a/src/components/title-meta.jsx b/src/components/title-meta.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import DocumentMeta from "react-document-meta";
+
+class TitleMeta extends React.Component {
+  render() {
+    const titleMeta = {
+      title: this.props.title,
+      meta: {
+        property: {
+          "og:title": this.props.title
+        }
+      }
+    };
+
+    return (
+      <DocumentMeta {...titleMeta}>
+        {this.props.children}
+      </DocumentMeta>
+    );
+  }
+}
+
+TitleMeta.propTypes = {
+  title: React.PropTypes.string,
+  children: React.PropTypes.node
+};
+
+export default TitleMeta;
+
+export const renderAsHTML = function () {
+  return DocumentMeta.renderAsHTML();
+};
diff --git a/src/screens/docs/components/markdown.jsx b/src/screens/docs/components/markdown.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Radium from "radium";
+import TitleMeta from "../../../components/title-meta";
 import find from "lodash/find";
 import marked from "marked";
 
@@ -17,8 +18,13 @@ class MarkdownDocs extends React.Component {
         />
       );
     }
-    const Docs = find(components, {slug: activeComponent}).docs;
-    return (<Docs />);
+    const conf = find(components, {slug: activeComponent});
+    const Docs = conf.docs;
+    return (
+      <TitleMeta title={`${conf.text} | Documentation`}>
+        <Docs />
+      </TitleMeta>
+    );
   }
   render() {
     return (

diff --git a/src/screens/docs/index.jsx b/src/screens/docs/index.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Radium from "radium";
+import TitleMeta from "../../components/title-meta";
 
 // Settings
 import { VictorySettings } from "formidable-landers";
@@ -61,13 +62,15 @@ class Docs extends React.Component {
       "index";
     const styles = this.getStyles();
     return (
-      <div>
-        <Sidebar active={activePage} style={styles.sidebar} />
-        <div style={styles.content}>
-          <Markdown active={activePage} />
-          <Footer style={styles.foots} />
+      <TitleMeta title="Victory | Documentation">
+        <div>
+          <Sidebar active={activePage} style={styles.sidebar} />
+          <div style={styles.content}>
+            <Markdown active={activePage} />
+            <Footer style={styles.foots} />
+          </div>
         </div>
-      </div>
+      </TitleMeta>
     );
   }
 }

diff --git a/src/screens/home/index.jsx b/src/screens/home/index.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Radium from "radium";
 
+import TitleMeta from "../../components/title-meta";
 import { Link } from "react-router";
 const RadiumLink = Radium(Link);
 
@@ -175,135 +176,137 @@ class Home extends React.Component {
   render() {
     const styles = this.getStyles();
     return (
-      <section style={styles.section} className="playgroundsMaxHeight">
-        <Hero />
-        <div style={styles.padded} className="Home">
-          <h2 style={styles.copy}>Why Victory?</h2>
+      <TitleMeta title="Victory">
+        <section style={styles.section} className="playgroundsMaxHeight">
+          <Hero />
+          <div style={styles.padded} className="Home">
+            <h2 style={styles.copy}>Why Victory?</h2>
 
-          <h3 style={styles.copy}>Friendly</h3>
-          <p style={styles.copy}>
-            The modular, componentized nature of React has allowed us to write fully-contained, reusable data visualization elements that are responsible for their own styles and behaviors.
-          </p>
-        </div>
+            <h3 style={styles.copy}>Friendly</h3>
+            <p style={styles.copy}>
+              The modular, componentized nature of React has allowed us to write fully-contained, reusable data visualization elements that are responsible for their own styles and behaviors.
+            </p>
+          </div>
 
-        <Demo src={require("!!raw!./components/examples/friendly.md")} />
+          <Demo src={require("!!raw!./components/examples/friendly.md")} />
 
-        <div style={styles.padded} className="Home">
-          <h3 style={styles.copy}>Flexible</h3>
-          <p style={styles.copy}>
-            The use of sensible default props makes getting started very easy, without sacrificing flexibility. Victory also leverages React lifecycle methods and <code style={styles.code}>DOM</code> diffing to create a lightweight animation wrapper.
-          </p>
-        </div>
+          <div style={styles.padded} className="Home">
+            <h3 style={styles.copy}>Flexible</h3>
+            <p style={styles.copy}>
+              The use of sensible default props makes getting started very easy, without sacrificing flexibility. Victory also leverages React lifecycle methods and <code style={styles.code}>DOM</code> diffing to create a lightweight animation wrapper.
+            </p>
+          </div>
 
-        <div className="Interactive" style={{backgroundColor: "transparent"}}>
-          <div className="playground">
-            <div className="fancyBorder" style={styles.demoComponent}>
-              <DemoFlexible />
+          <div className="Interactive" style={{backgroundColor: "transparent"}}>
+            <div className="playground">
+              <div className="fancyBorder" style={styles.demoComponent}>
+                <DemoFlexible />
+              </div>
             </div>
+            <p style={{textAlign: "center"}}>
+              <a href="https://github.com/FormidableLabs/victory-examples/blob/master/src/components/custom-styles.js">
+                <span className="Smallcaps" style={styles.boldSmallCaps}>View the source.</span> <Icon glyph="external-link" />
+              </a>
+            </p>
           </div>
-          <p style={{textAlign: "center"}}>
-            <a href="https://github.com/FormidableLabs/victory-examples/blob/master/src/components/custom-styles.js">
-              <span className="Smallcaps" style={styles.boldSmallCaps}>View the source.</span> <Icon glyph="external-link" />
-            </a>
-          </p>
-        </div>
 
-        <div style={styles.padded} className="Home">
-          <h3 style={styles.copy}>Composable</h3>
-          <p style={styles.copy}>
-            When combined, these features result in a set of components that are easy to use, and compose into more complicated visualizations.
-          </p>
-        </div>
+          <div style={styles.padded} className="Home">
+            <h3 style={styles.copy}>Composable</h3>
+            <p style={styles.copy}>
+              When combined, these features result in a set of components that are easy to use, and compose into more complicated visualizations.
+            </p>
+          </div>
 
-        <Demo src={require("!!raw!./components/examples/composable.md")} />
+          <Demo src={require("!!raw!./components/examples/composable.md")} />
 
-        <div style={styles.padded} className="Home">
-          <h3 style={styles.copy}>Native</h3>
-          <p style={styles.copy}>
-            Extend the Victory experience on Android and iOS platforms with an identical&nbsp;API.
-          </p>
-        </div>
+          <div style={styles.padded} className="Home">
+            <h3 style={styles.copy}>Native</h3>
+            <p style={styles.copy}>
+              Extend the Victory experience on Android and iOS platforms with an identical&nbsp;API.
+            </p>
+          </div>
 
-        <div style={styles.padded}>
-          <div style={[styles.copy, {display: "block", marginTop: `${VictorySettings.gutter}px`, textAlign: "center" }]}>
-            <RadiumLink style={styles.buttonLink} to="docs">
-              Getting Started Guide <Icon glyph="internal-link" />
-            </RadiumLink>
+          <div style={styles.padded}>
+            <div style={[styles.copy, {display: "block", marginTop: `${VictorySettings.gutter}px`, textAlign: "center" }]}>
+              <RadiumLink style={styles.buttonLink} to="docs">
+                Getting Started Guide <Icon glyph="internal-link" />
+              </RadiumLink>
+            </div>
           </div>
-        </div>
 
-        <div style={styles.padded}>
-          <h2 style={[styles.noMarginTop, styles.copy]}>Documentation</h2>
-          <div style={styles.columns}>
-            <ul style={styles.list}>
-              <li className="Smallcaps" style={styles.marginTop}>Core</li>
-              {this.renderComponents(components, "docs", "core")}
-              <li style={styles.listItem}>
-                VictoryConstraints <abbr title="Coming soon"><Icon glyph="coming-soon" /></abbr>
-              </li>
-              <li style={styles.listItem}>
-                VictoryTooltip <abbr title="Coming soon"><Icon glyph="coming-soon" /></abbr>
-              </li>
-            </ul>
-            <ul style={styles.list}>
-              <li className="Smallcaps" style={styles.marginTop}>Chart</li>
-              <li key="victory-chart2" style={styles.listItem}>
-                <NavLink to="docs/victory-chart">
-                  VictoryChart <Icon glyph="internal-link" />
-                </NavLink>
-              </li>
-              <ul style={styles.nestedList}>
-                {this.renderComponents(components, "docs", "chart")}
+          <div style={styles.padded}>
+            <h2 style={[styles.noMarginTop, styles.copy]}>Documentation</h2>
+            <div style={styles.columns}>
+              <ul style={styles.list}>
+                <li className="Smallcaps" style={styles.marginTop}>Core</li>
+                {this.renderComponents(components, "docs", "core")}
+                <li style={styles.listItem}>
+                  VictoryConstraints <abbr title="Coming soon"><Icon glyph="coming-soon" /></abbr>
+                </li>
+                <li style={styles.listItem}>
+                  VictoryTooltip <abbr title="Coming soon"><Icon glyph="coming-soon" /></abbr>
+                </li>
+              </ul>
+              <ul style={styles.list}>
+                <li className="Smallcaps" style={styles.marginTop}>Chart</li>
+                <li key="victory-chart2" style={styles.listItem}>
+                  <NavLink to="docs/victory-chart">
+                    VictoryChart <Icon glyph="internal-link" />
+                  </NavLink>
+                </li>
+                <ul style={styles.nestedList}>
+                  {this.renderComponents(components, "docs", "chart")}
+                </ul>
               </ul>
-            </ul>
-            <ul style={styles.list}>
-              <li className="Smallcaps" style={styles.marginTop}>More</li>
-              {this.renderComponents(components, "docs", "more")}
-            </ul>
+              <ul style={styles.list}>
+                <li className="Smallcaps" style={styles.marginTop}>More</li>
+                {this.renderComponents(components, "docs", "more")}
+              </ul>
+            </div>
           </div>
-        </div>
 
-        <div style={styles.padded}>
-          <h2 style={[styles.noMarginTop, styles.copy]}>Recipes</h2>
-          <div style={styles.columns}>
-            <ul style={styles.list}>
-              <li className="Smallcaps" style={styles.marginTop}>Customize</li>
-              {this.renderComponents(recipesComponents, "recipes", "customize")}
-            </ul>
-            <ul style={styles.list}>
-              <li className="Smallcaps" style={styles.marginTop}>Events</li>
-              {this.renderComponents(recipesComponents, "recipes", "events")}
-            </ul>
+          <div style={styles.padded}>
+            <h2 style={[styles.noMarginTop, styles.copy]}>Recipes</h2>
+            <div style={styles.columns}>
+              <ul style={styles.list}>
+                <li className="Smallcaps" style={styles.marginTop}>Customize</li>
+                {this.renderComponents(recipesComponents, "recipes", "customize")}
+              </ul>
+              <ul style={styles.list}>
+                <li className="Smallcaps" style={styles.marginTop}>Events</li>
+                {this.renderComponents(recipesComponents, "recipes", "events")}
+              </ul>
+            </div>
           </div>
-        </div>
 
-        <div style={[styles.padded, styles.copy]}>
-          <h2>Learn more</h2>
-          <h3>Source Code</h3>
-          <p>
-            View the source at <a href="https://github.com/FormidableLabs/victory">
-              <span className="Smallcaps" style={styles.boldSmallCaps}>GitHub:</span>
-              FormidableLabs/victory.&nbsp;<Icon glyph="external-link" />
+          <div style={[styles.padded, styles.copy]}>
+            <h2>Learn more</h2>
+            <h3>Source Code</h3>
+            <p>
+              View the source at <a href="https://github.com/FormidableLabs/victory">
+                <span className="Smallcaps" style={styles.boldSmallCaps}>GitHub:</span>
+                FormidableLabs/victory.&nbsp;<Icon glyph="external-link" />
+              </a>
+            </p>
+            <h3>Support</h3>
+            <p>
+              Questions? Let’s chat at <a href="https://gitter.im/FormidableLabs/victory">
+                <span className="Smallcaps" style={styles.boldSmallCaps}>Gitter:</span>
+                FormidableLabs/victory.&nbsp;<Icon glyph="external-link" />
+            </a>
+            </p>
+            <h3>Upcoming Releases</h3>
+            <p>
+              We have a lot planned! Want to make a request for a new feature? See our <a href="https://github.com/FormidableLabs/victory/blob/master/ROADMAP.md">
+                Roadmap.&nbsp;<Icon glyph="external-link" />
             </a>
-          </p>
-          <h3>Support</h3>
-          <p>
-            Questions? Let’s chat at <a href="https://gitter.im/FormidableLabs/victory">
-              <span className="Smallcaps" style={styles.boldSmallCaps}>Gitter:</span>
-              FormidableLabs/victory.&nbsp;<Icon glyph="external-link" />
-          </a>
-          </p>
-          <h3>Upcoming Releases</h3>
-          <p>
-            We have a lot planned! Want to make a request for a new feature? See our <a href="https://github.com/FormidableLabs/victory/blob/master/ROADMAP.md">
-              Roadmap.&nbsp;<Icon glyph="external-link" />
-          </a>
-          </p>
-        </div>
+            </p>
+          </div>
 
-        <Companies style={[styles.padded, styles.copy]} />
-        <Footer />
-      </section>
+          <Companies style={[styles.padded, styles.copy]} />
+          <Footer />
+        </section>
+      </TitleMeta>
     );
   }
 }