.github/workflows/docker-build.yml

@@ -16,11 +16,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       # Login against DockerHub registry except on PR
       - name: Log in to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.PETERS_DOCKERHUB_USERNAME }}
           password: ${{ secrets.PETERS_DOCKERHUB_TOKEN }}
@@ -29,7 +29,7 @@ jobs:
       # https://github.com/docker/metadata-action
       - name: Extract Docker metadata
         id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
         with:
           images: |
             stadlerpeter/smufl-browser
@@ -39,7 +39,7 @@ jobs:
       # Build and push Docker image with Buildx (don't push on PR)
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}

Dockerfile

@@ -3,16 +3,15 @@
 # 1. set up the build environment and build the expath-package
 # 2. run the eXist-db
 #########################
-FROM openjdk:17-jdk-bullseye as builder
-LABEL maintainer="Peter Stadler"
+FROM eclipse-temurin:17-jdk AS builder
 
 ARG IMAGE_SERVER="https://smufl-browser.edirom.de/"
 ENV SMUFL_BUILD_HOME="/opt/smufl-build"
 
 WORKDIR ${SMUFL_BUILD_HOME}
 
 RUN apt-get update \
-    && apt-get install -y --no-install-recommends -o APT::Immediate-Configure=false ant libsaxonhe-java npm \
+    && apt-get install -y --no-install-recommends -o APT::Immediate-Configure=false ant libsaxonhe-java npm git \
     && npm install -g yarn
 
 COPY . .
@@ -23,7 +22,9 @@ RUN ant -lib /usr/share/java -Dimage.server=${IMAGE_SERVER} rebuild
 # Now running the eXist-db
 # and adding our freshly built xar-package
 #########################
-FROM stadlerpeter/existdb:5
+FROM stadlerpeter/existdb:6
+LABEL org.opencontainers.image.authors="Peter Stadler"
+LABEL org.opencontainers.image.source="https://github.com/Edirom/SMuFL-Browser"
 
 # add SMuFL-browser specific settings 
 # for a production ready environment with 

README.md

@@ -5,9 +5,7 @@ SMuFL-Browser
 [![](https://img.shields.io/badge/license-BSD2-green.svg)](https://github.com/Edirom/SMuFL-Browser/blob/dev/LICENSE)
 [![](https://img.shields.io/badge/license-CC--BY--4.0-green.svg)](https://github.com/Edirom/SMuFL-Browser/blob/dev/LICENSE)
 [![GitHub release](https://img.shields.io/github/release/Edirom/SMuFL-Browser.svg)](https://github.com/Edirom/SMuFL-Browser/releases)
-[![Docker Automated build](https://img.shields.io/docker/cloud/automated/stadlerpeter/smufl-browser.svg)](https://hub.docker.com/r/stadlerpeter/smufl-browser/)
-[![Docker Build Status](https://img.shields.io/docker/cloud/build/stadlerpeter/smufl-browser.svg)](https://hub.docker.com/r/stadlerpeter/smufl-browser/)
-
+[![Docker Build](https://github.com/Edirom/SMuFL-Browser/actions/workflows/docker-build.yml/badge.svg)](https://github.com/Edirom/SMuFL-Browser/actions/workflows/docker-build.yml)
 
 
 SMuFL-Browser is a web based viewer for the [Standard Music Font Layout specification](http://www.smufl.org) which facilitates searching and browsing of musical symbols. Additionally it serves as a [TEI](http://www.tei-c.org) reference for the SMuFL specification so encoders can easily add musical symbols to their texts. For that purpose a set of ANT tasks has been developed for creating TEI charDecl descriptions from SMuFL.
@@ -55,6 +53,10 @@ This will create a TEI file based on the template charDecl.xml.template with cha
 
 This will create png images from the Bravura font through a small program written by [Alexander Erhard](https://github.com/aerhard).
 
+### Target `glyph2svg`
+
+This will extract individual svg paths from the Bravura font.
+
 ### Target `xar`
 
 This will create all the above and bundle it as an eXist app package.

bravura2svg.xsl

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+    xmlns:xs="http://www.w3.org/2001/XMLSchema"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    xmlns:tei="http://www.tei-c.org/ns/1.0"
+    exclude-result-prefixes="xs"
+    version="3.1">
+
+    <xsl:param name="charDeclPath" as="xs:string" select="'dist/data/charDecl.xml'"/>
+    <xsl:param name="bravuraMetadataPath" as="xs:string" select="'node_modules/bravura/redist/bravura_metadata.json'"/>
+
+    <xsl:output indent="yes" method="xml" encoding="UTF-8"/>
+
+    <xsl:variable name="charDecl" as="document-node()?">
+        <xsl:if test="doc-available($charDeclPath)">
+            <xsl:sequence select="doc($charDeclPath)"/>
+        </xsl:if>
+    </xsl:variable>
+
+
+    <xsl:variable name="bravuraMetadata" as="map(*)?" select="json-doc($bravuraMetadataPath)"/>
+
+    <xsl:template match="/">
+        <xsl:apply-templates select=".//svg:glyph[starts-with(@glyph-name, 'uni')]"/>
+    </xsl:template>
+
+    <xsl:template match="svg:glyph">
+        <!-- Extract the Unicode Codepoint from the @glyph-name attribute, e.g. "uniE050" -->
+        <xsl:variable name="codePoint" select="substring-after(@glyph-name, 'uni')" as="xs:string"/>
+        <!-- Lookup the glyph name by codepoint from our TEI file charDecl.xml -->
+        <xsl:variable name="glyphName" select="$charDecl//tei:mapping[@type='smufl'][substring(., 3) eq $codePoint]/preceding-sibling::tei:charName => data()" as="xs:string?"/>
+        <!-- Lookup the bounding box from the Bravura metadata JSON file by glyphName -->
+        <xsl:variable name="glyphBBox" select="$bravuraMetadata?glyphBBoxes?($glyphName)" as="map(*)?"/>
+
+        <!-- IFF the bounding box exists create a file for this glyph -->
+        <xsl:if test="exists($glyphBBox)">
+            <xsl:variable name="offset" select="(($glyphBBox?bBoxSW(1) * 250) => format-number('##'), ($glyphBBox?bBoxNE(2) * 250) => format-number('##'))" as="xs:string+"/>
+            <xsl:result-document href="{$codePoint}.svg">
+                <xsl:text>&#10;</xsl:text>
+                <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" &gt;</xsl:text>
+                <xsl:text>&#10;</xsl:text>
+                <xsl:element name="svg" namespace="http://www.w3.org/2000/svg">
+                    <xsl:attribute name="version">1.1</xsl:attribute>
+                    <xsl:attribute name="width" select="(($glyphBBox?bBoxNE(1) - $glyphBBox?bBoxSW(1)) * 250) => format-number('##.###')"/>
+                    <xsl:attribute name="height" select="(($glyphBBox?bBoxNE(2) - $glyphBBox?bBoxSW(2)) * 250) => format-number('##.###')"/>
+                    <xsl:comment select="$glyphName"/>
+                    <xsl:element name="path" namespace="http://www.w3.org/2000/svg">
+                        <xsl:copy select="@d"/>
+                        <xsl:attribute name="transform" select="'translate(' || string-join($offset, ', ') || ') scale(1,-1)'"/>
+                    </xsl:element>
+                </xsl:element>
+            </xsl:result-document>
+        </xsl:if>
+    </xsl:template>
+
+</xsl:stylesheet>

build.properties

@@ -7,7 +7,7 @@
 project.app=SMuFL-Browser
 
 # SMuFl-Browser version. Is not in alignment with the SMuFL specs version 
-project.version=1.6.0
+project.version=1.7.0-beta
 
 # The location of the build directory
 build.dir=build

build.xml

@@ -107,6 +107,15 @@
 		</java>
 	</target>
 
+	<target name="glyph2svg" depends="charDecl">
+		<description>Extract individual SVG shapes from the SVG font</description>
+		<mkdir dir="${tmp.dir}/svg-glyphs"/>
+		<xslt processor="trax" style="bravura2svg.xsl" basedir="node_modules/bravura/redist/svg" includes="Bravura.svg" destdir="${tmp.dir}/svg-glyphs">
+			<param name="charDeclPath" expression="${dist.dir}/data/charDecl.xml"/>
+			<param name="bravuraMetadataPath" expression="node_modules/bravura/redist/bravura_metadata.json"/>
+		</xslt>
+	</target>
+
 	<target name="charDecl" depends="init, yarn">
 		<description>Merge SMuFL metadata to one TEI file</description>
 		<mkdir dir="${dist.dir}/data"/>
@@ -121,7 +130,7 @@
 		</xslt>
 	</target>
 
-	<target name="dist" depends="init, yarn, charDecl, otf2png">
+	<target name="dist" depends="init, yarn, charDecl, otf2png, glyph2svg">
 		<copy file="expath-pkg.xml.template" tofile="${dist.dir}/expath-pkg.xml" filtering="true" overwrite="true">
 			<filterset>
 				<filter token="project.version" value="${project.version}"/>
@@ -154,6 +163,9 @@
 			<fileset dir="${tmp.dir}/png-glyphs">
 				<include name="**/*.png"/>
 			</fileset>
+			<fileset dir="${tmp.dir}/svg-glyphs">
+				<include name="**/*.svg"/>
+			</fileset>
 		</copy>
 		<copy todir="${dist.dir}/resources/fonts">
 			<!--<fileset dir="${tmp.dir}">

controller.xql

@@ -20,7 +20,7 @@ declare variable $exist:root external;
  : Content Negotiation 
  : Evaluate Accept header and resource suffix to serve appropriate media type
  :
- : @return ('html' | 'json' | 'tei' | 'png') 
+ : @return ('html' | 'json' | 'tei' | 'png' | 'svg') 
 ~:)
 declare function local:media-type() as xs:string {
     let $suffix := substring-after($exist:resource, '.')
@@ -32,13 +32,15 @@ declare function local:media-type() as xs:string {
         else if(matches($suffix, '^json$', 'i')) then 'json'
         else if(matches($suffix, '^js(onp)?$', 'i')) then 'jsonp'
         else if(matches($suffix, '^png$', 'i')) then 'png'
+        else if(matches($suffix, '^svg$', 'i')) then 'svg'
 
         (: Accept header follows if no suffix is given :)
         else if($accepted-content-types[1] = ('text/html', 'application/xhtml+xml')) then 'html'
         else if($accepted-content-types[1] = ('application/xml', 'application/tei+xml')) then 'tei'
         else if($accepted-content-types[1] = ('application/json')) then 'json'
         else if($accepted-content-types[1] = ('application/javascript')) then 'jsonp'
         else if($accepted-content-types[1] = ('image/png', 'application/png', 'application/x-png')) then 'png'
+        else if($accepted-content-types[1] = ('image/svg+xml')) then 'svg'
 
         (: if nothing matches fall back to TEI-XML :)
         else 'tei'
@@ -62,6 +64,7 @@ declare function local:dispatch() {
                 case 'json' return local:return-json($char)
                 case 'jsonp' return local:return-jsonp($char)
                 case 'png' return local:dispatch-image($char)
+                case 'svg' return local:dispatch-svgGlyph($char)
                 default return local:error()
         else local:error()
 };
@@ -147,6 +150,21 @@ declare function local:dispatch-image($char as element(tei:char)?) as element(ex
         else local:error()
 };
 
+(:~
+ : Return an SVG XML file of a single char
+~:)
+declare function local:dispatch-svgGlyph($char as element(tei:char)?) as element(exist:dispatch) {
+    let $codepoint := substring($char/tei:mapping[@type='smufl'], 3)
+    return
+        if($codepoint) then 
+            <dispatch xmlns="http://exist.sourceforge.net/NS/exist">
+                <forward url="{$exist:controller}/resources/images/{$codepoint}.svg">
+            	   <cache-control cache="yes"/>
+            	</forward>
+            </dispatch>
+        else local:error()
+};
+
 (:~
  : Return the 404 error page
 ~:)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smufl-browser",
-  "version": "1.6.0",
+  "version": "1.7.0-beta",
   "description": "A web based browser for the Standard Music Font Layout",
   "repository": "https://github.com/Edirom/SMuFL-Browser.git",
   "author": "Peter Stadler <stadlerpeter@yahoo.fr>",

templates/about.html

@@ -104,6 +104,20 @@ <h4 class="panel-title">Examples</h4>
                             </ul>
                         </div>
                     </dd>
+                    <dt>SVG</dt>
+                    <dd>The webservice will send an SVG file of the glyph shape when queried for the suffix <code>.svg</code>.
+                        Alternatively you can omit the file extension and provide the <i>Content-Type</i> request header <code>image/svg+xml</code>.
+                        <div class="panel panel-info">
+                            <div class="panel-heading">
+                                <h4 class="panel-title">Examples</h4>
+                            </div>
+
+                            <ul class="list-group">
+                                <li class="list-group-item"><a href="https://smufl-browser.edirom.de/note8thUp.svg" title="SVG example URL">https://smufl-browser.edirom.de/note8thUp.svg</a></li>
+                                <li class="list-group-item"><a href="https://smufl-browser.edirom.de/E1D7.svg" title="SVG example URL">https://smufl-browser.edirom.de/E1D7.svg</a></li>
+                            </ul>
+                        </div>
+                    </dd>
                     <dt>Multiple characters</dt>
                     <dd>If you want to receive a list of several character definitions, you can query <code>https://smufl-browser.edirom.de/index</code> with the suffixes <code>.tei</code> or <code>.xml</code> (or the respective request headers, see above). 
                         JSON and JSONP are <i>not</i> supported at present.
@@ -119,9 +133,9 @@ <h4 class="panel-title">Examples</h4>
                             </div>
 
                             <ul class="list-group">
-                                <li class="list-group-item"><a href="https://smufl-browser.edirom.de/index.tei" title="complete charDecl">https://smufl-browser.edirom.de/index.tei</a> – this will give you the complete SMuFL specification as TEI file</li>
-                                <li class="list-group-item"><a href="https://smufl-browser.edirom.de/index.xml?range=Rests">https://smufl-browser.edirom.de/index.xml?range=Rests</a></li>
-                                <li class="list-group-item"><a href="https://smufl-browser.edirom.de/index.tei?class=noteheadSetRoundLarge&amp;class=noteheadSetCircled" title="PNG example URL">https://smufl-browser.edirom.de/index.tei?class=noteheadSetRoundLarge&amp;class=noteheadSetCircled</a></li>
+                                <li class="list-group-item"><a href="https://smufl-browser.edirom.de/index.tei" title="Request for the complete charDecl">https://smufl-browser.edirom.de/index.tei</a> – this will give you the complete SMuFL specification as TEI file</li>
+                                <li class="list-group-item"><a href="https://smufl-browser.edirom.de/index.xml?range=Rests" title="Request for a charDecl consisting of the range 'rests' only">https://smufl-browser.edirom.de/index.xml?range=Rests</a></li>
+                                <li class="list-group-item"><a href="https://smufl-browser.edirom.de/index.tei?class=noteheadSetRoundLarge&amp;class=noteheadSetCircled" title="Request for a charDecl consisting of two different classes">https://smufl-browser.edirom.de/index.tei?class=noteheadSetRoundLarge&amp;class=noteheadSetCircled</a></li>
                             </ul>
                         </div>
                     </dd>

yarn.lock

@@ -14,12 +14,12 @@ bootstrap@^3.3.7:
 font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-  integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
+  integrity sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==
 
 jquery@^3:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
-  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
+  integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
 
 select2@^4:
   version "4.0.13"