Make heading anchors more generic

Author: allejo

_macros/blog-post.html.twig

@@ -9,13 +9,13 @@
             <p class="c-blog-post__date">{{ post.date | date('M d, Y') }}</p>
         </header>
 
-        <section class="c-blog-post__body">
+        <section class="c-blog-post__body s-markdown">
             {% if summary %}
                 {{ post.content | summary }}
             {% else %}
                 {{ post.content | anchors(
                     anchorBody='<span class="sr-only">Permalink to "{heading}" section</span>',
-                    anchorClass='c-blog-post__body__anchor'
+                    anchorClass='c-heading-anchor'
                 ) }}
             {% endif %}
         </section>

_pages/about.html.twig

@@ -84,7 +84,7 @@ description: I'm just another boring developer pretending to know what he's doin
 {% endmacro %}
 
 {% block content %}
-    {% markdown %}
+    {% set page_content %}{% markdown %}
         *[CMS]: Content Management System
 
         # About
@@ -152,5 +152,12 @@ description: I'm just another boring developer pretending to know what he's doin
                 content: 'content',
             }
         ) }}
-    {% endmarkdown %}
+    {% endmarkdown %}{% endset %}
+
+    <div class="s-markdown">
+        {{ page_content | anchors(
+            anchorBody='<span class="sr-only">Permalink to "{heading}" section</span>',
+            anchorClass='c-heading-anchor'
+        ) }}
+    </div>
 {% endblock %}

_sass/components/_blog-post.scss

@@ -42,35 +42,6 @@
 }
 
 .c-blog-post__body {
-  h1, h2, h3,
-  h4, h5, h6 {
-    align-items: center;
-    display: flex;
-    width: 100%;
-
-    .c-blog-post__body__anchor {
-      @include margin(l, 2);
-
-      opacity: 0;
-      font-size: 0.75em;
-      text-decoration: none;
-
-      &::after {
-        content: '\00B6';
-      }
-
-      &:focus {
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      .c-blog-post__body__anchor {
-        opacity: 1;
-      }
-    }
-  }
-
   ul {
     @include padding(l, 4);
   }

_sass/layout/_markdown.scss

@@ -3,6 +3,35 @@
     text-decoration: underline;
   }
 
+  h1, h2, h3,
+  h4, h5, h6 {
+    align-items: center;
+    display: flex;
+    width: 100%;
+
+    .c-heading-anchor {
+      @include margin(l, 2);
+
+      opacity: 0;
+      font-size: 0.75em;
+      text-decoration: none;
+
+      &::after {
+        content: '\00B6';
+      }
+
+      &:focus {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .c-heading-anchor {
+        opacity: 1;
+      }
+    }
+  }
+
   *:last-child {
     margin-bottom: 0;
   }