Text Fallback for unavailable glyphs

package.json

@@ -8,6 +8,7 @@
     "compression": "^1.7.1",
     "express": "^4.15.3",
     "express-winston": "^2.4.0",
+    "he": "^1.1.1",
     "sharp": "^0.18.4",
     "text-to-svg": "3.1.0",
     "winston": "^2.3.1"

src/app.js

@@ -4,6 +4,7 @@ const path = require('path');
 const textToSVG = require('text-to-svg').loadSync(path.resolve(__dirname, 'font.woff'));
 const COLOR = require('./color');
 const sharp = require('sharp');
+const he = require('he');
 const app = express();
 app.use(compression());
 
@@ -12,7 +13,12 @@ const FONT_SIZE = SIZE * 0.5;
 
 const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args), ...args));
 
-const svg = (initials, color) => {
+const allGlyphsAvailable = initials => {
+    const { font } = textToSVG;
+    return !initials.split('').some(char => font.charToGlyph(char).index === 0);
+};
+
+const svgPath = (initials, color) => {
     const path = textToSVG.getPath(initials, {
         x: FONT_SIZE,
         y: FONT_SIZE,
@@ -21,21 +27,46 @@ const svg = (initials, color) => {
         attributes: { fill: '#FFFFFF' },
     });
     return `<svg
-        xmlns="http://www.w3.org/2000/svg"
-        version="1.1"
-        viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}">
-            <rect
-                x="0"
-                y="0"
-                width="${SIZE}"
-                height="${SIZE}"
-                fill="${color || '#ffeeee'}"
-                stroke-width="0"
-            />
-            ${path}
-    </svg>`;
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}">
+        <rect
+            x="0"
+            y="0"
+            width="${SIZE}"
+            height="${SIZE}"
+            fill="${color || '#ffeeee'}"
+            stroke-width="0"
+        />
+        ${path}
+</svg>`;
 };
 
+const svgText = (initials, color) => `<text
+    x="50%"
+    y="68%"
+    text-anchor="middle"
+    fill="white"
+    font-family="sans-serif"
+    font-size="${SIZE / 2}">
+        ${he.escape(initials)}
+</text>`;
+
+const svg = (initials, color) => `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}">
+        <rect
+            x="0"
+            y="0"
+            width="${SIZE}"
+            height="${SIZE}"
+            fill="${color || '#ffeeee'}"
+            stroke-width="0"
+        />
+        ${allGlyphsAvailable(initials) ? svgPath(initials, color) : svgText(initials, color)}
+</svg>`;
+
 const toSvg = (req, res) => {
     const { initials, index } = req.params;
     const color = COLOR[index];

src/app.test.js

@@ -41,7 +41,7 @@ describe('Avatar service', () => {
                     else done(new Error());
                 });
         });
-        it('should render a path element', done => {
+        it('should render a path element for available glyphs', done => {
             request(app)
                 .get(BASE_URL + '/12/PF.svg')
                 .expect(200)
@@ -51,6 +51,16 @@ describe('Avatar service', () => {
                     else done(new Error());
                 });
         });
+        it('should render a text element for unavailable glyphs', done => {
+            request(app)
+                .get(BASE_URL + '/12/P%E6%A0%91.svg')
+                .expect(200)
+                .parse(binaryParser)
+                .end((err, res) => {
+                    if (/<text(.|\n)*?\>/.test(res.body.toString())) done();
+                    else done(new Error());
+                });
+        });
         it('should always render a default color, even if `:index` is out of bounds', done => {
             request(app)
                 .get(BASE_URL + '/182736178123761/AW.svg')