diff --git a/meteor/README.md b/meteor/README.md index 794241c46..f579ce5a9 100644 --- a/meteor/README.md +++ b/meteor/README.md @@ -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 diff --git a/meteor/package-fontcompat.js b/meteor/package-fontcompat.js deleted file mode 100644 index b99c6c35c..000000000 --- a/meteor/package-fontcompat.js +++ /dev/null @@ -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); -}); diff --git a/meteor/package.js b/meteor/package.js index 6ff4f9c46..40708695b 100644 --- a/meteor/package.js +++ b/meteor/package.js @@ -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); }); diff --git a/meteor/publish.sh b/meteor/publish.sh index 610ac7f3c..e5fa1d380 100755 --- a/meteor/publish.sh +++ b/meteor/publish.sh @@ -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 diff --git a/meteor/test-fontcompat.js b/meteor/test-fontcompat.js deleted file mode 100644 index 8feb9aa61..000000000 --- a/meteor/test-fontcompat.js +++ /dev/null @@ -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//. -// 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//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(/Stacked)/); - test.ok({message: 'Test passed if the icons look OK.'}); - } - - done(); - }); - -}); diff --git a/meteor/test.js b/meteor/test.js index aaa050838..5cce965ef 100644 --- a/meteor/test.js +++ b/meteor/test.js @@ -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//. -// 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