Merge pull request #31 from kadirahq/use-helmet

Use helmet for basic head usage.

src/components/Docs/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import Header from '../Homepage/Header';
 import Container from './Container';
 import Footer from '../Homepage/Footer';
@@ -7,8 +8,12 @@ import './style.css';
 class Docs extends React.Component {
   render() {
     const { sections, selectedItem, selectedSectionId, selectedItemId } = this.props;
+    const headTitle = `${selectedItem.title} - React Storybook Docs`;
     return (
       <div className="container">
+        <Helmet
+          title={headTitle}
+        />
         <Header currentSection="docs"/>
         <Container
           sections={ sections }

src/components/Homepage/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import './style.css';
 import Header from './Header';
 import Heading from './Heading';
@@ -37,8 +38,22 @@ const featuredStorybooks = [
   },
 ];
 
+const META = [
+  {
+    name: "description",
+    content: `
+      React Storybook is a UI development environment for your React components.
+      With it, you can visualize different states of your UI components and develop them interactively.
+    `
+  }
+];
+
 const Homepage = () => (
   <div className="container">
+    <Helmet
+      title="Storybook - UI dev environment you'll love to use"
+      meta={META}
+    />
     <Header currentSection="home"/>
     <Heading />
     <Demo />

src/docs/addons/introduction.js

@@ -6,7 +6,7 @@ const images = {
 
 export default {
   id: "introduction",
-  title: "Introduction",
+  title: "Intro to Addons",
   content: stripIndent`
     By default, Storybook comes with a way to list stories and visualize them. Addons implement extra features for Storybooks to make them more useful.