Bulletproof fonts, rm compatibility package

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

meteor/package-fontcompat.js

@@ -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);
-});

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);
 });

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

meteor/test-fontcompat.js

@@ -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();
-  });
-
-});

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/<packageName>/.
-// Only 'woff' for now, but we expect 'woff2' soon - https://github.com/FortAwesome/Font-Awesome/pull/5062#discussion_r20936453
+// Only the 'woff' file will be used in Modern browsers. We expect 'woff2' soon - https://github.com/FortAwesome/Font-Awesome/pull/5062#discussion_r20936453
-['woff'].forEach(function (font) {
+['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