Merge pull request #66 from music-encoding/tutorials

Tutorials

.gitignore

@@ -2,3 +2,4 @@ _site
 .sass-cache
 .DS_Store
 .jekyll-metadata
+*.xpr

Gemfile

@@ -1,2 +1,3 @@
 source 'https://rubygems.org'
-gem 'github-pages', group: :jekyll_plugins
+gem 'github-pages', group: :jekyll_plugins
+gem 'wdm', '>= 0.1.0' if Gem.win_platform?

Gemfile.lock

@@ -0,0 +1,250 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.10)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.11.1)
+    colorator (1.1.0)
+    commonmarker (0.17.13)
+      ruby-enum (~> 0.5)
+    concurrent-ruby (1.0.5)
+    dnsruby (1.61.2)
+      addressable (~> 2.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.11.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.7-x64-mingw32)
+    execjs (2.7.0)
+    faraday (0.15.3)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.9.25-x64-mingw32)
+    forwardable-extended (2.6.0)
+    gemoji (3.0.0)
+    github-pages (192)
+      activesupport (= 4.2.10)
+      github-pages-health-check (= 1.8.1)
+      jekyll (= 3.7.4)
+      jekyll-avatar (= 0.6.0)
+      jekyll-coffeescript (= 1.1.1)
+      jekyll-commonmark-ghpages (= 0.1.5)
+      jekyll-default-layout (= 0.1.4)
+      jekyll-feed (= 0.10.0)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.9.4)
+      jekyll-mentions (= 1.4.1)
+      jekyll-optional-front-matter (= 0.3.0)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.2.0)
+      jekyll-redirect-from (= 0.14.0)
+      jekyll-relative-links (= 0.5.3)
+      jekyll-remote-theme (= 0.3.1)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.5.0)
+      jekyll-sitemap (= 1.2.0)
+      jekyll-swiss (= 0.4.0)
+      jekyll-theme-architect (= 0.1.1)
+      jekyll-theme-cayman (= 0.1.1)
+      jekyll-theme-dinky (= 0.1.1)
+      jekyll-theme-hacker (= 0.1.1)
+      jekyll-theme-leap-day (= 0.1.1)
+      jekyll-theme-merlot (= 0.1.1)
+      jekyll-theme-midnight (= 0.1.1)
+      jekyll-theme-minimal (= 0.1.1)
+      jekyll-theme-modernist (= 0.1.1)
+      jekyll-theme-primer (= 0.5.3)
+      jekyll-theme-slate (= 0.1.1)
+      jekyll-theme-tactile (= 0.1.1)
+      jekyll-theme-time-machine (= 0.1.1)
+      jekyll-titles-from-headings (= 0.5.1)
+      jemoji (= 0.10.1)
+      kramdown (= 1.17.0)
+      liquid (= 4.0.0)
+      listen (= 3.1.5)
+      mercenary (~> 0.3)
+      minima (= 2.5.0)
+      nokogiri (>= 1.8.2, < 2.0)
+      rouge (= 2.2.1)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.8.1)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (~> 4.0)
+      public_suffix (~> 2.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.8.4)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.7.4)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.6.0)
+      jekyll (~> 3.0)
+    jekyll-coffeescript (1.1.1)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.11.1)
+    jekyll-commonmark (1.2.0)
+      commonmarker (~> 0.14)
+      jekyll (>= 3.0, < 4.0)
+    jekyll-commonmark-ghpages (0.1.5)
+      commonmarker (~> 0.17.6)
+      jekyll-commonmark (~> 1)
+      rouge (~> 2)
+    jekyll-default-layout (0.1.4)
+      jekyll (~> 3.0)
+    jekyll-feed (0.10.0)
+      jekyll (~> 3.3)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.9.4)
+      jekyll (~> 3.1)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.4.1)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-optional-front-matter (0.3.0)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.2.0)
+      jekyll (~> 3.0)
+    jekyll-redirect-from (0.14.0)
+      jekyll (~> 3.3)
+    jekyll-relative-links (0.5.3)
+      jekyll (~> 3.3)
+    jekyll-remote-theme (0.3.1)
+      jekyll (~> 3.5)
+      rubyzip (>= 1.2.1, < 3.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.5.0)
+      jekyll (~> 3.3)
+    jekyll-sitemap (1.2.0)
+      jekyll (~> 3.3)
+    jekyll-swiss (0.4.0)
+    jekyll-theme-architect (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.5.3)
+      jekyll (~> 3.5)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.1)
+      jekyll (~> 3.3)
+    jekyll-watch (2.1.2)
+      listen (~> 3.0)
+    jemoji (0.10.1)
+      gemoji (~> 3.0)
+      html-pipeline (~> 2.2)
+      jekyll (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.0)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    mini_portile2 (2.3.0)
+    minima (2.5.0)
+      jekyll (~> 3.5)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.11.3)
+    multipart-post (2.0.0)
+    nokogiri (1.8.5-x64-mingw32)
+      mini_portile2 (~> 2.3.0)
+    octokit (4.13.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (2.0.5)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    rouge (2.2.1)
+    ruby-enum (0.7.2)
+      i18n
+    ruby_dep (1.5.0)
+    rubyzip (1.2.2)
+    safe_yaml (1.0.4)
+    sass (3.6.0)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.8.1)
+      addressable (>= 2.3.5, < 2.6)
+      faraday (~> 0.8, < 1.0)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.3.0)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    unicode-display_width (1.4.0)
+    wdm (0.1.1)
+
+PLATFORMS
+  x64-mingw32
+
+DEPENDENCIES
+  github-pages
+  wdm (>= 0.1.0)
+
+BUNDLED WITH
+   1.17.1

_config.yml

@@ -70,6 +70,9 @@ menu:
           - id: schemas
             label: 'Schemas and Namespace'
             url: '/schemas.html'
+          - id: tutorials
+            label: 'Tutorials'
+            url: '/tutorials.html'
     - id: documentation
       label: 'Documentation'
       url: '/guidelines'
@@ -101,3 +104,6 @@ collections:
   projects:
     output: true
     permalink: /:collection/:name
+  tutorials:
+    output: true
+    permalink: /:collection/:name

_layouts/tutorials.html

@@ -0,0 +1,97 @@
+---
+layout: default
+---
+<div class="columns">
+    <div class="column col-8 tutorialBox">
+
+        {% if page.type != 'tutorial' %}
+        <h2>MEI Tutorials</h2>
+        <p>On this page, you'll find a number of small tutorials for MEI,
+            each of them introducing a specific feature. If
+            you're about to start learning MEI, we recommend to start with
+            the 5 minute Quickstart tutorial, which will let you encode
+            a very simple melody with MEI.</p>
+        {% else %}
+
+            <h2>{{ page.fullname }}</h2>
+
+            {% if content %}
+                {{ content }}
+            {% endif %}
+
+            <h3>Instructions: <span id="stepLabel"></span></h3>
+            <div id="instruction">
+                <!-- instruction texts go in here -->
+            </div>
+            <button id="nextStepButton" class="btn btn-primary btn-sm float-right" style="display: none;">Continue <i class="icon icon-forward"></i></button>
+            <div id="editorContainer" style="display: none;">
+                <h3>MEI Editor</h3>
+                <div id="editorBox">
+                    <div id="editor"></div>
+                </div>
+
+                <div id="hints">
+                    <!-- validation hints go in here -->
+                </div>
+
+                <h4>Preview</h4>
+                <div id="previewBox">
+                    <textarea name="preview" id="preview" rows="7" cols="55" disabled="disabled"></textarea>
+                </div>
+
+                <button id="toggletextarea-btn">Hide Preview</button>
+
+                <h3>Rendition</h3>
+                <div id="rendering">
+                    <!-- verovio rendering goes in here -->
+                </div>
+            </div>
+            <ul id="stepBox" class="step">
+                <!-- tutorial step list goes in here -->
+            </ul>
+
+            <script src="/js/ace-src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+            <script src="/js/verovio-toolkit.js" type="text/javascript" charset="utf-8"></script>
+            <script src="/js/tutorials.js" type="text/javascript" charset="utf-8"></script>
+            <script type="text/javascript">
+
+                try {
+                    fetch("../{{page.data}}")
+                        .then(function(response) {
+                            if (response.ok) {
+                                return response.json()
+                            }
+                            throw new Error('Network response was not ok while trying to fetch ', page.data);
+                        })
+                        .then(function(data) {
+                            setupTutorial(data);
+                        });
+                } catch(err) {
+                    console.log('Unable to require data: ' + err)
+                }
+
+            </script>
+        {% endif %}
+    </div>
+
+    <!-- side menu -->
+    <div class="column col-4">
+        <h2>Available Tutorials</h2>
+        {% assign t = site.collections | where: "label","tutorials" | first %}
+        {% for tutorial in t.docs %}
+        {% if tutorial.name != page.name %}
+        <div class="tile">
+            <div class="tile-icon">
+                <div class="example-tile-icon">
+                    <a href="{{ tutorial.url }}.html" class="icon icon-message centered"></a>
+                </div>
+            </div>
+            <div class="tile-content">
+                <div class="tile-title"><a href="{{ tutorial.url }}.html">{{ tutorial.name }}</a></div>
+                <div class="tile-subtitle text-gray">{{tutorial.fullname}}</div>
+            </div>
+        </div>
+        {% endif %}
+        {% endfor %}
+    </div>
+</div>