Generate Emoji image storybook page

web/.storybook/main.js

@@ -45,7 +45,9 @@ module.exports = {
         },
       ],
     });
+
     return config;
   },
   framework: '@storybook/react',
+  staticDirs: ['../public', '../../static'],
 };

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

web/package.json

@@ -20,6 +20,7 @@
 		"@codemirror/language-data": "6.1.0",
 		"@fontsource/open-sans": "4.5.14",
 		"@fontsource/poppins": "4.5.10",
+		"@next/bundle-analyzer": "^13.1.1",
 		"@uiw/codemirror-theme-bbedit": "4.19.7",
 		"@uiw/react-codemirror": "4.19.7",
 		"@xstate/react": "3.0.2",
@@ -30,7 +31,6 @@
 		"classnames": "2.3.2",
 		"date-fns": "2.29.3",
 		"entities": "^4.4.0",
-		"install": "^0.13.0",
 		"lodash": "4.17.21",
 		"next": "13.1.5",
 		"next-with-less": "2.0.5",
@@ -54,8 +54,7 @@
 		"ua-parser-js": "1.0.33",
 		"video.js": "7.20.3",
 		"xstate": "4.35.2",
-		"yaml": "2.2.1",
+		"yaml": "2.2.1"
-		"@next/bundle-analyzer": "^13.1.1"
 	},
 	"devDependencies": {
 		"@babel/core": "7.20.12",
@@ -100,9 +99,12 @@
 		"eslint-plugin-react": "7.32.1",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"eslint-plugin-storybook": "0.6.10",
+		"handlebars": "^4.7.7",
 		"html-webpack-plugin": "5.5.0",
+		"install": "^0.13.0",
 		"less": "4.1.3",
 		"less-loader": "11.1.0",
+		"npm": "^9.4.0",
 		"prettier": "2.8.3",
 		"sass": "1.57.1",
 		"sass-loader": "13.2.0",