LogalDeveloper/owncast
0
Fork 0
Code Activity

Add additional assets to Storybook

Browse Source
This commit is contained in:
Gabe Kangas
2023-01-27 20:07:14 -08:00
parent 1054e4e4b1
commit f97c180c3d
32 changed files with 197 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/.storybook/tools/Emoji.stories.mdx
View File

@@ -1,7 +1,7 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Assets/Emoji" />
<Meta title="owncast/Frontend Assets/Emoji" />
# Built-in Custom Emoji

2
web/.storybook/tools/Images.stories.mdx
View File

@@ -1,7 +1,7 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Assets/{{title}}" />
<Meta title="{{category}}" />
# {{capitalize title}}

13
web/.storybook/tools/generate-image-story.mjs
View File

@@ -11,13 +11,14 @@ handlebars.registerHelper('capitalize', function (str) {
const args = process.argv;
const dir = args[2];
const title = args[3];
if (args.length < 4) {
console.error('Usage: generate-image-story.mjs <dir> <title>');
const category = args[4];
const publicPath = args[5];
if (args.length < 6) {
console.error('Usage: generate-image-story.mjs <dir> <title> <category> <webpublicpath>');
process.exit(1);
}
const relativeDir = path.relative('../../public/', dir);
const images = readdirSync(dir)
.map(img => {
const resolvedPath = path.resolve(dir, img);
@@ -25,11 +26,11 @@ const images = readdirSync(dir)
return;
}
return { name: img, src: `${relativeDir}/${img}` };
return { name: img, src: `${publicPath}/${img}` };
})
.filter(Boolean);
const template = fs.readFileSync('./Images.stories.mdx', 'utf8');
let t = handlebars.compile(template);
let output = t({ images, title });
let output = t({ images, title, category });
console.log(output);

6
web/.storybook/tools/generate-stories.sh
View File

@@ -11,5 +11,7 @@ node generate-document-stories.mjs
# Project image assets
node generate-image-story.mjs ../../public/img/ Images >../stories-category-doc-pages/Images.stories.mdx
node generate-image-story.mjs ../../public/img/platformlogos/ "Social Platform Images" >../stories-category-doc-pages/SocialPlatformImages.stories.mdx
node generate-image-story.mjs ../../public/img/ Images "owncast/Frontend Assets/Images" "/img" >../stories-category-doc-pages/Images.stories.mdx
node generate-image-story.mjs ../../public/img/platformlogos/ "Social Platform Images" "owncast/Frontend Assets/Social Platform Images" "/img/platformlogos" >../stories-category-doc-pages/SocialPlatformImages.stories.mdx
node generate-image-story.mjs ../story-assets/project/ "Logos & Graphics" "owncast/Project Assets/Logos & Graphics" "/project" >../stories-category-doc-pages/LogosAndGraphics.stories.mdx
node generate-image-story.mjs ../story-assets/tshirt/ "T-shirt" "owncast/Project Assets/T-Shirt" "/tshirt" >../stories-category-doc-pages/Tshirt.stories.mdx