feat: Emoji build (#1766)

* Fix incorrect file name

* Improve build

- Display emoji API URL
- Display number of emoji entries retrieved from API
- Distinguish between creating and updating files
- Catch and display errors (gracefully fail for offline work)
- Add “DO NOT EDIT” comment to generated output

* Add emoji to automated build

* Remove emoji plugin from dev index.html

Author: jhildenbiddle

build/emoji.js

@@ -9,12 +9,15 @@ const filePaths = {
     'src',
     'core',
     'render',
-    'emojify-data.js'
+    'emoji-data.js'
   ),
 };
 
 async function getEmojiData() {
   const emojiDataURL = 'https://api.github.com/emojis';
+
+  console.info(`- Fetching emoji data from ${emojiDataURL}`);
+
   const response = await axios.get(emojiDataURL);
   const baseURL = Object.values(response.data)
     .find(url => /unicode\//)
@@ -26,16 +29,18 @@ async function getEmojiData() {
     ([key, value]) => (data[key] = value.replace(baseURL, ''))
   );
 
+  console.info(`- Retrieved ${Object.keys(data).length} emoji entries`);
+
   return {
     baseURL,
     data,
   };
 }
 
 function writeEmojiPage(emojiData) {
+  const isExistingPage = fs.existsSync(filePaths.emojiMarkdown);
   const emojiPage =
-    (fs.existsSync(filePaths.emojiMarkdown) &&
-      fs.readFileSync(filePaths.emojiMarkdown, 'utf8')) ||
+    (isExistingPage && fs.readFileSync(filePaths.emojiMarkdown, 'utf8')) ||
     `<!-- START -->\n\n<!-- END -->`;
   const emojiRegEx = /(<!--\s*START.*-->\n)([\s\S]*)(\n<!--\s*END.*-->)/;
   const emojiMatch = emojiPage.match(emojiRegEx);
@@ -53,39 +58,52 @@ function writeEmojiPage(emojiData) {
   if (emojiMarkdown !== newEmojiMarkdown) {
     const newEmojiPage = emojiPage.replace(
       emojiMatch[0],
-      `${emojiMarkdownStart}\n${newEmojiMarkdown}\n${emojiMarkdownEnd}`
+      `${emojiMarkdownStart}\n\n${newEmojiMarkdown}\n\n${emojiMarkdownEnd}`
     );
 
     fs.writeFileSync(filePaths.emojiMarkdown, newEmojiPage);
-    console.info(`- Created new file: ${filePaths.emojiMarkdown}`);
+
+    console.info(
+      `- ${!isExistingPage ? 'Created' : 'Updated'}: ${filePaths.emojiMarkdown}`
+    );
   } else {
-    console.info(`- No changes to file: ${filePaths.emojiMarkdown}`);
+    console.info(`- No changes: ${filePaths.emojiMarkdown}`);
   }
 }
 
 function writeEmojiJS(emojiData) {
-  const emojiJS =
-    fs.existsSync(filePaths.emojiJS) &&
-    fs.readFileSync(filePaths.emojiJS, 'utf8');
-  const newEmojiJS = `export default ${JSON.stringify(emojiData, {}, 2)}`;
+  const isExistingPage = fs.existsSync(filePaths.emojiJS);
+  const emojiJS = isExistingPage && fs.readFileSync(filePaths.emojiJS, 'utf8');
+  const newEmojiJS = [
+    '/* eslint-disable */\n',
+    '// =============================================================================',
+    '// DO NOT EDIT: This file is auto-generated by an /build/emoji.js',
+    '// =============================================================================\n',
+    `export default ${JSON.stringify(emojiData, {}, 2)}`,
+  ].join('\n');
 
   if (!emojiJS || emojiJS !== newEmojiJS) {
     fs.writeFileSync(filePaths.emojiJS, newEmojiJS);
-    console.info(`- Created new file: ${filePaths.emojiJS}`);
+
+    console.info(
+      `- ${!isExistingPage ? 'Created' : 'Updated'}: ${filePaths.emojiJS}`
+    );
   } else {
-    console.info(`- No changes to file: ${filePaths.emojiJS}`);
+    console.info(`- No changes: ${filePaths.emojiJS}`);
   }
 }
 
 (async () => {
-  console.log('Build emoji');
+  console.info('Build emoji');
 
   try {
     const emojiData = await getEmojiData();
 
-    writeEmojiPage(emojiData);
-    writeEmojiJS(emojiData);
-  } catch (e) {
-    console.error(e);
+    if (emojiData) {
+      writeEmojiPage(emojiData);
+      writeEmojiJS(emojiData);
+    }
+  } catch (err) {
+    console.warn(`- Error: ${err.message}`);
   }
 })();

docs/emoji.md

@@ -4,7 +4,7 @@ Below is a complete list of emoji shorthand codes. Docsify can be configured to
 
 <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));">
 
-<!-- START: auto-generated emoji markdown (do not edit between these comments) -->
+<!-- START: Auto-generated content (/build/emoji.js) -->
 
 :100: `:100:`
 
@@ -3754,6 +3754,6 @@ Below is a complete list of emoji shorthand codes. Docsify can be configured to
 
 :zzz: `:zzz:`
 
-<!-- END: auto-generated emoji markdown -->
+<!-- END: Auto-generated content (/build/emoji.js) -->
 
 </div>

index.html

@@ -115,7 +115,6 @@
     </script>
     <script src="/lib/docsify.js"></script>
     <script src="/lib/plugins/search.js"></script>
-    <script src="/lib/plugins/emoji.js"></script>
     <script src="/lib/plugins/front-matter.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>

package.json

@@ -24,11 +24,11 @@
     "build:cover": "node build/cover.js",
     "build:css:min": "mkdirp lib/themes && npm run css -- -o lib/themes && node build/mincss.js",
     "build:css": "mkdirp themes && npm run css -- -o themes",
-    "build:emoji": "node ./build/emoji.js && eslint ./src/core/render/emojify-data.js --fix --quiet",
+    "build:emoji": "node ./build/emoji.js",
     "build:js": "cross-env NODE_ENV=production node build/build.js",
     "build:ssr": "node build/ssr.js",
     "build:test": "npm run build && npm test",
-    "build": "rimraf lib themes && run-s build:js build:css build:css:min build:ssr build:cover",
+    "build": "rimraf lib themes && run-s build:js build:css build:css:min build:ssr build:cover build:emoji",
     "css": "node build/css",
     "dev:ssr": "run-p serve:ssr watch:*",
     "dev": "run-p serve watch:*",