Merge pull request music-encoding#588 from DILewis/main

Update tools page layout

_config.yml

@@ -66,7 +66,7 @@ menu:
             url: '/hosting-guidelines.html'
           - id: code-of-conduct
             label: 'Code of conduct'
-            url: '/code-of-conduct.html'        
+            url: '/code-of-conduct.html'
     - id: resources
       label: 'Resources'
       url: '/resources'
@@ -112,6 +112,9 @@ collections:
   projects:
     output: true
     permalink: /:collection/:name
+  tools:
+    output: true
+    permalink: /:collection/:name
   tutorials:
     output: true
     permalink: /:collection/:name

_layouts/tools.html

@@ -3,34 +3,53 @@
 ---
 <div class="columns">
     <div class="column col-8">
-
-        {{ content }}
-
+      <p>← Back to <a href="{{ site.baseurl }}/resources/tools.html">Tools page</a></p>
+      <br>
+      <header>
+        <h1>{{ page.title }}</h1>
+        <p class="subtitle">{{ page.subtitle }}</p>
+      </header>
+      <div class="divider"></div>
+      {{ content }}
     </div>
     <div class="column col-4">
-      <span class="divider"></span>
-      <h4>Official tools</h4>
-      <ul class="nav">
-        <li class="nav-item"><a href="#mei-schema">MEI Schema</a></li>
-        <li class="nav-item"><a href="#sample-encodings">Sample encodings</a></li>
-        <li class="nav-item"><a href="#encoding-tools">Encoding tools</a></li>
-        <li class="nav-item"><a href="#customization-service">Customization service</a></li>
-      </ul>
-      <span class="divider"></span>
-      <h4>Community tools</h4>
-      <ul class="nav">
-        <li class="nav-item"><a href="#mei-friend">mei-friend</a></li>
-        <li class="nav-item"><a href="#mermeid">MerMEId</a></li>
-        <li class="nav-item"><a href="#sibmei">SibMEI</a></li>
-        <li class="nav-item"><a href="#libmei">LibMEI</a></li>
-        <li class="nav-item"><a href="#meico-mei-converter">meico: MEI Converter</a></li>
-        <li class="nav-item"><a href="#mei-to-music21-converter">MEI to Music21 Converter</a></li>
-        <li class="nav-item"><a href="#meiler">MEILER</a></li>
-        <!-- <li class="nav-item"><a href="#meise">MEISE</a></li> -->
-        <li class="nav-item"><a href="#meiview">meiView</a></li>
-        <li class="nav-item"><a href="#verovio">Verovio</a></li>
-        <li class="nav-item"><a href="#music-sheet-viewer">Music Sheet Viewer</a></li>
-      </ul>
-      <span class="divider"></span>
+      <div class="panel">
+        <div class="panel-header">
+          {% if page.image %}
+            {% assign imageUriStartsWith = page.image | slice: 0, 4 %}
+            {% if imageUriStartsWith == 'http' %}
+              <img class="mei-project-image img-responsive" alt="{{ page.title }} logo" src="{{ page.image }}" />
+            {% else %}
+              <img class="mei-project-image img-responsive" alt="{{ page.title }} logo"  src="{{ site.baseurl }}/tools/{{ page.image }}" />
+            {% endif %}
+          {% endif %}
+        </div>
+        <div class="panel-body">
+          <dl>
+            <dt>Tags</dt>
+            <dd>
+              {% for tag in page.tags %}
+              <label class="chip" for="{{ tag }}">{{ tag }}</label>
+              {% endfor %}
+            </dd>
+            <dt>Website</dt>
+            <dd>
+              {% if page.website %}
+                <a href="{{ page.website }}" target="{{ page.website }}">{{ page.website }}</a>
+              {% else %}
+                <span>---</span>
+              {% endif %}
+            </dd>
+            <dt>Repository</dt>
+            <dd>
+              {% if page.repository %}
+              <a href="{{ page.repository }}" target="{{ page.repository }}">{{ page.repository }}</a>
+              {% else %}
+                <span>---</span>
+              {% endif %}
+            </dd>
+          </dl>
+        </div>
+      </div>
     </div>
 </div>

_sass/spectre/_filters.scss

@@ -1,6 +1,6 @@
 // Filters 
 // The number of filter options 
-$filter-number: 8 !default;
+$filter-number: 33 !default;
 
 %filter-checked-nav { 
   background: $primary-color;

_tools/encoding-tools.md

@@ -0,0 +1,11 @@
+---
+layout: tools
+title: "Encoding tools"
+subtitle: "Converters and linters"
+image:
+website:
+repository: https://github.com/music-encoding/encoding-tools
+tags: [conversion, developers, xslt]
+---
+
+The [MEI Encoding Tools repository](https://github.com/music-encoding/encoding-tools) contains several tools for working with MEI-encoded files.

_tools/libmei.md

@@ -0,0 +1,13 @@
+---
+layout: tools
+title: "LibMEI"
+subtitle: "C++ library for MEI"
+image:
+website:
+repository: https://github.com/DDMAL/libmei
+tags: [developers, library]
+---
+
+[LibMEI](https://github.com/DDMAL/libmei) is a C++ library for reading and writing MEI files. It can be integrated into C++ software applications, but it can also be used in a wide range of environments through bindings. It ships with Python bindings using the Boost-Python framework. The source code and the documentation are available on [GitHub](https://github.com/DDMAL/libmei/ "GitHub") It is developed by the [Distributed Digital Music Archives and Libraries Lab](http://ddmal.music.mcgill.ca/) at the Schulich School of Music at McGill University, Montréal, Canada and is available under the MIT License.
+
+LibMEI was created by Andrew Hankinson and Alastair Porter and seeks to define a common software library for interacting with files encoded in MEI. This is targeted at software developers who wish to integrate support for MEI into their software.

_tools/mei-friend.md

@@ -0,0 +1,11 @@
+---
+layout: tools
+title: "mei-friend"
+subtitle: "Browser-based music editor"
+image: https://raw.githubusercontent.com/mei-friend/mei-friend/main/app/static/owl/menu-logo.svg
+website: https://mei-friend.mdw.ac.at
+repository: https://github.com/mei-friend/mei-friend
+tags: [browser-based, editor, getting-started, rendering, sonification, utility, viewer]
+---
+
+[mei-friend](https://mei-friend.mdw.ac.at) is a friendly, zero-install, browser-based MEI editor for music encodings, with schema-based autocompletion, GitHub integration, keyboard shortcuts, an easy-to-use look-up interface to the MEI Guidelines, and other goodies. The tool is intended as a ‘last mile’ editor aiming to alleviate the common task of cleaning up encodings generated via optical music recognition, or conversion from other formats. Further details are available from the tool's [GitHub page](https://mei-friend.github.io).

_tools/mei-garage.md

@@ -0,0 +1,13 @@
+---
+layout: tools
+title: "MEI Garage"
+subtitle: "Schema customization service"
+image: "https://custom.music-encoding.org/img/meigarage.logo.166c7942.png"
+website: https://custom.music-encoding.org
+repository: https://github.com/Edirom/MEIGarage
+tags: [conversion, developers, documentation, validation]
+---
+
+[MEI Garage](http://custom.music-encoding.org) is an online service that makes it easy to generate a schema (or other output formats) from an MEI source file and a customization file.
+
+Such a customization can be used to disable existing features of MEI, to obtain a schema validating only a subset of the original schema, for example, a customization for validating MEI documents containing only common Western music notation (CWMN). This customization will disable all the functionality contained in MEI for representing other types of notation (tablature, mensural, or neume). Alternatively, a schema can be extended to include features not already available in MEI. This can be desirable when doing developments or experiments with the schema, but it can also be used in "production" for projects that have very specific needs for features that are not expected to be included in "out-of-the-box" MEI.

_tools/mei-schema.md

@@ -0,0 +1,11 @@
+---
+layout: tools
+title: "MEI Schema"
+subtitle: "Specification and Documentation"
+image:
+website: https://www.music-encoding.org/guidelines
+repository: https://github.com/music-encoding/music-encoding
+tags: [developers, documentation, validation]
+---
+
+This [MEI repository](https://github.com/music-encoding/music-encoding) contains all the source code of the core MEI Schema.

_tools/meico.md

@@ -0,0 +1,20 @@
+---
+layout: tools
+title: "meico"
+subtitle: "Converter framework for MEI files"
+image: https://github.com/cemfi/meico/raw/master/figures/meico_title_small.png
+website: http://www.cemfi.de/
+repository: https://github.com/cemfi/meico
+tags: [conversion, sonification, xslt]
+---
+
+[meico](https://github.com/cemfi/meico) is a converter framework for MEI files that is being developed at the Center of Music and Film Informatics, Detmold ([cemfi](http://www.cemfi.de/)). It translates MEI data into a series of formats relevant to many other applications. It can be used as a Java programming framework or standalone app. For the latter case, the meicoApp provides a command line interface as well as an elaborate graphical user interface. Meico's feature list includes
+
+- MEI export to MIDI, MSM, MPM, audio (WAV, MP3),
+- MIDI to audio rendering with third-party soundbanks (SF2, DLS),
+- musical performance rendering via the official Music Performance Markup API and rendering engine,
+- built-in MIDI and audio playback (perfect for proof-reading/listening),
+- Verovio integration in the graphical user interface,
+- Chroma export,
+- XSLT processing of all XML-based data formats, and
+- several MEI convenience features such as XML validation against RNG schemata, and expansion of abbreviations (copyof, sameas, expan).

_tools/meiler.md

@@ -0,0 +1,13 @@
+---
+layout: tools
+title: "MEILER"
+subtitle: "MEI LilyPond Engraving Refinement"
+image:
+website:
+repository: https://github.com/rettinghaus/MEILER
+tags: [rendering, xslt]
+---
+
+The [MEI LilyPond Engraving Refinement](https://github.com/rettinghaus/MEILER) (MEILER) is a set of XSLT stylesheets to render MEI files with the help of the [LilyPond Engine](http://lilypond.org). This allows making heavy use of the layout attributes and parameters available in MEI.
+
+Possible LilyPond output formats are PDF, PNG and SVG. It's available on [GitHub](https://github.com/rettinghaus/MEILER). You may have a look at some test files [here](https://github.com/rettinghaus/MEILER/tree/master/tests) and [here](https://github.com/rettinghaus/mei-test-set/), to get an impression of its capabilities. Also, there's a [poster](https://doi.org/10.13140/RG.2.2.15014.93760) available.

_tools/mermeid.md

@@ -0,0 +1,13 @@
+---
+layout: tools
+title: "MerMEId"
+subtitle: "Metadata editor and repository for MEI data"
+image:
+website:
+repository: https://github.com/edirom/mermeid
+tags: [cataloguing, editor, getting-started, metadata, repository, viewer]
+---
+
+The [Metadata Editor and Repository for MEI Data](https://github.com/edirom/mermeid) (MerMEId) provides tools for editing comprehensive metadata in MEI files. It is conceived for the compilation of catalogs and thematic indexes of works, but may also complement other music editing software in adding metadata to existing MEI files or serve as a database for editors of critical editions. Apart from basic metadata, such as titles and persons involved, the MerMEId editor records information such as detailed source descriptions, lists of performances and reviews, bibliography, notes on composition history as well as structural information including movements, instrumentation, incipits, key, tempo and meter.
+
+The MerMEId software is installed on a web server and is operated client-side using a standard web browser capable of handling XHTML and Javascript. Originally developed by the Danish Centre for Music Editing (DCM), it is now maintained and enhanced by the MerMEId community.

_tools/musescore.md

@@ -0,0 +1,11 @@
+---
+layout: tools
+title: "MuseScore"
+subtitle: "Music engraving software"
+image: https://github.com/musescore/MuseScore/raw/master/share/icons/musescore_logo_full.png
+website: https://musescore.org/
+repository: https://github.com/musescore/MuseScore
+tags: [conversion, getting-started, rendering, score-editing]
+---
+
+[MuseScore](https://musescore.org/) is a music notation program for Windows, macOS, and Linux supporting a wide variety of file formats and input methods. It is released as free and open-source software under the GNU General Public License. Since version 4.2, MuseScore supports reading and writing MEI Basic 5.0 files.

_tools/music-sheet-viewer.md

@@ -0,0 +1,13 @@
+---
+layout: tools
+title: "Music Sheet Viewer"
+subtitle: "Wordpress plug-in for music rendering"
+image:
+website: https://www.partitionnumerique.com/music-sheet-viewer-wordpress-plugin/
+repository:
+tags: [browser-based, developers, getting-started, plug-in, rendering, sonification]
+---
+
+[Music Sheet Viewer](http://www.partitionnumerique.com/music-sheet-viewer-wordpress-plugin/) is an open-source WordPress plugin that allows the display of one or more music sheet fragments of full scores written in MEI, MusicXML, ABC or PAE ([RISM](http://rism-ch.org) notation), in a post or page of a WordPress site. The code is entered using a WordPress shortcode tag or a dedicated Block, and the resulting score is displayed as if it had been natively supported by the browser. It is powered by [Verovio](https://www.verovio.org), and provides many Verovio features without having to write one single line of code: all the JavaScript code is generated on the page.
+
+The main features are: automatic resize to fit the available content, display in any [SMuFL](https://www.smufl.org) font, code entered either inline or from a file, score playback and notes highlighting thanks to an enhancement of the [RISM MIDI Player](https://github.com/rism-ch/midi-player), automatic page turn when played, responsive code.

_tools/music21.md

@@ -0,0 +1,13 @@
+---
+layout: tools
+title: "music21"
+subtitle: "music21: a toolkit for computer-aided musicology"
+image: https://web.mit.edu/music21/bg_top_left.jpg
+website: https://web.mit.edu/music21/
+repository: https://github.com/cuthbertLab/music21
+tags: [conversion, developers, library, sonification]
+---
+
+[music21](https://web.mit.edu/music21/) is a simple set of tools for computer-aided music analysis.
+
+music21 builds on pre-existing frameworks and technologies such as Humdrum, MusicXML, and MIDI, but uses an object-oriented framework that makes it easier to handle complex data. At the same time, music21 aims to keep its code clear and transparent and simplify reusing existing code.

_tools/sample-encodings.md

@@ -0,0 +1,11 @@
+---
+layout: tools
+title: "Sample encodings"
+subtitle: "Collection of MEI-encoded music files"
+image:
+website:
+repository: https://github.com/music-encoding/sample-encodings
+tags: [documentation, getting-started]
+---
+
+The [MEI Sample [Encodings repository](https://github.com/music-encoding/sample-encodings) contains a collection of MEI-encoded music files. The intent is to demonstrate the use of MEI in real-world contexts.

_tools/sibmei.md

@@ -0,0 +1,13 @@
+---
+layout: tools
+title: "SibMEI"
+subtitle: "MEI Plug-in for Sibelius"
+image:
+website:
+repository: https://github.com/music-encoding/sibmei/releases
+tags: [conversion, plug-in]
+---
+
+[SibMEI](https://github.com/music-encoding/sibmei/releases "Sibelius MEI Plugin") is an open-source plug-in that makes it easy to export MEI from the [Sibelius](http://www.sibelius.com) notation editor. In addition to facilitating the creation of MEI-formatted data without the burden of writing XML by hand, it also makes it possible to convert MusicXML files to MEI.
+
+General installation instructions for Sibelius plug-ins can be found at [http://www.sibelius.com/download/plugins/index.html?help=install](http://www.sibelius.com/download/plugins/index.html?help=install "Install plug-in"). Once installed, an "Export to MEI" option will appear in the plug-in list in Sibelius.

_tools/verovio.md

@@ -0,0 +1,13 @@
+---
+layout: tools
+title: "Verovio"
+subtitle: "Javascript and C++ score rendering"
+image: https://www.verovio.org/assets/images/verovio-fadded-50.png
+website: https://www.verovio.org
+repository: https://github.com/rism-digital/verovio
+tags: [browser-based, developers, library, rendering, sonification]
+---
+
+[Verovio](https://www.verovio.org) is a fast, portable and lightweight library for engraving Music Encoding Initiative (MEI) music scores into SVG developed by the [RISM Digital Center](https://rism.digital/). It is designed as a one-step conversion tool and is written in pure standard C++ with no dependencies on third-party frameworks and libraries. Verovio implements its own rendering engine, which can render SVG with all the musical symbols embedded in it and without dependency on external fonts. In addition to MEI, Verovio can also render Plain and Easy (PAE) code and DARMS code.
+
+Verovio that it implements MEI's structure internally, making it the best-suited solution for rendering features that make MEI unique. The hierarchy of the MEI is preserved in the SVG output. This feature makes it easy to build interactive applications. Verovio is highly modular and can be used in different contexts, such as a JavaScript or Python toolkit. Verovio follows the Standard Music Font Layout ([SMuFL](https://www.smufl.org)) specification and the font can be changed for personalizing the output. It is open-source and is available on [GitHub](https://github.com/rism-digital/verovio).

_tools/wizkit.md

@@ -0,0 +1,11 @@
+---
+layout: tools
+title: "WizKit"
+subtitle: "Environment for editing MEI metadata in oXygen XML Editor"
+image:
+website:
+repository: https://github.com/acdh-oeaw/WizKit
+tags: [cataloguing, editor, getting-started, metadata, repository, viewer]
+---
+
+[WizKit](https://github.com/acdh-oeaw/WizKit) is an environment for editing MEI metadata in oXygen XML Editor. You can play with it or use it for "real" work!

css/main.scss

@@ -83,32 +83,32 @@ $on-laptop:        800px;
 
     .mec2020-program-title {
       margin: 10px 0 10px 0;
-      
+
       .mec2020-presentation {
       background-color:#d4d4d4;
       }
-    }   
-    
+    }
+
     .workshop {
         width: 185pt;
         height: 190pt;
     }
-    
+
     .workshop-title {
         width: 160pt;
         height: 105pt;
     }
-    
+
     .poster-session {
         width: 370pt;
         height: 520pt;
     }
-      
+
     .mec2020-program-speakers {
       font-style: italic;
       font-size: 0.7rem;
     }
-    
+
     .unconference{
         height: 95pt;
     }
@@ -128,11 +128,11 @@ $on-laptop:        800px;
     }
 
   }
-  
+
   .mec2020-abstract {
         font-size: 20px;
         font-weight: bold;
-        
+
   }
   .mec2020-program-row-main {
     margin: 30px 0 30px 0;
@@ -213,7 +213,7 @@ $on-laptop:        800px;
 
         }
     }
-    
+
     /* 20210409 */
     table {
         font-family: "Arial", sans-serif;
@@ -252,7 +252,7 @@ $on-laptop:        800px;
         margin: 4px 2px;
         cursor: pointer;
         background-color: #1a235b;
-    }    
+    }
 
     .keynotesTable td {
         text-align: left;
@@ -270,3 +270,7 @@ $on-laptop:        800px;
     }
 
 }
+
+.filter-body {
+    width: 100%;
+}