Add some images+icons to assets section

web/assets/images/moderator.svg

@@ -0,0 +1 @@
+<svg height="500" viewBox="0 0 132.29166 132.29167" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="432.85147" x2="464.6438" y1="49.976803" y2="49.976803"><stop offset="0" stop-color="#2087e2"/><stop offset="1" stop-color="#b63fff"/></linearGradient><g transform="matrix(4.161118 0 0 4.1611169 -1801.146 -141.81351)"><path d="m438.6723 34.080635h20.15068a5.8208333 5.8208333 45 0 1 5.82083 5.820833v20.150671a5.8208333 5.8208333 135 0 1 -5.82083 5.820833h-20.15068a5.8208333 5.8208333 45 0 1 -5.82083-5.820833v-20.150671a5.8208333 5.8208333 135 0 1 5.82083-5.820833z" fill="url(#a)" height="31.792337" width="31.792337" x="432.85147" y="34.080635"/><g><path d="m461.95662 41.182335c-1.66521 11.401742-7.22749 25.141864-18.65902 19.147316l6.20739 5.54333h9.31778c3.21477 0 5.82083-2.606077 5.82083-5.820833v-16.150953z" fill="#1d1535" fill-opacity=".334677"/><path d="m448.89883 37.266483s-1.71315 13.938348-.15119 23.866856c1.57746 10.027015-19.60255-17.878401-11.92465-19.034107 7.67789-1.155706 12.07584-4.832749 12.07584-4.832749z" fill="#e2e8f0" fill-opacity=".306452"/><path d="m435.99505 42.07222c6.79702.447172 12.75258-4.805738 12.75258-4.805738s5.95556 5.25291 12.75258 4.805738c-.58133 12.744387-7.49513 20.585687-12.75258 20.62813-5.1879.04188-12.17125-7.883743-12.75258-20.62813z" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="2"/></g></g></svg>

web/stories/ImageAsset.tsx

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+
+export function ImageAsset(props) {
+  const { name, src } = props;
+
+  const containerStyle = {
+    borderRadius: '20px',
+    width: '12vw',
+    height: '12vw',
+    minWidth: '100px',
+    minHeight: '100px',
+    borderWidth: '1.5px',
+    borderStyle: 'solid',
+    borderColor: 'lightgray',
+    overflow: 'hidden',
+    margin: '0.3vw',
+  };
+
+  const colorBlockStyle = {
+    height: '70%',
+    width: '100%',
+    backgroundColor: 'white',
+  };
+
+  const colorDescriptionStyle = {
+    textAlign: 'center',
+    color: 'gray',
+    fontSize: '0.8em',
+  };
+
+  const imageStyle = {
+    width: '100%',
+    height: '80%',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    marginTop: '5px',
+    backgroundImage: `url(${src})`,
+  };
+
+  return (
+    <figure style={containerStyle}>
+      <a href={src} target="_blank" rel="noopener noreferrer">
+        <div style={imageStyle} />
+        <figcaption style={colorDescriptionStyle}>{name}</figcaption>
+      </a>
+    </figure>
+  );
+}
+
+Image.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+const rowStyle = {
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  // justifyContent: 'space-around',
+  alignItems: 'center',
+};
+
+export function ImageRow(props) {
+  const { images } = props;
+
+  return (
+    <div style={rowStyle}>
+      {images.map(image => (
+        <ImageAsset key={image.src} src={image.src} name={image.name} />
+      ))}
+    </div>
+  );
+}
+
+ImageRow.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+};

web/stories/StyleGuide.stories.mdx

@@ -1,5 +1,13 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import {Color, ColorRow} from './Color';
+import {Image, ImageRow} from './ImageAsset';
+
+import Logo from '../assets/images/logo.svg';
+import FediverseColor from '../assets/images/fediverse-color.png';
+import FediverseBlack from '../assets/images/fediverse-black.png';
+import Moderator from '../assets/images/moderator.svg';
+import IndieAuth from '../assets/images/indieauth.png';
+import IsBot from '../assets/images/bot.svg';
 
 <Meta title="owncast/Style Guide" />
 
@@ -8,10 +16,26 @@ import {Color, ColorRow} from './Color';
   
 `}</style>
 
-# Images
+export const images = [{
+  src: Logo,
+  name: 'Logo',
+}, {
+  src: FediverseColor,
+  name: 'Fediverse Color',
+},{
+  src: FediverseBlack,
+  name: 'Fediverse Black',
+}, {
+  src: Moderator,
+  name: 'Moderator',
+}, {
+  src: IndieAuth,
+  name: 'IndieAuth',
+}, {
+  src: IsBot,
+  name: 'Bot Flag',
+}];
 
-<Story name="Images">
-</Story>
 
 # Colors
 
@@ -43,10 +67,22 @@ import {Color, ColorRow} from './Color';
 
 # Font
 
+[Inter font](https://rsms.me/inter/)
+
 <Story name="Fonts">
   <Canvas style={{color: 'var(--theme-text-color-secondary)'}}>
     {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
   </Canvas>
 </Story>
 
-[Inter font](https://rsms.me/inter/)
+# Images
+
+<Story name="Images and Icons">
+</Story>
+
+<ImageRow images={images} />
+
+
+
+
+