Specify link inline icon's padding

src/_includes/global/macros.njk

@@ -11,3 +11,8 @@
     </div>
 </div>
 {%- endmacro -%}
+
+{%- macro siteFeedLink(linkText) -%}
+<a href="{{ sitemeta.feedPath }}">
+    <svg  class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>{{ linkText }}</a>
+{%- endmacro -%}

src/_includes/main/changelogs.njk

@@ -22,7 +22,8 @@ articleElement: true
     </ul>
 </nav>
 
-<p>To get notified of the updates on this website, you can subscribe to the <a href="{{ sitemeta.feedPath }}">{{ sitemeta.siteName }} RSS feed</a>, which contains new articles, blog posts and website changelogs.</p>
+{% from "global/macros.njk" import siteFeedLink %}
+<p>To get notified of the updates on this website, you can subscribe to its {{ siteFeedLink("RSS feed") }}, which contains new articles, blog posts and website changelogs.</p>
 
 {{ content | safe }}
 

src/_includes/main/footer.njk

@@ -3,8 +3,9 @@
 {% block footerContent %}
     <h2 class="visually-hidden">Footer Navigation:</h2>
     {% set currentUrl %}{{ page.url }}{% endset %}
+    {% from "global/macros.njk" import siteFeedLink %}
     <ul class="inline-nav footer__links">
-        <li><a href="{{ sitemeta.feedPath }}">RSS Feed</a></li>
+        <li>{{ siteFeedLink("RSS Feed") }}</li>
         <li><a
             {% if currentUrl === "/sitemap/" %}aria-current="page"{% endif %}
             href="/sitemap/

src/assets/css/utility.css

@@ -16,10 +16,12 @@
 }
 
 .inline-icon {
+    display: inline-block;
     vertical-align: -10%;
     height: 1em;
     fill: currentColor;
 }
+a > .inline-icon { padding-inline-end: .25em; }
 
 .inline-list {
     display: flex;

src/index.njk

@@ -1,6 +1,6 @@
 ---
 layout: main/content
-tags: pages
+tags: navbar links
 metadata:
     title: Home
 isContentDivided: true
@@ -57,7 +57,8 @@ eleventyComputed:
         {%- endfor %}
         <p><a href="/changelogs">View all site changelogs</a></p>
     </div>
-    <p>You can subscribe to the <a href="{{ sitemeta.feedPath }}">{{ sitemeta.siteName }} RSS feed</a> to get notified of the updates on this website, including new articles, blog posts and website changelogs.</p>
+    {% from "global/macros.njk" import siteFeedLink %}
+    <p>You can subscribe to the {{ siteFeedLink(sitemeta.siteName + " RSS feed") }} to get notified of the updates on this website, including new articles, blog posts and website changelogs.</p>
 
     {% include "main/statuscafe.njk" %}
 </section>

src/links/webmastery.md

@@ -1,13 +1,14 @@
 ---
 title: Webmastery
 date: 2024-07-01
-updated: 2024-09-11T00:23:17+0800
+updated: 2024-09-15T09:44:42+0800
 ---
 
 ### Webmastery Tutorials
 
 * [Creating Your Own Website](https://32bit.cafe/cyowebsite/) by 32-Bit Cafe
 * [Interacting with Other Websites](https://32bit.cafe/interactingontheweb/) by 32-Bit Cafe
+* [How to build your own RSS Feed](https://caffeineandlasers.neocities.org/blogs/rss) by Cameron Jones
 
 ### Webmastery Guides