Ruby gem for integrating Hype animations into the Rails Asset Pipeline

nmagedman · March 21, 2016, 12:34pm

I’ve written a Ruby gem that makes it easier to integrate Hype animations into the Rails Asset Pipeline. See https://github.com/nmagedman/hype_assets for installation/usage instructions. I would definitely appreciate feedback!

I rewrite the URLs (really, base URL and filenames) within the hype_generated_script.js file in order to take advantage of the pipeline’s CDN and digest fingerprint features, however currently I do that only for images and the HYPE-123.{full,thin}.min.js scripts. I do not replace any fonts.

What is the standard Hype way of handling fonts?

Daniel · March 21, 2016, 2:17pm

Very cool!

Font files are referenced in the <head> within style tags:

["\t<style>\n@font-face {\n font-family: 'sfns_displayregular';\n src: url('SFFont.hyperesources/system_san_francisco_display_regular-webfont.eot');\n src: url('SFFont.hyperesources/system_san_francisco_display_regular-webfont.eot?#iefix') format('embedded-opentype'),\n url('SFFont.hyperesources/system_san_francisco_display_regular-webfont.woff2') format('woff2'),\n url('SFFont.hyperesources/system_san_francisco_display_regular-webfont.woff') format('woff'),\n url('SFFont.hyperesources/system_san_francisco_display_regular-webfont.ttf') format('truetype'),\n url('SFFont.hyperesources/system_san_francisco_display_regular-webfont.svg#sfns_displayregular') format('svg');\n font-weight: normal;\n font-style: normal;\n\n} \n\t</style>"]

Here’s a document to test with: SFFont.zip (128.5 KB)

Because we use closure to minify our outputted code, new Hype versions may use new variables in our exported JavaScript. As long as you’re only rewriting strings containing the DOCUMENTNAME.hyperesources folder + filenames (and not depending on the existence of a separate variable in the output) then this gem should work across versions. You may also want to make clear that this is for Tumult Hype 3 – we have many users continuing to use Tumult Hype 2.

Daniel · March 29, 2016, 4:11pm

Hi @nmagedman – Did that help resolve your question about handling fonts?

nmagedman · April 4, 2016, 8:20am

Yes, thank you! HypeAssets now updates font url references in the injected CSS @font-face blob.

I also made the regexp code more flexible in its string matching, so we are not locked to specific variable names. This means we now support HYPE-5xx builds (previously, I was working with HYPE-4xx-based scripts).

I’ve updated the README to clarify that we support Hype 3.

Still TODO, support embedded javascript libraries. @Daniel, would you be able to put together a simple animation that demonstrates using an embedded library? Thank you!

ChrisRees · July 2, 2017, 2:01pm

Hey, I’m just wondering, if I use Rails to load Hype docs using this gem, will I be able to call data from a Rails database inside my Hype document? And if that’s the case, how would I do something like that?