Work on #262: Rudimentary RSS styling working.

Could be a lot better, but we'll get at that soon.

lib/Trog/Routes/HTML.pm

@@ -1325,15 +1325,16 @@ sub _rss ( $query, $subtitle, $posts ) {
         }
     }
 
-    return finish_render(
-        undef,
-        {
-            etag => $query->{etag},
-            contenttype => "application/xml",
-            body => encode_utf8( $rss->as_string ),
+    return Trog::Renderer->render(
+        template => 'raw.tx', 
+        data => {
+            etag   => $query->{etag},
+            body   => encode_utf8( $rss->as_string ),
             scheme => $query->{scheme},
         },
-        'Content-Disposition' => 'inline; filename="rss.xml"',
+        headers     => { 'Content-Disposition' => 'inline; filename="rss.xml"' },
+        contenttype => "text/xml",
+        code        => 200,
     );
 }
 
@@ -1395,7 +1396,12 @@ sub icon ($query) {
 # TODO make statics, abstract gzipped outputting & header handling
 sub rss_style ($query) {
     $query->{port} = ":$query->{port}" if $query->{port};
-    $query->{rss_css} = Trog::Themes::themed_style("rss.css");
+    $query->{title} = qq{<xsl:value-of select="rss/channel/title"/>};
+    $query->{no_doctype} = 1;
+
+    # Due to this being html rather than XML, we can't use an include directive.
+    $query->{header} = Trog::Renderer->render( template => 'header.tx', data => $query, contenttype => 'text/html', component => 1 );
+    $query->{footer} = Trog::Renderer->render( template => 'footer.tx', data => $query, contenttype => 'text/html', component => 1 );
 
     return Trog::Renderer->render(
         template    => 'rss-style.tx',
@@ -1403,6 +1409,7 @@ sub rss_style ($query) {
         data        => $query,
         code        => 200,
     );
+
 }
 
 sub _build_themed_styles ($styles) {
@@ -1442,7 +1449,7 @@ sub finish_render ( $template, $vars, %headers ) {
     $vars->{cachecontrol} //= $Trog::Vars::cache_control{revalidate};
 
     $vars->{code} ||= 200;
-    $vars->{theme_dir} =~ s/^\/www\///;
+    $vars->{theme_dir} =~ s/^\/www\/// if $vars->{theme_dir};
     $vars->{header} = Trog::Renderer->render( template => 'header.tx', data => $vars, contenttype => 'text/html', component => 1 );
     $vars->{footer} = Trog::Renderer->render( template => 'footer.tx', data => $vars, contenttype => 'text/html', component => 1 );
 

www/styles/rss.css

@@ -1,122 +0,0 @@
-@charset "UTF-8";
-
-:root,[data-theme=default]{
-    --color-accent:#783cb9;
-    --color-text-default:#1f303e;
-    --color-text-offset:#686c71;
-    --color-text-accent:var(--color-accent);
-    --color-text-interaction:#005aff;
-    --color-text-success:#4d7500;
-    --color-text-danger:#d22006;
-    --color-background-default:#fff;
-    --color-background-offset:#f1f3f6;
-    --color-background-success:#ddf9c7;
-    --color-background-warning:#fef2e4;
-    --color-background-danger:#fff3f2;
-    --color-background-info:#edf5ff;
-    --color-background-disabled:#e6e6e2;
-    --color-border-default:#dfe1e2;
-    --color-border-success:#7d9b4e;
-    --color-border-warning:#dd7533;
-    --color-border-danger:#e9695f;
-    --color-border-info:#4f97d1;
-    --color-focus-ring:hsla(219, 100%, 50%, 0.5);
-    --color-box-shadow:rgba(0, 0, 0, 0.1);
-    --color-backdrop:rgba(255, 255, 255, 0.6);
-}
-
-
-[data-theme=dark]{
-    color-scheme:dark;
-    --color-accent:#aacdec;
-    --color-text-default:#fff;
-    --color-text-offset:#c9c9c9;
-    --color-text-accent:var(--color-accent);
-    --color-text-interaction:#ffbe2e;
-    --color-text-success:#a3b72c;
-    --color-text-danger:#ff8d7b;
-    --color-background-default:#2d2e2f;
-    --color-background-offset:#1c1d1f;
-    --color-background-success:#3c4a29;
-    --color-background-warning:#614527;
-    --color-background-danger:#6f3331;
-    --color-background-info:#2f4668;
-    --color-background-disabled:#454540;
-    --color-border-default:#5d5d52;
-    --color-border-success:#7d9b4e;
-    --color-border-warning:#dd7533;
-    --color-border-danger:#e9695f;
-    --color-border-info:#4f97d1;
-    --color-focus-ring:#c2850c;
-    --color-box-shadow:rgba(0, 0, 0, 0.5);
-    --color-backdrop:rgba(0, 0, 0, 0.6);
-}
-html{
-    word-wrap:break-word
-}
-h1{
-    font-size:3.8rem;
-    line-height:1;
-    font-weight:800;
-    margin-bottom:4rem
-}
-h2{
-    font-size:3rem;
-    line-height:1.2;
-    font-weight:700;
-    margin-bottom:3rem
-}
-h2:not(:first-child){
-    margin-top:5.8rem
-}
-hr+h2:not(:first-child){
-    margin-top:4rem
-}
-h3{
-    font-size:2.4rem;
-    line-height:1.25;
-    font-weight:500;
-    margin-top:4.2rem;
-    margin-bottom:1.8rem
-}
-h4{
-    font-size:2rem;
-    line-height:1.35;
-    font-weight:500;
-    margin-top:3.2rem;
-    margin-bottom:1.8rem
-}
-.layout-content{
-max-width:var(--content-max-width);
-padding-inline:var(--content-horizontal-padding-xs)
-}
-@media (min-width:768px){
-.layout-content{
-padding-inline:var(--content-horizontal-padding-md)
-}
-
-dk-alert-box{
-display:block;
-margin:3rem 0;
-padding:2rem 3rem;
-border:1px solid var(--alert-border);
-border-left-width:.5rem;
-border-radius:.4rem;
-background-color:var(--alert-background)
-}
-dk-alert-box[type=info]{
---alert-border:var(--color-border-info);
---alert-background:var(--color-background-info)
-}
-dk-alert-box[type=warning]{
---alert-border:var(--color-border-warning);
---alert-background:var(--color-background-warning)
-}
-dk-alert-box[type=danger]{
---alert-border:var(--color-border-danger);
---alert-background:var(--color-background-danger)
-}
-dk-alert-box[type=success]{
---alert-border:var(--color-border-success);
---alert-background:var(--color-background-success)
-}

www/templates/html/components/header.tx

@@ -1,15 +1,17 @@
+: if (!$no_doctype) {
 <!doctype html>
+: }
 <html dir="auto" lang="<: $lang :>">
     <head>
-        <title><: $title :></title>
+        <title><: $title | mark_raw :></title>
         <meta charset="utf-8" />
 
-        <link rel="icon" type="image/svg+xml" href="<: $theme_dir :>/img/icon/favicon.svg">
-        <link rel="apple-touch-icon" type="image/png" sizes="167x167" href="<: $theme_dir :>/img/icon/favicon-167.png">
-        <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="<: $theme_dir :>/img/icon/favicon-180.png">
-        <link rel="icon" type="image/png" sizes="48x48" href="<: $theme_dir :>/img/icon/favicon-48.png">
-        <link rel="icon" type="image/png" sizes="192x192" href="<: $theme_dir :>/img/icon/favicon-192.png">
-        <link rel="manifest" href="/api/webmanifest">
+        <link rel="icon" type="image/svg+xml" href="<: $theme_dir :>/img/icon/favicon.svg" />
+        <link rel="apple-touch-icon" type="image/png" sizes="167x167" href="<: $theme_dir :>/img/icon/favicon-167.png" />
+        <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="<: $theme_dir :>/img/icon/favicon-180.png" />
+        <link rel="icon" type="image/png" sizes="48x48" href="<: $theme_dir :>/img/icon/favicon-48.png" />
+        <link rel="icon" type="image/png" sizes="192x192" href="<: $theme_dir :>/img/icon/favicon-192.png" />
+        <link rel="manifest" href="/api/webmanifest" />
 
         : if ($author) {
         <meta name="author" content="<: $author :>"/>
@@ -25,7 +27,7 @@
         <: $meta_tags | mark_raw :>
         : }
 
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width" />
         <link rel="preload" type="text/css" href="/styles/structure.css" as="style" />
         <link rel="stylesheet" type="text/css" href="/styles/structure.css" />
         <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen" />

www/templates/xml/raw.tx

@@ -0,0 +1 @@
+<: $body | mark_raw :>

www/templates/xsl/rss-style.tx

@@ -1,94 +1,36 @@
 <?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:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <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>
-          RSS Feed |
-          <xsl:value-of select="/channel:feed/channel: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="<: $rss_css :>"/>
-      </head>
-      <body>
-        <main class="layout-content">
-          <dk-alert-box type="info">
-            <strong>This is an RSS 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>
-          <div class="py-7">
-            <h1 class="flex items-start">
-              <!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg -->
-              <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
-                   class="mr-5"
-                   style="flex-shrink: 0; width: 1em; height: 1em;"
-                   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>
-              RSS Feed Preview
-            </h1>
-            <h2><: $domain :></h2>
-            <p>
-              <xsl:value-of select="/atom:feed/atom:subtitle"/>
-            </p>
-            <a>
-              <xsl:attribute name="href">
-                <xsl:value-of select="/atom:feed/atom:link[2]/@href"/>
-              </xsl:attribute>
-              Visit Website &#x2192;
-            </a>
-
-            <h2>Recent blog posts</h2>
-            <xsl:for-each select="/atom:feed/atom:entry">
-              <div class="pb-7">
-                <div class="text-4 font-bold">
-                  <a>
-                    <xsl:attribute name="href">
-                      <xsl:value-of select="atom:link/@href"/>
-                    </xsl:attribute>
-                    <xsl:value-of select="atom:title"/>
-                  </a>
-                </div>
-
-                <div class="text-2 text-offset">
-                  Published on
-                  <xsl:value-of select="substring(atom:published, 0, 11)" />
-                </div>
-              </div>
-            </xsl:for-each>
+    <: $header | mark_raw :>
+        <a>
+          <xsl:attribute name="href">
+            <xsl:value-of select="rss/channel/link"/>
+          </xsl:attribute>
+          Back to Site &#x2192;
+        </a>
+        <h3>RSS for Posts at  <xsl:value-of select="rss/channel/description"/>:</h3>
+        <xsl:for-each select="rss/channel/item">
+          <div>
+            <div>
+              <a>
+                <xsl:attribute name="href">
+                  <xsl:value-of select="link"/>
+                </xsl:attribute>
+                <xsl:value-of select="title"/>
+              </a>
+            </div>
+            <div>
+              Published on
+              <xsl:value-of select="substring(pubDate, 0, 11)" />
+              By
+              <xsl:value-of select="author" />
+            </div>
+            <div>
+             <xsl:value-of select="description" />
+            </div>
           </div>
-        </main>
-      </body>
-    </html>
+        </xsl:for-each>
+    <: $footer | mark_raw :>
   </xsl:template>
 </xsl:stylesheet>