12 files changed, 71 insertions, 10 deletions

diff --git a/docs/en/index.rst b/docs/en/index.rst
index ab58ca6b..54d79e0c 100644
--- a/docs/en/index.rst
+++ b/docs/en/index.rst
@@ -29,6 +29,7 @@ The main documentation for this application is organized into a couple sections:
    user/configuration
    user/first_article
    user/errors_during_fetching
+   user/annotations
    user/import
    user/download_articles
    user/filters
diff --git a/docs/en/user/annotations.rst b/docs/en/user/annotations.rst
new file mode 100644
index 00000000..d30b2c52
--- /dev/null
+++ b/docs/en/user/annotations.rst
@@ -0,0 +1,24 @@
+Annotations
+===========
+
+In each article you read, you can write annotations. It's easier to understand with some pictures.
+
+Select the part of the article that you want to comment and click on the pencil:
+
+.. image:: ../../img/user/annotations_1.png
+   :alt: Select your text
+   :align: center
+
+Then, write your comment:
+
+.. image:: ../../img/user/annotations_2.png
+   :alt: Write your comment
+   :align: center
+
+The text is now highlighted and you can read your comment if you move the mouse cursor over it.
+
+.. image:: ../../img/user/annotations_3.png
+   :alt: Read your comment
+   :align: center
+
+You can create as many comments as you wish.
diff --git a/docs/fr/index.rst b/docs/fr/index.rst
index 5adc5ab5..48310680 100644
--- a/docs/fr/index.rst
+++ b/docs/fr/index.rst
@@ -30,6 +30,7 @@ La documentation principale de cette application est découpée en plusieurs sec
    user/configuration
    user/first_article
    user/errors_during_fetching
+   user/annotations
    user/import
    user/download_articles
    user/filters
diff --git a/docs/fr/user/annotations.rst b/docs/fr/user/annotations.rst
new file mode 100644
index 00000000..8ba87e26
--- /dev/null
+++ b/docs/fr/user/annotations.rst
@@ -0,0 +1,25 @@
+Commentaires
+============
+
+Sur chaque article que vous lisez, vous pouvez écrire des commentaires. Puisqu'une image vaut mieux qu'un long discours,
+voici ce que ça donne.
+
+Sélectionnez la zone du texte que vous souhaitez commenter et cliquez sur le crayon :
+
+.. image:: ../../img/user/annotations_1.png
+   :alt: Select your text
+   :align: center
+
+Ensuite, écrivez votre commentaire :
+
+.. image:: ../../img/user/annotations_2.png
+   :alt: Write your comment
+   :align: center
+
+Le texte est maintenant surligné et vous pouvez lire le commentaire en le survolant avec votre souris.
+
+.. image:: ../../img/user/annotations_3.png
+   :alt: Read your comment
+   :align: center
+
+Vous pouvez créer autant de commentaires que vous le souhaitez.
diff --git a/docs/img/user/annotations_1.png b/docs/img/user/annotations_1.png
new file mode 100644
index 00000000..554282f5
--- /dev/null
+++ b/docs/img/user/annotations_1.png
diff --git a/docs/img/user/annotations_2.png b/docs/img/user/annotations_2.png
new file mode 100644
index 00000000..5351d2c5
--- /dev/null
+++ b/docs/img/user/annotations_2.png
diff --git a/docs/img/user/annotations_3.png b/docs/img/user/annotations_3.png
new file mode 100644
index 00000000..bc371ec3
--- /dev/null
+++ b/docs/img/user/annotations_3.png
diff --git a/src/Wallabag/CommentBundle/DependencyInjection/WallabagCommentExtension.php b/src/Wallabag/CommentBundle/DependencyInjection/WallabagCommentExtension.php
index b58a17a0..2d0b64ad 100644
--- a/src/Wallabag/CommentBundle/DependencyInjection/WallabagCommentExtension.php
+++ b/src/Wallabag/CommentBundle/DependencyInjection/WallabagCommentExtension.php
@@ -16,8 +16,5 @@ class WallabagCommentExtension extends Extension
     {
         $configuration = new Configuration();
         $config = $this->processConfiguration($configuration, $configs);
-
-        $loader = new Loader\YamlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
-        $loader->load('services.yml');
     }
 }
diff --git a/src/Wallabag/CommentBundle/Resources/config/routing.yml b/src/Wallabag/CommentBundle/Resources/config/routing.yml
deleted file mode 100644
index e69de29b..00000000
--- a/src/Wallabag/CommentBundle/Resources/config/routing.yml
+++ /dev/null
diff --git a/src/Wallabag/CommentBundle/Resources/config/services.yml b/src/Wallabag/CommentBundle/Resources/config/services.yml
deleted file mode 100644
index 0e7972a4..00000000
--- a/src/Wallabag/CommentBundle/Resources/config/services.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-services:
-#    wallabag_comment.example:
-#        class: Wallabag\CommentBundle\Example
-#        arguments: ["@service_id", "plain_value", %parameter%]
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
index 94f4ba7d..988cbd29 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
@@ -107,5 +107,25 @@
                 retrievePercent({{ entry.id }});
             });
         });
+
+        var app = new annotator.App();
+        app.include(annotator.ui.main, {
+            element: document.querySelector('article')
+        });
+        app.include(annotator.storage.http, {
+            prefix: '',
+            urls: {
+                create: '{{ path('annotations_post_annotation', { 'entry': entry.id }) }}',
+                update: '{{ path('annotations_put_annotation', { 'comment': 'idComment' }) }}',
+                destroy: '{{ path('annotations_delete_annotation', { 'comment': 'idComment' }) }}',
+                search: '{{ path('annotations_get_annotations', { 'entry': entry.id }) }}'
+            }
+        });
+        app
+            .start()
+            .then(function () {
+                app.annotations.load({entry: {{ entry.id }}});
+            });
     </script>
+
 {% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
index 8ea2d691..2a06484e 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
@@ -198,9 +198,6 @@ app
 .then(function () {
      app.annotations.load({entry: {{ entry.id }}});
 });
-
-
-
 </script>
 
 {% endblock %}