doc: add markdown documentation

Author: peterpeterparker

README.md

@@ -1,6 +1,6 @@
 # DeckDeckGo
 
-Create a lightweight presentation using HTML and Web Components.
+Create a lightweight presentation using Web Components.
 
 [DeckDeckGo] is build with [Stencil](https://stenciljs.com) and could be use in any modern framework or even without any.
 
@@ -15,6 +15,7 @@ Create a lightweight presentation using HTML and Web Components.
   - [Installing DeckDeckGo in any projects](#installing-deckdeckgo-in-any-projects)
   - [Editing](#editing)
     - [Detailed documentation](doc/slides/slides.md)
+    - [Markdown](doc/markdown/markdown.md)
   - [Navigation](#navigation)
   - [Extra features](#extra-features)
   - [Lazy loading](#lazy-loading)
@@ -25,7 +26,7 @@ Create a lightweight presentation using HTML and Web Components.
 
 ## Features
 
-* ✏️ Create **without effort** your presentation using HTML and CSS
+* ✏️ Create **without effort** your presentation using Web Components
 
 * 📰 Use predefined **templates**
 
@@ -59,7 +60,7 @@ To get started and **to create your presentation**, run the following command an
 npm init deckdeckgo
 ```
 
-Once your presentation created, go to your new project's folder and start editing `src/index.html` to prepare your slides and content for your talk 😉
+Once your presentation created, go to your new project's folder and start editing your slides and content for your talk 😉
 
 ## Installing DeckDeckGo in any projects
 
@@ -88,6 +89,10 @@ The deck should be declared using the tag `<deckgo-deck/>` and each slide should
 
 The 👉 [extended documentation](doc/slides/slides.md) 👈 displays all templates and options available for each slides.
 
+### Markdown
+
+Per default, [DeckDeckGo]'s presentations are edited using HTML and are Web Components, that's why the documentation and examples are provided in HTML. But if you are using the [starter kit](https://github.com/fluster/deckdeckgo-starter) and are editing your talk with Markdown, you could have a look to the [Markdown documentation](doc/markdown/markdown.md) to get some examples.
+
 [DeckDeckGo] also offers a couple of components which could be used in almost every templates, these are documented in a separate [chapter](doc/components/components.md) of the documentation. 
 
 ## Navigation

doc/markdown/markdown.md

@@ -0,0 +1,73 @@
+# DeckDeckGo - Markdown
+
+This documentation has for goal to introduce you briefly on how is it working out if you are using the [starter kit](https://github.com/fluster/deckdeckgo-starter) and are editing your talk with Markdown.
+
+## Table of contents
+
+- [Introduction](#introduction)
+- [Editing](#editing)
+    - [Example](#example)
+    - [Attributes](#attributes)
+
+## Introduction
+
+It's pretty simple, the goal of the editing with Markdown is to offer the same abilities as if you would have while editing your talk with HTML.
+
+When you edit your talk with Markdown, furthermore than the set of common supported tags, the [DeckDeckGo Webpack Markdown Plugin](https://github.com/fluster/deckdeckgo-webpack-markdown-plugin) extend these by adding the support of the different [DeckDeckGo] slides as documented in the 👉 [extended documentation](doc/slides/slides.md) 👈.
+
+Your Markdown code will, through the help of the plugin, be compiled and injected in the `index.html` distribution file at build time. Doing so, your [DeckDeckGo] presentation will remain SEO friendly even without server side rendering. 
+
+## Editing
+
+As describe above, furthermore than the Markdown tags, you could use extended tags in order to specify which types of slides you would like to use. To do so, use the separator `---` followed by a shortened version of the template's name, like for example `--- title` for `</deckgo-slide-title>`.
+
+Furthermore the plugin takes care of injecting the content you would provide in the right slots.
+
+### Example
+
+The following `</deckgo-slide-title>` slide:
+
+```
+--- title
+# My presentation title
+
+Hello World 🚀
+```
+
+would be parsed into:
+
+```
+<deckgo-slide-title>
+  <h1 slot="title">My presentation title</h1>
+  <p slot="content">
+    Hello World 🚀
+  </p>
+</deckgo-slide-title>
+```
+
+### Attributes
+
+As some templates needs attributes, you would also be able to specify them in Markdown.
+
+For example the `</deckgo-slide-gif>` slide:
+
+```
+--- gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My gif" fullscreen="true"
+# My title
+
+# Hey
+
+### It's cool gif
+```
+
+would be parsed into:
+
+```
+<deckgo-slide-gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My gif" fullscreen="true">
+  <h1 slot="title">My title</h1>
+  <h1 slot="header">Hey</h1>
+  <h2 slot="footer">It's a cool gif</h2>
+</deckgo-slide-gif>
+```
+
+[DeckDeckGo]: https://deckdeckgo.com