Generate Emoji image storybook page

web/.storybook/tools/Emoji.stories.md

@@ -0,0 +1,22 @@
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Image, ImageRow } from './ImageAsset';
+
+<Meta title="owncast/Assets/Emoji" />
+
+# Built-in Custom Emoji
+
+{{#each emojiCollections}}
+
+## {{capitalize this.name}}
+	<a href="/img/emoji/{{this.name}}/LICENSE.md" target="_blank">
+		LICENSE
+	</a>
+	<ImageRow images={[
+		{{#each this.images}}
+			{src: "{{this.src}}", name: "{{this.name}}"},
+		{{/each}}
+	]}/>
+
+{{/each}}

web/.storybook/tools/generate-emoji-story.mjs

@@ -0,0 +1,37 @@
+import fs from 'fs';
+import path from 'path';
+
+import { readdirSync } from 'fs';
+import handlebars from 'handlebars';
+
+handlebars.registerHelper('capitalize', function (str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+});
+
+function getDirectories(path) {
+  return fs.readdirSync(path).filter(function (file) {
+    return fs.statSync(path + '/' + file).isDirectory();
+  });
+}
+
+const emojiDir = path.resolve('../../../static/img/emoji');
+
+const emojiCollectionDirs = getDirectories(emojiDir).map(dir => {
+  return dir;
+});
+
+let emojiCollections = {};
+
+emojiCollectionDirs.forEach(collection => {
+  const emojiCollection = readdirSync(path.resolve(emojiDir, collection))
+    .filter(f => f.toLowerCase() !== 'license.md')
+    .map(emoji => {
+      return { name: emoji, src: `/img/emoji/${collection}/${emoji}` };
+    });
+  emojiCollections[collection] = { name: collection, images: emojiCollection };
+});
+
+const template = fs.readFileSync('./Emoji.stories.md', 'utf8');
+let t = handlebars.compile(template);
+let output = t({ emojiCollections });
+console.log(output);

web/.storybook/tools/generate-stories.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+# Generate the custom Emoji story
+node generate-emoji-story.mjs >../stories-category-doc-pages/Emoji.stories.mdx