From d028a1f8da16ab2e88a84b2a283ef4419f0945d6 Mon Sep 17 00:00:00 2001
From: afterlifepro <vielle.dev@proton.me>
Date: Sun, 24 Aug 2025 22:07:52 +0100
Subject: [PATCH] Add a header to the RSS page

good god if the experimental astro container api ever deprecates im cooked lmfao
---
 src/components/Header.astro |   1 +
 src/pages/rss.style.xml.ts  | 132 +++++++++++++++++++++++++++++++++++-
 2 files changed, 131 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index c45cd13..301a132 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -66,6 +66,7 @@ const strToX = <I,>(
 </header>
 
 <style>
+  /* UPDATE RSS STYLE XML WHEN YOU CHANGE THESE */
   header {
     border-image: var(--box-blr-png) 10 fill / 20px / 20px round;
     margin: 0 20px 20px;
diff --git a/src/pages/rss.style.xml.ts b/src/pages/rss.style.xml.ts
index e6f4f89..799453a 100644
--- a/src/pages/rss.style.xml.ts
+++ b/src/pages/rss.style.xml.ts
@@ -1,10 +1,25 @@
 import BoxTlbr from "/assets/box-tlbr.png";
-import Hr from "/assets/hr.png";
 import Box4x3Mask from "/assets/box-4x3-mask.png";
+import { experimental_AstroContainer } from "astro/container";
+import Header from "/components/Header.astro";
+
+const header = await experimental_AstroContainer
+  .create()
+  .then((x) => x.renderToString(Header))
+  .then((x) =>
+    // match data-astro-cid attributes where there no value
+    // this is because xml hates boolean attributes for some reason. :(
+    x.replaceAll(/data-astro-cid-[a-zA-Z0-9]*(?!=["'])/gm, (m) => m + '=""'),
+  )
+  .then((x) =>
+    // match wbr tags (with data astro cid) and close em
+    x.replaceAll(/<wbr data-astro-cid-[a-zA-Z0-9]*="">/gm, (m) => m + "</wbr>"),
+  );
 
 export async function GET() {
   return new Response(
     `
+<!DOCTYPE XSL [ <!ENTITY shy "­"> ]>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:output method="html" />
 
@@ -26,10 +41,20 @@ export async function GET() {
 
           html,
           body {
+            min-width: 30ch;
+          }
+            
+          .blog {
             width: 30ch;
             margin: auto;
           }
 
+          .intro {
+            max-width: 60ch;
+            padding-inline: 20px;
+            margin: 20px auto;
+          }
+
           img,
           svg,
           iframe,
@@ -66,13 +91,116 @@ export async function GET() {
           a:active {
             text-decoration-style: dashed;
           }
+
+          /* from Header.astro */
+          header {
+            border-image: var(--box-blr-png) 10 fill / 20px / 20px round;
+            margin: 0 20px 20px;
+            padding: 10px 20px;
+            height: 3rem; /* 2rem * 1.5 */
+            /* render over feed bg */
+            z-index: 2;
+
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            @media (max-width: 650px) {
+              flex-direction: column;
+              align-items: start;
+              height: 4.5rem; /* (2rem + 1rem) * 1.5 */
+
+              nav {
+                margin-inline: auto;
+                contain: inline-size;
+                width: 100%;
+                overflow: auto;
+                scrollbar-width: thin;
+              }
+
+              h1 {
+                width: 100%;
+                text-align: center;
+              }
+            }
+
+            &amp; > nav > ul {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: start;
+              gap: 10px;
+              z-index: 999;
+              width: fit-content;
+              margin-inline: auto;
+
+              &amp; > li {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: 10px;
+
+                &amp;::marker {
+                  content: none;
+                }
+
+                &amp; + &amp;::before {
+                  content: "";
+                  background-image: var(--dot-png);
+                  background-size: contain;
+                  width: 9px;
+                  height: 9px;
+                  display: block;
+                }
+              }
+            }
+          }
+
+          nav > ul > li:last-child > details > ul {
+            right: 10px;
+          }
+
+          details {
+            summary {
+              cursor: pointer;
+              text-wrap: nowrap;
+            }
+
+            &amp; > ul {
+              position: absolute;
+              z-index: 99999;
+
+              @media (max-width: 650px) {
+                inset: auto 15px;
+              }
+
+              margin-top: 10px;
+              padding: 20px;
+              padding-left: 40px;
+              &amp; ul {
+                margin-left: 10px;
+              }
+
+              border-image: var(--box-tlbr-png) 10 fill / 20px round;
+            }
+          }
+
+          header h1 {
+            margin-block: 0;
+            position: sticky;
+            inset: 0;
+          }
         </style>
       </head>
 
       <body>
-        <section class="blog">
+        ${header}
+        <section class="intro">
           <h1>Blog Posts</h1>
           <p>If you want to use this page in your RSS reader, simply paste this page's URL in and it'll just work. To view the original RSS, view the page source. The styling of this page is made possible by <a href="https://developer.mozilla.org/en-US/docs/Web/XML/XSLT" target="_blank">XSLT</a></p>
+        </section>
+        <section class="blog">
           <xsl:for-each select="/rss/channel/item">
             <a target="_blank">
               <xsl:attribute name="href">
-- 
2.51.2