Style guide pages

components/mdx-components/iframe.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const IFrame = styled.iframe`
+  display: block;
+  width: 100%;
+  border: none;
+  margin: 30px auto;
+`;

components/mdx-components/img.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Img = styled.img`
+  max-width: 100%;
+`;

components/mdx-components/index.js

@@ -2,12 +2,18 @@ import P from './p';
 import { Headings } from './heading';
 import { Pre } from './pre';
 import { BlockQuote } from './blockquote';
+import { Table } from './table';
+import { IFrame } from './iframe';
+import { Img } from './img';
 
 const MdxComponents = {
   p: P,
   ...Headings,
   pre: Pre,
   blockquote: BlockQuote,
+  table: Table,
+  iframe: IFrame,
+  img: Img,
 };
 
 export default MdxComponents;

components/mdx-components/pre.js

@@ -5,4 +5,8 @@ export const Pre = styled.pre`
   padding: 20px 25px !important;
   border-radius: 10px;
   line-height: 1.5 !important;
+  
+  code {
+    background: transparent;
+  }
 `;

components/mdx-components/table.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+  border-collapse: separate;
+  width: 100%;
+  border-spacing: 0;
+  margin: 20px 0;
+  
+  th {
+    color: #666;
+    font-size: 12px;
+    font-weight: 400;
+    background: #FAFAFA;
+    text-transform: uppercase;
+    height: 40px;
+    vertical-align: middle;
+    padding: 5px 10px;
+  }
+  
+  td {
+    font-size: 14px;
+    padding: 10px;
+    border-bottom: 1px solid #EAEAEA;
+  }
+`;

data/guides/design-patterns-for-humans.md

@@ -27,6 +27,27 @@ $door2 = DoorFactory::makeDoor(50, 100);
 
 Serverful apps need to run consistently, watching for requests. Then, when requested, the app handles the request itself. In serverful monolith style apps, routing is commonly handled by a single file. Let's look at an Express.js example to illustrate this:
 
+<iframe src="https://player.vimeo.com/video/302964043?byline=0&portrait=0" width="640" height="267" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+
+Serverful apps need to run consistently, watching for requests. Then, when requested, the app handles the request itself. In serverful monolith style apps, routing is commonly handled by a single file. Let's look at an Express.js example to illustrate this:
+
+![](https://endler.dev/2019/tinysearch/bloomfilter.svg)
+
+Our team runs a number of typical services for monitoring and performance analysis: API endpoints for metrics written in Go, Prometheus exporters, log parsers like Logstash or Gollum, and databases like InfluxDB or Elasticsearch. Each of these services run in their own container. We needed a simple system to keep those jobs running.
+
+We started with a list of requirements for container orchestration:
+
+* Run a fleet of services across many machines.
+* Provide an overview of running services.
+* Allow for communication between services.
+* Restart them automatically when they die.
+* Be manageable by a small team.
+
+## Credits
+
+Thanks to my awesome colleagues Esteban Barrios, Jorge-Luis Betancourt, Simon Brüggen, Arne Claus, Inga Feick, Wolfgang Gassler, Barnabas Kutassy, Perry Manuk, Patrick Pokatilo, and Jakub Sacha for reviewing drafts of this article.
+
+
 
 # H1
 ## H2

layouts/default/global.scss

@@ -43,3 +43,13 @@
     padding: 0 10px
   }
 }
+
+code:not([class]) {
+  background: #fafafa;
+  border-radius: 6px;
+  display: inline-block;
+  font-size: 16px;
+  padding: 0 5px;
+  word-wrap: normal;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125)
+}