fix(front): refactor RSS feed encoding, structure, and include thumbn…

…ail and hero (#1241) Closes: #1241
dgrebb · Feb 17, 2024 · eb52fde · eb52fde
1 parent 6ac268b
commit eb52fde
Showing 1 changed file with 50 additions and 42 deletions.
diff --git a/front/src/lib/_utils/rss.js b/front/src/lib/_utils/rss.js
@@ -6,47 +6,55 @@ const feedDescription = 'Thoughts, learnings, and updates from Dan Grebb.';
 const feedLink = 'https://www.dgrebb.com';
 const feedUpdated = new Date();
 
-export const xml = (posts) => `<?xml version="1.0" encoding="utf-8"?>
-  <feed xmlns="http://www.w3.org/2005/Atom">
-    <title>${feedTitle}</title>
-    <link href="${feedLink}/RSS.xml" rel="self"/>
-    <link href="${feedLink}"/>
-    <id>${feedLink}/</id>
-    <updated>${feedUpdated.toISOString()}</updated>
-    <author>
-      <name>Dan Grebb</name>
-    </author>
-    <subtitle>${feedDescription}</subtitle>
-    <generator>JavaScript</generator>
-${posts
-  .map((post) => {
-    const { slug, publishedAt, summary } = post.attributes;
+export const xml = (posts) => `<?xml version="1.0" encoding="UTF-8"?>
+  <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
+    <channel xmlns="http://www.w3.org/2005/Atom">
+      <title>${feedTitle}</title>
+      <link href="${feedLink}/RSS.xml" rel="self"/>
+      <link href="${feedLink}"/>
+      <id>${feedLink}/</id>
+      <updated>${feedUpdated.toISOString()}</updated>
+      <author>
+        <name>Dan Grebb</name>
+      </author>
+      <subtitle>${feedDescription}</subtitle>
+      <generator>JavaScript</generator>
+  ${posts
+    .map((post) => {
+      const { slug, publishedAt, summary } = post.attributes;
 
-    const image =
-      post?.attributes?.hero?.data?.attributes?.formats?.thumbnail?.url ||
-      false;
+      const image =
+          post?.attributes?.hero?.data?.attributes?.formats?.small?.url ||
+          false,
+        thumbnail =
+          post?.attributes?.hero?.data?.attributes?.formats?.thumbnail?.url ||
+          false,
+        imageMIME = post?.attributes?.hero?.data?.attributes?.mime || false,
+        imageAlt =
+          post?.attributes?.hero?.data?.attributes.alternativeText || false;
 
-    const { altText } = post?.attributes?.hero?.data?.attributes || false;
-
-    return `<entry>
-        <title>${post.attributes.title}</title>
-        <link href="${website}${path}/${slug}/"/>
-        <id>${website}${path}/${slug}/</id>
-        <updated>${new Date(publishedAt).toISOString()}</updated>
-        <published>${new Date(publishedAt).toISOString()}</published>
-        ${
-          summary ? `<content type="html"><![CDATA[${summary}]]></content>` : ''
-        }
-        ${
-          image
-            ? `<image>
-                <url>${image}</url>
-                <title>${altText}</title>
-                <link>${slug}</link>
-              </image>`
-            : ''
-        }
-      </entry>`;
-  })
-  .join('\n')}
-  </feed>`;
+      return `<item>
+          <title>${post.attributes.title.replace('&', '&amp;')}</title>
+          <link href="${website}${path}/${slug}/"/>
+          <id>${website}${path}/${slug}/</id>
+          <updated>${new Date(publishedAt).toISOString()}</updated>
+          <published>${new Date(publishedAt).toISOString()}</published>
+          ${
+            summary &&
+            `
+              <description>
+                <![CDATA[
+                  <div style="text-align: center;">
+                    <img src="${image}" alt="${imageAlt}" style="display: inline-block;" />
+                  </div>
+                  <p>${summary}</p>
+                ]]>
+              </description>`
+          }
+          ${thumbnail && `<enclosure url="${thumbnail}" type="${imageMIME}" />`}
+        </item>`;
+    })
+    .join('\n')}
+  </channel>
+  </rss>
+`;