Name: meme
Owner: Vox Media
Description: Meme generator
Created: 2014-06-25 19:07:11.0
Updated: 2018-01-16 19:16:00.0
Pushed: 2017-11-28 04:59:19.0
Homepage: null
Size: 4057
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Contributors: Yuri Victor, Joshua Benton, Matt Montgomery, Ivar Vong, Steve Peters, Flip Stewart, Greg MacWilliam.
Meme is a generator that Vox Media uses to create social sharing images. See working version at http://www.sbnation.com/a/meme.
git clone https://github.com/voxmedia/meme.git
bundle install
bundle exec middleman
This will start a local web server running at: http://localhost:4567/
Settings and controls are configured through source/javascripts/settings.js.erb
. The settings file has ample comments to document configuration.
Include your own fonts in stylesheets/_fonts.scss
, then add your font options into the settings file.
Set the theme-color variable in source/stylesheets/_vars.scss
. That one color will be tinted across all editor controls.
This is an HTML5 Canvas-based application, and thus comes with some security restrictions when loading graphics across domains (ex: a canvas element on http://tatooine.com cannot export with an image hosted on http://dagobah.com).
If you're hosting this application on the same domain that serves your images, then congratulations! You have no problems. However, if you're going through a CDN, then you'll probably encounter some cross-domain security issues; at which time you have two options:
Follow this excellent MDN article about configuring “Access-Control-Allow-Origin” headers. You'll need to enable these headers on your CDN, at which time the Meme app should be able to request images from it.
Embed all of your watermark images as base64 data URIs within the settings.js.erb
file. The asset pipeline's asset_data_uri
helper method makes this very easy, and effectively embeds all image data within your JavaScript. The downside here is that your JavaScript will become a very large payload as you include more images. In the long term, getting CORS headers configured will be a better option.
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)