feat: use unicode emoji!

Dockerfile

@@ -25,8 +25,6 @@ COPY . ./
 
 RUN mkdir -p __tests__/browser/__image_snapshots__/__diff_output__
 
-RUN make emojis
-
 EXPOSE 9966
 
 CMD ["test.browser"]

Dockerfile.legacy

@@ -32,8 +32,6 @@ COPY . ./
 
 RUN mkdir -p __tests__/browser/__image_snapshots__/__diff_output__
 
-RUN make emojis
-
 EXPOSE 9966
 
 CMD ["test.browser"]

Makefile

@@ -6,14 +6,6 @@ DOCKER_WORKSPACE := "/markdown"
 MOUNTS = --volume ${PWD}:${DOCKER_WORKSPACE} \
 	--volume ${DOCKER_WORKSPACE}/node_modules
 
-emojis: example/public/img/emojis ## Install our emojis.
-
-example/public/img/emojis: node_modules/@readme/emojis
-	rm -rf example/img/emojis
-	rm -rf example/public/img/emojis
-	mkdir -p example/public/img/emojis
-	cp node_modules/@readme/emojis/src/img/*.png example/public/img/emojis/
-
 ifeq ($(USE_LEGACY), true)
 dockerfile = -f Dockerfile.legacy
 endif

__tests__/__snapshots__/index.test.js.snap

@@ -73,7 +73,7 @@ Object {
 `;
 
 exports[`emojis 1`] = `
-"<p><img alt=\\":joy:\\" loading=\\"lazy\\" src=\\"/public/img/emojis/joy.png\\" title=\\":joy:\\" class=\\"emoji\\" align=\\"absmiddle\\" height=\\"20\\" width=\\"20\\" caption=\\"\\"><br>
+"<p>😂<br>
 <i class=\\"fa fa-lock\\"></i><br>
 :unknown-emoji:</p>"
 `;

__tests__/flavored-compilers/gemoji.test.js

@@ -0,0 +1,10 @@
+import { mdast, md } from '../../index';
+
+describe('gemoji compiler', () => {
+  it('writes an gemojis back to shortcodes', () => {
+    const doc = ':poop:';
+    const tree = mdast(doc);
+
+    expect(md(tree)).toMatch(doc);
+  });
+});

__tests__/gemoji-parser.test.js

@@ -3,9 +3,35 @@ const unified = require('unified');
 
 const parser = require('../processor/parse/gemoji-parser');
 
-test('should output an image node for a known emoji', () => {
+test('should output emoji', () => {
   const emoji = 'joy';
   const markdown = `This is a gemoji :${emoji}:.`;
+  const ast = {
+    type: 'root',
+    children: [
+      {
+        type: 'paragraph',
+        children: [
+          { type: 'text', value: 'This is a gemoji ' },
+          {
+            type: 'gemoji',
+            value: '😂',
+            name: emoji,
+          },
+          { type: 'text', value: '.' },
+        ],
+      },
+    ],
+  };
+
+  expect(unified().use(remarkParse).use(parser).data('settings', { position: false }).parse(markdown)).toStrictEqual(
+    ast,
+  );
+});
+
+test('should output an image node for a custom readme emoji', () => {
+  const emoji = 'owlbert';
+  const markdown = `This is a gemoji :${emoji}:.`;
   const ast = {
     type: 'root',
     children: [

lib/gemoji.js

@@ -0,0 +1,16 @@
+const { nameToEmoji } = require('gemoji');
+
+const owlmoji = ['owlbert-books', 'owlbert-mask', 'owlbert', 'owlbert-reading', 'owlbert-thinking'];
+
+class Emoji {
+  static kind = name => {
+    if (name in nameToEmoji) return 'gemoji';
+    else if (name.match(/^fa-/)) return 'fontawesome';
+    else if (owlmoji.includes(name)) return 'owlmoji';
+    return null;
+  };
+
+  static nameToEmoji = nameToEmoji;
+}
+
+module.exports = Emoji;

package.json

@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "build": "webpack --mode production",
-    "heroku-postbuild": "make emojis && webpack --mode production --config ./webpack.dev.js",
+    "heroku-postbuild": "webpack --mode production --config ./webpack.dev.js",
     "lint": "npm run lint:js && npm run lint:css",
     "lint:css": "stylelint '{components,styles}/**/*.{css,scss}'",
     "lint:js": "eslint --ext ts,tsx,js,jsx .",
@@ -28,10 +28,10 @@
     "watch": "webpack -w --progress --mode production"
   },
   "dependencies": {
-    "@readme/emojis": "^6.0.0",
     "@readme/syntax-highlighter": "^13.0.0",
     "copy-to-clipboard": "^3.3.3",
     "emoji-regex": "^10.3.0",
+    "gemoji": "^8.1.0",
     "hast-util-sanitize": "^4.0.0",
     "lodash.escape": "^4.0.1",
     "lodash.kebabcase": "^4.1.1",

processor/compile/gemoji.js

@@ -0,0 +1,6 @@
+module.exports = function GemojiCompiler() {
+  const { Compiler } = this;
+  const { visitors } = Compiler.prototype;
+
+  visitors.gemoji = node => `:${node.name}:`;
+};

processor/compile/index.js

@@ -3,6 +3,7 @@ export { default as codeTabsCompiler } from './code-tabs';
 export { default as divCompiler } from './div';
 export { default as escapeCompiler } from './escape';
 export { default as figureCompiler } from './figure';
+export { default as gemojiCompiler } from './gemoji';
 export { default as htmlBlockCompiler } from './html-block';
 export { default as iconCompiler } from './i';
 export { default as imageCompiler } from './image';

processor/parse/gemoji-parser.js

@@ -1,56 +1,58 @@
-const Emoji = require('@readme/emojis').emoji;
+const Emoji = require('../../lib/gemoji');
 
 const { insertInlineTokenizerBefore } = require('./utils');
 
-const emojis = new Emoji();
-
 const colon = ':';
 
 function tokenize(eat, value, silent) {
   // Check if we’re at a short-code.
   if (value.charAt(0) !== colon) return false;
 
   const pos = value.indexOf(colon, 1);
-
   if (pos === -1) return false;
 
-  const subvalue = value.slice(1, pos);
+  const name = value.slice(1, pos);
 
   // Exit with true in silent
   if (silent) return true;
 
-  const match = colon + subvalue + colon;
-
-  if (subvalue.substr(0, 3) === 'fa-') {
-    return eat(match)({
-      type: 'i',
-      data: {
-        hName: 'i',
-        hProperties: {
-          className: ['fa', subvalue],
+  const match = colon + name + colon;
+
+  switch (Emoji.kind(name)) {
+    case 'gemoji':
+      return eat(match)({
+        type: 'gemoji',
+        value: Emoji.nameToEmoji[name],
+        name,
+      });
+    case 'fontawesome':
+      return eat(match)({
+        type: 'i',
+        data: {
+          hName: 'i',
+          hProperties: {
+            className: ['fa', name],
+          },
         },
-      },
-    });
-  }
-
-  if (emojis.is(subvalue)) {
-    return eat(match)({
-      type: 'image',
-      title: `:${subvalue}:`,
-      alt: `:${subvalue}:`,
-      url: `/public/img/emojis/${subvalue}.png`,
-      data: {
-        hProperties: {
-          className: 'emoji',
-          align: 'absmiddle',
-          height: '20',
-          width: '20',
+      });
+    case 'owlmoji':
+      return eat(match)({
+        type: 'image',
+        title: `:${name}:`,
+        alt: `:${name}:`,
+        url: `/public/img/emojis/${name}.png`,
+        data: {
+          hProperties: {
+            className: 'emoji',
+            align: 'absmiddle',
+            height: '20',
+            width: '20',
+          },
         },
-      },
-    });
+      });
+    default:
+      return false;
   }
-
-  return false;
 }
 
 function locate(value, fromIndex) {