From 50a732c65158a7f87e064db259c79fda41194634 Mon Sep 17 00:00:00 2001
From: Arthur Sonzogni <sonzogniarthur@gmail.com>
Date: Sun, 21 Oct 2018 14:32:25 +0200
Subject: [PATCH] Update table of content of tutorial.md

---
 tutorial.md | 77 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 27 deletions(-)

diff --git a/tutorial.md b/tutorial.md
index 2e105c9..f392094 100644
--- a/tutorial.md
+++ b/tutorial.md
@@ -1,3 +1,18 @@
+Table of content.
+- [DOM](#dom)
+  * [Style](#style)
+  * [Layout](#layout)
+  * [Widget.](#widget)
+    + [text](#text)
+    + [frame](#frame)
+    + [separator](#separator)
+    + [gauge](#gauge)
+- [Components.](#components)
+  * [Input](#input)
+  * [Menu](#menu)
+  * [Toggle.](#toggle)
+
+## DOM
 All the dom element are declared in one header:
 ~~~cpp
 #include <ftxui/dom/elements.hpp>
@@ -33,7 +48,21 @@ Element center(Element);
 Element flex(Element);
 ~~~
 
-# Layout elements.
+### Style
+A terminal console can usually display colored text and colored background.
+The text can also have different effects: bold, dim, underlined, inverted.
+
+~~~cpp
+Element bold(Element);
+Element dim(Element);
+Element inverted(Element);
+Element underlined(Element);
+Element blink(Element);
+Element color(Color, Element);
+Element bgcolor(Color, Element);
+~~~
+
+### Layout
 
 vbox (Vertical-box) and hbox (Horizontal-box) are containers. They are used to
 compose all the elements together. They will display their children one by one in one direction.
@@ -42,7 +71,7 @@ space dispatched to all the flexible elements.
 
 flex() is used to make an element flexible.
 
-## Examples
+#### Examples
 ~~~cpp
   hbox(
     frame(text(L"left")),
@@ -69,11 +98,11 @@ flex() is used to make an element flexible.
 └────┘└───────────────────────────────────┘└───────────────────────────────────┘
 ~~~
 
-# Widget elements.
+### Widget.
 
-## text
+#### text
 
-The more simple widget. It display a text.
+The most simple widget. It display a text.
 ~~~cpp
   text(L"I am a piece of text");
 ~~~
@@ -81,7 +110,7 @@ The more simple widget. It display a text.
 I am a piece of text.
 ~~~
 
-## frame
+#### frame
 Add a border arround an element
 ~~~c+
 frame(text(L"The element"))
@@ -93,22 +122,22 @@ frame(text(L"The element"))
 └───────────┘
 ~~~
 
-## separator
+#### separator
 
 Display a vertical or horizontal line to visually split the content of a
 container in two.
 
 ~~~cpp
 frame(hbox(
-	vbox(
-		text(L"left top"),
-		text(L"left bottom")
-	),
-	separator(),
-	vbox(
-		text(L"right top"),
-		text(L"right bottom")
-	)
+  vbox(
+    text(L"left top"),
+    text(L"left bottom")
+  ),
+  separator(),
+  vbox(
+    text(L"right top"),
+    text(L"right bottom")
+  )
 ));
 ~~~
 
@@ -119,8 +148,7 @@ frame(hbox(
 └───────────┴────────────┘
 ~~~
 
-## gauge
-
+#### gauge
 
 A gauge. It can be used to represent a progress bar.
 ~~~c+
@@ -133,13 +161,8 @@ frame(gauge(0.5))
 └────────────────────────────────────────────────────────────────────────────┘
 ~~~
 
-# Decorator (style)
-A terminal console can usually display colored text and colored background.
-The text can also have different effects: bold, dim, underlined, inverted.
+## Components.
 
-Element bold(Element);
-Element dim(Element);
-Element inverted(Element);
-Element underlined(Element);
-Element color(Element);
-Element bgcolor(Element);
+### Input
+### Menu
+### Toggle.