Markdown, my friend – we have to talk

22725c2d3eb331146549bf0d5d3c050c?s=47 stefan judis
September 11, 2018

Markdown, my friend – we have to talk

22725c2d3eb331146549bf0d5d3c050c?s=128

stefan judis

September 11, 2018
Tweet

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). ![Image](duck.png) 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... ![Image](duck.png)

  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... ![Image](duck.png)

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

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

    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... ![Image](duck.png) And a paragraph... ![Image](duck.png)

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

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

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

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

    ??? ??? !!! ??? Duck!
  44. # Heading And a paragraph... ??? ![Movie](duck.mp4) 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