More use component

lib/views/page.html

@@ -40,6 +40,9 @@
       <div class="flex-item-action">
         <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-csrftoken="{{ csrf() }}" data-bookmarked="0"><i class="fa fa-star-o"></i></a>
       </div>
+      <div class="flex-item-action">
+        <span id="bookmark-button-react" data-csrftoken="{{ csrf() }}"></span>
+      </div>
     </div>
   </header>
   {% endif %}

lib/views/page_list.html

@@ -33,6 +33,9 @@
       <div class="flex-item-action">
         <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-csrftoken="{{ csrf() }}" data-bookmarked="0"><i class="fa fa-star-o"></i></a>
       </div>
+      <div class="flex-item-action">
+        <span id="bookmark-button-react" data-csrftoken="{{ csrf() }}"></span>
+      </div>
       <div class="flex-item-action visible-xs visible-sm">
         <button
             data-csrftoken="{{ csrf() }}"

lib/views/user_page.html

@@ -11,6 +11,7 @@
   <div class="user-page-header">
   {% if page %}
     <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-bookmarked="0"><i class="fa fa-star-o"></i></a>
+    <span id="bookmark-button-react" data-csrftoken="{{ csrf() }}"></span>
   {% endif %}
     <div class="pull-left user-page-picture">
       <img src="{{ pageUser|picture }}" class="picture picture-rounded">