rss: style feed

mimecuvalo · Nov 5, 2023 · 910e4cf · 910e4cf
1 parent ea335d6
commit 910e4cf
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 3 deletions.
diff --git a/components/ItemWrapper.tsx b/components/ItemWrapper.tsx
@@ -87,8 +87,8 @@ const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
 `;
 
 const ItemWrapper = forwardRef(({ children, className }: { children: JSX.Element; className?: string }, ref) => {
-  // @ts-ignore this is fine.
   return (
+    // @ts-ignore this is fine.
     <StyledItemWrapper ref={ref} className={className}>
       {children}
     </StyledItemWrapper>

diff --git a/pages/api/social/feed.tsx b/pages/api/social/feed.tsx
@@ -16,7 +16,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const feed = await getLocalLatestContent(req.query.resource as string);
 
   let renderedTree =
-    `<?xml version='1.0' encoding='UTF-8'?>` +
+    `<?xml version="1.0" encoding="UTF-8"?>\n` +
+    `<?xml-stylesheet href="/rss.xsl" type="text/xsl"?>\n` +
     renderToString(<ContentFeed req={req} feed={feed} contentOwner={contentOwner} />);
   // XXX(mime): in the feeds I have some attributes that are `ref`. However, ref isn't allowed in React,
   // so in the DOM they are `refXXX`. Return them to normal here, sigh.
@@ -144,7 +145,7 @@ function Entry({ content, req }: { content: Content; req: NextApiRequest }) {
 
   return (
     <entry>
-      <title>{content.title}</title>
+      <title>{content.title || '(untitled)'}</title>
       <link href={contentUrl(content, req)} />
       <id>{contentUrl(content, req)}</id>
       <content type="html" dangerouslySetInnerHTML={{ __html: html }} />

diff --git a/public/rss.xsl b/public/rss.xsl
@@ -0,0 +1,156 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Inspired from https://darekkay.com/blog/rss-styling -->
+<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>RSS Feed | <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"/>
+        <style>
+          *,
+          ::after,
+          ::before {
+            box-sizing: border-box;
+          }
+
+          html {
+            font-size: 10px;
+          }
+
+          body {
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
+            font-size: 1.8rem;
+            line-height: 1.5;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            color: #1f303e;
+            margin: 0;
+          }
+
+          main {
+            max-width: 800px;
+            width: 100%;
+            margin: 4rem auto;
+            padding-inline: 2.5rem;
+          }
+
+          a {
+            color: #005aff;
+            text-decoration: none;
+            text-underline-offset: 0.3rem;
+          }
+
+          a:hover {
+            text-decoration: underline;
+          }
+
+          h1 {
+            text-wrap: balance;
+            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;
+          }
+
+          alert-box {
+            display: block;
+            margin: 3rem 0;
+            padding: 2rem 3rem;
+            border: 1px solid #4f97d1;
+            border-left-width: .5rem;
+            border-radius: .4rem;
+            background-color: #edf5ff;
+          }
+        </style>
+      </head>
+      <body>
+        <main>
+          <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.
+          </alert-box>
+          <div style="padding-top: 3rem; padding-bottom: 3rem">
+            <h1 style="display: flex; align-items: flex-start">
+              <!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg -->
+              <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+                   style="margin-right: 1.5rem; 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>nightlight.rocks</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 style="padding-bottom: 3rem">
+                <div style="font-size: 1.8rem; line-height: 1.5; font-weight: bold">
+                  <a>
+                    <xsl:attribute name="href">
+                      <xsl:value-of select="atom:link/@href"/>
+                    </xsl:attribute>
+                    <xsl:value-of select="atom:title"/>
+                  </a>
+                </div>
+
+                <div style="font-size: 1.4rem; line-height: 1.6; color: #686c71">
+                  Published on
+                  <xsl:value-of select="substring(atom:published, 0, 11)" />
+                </div>
+              </div>
+            </xsl:for-each>
+          </div>
+        </main>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>