Skip to content

Commit

Permalink
Add Reaction CDN sources for font and favicon assets (reactioncommerc…
Browse files Browse the repository at this point in the history
…e#1223)

* switch FontAwesome source to Cloudflare CDN

* clean up browser policy configs and add Cloudflare

* remove unnecessary version query string from font urls

* switch fonts to Reaction CDN

* clean up policy config

* add custom headers for CDN assets

* add default favicons to default theme for all platforms

* add missing import

* add local font file fallback and fix fa console error

* back to Cloudflare for FontAwesome CDN

* Meteor 1.4.1 and update packages
  • Loading branch information
jshimko authored and kieckhafer committed Jul 29, 2016
1 parent c76282e commit 2f4a0a6
Show file tree
Hide file tree
Showing 16 changed files with 206 additions and 97 deletions.
2 changes: 1 addition & 1 deletion .meteor/release
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[email protected]
[email protected].0.1
12 changes: 6 additions & 6 deletions .meteor/versions
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ aldeed:[email protected]
[email protected]
[email protected]
[email protected]
autoupdate@1.2.11
autoupdate@1.3.11
[email protected]
[email protected]
[email protected]
Expand Down Expand Up @@ -53,13 +53,13 @@ cfs:[email protected]
cfs:[email protected]
[email protected]
chuangbo:[email protected]
coffeescript@1.1.4
dburles:factory@1.0.0
coffeescript@1.2.3
dburles:factory@1.1.0
[email protected]
ddp-client@1.2.9
ddp-client@1.3.0
[email protected]
[email protected]
ddp-server@1.2.10
ddp-server@1.3.9
[email protected]
[email protected]
dispatch:[email protected]
Expand Down Expand Up @@ -103,7 +103,7 @@ meteorhacks:[email protected]
meteorhacks:[email protected]
meteorhacks:[email protected]
meteorhacks:[email protected]
minifier-css@1.1.13
minifier-css@1.2.13
[email protected]
[email protected]
[email protected]
Expand Down
91 changes: 91 additions & 0 deletions imports/plugins/included/default-theme/client/favicons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/**
* Set up default Reaction favicon for all browsers/platforms
* Assets generated by https://realfavicongenerator.net
*/


// folder path where all assets live
const basePath = "https://assets.reactioncommerce.com/favicon/";


// define link tags
const linkTags = [
{
rel: "apple-touch-icon",
sizes: "180x180",
href: basePath + "apple-touch-icon.png"
},
{
rel: "icon",
type: "image/png",
sizes: "32x32",
href: basePath + "favicon-32x32.png"
},
{
rel: "icon",
type: "image/png",
sizes: "16x16",
href: basePath + "favicon-16x16.png"
},
{
rel: "manifest",
href: basePath + "manifest.json"
},
{
rel: "mask-icon",
color: "#5bbad5",
href: basePath + "safari-pinned-tab.svg"
},
{
rel: "shortcut icon",
href: basePath + "favicon.ico"
}
];


// define meta tags
const metaTags = [
{
name: "msapplication-config",
content: basePath + "browserconfig.xml"
},
{
name: "theme-color",
content: "#ffffff"
}
];


/**
* Add a tag to the <head> of the page
* @param {String} type - tag type (link, meta, etc.)
* @param {Object} details - key/value pairs for tag attributes
* @return {undefined} no return value
*/
function addTag(type, details) {
let props = "";
for (let key in details) {
if ({}.hasOwnProperty.call(details, key)) {
props += `${key}="${details[key]}" `;
}
}
const tag = `<${type} ${props}/>`;
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", tag);
}


// add the favicon tags to the <head>
linkTags.forEach(tag => addTag("link", tag));
metaTags.forEach(tag => addTag("meta", tag));


// HTML output should look like this...
//
// <link rel="apple-touch-icon" sizes="180x180" href="https://assets.reactioncommerce.com/favicon/apple-touch-icon.png">
// <link rel="icon" type="image/png" href="https://assets.reactioncommerce.com/favicon/favicon-32x32.png" sizes="32x32">
// <link rel="icon" type="image/png" href="https://assets.reactioncommerce.com/favicon/favicon-16x16.png" sizes="16x16">
// <link rel="manifest" href="https://assets.reactioncommerce.com/favicon/manifest.json">
// <link rel="mask-icon" href="https://assets.reactioncommerce.com/favicon/safari-pinned-tab.svg" color="#5bbad5">
// <link rel="shortcut icon" href="https://assets.reactioncommerce.com/favicon/favicon.ico">
// <meta name="msapplication-config" content="https://assets.reactioncommerce.com/favicon/browserconfig.xml">
// <meta name="theme-color" content="#ffffff">
2 changes: 2 additions & 0 deletions imports/plugins/included/default-theme/client/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// Favicons
import "./favicons";

// Styles
import "./styles/main.less";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@

.sign-in-text-facebook:before {
content: "\f09a";
font-family: FontAwesome;
font-family: "FontAwesome", "FontAwesomeFallback";
.padding-right(10px);
font-size: 17px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@

&:after {
content: "\f058";
font-family: "FontAwesome";
font-family: "FontAwesome", "FontAwesomeFallback";
font-size: 3rem;
color: @brand-success;
display: block;
Expand Down Expand Up @@ -112,7 +112,7 @@
&:first-child {
border-radius: 0 @btn-border-radius-base 0 0;
}

&:last-child {
border-radius: 0 0 @btn-border-radius-base 0;
border-width: 0 1px 1px 0;
Expand Down
68 changes: 53 additions & 15 deletions imports/plugins/included/default-theme/client/styles/fonts.less
Original file line number Diff line number Diff line change
@@ -1,29 +1,63 @@
// Font Awesome
// Fonts are installed in package.json postinstall script
@import "{}/node_modules/font-awesome/less/font-awesome.less";
// Font files are transferred to /public/fonts in package.json postinstall script
@import "{}/node_modules/font-awesome/less/variables.less";
@import "{}/node_modules/font-awesome/less/mixins.less";
@import "{}/node_modules/font-awesome/less/core.less";
@import "{}/node_modules/font-awesome/less/larger.less";
@import "{}/node_modules/font-awesome/less/fixed-width.less";
@import "{}/node_modules/font-awesome/less/list.less";
@import "{}/node_modules/font-awesome/less/bordered-pulled.less";
@import "{}/node_modules/font-awesome/less/animated.less";
@import "{}/node_modules/font-awesome/less/rotated-flipped.less";
@import "{}/node_modules/font-awesome/less/stacked.less";
@import "{}/node_modules/font-awesome/less/icons.less";
@import "{}/node_modules/font-awesome/less/screen-reader.less";


// overwrite path from node_modules
@font-face {
font-family: 'FontAwesome';
src: url('/fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-family: "FontAwesome";
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.eot");
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "FontAwesomeFallback";
src: url("/fonts/fontawesome-webfont.eot");
src: url("/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/fontawesome-webfont.woff2") format("woff2"), url("/fonts/fontawesome-webfont.woff") format("woff"), url("/fonts/fontawesome-webfont.ttf") format("truetype"), url("/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}

// Custom font
@font-face {
font-family: 'fontello';
src: url('fonts/fontello.eot?59440230');
src: local(''),
url('/resources/fonts/fontello.eot?59440230#iefix') format('embedded-opentype'),
url('/resources/fonts/fontello.woff2?59440230') format('woff2'),
url('/resources/fonts/fontello.woff?59440230') format('woff'),
url('/resources/fonts/fontello.ttf?59440230') format('truetype'),
url('/resources/fonts/fontello.svg?59440230#fontello') format('svg');
font-family: "fontello";
src: url("https://assets.reactioncommerce.com/fonts/fontello/fontello.eot?59440230");
src: local(""),
url("https://assets.reactioncommerce.com/fonts/fontello/fontello.eot?59440230#iefix") format("embedded-opentype"),
url("https://assets.reactioncommerce.com/fonts/fontello/fontello.woff2?59440230") format("woff2"),
url("https://assets.reactioncommerce.com/fonts/fontello/fontello.woff?59440230") format("woff"),
url("https://assets.reactioncommerce.com/fonts/fontello/fontello.ttf?59440230") format("truetype"),
url("https://assets.reactioncommerce.com/fonts/fontello/fontello.svg?59440230#fontello") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "fontello-fallback";
src: url("/resources/fonts/fontello.eot?59440230");
src: local(""),
url("/resources/fonts/fontello.eot?59440230#iefix") format("embedded-opentype"),
url("/resources/fonts/fontello.woff2?59440230") format("woff2"),
url("/resources/fonts/fontello.woff?59440230") format("woff"),
url("/resources/fonts/fontello.ttf?59440230") format("truetype"),
url("/resources/fonts/fontello.svg?59440230#fontello") format("svg");
font-weight: normal;
font-style: normal;
}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
Expand All @@ -35,8 +69,12 @@
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
.fa {
font-family: "FontAwesome", "FontAwesomeFallback";
}

[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello", "fontello-fallback";
font-style: normal;
font-weight: normal;
speak: none;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

.rui.select:after {
content: "\f078";
font-family: fontawesome;
font-family: "FontAwesome", "FontAwesomeFallback";
position: absolute;
right: 0;
top: 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@

.rui.tagnav.vertical .navbar-item.has-dropdown > .rui.tag.link:after {
content: "\f107";
font-family: "fontawesome";
font-family: "FontAwesome", "FontAwesomeFallback";
position: absolute;
top: 0;
right: 10px;
Expand Down
1 change: 1 addition & 0 deletions lib/api/router/metadata.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { DocHead } from "meteor/kadira:dochead";
import { ReactionProduct } from "/lib/api";
import { Shops } from "/lib/collections";
import { getShopId } from "/lib/api";
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"jquery": "^2.2.4",
"jquery-i18next": "^0.2.0",
"jquery-ui": "1.10.5",
"lodash": "^4.14.0",
"lodash": "^4.14.1",
"meteor-node-stubs": "^0.2.3",
"moment": "^2.14.1",
"moment-timezone": "^0.5.4",
Expand All @@ -53,9 +53,9 @@
"paypal-rest-sdk": "^1.6.9",
"postcss": "^5.1.1",
"postcss-js": "^0.1.3",
"react": "^15.2.1",
"react": "^15.3.0",
"react-color": "^2.2.1",
"react-dom": "^15.2.1",
"react-dom": "^15.3.0",
"react-textarea-autosize": "^4.0.4",
"sortablejs": "^1.4.2",
"stripe": "^4.9.0",
Expand Down
Binary file modified public/favicon.ico
Binary file not shown.
44 changes: 44 additions & 0 deletions server/security/policy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { BrowserPolicy } from "meteor/browser-policy-common";
import { WebApp } from "meteor/webapp";


/**
* Set headers for Reaction CDN
*/
WebApp.rawConnectHandlers.use((req, res, next) => {
if (req._parsedUrl.pathname.match(/\.(ttf|ttc|otf|eot|woff|svg|font\.css|css)$/)) {
res.setHeader("Access-Control-Allow-Origin", "assets.reactioncommerce.com");
}
next();
});


/**
* Set browser policies
*/
if (process.env.NODE_ENV === "development") {
BrowserPolicy.content.allowOriginForAll("localhost:*");
BrowserPolicy.content.allowConnectOrigin("ws://localhost:*");
BrowserPolicy.content.allowConnectOrigin("http://localhost:*");
BrowserPolicy.content.allowConnectOrigin("https://localhost:*");
BrowserPolicy.framing.allowAll();
}

BrowserPolicy.content.allowOriginForAll("*.facebook.com");
BrowserPolicy.content.allowOriginForAll("*.fbcdn.net");
BrowserPolicy.content.allowOriginForAll("connect.facebook.net");
BrowserPolicy.content.allowOriginForAll("*.googleusercontent.com");

BrowserPolicy.content.allowImageOrigin("fbcdn-profile-a.akamaihd.net");
BrowserPolicy.content.allowImageOrigin("secure.gravatar.com");
BrowserPolicy.content.allowImageOrigin("i0.wp.com");

BrowserPolicy.content.allowFontDataUrl();
BrowserPolicy.content.allowOriginForAll("assets.reactioncommerce.com");
BrowserPolicy.content.allowOriginForAll("cdnjs.cloudflare.com");
BrowserPolicy.content.allowOriginForAll("fonts.googleapis.com");
BrowserPolicy.content.allowOriginForAll("fonts.gstatic.com");
BrowserPolicy.content.allowOriginForAll("fonts.gstatic.com");

BrowserPolicy.content.allowOriginForAll("enginex.kadira.io");
BrowserPolicy.content.allowOriginForAll("*.stripe.com");
11 changes: 0 additions & 11 deletions server/security/policy/accounts.js

This file was deleted.

29 changes: 0 additions & 29 deletions server/security/policy/core.js

This file was deleted.

Loading

0 comments on commit 2f4a0a6

Please sign in to comment.