LogalDeveloper/owncast
0
Fork 0
Code Activity

Generate more stories from images

Browse Source
This commit is contained in:
Gabe Kangas
2023-01-26 20:14:52 -08:00
parent 4638afcc7a
commit 647685627d
5 changed files with 109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/.storybook/stories-category-doc-pages/Images.stories.mdx Normal file
View File

@@ -0,0 +1,16 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Assets/Images" />
# Images
<ImageRow images={[
{src: "img/fediverse-black.png", name: "fediverse-black.png"},
{src: "img/fediverse-color.png", name: "fediverse-color.png"},
{src: "img/follow.svg", name: "follow.svg"},
{src: "img/indieauth.png", name: "indieauth.png"},
{src: "img/like.svg", name: "like.svg"},
{src: "img/repost.svg", name: "repost.svg"},
]}/>

41
web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx Normal file
View File

@@ -0,0 +1,41 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Assets/Social Platform Images" />
# Social Platform Images
<ImageRow images={[
{src: "img/platformlogos/bandcamp.svg", name: "bandcamp.svg"},
{src: "img/platformlogos/default.svg", name: "default.svg"},
{src: "img/platformlogos/discord.svg", name: "discord.svg"},
{src: "img/platformlogos/donate.svg", name: "donate.svg"},
{src: "img/platformlogos/facebook.svg", name: "facebook.svg"},
{src: "img/platformlogos/fediverse.svg", name: "fediverse.svg"},
{src: "img/platformlogos/follow.svg", name: "follow.svg"},
{src: "img/platformlogos/github.svg", name: "github.svg"},
{src: "img/platformlogos/gitlab.svg", name: "gitlab.svg"},
{src: "img/platformlogos/google.svg", name: "google.svg"},
{src: "img/platformlogos/instagram.svg", name: "instagram.svg"},
{src: "img/platformlogos/keyoxide.png", name: "keyoxide.png"},
{src: "img/platformlogos/ko-fi.svg", name: "ko-fi.svg"},
{src: "img/platformlogos/lbry.svg", name: "lbry.svg"},
{src: "img/platformlogos/liberapay.svg", name: "liberapay.svg"},
{src: "img/platformlogos/link.svg", name: "link.svg"},
{src: "img/platformlogos/linkedin.svg", name: "linkedin.svg"},
{src: "img/platformlogos/mastodon.svg", name: "mastodon.svg"},
{src: "img/platformlogos/matrix.svg", name: "matrix.svg"},
{src: "img/platformlogos/odysee.svg", name: "odysee.svg"},
{src: "img/platformlogos/patreon.svg", name: "patreon.svg"},
{src: "img/platformlogos/paypal.svg", name: "paypal.svg"},
{src: "img/platformlogos/snapchat.svg", name: "snapchat.svg"},
{src: "img/platformlogos/soundcloud.svg", name: "soundcloud.svg"},
{src: "img/platformlogos/spotify.svg", name: "spotify.svg"},
{src: "img/platformlogos/steam.svg", name: "steam.svg"},
{src: "img/platformlogos/tiktok.svg", name: "tiktok.svg"},
{src: "img/platformlogos/twitch.svg", name: "twitch.svg"},
{src: "img/platformlogos/twitter.svg", name: "twitter.svg"},
{src: "img/platformlogos/xmpp.svg", name: "xmpp.svg"},
{src: "img/platformlogos/youtube.svg", name: "youtube.svg"},
]}/>

12
web/.storybook/tools/Images.stories.mdx Normal file
View File

@@ -0,0 +1,12 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Assets/{{title}}" />
# {{capitalize title}}
<ImageRow images={[
{{#each images}}
{src: "{{this.src}}", name: "{{this.name}}"},
{{/each}}
]}/>

35
web/.storybook/tools/generate-image-story.mjs Normal file
View File

@@ -0,0 +1,35 @@
import fs from 'fs';
import path, { resolve } from 'path';
import { readdirSync, lstatSync } from 'fs';
import handlebars from 'handlebars';
handlebars.registerHelper('capitalize', function (str) {
return str.charAt(0).toUpperCase() + str.slice(1);
});
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>');
process.exit(1);
}
const relativeDir = path.relative('../../public/', dir);
const images = readdirSync(dir)
.map(img => {
const resolvedPath = path.resolve(dir, img);
if (lstatSync(resolvedPath).isDirectory()) {
return;
}
return { name: img, src: `${relativeDir}/${img}` };
})
.filter(Boolean);
const template = fs.readFileSync('./Images.stories.mdx', 'utf8');
let t = handlebars.compile(template);
let output = t({ images, title });
console.log(output);

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

@@ -8,3 +8,8 @@ node generate-emoji-story.mjs >../stories-category-doc-pages/Emoji.stories.mdx
# Pull down the doc about development
curl -s https://raw.githubusercontent.com/owncast/owncast.github.io/master/content/development.md >/tmp/development.md
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