Adding version 2.0 settings and docs.

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 => "[email protected]:voxmedia/middleman-chorus.git"
-gem "vox-google-drive", :git => "[email protected]:voxmedia/vox-google-drive.git"
+gem "tzinfo-data", platforms: [:mswin, :mingw]

Gemfile.lock

@@ -1,21 +1,3 @@
-GIT
-  remote: [email protected]:voxmedia/middleman-chorus.git
-  revision: 7078f7b191738e361685c7e6c3059e03d5972172
-  specs:
-    middleman-chorus (0.0.1)
-      middleman-core (>= 3.0.0)
-
-GIT
-  remote: [email protected]: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)

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.

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.

config.rb

@@ -1,7 +1,5 @@
 # Reload the browser automatically whenever files change
 activate :livereload
-activate :chorus
-activate :directory_indexes
 
 ###
 # Compass

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

source/partials/_editor.html.erb

@@ -24,9 +24,8 @@
     <label for="text-shadow">Text Shadow</label>
   </div>
 
-  <h2><label for="headline">Community</label></h2>
   <select class="watermark" id="watermark">
-    <option value="" disabled>Select a community logo</option>
+    <option value="" disabled>Select a watermark</option>
   </select>
 
   <h2><label for="credit">Credit</label></h2>

source/partials/_head.html.erb

@@ -3,6 +3,5 @@
 <!-- Always force latest IE rendering engine or request Chrome Frame -->
 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
 <title><%= current_page.data.title %></title>
-<link rel="stylesheet" type="text/css" href="//cloud.typography.com/706184/710840/css/fonts.css" id="fonts">
 <%= stylesheet_link_tag "main", {media: false} %>
 <meta name="description" content="<%= current_page.data.description %>" />

source/stylesheets/_vars.scss

@@ -1,6 +1,6 @@
 // colors
 $default-text-color     : #4C4E4D;
-$theme-color            : #d32027;
+$theme-color            : #2980b9;
 
 // breakpoints
 $break_xsmall         : 400px;

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