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

3. None

4. What have these sites in common?

5. WYSIWYG

6. “ I don't want to and feel bad setting up

   polluted WYSIWYG editors.
7. None

8. Everything is broken!

9. None
10. None

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.

20. None
21. None

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

23. # Heading And a paragraph...

24. # Heading And a paragraph... 

25. None

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/

49. None

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/

62. None

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

69. None

70. Stefan, you're breaking portability!

71. Yeah, kinda...

72. None

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
75. None

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!

86. None
87. None
88. None
89. None

90. Structured Text

91. Demo

92. None

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