feat(permalink): improve permalink look

1. Fix issue ¶ in the RSS feed
2. Use animation to show the icon

documentation/content/Components/permalink.md

@@ -0,0 +1,57 @@
+Title: Permalinks To Headings
+Tags: navigation,
+Category: Components
+Date: 2019-12-02 11:05
+Slug: permalinks-to-headings
+Subtitle:
+Summary:
+Keywords:
+
+First, you need to enable the `toc` extension for Markdown in your Pelican configuration.
+
+```python
+MARKDOWN = {
+  'extension_configs': {
+    'markdown.extensions.toc': {}
+  }
+}
+```
+
+Then enable `permalink` option available for the `toc` extension.
+
+```python
+MARKDOWN = {
+  'extension_configs': {
+    'markdown.extensions.toc': {
+      'permalink': 'true',
+    }
+  }
+}
+```
+
+Enabling the `permalink` option will provide direct links to each heading.
+
+Hover over following example heading to see the permalink.
+
+## Example Heading
+
+You would get this,
+
+![Permalinks example using Markdown]({static}/images/elegant-theme-toc-permalinks.png)
+
+!!! Tip Recommendation
+
+    When set to True the paragraph symbol `¶` or `¶` is used by Python markdown.
+    This becomes part of the RSS feed.
+
+    We recommend setting permalink option to a space.
+
+```python
+MARKDOWN = {
+  'extension_configs': {
+    'markdown.extensions.toc': {
+      'permalink': ' ',
+    }
+  }
+}
+```

documentation/content/Components/table-of-contents.md

@@ -71,29 +71,6 @@ This is the content of my sample blog post.
 I will end my example here.
 ```
 
-### Enabling Permalinks
-
-Although it is not required, we recommend you to take advantage of `permalink` option available for the
-`toc` extension.
-
-Enabling the `permalink` option will
-provide direct links to each section.
-
-![Permalinks example using Markdown]({static}/images/elegant-theme-toc-permalinks.png)
-
-To enable this option, you need to add the `'permalink': 'true'` property to the
-`'markdown.extensions.toc'` section that was added in the previous section.
-
-```python
-MARKDOWN = {
-  'extension_configs': {
-    'markdown.extensions.toc': {
-      'permalink': 'true',
-    }
-  }
-}
-```
-
 ### Other Options
 
 For other options available for the Markdown Table of Contents extension, refer to the

documentation/pelicanconf.py

@@ -21,7 +21,7 @@
         "markdown.extensions.codehilite": {"css_class": "highlight"},
         "markdown.extensions.extra": {},
         "markdown.extensions.meta": {},
-        "markdown.extensions.toc": {"permalink": "true"},
+        "markdown.extensions.toc": {"permalink": " "},
     }
 }
 

static/css/elegant.css

@@ -273,22 +273,6 @@ ul.multi-parts-list li.active-part {
 p#post-share-links {
   text-align: right;
 }
-/* Perma link in article */
-h1:hover > a.headerlink,
-h2:hover > a.headerlink,
-h3:hover > a.headerlink,
-h4:hover > a.headerlink,
-h5:hover > a.headerlink,
-h6:hover > a.headerlink,
-dt:hover > a.headerlink {
-  text-decoration: none;
-  visibility: visible;
-}
-a.headerlink {
-  color: grey;
-  padding-left: 0.5em;
-  visibility: hidden;
-}
 /* Categories */
 .list-of-categories span {
   font-size: 0.7em;

static/css/permalink.css

@@ -0,0 +1,20 @@
+h1:hover > a.headerlink,
+h2:hover > a.headerlink,
+h3:hover > a.headerlink,
+h4:hover > a.headerlink,
+h5:hover > a.headerlink,
+h6:hover > a.headerlink,
+dt:hover > a.headerlink {
+  opacity: 1;
+  text-decoration: none;
+  visibility: visible;
+}
+a.headerlink {
+  content: url('data:image/svg+xml;utf8,<svg fill="darkgray" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="m29.298 63.471-4.048 4.02c-3.509 3.478-9.216 3.481-12.723 0-1.686-1.673-2.612-3.895-2.612-6.257s.927-4.585 2.611-6.258l14.9-14.783c3.088-3.062 8.897-7.571 13.131-3.372 1.943 1.93 5.081 1.917 7.01-.025 1.93-1.942 1.918-5.081-.025-7.009-7.197-7.142-17.834-5.822-27.098 3.37l-14.901 14.784c-3.575 3.549-5.543 8.269-5.543 13.293s1.968 9.743 5.544 13.292c3.679 3.65 8.51 5.474 13.343 5.474 4.834 0 9.667-1.824 13.348-5.476l4.051-4.021c1.942-1.928 1.953-5.066.023-7.009-1.927-1.941-5.068-1.952-7.011-.023zm45.156-57.427c-7.73-7.67-18.538-8.086-25.694-.986l-5.046 5.009c-1.943 1.929-1.955 5.066-.025 7.009s5.068 1.954 7.011.025l5.044-5.006c3.707-3.681 8.561-2.155 11.727.986 1.688 1.673 2.615 3.896 2.615 6.258 0 2.363-.928 4.586-2.613 6.259l-15.897 15.77c-7.269 7.212-10.679 3.827-12.134 2.383-1.943-1.929-5.08-1.917-7.01.025s-1.918 5.081.025 7.009c3.337 3.312 7.146 4.954 11.139 4.954 4.889 0 10.053-2.462 14.963-7.337l15.897-15.77c3.574-3.549 5.544-8.27 5.544-13.294 0-5.022-1.97-9.743-5.546-13.294z"/></svg>');
+  display: inline-block;
+  margin-left: 5px;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.2s ease-in;
+  visibility: hidden;
+  width: 20px;
+}