doc: cross-link to related Pelican plugins from CSS components page.

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 0b267c7f4957dbe040850e6be17402a6c43d3ec1..4b3e254a3ddb9f4f2839d5abd24e249e5b7f9412 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -137,6 +137,12 @@ but the CSS class can be used on any block element.
           </div>
         </div>
 
+.. note-info::
+
+    The `Pelican Components plugin <{filename}/plugins/components.rst#blocks-notes-frame>`__
+    is able to produce blocks conveniently using :rst:`.. block-::` directives
+    in your :abbr:`reST <reStructuredText>` markup.
+
 `Badges`_
 =========
 
@@ -167,6 +173,11 @@ Only :html:`<h3>` is supported for a badge.
           get notified when he gets a better avatar.</p>
         </div>
 
+.. note-info::
+
+    The `Pelican Metadata plugin <{filename}/plugins/metadata.rst>`_  is able
+    to automatically render author and category badges for articles.
+
 `Notes, frame`_
 ===============
 
@@ -245,6 +256,12 @@ semantic purposes, but the CSS classes can be used on any block element.
           </div>
         </div>
 
+.. note-info::
+
+    Notes and frames can be created conveniently using :rst:`.. note-::` and
+    :rst:`.. frame::` directives in your :abbr:`reST <reStructuredText>` markup
+    using the `Pelican Components plugin <{filename}/plugins/components.rst#blocks-notes-frame>`__.
+
 `Text`_
 =======
 
@@ -285,6 +302,12 @@ paragraph or inline text.
           </div>
         </div>
 
+.. note-info::
+
+    Colored text paragraphs can be conveniently created using :rst:`.. text-::`
+    directives in your :abbr:`reST <reStructuredText>` markup using the
+    `Pelican Components plugin <{filename}/plugins/components.rst#text>`__.
+
 Apply :css:`.m-small` or :css:`.m-big` CSS class together with :css:`.m-text`
 to make the text appear smaller or larger.
 
@@ -389,6 +412,12 @@ class inside the :html:`<a>` to achieve the following effect:
           </a>
         </div>
 
+.. note-info::
+
+    Buttons can be conveniently created using :rst:`.. button-::` directives in
+    your :abbr:`reST <reStructuredText>` markup using the
+    `Pelican Components plugin <{filename}/plugins/components.rst#button-links>`__.
+
 `Labels`_
 =========
 
@@ -603,6 +632,12 @@ not the surrounding area:
           <a href="{filename}/static/flowers.jpg"><img src="{filename}/static/flowers-small.jpg" /></a>
         </div>
 
+.. note-info::
+
+    Images can be conveniently created with an :rst:`.. image::` directive in
+    your :abbr:`reST <reStructuredText>` markup using the
+    `Pelican Images plugin <{filename}/plugins/images.rst>`_.
+
 `Figures`_
 ==========
 
@@ -636,6 +671,12 @@ the border is distracting, apply the :css:`.m-flat` class to hide it.
           <span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
         </figure>
 
+.. note-info::
+
+    Figures can be conveniently created with a :rst:`.. figure::` directive in
+    your :abbr:`reST <reStructuredText>` markup using the
+    `Pelican Images plugin <{filename}/plugins/images.rst>`_.
+
 `Image grid`_
 =============
 
@@ -737,10 +778,10 @@ Then, percentage width :math:`p_i` of each image is calculated as:
 
     p_i = W \cfrac{w_i}{h_i} \cdot 100 \%
 
-.. note-info::
+.. note-success::
 
-    The image width calculation is quite annoying to do manually, that's why
-    m.css provides a `Pelican plugin <{filename}/plugins/images.rst#image-grid>`_
+    The image width calculation is quite annoying to do manually and so there's
+    an :rst:`.. image-grid::` directive in the `Pelican Image plugin <{filename}/plugins/images.rst#image-grid>`_
     that does the hard work for you.
 
 `Code`_
@@ -821,10 +862,10 @@ instead of :html:`<pre>`:
 
 .. note-success::
 
-    To make your life easier, m.css provides a
-    `Pelican plugin <{filename}/plugins/math-and-code.rst#code>`__ that
-    integrates Pygments code highlighting as a :abbr:`reST <reStructuredText>`
-    directive.
+    To make your life easier, the `Pelican Code plugin <{filename}/plugins/math-and-code.rst#code>`__
+    integrates Pygments code highlighting as a :rst:`.. code::`
+    :abbr:`reST <reStructuredText>` directive and a :rst:`:code:` inline text
+    role.
 
 `Colored terminal output`_
 ==========================
@@ -858,7 +899,7 @@ might then look similarly to this:
 
 .. note-success::
 
-    The Pelican plugin mentioned above is able to do
+    The Pelican Code plugin mentioned above is able to do
     `colored console highlighting as well <{filename}/plugins/math-and-code.rst#colored-terminal-output>`_.
 
 `Code figure`_
@@ -899,6 +940,12 @@ It's also possible to have matching border for a console output. Just use
 :css:`.m-console-figure` instead of :css:`.m-code-figure` on the :html:`<figure>`
 element.
 
+.. note-info::
+
+    Code figures can be conveniently created with a :rst:`.. code-figure::`
+    directive in your :abbr:`reST <reStructuredText>` markup using the
+    `Pelican Components plugin <{filename}/plugins/components.rst#code-figure>`_.
+
 `Math`_
 =======
 
@@ -1000,11 +1047,13 @@ the ``depth`` value returned on stderr can be taken as a base for the
           </g>
         </svg> character.</p>
 
-.. note-warning::
+.. note-success::
 
-    Producing SVG manually using command-line tools is no fun, so m.css
-    provides a `Pelican plugin <{filename}/plugins/math-and-code.rst#math>`__
-    that integrates LaTeX math directly into your markup. Check it out!
+    Producing SVG manually using command-line tools is no fun. That's why the
+    :rst:`.. math::` directive and :rst:`:math:` inline text role in the
+    `Pelican Math plugin <{filename}/plugins/math-and-code.rst#math>`__
+    integrates LaTeX math directly into your :abbr:`reST <reStructuredText>`
+    markup for convenient content authoring.
 
 `Padding`_
 ==========

diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index e501ccb0e8bbc519fdf1de8087e476a5f9d23c62..e82b427929cf0443a5c15b3e625ce3a5bc4c2723 100644 (file)
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -304,6 +304,12 @@ fancy transition, use :css:`.m-transition` on a paragraph.
         accumsan ante sit amet iaculis. Phasellus rhoncus hendrerit leo vitae lacinia.
         Maecenas iaculis dui ex, eu interdum lacus ornare sit amet.</p>
 
+.. note-info::
+
+    Transitions can be conveniently created with a :rst:`.. transition::`
+    directive in your :abbr:`reST <reStructuredText>` markup using the
+    `Pelican Components plugin <{filename}/plugins/components.rst#transitions>`_.
+
 `Preformatted blocks`_
 ======================