Markdown, my friend – we have to talk

Slide 1

Slide 1 text

@stefanjudis *Markdown, my friend* **We have to talk!**

Slide 2

Slide 2 text

STEFAN JUDIS @stefanjudis www.stefanjudis.com [email protected]

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

What have these sites in common?

Slide 5

Slide 5 text

WYSIWYG

Slide 6

Slide 6 text

“ I don't want to and feel bad setting up polluted WYSIWYG editors.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Everything is broken!

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

It's a mix of content and presentation

Slide 12

Slide 12 text

Html

Slide 13

Slide 13 text

Html

Slide 14

Slide 14 text

Too flexible Too easy to mess up Mixes content and looks HTML is the goal

Slide 15

Slide 15 text

You want to limit the user!

Slide 16

Slide 16 text

Markdown

Slide 17

Slide 17 text

# Heading ## Sub-heading Text attributes _italic_, **bold**, `monospace`. Bullet list: * apples * oranges * pears A [link](http://example.com). ![Image](duck.png) Heading Sub-heading Text attributes italic, bold, monospace. Bullet list: - apple - oranges - pears A link.

Slide 18

Slide 18 text

Inline HTML is supported. Inline HTML is supported.

Slide 19

Slide 19 text

“ The key design goal [of markdown] is readability.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Markdown is not "feature-complete" ("semantical correct" is not a thing)

Slide 23

Slide 23 text

# Heading And a paragraph...

Slide 24

Slide 24 text

# Heading And a paragraph... ![Image](duck.png)

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Responsive images

Slide 27

Slide 27 text

// my-markdown-renderer.js import marked from 'marked' export default (text) => marked(text);

Slide 28

Slide 28 text

// my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() export default (text) => marked(text, { renderer });

Slide 29

Slide 29 text

// my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { return ` ${text}

` } export default (text) => marked(text, { renderer });

Slide 30

Slide 30 text

// my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { return ` ${text}

` } export default (text) => marked(text, { renderer });

Slide 31

Slide 31 text

# Heading And a paragraph... ![Image](duck.png)

Slide 32

Slide 32 text

# Heading And a paragraph... ![Image](duck.png) And a paragraph... ![Image](duck.png) And a paragraph...

Slide 33

Slide 33 text

# Heading And a paragraph... ??? And a paragraph... ![Image](duck.png) And a paragraph...

Slide 34

Slide 34 text

"Video hack"

Slide 35

Slide 35 text

// my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { return ` ${text}

` } export default (text) => marked(text, { renderer });

Slide 36

Slide 36 text

// my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` ` } return ` ${text}

` } export default (text) => marked(text, { renderer });

Slide 37

Slide 37 text

// my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` ` } return ` ${text}

` } export default (text) => marked(text, { renderer });

Slide 38

Slide 38 text

// my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` ` } return ` ${text}

` } export default (text) => marked(text, { renderer }); Not pretty, but "works"

Slide 39

Slide 39 text

# Heading And a paragraph... ![Image](duck.png) And a paragraph... ![Image](duck.png) And a paragraph...

Slide 40

Slide 40 text

# Heading And a paragraph... ![Movie](duck.mp4) And a paragraph... ![Image](duck.png) And a paragraph...

Slide 41

Slide 41 text

# Heading And a paragraph... ![Movie](duck.mp4) And a paragraph... ??? And a paragraph...

Slide 42

Slide 42 text

# Heading And a paragraph... ??? ![Movie](duck.mp4) And a paragraph... ??? And a paragraph...

Slide 43

Slide 43 text

# Heading And a paragraph... ??? ![Movie](duck.mp4) And a paragraph... ??? ??? !!! ??? Duck!

Slide 44

Slide 44 text

# Heading And a paragraph... ??? ![Movie](duck.mp4) And a paragraph... ??? ??? !!! ??? Duck! Markdown is not made for "complex" use cases

Slide 45

Slide 45 text

Limited functionality Focuses on semantics Easy to grasp

Slide 46

Slide 46 text

Limited functionality Not powerful enough Editors don't like it HTML is "allowed"

Slide 47

Slide 47 text

How can you solve this with Contentful?

Slide 48

Slide 48 text

www.contentful.com/r/knowledgebase/topics-and-assemblies/

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Duck!

Slide 51

Slide 51 text

{ "sys": { "contentType": { "sys": { "id": "page" } } }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... }

Slide 52

Slide 52 text

{ "sys": { "contentType": { "sys": { "id": "page" } } }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... } ...

Slide 53

Slide 53 text

{ "sys": { "contentType": { "sys": { "id": "page" } } }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... } ... Structured data is perfect for a component-driven approach!

Slide 54

Slide 54 text

www.contentful.com/blog/2017/10/11/love-letter-to-component-ready-cms/

Slide 55

Slide 55 text

www.youtube.com/watch?v=i17FKTtIifM&t=408s

Slide 56

Slide 56 text

MDX

Slide 57

Slide 57 text

“ MDX is Markdown + JSX, bringing the world of components to Markdown.

Slide 58

Slide 58 text

import { Chart } from ' ../components/chart' # Here's a chart The chart is rendered inside our MDX document.

Slide 59

Slide 59 text

www.docz.site

Slide 60

Slide 60 text

revealjs.com

Slide 61

Slide 61 text

jxnblk.com/mdx-deck/

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

It's Reveal.js on steroids.

Slide 64

Slide 64 text

Are these slide made with mdx-deck?

Slide 65

Slide 65 text

Could this work in Contentful?

Slide 66

Slide 66 text

Demo

Slide 67

Slide 67 text

codesandbox.io

Slide 68

Slide 68 text

www.npmjs.com/package/smooshpack

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

Stefan, you're breaking portability!

Slide 71

Slide 71 text

Yeah, kinda...

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Devs will love it Perfect for docs Component-based

Slide 74

Slide 74 text

Easy to mess up Not made for publishing Needs file access Breaks portability easily

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Love it! But it's not suited for our content editing needs.

Slide 77

Slide 77 text

A [link](http://example.com).

Slide 78

Slide 78 text

A [link](http://example.com).

Slide 79

Slide 79 text

Duck!

Slide 80

Slide 80 text

Duck! Duck!

Slide 81

Slide 81 text

Duck! Duck! Duck!

Slide 82

Slide 82 text

Duck! Duck! Duck! Duck!

Slide 83

Slide 83 text

Alice! Alice! Alice! Alice!

Slide 84

Slide 84 text

Alice! Alice! Alice! Alice! That's not possible with hardcoded values.

Slide 85

Slide 85 text

Back to square one!

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

Structured Text

Slide 91

Slide 91 text

Demo

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

www.npmjs.com/package/@contentful/structured-text-html-serializer

Slide 94

Slide 94 text

www.npmjs.com/package/@contentful/structured-text-html-serializer Serializer will be available for common languages

Slide 95

Slide 95 text

It supports underline Visual interface Fewer content types

Slide 96

Slide 96 text

Incoming links support Connected editing flow Platform-portable

Slide 97

Slide 97 text

www.contentful.com/r/knowledgebase/topics-and-assemblies/

Slide 98

Slide 98 text

www.contentful.com/r/knowledgebase/topics-and-assemblies/ Topics & Assemblies will still be a thing