forked from FortAwesome/Font-Awesome
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Move compatibility font files into separate package
Also improve tests, publishing, README Link in the main README to the Meteor README after the Component section
- Loading branch information
Showing
8 changed files
with
240 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,36 @@ | ||
| Packaging Font Awesome for Meteor.js, the most popular | ||
| full-stack JavaScript framework on GitHub (http://meteor.com). | ||
| 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 - | ||
| [watch the first two minutes](https://www.youtube.com/watch?v=fsi0aJ9yr2o); you'll be hooked by 1:28. | ||
|
|
||
| That screencast is from 2012. In the meantime, Meteor has become a mature JavaScript-everywhere web | ||
| development framework with numerous [advantages](http://www.meteorpedia.com/read/Why_Meteor) over all | ||
| other single-page application frameworks. | ||
|
|
||
| # Issues | ||
|
|
||
| If you encounter an issue while using this package, please CC @dandv when you file it in this repo. | ||
|
|
||
|
|
||
| # DONE | ||
|
|
||
| * Tests that fonts are downloadable | ||
| * Tests that font(s) are downloadable | ||
| * Visual check | ||
|
|
||
| # TODO | ||
|
|
||
| * Figure out exactly what font files are needed and trim unnecessary ones (woff, eot, svg) - perhaps in specialized packages | ||
| * Read the `src/test.html` file into the test directly instead of via rawgit - how to do this with TinyTest? | ||
| * [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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| // 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/' | ||
| }); | ||
|
|
||
| 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); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| '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(); | ||
| }); | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters