Skip to content
This repository was archived by the owner on Jun 28, 2021. It is now read-only.

Move fonts css to be javascript #903

Merged
naveed-ahmad merged 1 commit into from
Dec 5, 2017
Merged

Move fonts css to be javascript #903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ SENTRY_KEY_CLIENT=
SENTRY_KEY_SERVER=
# Quran.com - development app, no need to worry!
FACEBOOK_APP_ID=1599019233731707
FONTS_URL=//quran-1f14.kxcdn.com
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@
"imports-loader": "0.6.5",
"json-loader": "0.5.4",
"loadable-components": "^0.3.0",
"lodash": "^4.17.4",
"morgan": "1.7.0",
"node-sass": "4.1.1",
"normalizr": "3.0.2",
Expand Down
1 change: 1 addition & 0 deletions src/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const config = {
sentryClient: process.env.SENTRY_KEY_CLIENT,
sentryServer: process.env.SENTRY_KEY_SERVER,
facebookAppId: process.env.FACEBOOK_APP_ID,
fontsURL: process.env.FONTS_URL,
locales,
defaultLocale: 'en',
app: {
Expand Down
2 changes: 2 additions & 0 deletions src/helpers/Html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Helmet from 'react-helmet';
import serialize from 'serialize-javascript';

import highlightStyles from 'helpers/highlightStyles';
import fontsStyle from 'helpers/fontsStyle';

const Html = ({ store, component, assets, loadableState }) => {
const content = component ? ReactDOM.renderToString(component) : '';
Expand Down Expand Up @@ -38,6 +39,7 @@ const Html = ({ store, component, assets, loadableState }) => {
<style>
{highlightStyles}
</style>
<style dangerouslySetInnerHTML={{ __html: fontsStyle }} />
</head>
<body>
<div id="app" dangerouslySetInnerHTML={{ __html: content }} />
Expand Down
110 changes: 63 additions & 47 deletions src/styles/fonts/_fonts.scss → src/helpers/fontsStyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,34 @@
@mixin word_font($page) {
@font-face {
font-family: p#{$page};
src: url('//quran-1f14.kxcdn.com/fonts/ttf/p#{$page}.ttf')
format('truetype');
} // @font-face {
// font-family: text#{$page};
// src: url('../../static/fonts/embed_ttf/tp#{$page}.ttf') format('truetype');
// }
.p#{$page} {
font-family: p#{$page};
}
.text-p#{$page} {
font-family: text#{$page};
}
}
import range from 'lodash/range';

import config from '../config';

@for $i from 1 through 604 {
@include word_font($i);
const baseUrl = config.fontsURL;

const makeFont = pageNumber => `
@font-face {
font-family: p${pageNumber};
src: url('${baseUrl}/fonts/ttf/p${pageNumber}.ttf')
format('truetype');
}
.p${pageNumber} {
font-family: p${pageNumber};
}
.text-p${pageNumber} {
font-family: text${pageNumber};
}
`;

const makePageNumberFonts = () =>
range(604)
.map((number) => {
const pageNumber = number + 1;

return makeFont(pageNumber);
})
.join('');

const fonts = `
${makePageNumberFonts()}

@font-face {
font-family: quran-common;
Expand All @@ -36,30 +47,30 @@

@font-face {
font-family: 'Montserrat';
src: url('//quran-1f14.kxcdn.com/fonts/montserrat/Montserrat-Regular.otf');
src: url('${baseUrl}/fonts/montserrat/Montserrat-Regular.otf');
}

@font-face {
font-family: 'Montserrat';
src: url('//quran-1f14.kxcdn.com/fonts/montserrat/Montserrat-Bold.otf');
src: url('${baseUrl}/fonts/montserrat/Montserrat-Bold.otf');
font-weight: 700;
}

@font-face {
font-family: 'Montserrat';
src: url('//quran-1f14.kxcdn.com/fonts/montserrat/Montserrat-Light.otf');
src: url('${baseUrl}/fonts/montserrat/Montserrat-Light.otf');
font-weight: 300;
}

@font-face {
font-family: 'Montserrat';
src: url('//quran-1f14.kxcdn.com/fonts/montserrat/Montserrat-Hairline.otf');
src: url('${baseUrl}/fonts/montserrat/Montserrat-Hairline.otf');
font-weight: 100;
}

@font-face {
font-family: 'Montserrat';
src: url('//quran-1f14.kxcdn.com/fonts/montserrat/Montserrat-Black.otf');
src: url('${baseUrl}/fonts/montserrat/Montserrat-Black.otf');
font-weight: 600;
}

Expand All @@ -81,69 +92,69 @@

@font-face {
font-family: 'SSStandard';
src: url('//quran-1f14.kxcdn.com/fonts/ss-standard/ss-standard.eot');
src: url('//quran-1f14.kxcdn.com/fonts/ss-standard/ss-standard.eot?#iefix')
src: url('${baseUrl}/fonts/ss-standard/ss-standard.eot');
src: url('${baseUrl}/fonts/ss-standard/ss-standard.eot?#iefix')
format('embedded-opentype'),
url('//quran-1f14.kxcdn.com/fonts/ss-standard/ss-standard.woff')
url('${baseUrl}/fonts/ss-standard/ss-standard.woff')
format('woff'),
url('//quran-1f14.kxcdn.com/fonts/ss-standard/ss-standard.ttf')
url('${baseUrl}/fonts/ss-standard/ss-standard.ttf')
format('truetype'),
url('//quran-1f14.kxcdn.com/fonts/ss-standard/ss-standard.svg#SSStandard')
url('${baseUrl}/fonts/ss-standard/ss-standard.svg#SSStandard')
format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Nafees';
src: url('//quran-1f14.kxcdn.com/fonts/nafees/nafees-nastaleeq-webfont.eot?#iefix')
src: url('${baseUrl}/fonts/nafees/nafees-nastaleeq-webfont.eot?#iefix')
format('embedded-opentype'),
url('//quran-1f14.kxcdn.com/fonts/nafees/nafees-nastaleeq-webfont.woff')
url('${baseUrl}/fonts/nafees/nafees-nastaleeq-webfont.woff')
format('woff'),
url('//quran-1f14.kxcdn.com/fonts/nafees/nafees-nastaleeq-webfont.ttf')
url('${baseUrl}/fonts/nafees/nafees-nastaleeq-webfont.ttf')
format('truetype'),
url('//quran-1f14.kxcdn.com/fonts/nafees/nafees-nastaleeq-webfont.svg#NafeesRegular')
url('${baseUrl}/fonts/nafees/nafees-nastaleeq-webfont.svg#NafeesRegular')
format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'divehi';
src: url('//quran-1f14.kxcdn.com/fonts/divehi/divehi.eot?#iefix')
src: url('${baseUrl}/fonts/divehi/divehi.eot?#iefix')
format('embedded-opentype'),
url('//quran-1f14.kxcdn.com/fonts/divehi/divehi.woff2') format('woff2'),
url('//quran-1f14.kxcdn.com/fonts/divehi/divehi.woff') format('woff'),
url('//quran-1f14.kxcdn.com/fonts/divehi/divehi.ttf') format('truetype'),
url('//quran-1f14.kxcdn.com/fonts/divehi/divehi.svg#dhivehiregular')
url('${baseUrl}/fonts/divehi/divehi.woff2') format('woff2'),
url('${baseUrl}/fonts/divehi/divehi.woff') format('woff'),
url('${baseUrl}/fonts/divehi/divehi.ttf') format('truetype'),
url('${baseUrl}/fonts/divehi/divehi.svg#dhivehiregular')
format('svg');
}

@font-face {
font-family: 'surah_names';
src: url('//quran-1f14.kxcdn.com/fonts/surah_names/surah_names.eot?yg3f94');
src: url('//quran-1f14.kxcdn.com/fonts/surah_names/surah_names.eot?yg3f94#iefix')
src: url('${baseUrl}/fonts/surah_names/surah_names.eot?yg3f94');
src: url('${baseUrl}/fonts/surah_names/surah_names.eot?yg3f94#iefix')
format('embedded-opentype'),
url('//quran-1f14.kxcdn.com/fonts/surah_names/surah_names.ttf?yg3f94')
url('${baseUrl}/fonts/surah_names/surah_names.ttf?yg3f94')
format('truetype'),
url('//quran-1f14.kxcdn.com/fonts/surah_names/surah_names.woff?yg3f94')
url('${baseUrl}/fonts/surah_names/surah_names.woff?yg3f94')
format('woff'),
url('//quran-1f14.kxcdn.com/fonts/surah_names/surah_names.svg?yg3f94#surah_names')
url('${baseUrl}/fonts/surah_names/surah_names.svg?yg3f94#surah_names')
format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'bismillah';
src: url('//quran-1f14.kxcdn.com/fonts/bismillah/bismillah.eot?yg3f94');
src: url('//quran-1f14.kxcdn.com/fonts/bismillah/bismillah.eot?yg3f94#iefix')
src: url('${baseUrl}/fonts/bismillah/bismillah.eot?yg3f94');
src: url('${baseUrl}/fonts/bismillah/bismillah.eot?yg3f94#iefix')
format('embedded-opentype'),
url('//quran-1f14.kxcdn.com/fonts/bismillah/bismillah.ttf?yg3f94')
url('${baseUrl}/fonts/bismillah/bismillah.ttf?yg3f94')
format('truetype'),
url('//quran-1f14.kxcdn.com/fonts/bismillah/bismillah.woff?yg3f94')
url('${baseUrl}/fonts/bismillah/bismillah.woff?yg3f94')
format('woff'),
url('//quran-1f14.kxcdn.com/fonts/bismillah/bismillah.svg?yg3f94#bismillah')
url('${baseUrl}/fonts/bismillah/bismillah.svg?yg3f94#bismillah')
format('svg');
font-weight: normal;
font-style: normal;
Expand Down Expand Up @@ -1119,3 +1130,8 @@ html:hover [class^='ss-'] {
.ss-calendardelete.right:after {
content: '';
}
`
.replace(/\n/g, '')
.replace(/\s/g, '');

export default fonts;
3 changes: 1 addition & 2 deletions src/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import 'components/MasterHeader';
@import 'components/SmartBanner';
@import 'fonts/fonts';
@import 'partials/search-input';
@import 'partials/dropdown';
@import 'partials/tooltip';
Expand Down Expand Up @@ -160,4 +159,4 @@ li em {
float: none;
}
}
}
}
17 changes: 8 additions & 9 deletions src/styles/partials/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@

// Dropdown icon
.options .dropdown{
.options .dropdown {
height: 100%;

.dropdown-icon.ss-icon:before{
content:"▾";
.dropdown-icon.ss-icon:before {
content: "▾";
}
}

.dropdown-menu{
.dropdown-menu {
margin-top: 0;
border-radius: 0;
@extend .montserrat;
font-family: 'Montserrat';
min-width: 100%;

width: auto;
&.audio{
&.audio {
padding-top: 25px;
}

&.dropdown-content{
.languages{
&.dropdown-content {
.languages {
padding: 15px 0;
}
}
Expand Down
16 changes: 11 additions & 5 deletions webpack/dev.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,27 +78,32 @@ module.exports = {
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
loader:
'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
loader:
'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
loader:
'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
},
{
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
loader:
'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=images/[name].[ext]&limit=10000&mimetype=image/svg+xml'
loader:
'url-loader?name=images/[name].[ext]&limit=10000&mimetype=image/svg+xml'
},
{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
Expand Down Expand Up @@ -150,6 +155,7 @@ module.exports = {
'process.env.FACEBOOK_APP_ID': JSON.stringify(
process.env.FACEBOOK_APP_ID
),
'process.env.FONTS_URL': JSON.stringify(process.env.FONTS_URL),
'process.env.SEGMENTS_KEY': JSON.stringify(process.env.SEGMENTS_KEY),
'process.env.SENTRY_KEY_CLIENT': JSON.stringify(
process.env.SENTRY_KEY_CLIENT
Expand Down
19 changes: 13 additions & 6 deletions webpack/prod.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,32 +103,38 @@ module.exports = {
// },
// 'sass-loader?sourceMap&sourceMapContents'
// ]
loader: 'css-loader?minimize&modules&importLoaders=2&sourceMap!autoprefixer-loader?browsers=last 2 version!sass-loader?outputStyle=compressed&sourceMap=true&sourceMapContents=true' // eslint-disable-line max-len
loader:
'css-loader?minimize&modules&importLoaders=2&sourceMap!autoprefixer-loader?browsers=last 2 version!sass-loader?outputStyle=compressed&sourceMap=true&sourceMapContents=true' // eslint-disable-line max-len
})
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
loader:
'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
loader:
'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
loader:
'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
},
{
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
loader:
'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=images/[name].[ext]&limit=10000&mimetype=image/svg+xml'
loader:
'url-loader?name=images/[name].[ext]&limit=10000&mimetype=image/svg+xml'
},
{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
Expand Down Expand Up @@ -157,6 +163,7 @@ module.exports = {
'process.env.FACEBOOK_APP_ID': JSON.stringify(
process.env.FACEBOOK_APP_ID
),
'process.env.FONTS_URL': JSON.stringify(process.env.FONTS_URL),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env': {
NODE_ENV: JSON.stringify('production') // for reach
Expand Down