Add select documentation to Storybook

web/.storybook/tools/Document.stories.mdx

@@ -0,0 +1,5 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="owncast/Documentation/{{title}}" />
+
+{{content}}

web/.storybook/tools/generate-document-stories.mjs

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import handlebars from 'handlebars';
+
+const template = fs.readFileSync('./Document.stories.mdx', 'utf8');
+let t = handlebars.compile(template, { noEscape: true });
+
+const documents = [
+  {
+    title: 'Product Definition',
+    name: 'ProductDefinition',
+    path: '../../../docs/product-definition.md',
+  },
+  { title: 'Design', name: 'Design', path: '../../../.design/DESIGN.md' },
+  {
+    title: 'Building Frontend Components',
+    name: 'WebComponents',
+    path: '../../../web/components/_COMPONENT_HOW_TO.md',
+  },
+  {
+    title: 'Get Started with Owncast Development',
+    name: 'Development',
+    path: '/tmp/development.md',
+  },
+];
+
+documents.forEach(doc => {
+  if (!fs.existsSync(doc.path)) {
+    return;
+  }
+
+  const document = fs.readFileSync(doc.path, 'utf8');
+  const output = t({ name: doc.name, title: doc.title, content: document });
+  fs.writeFileSync(`../stories-category-doc-pages/${doc.name}.stories.mdx`, output);
+});

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

@@ -2,3 +2,8 @@
 
 # Generate the custom Emoji story
 node generate-emoji-story.mjs >../stories-category-doc-pages/Emoji.stories.mdx
+
+# Generate stories out of documentation
+
+# Pull down the doc about development
+curl -s https://raw.githubusercontent.com/owncast/owncast.github.io/master/content/development.md >/tmp/development.md