user manual update

4 files changed, 256 insertions, 56 deletions

diff --git a/MANUAL.md b/MANUAL.md
index 0d628d2..de1c636 100644
--- a/MANUAL.md
+++ b/MANUAL.md
@@ -10,15 +10,17 @@ If it's you're first time using it, you should learn how to [create your first p
 
 If you already know the basics, you may want to check the references :
 
-- Discover the differents [interfaces](#interfaces).
-- Get to know the [structure of a page]() to edit meta content.
-- Learn more about the [commands](#commands) you can type in the adress bar.
-- Master the [render engine]() to release the full potential of __W__.
+- Discover how to [navigate](#navigation).
+- Get to know the [structure of a page](#page-structure) to edit meta content.
+- Learn more about the [URL based commands](#url-based-command-interface) you can type in the adress bar.
+- Master the [render engine](#page-editing) to release the full potential of __W__.
 
 
 
 ### Create your first page
 
+This 3 steps tutorial will introduce you to the basic __W__ moves.
+
 #### Add a new page
 
 
@@ -70,84 +72,273 @@ All those methods will create a link pointing to the `<page_id>` you've given.
 Those kind of links are called internal links beccause they stay inside of your domain. To set a link outside of your website, simply remplace `<page_id>` by
 
 
-Interfaces
-----------
+### Navigation
+
+Discover the differents interfaces of __W__.
+
+#### Home
+
+The Home interface is the main view of your project. You can access it only when you're connected. All the pages of your database are listed here.
+
+The [readers](#reader) and [invite editors](#invite-editor) can't access this interface.
+
+##### Home menu
+
+In the home menu [super editors and above](#super-editor) can :
+
+- File : import pages as JSON file. (usefull for transfering pages from a W instance to another)
+- Edit : 
+
+The Home view is divided in two main parts :
+
+##### Options
+
+ where you can apply filters and sorting
+
+##### Pages
+
+the list of pages after filtering
+
+#### Edition
+
+The edition interface is accessible when typing `/edit` after an existing [page_id](#page-id) in the adress bar. Or from the [home](#home), by clicking on the pencil button.
+
+[Invite editors](#invite-editor) and [editors](#editor) users can only access edition of pages where they are listed as [author](#authors).
+
+The Edition view is composed of a main content edition area, surounded by two lateral panels that you can deploy or hide.
+
+##### left panel
+
+This is the 
+
+- Meta infos : edit [title](#title), [description](#description) and more infos about your page.
+- Templating
+- Advanced
+- Help : a quick synthax reference for markdown and W synthax
+
+##### contents area
+
+Each tab allow you to edit a different type of content :
+
+[main](#main), [nav](#nav), [aside](#aside)
+
+Note that the MAIN tab is the default opened tab, this is meant to be the most spontaneous place to store information when you are using __W__ in *note taking style*.
+
+##### right panel
+
+#### Media manager
+
+When you need to use images, sound or videos in your pages, or any other type of files, you can use the media manager to host them before including them in your pages.
+
+[Invite editors](#invite-editor) don't have access to this place.
+
+##### Media menu
+
+The media menu allow you to do more powerfull function like moving medias or delete folders.
+
+#### Admin
+
+#### User manager
+
+
+
+
+
+
+
+
+
+Page Editing
+------------
+
+### Synthax
+
+#### Markdown
+
+- [Daring Fireballs](https://daringfireball.net/projects/markdown/syntax) Official reference of Markdown Synthax
+- [Michel Fortin's Markdown extra](https://michelf.ca/projects/php-markdown/extra/) The library used in W.
+
+
+#### W specific synthax
+
+##### Auto url
+
+When you use an adress starting with `http://` or `https://`, W will automaitcaly create a link pointing to a new tab.
+
+    <a href="<url>" target="_blank" class="external"><url></a>
 
-### Home
+Note that the `.external` class have been added.
+
+##### Quick links
+
+    [<page_id>]
+
+Will generate :
+
+    <a href="<page_id>" title="PAGE_DESCRIPTION" class="internal">PAGE_TITLE</a>
+
+Where [PAGE_DESCRIPTION](#description) and [PAGE_TITLE](page-title) are the [page_id](#page-id)'s meta infos.
+
+Note that the `.internal` class have been added to the `a` html link, allowing you to differenciate internal link styling from `.external`.
+
+### Inclusions
+
+#### Basic inclusions
+
+##### Title inclusion
+
+    %TITLE%
+
+This will include the page [title](#page-title).
+
+##### Description inclusion
+
+    %DESCRIPTION%
+
+This will include the page [description](#description).
+
+##### Date inclusion
+
+    %DATE%
+
+
+#### Page list
+
+The page list
+
+#### Media list
+
+### Templating
+
+### Content insertion
+
+#### Advanced BODY synthax
 
-### Editor
 
-### Media
 
-### Admin
 
-### User
 
 
 References
 ---------
 
 
-### Structure of a page
+### Page structure
 
 
 Technicaly, each page is stored as a JSON object in yout fatabase folder.
 
 A page consist of meta informations and contents.
 
-#### Page ID
+#### Meta infos
+
+##### Page ID
 
 The unique identifier of a page.
 
-#### Page title
+##### Page title
 
 The page title is also very important. It's like the official name of a page.
 
-#### Description
+##### Description
+
+##### Tag
 
-#### Tag
+Tags are very powerfull to help you organize your pages. As in __W__, there is no hierarchy between pages, this is the only tool to create groups of pages.
 
-#### Date & time
+Tags can be set in the [left panel of the editor interface](#left-panel) using comma to separate tags.
 
-#### Thumbnail
+##### Date & time
 
+##### Thumbnail
 
+The thumbnail have two use cases :
 
-### Formating
+- When you share a link to a page on a social network
+- When you generate a [list of page](#page-list) and activated the `thumbail` option. 
 
+##### Authors
 
+List of [users](#user-levels) that have edited the page, or that can do it. You have to be at least [super-editor](#super-editor) to add or remove authors.
 
-Controls
---------
+#### Content
 
+##### Main, Nav, Aside, Header, Footer
 
+##### CSS
 
+##### BODY
 
-### Pages commands
+##### Javascript
+
+
+
+
+
+### User levels
+
+#### Visitor
+
+> level : 0
+
+#### Reader
+
+> level : 1
+
+#### Invite Editor
+
+> level : 2
+
+Invite Editors are the lowest editor status possible. They can only access the [Edition interface](#edition). They can't create page but only edit page when listed as [author](#authors).
+
+#### Editor
+
+> level : 3
+
+- Can create pages and edit them.
+- Can only edit pages when listed as [author](#authors)
+
+#### Super Editor
+
+> level : 4
+
+- Can edit any pages they like (they will be added as [author](#authors) of the page).
+- Can use the home menu and media menu to access powerfull features.
+
+#### Administrator
+
+> level : 10
+
+- Can access the [admin interface](#admin).
+- Can create new users.
+
+### URL based command interface
+
+#### Pages commands
 
 Type thoses commands after a __page_id__ 
 
 `<page_id>/COMMAND`
 
-#### /add
+##### /add
 
 Command used to add a page in the database.
 
-#### /edit
+##### /edit
 
 Command used to edit a page. If you're not logged in, it will ask for your credentials.
 
-#### /delete
+##### /delete
 
 Command used to delete a page from the database. This will ask you for a confirmation.
 
-#### /render
+##### /render
 
 Force the rendering of a page.
 
-#### /log
+##### /log
 
 Show a `var_dump` of the page object. This could be usefull for debbuging.
 
 
-### Home commands
+
diff --git a/README.md b/README.md
index dd932c3..9474ccf 100644
--- a/README.md
+++ b/README.md
@@ -28,8 +28,8 @@ W try to help you create pages more spontaneously.
 
 - low latency page loading
 - Use markdown synthax, HTML, CSS and Javascript
-- url based command interface
-- Media manager
+- [url based command interface](MANUAL.md#url-based-command-interface)
+- [Media manager](MANUAL.md#media-manager)
 - Font manager
 - Multi-users
 - No hierarchy between pages
diff --git a/app/view/templates/info.php b/app/view/templates/info.php
index bcfc2c8..9a5357e 100644
--- a/app/view/templates/info.php
+++ b/app/view/templates/info.php
@@ -10,26 +10,27 @@
 
 <main class="info">
 
-<nav>
+<nav class="info">
     <div class="block">
+        <div class="scroll">
 
-    <h2>Version</h2>
-
-    <?= $version ?>
+            <h2>Version</h2>
 
+            <?= $version ?>
 
 
-    <h2>Links</h2>
 
-        <ul>
-        <li><a href="https://github.com/vincent-peugnet/wcms" target="_blank">🐱‍👤 Github</a></li>
-        <li><a href="https://w-cms.top" target="_blank">🌵 Website</a></li>
-        </ul>
+            <h2>Links</h2>
 
-        <h2>Manual Summary</h2>
+                <ul>
+                <li><a href="https://github.com/vincent-peugnet/wcms" target="_blank">🐱‍👤 Github</a></li>
+                <li><a href="https://w-cms.top" target="_blank">🌵 Website</a></li>
+                </ul>
 
-        <?= $summary ?>
+                <h2>Manual Summary</h2>
 
+                <?= $summary ?>
+            </div>
         </div>
     </div>
 </nav>
diff --git a/assets/css/home.css b/assets/css/home.css
index 843a2df..4477de9 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -92,7 +92,7 @@ aside .submenu code {
     display: block;
     white-space: nowrap;
     color: #7b97b9;
-    background-color: #252525;
+    background-color: #233143;
     padding: 1%;
     font-size: 12px;
 }
@@ -247,7 +247,8 @@ a:hover img.icon {
 }
 
 section.info {
-    max-width: 700px;
+    max-width: 600px;
+    list-style: inside disc;
 }
 
 
@@ -259,14 +260,13 @@ main.info a {
     text-decoration: underline white;
 }
 
-main.info ul {
-    list-style: none;
+nav.info ul {
     padding-inline-start: 10px;
 }
 
 main.info code {
     color: white;
-    background-color: #191919;
+    background-color: #233143;
     width: fit-content;
     font-family: monospace;
     font-size: initial;
@@ -292,32 +292,44 @@ main.info article#manual h1 {
 main.info article#manual h2 {
     text-align: center;
     font-size: 40px;
+    margin-top: 60px;
 }
 
 main.info article#manual h3 {
     border-bottom: solid 1px grey;
-    margin-top: 100px;
+    margin-top: 30px;
     padding-top: 15px;
     font-size: 35px;
 }
 
 main.info article h4 {
     background-color: darkgrey;
-    padding: 10px;
     font-size: x-large;
-    margin-top: 70px;
+    margin-top: 35px;
+    margin-bottom: 25px;
 }
 
-main.info article h5 {
+main.info article#manual h5 {
     text-transform: uppercase;
-    margin-top: 45px;
-    font-size: large;
+    margin-top: 20px;
+    margin-bottom: 0;
+    font-size: medium;
+}
+
+
+section.info ul {
+    list-style: inside disc;
+    padding-inline-start: 10px;
 }
 
 main.info code {
     padding: 0 4px;
 }
 
+
+
+main.info pre {width: fit-content;padding: 1%;background-color: hsla(213, 31%, 20%, 1);white-space: pre-wrap;margin: 1%;}
+
 main.info blockquote {
     padding: 6px 12px;
     text-align: left;
@@ -501,7 +513,6 @@ footer {
     main.info nav {
         position: relative;
         left: 0;
-        margin-top: 1%;
     }
 
     main.home nav {
@@ -517,6 +528,3 @@ footer {
     }
 
 }
-
-
-