chore: add images to feed entries if available

config/filters/index.js

@@ -121,36 +121,40 @@ export default {
       let excerpt = ''
       let url = ''
       let author
-      let title = entry.title
+      let title = entry['title']
+      let image = entry['image']
       const feedNote = '<hr/><p>This is a full text feed, but not all content can be rendered perfectly within the feed. If something looks off, feel free to <a href="https://coryd.dev">visit my site</a> for the original post.</p>'
 
-      if (entry.url?.includes('http')) url = entry.url
-      if (!entry.url?.includes('http')) url = new URL(entry.url, BASE_URL).toString()
-      if (entry?.slug) url = new URL(entry.slug, BASE_URL).toString()
-      if (entry?.link) {
-        title = `${entry.title} via ${entry.authors.name}`
-        url = entry.link,
+      if (entry['url']?.includes('http')) url = entry.url
+      if (!entry['url']?.includes('http')) url = new URL(entry['url'], BASE_URL).toString()
+      if (entry?.['slug']) url = new URL(entry['slug'], BASE_URL).toString()
+      if (entry?.['link']) {
+        title = `${entry['title']} via ${entry['authors']['name']}`
+        url = entry['link'],
         author = {
-          name: entry.authors.name,
-          url: entry.authors.url,
-          mastodon: entry.authors?.mastodon || '',
-          rss: entry.authors?.rss_feed || ''
+          name: entry['authors']['name'],
+          url: entry['authors']['url'],
+          mastodon: entry['.authors']?.['mastodon'] || '',
+          rss: entry['authors']?.['rss_feed'] || ''
         }
       }
-      if (entry.description) excerpt = entry.description
-      if (entry.type === 'book' || entry.type === 'movie' || entry.type === 'link') excerpt = `${entry.description}`
-      if (entry?.slug && entry.content) excerpt = sanitizeHtml(`${md.render(entry.content)}${feedNote}`, {
+      if (entry['description']) excerpt = entry['description']
+      if (entry['type'] === 'book' || entry['type'] === 'movie' || entry['type'] === 'link') excerpt = sanitizeHtml(`${md.render(entry.description)}`)
+      if (entry?.['slug'] && entry['content']) excerpt = sanitizeHtml(`${md.render(entry['content'])}${feedNote}`, {
         disallowedTagsMode: 'completelyDiscard'
       })
 
+      if (entry['backdrop']) image = entry['backdrop']
+
       if (entry) posts.push({
         title: title.trim(),
         url,
-        content: entry.description,
+        image,
+        content: entry['description'],
         date,
         excerpt,
-        rating: entry?.rating || '',
-        tags: entry?.tags || '',
+        rating: entry?.['rating'] || '',
+        tags: entry?.['tags'] || '',
         author
       })
     })
@@ -164,41 +168,41 @@ export default {
       let normalized = {
         image: item['image'],
         url: item['url'],
-        type: item.type
+        type: item['type']
       }
-      if (item.type === 'artist') {
+      if (item['type'] === 'artist') {
         normalized['title'] = item['title']
         normalized['alt'] = `${item['plays']} plays of ${item['title']}`
         normalized['subtext'] = `${item['plays']} plays`
       }
-      if (item.type === 'album') {
+      if (item['type'] === 'album') {
         normalized['title'] = item['title']
         normalized['alt'] = `${item['title']} by ${item['artist']}`
         normalized['subtext'] = `${item['artist']}`
       }
-      if (item.type === 'album-release') {
+      if (item['type'] === 'album-release') {
         normalized['title'] = item['title']
         normalized['alt'] = `${item['title']} by ${item['artist']}`
         normalized['subtext'] = `${item['artist']} / ${item['date']}`
       }
-      if (item.type === 'movie') {
+      if (item['type'] === 'movie') {
         normalized['title'] = item['title']
         normalized['alt'] = item['title']
         normalized['rating'] = item['rating']
         normalized['favorite'] = item['favorite']
         normalized['subtext'] = `${item['rating']} (${item['year']})`
       }
-      if (item.type === 'book') {
+      if (item['type'] === 'book') {
         normalized['title'] = `${item['title']} by ${item['author']}`
         normalized['rating'] = item['rating']
         if (item['rating']) normalized['subtext'] = item['rating']
       }
-      if (item.type === 'tv') {
+      if (item['type'] === 'tv') {
         normalized['title'] = item['name']
         normalized['alt'] = `${item['subtext']} of ${item['name']}`
         normalized['subtext'] = item['subtext']
       }
-      if (item.type === 'tv-range') {
+      if (item['type'] === 'tv-range') {
         normalized['title'] = item['name']
         normalized['alt'] = `${item['subtext']} from ${item['name']}`
         normalized['subtext'] = item['subtext']

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "22.1.6",
+  "version": "22.1.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "22.1.6",
+      "version": "22.1.7",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "22.1.6",
+  "version": "22.1.7",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/styles/feed.xsl

@@ -75,6 +75,9 @@
             --font-weight-base: 400;
             --font-weight-bold: 600;
             --font-weight-extrabold: 800;
+
+            /* borders */
+            --border-default: 1px solid var(--accent-color);
           }
 
           @media (prefers-color-scheme: dark) {
@@ -134,6 +137,14 @@
             margin-right: auto;
           }
 
+          main footer {
+            margin-bottom: var(--sizing-base);
+          }
+
+          main footer hr {
+            margin-top: 0;
+          }
+
           .default-wrapper {
             padding-top: var(--sizing-2xl);
           }
@@ -214,8 +225,12 @@
             border-bottom: 0;
           }
 
-          .description {
-            margin-bottom: var(--sizing-base);
+          .item img {
+            border: var(--border-default);
+            width: 100%;
+            height: auto;
+            display: block;
+            margin-top: var(--sizing-base);
           }
 
           p {
@@ -329,10 +344,17 @@
                       </a>
                     </h3>
                     <xsl:value-of select="description" disable-output-escaping="yes"/>
+                    <xsl:if test="enclosure">
+                      <img src="{enclosure/@url}" alt="{title}" />
+                    </xsl:if>
                   </div>
                 </xsl:for-each>
               </section>
             </div>
+            <footer>
+              <hr />
+              <p>Subscribe by adding <code><xsl:value-of select="rss/channel/atom:link/@href"/></code> to your feed reader of choice.</p>
+            </footer>
           </main>
         </div>
       </body>

src/includes/partials/feeds/rss.liquid

@@ -27,6 +27,9 @@
         <link>{{ entry.url | encodeAmp }}</link>
         <pubDate>{{ entry.date | stringToRFC822Date }}</pubDate>
         <guid isPermaLink="false">{{ entry.url | encodeAmp }}</guid>
+        {%- if entry.image -%}
+          <enclosure url="https://cdn.coryd.dev{{ entry.image }}?class=w800" type="image/jpeg" />
+        {%- endif -%}
         <description>{{ entry.excerpt | escape }}</description>
       </item>
     {%- endfor %}