@@ -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
index 29351c918..79a04357e 100644
--- 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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {head.base.toComponent()}
+ {head.title.toComponent()}
+ {head.meta.toComponent()}
+ {head.link.toComponent()}
+ {head.script.toComponent()}
-
{this.props.context.getStore('ApplicationStore').getPageTitle()}
-
-
-
- {Object.keys(this.props.assets.styles).map((style, i) =>
-
)}
- {this.props.fontFaces.map(function(font, i) {
- return (
-
- );
- })}
+ {Object.keys(this.props.assets.styles).map((style, i) =>
+
)}
+ {this.props.fontFaces.map(function(font, i) {
+ return (
+
+ );
+ })}
diff --git a/src/scripts/config.js b/src/scripts/config.js
new file mode 100644
index 000000000..97c8558d1
--- /dev/null
+++ 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
index 03efa3a51..3b71b1ec4 100644
--- 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 (
+
diff --git a/src/scripts/routes/Index.js b/src/scripts/routes/Index.js
index 324a6bc0e..471af9516 100644
--- 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 (
+
diff --git a/src/scripts/routes/Search.js b/src/scripts/routes/Search.js
index eb146dd28..7ff77a0bd 100644
--- 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 (
+
{this.renderStatsBar()}
diff --git a/src/scripts/routes/Surah.js b/src/scripts/routes/Surah.js
index 26c4aad42..c2c7698a3 100644
--- 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 (