diff --git a/Gemfile b/Gemfile index 12f407e8..deffdaf4 100644 --- a/Gemfile +++ b/Gemfile @@ -11,7 +11,4 @@ gem "middleman-livereload", "~> 3.1.0" gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw] # Windows does not come with time zone data -gem "tzinfo-data", platforms: [:mswin, :mingw] - -gem "middleman-chorus", :git => "git@github.com:voxmedia/middleman-chorus.git" -gem "vox-google-drive", :git => "git@github.com:voxmedia/vox-google-drive.git" \ No newline at end of file +gem "tzinfo-data", platforms: [:mswin, :mingw] \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index c236d3d1..515aa77c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,21 +1,3 @@ -GIT - remote: git@github.com:voxmedia/middleman-chorus.git - revision: 7078f7b191738e361685c7e6c3059e03d5972172 - specs: - middleman-chorus (0.0.1) - middleman-core (>= 3.0.0) - -GIT - remote: git@github.com:voxmedia/vox-google-drive.git - revision: 1f54700ed9f00a4872151919f55d211abf285096 - specs: - vox-google-drive (0.0.2) - css_parser (>= 1.3.5) - google-api-client (>= 0.7.1) - json (>= 1.8.1) - nokogiri (>= 1.6.2) - thor (>= 0.19.1) - GEM remote: http://rubygems.org/ specs: @@ -25,11 +7,6 @@ GEM minitest (~> 5.1) thread_safe (~> 0.1) tzinfo (~> 1.1) - addressable (2.3.6) - autoparse (0.3.3) - addressable (>= 2.3.1) - extlib (>= 0.9.15) - multi_json (>= 1.0.0) chunky_png (1.3.1) coffee-script (2.2.0) coffee-script-source @@ -41,30 +18,14 @@ GEM sass (~> 3.2.19) compass-import-once (1.0.4) sass (>= 3.2, < 3.5) - css_parser (1.3.5) - addressable em-websocket (0.5.1) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) erubis (2.7.0) eventmachine (1.0.3) execjs (2.2.0) - extlib (0.9.16) - faraday (0.9.0) - multipart-post (>= 1.2, < 3) ffi (1.9.3) fssm (0.2.10) - google-api-client (0.7.1) - addressable (>= 2.3.2) - autoparse (>= 0.3.3) - extlib (>= 0.9.15) - faraday (>= 0.9.0) - jwt (>= 0.1.5) - launchy (>= 2.1.1) - multi_json (>= 1.0.0) - retriable (>= 1.4) - signet (>= 0.5.0) - uuidtools (>= 2.1.0) haml (4.0.5) tilt hike (1.2.3) @@ -73,10 +34,7 @@ GEM http_parser.rb (0.6.0) i18n (0.6.9) json (1.8.1) - jwt (1.0.0) kramdown (1.4.0) - launchy (2.4.2) - addressable (~> 2.3) listen (1.3.1) rb-fsevent (>= 0.9.3) rb-inotify (>= 0.9) @@ -114,12 +72,8 @@ GEM sprockets (~> 2.2) sprockets-helpers (~> 1.1.0) sprockets-sass (~> 1.1.0) - mini_portile (0.6.0) minitest (5.3.5) multi_json (1.10.1) - multipart-post (2.0.0) - nokogiri (1.6.3.1) - mini_portile (= 0.6.0) padrino-helpers (0.12.2) i18n (~> 0.6, >= 0.6.7) padrino-support (= 0.12.2) @@ -136,13 +90,7 @@ GEM ffi (>= 0.5.0) rb-kqueue (0.2.3) ffi (>= 0.5.0) - retriable (1.4.1) sass (3.2.19) - signet (0.5.1) - addressable (>= 2.2.3) - faraday (>= 0.9.0.rc5) - jwt (>= 0.1.5) - multi_json (>= 1.0.0) sprockets (2.12.1) hike (~> 1.2) multi_json (~> 1.0) @@ -162,15 +110,12 @@ GEM uglifier (2.5.1) execjs (>= 0.3.0) json (>= 1.8.0) - uuidtools (2.1.5) PLATFORMS ruby DEPENDENCIES middleman (~> 3.3.3) - middleman-chorus! middleman-livereload (~> 3.1.0) tzinfo-data - vox-google-drive! wdm (~> 0.1.0) diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..9a4cca55 --- /dev/null +++ b/LICENSE @@ -0,0 +1,13 @@ +Copyright (c) 2014 Vox Media Inc., Yuri Victor, Greg MacWilliam. + +BSD license + +Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. + +3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/README.md b/README.md index c1ce845c..5ceaed9b 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,28 @@ # Meme v.2 +<<<<<<< HEAD <<<<<<< HEAD Contributors: Yuri Victor, Joshua Benton, Matt Montgomery, Ivar Vong, Steve Peters, Flip Stewart. ======= Contributors: Yuri Victor, Joshua Benton, Matt Montgomery, Ivar Vong, Steve Peters, Flip Stewart. Backbone refactor by Greg MacWilliam. >>>>>>> Complete refactor with model-view separation. Fixes several UI bugs. +======= +Contributors: Yuri Victor, Joshua Benton, Matt Montgomery, Ivar Vong, Steve Peters, Flip Stewart. Version-2 refactor by Greg MacWilliam. +>>>>>>> Adding version 2.0 settings and docs. -Meme is a generator that Vox Media uses to create social sharing images. +Meme is a generator that Vox Media uses to create social sharing images. See working version at [http://www.sbnation.com/a/meme](http://www.sbnation.com/a/meme). ![screenshot](readme.png) +## What's new in version 2.0? + +* Refactored into a formal MV* app. +* Fixed bugs with rendering state and repeat drag-n-drop images. +* Improved initial rendering with loaded web fonts. +* Improved cross-origin options: both for base64 images and CORS. +* Highly (and easily!) customizable editor and theme options. +* Watermark selector. + ## Install * `git clone https://github.com/voxmedia/meme.git` @@ -20,10 +33,11 @@ This will start a local web server running at: `http://localhost:4567/` ## Customization -Settings and controls can be customized via `source/javascripts/settings.js`. Most menu options can be configured directly through settings. +### Setup -## Examples +Settings and controls are customized through `source/javascripts/settings.js.erb`. +<<<<<<< HEAD * https://twitter.com/voxdotcom/status/481671889094340608 * https://twitter.com/voxdotcom/status/479228288221470721 * https://twitter.com/voxdotcom/status/481619042545844225 @@ -38,16 +52,22 @@ I chose middleman because there are great sensible defaults, but there's no reas ======= >>>>>>> Complete refactor with model-view separation. Fixes several UI bugs. ## Extras +======= +### Fonts +>>>>>>> Adding version 2.0 settings and docs. -### Add fonts +Include your own fonts in `stylesheets/_fonts.scss`. Then add your fonts as options into the settings file. -Include your own fonts in `stylesheets/_fonts.scss` +### Editor theme -Fonts are handled with sizes as variables in the javascript and can be [added here](https://github.com/voxmedia/meme/blob/master/source/partials/_javascripts.html.erb#L8) +Set the `$theme-color` variable in `source/stylesheets/_vars.scss`. -### Add watermark +## Examples -Convert an svg to base64 and [add here](https://github.com/voxmedia/meme/blob/master/source/partials/_javascripts.html.erb#L8) +* http://www.sbnation.com/a/meme +* https://twitter.com/voxdotcom/status/481671889094340608 +* https://twitter.com/voxdotcom/status/479228288221470721 +* https://twitter.com/voxdotcom/status/481619042545844225 ## Contributing @@ -57,18 +77,3 @@ Convert an svg to base64 and [add here](https://github.com/voxmedia/meme/blob/ma 4. Push to the branch (`git push origin my-new-feature`) 5. Create a new Pull Request -## License - -Copyright (c) 2014 Vox Media Inc., Yuri Victor, Greg MacWilliam - -BSD license - -Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: - -1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. - -2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. - -3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. - -THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/chorus-config.json b/chorus-config.json deleted file mode 100644 index 4e46bf3c..00000000 --- a/chorus-config.json +++ /dev/null @@ -1 +0,0 @@ -{ "id": 188, "build_type": "middleman", "slug": "meme", "namespace": "sbnation-meme-builder", "url_prefix": "/a/meme", "community": "sbnation.com", "s3_bucket": "chorus-editorial-apps", "cdn_host": "http://ea-cdn.voxmedia.com" } \ No newline at end of file diff --git a/config.rb b/config.rb index 51b13a91..286adc3c 100644 --- a/config.rb +++ b/config.rb @@ -1,7 +1,5 @@ # Reload the browser automatically whenever files change activate :livereload -activate :chorus -activate :directory_indexes ### # Compass diff --git a/readme.png b/readme.png index 9c70cab0..eb8bae91 100644 Binary files a/readme.png and b/readme.png differ diff --git a/source/images/bloodyelbow.png b/source/images/bloodyelbow.png deleted file mode 100644 index d001ee5c..00000000 Binary files a/source/images/bloodyelbow.png and /dev/null differ diff --git a/source/images/mmafighting.png b/source/images/mmafighting.png deleted file mode 100644 index f102101d..00000000 Binary files a/source/images/mmafighting.png and /dev/null differ diff --git a/source/images/mmamania.png b/source/images/mmamania.png deleted file mode 100644 index e491d7cb..00000000 Binary files a/source/images/mmamania.png and /dev/null differ diff --git a/source/images/sbnation.png b/source/images/sbnation.png deleted file mode 100644 index ce98aa80..00000000 Binary files a/source/images/sbnation.png and /dev/null differ diff --git a/source/images/theverge.png b/source/images/theverge.png new file mode 100644 index 00000000..fa6226d0 Binary files /dev/null and b/source/images/theverge.png differ diff --git a/source/images/vox.png b/source/images/vox.png new file mode 100644 index 00000000..650f269f Binary files /dev/null and b/source/images/vox.png differ diff --git a/source/javascripts/settings.js.erb b/source/javascripts/settings.js.erb index 884f9657..de994199 100644 --- a/source/javascripts/settings.js.erb +++ b/source/javascripts/settings.js.erb @@ -1,44 +1,62 @@ var MEME_SETTINGS = { creditText: 'Source:', // Default "credits" text. creditSize: 12, // Font size for credit text. - downloadName: 'sbnation-share', // The name of the downloaded image file. + downloadName: 'share', // The name of the downloaded image file (will have a ".png" extension added). fontColor: 'white', // Universal font color. - fontFamily: '"Knockout 28 A","Knockout 28 B"', // Default font family selection. + + // Universal font family for texts: + // Note that you'll need to included quoted font names as you would in CSS, ie: '"Knockout 28 B"'. + fontFamily: 'Helvetica Neue', // Font family options: set to empty array to disable font selector. - fontFamilyOpts: [], - fontSize: 24, // Font size of main headline. + // These options may also be formatted as {text:'Knockout', value:'"Knockout 28 B"'}. + fontFamilyOpts: ['Arial', 'Helvetica Neue', 'Comic Sans MS'], + + // Font size of main headline: + fontSize: 24, // Font size options: set to empty array to disable font-size selector. fontSizeOpts: [ {text: 'Small text', value: 14}, {text: 'Medium text', value: 24}, {text: 'Large text', value: 36} ], + headlineText: 'Write your own headline', // Default headline text. height: 378, // Canvas rendering height. imageScale: 1, // Background image scale. imageSrc: '', // Default background image path. MUST reside on host domain, or use base64 data. overlayAlpha: 0.5, // Opacity of image overlay. - overlayColor: '#000', // Image overlay color, or blank for no overlay. + + // Image overlay color, or blank ('') for no overlay: + overlayColor: '#000', // Overlay color options: set to empty array to disable overlay options selector. - overlayColorOpts: ['#000', '#777', '#d32027'], + overlayColorOpts: ['#000', '#777', '#2980b9'], paddingRatio: 0.05, // Percentage of canvas width to use as edge padding. - textAlign: 'left', // Text alignment. Valid values are "left", "center", and "right". + + // Text alignment: valid settings are "left", "center", and "right". + textAlign: 'left', // Text alignment options: set to empty array to disable alignment picker. textAlignOpts: [ {text: 'Align left', value: 'left'}, {text: 'Align center', value: 'center'}, {text: 'Align right', value: 'right'} ], - textShadow: false, // Text shadow. - textShadowEdit: false, // Toggles text shadow control within the editor. + + textShadow: false, // Text shadow toggle. + textShadowEdit: true, // Toggles text shadow control within the editor. watermarkAlpha: 1, // Opacity of watermark image. - watermarkMaxWidthRatio: 1, // Maximum allowed width of watermark, relative to canvas width. - watermarkSrc: (localStorage && localStorage.getItem('sbn_meme_watermark')) || '<%= image_path("sbnation.png") %>', // Load watermark pref out of localStorage. + watermarkMaxWidthRatio: 0.25, // Maximum allowed width of watermark (percentage of total canvas width). + + // Path to the watermark image source, or blank for no watermark: + // Alternatively, use '<%= asset_data_uri("vox.png") %>' to populate the watermark with base64 data, avoiding Cross-Origin issues. + watermarkSrc: '<%= image_path("vox.png") %>', + + // Watermark image options: set to empty array to disable watermark picker. + // NOTE: only populate the "data" attributes with base64 data when concerned about Cross-Origin requests... + // Otherwise, just leave "data" attributes blank and allow images to load from your server. watermarkOpts: [ - {text: 'SB Nation', value: '<%= image_path("sbnation.png") %>', data: ''}, // data: '<% asset_data_uri("sbnation.png") %>' - {text: 'Bloody Elbow', value: '<%= image_path("bloodyelbow.png") %>', data: ''}, - {text: 'MMA Fighting', value: '<%= image_path("mmafighting.png") %>', data: ''}, - {text: 'MMA Mania', value: '<%= image_path("mmamania.png") %>', data: ''} + {text: 'Vox', value: '<%= image_path("vox.png") %>', data: '<%= asset_data_uri("vox.png") %>'}, + {text: 'The Verge', value: '<%= image_path("theverge.png") %>', data: ''} ], + width: 755 // Canvas rendering width. }; \ No newline at end of file diff --git a/source/partials/_editor.html.erb b/source/partials/_editor.html.erb index 049e0f66..03708220 100644 --- a/source/partials/_editor.html.erb +++ b/source/partials/_editor.html.erb @@ -24,9 +24,8 @@ -

diff --git a/source/partials/_head.html.erb b/source/partials/_head.html.erb index 26b92082..88245d1b 100644 --- a/source/partials/_head.html.erb +++ b/source/partials/_head.html.erb @@ -3,6 +3,5 @@ <%= current_page.data.title %> - <%= stylesheet_link_tag "main", {media: false} %> diff --git a/source/stylesheets/_vars.scss b/source/stylesheets/_vars.scss index 263396b3..eccf1162 100644 --- a/source/stylesheets/_vars.scss +++ b/source/stylesheets/_vars.scss @@ -1,6 +1,6 @@ // colors $default-text-color : #4C4E4D; -$theme-color : #d32027; +$theme-color : #2980b9; // breakpoints $break_xsmall : 400px; diff --git a/source/stylesheets/modules/_m-editor.scss b/source/stylesheets/modules/_m-editor.scss index 784e4498..dfb551fe 100644 --- a/source/stylesheets/modules/_m-editor.scss +++ b/source/stylesheets/modules/_m-editor.scss @@ -36,7 +36,8 @@ $m: '.m-editor'; .text-align, .font-size, .font-family, - .text-shadow { + .text-shadow, + .watermark { display: none; }