client/tags: fix tag categories with spaces

client/html/post_readonly_sidebar.tpl

@@ -50,14 +50,14 @@
         --><% for (let tag of ctx.post.tags) { %><!--
             --><li><!--
                 --><% if (ctx.canViewTags) { %><!--
-                --><a href='/tag/<%= tag %>' class='tag-<%= ctx.getTagCategory(tag) %>'><!--
+                --><a href='/tag/<%= tag %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
                     --><i class='fa fa-tag'></i><!--
                 --><% } %><!--
                 --><% if (ctx.canListPosts) { %><!--
                     --></a><!--
                 --><% } %><!--
                 --><% if (ctx.canListPosts) { %><!--
-                    --><a href='/posts/text=<%= tag %>' class='tag-<%= ctx.getTagCategory(tag) %>'><!--
+                    --><a href='/posts/text=<%= tag %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
                 --><% } %><!--
                     --><%= tag %><!--
                 --><% if (ctx.canListPosts) { %><!--

client/js/controls/tag_auto_complete_control.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const unindent = require('../util/misc.js').unindent;
 const tags = require('../tags.js');
+const misc = require('../util/misc.js');
 const AutoCompleteControl = require('./auto_complete_control.js');
 
 class TagAutoCompleteControl extends AutoCompleteControl {
@@ -31,9 +31,10 @@ class TagAutoCompleteControl extends AutoCompleteControl {
                     const category = kv[1].category;
                     const origName = tags.getOriginalTagName(kv[0]);
                     const usages = kv[1].usages;
+                    const cssName = misc.makeCssName(category, 'tag');
                     return {
-                        caption: unindent`
-                            <span class="tag-${category}">
+                        caption: misc.unindent`
+                            <span class="${cssName}">
                                 ${origName} (${usages})
                             </span>`,
                         value: kv[0],

client/js/controls/tag_input_control.js

@@ -2,6 +2,7 @@
 
 const api = require('../api.js');
 const tags = require('../tags.js');
+const misc = require('../util/misc.js');
 const views = require('../util/views.js');
 const TagAutoCompleteControl = require('./tag_auto_complete_control.js');
 
@@ -437,7 +438,9 @@ class TagInputControl {
             views.makeNonVoidElement(
                 'a',
                 {
-                    class: actualTag ? 'tag-' + actualTag.category : '',
+                    class: actualTag ?
+                        misc.makeCssName(actualTag.category, 'tag') :
+                        '',
                     href: '/tag/' + text,
                 },
                 text));

client/js/tags.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const misc = require('./util/misc.js');
 const request = require('superagent');
 
 let _tags = null;
@@ -63,8 +64,9 @@ function _refreshStylesheet() {
     _stylesheet = document.createElement('style');
     document.head.appendChild(_stylesheet);
     for (let category of getAllCategories()) {
+        const ruleName = misc.makeCssName(category.name, 'tag');
         _stylesheet.sheet.insertRule(
-            `.tag-${category.name} { color: ${category.color} }`,
+            `.${ruleName} { color: ${category.color} }`,
             _stylesheet.sheet.cssRules.length);
     }
 }

client/js/util/misc.js

@@ -220,6 +220,10 @@ function confirmPageExit() {
     }
 }
 
+function makeCssName(text, suffix) {
+    return suffix + '-' + text.replace(/[^a-z0-9]/g, '_');
+}
+
 module.exports = {
     range: range,
     formatSearchQuery: formatSearchQuery,
@@ -232,4 +236,5 @@ module.exports = {
     enableExitConfirmation: enableExitConfirmation,
     disableExitConfirmation: disableExitConfirmation,
     confirmPageExit: confirmPageExit,
+    makeCssName: makeCssName,
 };

client/js/util/views.js

@@ -154,11 +154,11 @@ function makeTagLink(name) {
         makeNonVoidElement(
             'a', {
                 'href': '/tag/' + name,
-                'class': 'tag-' + category,
+                'class': misc.makeCssName(category, 'tag'),
             }, name) :
         makeNonVoidElement(
             'span', {
-                'class': 'tag-' + category,
+                'class': misc.makeCssName(category, 'tag'),
             },
             name);
 }
@@ -312,6 +312,7 @@ function getTemplate(templatePath) {
             makeUserLink: makeUserLink,
             makeFlexboxAlign: makeFlexboxAlign,
             makeAccessKey: makeAccessKey,
+            makeCssName: misc.makeCssName,
         });
         return htmlToDom(templateFactory(ctx));
     };