From 132acfec00030cf8cd368bee75f961896c74a0e1 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sat, 2 Nov 2019 14:40:34 +0400 Subject: [PATCH] Style guide pages --- components/mdx-components/iframe.js | 8 ++++++++ components/mdx-components/img.js | 5 +++++ components/mdx-components/index.js | 6 ++++++ components/mdx-components/pre.js | 4 ++++ components/mdx-components/table.js | 25 +++++++++++++++++++++++ data/guides/design-patterns-for-humans.md | 23 ++++++++++++++++++++- layouts/default/global.scss | 10 +++++++++ 7 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 components/mdx-components/iframe.js create mode 100644 components/mdx-components/img.js create mode 100644 components/mdx-components/table.js diff --git a/components/mdx-components/iframe.js b/components/mdx-components/iframe.js new file mode 100644 index 000000000..ae19fda39 --- /dev/null +++ b/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; +`; \ No newline at end of file diff --git a/components/mdx-components/img.js b/components/mdx-components/img.js new file mode 100644 index 000000000..858799911 --- /dev/null +++ b/components/mdx-components/img.js @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const Img = styled.img` + max-width: 100%; +`; \ No newline at end of file diff --git a/components/mdx-components/index.js b/components/mdx-components/index.js index f9d6e9294..69e4a646c 100644 --- a/components/mdx-components/index.js +++ b/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; \ No newline at end of file diff --git a/components/mdx-components/pre.js b/components/mdx-components/pre.js index 359d540db..97e3e33b6 100644 --- a/components/mdx-components/pre.js +++ b/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; + } `; \ No newline at end of file diff --git a/components/mdx-components/table.js b/components/mdx-components/table.js new file mode 100644 index 000000000..83660f326 --- /dev/null +++ b/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; + } +`; \ No newline at end of file diff --git a/data/guides/design-patterns-for-humans.md b/data/guides/design-patterns-for-humans.md index 6f14789f2..ed5d8ecab 100644 --- a/data/guides/design-patterns-for-humans.md +++ b/data/guides/design-patterns-for-humans.md @@ -26,7 +26,28 @@ $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: - + + + +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 diff --git a/layouts/default/global.scss b/layouts/default/global.scss index 70442c4ab..9420d9851 100644 --- a/layouts/default/global.scss +++ b/layouts/default/global.scss @@ -42,4 +42,14 @@ background: #fff; 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) } \ No newline at end of file