Fout fonts

.editorconfig

@@ -3,7 +3,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

client.js

@@ -24,7 +24,11 @@ const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
 const history = syncHistoryWithStore(browserHistory, store);
 
-Raven.config(config.sentryClient).install();
+try {
+  Raven.config(config.sentryClient).install();
+} catch (error) {
+  console.log(error);
+}
 
 window.quranDebug = debug;
 window.ReactDOM = ReactDOM; // For chrome dev tool support

package.json

@@ -59,6 +59,7 @@
     "express-useragent": "^0.2.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.4",
+    "fontfaceobserver": "^1.7.1",
     "html-webpack-plugin": "^1.4.0",
     "http-proxy": "^1.13.2",
     "humps": "^1.0.0",
@@ -92,6 +93,7 @@
     "react-scroll": "^1.0.4",
     "redux": "^3.3.1",
     "redux-connect": "^2.4.0",
+    "reselect": "^2.5.1",
     "resolve-url": "^0.2.1",
     "sass-loader": "2.0.1",
     "scroll-behavior": "^0.3.3",

server.js

@@ -101,11 +101,9 @@ const port = process.env.PORT || 8000;
 
 export default function serve(cb) {
   return server.listen(port, function() {
-    console.info(`
-      ==> 🌎  ENV=${process.env.NODE_ENV}
-      ==> ✅  Server is listening at http://localhost:${port}
-      ==> 🎯  API at ${process.env.API_URL}
-    `);
+    console.info(`==> 🌎  ENV=${process.env.NODE_ENV}`);
+    console.info(`==> ✅  Server is listening at http://localhost:${port}`);
+    console.info(`==> 🎯  API at ${process.env.API_URL}`);
     Object.keys(config).forEach(key => config[key].constructor.name !== 'Object' && console.info(`==> ${key}`, config[key]));
 
     cb && cb(this);

src/components/Ayah/index.js

@@ -88,13 +88,14 @@ export default class Ayah extends Component {
   }
 
   renderText() {
-    if (!this.props.ayah.words[0].code) {
+    const { ayah, currentWord } = this.props;
+
+    if (!ayah.words[0].code) {
       return false;
     }
-    const { currentWord } = this.props;
 
     let position = 0;
-    let text = this.props.ayah.words.map(word => {
+    let text = ayah.words.map(word => {
       let id = null;
       const active = word.charTypeId === CHAR_TYPE_WORD && currentWord === position;
       const className = `${word.className} ${word.highlight && word.highlight} ${active && styles.active}`; // eslint-disable-line max-len
@@ -138,6 +139,12 @@ export default class Ayah extends Component {
     return (
       <h1 className={`${styles.font} text-right text-arabic`}>
         {text}
+        <p
+          dir="rtl"
+          lang="ar"
+          className={`text-tashkeel text-p${ayah.pageNum}`}
+          dangerouslySetInnerHTML={{__html: ayah.textTashkeel}}
+        />
       </h1>
     );
   }

src/components/FontStyles/index.js

@@ -1,48 +1,55 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { fontFaceStyle, fontFaceStyleLoaded } from '../../helpers/buildFontFaces';
+import { load } from 'redux/modules/fontFaces';
 
-const bismillah = `@font-face {font-family: 'bismillah';
-  src: url('http://quran-1f14.kxcdn.com/fonts/ttf/bismillah.ttf') format('truetype')}
-  .bismillah{font-family: 'bismillah'; font-size: 36px !important; color: #000; padding: 25px 0px;}`; // eslint-disable-line
-
-class FontStyle extends Component {
-  static propTypes = {
-    fontFace: PropTypes.string.isRequired
-  }
-
-  static defaultProps = {
-    fontFace: ''
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return this.props.fontFace !== nextProps.fontFace;
-  }
-
-  render() {
-    return <style dangerouslySetInnerHTML={{__html: this.props.fontFace}} />;
-  }
-}
+import debug from 'helpers/debug';
+import selector from './selector';
 
 @connect(
   state => ({
-    fontFaces: [bismillah, ...state.ayahs.fontFaces, ...state.searchResults.fontFaces]
-  })
+    fontFaces: selector(state)
+  }),
+  { load }
 )
 export default class FontStyles extends Component {
   static propTypes = {
-    fontFaces: PropTypes.array
+    fontFaces: PropTypes.object.isRequired,
+    load: PropTypes.func.isRequired
   };
 
   shouldComponentUpdate(nextProps) {
-    return this.props.fontFaces.length !== nextProps.fontFaces.length;
+    return JSON.stringify(this.props.fontFaces) !== JSON.stringify(nextProps.fontFaces);
   }
 
   render() {
+    const { fontFaces, load } = this.props; // eslint-disable-line no-shadow
+    debug('component:FontStyles', 'render');
+
+    if (__CLIENT__) {
+      const FontFaceObserver = require('fontfaceobserver'); // eslint-disable-line global-require
+
+      Object.keys(fontFaces).filter(className => !fontFaces[className]).map(className => {
+        const font = new FontFaceObserver(className);
+
+        return font.load().then(() => load(className), () => load(className));
+      });
+    }
+
     return (
       <div>
-        {this.props.fontFaces.map((fontFace, index) => (
-          <FontStyle key={index} fontFace={fontFace} />
-        ))}
+        {
+          Object.keys(fontFaces).map(className => (
+            <style
+              key={className}
+              dangerouslySetInnerHTML={{
+                __html: fontFaces[className] ?
+                `${fontFaceStyle(className)} ${fontFaceStyleLoaded(className)}` :
+                fontFaceStyle(className)
+              }}
+            />
+          ))
+        }
       </div>
     );
   }

src/components/FontStyles/selector.js

@@ -0,0 +1,6 @@
+import { createSelector } from 'reselect';
+
+export default createSelector(
+  state => state.fontFaces,
+  (fontFaces) => fontFaces
+);

src/config.js

@@ -76,6 +76,12 @@ module.exports = Object.assign({
             'logo': 'http://quran.com/images/thumbnail.png'
           }`
         }
+      ],
+      style: [
+        {cssText: `@font-face {font-family: 'bismillah';
+          src: url('http://quran-1f14.kxcdn.com/fonts/ttf/bismillah.ttf') format('truetype')}
+          .bismillah{font-family: 'bismillah'; font-size: 36px !important; color: #000; padding: 25px 0px;}` // eslint-disable-line max-len
+        }
       ]
     }
   }

src/containers/App/index.js

@@ -9,12 +9,12 @@ import Grid from 'react-bootstrap/lib/Grid';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
-import FontStyles from '../../components/FontStyles';
-
 import debug from '../../helpers/debug';
 import config from '../../config';
 import metricsConfig from '../../helpers/metrics';
 
+import FontStyles from 'components/FontStyles';
+
 const styles = require('./style.scss');
 
 @metrics(metricsConfig)

src/containers/Search/index.js

@@ -157,12 +157,12 @@ export default class Search extends Component {
 
     return (
       <div className="index-page">
-        <Helmet title={query} />
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `.text-arabic{font-size: ${options.fontSize.arabic}rem;}
+        <Helmet
+          title={query}
+          style={[{
+            cssText: `.text-arabic{font-size: ${options.fontSize.arabic}rem;}
             .text-translation{font-size: ${options.fontSize.translation}rem;}`
-          }}
+          }]}
         />
         <Header />
         {this.renderStatsBar()}

src/containers/Surah/connect.js

@@ -15,7 +15,7 @@ export const surahsConnect = ({ store: { getState, dispatch } }) => {
   }
 
   return true;
-}
+;}
 
 export const ayahsConnect = ({ store: { dispatch, getState }, params }) => {
   debug('component:Surah:ayahsConnect', 'Init');
@@ -60,4 +60,4 @@ export const ayahsConnect = ({ store: { dispatch, getState }, params }) => {
   }
 
   return true;
-}
+};