diff --git a/.gitignore b/.gitignore index 63dd5211c..623b73584 100644 --- a/.gitignore +++ b/.gitignore @@ -30,3 +30,4 @@ src/website/settingslocal.py stunnel.log .ruby-version +.build* diff --git a/meteor/README.md b/meteor/README.md new file mode 100644 index 000000000..c563959ff --- /dev/null +++ b/meteor/README.md @@ -0,0 +1,13 @@ +Packaging Font Awesome for Meteor.js, the most popular +full-stack JavaScript framework on GitHub (http://meteor.com). + +# DONE + +* Tests that fonts 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? +* Explain the magic behind how Meteor resolves CSS `@font-face src url('../fonts/...')` to the correct `/packages/.../fonts/...` path diff --git a/meteor/package.js b/meteor/package.js new file mode 100644 index 000000000..ba427fb07 --- /dev/null +++ b/meteor/package.js @@ -0,0 +1,34 @@ +// package metadata file for Meteor.js + +var packageName = 'fortawesome:fontawesome'; // http://atmospherejs.com/fortawesome:fontawesome +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: 'Font Awesome (official): 470+ scalable vector icons, customizable via CSS, Retina friendly', + 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.otf', // TODO What exactly does this file do? Can we get rid of it? + 'fonts/fontawesome-webfont.eot', // TODO What exactly does this file do? Can we get rid of it? + 'fonts/fontawesome-webfont.svg', // TODO What exactly does this file do? Can we get rid of it? + 'fonts/fontawesome-webfont.ttf', // This provides the actual font in Chrome + 'fonts/fontawesome-webfont.woff', // TODO What exactly does this file do? Can we get rid of it? + + '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.js', where); +}); diff --git a/meteor/publish.sh b/meteor/publish.sh new file mode 100755 index 000000000..45c12baab --- /dev/null +++ b/meteor/publish.sh @@ -0,0 +1,23 @@ +# Publish package on Meteor's Atmosphere.js + +# Make sure Meteor is installed, per https://www.meteor.com/install. The curl'ed script is totally safe; takes 2 minutes to read its source and check. +type meteor >/dev/null 2>&1 || { curl https://install.meteor.com/ | sh; } + +# sanity check: make sure we're in the root directory of the checkout +DIR=$( cd "$( dirname "$0" )" && pwd ) +cd $DIR/.. + +# Meteor expects package.js to be in the root directory of the checkout, so copy it there temporarily +cp meteor/package.js ./ + +# publish package, creating it if it's the first time we're publishing +PACKAGE_NAME=$(grep -i name package.js | head -1 | cut -d "'" -f 2) +PACKAGE_EXISTS=$(meteor search $PACKAGE_NAME 2>/dev/null | wc -l) + +if [ $PACKAGE_EXISTS -gt 0 ]; then + meteor publish +else + meteor publish --create +fi + +rm package.js diff --git a/meteor/runtests.sh b/meteor/runtests.sh new file mode 100755 index 000000000..eba0fd5cf --- /dev/null +++ b/meteor/runtests.sh @@ -0,0 +1,28 @@ +# Test Meteor package before publishing to Atmosphere.js + +# Make sure Meteor is installed, per https://www.meteor.com/install. The curl'ed script is totally safe; takes 2 minutes to read its source and check. +type meteor >/dev/null 2>&1 || { curl https://install.meteor.com/ | sh; } + +# sanity check: make sure we're in the root directory of the checkout +DIR=$( cd "$( dirname "$0" )" && pwd ) +cd $DIR/.. + +# Meteor expects package.js to be in the root directory of the checkout, so copy it there temporarily +cp meteor/package.js ./ + +# run tests and delete the temporary package.js even if Ctrl+C is pressed +int_trap() { + echo + echo "Tests interrupted." +} + +trap int_trap INT + +meteor test-packages ./ + +PACKAGE_NAME=$(grep -i name package.js | head -1 | cut -d "'" -f 2) +rm -rf ".build.$PACKAGE_NAME" +rm -rf ".build.local-test:$PACKAGE_NAME" +rm versions.json 2>/dev/null + +rm package.js diff --git a/meteor/test.js b/meteor/test.js new file mode 100644 index 000000000..a5f0e6513 --- /dev/null +++ b/meteor/test.js @@ -0,0 +1,42 @@ +'use strict'; + +// Check that the font files are downloadable. Meteor places assets at /packages//. +// Only the TTF actually does anything in Chrome. +['eot', 'svg', 'ttf', 'woff'].forEach(function (font) { + Tinytest.addAsync(font + ' fonts are shipped', function (test, done) { + + HTTP.get('/packages/fortawesome_fontawesome/fonts/fontawesome-webfont.' + font, function callback(error, result) { + if (error) { + test.fail({message: 'Font failed to load'}); + } else { + test.isTrue(result.content.length > 10000, 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'); + iconsDropZone.style.height = '10em'; + 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(); + }); + +});