Add a demo

.editorconfig

@@ -8,3 +8,11 @@ indent_size = 2
 [*.css]
 indent_style = space
 indent_size = 2
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[*.y{a,}ml]
+indent_style = space
+indent_size = 2

.gitignore

@@ -1 +1,3 @@
-_site
+/_site/
+/node_modules/
+/Gemfile.lock

Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem 'github-pages'

_config.yaml

@@ -0,0 +1,7 @@
+exclude:
+  - node_modules
+  - CNAME
+  - Gemfile
+  - Gemfile.lock
+  - gulpfile.js
+  - package.json

_js/demo.js

@@ -0,0 +1,47 @@
+(function ($) {
+
+  var editorconfig = require('editorconfig');
+
+  function createFiles() {
+    var configFiles = [], configSuffix = "/.editorconfig";
+    $('.js-ec-demo-config').each(function () {
+      var pathLength, configPath, form = $(this);
+      configPath = form.find('[name="filename"]').val();
+      pathLength = configPath.length - configSuffix.length;
+      if (configPath.indexOf(configSuffix, pathLength) !== -1) {
+        configFiles.push({
+          name: configPath,
+          contents: form.find('[name="file"]').val()
+        });
+      }
+    });
+    return configFiles;
+  }
+
+  // Resize textarea automatically
+  $('textarea').on('input', function () {
+    // Set textarea height
+    this.style.height = 'auto';
+    this.style.height = this.scrollHeight + 16 + 'px';
+  }).trigger('input');
+
+  function renderOutput(configFiles) {
+    $('.js-ec-demo-output').each(function () {
+      var output = "", config, key, filename;
+      filename = $(this).find('[name="filename"]');
+      config = editorconfig.parseFromFiles(filename.val(), configFiles);
+      for (key in config) {
+        if (config.hasOwnProperty(key)) {
+          output += key + " = " + config[key] + "\n";
+        }
+      }
+      $(this).find('pre').text(output);
+    });
+  }
+
+  // Update output automatically
+  $('input, textarea').on('input', function () {
+    renderOutput(createFiles());
+  }).trigger('input');
+
+}(jQuery));

_layouts/default.html

@@ -17,7 +17,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
 
   <link rel="stylesheet" href="css/style.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script src="js/scrollspy.js"></script>
 
   <script type="text/javascript">
@@ -51,6 +51,7 @@ <h4><a href="">Page Contents</a></h4>
       <li><a href="#example-file">Example File</a></li>
       <li><a href="#file-location">File Location</a></li>
       <li><a href="#file-format-details">File Format Details</a></li>
+      <li><a href="#demo">Try It Out</a></li>
       <li><a href="#download">Download a Plugin</a></li>
       <li><a href="#contributing">Contributing</a></li>
     </ol>
@@ -100,5 +101,7 @@ <h1>EditorConfig</h1>
   </div>
 </div>
 
+<script src="js/demo.js"></script>
+
 </body>
 </html>

css/style.css

@@ -84,6 +84,31 @@ header h1 { padding-top: 0.5em; }
 .editor-logos img { max-width: 100%; max-height: 100%; }
 .editor-logos span { opacity: 0; float: left; margin-top: -3em; }
 
+.demo:after {
+  content: "";
+  clear: both;
+  display: block;
+}
+.demo-section {
+  float: left;
+  width: 50%;
+}
+.demo input, .demo textarea, .demo pre {
+  display: block;
+  width: 100%;
+  padding: 2%;
+  font-family: monospace,sans-serif;
+  border-radius: 3px;
+  background-color: #ffffff;
+  resize: none;
+  border: 1px solid #000;
+  margin: 0;
+  font-size: 12px !important;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
 /* =============================================================================
    Sidebar customizations
    ========================================================================== */

gulpfile.js

@@ -0,0 +1,10 @@
+var gulp = require('gulp');
+var uglify = require('gulp-uglify');
+var browserify = require('gulp-browserify');
+
+gulp.task('default', function() {
+  gulp.src('./_js/*.js')
+    .pipe(browserify())
+    .pipe(uglify())
+    .pipe(gulp.dest('./js'))
+});

index.html

@@ -108,6 +108,41 @@ <h4>Supported Properties</h4>
 
   </section>
 
+  <section id="demo">
+    <h3>Try It Out</h3>
+
+    <div class="demo">
+      <div class="demo-section">
+        <h4>EditorConfig File</h4>
+        <div class="js-ec-demo-config code-container">
+          <div><input name="filename" value="/someproject/.editorconfig" spellcheck="false"></div>
+          <div>
+            <textarea name="file" spellcheck="false">[*]
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{css,html,js}]
+indent_style = space
+indent_size = 2
+
+[*.py]
+indent_style = space
+indent_size = 4
+</textarea>
+          </div>
+        </div>
+      </div>
+
+      <div class="js-ec-demo-output demo-section">
+        <h4>Enforced Style for a Given File</h4>
+        <div class="code-container">
+          <div><input name="filename" value="/someproject/index.html" spellcheck="false"></div>
+          <div><pre class="properties"></pre></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
 </section>
 
 <section id="download">

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "editorconfig.org",
+  "devDependencies": {
+    "editorconfig": "^0.11.4",
+
+    "gulp": "^3.8.9",
+    "gulp-uglify": "^1.0.1",
+    "gulp-browserify": "^0.5.0"
+  },
+  "scripts": {
+    "build": "./node_modules/.bin/gulp"
+  }
+}