added anchor headings to blog

main/_includes/anchor_headings.html

@@ -0,0 +1,175 @@
+{% capture headingsWorkspace %}
+    {% comment %}
+      Copyright (c) 2018 Vladimir "allejo" Jimenez
+  
+      Permission is hereby granted, free of charge, to any person
+      obtaining a copy of this software and associated documentation
+      files (the "Software"), to deal in the Software without
+      restriction, including without limitation the rights to use,
+      copy, modify, merge, publish, distribute, sublicense, and/or sell
+      copies of the Software, and to permit persons to whom the
+      Software is furnished to do so, subject to the following
+      conditions:
+  
+      The above copyright notice and this permission notice shall be
+      included in all copies or substantial portions of the Software.
+  
+      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+      EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+      OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+      NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+      HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+      WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+      FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+      OTHER DEALINGS IN THE SOFTWARE.
+    {% endcomment %}
+    {% comment %}
+      Version 1.0.13
+        https://github.com/allejo/jekyll-anchor-headings
+  
+      "Be the pull request you wish to see in the world." ~Ben Balter
+  
+      Usage:
+        {% include anchor_headings.html html=content anchorBody="#" %}
+  
+      Parameters:
+        * html          (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+  
+      Optional Parameters:
+        * beforeHeading (bool)   : false  - Set to true if the anchor should be placed _before_ the heading's content
+        * headerAttrs   (string) :  ''    - Any custom HTML attributes that will be added to the heading tag; you may NOT use `id`;
+                                            the `%heading%` and `%html_id%` placeholders are available
+        * anchorAttrs   (string) :  ''    - Any custom HTML attributes that will be added to the `<a>` tag; you may NOT use `href`, `class` or `title`;
+                                            the `%heading%` and `%html_id%` placeholders are available
+        * anchorBody    (string) :  ''    - The content that will be placed inside the anchor; the `%heading%` placeholder is available
+        * anchorClass   (string) :  ''    - The class(es) that will be used for each anchor. Separate multiple classes with a space
+        * anchorTitle   (string) :  ''    - The `title` attribute that will be used for anchors
+        * h_min         (int)    :  1     - The minimum header level to build an anchor for; any header lower than this value will be ignored
+        * h_max         (int)    :  6     - The maximum header level to build an anchor for; any header greater than this value will be ignored
+        * bodyPrefix    (string) :  ''    - Anything that should be inserted inside of the heading tag _before_ its anchor and content
+        * bodySuffix    (string) :  ''    - Anything that should be inserted inside of the heading tag _after_ its anchor and content
+        * generateId    (true)   :  false - Set to true if a header without id should generate an id to use.
+  
+      Output:
+        The original HTML with the addition of anchors inside of all of the h1-h6 headings.
+    {% endcomment %}
+
+    {% assign minHeader = include.h_min | default: 1 %}
+    {% assign maxHeader = include.h_max | default: 6 %}
+    {% assign beforeHeading = include.beforeHeading %}
+    {% assign headerAttrs = include.headerAttrs %}
+    {% assign nodes = include.html | split: '<h' %}
+
+    {% capture edited_headings %}{% endcapture %}
+
+    {% for _node in nodes %}
+        {% capture node %}{{ _node | strip }}{% endcapture %}
+
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign nextChar = node | replace: '"', '' | strip | slice: 0, 1 %}
+        {% assign headerLevel = nextChar | times: 1 %}
+
+        <!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's see if we need to fix it -->
+        {% if headerLevel == 0 %}
+            <!-- Split up the node based on closing angle brackets and get the first one. -->
+            {% assign firstChunk = node | split: '>' | first %}
+
+            <!-- If the first chunk does NOT contain a '<', that means we've broken another HTML tag that starts with 'h' -->
+            {% unless firstChunk contains '<' %}
+                {% capture node %}
+                    <h{{ node }}{% endcapture %}
+            {% endunless %}
+
+            {% capture edited_headings %}{{ edited_headings }}{{ node }}{% endcapture %}
+            {% continue %}
+        {% endif %}
+
+        {% capture _closingTag %}</h{{ headerLevel }}>{% endcapture %}
+        {% assign _workspace = node | split: _closingTag %}
+        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+        {% assign escaped_header = header | strip_html | strip %}
+
+        {% assign _classWorkspace = _workspace[0] | split: 'class="' %}
+        {% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
+        {% assign _html_class = _classWorkspace[0] %}
+
+        {% if _html_class contains "no_anchor" %}
+            {% assign skip_anchor = true %}
+        {% else %}
+            {% assign skip_anchor = false %}
+        {% endif %}
+
+        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+        {% if _idWorkspace[1] %}
+            {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+            {% assign html_id = _idWorkspace[0] %}
+            {% assign h_attrs = headerAttrs %}
+        {% elsif include.generateId %}
+            <!-- If the header did not have an id we create one. -->
+            {% assign html_id = escaped_header | slugify %}
+            {% if html_id == "" %}
+                {% assign html_id = false %}
+            {% endif %}
+            <!-- Append the generated id to other potential header attributes. -->
+            {% capture h_attrs %}{{ headerAttrs }} id="%html_id%"{% endcapture %}
+        {% endif %}
+
+        <!-- Build the anchor to inject for our heading -->
+        {% capture anchor %}{% endcapture %}
+
+        {% if skip_anchor == false and html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
+            {% if h_attrs %}
+                {% capture _hAttrToStrip %}{{ _hAttrToStrip | split: '>' | first }} {{ h_attrs | strip | replace: '%heading%', escaped_header | replace: '%html_id%', html_id }}>{% endcapture %}
+            {% endif %}
+
+            {% capture anchor %}href="#{{ html_id }}"{% endcapture %}
+
+            {% if include.anchorClass %}
+                {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
+            {% endif %}
+
+            {% if include.anchorTitle %}
+                {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', escaped_header }}"{% endcapture %}
+            {% endif %}
+
+            {% if include.anchorAttrs %}
+                {% capture anchor %}{{ anchor }} {{ include.anchorAttrs | replace: '%heading%', escaped_header | replace: '%html_id%', html_id }}{% endcapture %}
+            {% endif %}
+
+            {% capture anchor %}<a {{ anchor }}>{{ include.anchorBody | replace: '%heading%', escaped_header | default: '' }}</a>{% endcapture %}
+
+            <!-- In order to prevent adding extra space after a heading, we'll let the 'anchor' value contain it -->
+            {% if beforeHeading %}
+                {% capture anchor %}{{ anchor }} {% endcapture %}
+            {% else %}
+                {% capture anchor %} {{ anchor }}{% endcapture %}
+            {% endif %}
+        {% endif %}
+
+        {% capture new_heading %}
+            <h{{ _hAttrToStrip }}
+            {{ include.bodyPrefix }}
+            {% if beforeHeading %}
+                {{ anchor }}{{ header }}
+            {% else %}
+                {{ header }}{{ anchor }}
+            {% endif %}
+            {{ include.bodySuffix }}
+            </h{{ headerLevel }}>
+        {% endcapture %}
+
+        <!--
+        If we have content after the `</hX>` tag, then we'll want to append that here so we don't lost any content.
+        -->
+        {% assign chunkCount = _workspace | size %}
+        {% if chunkCount > 1 %}
+            {% capture new_heading %}{{ new_heading }}{{ _workspace | last }}{% endcapture %}
+        {% endif %}
+
+        {% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %}
+    {% endfor %}
+{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}

main/_layouts/blog.html

@@ -3,13 +3,27 @@ layout: default
 nav: nav/blognav.html
 ---
 
+<style>
+    html {
+        scroll-padding-top: 70px;
+    }
+
+    h1 .anchor-heading, h2 .anchor-heading, h3 .anchor-heading, h4 .anchor-heading, h5 .anchor-heading, h6 .anchor-heading {
+        visibility: hidden;
+    }
+
+    h1:hover .anchor-heading, h2:hover .anchor-heading, h3:hover .anchor-heading, h4:hover .anchor-heading, h5:hover .anchor-heading, h6:hover .anchor-heading {
+        visibility: visible;
+    }
+</style>
+
 {% if page.book %}
-<link rel="stylesheet" href="/style/book.css">
+    <link rel="stylesheet" href="/style/book.css">
 {% else %}
-<script>
+    <script>
-    let style = dark ? "monokai" : "friendly";
+        let style = dark ? "monokai" : "friendly";
-    addStyle(`https://cdn.jsdelivr.net/gh/richleland/pygments-css@master/${style}.css`);
+        addStyle(`https://cdn.jsdelivr.net/gh/richleland/pygments-css@master/${style}.css`);
-</script>
+    </script>
 {% endif %}
 
 <div class="list-display rounded">
@@ -17,24 +31,24 @@ nav: nav/blognav.html
         <h1>{{ page.title }}</h1>
 
         {% if page.archived %}
-        <p>🧓 This post has been archived.</p>
+            <p>🧓 This post has been archived.</p>
         {% endif %}
 
         {% if page.mature %}
-        <p>⚠️ This post contains mature content.</p>
+            <p>⚠️ This post contains mature content.</p>
         {% endif %}
 
         {% if page.reedsy %}
-        <p>📘 <em>This story was inspired by a Reedsy Prompt and submitted to their competition. As such, it has also been published on <a href="{{ page.reedsy }}">their website</a>.</em></p>
+            <p>📘 <em>This story was inspired by a Reedsy Prompt and submitted to their competition. As such, it has also been published on <a href="{{ page.reedsy }}">their website</a>.</em></p>
         {% endif %}
 
         <div class="post-content">
-            {{ content }}
+            {% include anchor_headings.html html=content anchorBody="#" anchorClass="anchor-heading" %}
         </div>
 
         <span class="text-muted project-status blog-isolated-status">{{ page.date | date_to_string }}</span>
         {% if page.discuss %}
-        🧵 <a href="{{ page.discuss }}" class="blog-discuss">Discuss this post</a>
+            🧵 <a href="{{ page.discuss }}" class="blog-discuss">Discuss this post</a>
         {% endif %}
     </div>
 </div>
@@ -50,7 +64,7 @@ nav: nav/blognav.html
             <p><input type="text" name="name" placeholder="Name (optional)"></p>
 
             <p>
-                <input id="d3ee1" type="checkbox" name="l" checked value="d3ee16aa-f47a-43bd-a0d6-759d108a5650" />
+                <input id="d3ee1" type="checkbox" name="l" checked value="d3ee16aa-f47a-43bd-a0d6-759d108a5650"/>
                 <label for="d3ee1">📔 Ellpeck's Blog</label>
             </p>
 

main/style/style.css

@@ -7,15 +7,10 @@ html {
 body {
     margin-top: 106px;
     font-family: Roboto, sans-serif;
-    font-display: swap;
     background-color: #404142;
     margin-bottom: 100px;
 }
 
-sup {
-    scroll-margin-top: -66px;
-}
-
 .main {
     margin-top: 20px;
     margin-bottom: 40px;
@@ -27,10 +22,7 @@ sup {
     margin-top: 40px;
     margin-left: auto;
     margin-right: auto;
-    padding-top: 50px;
+    padding: 50px 60px;
-    padding-bottom: 50px;
-    padding-left: 60px;
-    padding-right: 60px;
     background-color: white;
 }
 
@@ -48,10 +40,7 @@ sup {
 
 .jumbotron {
     width: 85%;
-    margin-bottom: 0;
+    margin: 40px auto 0;
-    margin-top: 40px;
-    margin-left: auto;
-    margin-right: auto;
     background-color: white;
 }
 
@@ -61,7 +50,6 @@ sup {
     top: -30px;
     width: 80px;
     height: auto;
-    align-self: left;
 }
 
 .project-status {
@@ -97,7 +85,7 @@ sup {
 }
 
 .blog-cat-button {
-    padding: 0px;
+    padding: 0;
     margin-right: 15px;
 }
 
@@ -175,7 +163,7 @@ sup {
 }
 
 .card-link {
-    margin-left: 0px !important;
+    margin-left: 0 !important;
     margin-right: 10px;
     margin-bottom: 10px;
 }
@@ -246,14 +234,14 @@ pre.highlight {
 }
 
 .footnotes::before {
-    content: '';
+    content: "";
     display: block;
     margin-top: 1rem;
     margin-bottom: 1rem;
     border-top: 2px solid rgba(0, 0, 0, 0.2);
 }
 
-@media(max-width: 1199px) {
+@media (max-width: 1199px) {
     .blog-title {
         margin-top: 15px;
     }