🚧 feat: style xml feed

welpo · Jun 24, 2023 · 1b60be8 · 1b60be8
1 parent 36930dc
commit 1b60be8
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 3 deletions.
diff --git a/static/feed_style.xsl b/static/feed_style.xsl
@@ -0,0 +1,105 @@
+<?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"/>
+        </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>
+            <dk-alert-box type="info">
+              <strong>This is an Atom feed</strong>. Subscribe 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.
+            </dk-alert-box>
+            <section id="banner-home-subtitle">
+            <div class="padding-top article-title">
+                <!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg -->
+                  <svg
+                  xmlns="http://www.w3.org/2000/svg" version="1.1"
+                  style="flex-shrink: 0; width: 1.6rem; height: 1.6rem;"
+                  viewBox="0 0 256 256">
+                  <defs>
+                    <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915"
+                      id="RSSg">
+                      <stop offset="0.0" stop-color="#E3702D"/>
+                      <stop offset="0.1071" stop-color="#EA7D31"/>
+                      <stop offset="0.3503" stop-color="#F69537"/>
+                      <stop offset="0.5" stop-color="#FB9E3A"/>
+                      <stop offset="0.7016" stop-color="#EA7C31"/>
+                      <stop offset="0.8866" stop-color="#DE642B"/>
+                      <stop offset="1.0" stop-color="#D95B29"/>
+                    </linearGradient>
+                  </defs>
+                  <rect width="256" height="256" rx="55" ry="55" x="0" y="0"
+                    fill="#CC5D15"/>
+                  <rect width="246" height="246" rx="50" ry="50" x="5" y="5"
+                    fill="#F49C52"/>
+                  <rect width="236" height="236" rx="47" ry="47" x="10" y="10"
+                    fill="url(#RSSg)"/>
+                  <circle cx="68" cy="189" r="24" fill="#FFF"/>
+                  <path
+                    d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z"
+                    fill="#FFF"/>
+                  <path
+                    d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z"
+                    fill="#FFF"/>
+                </svg> Feed Preview</div>
+            <div class="padding-top">
+              <h3>
+                <xsl:value-of select="/atom:feed/atom:title"/>
+              </h3>
+            </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 title-container section-title bottom-divider">
+            Recent Posts
+            </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>
diff --git a/templates/atom.xml b/templates/atom.xml
@@ -1,5 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="{{ lang }}">
+<?xml version="1.0" encoding="utf-8"?>
+<?xml-stylesheet href="/feed_style.xsl" type="text/xsl"?>
+<feed xmlns="http://www.w3.org/2005/Atom"
+      xmlns:media="http://search.yahoo.com/mrss/"
+      xml:lang="{{ lang }}">
     <title>{{ config.title }}
     {%- if term %} - {{ term.name }}
     {%- elif section.title %} - {{ section.title }}
@@ -13,7 +16,7 @@
         {%- if section -%}
             {{ section.permalink | escape_xml | safe }}
         {%- else -%}
-            {{ config.base_url | escape_xml | safe }}
+            {{ get_url(path="/", lang=lang) | escape_xml | safe }}
         {%- endif -%}
     "/>
     <generator uri="https://www.getzola.org/">Zola</generator>