Better meta tag management

quran · mmahalwy · Mar 8, 2016 · Mar 7, 2016 · Mar 7, 2016 · 69390a6b98a6056aad6fa87dd36f3dfa624e0937
commit 69390a6b98a6056aad6fa87dd36f3dfa624e0937
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "react-cookie": "^0.3.4",
     "react-dom": "^0.14.0",
     "react-google-analytics": "^0.2.0",
+    "react-helmet": "^2.3.1",
     "react-i13n": "^1.0.0",
     "react-i13n-ga": "^0.1.3",
     "react-paginate": "^0.4.0",

diff --git a/src/scripts/components/Application.js b/src/scripts/components/Application.js
@@ -3,22 +3,24 @@ import ApplicationStore from 'stores/ApplicationStore';
 import provideContext from 'fluxible-addons-react/provideContext';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import { handleHistory } from 'fluxible-router';
-import debug from 'utils/Debug';
-
 import { ReactI13n, setupI13n } from 'react-i13n';
 import reactI13nGoogleAnalytics from 'react-i13n-ga';
+import Helmet from 'react-helmet';
+
+import debug from 'utils/Debug';
+import config from '../config';
 
 const gaPlugin = new reactI13nGoogleAnalytics('UA-8496014-1');
 if (process.env.BROWSER) ga('require', 'linkid');
 
-
 class Application extends React.Component {
   render() {
     const Handler = this.props.currentRoute.get('handler');
 
     debug('component:APPLICATION', 'Render');
     return (
       <div>
+        <Helmet {...config.app.head}/>
         <Handler />
         <footer>
           <div className="container-fluid">
@@ -54,7 +56,6 @@ class Application extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     if (this.props.pageTitle !== nextProps.pageTitle) {
-      document.title = nextProps.pageTitle;
       // ga('send', 'pageview', nextProps.url);
       nextProps.i13n.executeEvent('pageview', {
         url: nextProps.url,
@@ -78,7 +79,6 @@ class Application extends React.Component {
     if (newProps.pageTitle === prevProps.pageTitle) {
       return;
     }
-    document.title = newProps.pageTitle;
   }
 };
 

diff --git a/src/scripts/components/Html.js b/src/scripts/components/Html.js
@@ -1,39 +1,27 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 
 class Html extends React.Component {
   render() {
+    const head = Helmet.rewind();
+
     return (
       <html>
         <head>
-            <meta charSet="utf-8" />
-            <meta httpEquiv="Content-Type" content="text/html; charset=utf-8"/>
-            <meta httpEquiv="Content-Language" content="EN"/>
-            <meta name="description" content="The Noble Qur'an in many languages in an easy-to-use interface."/>
-            <meta name="keywords" content="quran, koran, qur'an, al quran al kareem, holy, arabic, iman, islam, Allah, book, muslim, english, dutch, french, german, indonesian, italian, japanese, portuguese, russian, spanish, swahili"/>
-            <meta name="Charset" content="UTF-8"/>
-            <meta name="Distribution" content="Global"/>
-            <meta name="Rating" content="General"/>
-            <meta name="google-site-verification" content="ehFz7FvmL7V9MzP40F8_kLABhCzqGzMDMrCnUP44Too" />
-
-            <meta property="og:title" content="The Noble Qur'an - القرآن الكريم" />
-            <meta property="og:description" content="Quran.com provides the best reading, listening and learning experience for Muslims all around the world." />
-            <meta property="og:type" content="website" />
-            <meta property="og:url" content="http://quran.com/" />
-            <meta property="og:image" content="http://quran.com/images/thumbnail.png" />
-
+          {head.base.toComponent()}
+          {head.title.toComponent()}
+          {head.meta.toComponent()}
+          {head.link.toComponent()}
+          {head.script.toComponent()}
 
-            <title>{this.props.context.getStore('ApplicationStore').getPageTitle()}</title>
-            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
-            <link rel="apple-touch-icon" href="/images/apple-touch-icon.png"/>
-            <link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-precomposed.png" />
-            {Object.keys(this.props.assets.styles).map((style, i) =>
-              <link href={this.props.assets.styles[style]} key={i} media="screen, projection"
-                    rel="stylesheet" type="text/css"/>)}
-            {this.props.fontFaces.map(function(font, i) {
-              return (
-                <style type="text/css" dangerouslySetInnerHTML={{__html: font}} key={i} />
-              );
-            })}
+          {Object.keys(this.props.assets.styles).map((style, i) =>
+            <link href={this.props.assets.styles[style]} key={i} media="screen, projection"
+                  rel="stylesheet" type="text/css"/>)}
+          {this.props.fontFaces.map(function(font, i) {
+            return (
+              <style type="text/css" dangerouslySetInnerHTML={{__html: font}} key={i} />
+            );
+          })}
         </head>
         <body>
             <div id="app" dangerouslySetInnerHTML={{__html: this.props.markup}}></div>

diff --git a/src/scripts/config.js b/src/scripts/config.js
@@ -0,0 +1,49 @@
+const environment = {
+  development: {
+    isProduction: false
+  },
+  production: {
+    isProduction: true
+  }
+}[process.env.NODE_ENV || 'development'];
+
+module.exports = Object.assign({
+  host: process.env.HOST || 'localhost',
+  port: process.env.PORT,
+  url: process.env.CURRENT_URL,
+  api: process.env.API_URL,
+  app: {
+    head: {
+      titleTemplate: '%s - The Noble Qur\'an - القرآن الكريم',
+      meta: [
+        {charset: 'utf-8'},
+        {'http-equiv': 'Content-Type', content: 'text/html; charset=utf-8'},
+        {'http-equiv': 'Content-Language', content: 'EN; AR'},
+        {name: 'description', content: 'The Noble Qur\'an in many languages in an easy-to-use interface.'},
+        {name: 'keywords', content: 'quran, koran, qur\'an, al quran, al kareem, surah yasin, surah yaseen, yasin, surah, holy, arabic, iman, islam, Allah, book, muslim'}, // eslint-disable-line max-len
+        {name: 'Charset', content: 'UTF-8'},
+        {name: 'Distribution', content: 'Global'},
+        {name: 'Rating', content: 'General'},
+        {name: 'viewport', content: 'width=device-width, user-scalable=no, initial-scale=1'},
+        {name: 'google-site-verification', content: 'ehFz7FvmL7V9MzP40F8_kLABhCzqGzMDMrCnUP44Too'},
+        {property: 'og:site_name', content: 'The Noble Qur\'an - القرآن الكريم'},
+        {property: 'og:image', content: 'http://quran.com/images/thumbnail.png'},
+        {property: 'og:locale', content: 'en_US'},
+        {property: 'og:title', content: 'The Noble Qur\'an - القرآن الكريم'},
+        {property: 'og:description', content: 'The Noble Qur\'an in many languages in an easy-to-use interface.'},
+        {property: 'og:url', content: 'http://quran.com'},
+        {property: 'og:type', content: 'website'},
+        {property: 'twitter:card', content: 'summary'},
+        {property: 'twitter:title', content: 'The Noble Qur\'an - القرآن الكريم'},
+        {property: 'twitter:description', content: 'The Noble Qur\'an in many languages in an easy-to-use interface.'},
+        {property: 'twitter:image', content: 'http://quran.com/images/thumbnail.png'},
+        {property: 'twitter:image:width', content: '200'},
+        {property: 'twitter:image:height', content: '200'}
+      ],
+      link: [
+        {rel: 'apple-touch-icon', href: '/images/apple-touch-icon.pn'},
+        {rel: 'apple-touch-icon-precomposed', href: '/images/apple-touch-icon-precomposed.png'}
+      ]
+    }
+  }
+}, environment);
diff --git a/src/scripts/routes/About.js b/src/scripts/routes/About.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import IndexHeader from 'components/header/IndexHeader';
 import { NavLink } from 'fluxible-router';
+import Helmet from 'react-helmet';
 
 class About extends React.Component {
   render() {
     return (
       <div>
+        <Helmet title="About Quran.com" />
         <IndexHeader noSearch={true} />
         <div className="container-fluid about-text">
           <div className="row">

diff --git a/src/scripts/routes/Index.js b/src/scripts/routes/Index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import IndexHeader from 'components/header/IndexHeader';
 import {NavLink} from 'fluxible-router';
 import {connectToStores, provideContext} from 'fluxible-addons-react';
@@ -82,6 +83,7 @@ class Index extends React.Component {
     debug('component:Index', 'Render');
     return (
         <div className="index-page">
+          <Helmet title="The Noble Qur'an - القرآن الكريم" titleTemplate="%s" />
           <IndexHeader />
           <div className="container surah-list">
             <div className="row">

diff --git a/src/scripts/routes/Search.js b/src/scripts/routes/Search.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import SearchHeader from 'components/header/SearchHeader';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import AyahsStore from 'stores/AyahsStore';
@@ -71,6 +72,7 @@ class Search extends React.Component {
   render() {
     return (
       <div className="index-page">
+        <Helmet title={this.props.currentRoute.get('query').get('q')} />
         <SearchHeader />
         {this.renderStatsBar()}
         <div className="container surah-list">

diff --git a/src/scripts/routes/Surah.js b/src/scripts/routes/Surah.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { handleRoute, NavLink } from 'fluxible-router';
+import Helmet from 'react-helmet';
 import SurahsNav from 'components/surah/SurahsNav';
 import MasterHeader from 'components/header/MasterHeader';
 import * as AyahsActions from 'actions/AyahsActions';
@@ -200,11 +201,13 @@ class Surah extends React.Component {
   }
 
   render() {
+    const surah = this.context.getStore('SurahsStore').getSurah();
     debug('component:Surah', 'Render');
     this.onScroll();
 
     return (
       <div className="surah-body">
+        <Helmet title={surah.name.simple} />
         <div className="left-side shrink">
           <NavBrand />
           <SearchInput className="col-md-12 search-input" />