diff --git a/web/.storybook/stories-category-doc-pages/Design.stories.mdx b/web/.storybook/stories-category-doc-pages/Design.stories.mdx
index ca5b63b67..d8985f12a 100644
--- a/web/.storybook/stories-category-doc-pages/Design.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Design.stories.mdx
@@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
+
# Owncast Design Guidelines & Resources
diff --git a/web/.storybook/stories-category-doc-pages/Development.stories.mdx b/web/.storybook/stories-category-doc-pages/Development.stories.mdx
index e2776cae6..df8413b9b 100644
--- a/web/.storybook/stories-category-doc-pages/Development.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Development.stories.mdx
@@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
+
---
title: "How to work on Owncast"
diff --git a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
index 9cc3721af..c3874b988 100644
--- a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
@@ -1,148 +1,324 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
-
+
# Built-in Custom Emoji
+
-
- LICENSE
-
-
-
+
+ LICENSE
+
+`} />
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
-
- LICENSE
-
-
-
+
+ LICENSE
+
+`} />
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
-
- LICENSE
-
-
-
+
+ LICENSE
+
+`} />
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
-
- LICENSE
-
-
-
+
+ LICENSE
+
+`} />
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
diff --git a/web/.storybook/stories-category-doc-pages/Images.stories.mdx b/web/.storybook/stories-category-doc-pages/Images.stories.mdx
index 736a3fa20..dcf0efdc7 100644
--- a/web/.storybook/stories-category-doc-pages/Images.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Images.stories.mdx
@@ -1,16 +1,27 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Image, ImageRow } from './ImageAsset';
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
-
+
# Images
-
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
diff --git a/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx b/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx
index 02dfa27bc..956af1841 100644
--- a/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx
@@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
+
# Owncast Product Definition
diff --git a/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx b/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
index 9f18b5a45..7fcdd02f1 100644
--- a/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
@@ -1,41 +1,102 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Image, ImageRow } from './ImageAsset';
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
-
+
# Social Platform Images
-
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
diff --git a/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx b/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
index e97c9732b..beeb45a1d 100644
--- a/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
@@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
+
# How we develop components
diff --git a/web/.storybook/stories-category-doc-pages/InfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
similarity index 89%
rename from web/.storybook/stories-category-doc-pages/InfrastructureExamples.stories.mdx
rename to web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
index 68b32c4e3..fe1150998 100644
--- a/web/.storybook/stories-category-doc-pages/InfrastructureExamples.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
@@ -1,14 +1,20 @@
import { Mermaid } from 'mdx-mermaid/Mermaid';
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
-
+
-
-
-
+
-
-
-
+
+
-
-
-
+
-
-
diff --git a/web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx
new file mode 100644
index 000000000..97b44f7ea
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx
@@ -0,0 +1,55 @@
+import { Mermaid } from 'mdx-mermaid/Mermaid';
+import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
+
+
+
+
+
+S3
+ Owncast--Web-->WebPlayer
+ Owncast<--Chat-->WebPlayer
+ Owncast--Web-->Embeds
+
+ CDN--Download\\nVideo-->WebPlayer
+ CDN--Download\\nVideo-->Embeds
+ CDN--Download\\nVideo-->MobileApps
+ CDN--Download\\nVideo-->SmartTV
+ CDN--Download\\nVideo-->VLC
+
+ S3 --- CDN
+
+`}
+/>
diff --git a/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx
new file mode 100644
index 000000000..28a298ddb
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx
@@ -0,0 +1,45 @@
+import { Mermaid } from 'mdx-mermaid/Mermaid';
+import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
+
+
+
+
+
+WebPlayer
+ Owncast<--Chat-->WebPlayer
+ CDN--Web-->Embeds
+
+ CDN--Download\\nVideo-->WebPlayer
+ CDN--Download\\nVideo-->Embeds
+ CDN--Download\\nVideo-->MobileApps
+ CDN--Download\\nVideo-->SmartTV
+ CDN--Download\\nVideo-->VLC
+
+ CDN --- Owncast
+
+`}
+/>
diff --git a/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx b/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx
new file mode 100644
index 000000000..34a9da1c9
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx
@@ -0,0 +1,50 @@
+import { Mermaid } from 'mdx-mermaid/Mermaid';
+import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
+
+
+
+
+
+S3
+
+ subgraph Video Assets
+ S3[fa:fa-hard-drive S3 Object Storage]
+ end
+
+ subgraph Clients
+ WebPlayer[fa:fa-window-maximize Web App]
+ Embeds[fa:fa-window-restore Embeds]
+ MobileApps[fa:fa-mobile-screen Mobile Apps]
+ SmartTV[fa:fa-tv Smart TV]
+ VLC[fa:fa-shapes VLC]
+ end
+
+ Owncast--Web-->WebPlayer
+ Owncast--Web-->Embeds
+ Owncast<--Chat-->WebPlayer
+ S3--Download\\nVideo-->WebPlayer
+ S3--Download\\nVideo-->Embeds
+ S3--Download\\nVideo-->MobileApps
+ S3--Download\\nVideo-->SmartTV
+ S3--Download\\nVideo-->VLC
+
+`}
+/>
diff --git a/web/.storybook/tools/Document.stories.mdx b/web/.storybook/tools/Document.stories.mdx
index 1186c7e45..21cec82df 100644
--- a/web/.storybook/tools/Document.stories.mdx
+++ b/web/.storybook/tools/Document.stories.mdx
@@ -1,5 +1,5 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
+
{{content}}
diff --git a/web/.storybook/tools/Emoji.stories.mdx b/web/.storybook/tools/Emoji.stories.mdx
index c0c969d21..25633ebf6 100644
--- a/web/.storybook/tools/Emoji.stories.mdx
+++ b/web/.storybook/tools/Emoji.stories.mdx
@@ -1,25 +1,27 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
-
+
# Built-in Custom Emoji
{{#each emojiCollections}}
+
-
- LICENSE
-
-
-
+
+ LICENSE
+
+`} />
+
+
+ {{#each images}}
+
+ 
+
+ {{/each}}
+
{{/each}}
diff --git a/web/.storybook/tools/Images.stories.mdx b/web/.storybook/tools/Images.stories.mdx
index ad6a60b03..c0a986954 100644
--- a/web/.storybook/tools/Images.stories.mdx
+++ b/web/.storybook/tools/Images.stories.mdx
@@ -1,12 +1,13 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Image, ImageRow } from './ImageAsset';
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
-
+
# {{capitalize title}}
-
+
+ {{#each images}}
+
+
+
+ {{/each}}
+
diff --git a/web/.storybook/tools/ImagesLarge.stories.mdx b/web/.storybook/tools/ImagesLarge.stories.mdx
new file mode 100644
index 000000000..ad6a60b03
--- /dev/null
+++ b/web/.storybook/tools/ImagesLarge.stories.mdx
@@ -0,0 +1,12 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Image, ImageRow } from './ImageAsset';
+
+
+
+# {{capitalize title}}
+
+
diff --git a/web/.storybook/tools/generate-image-story.mjs b/web/.storybook/tools/generate-image-story.mjs
index a3280b831..d58a45144 100644
--- a/web/.storybook/tools/generate-image-story.mjs
+++ b/web/.storybook/tools/generate-image-story.mjs
@@ -13,6 +13,7 @@ const dir = args[2];
const title = args[3];
const category = args[4];
const publicPath = args[5];
+const useLarge = args[6];
if (args.length < 6) {
console.error('Usage: generate-image-story.mjs <category> <webpublicpath>');
@@ -30,7 +31,8 @@ const images = readdirSync(dir)
})
.filter(Boolean);
-const template = fs.readFileSync('./Images.stories.mdx', 'utf8');
+const templateFile = useLarge ? './ImagesLarge.stories.mdx' : './Images.stories.mdx';
+const template = fs.readFileSync(templateFile, 'utf8');
let t = handlebars.compile(template);
let output = t({ images, title, category });
console.log(output);
diff --git a/web/.storybook/tools/generate-stories.sh b/web/.storybook/tools/generate-stories.sh
index 96949a2ce..845fed1ba 100755
--- a/web/.storybook/tools/generate-stories.sh
+++ b/web/.storybook/tools/generate-stories.sh
@@ -13,5 +13,5 @@ node generate-document-stories.mjs
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
+node generate-image-story.mjs ../story-assets/project/ "Logos & Graphics" "owncast/Project Assets/Logos & Graphics" "project" --large >../stories-category-doc-pages/LogosAndGraphics.stories.mdx
+node generate-image-story.mjs ../story-assets/tshirt/ "T-shirt" "owncast/Project Assets/T-Shirt" "tshirt" --large >../stories-category-doc-pages/Tshirt.stories.mdx