FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2025-01-16 02:00:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bulletproof fonts, rm compatibility package

Browse Source
This commit is contained in:
Dan Dascalescu 2014-11-28 06:19:09 -08:00
parent ea0298788a
commit 9022748864
6 changed files with 21 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
meteor/README.md
View File

@ -1,15 +1,6 @@
Packaging Font Awesome for [Meteor.js](http://meteor.com), the most popular full-stack JavaScript
framework on GitHub.
[This package](https://atmospherejs.com/fortawesome/fontawesome) efficiently only loads the `woff`
font file, which is the only requirement for modern browsers. All wrapper packages you might still
find on Atmosphere bloat the client with unnecessary font files (SVG, EOT, TTF).
If you need those files for compatibility with old browsers that still somehow run Meteor
(IE8, iOS < 5 or Android < 4.4), please see the
[fontawesome-compat](https://atmospherejs.com/fortawesome/fontawesome-compat) package.
# Meteor
If you're new to Meteor, here's what the excitement is all about -
@ -27,6 +18,9 @@ If you encounter an issue while using this package, please CC @dandv when you fi
# DONE
* No need for CSS override files - Meteor will automatically "convert relative URLs to absolute URLs
when merging CSS files" [since v0.8.1](https://github.com/meteor/meteor/blob/b96c5d7962a9e59b9efaeb93eb81020e0548e378/History.md#v081)
so CSS `@font-face src url('../fonts/...')` will be resolved to the correct `/packages/.../fonts/...` path
* Tests that font(s) are downloadable
* Visual check
@ -34,5 +28,4 @@ If you encounter an issue while using this package, please CC @dandv when you fi
# TODO
* [Read the `src/test.html` file into the test directly](http://stackoverflow.com/questions/27180892/pull-an-html-file-into-a-tinytest) instead of via rawgit - how to do this with TinyTest?
* Explain the magic behind how Meteor resolves CSS `@font-face src url('../fonts/...')` to the correct `/packages/.../fonts/...` path
* Add the [woff2 font before woff](http://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face/26945264#26945264) when it becomes available

33
meteor/package-fontcompat.js
View File

@ -1,33 +0,0 @@
// package metadata file for Meteor.js
var packageName = 'fortawesome:fontawesome-compat'; // http://atmospherejs.com/fortawesome/fontawesome-compat
var where = 'client'; // where to install: 'client', 'server', or ['client', 'server']
var packageJson = JSON.parse(Npm.require("fs").readFileSync('package.json'));
Package.describe({
name: packageName,
summary: 'Compatibility package for old browsers. Use fortawesome:fontawesome instead.',
version: packageJson.version,
git: 'https://github.com/FortAwesome/Font-Awesome.git'
});
Package.onUse(function (api) {
api.versionsFrom('METEOR@0.9.2.1');
api.addFiles([
'fonts/fontawesome-webfont.eot', // IE8 or older
'fonts/fontawesome-webfont.svg', // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/1269037
'fonts/fontawesome-webfont.ttf', // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
'fonts/fontawesome-webfont.woff', // Most modern browsers
'css/font-awesome.css'
], where);
});
Package.onTest(function (api) {
api.use(packageName, where);
api.use(['tinytest', 'http'], where);
// TODO we should just bring in src/test.html - but how to do that with TinyTest?
api.addFiles('meteor/test-fontcompat.js', where);
});

7
meteor/package.js
View File

@ -15,7 +15,12 @@ Package.describe({
Package.onUse(function (api) {
api.versionsFrom('METEOR@0.9.2.1');
api.addFiles([
'fonts/fontawesome-webfont.woff', // Supported by all modern browsers. For compatibility with older browsers (that somehow still run Meteor), use the package-fontcompat.js file.
// we bundle all font files, but the client will request only one of them via the CSS @font-face rule
'fonts/fontawesome-webfont.eot', // IE8 or older
'fonts/fontawesome-webfont.svg', // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/1269037
'fonts/fontawesome-webfont.ttf', // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
'fonts/fontawesome-webfont.woff', // Most modern browsers
'css/font-awesome.css'
], where);
});

15
meteor/publish.sh
View File

@ -25,12 +25,14 @@ for PACKAGE_FILE in meteor/package*.js; do
# actually this is the first time the package is created, so pass the special --create flag and congratulate the maintainer
echo "Thank you for creating the official Meteor package for this library!"
if meteor publish --create; then
echo "Success! Please post the following to https://github.com/raix/Meteor-community-discussions/issues/14:
echo "Please post the following to https://github.com/raix/Meteor-community-discussions/issues/14:
--------------------------------------------- 8< --------------------------------------------------------
<<< ----------------------------------------- 8< --------------------------------------------------------
Happy to announce that I've published the official $PACKAGE_NAME to Atmosphere. Please star!
https://atmospherejs.com/$ATMOSPHERE_NAME
>>> ----------------------------------------- >8 --------------------------------------------------------
--------------------------------------------- >8 --------------------------------------------------------
"
else
@ -40,9 +42,9 @@ https://atmospherejs.com/$ATMOSPHERE_NAME
if (( $? > 0 )); then
# the error wasn't that the package didn't exist, so we need to ask for help
echo "We got an error. Please post it at https://github.com/raix/Meteor-community-discussions/issues/14:
<<< ----------------------------------------- 8< --------------------------------------------------------
--------------------------------------------- 8< --------------------------------------------------------
$POTENTIAL_ERROR
>>> ----------------------------------------- >8 --------------------------------------------------------
--------------------------------------------- >8 --------------------------------------------------------
"
else
echo "Thanks for releasing a new version of $PACKAGE_NAME! You can see it at
@ -53,4 +55,7 @@ https://atmospherejs.com/$ATMOSPHERE_NAME"
# we copied the file as package.js, regardless of its original name
rm package.js
# temporary build files
rm -rf ".build.$PACKAGE_NAME"
done

61
meteor/test-fontcompat.js
View File

@ -1,61 +0,0 @@
'use strict';
var packageName; // there seems to be no official way of finding out the name of the very package we're testing - http://stackoverflow.com/questions/27180709/in-a-tinytest-test-file-how-do-i-get-the-name-of-the-package
// Check that the font files are downloadable. Meteor places assets at /packages/<packageName>/.
// Only the WOFF file is used in modern browsers.
['eot', 'svg', 'ttf', 'woff'].forEach(function (font) {
Tinytest.addAsync(font + ' fonts are shipped', function (test, done) {
// curiously enough, the 'local-test:...' package isn't loaded into Package before calling Tinytest, so we can't do this determination outside this loop
if (!packageName)
Object.keys(Package).forEach(function(p) {
if (p.search(/local-test/) > -1)
packageName = p.replace('local-test:', ''); // we should stop the loop, but forEach can't do that
});
var packagePath = packageName.replace(':', '_'); // e.g. fortawesome_fontawesome
HTTP.get(
'/packages/' + packagePath + '/fonts/fontawesome-webfont.' + font,
{
headers: {
'Cache-Control': 'no-cache' // because Meteor has cached fonts even after they were removed from package.js (!) - https://github.com/meteor/meteor/issues/3196
}
},
function callback(error, result) {
if (error) {
test.fail({message: 'Font failed to load'});
} else {
// if the file is 404, Meteor will redirect to / and return the Meteor.js boilerplate
test.isTrue(result.content.length > 30000, font + ' font could not be downloaded');
}
done();
}
);
});
});
// Visual check. Fonts are set by font-awesome.css in @font-face { src: url('../fonts/...') }.
// TODO How does Meteor find those occurrences in the source and resolve them to /packages/<packageName>/fonts/... ?
Tinytest.addAsync('Visual check', function (test, done) {
var iconsDropZone = document.createElement('div');
document.body.appendChild(iconsDropZone);
// TODO ideally we'd get src/test.html straight from this repo, but no idea how to do this from TinyTest
HTTP.get('https://rawgit.com/FortAwesome/Font-Awesome/master/src/test.html', function callback(error, result) {
if (error) {
test.fail('Error getting the icons. Do we have an Internet connection to rawgit.com?');
} else {
// [^] matches across newlines. Exclude the Stacked Icons section and below, because they transclude some other HTML.
iconsDropZone.innerHTML = result.content.match(/<section[^]+(?=<h3>Stacked)/);
test.ok({message: 'Test passed if the icons look OK.'});
}
done();
});
});

4
meteor/test.js
View File

@ -3,8 +3,8 @@
var packageName; // there seems to be no official way of finding out the name of the very package we're testing - http://stackoverflow.com/questions/27180709/in-a-tinytest-test-file-how-do-i-get-the-name-of-the-package
// Check that the font files are downloadable. Meteor places assets at /packages/<packageName>/.
// Only 'woff' for now, but we expect 'woff2' soon - https://github.com/FortAwesome/Font-Awesome/pull/5062#discussion_r20936453
['woff'].forEach(function (font) {
// Only the 'woff' file will be used in Modern browsers. We expect 'woff2' soon - https://github.com/FortAwesome/Font-Awesome/pull/5062#discussion_r20936453
['eot', 'svg', 'ttf', 'woff'].forEach(function (font) {
Tinytest.addAsync(font + ' fonts are shipped', function (test, done) {
// curiously enough, the 'local-test:...' package isn't loaded into Package before calling Tinytest, so we can't do this determination outside this loop