✨ feat: custom feed content and style

README.md

@@ -19,6 +19,7 @@ tabi has a perfect score on Google's Lighthouse audit:
 - [X] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
 - [X] [KaTeX](https://katex.org/) support.
 - [X] All JavaScript (theme switcher and KaTeX) can be fully disabled.
+- [X] Stylized [feed](https://welpo.github.io/tabi/atom.xml).
 - [X] Responsive design.
 - [X] Projects page.
 - [X] Archive page.

config.toml

@@ -1,6 +1,7 @@
 base_url = "https://welpo.github.io/tabi"
 title = "~/tabi"
 description = "tabi is a fast, lightweight, and modern Zola theme with multi-language support, optional JavaScript, and a perfect Lighthouse score."
+author = "welpo"
 generate_feed = true
 compile_sass = true
 minify_html = true

content/blog/custom-font-subset.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Optimitza la càrrega amb un subconjunt de font personalitzat"
 date = 2023-04-29
-updated = 2023-05-25
+updated = 2023-06-22
 description = "Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris."
 
 [taxonomies]
@@ -102,7 +102,7 @@ if [ ! -f "$font_file" ]; then
 fi
 
 # Extreu el títol i els noms del menú del fitxer de configuració.
-title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"' | grep -v "atom feed")
+title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"')
 menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' )
 language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' )
 

content/blog/custom-font-subset.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Optimiza la carga con un subconjunto de fuente personalizado"
 date = 2023-04-29
-updated = 2023-05-25
+updated = 2023-06-22
 description = "Aprende cómo crear un subconjunto personalizado que solo incluya los glifos necesarios."
 
 [taxonomies]
@@ -102,7 +102,7 @@ if [ ! -f "$font_file" ]; then
 fi
 
 # Extrae el título y los nombres de los menús del archivo de configuración.
-title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"' | grep -v "atom feed")
+title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"')
 menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' )
 language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' )
 

content/blog/custom-font-subset.md

@@ -1,7 +1,7 @@
 +++
 title = "Optimise loading times with a custom font subset"
 date = 2023-04-29
-updated = 2023-05-25
+updated = 2023-06-22
 description = "Learn how to create a custom subset that only includes the necessary glyphs."
 
 [taxonomies]
@@ -102,7 +102,7 @@ if [ ! -f "$font_file" ]; then
 fi
 
 # Extract the title and menu names from the config file.
-title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"' | grep -v "atom feed")
+title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"')
 menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' )
 language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' )
 

sass/parts/_footer.scss

@@ -23,6 +23,10 @@ footer nav {
     flex-wrap: wrap;
     align-items: flex-end;
 
+    svg {
+        max-height: 15px;
+    }
+
     ul {
         gap: 5px;
     }

sass/parts/_image.scss

@@ -34,10 +34,6 @@ figure h4::before {
     content: "↳ ";
 }
 
-svg {
-    max-height: 15px;
-}
-
 .img-dark {
     display: none;
 }

sass/parts/_misc.scss

@@ -33,6 +33,10 @@ ul {
     margin-bottom: 4vmin;
 }
 
+.padding-top {
+    padding-top: 4vmin;
+}
+
 .title-container {
     padding-bottom: 15px;
 }
@@ -162,3 +166,14 @@ table tbody tr:nth-child(even) {
     text-indent: -2.4rem;
     margin-left: 2.4rem;
 }
+
+.info-box {
+    border: 1px solid #087E96;
+    border-left-width: 0.3rem;
+    background-color: #d1f3f8;
+    padding: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 10px;
+    text-align: center;
+}

static/feed_style.xsl

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:atom="http://www.w3.org/2005/Atom">
+  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+      <head>
+        <title>
+          <xsl:value-of select="/atom:feed/atom:title"/> • Feed
+        </title>
+        <meta charset="utf-8"/>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <link rel="stylesheet" href="/main.css"/>
+      </head>
+      <body>
+        <div class="content">
+          <main>
+            <div class="info-box">
+              <strong>This is a web feed</strong>, also known as an Atom feed. <strong>Subscribe</strong> by copying the URL from the address bar into your newsreader. Visit <a href="https://aboutfeeds.com">About Feeds</a> to learn more and get started. It’s free.
+            </div>
+            <section id="banner-home-subtitle">
+            <div class="padding-top home-title">
+                <xsl:value-of select="/atom:feed/atom:title"/>
+            </div>
+            <p>
+              <xsl:value-of select="/atom:feed/atom:subtitle"/>
+            </p>
+            <a class="readmore">
+              <xsl:attribute name="href">
+                <xsl:value-of select="/atom:feed/atom:link[2]/@href"/>
+              </xsl:attribute>
+            Visit Website → </a><p></p>
+            </section>
+
+            <div class="padding-top listing-title bottom-divider">
+            <h1>Recent Posts</h1>
+            </div>
+            <div class="bloglist-container">
+              <xsl:for-each select="/atom:feed/atom:entry">
+                <section class="bloglist-row bottom-divider">
+                  <div class="date">
+                    <xsl:value-of select="substring(atom:published, 0, 11)"/>
+                  </div>
+                  <div class="bloglist-content">
+                    <div class="bloglist-title">
+                      <a>
+                        <xsl:attribute name="href">
+                          <xsl:value-of select="atom:link/@href"/>
+                        </xsl:attribute>
+                        <xsl:value-of select="atom:title"/>
+                      </a>
+                    </div>
+                    <div class="description">
+                      <xsl:value-of select="atom:summary"/>
+                    </div>
+                    <a class="readmore" href="">
+                      <xsl:attribute name="href">
+                        <xsl:value-of select="atom:link/@href"/>
+                      </xsl:attribute>
+                    </a>
+                  </div>
+                </section>
+              </xsl:for-each>
+            </div>
+          </main>
+        </div>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>

templates/atom.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<?xml-stylesheet href="/feed_style.xsl" type="text/xsl"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="{{ lang }}">
+    <title>{{ config.title }}
+    {%- if term %} - {{ term.name }}
+    {%- elif section.title %} - {{ section.title }}
+    {%- endif -%}
+    </title>
+    {%- if config.description %}
+        <subtitle>{{ config.description }}</subtitle>
+    {%- endif %}
+    <link href="{{ feed_url | safe }}" rel="self" type="application/atom+xml"/>
+    <link href="
+        {%- if section -%}
+            {{ section.permalink | escape_xml | safe }}
+        {%- else -%}
+            {{ get_url(path="/", lang=lang) | escape_xml | safe }}
+        {%- endif -%}
+    "/>
+    <generator uri="https://www.getzola.org/">Zola</generator>
+    <updated>{{ last_updated | date(format="%+") }}</updated>
+    <id>{{ feed_url | safe }}</id>
+    {%- for page in pages %}
+    <entry xml:lang="{{ page.lang }}">
+        <title>{{ page.title }}</title>
+        <published>{{ page.date | date(format="%+") }}</published>
+        <updated>{{ page.updated | default(value=page.date) | date(format="%+") }}</updated>
+        <author>
+            <name>
+            {%- if page.authors -%}
+                {{ page.authors[0] }}
+            {%- elif config.author -%}
+                {{ config.author }}
+            {%- else -%}
+                Unknown
+            {%- endif -%}
+            </name>
+        </author>
+        <link rel="alternate" href="{{ page.permalink | safe }}" type="text/html"/>
+        <id>{{ page.permalink | safe }}</id>
+        {% if page.summary %}
+            <summary type="html">{{ page.summary }}</summary>
+        {% elif page.description %}
+            <summary type="html">{{ page.description }}</summary>
+        {% endif %}
+    </entry>
+    {%- endfor %}
+</feed>

templates/partials/footer.html

@@ -6,7 +6,7 @@
                     {%- if config.generate_feed and config.extra.feed_icon -%}
                     <li>
                         <a rel="noopener noreferrer" target="_blank" class="nav-links no-hover-padding social" href={{ get_url(path=config.feed_filename, lang=lang, trailing_slash=false) | safe }}>
-                        <img alt="atom/rss feed" title="atom/rss feed" src="{{config.base_url}}/social_icons/rss.svg">
+                        <img alt="feed" title="feed" src="{{config.base_url}}/social_icons/rss.svg">
                         </a>
                     </li>
                     {%- endif -%}