Markdown, my friend – we have to talk

Transcript

1. @stefanjudis *Markdown, my friend* **We have to talk!**
2. STEFAN JUDIS @stefanjudis www.stefanjudis.com stefan.judis@contentful.com
4. What have these sites in common?
5. WYSIWYG
6. “ I don't want to and feel bad setting up polluted WYSIWYG editors.
8. Everything is broken!
11. It's a mix of content and presentation
12. Html
13. Html
14. Too flexible Too easy to mess up Mixes content and looks HTML is the goal
15. You want to limit the user!
16. Markdown
17. # Heading ## Sub-heading Text attributes _italic_, **bold**, `monospace`. Bullet list: * apples * oranges * pears A [link](http://example.com).  Heading Sub-heading Text attributes italic, bold, monospace. Bullet list: - apple - oranges - pears A link.
18. Inline <abbr title="Hypertext Markup Language">HTML</abbr> is supported. Inline HTML is supported.
19. “ The key design goal [of markdown] is readability.
22. Markdown is not "feature-complete" ("semantical correct" is not a thing)
23. # Heading And a paragraph...
24. # Heading And a paragraph... 
26. Responsive images
27. // my-markdown-renderer.js import marked from 'marked' export default (text) => marked(text);
28. // my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() export default (text) => marked(text, { renderer });
29. // my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
30. // my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
31. # Heading And a paragraph... 
32. # Heading And a paragraph...  And a paragraph...  And a paragraph...
33. # Heading And a paragraph... ??? And a paragraph...  And a paragraph...
34. "Video hack"
35. // my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
36. // my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` <video controls preload="metadata"> <source src="${href}" type="video/mp4"> </video> ` } return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
37. // my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` <video controls preload="metadata"> <source src="${href}" type="video/mp4"> </video> ` } return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
38. // my-markdown-renderer.js import marked from 'marked' const renderer = new marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` <video controls preload="metadata"> <source src="${href}" type="video/mp4"> </video> ` } return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer }); Not pretty, but "works"
39. # Heading And a paragraph...  And a paragraph...  And a paragraph...
40. # Heading And a paragraph...  And a paragraph...  And a paragraph...
41. # Heading And a paragraph...  And a paragraph... ??? And a paragraph...
42. # Heading And a paragraph... ???  And a paragraph... ??? And a paragraph...
43. # Heading And a paragraph... ???  And a paragraph... ??? ??? !!! ??? Duck!
44. # Heading And a paragraph... ???  And a paragraph... ??? ??? !!! ??? Duck! Markdown is not made for "complex" use cases
45. Limited functionality Focuses on semantics Easy to grasp
46. Limited functionality Not powerful enough Editors don't like it HTML is "allowed"
47. How can you solve this with Contentful?
48. www.contentful.com/r/knowledgebase/topics-and-assemblies/
50. Duck!
51. { "sys": { "contentType": { "sys": { "id": "page" } } }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... }
52. { "sys": { "contentType": { "sys": { "id": "page" } } }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... } <Page> <Chart /> ... </Page>
53. { "sys": { "contentType": { "sys": { "id": "page" } } }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... } <Page> <Chart /> ... </Page> Structured data is perfect for a component-driven approach!
54. www.contentful.com/blog/2017/10/11/love-letter-to-component-ready-cms/
55. www.youtube.com/watch?v=i17FKTtIifM&t=408s
56. MDX
57. “ MDX is Markdown + JSX, bringing the world of components to Markdown.
58. import { Chart } from ' ../components/chart' # Here's a chart The chart is rendered inside our MDX document. <Chart />
59. www.docz.site
60. revealjs.com
61. jxnblk.com/mdx-deck/
63. It's Reveal.js on steroids.
64. Are these slide made with mdx-deck?
65. Could this work in Contentful?
66. Demo
67. codesandbox.io
68. www.npmjs.com/package/smooshpack
70. Stefan, you're breaking portability!
71. Yeah, kinda...
73. Devs will love it Perfect for docs Component-based
74. Easy to mess up Not made for publishing Needs file access Breaks portability easily
76. Love it! But it's not suited for our content editing needs.
77. A [link](http://example.com).
78. A [link](http://example.com).
79. Duck!
80. Duck! Duck!
81. Duck! Duck! Duck!
82. Duck! Duck! Duck! Duck!
83. Alice! Alice! Alice! Alice!
84. Alice! Alice! Alice! Alice! That's not possible with hardcoded values.
85. Back to square one!
90. Structured Text
91. Demo
93. www.npmjs.com/package/@contentful/structured-text-html-serializer
94. www.npmjs.com/package/@contentful/structured-text-html-serializer Serializer will be available for common languages
95. It supports underline Visual interface Fewer content types
96. Incoming links support Connected editing flow Platform-portable
97. www.contentful.com/r/knowledgebase/topics-and-assemblies/
98. www.contentful.com/r/knowledgebase/topics-and-assemblies/ Topics & Assemblies will still be a thing
99. Proper content modelling stays important!
100. So, what about the hover-duck? Duck!
101. Inline references will be possible Duck!
102. You can sign up for the alpha today. Talk to me!
103. THANKS FOR LISTENING 
 @stefanjudis