code_sync 0.6.7

data/lib/code_sync/temp_asset.rb

@@ -0,0 +1,20 @@
+require 'sprockets'
+
+module CodeSync
+  class TempAsset < Sprockets::BundledAsset
+    def self.create_from content, options={}
+      environment, filename, extension = options.values_at(:env, :filename, :extension)
+
+      filename    = filename || "compiled"
+
+      tempfile        = Tempfile.new([filename, extension])
+
+      tempfile.write(content) && tempfile.rewind
+
+      pathname        = Pathname.new(tempfile.path)
+      logical_path    = File.basename(pathname)
+
+      new(environment, logical_path, pathname)
+    end
+  end
+end

data/lib/code_sync/version.rb

@@ -0,0 +1,3 @@
+module CodeSync
+  Version = "0.6.7"
+end

data/lib/middleman_extension.rb

@@ -0,0 +1,43 @@
+if defined?(Middleman)
+  require "middleman-core"
+  require "middleman-more"
+
+
+  module CodeSync::MiddlemanExtension
+    class << self
+      def registered app, options_hash={}
+
+        app.after_configuration do
+          unless build?
+            pid = fork do
+              source = begin
+                File.join(app.root, app.source)
+              rescue
+                File.join(Dir.pwd(),'source')
+              end
+
+              CodeSync::Manager.start(root: source,
+                sprockets: (sprockets rescue nil),
+                forbid_saving: (options_hash[:forbid_saving] == true),
+                parent:'middleman'
+              )
+            end
+          end
+        end
+
+        trap("SIGINT") do
+          Process.kill(9,pid) rescue nil
+        end
+      end
+    end
+
+    module InstanceMethods
+
+    end
+  end
+
+  Middleman::Extensions.register(:code_sync) do
+    require 'code_sync'
+    CodeSync::MiddlemanExtension
+  end
+end

data/readme.md

@@ -0,0 +1,26 @@
+CodeSync is a utility which live reloads asset pipeline assets in their running browser sessions, and an
+in-browser IDE which allows you to edit your pre-compiled assets (coffeescript, sass, etc) in the browser
+and save them to disk.
+
+### Using with Rails
+```
+# config/initializers/code_sync.rb
+if Rails.env.development?
+  CodeSync::Manager.start(forked: true, sprockets: Rails.application.assets )
+end
+```
+
+```ruby
+# Gemfile
+gem 'code_sync', git: "git@github.com:datapimp/code_sync.git"
+```
+
+```coffeescript
+# asset manifest
+#= require 'code_sync'
+#= require_self
+
+window.codeSyncClient = new CodeSync.Client()
+```
+
+Now when you change assets in the asset pipeline, they will be applied to the browser without refreshing.

data/site/.gitignore

@@ -0,0 +1,14 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+# git config --global core.excludesfile ~/.gitignore_global
+
+# Ignore bundler config
+/.bundle
+
+# Ignore the build directory
+/build
+
+# Ignore Sass' cache
+/.sass-cache

data/site/Gemfile

@@ -0,0 +1,13 @@
+# If you have OpenSSL installed, we recommend updating
+# the following line to use "https"
+source 'http://rubygems.org'
+
+gem "middleman", "~>3.0.13"
+gem "middleman-sprockets"
+gem "middleman-syntax", '1.1.1'
+gem "redcarpet"
+
+gem "slim"
+gem "skim"
+gem "sass"
+gem "code_sync", path: File.join("..")

data/site/Gemfile.lock

@@ -0,0 +1,183 @@
+PATH
+  remote: ..
+  specs:
+    code_sync (0.6.5)
+      faye
+      listen
+      pry
+      rack-webconsole-pry
+      rb-fsevent (~> 0.9)
+      skim
+      slim
+      sprockets
+      thin
+      thor
+
+GEM
+  remote: http://rubygems.org/
+  specs:
+    activesupport (3.2.13)
+      i18n (= 0.6.1)
+      multi_json (~> 1.0)
+    addressable (2.3.4)
+    chunky_png (1.2.8)
+    coderay (1.0.9)
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.3.3)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    cookiejar (0.3.0)
+    daemons (1.1.9)
+    em-http-request (1.0.3)
+      addressable (>= 2.2.3)
+      cookiejar
+      em-socksify
+      eventmachine (>= 1.0.0.beta.4)
+      http_parser.rb (>= 0.5.3)
+    em-socksify (0.2.1)
+      eventmachine (>= 1.0.0.beta.4)
+    eventmachine (1.0.3)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
+    faye (0.8.9)
+      cookiejar (>= 0.3.0)
+      em-http-request (>= 0.3.0)
+      eventmachine (>= 0.12.0)
+      faye-websocket (>= 0.4.0)
+      rack (>= 1.0.0)
+      yajl-ruby (>= 1.0.0)
+    faye-websocket (0.6.1)
+      eventmachine (>= 0.12.0)
+      websocket-driver (>= 0.2.0)
+    fssm (0.2.10)
+    haml (4.0.2)
+      tilt
+    hike (1.2.2)
+    http_parser.rb (0.5.3)
+    http_router (0.10.2)
+      rack (>= 1.0.0)
+      url_mount (~> 0.2.1)
+    i18n (0.6.1)
+    json (1.8.0)
+    listen (0.7.3)
+    maruku (0.6.1)
+      syntax (>= 1.0.0)
+    method_source (0.8.1)
+    middleman (3.0.13)
+      middleman-core (= 3.0.13)
+      middleman-more (= 3.0.13)
+      middleman-sprockets (~> 3.0.8)
+    middleman-core (3.0.13)
+      activesupport (~> 3.2.6)
+      bundler (~> 1.1)
+      listen (~> 0.7.3)
+      rack (~> 1.4.1)
+      rack-test (~> 0.6.1)
+      rb-fsevent (~> 0.9.3)
+      thor (~> 0.15.4)
+      tilt (~> 1.3.6)
+    middleman-more (3.0.13)
+      coffee-script (~> 2.2.0)
+      coffee-script-source (~> 1.3.3)
+      compass (>= 0.12.2)
+      execjs (~> 1.4.0)
+      haml (>= 3.1.6)
+      i18n (~> 0.6.0, < 0.6.2)
+      maruku (~> 0.6.0)
+      middleman-core (= 3.0.13)
+      padrino-helpers (= 0.10.7)
+      sass (>= 3.1.20)
+      uglifier (~> 1.2.6)
+    middleman-sprockets (3.0.11)
+      middleman-more (>= 3.0.11)
+      sprockets (~> 2.1)
+      sprockets-sass (~> 0.9.1)
+    middleman-syntax (1.1.1)
+      middleman-core (~> 3.0)
+      pygments.rb (~> 0.3)
+    multi_json (1.7.3)
+    padrino-core (0.10.7)
+      activesupport (~> 3.2.0)
+      http_router (~> 0.10.2)
+      sinatra (~> 1.3.1)
+      thor (~> 0.15.2)
+      tilt (~> 1.3.0)
+    padrino-helpers (0.10.7)
+      i18n (~> 0.6)
+      padrino-core (= 0.10.7)
+    posix-spawn (0.3.6)
+    pry (0.9.12.2)
+      coderay (~> 1.0.5)
+      method_source (~> 0.8)
+      slop (~> 3.4)
+    pygments.rb (0.5.0)
+      posix-spawn (~> 0.3.6)
+      yajl-ruby (~> 1.1.0)
+    rack (1.4.5)
+    rack-protection (1.5.0)
+      rack
+    rack-test (0.6.2)
+      rack (>= 1.0)
+    rack-webconsole-pry (0.1.9)
+      json
+      multi_json (>= 1.0.3)
+      pry
+      rack
+    rb-fsevent (0.9.3)
+    redcarpet (2.2.2)
+    sass (3.2.8)
+    sinatra (1.3.6)
+      rack (~> 1.4)
+      rack-protection (~> 1.3)
+      tilt (~> 1.3, >= 1.3.3)
+    skim (0.8.6)
+      coffee-script
+      coffee-script-source (>= 1.2.0)
+      multi_json
+      slim (<= 1.2.2)
+      sprockets
+      temple (<= 0.4.1)
+    slim (1.2.2)
+      temple (~> 0.4.0)
+      tilt (~> 1.3.3)
+    slop (3.4.5)
+    sprockets (2.9.3)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    sprockets-sass (0.9.1)
+      sprockets (~> 2.0)
+      tilt (~> 1.1)
+    syntax (1.0.0)
+    temple (0.4.1)
+    thin (1.5.1)
+      daemons (>= 1.0.9)
+      eventmachine (>= 0.12.6)
+      rack (>= 1.0.0)
+    thor (0.15.4)
+    tilt (1.3.7)
+    uglifier (1.2.7)
+      execjs (>= 0.3.0)
+      multi_json (~> 1.3)
+    url_mount (0.2.1)
+      rack
+    websocket-driver (0.2.0)
+    yajl-ruby (1.1.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  code_sync!
+  middleman (~> 3.0.13)
+  middleman-sprockets
+  middleman-syntax (= 1.1.1)
+  redcarpet
+  sass
+  skim
+  slim

data/site/config.rb

@@ -0,0 +1,26 @@
+set :css_dir, 'stylesheets'
+set :js_dir, 'javascripts'
+set :images_dir, 'images'
+
+activate :sprockets
+activate :code_sync
+
+Skim::Engine.default_options[:use_asset] = true
+
+set :markdown_engine, :redcarpet
+set :markdown, :fenced_code_blocks => true, :smartypants => true
+activate :syntax, :cssclass => "codehilite"
+
+activate :directory_indexes
+
+configure :build do
+  activate :minify_css
+  activate :minify_javascript
+  activate :relative_assets
+end
+
+after_build do
+  `cp build/javascripts/code_sync.min.js ../vendor/assets/javascripts`
+  `cp build/javascripts/code_sync_basic.min.js ../vendor/assets/javascripts`
+  `cp build/stylesheets/code_sync.css ../vendor/assets/stylesheets`
+end

data/site/source/canvas.html.slim

@@ -0,0 +1,21 @@
+#canvas-application.layer-controller
+  #underneath.bottom.layer
+    #front-end-editors-wrapper
+      #panel-1.panel
+      #panel-2.panel
+      #panel-3.panel
+    #backend-console-wrapper
+
+  #canvas.top.layer
+    .handle.vertical-handle
+    .handle.horizontal-handle
+
+    #canvas-inner
+
+javascript:
+  window.codeSyncClient = new CodeSync.Client()
+
+- content_for(:head) do
+  == stylesheet_link_tag 'vendor/animate', 'canvas'
+
+== javascript_include_tag 'canvas'

data/site/source/codepen-style-demo.html.slim

@@ -0,0 +1,21 @@
+javascript:
+  window.coffeescriptDefault = "CodeSync.onScriptChange ||= (changeObject)->\n"
+  coffeescriptDefault = coffeescriptDefault + '  if changeObject.mode is "skim" and changeObject.name is "codesync"'
+  coffeescriptDefault = coffeescriptDefault + "\n" + '    $(".canvas-container").html JST["codesync"]()'
+
+.demos-page
+  .editor-container data-layout="three"
+  .canvas-container
+
+- if development?
+  javascript:
+    window.codeSyncClient = new CodeSync.Client()
+
+javascript:
+  CodeSync.AssetEditor.setHotKey('ctrl+j', {position:"bottom"})
+
+- content_for(:head) do
+  == stylesheet_link_tag 'demos', 'vendor/animate'
+
+== javascript_include_tag 'demos'
+

data/site/source/demo.html.slim

@@ -0,0 +1,30 @@
+
+javascript:
+  window.coffeescriptDefault = "CodeSync.onScriptChange ||= (changeObject)->\n"
+  coffeescriptDefault = coffeescriptDefault + '  if changeObject.mode is "skim" and changeObject.name is "codesync"'
+  coffeescriptDefault = coffeescriptDefault + "\n" + '    $(".canvas-container").html JST["codesync"]()'
+
+.demos-page
+  .editor-container data-layout="three"
+  .canvas-container
+
+- if development?
+  javascript:
+    window.codeSyncClient = new CodeSync.Client()
+
+javascript:
+  window.enableGlobalEditor = function(){
+    CodeSync.AssetEditor.setHotKey('ctrl+j')
+
+    window.codeSyncEditor = new CodeSync.AssetEditor({
+      autoAppend: true,
+      renderHidden: true,
+      startMode: 'scss',
+      position: "bottom"
+    })
+  }
+
+- content_for(:head) do
+  == stylesheet_link_tag 'demos', 'vendor/animate'
+
+== javascript_include_tag 'demos'

data/site/source/index.html.slim

@@ -0,0 +1,128 @@
+.wrapper
+  header
+    h1 CodeSync
+    h2 Powerful live refresh and code editing tools for the Asset Pipeline
+
+  ul.links
+    li
+      a href="https://github.com/datapimp/code_sync" Source Code
+    li
+      a href="https://github.com/datapimp/code_sync/issues" Issues
+    li
+      | Version #{ CodeSync::Version }
+    li
+      | MIT License
+
+  section.marketing
+    p CodeSync is a utility that works anywhere the Sprockets gem works, with any language supported by Sprockets.
+    p CodeSync is similar to LiveReload, but works directly with the Asset Pipeline for your project.
+    p Especially when developing complex single page apps or HTML5 games, having to refresh the browser every time you change a file is too expensive, as you end up losing too much state and wind up having to recreate it every time.
+    p The Chrome Developer Console is a great tool, and allows you to make some changes and see immediate results, but having to then copy and paste your changes from the console back to your actual source code is a pain, and if your actual source code is made up of pre-processor languages, it is even worse.
+
+    p I developed CodeSync because I could no longer tolerate this.
+
+    p I wanted to make it easy to:
+
+    ul.features
+      li
+        span
+          | Experiment with my favorite pre-processor languages directly in the browser, and get immediate results without refreshing.
+
+        a.btn.try-it-now href="#"
+          |   Click here to try it out now
+        |   or press 'ctrl + j' to toggle the editor.
+
+      li
+        | Edit and save my application's assets in the browser if I wanted to, using a
+        a href="http://codemirror.net"
+          |  a great editor
+        | , with syntax highlighting and Vim keybindings.
+
+      li Make changes in my IDE or Text Editor and see the effects directly in the running browser session.
+
+      li Write custom hooks which run whenever an asset changes, making it possible to hot reload code changes in a complex environment.
+
+    p To accomplish this, CodeSync has three major elements.
+
+    ul
+      li
+        a href="https://github.com/datapimp/code_sync/blob/master/lib/code_sync/manager.rb" target="_blank"
+          | CodeSync::Manager
+        |  is a component that runs in the command line, it is automatically started for you in your Rails or Middleman project.  It is responsible for watching the files in your project when they change, compiling them, and notifying interested browsers that there has been an update.
+      li
+        a href="https://github.com/datapimp/code_sync/blob/master/site/source/javascripts/code_sync/client/index.coffee" target="_blank"
+          | CodeSync.Client
+        |  is a browser component which connects to the CodeSync::Manager and applies the changes that are made to the browser session you are in.
+      li
+        a href="https://github.com/datapimp/code_sync/blob/master/site/source/javascripts/code_sync/editor/index.coffee" target="_blank"
+          | CodeSync.AssetEditor
+        |  is a powerful text editing tool that supports all of the major Asset Pipeline languages.  It runs directly in your application, and stays out of your way until you need it.  Think of it very similar to how you think of the Chrome Developer Console or Firebug.  When you want to start experimenting with javascript and css to make changes to your site, this editor is available to you.
+
+
+  section.demos
+    h2 Advanced Demos
+    ul
+      li
+        a href="demo" A Codepen.io style web canvas
+
+  section.usage
+    h2 Usage
+    section.server-side
+      h3 In a Rails project
+      == partial "samples/rails"
+
+      h3 In a MiddleMan project
+      == partial "samples/middleman"
+
+    section.client-side
+      h3 The CodeSync browser client
+      == partial "samples/client"
+
+      h3 The CodeSync AssetEditor
+      == partial "samples/editor"
+
+    h2 Advanced Features
+    section.advanced-usage
+      h3 Using Standalone
+      == partial "samples/standalone"
+
+      h3 Hooking into asset changes
+      == partial "samples/hooks"
+
+
+
+  footer
+    p
+      | Brought to you by 
+      a href="http://twitter.com/soderpop" Soederpop
+      span
+        |  AKA 
+      a href="https://github.com/datapimp" Datapimp
+
+
+    - if build?
+      javascript:
+        CodeSync.set("assetCompilationEndpoint", "http://infinite-beyond-8679.herokuapp.com/code-sync/source")
+        CodeSync.set("serverInfoEndpoint", "http://infinite-beyond-8679.herokuapp.com/code-sync/info")
+        CodeSync.set("disableAssetSave", true)
+
+    - if development?
+      javascript:
+        window.codeSyncClient = new CodeSync.Client()
+
+    javascript:
+      CodeSync.AssetEditor.setHotKey('ctrl+j')
+
+      window.codeSyncEditor = new CodeSync.AssetEditor({
+        autoAppend: true,
+        renderHidden: true,
+        startMode: 'scss'
+      })
+
+      $('.try-it-now').on("click", function(e){
+        CodeSync.AssetEditor.toggleEditor()
+      });
+
+
+
+