feat: formatted + cleaned up feeds

2024-08-10 14:32:59 -07:00 · 2024-08-10 14:32:59 -07:00 · 7934cc3581
commit 7934cc3581
parent 74279cf2d5
16 changed files with 367 additions and 33 deletions
--- a/config/collections/index.js
+++ b/config/collections/index.js
@ -110,9 +110,9 @@ export const processContent = (collection) => {
        // link to artist concerts section if available - artistUrl is only present on concert objects here
        if (item?.['artistUrl']) content['url'] = `${item['artistUrl']}#concerts`
        if (item?.['description']) {
-          content['description'] = `${item['description'].split(' ').slice(0, 25).join(' ')}...<br/><br/>`
+          content['description'] = `${item['description'].split(' ').slice(0, 25).join(' ')}...`
        } else if (item?.['notes']) {
-          content['notes'] = `${item['notes'].split(' ').slice(0, 25).join(' ')}...<br/><br/>`
+          content['notes'] = `${item['notes'].split(' ').slice(0, 25).join(' ')}...`
        } else {
          content['description'] = ''
        }
--- a/config/filters/index.js
+++ b/config/filters/index.js
@ -131,7 +131,7 @@ export default {
        url = entry.link
      }
      if (entry.description) excerpt = entry.description
-      if (entry.type === 'book' || entry.type === 'movie' || entry.type === 'link') excerpt = `${entry.description}<br/><br/>`
+      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}`, {
        disallowedTagsMode: 'completelyDiscard'
      })
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "coryd.dev",
-  "version": "21.8.2",
+  "version": "21.9.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "coryd.dev",
-      "version": "21.8.2",
+      "version": "21.9.0",
      "license": "MIT",
      "dependencies": {
        "@cdransf/api-text": "^1.4.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "coryd.dev",
-  "version": "21.8.2",
+  "version": "21.9.0",
  "description": "The source for my personal site. Built using 11ty (and other tools).",
  "type": "module",
  "scripts": {
--- a/src/assets/styles/feed.xsl
+++ b/src/assets/styles/feed.xsl
@ -0,0 +1,332 @@
+<?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: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><xsl:value-of select="/rss/channel/title"/></title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
+        <style type="text/css">
+          @font-face {
+            font-family: 'MonoLisa';
+            src: url('/assets/fonts/MonoLisa.min.woff2') format('woff2');
+            font-display: optional
+          }
+
+          :root {
+            --sizing-xs: .25rem;
+            --sizing-sm: .5rem;
+            --sizing-md: .75rem;
+            --sizing-lg: 1rem;
+            --sizing-base: 1.5rem;
+            --sizing-xl: 1.75rem;
+            --sizing-2xl: 2rem;
+            --sizing-3xl: 2.25rem;
+
+            --font-mono: 'MonoLisa', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
+
+            --blue-50: #eff5ff;
+            --blue-100: #e2ecff;
+            --blue-200: #c5d8ff;
+            --blue-300: #a8c4ff;
+            --blue-400: #7aa6ff;
+            --blue-500: #4b88ff;
+            --blue-600: #3168e9;
+            --blue-700: #2458d4;
+            --blue-800: #1d4bac;
+            --blue-900: #1c3e91;
+            --blue-950: #183275;
+
+            --gray-50: #f6f7f8;
+            --gray-100: #eceef1;
+            --gray-200: #dfe3e8;
+            --gray-300: #c5ccd5;
+            --gray-400: #adb4c0;
+            --gray-500: #959eae;
+            --gray-600: #7f899b;
+            --gray-700: #707b8e;
+            --gray-800: #626d7f;
+            --gray-900: #545e71;
+            --gray-950: #4a5365;
+            --gray-darkest: #1a1d22;
+
+            --white: #fff;
+            --black: #000;
+
+            --gray-light: var(--gray-200);
+            --gray-lighter: var(--gray-100);
+            --gray-dark: var(--gray-950);
+
+            --accent-color: var(--blue-600);
+            --accent-color-hover: var(--blue-800);
+            --color-lightest: var(--gray-50);
+            --color-darkest: var(--gray-darkest);
+
+            --text-color: var(--color-darkest);
+            --background-color: var(--color-lightest);
+            --border-color: var(--gray-200);
+
+            --code-bg-color: #1a1d22;
+            --code-text-color: #f6f7f8;
+
+            --font-size-xs: .7rem;
+            --font-size-sm: .85rem;
+            --font-size-base: 1rem;
+            --font-size-lg: 1.15rem;
+            --font-size-xl: 1.3rem;
+            --font-size-2xl: 1.45rem;
+            --font-size-3xl: 1.6rem;
+
+            --font-weight-base: 400;
+            --font-weight-bold: 600;
+            --font-weight-extrabold: 800;
+          }
+
+          @media (prefers-color-scheme: dark) {
+            :root {
+              --gray-light: var(--gray-800);
+              --gray-lighter: var(--gray-900);
+              --gray-dark: var(--gray-200);
+              --text-color: var(--color-lightest);
+              --background-color: var(--color-darkest);
+              --accent-color: var(--blue-400);
+              --accent-color-hover: var(--blue-200);
+              --border-color: var(--gray-800);
+            }
+          }
+
+          ::-moz-selection {
+            color: var(--color-lightest);
+            background: var(--accent-color);
+          }
+
+          ::selection {
+            color: var(--color-lightest);
+            background: var(--accent-color);
+          }
+
+          ::-webkit-scrollbar {
+            width: var(--sizing-xs);
+            height: var(--sizing-xs);
+          }
+
+          body {
+            font-family: var(--font-mono);
+            font-size: var(--font-size-base);
+            font-weight: var(--font-weight-base);
+            line-height: 2;
+            letter-spacing: -.05rem;
+            word-spacing: -.125rem;
+            color: var(--text-color);
+            background-color: var(--background-color);
+          }
+
+          html {
+            font-size: 100%;
+            -webkit-text-size-adjust: none;
+          }
+
+          .main-wrapper {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+          }
+
+          main {
+            flex: 1 1 0%;
+            width: 80%;
+            margin-left: auto;
+            margin-right: auto;
+          }
+
+          .default-wrapper {
+            padding-top: var(--sizing-2xl);
+          }
+
+          .default-wrapper > p:first-of-type {
+            margin-top: 0;
+          }
+
+          .main-title {
+            padding-top: var(--sizing-3xl);
+          }
+
+          .main-title h1 {
+            font-weight: var(--font-weight-extrabold);
+            margin: 0;
+            padding: 0;
+          }
+
+          .main-title h1 a {
+            text-decoration: none;
+          }
+
+          h1 { font-size: var(--font-size-2xl); }
+          h2 { font-size: var(--font-size-xl); }
+          h3 { font-size: var(--font-size-lg); }
+
+          h1, h2, h3 {
+            font-weight: var(--font-weight-bold);
+            line-height: 1.5;
+            margin-bottom: var(--sizing-base);
+          }
+
+          a {
+            color: var(--accent-color);
+            text-decoration: none;
+          }
+
+          a:focus,
+          a:focus-within {
+            outline: 2px dashed var(--accent-color);
+            text-decoration: none;
+          }
+
+          a:hover,
+          a:focus,
+          a:active {
+            color: var(--accent-color-hover);
+            transition-property: color;
+            transition-timing-function: var(--transition-ease-in-out);
+            transition-duration: var(--transition-duration-default);
+          }
+
+          .date {
+            margin: 0;
+            color: var(--gray-dark);
+            font-size: var(--font-size-sm);
+          }
+
+          .item {
+            padding: var(--sizing-base) 0;
+            border-bottom: 1px solid var(--border-color);
+          }
+
+          .item h3 {
+            margin-top: 0;
+            margin-bottom: var(--sizing-base);
+          }
+
+          .item p:first-of-type {
+            margin-top: 0;
+          }
+
+          .item:first-of-type {
+            padding-top: 0;
+          }
+
+          .item:last-of-type {
+            border-bottom: 0;
+          }
+
+          .description {
+            margin-bottom: var(--sizing-base);
+          }
+
+          p {
+            margin-bottom: var(--sizing-base)
+          }
+
+          p a {
+            text-decoration: underline;
+            text-decoration-line: underline;
+            text-decoration-style: dashed;
+            text-underline-offset: var(--sizing-xs);
+          }
+
+          p:last-of-type {
+            margin-bottom: 0;
+          }
+
+          hr {
+            height: 1px;
+            background-color: var(--border-color);
+            border: 0;
+            margin: var(--sizing-base) 0;
+          }
+
+          .highlight-text {
+            color: var(--color-lightest);
+            background-color: var(--accent-color);
+            padding: var(--sizing-xs);
+          }
+
+          pre {
+            background-color: var(--code-bg-color);
+            color: var(--code-text-color);
+            padding: var(--sizing-base);
+            border: 1px solid var(--border-color);
+            overflow: auto;
+            margin: var(--sizing-base) 0;
+            font-family: var(--font-mono);
+            font-size: var(--body-font-size);
+          }
+
+          code {
+            background-color: var(--code-bg-color);
+            color: var(--code-text-color);
+            padding: 2px 4px;
+            border-radius: 3px;
+            font-family: var(--font-mono);
+          }
+
+          pre code {
+            padding: 0;
+            background: none;
+            border: none;
+          }
+
+          pre.small {
+            padding: var(--sizing-md);
+          }
+
+          @media screen and (min-width: 768px) {
+            h1 { font-size: var(--font-size-3xl); }
+            h2 { font-size: var(--font-size-2xl); }
+            h3 { font-size: var(--font-size-xl); }
+
+            main {
+              max-width: 768px;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <div class="main-wrapper">
+          <main>
+            <section class="main-title">
+              <h1><a href="/feeds" tabindex="0"><xsl:value-of select="/rss/channel/title"/></a></h1>
+            </section>
+            <div class="default-wrapper">
+              <p><xsl:value-of select="/rss/channel/description"/></p>
+              <p><a href="/feeds">View more of the feeds from my site.</a> <strong class="highlight-text">Or subscribe by adding the URL below to your feed reader of choice.</strong></p>
+              <p>
+                <pre class="small">
+                  <code><xsl:value-of select="/rss/channel/feedUrl"/></code>
+                </pre>
+              </p>
+              <hr />
+              <section>
+                <xsl:for-each select="/rss/channel/item">
+                  <div class="item">
+                    <p class="date">Published: <xsl:value-of select="pubDate"/></p>
+                    <h3>
+                      <a>
+                        <xsl:attribute name="href">
+                          <xsl:value-of select="link"/>
+                        </xsl:attribute>
+                        <xsl:value-of select="title"/>
+                      </a>
+                    </h3>
+                    <xsl:value-of select="description" disable-output-escaping="yes"/>
+                  </div>
+                </xsl:for-each>
+              </section>
+            </div>
+          </main>
+        </div>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
--- a/src/includes/partials/feeds/rss.liquid
+++ b/src/includes/partials/feeds/rss.liquid
@ -1,31 +1,33 @@
 <?xml version="1.0" encoding="UTF-8" ?>
+<?xml-stylesheet href="/assets/styles/feed.xsl" type="text/xsl" ?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <atom:link href="{{ permalink | absoluteUrl: globals.url }}" rel="self" type="application/rss+xml" />
+    <feedUrl>{{ permalink | absoluteUrl: globals.url }}</feedUrl>
    {%- assign entries = data | normalizeEntries: 20 -%}
-    <title>{{ title }}</title>
-    <description>{{ description }}</description>
+    <title><![CDATA[{{ title }}]]></title>
+    <description><![CDATA[{{ description }}]]></description>
    <link>{{ permalink | absoluteUrl: globals.url }}</link>
    <lastBuildDate>{{ updated | stringToRFC822Date }}</lastBuildDate>
    <image>
-      <title>{{ title }}</title>
+      <title><![CDATA[{{ title }}]]></title>
      <link>{{ permalink | absoluteUrl: globals.url }}</link>
-      <url>https://cdn.coryd.dev/{{ globals.feed_image }}?class=w200&v={% appVersion %}</url>
+      <url>{{ "https://cdn.coryd.dev/" | append: globals.feed_image | append: "?class=w200&amp;v=" | append: appVersion }}</url>
      <width>144</width>
      <height>144</height>
    </image>
    {% for entry in entries -%}
      {%- assign rating = entry.rating -%}
      {%- capture entryTitle -%}
-        {{ entry.title | escape }}
+        {{ entry.title }}
        {%- if entry.authors %} via {{ entry.authors.name }}{%- endif -%}
        {%- if rating %} ({{ rating }}){%- endif -%}
      {%- endcapture -%}
      <item>
-        <title>{{ entryTitle }}</title>
+        <title><![CDATA[{{ entryTitle }}]]></title>
        <link>{{ entry.url | encodeAmp }}</link>
        <pubDate>{{ entry.date | stringToRFC822Date }}</pubDate>
-        <guid>{{ entry.url | encodeAmp }}</guid>
+        <guid isPermaLink="false">{{ entry.url | encodeAmp }}</guid>
        <description>{{ entry.excerpt | escape }}</description>
      </item>
    {%- endfor %}
--- a/src/pages/feeds/json/all.liquid
+++ b/src/pages/feeds/json/all.liquid
@ -5,8 +5,8 @@ permalink: "/feeds/all.json"
 ---
 {% render "partials/feeds/json.liquid"
  permalink:"/feeds/all"
-  title:"Cory Dransfeldt: all activity"
-  description:"All of the posts and activity from my site."
+  title:"All activity / Cory Dransfeldt"
+  description:globals.site_description
  data:collections.allContent
  updated:collections.allContent[0].date
  site:site
--- a/src/pages/feeds/json/books.liquid
+++ b/src/pages/feeds/json/books.liquid
@ -6,8 +6,8 @@ permalink: "/feeds/books.json"
 {%- assign bookData = books.all | bookStatus: 'finished' | bookSortDescending -%}
 {% render "partials/feeds/json.liquid"
  permalink:"/feeds/books"
-  title:"Cory Dransfeldt: books"
-  description:"Books I'm currently reading."
+  title:"Books / Cory Dransfeldt"
+  description:globals.site_description
  data:bookData
  updated:bookData[0].date
  site:site
--- a/src/pages/feeds/json/feed.liquid
+++ b/src/pages/feeds/json/feed.liquid
@ -5,8 +5,8 @@ permalink: "/feeds/posts.json"
 ---
 {% render "partials/feeds/json.liquid"
  permalink:"/feeds/posts"
-  title:"Cory Dransfeldt"
-  description:"Posts from my site."
+  title:"Posts / Cory Dransfeldt"
+  description:globals.site_description
  data:posts
  updated:posts[0].date
  site:site
--- a/src/pages/feeds/json/links.liquid
+++ b/src/pages/feeds/json/links.liquid
@ -5,8 +5,8 @@ permalink: "/feeds/links.json"
 ---
 {% render "partials/feeds/json.liquid"
  permalink:"/feeds/links"
-  title:"Cory Dransfeldt: links"
-  description:"Links I've liked."
+  title:"Links / Cory Dransfeldt"
+  description:globals.site_description
  data:links
  updated:links[0].date
  site:site
--- a/src/pages/feeds/json/movies.liquid
+++ b/src/pages/feeds/json/movies.liquid
@ -5,8 +5,8 @@ permalink: "/feeds/movies.json"
 ---
 {% render "partials/feeds/json.liquid"
  permalink:"/feeds/movies"
-  title:"Cory Dransfeldt: movies"
-  description:"Movies I've watched recently."
+  title:"Movies / Cory Dransfeldt"
+  description:globals.site_description
  data:movies.recentlyWatched
  updated:movies.recentlyWatched[0].lastWatched
  site:site
--- a/src/pages/feeds/rss/all.liquid
+++ b/src/pages/feeds/rss/all.liquid
@ -5,8 +5,8 @@ permalink: "/feeds/all"
 ---
 {% render "partials/feeds/rss.liquid"
  permalink:"/feeds/all"
-  title:"Cory Dransfeldt: all activity"
-  description:"All of the posts and activity from my site."
+  title:"All activity / Cory Dransfeldt"
+  description:globals.site_description
  data:collections.allContent
  updated:collections.allContent[0].date
  site:site
--- a/src/pages/feeds/rss/books.liquid
+++ b/src/pages/feeds/rss/books.liquid
@ -6,8 +6,8 @@ permalink: "/feeds/books"
 {%- assign bookData = books.all | bookStatus: 'finished' | bookSortDescending -%}
 {% render "partials/feeds/rss.liquid"
  permalink:"/feeds/books"
-  title:"Cory Dransfeldt: books"
-  description:"Books I'm currently reading."
+  title:"Books / Cory Dransfeldt"
+  description:globals.site_description
  data:bookData
  updated:bookData[0].date
  site:site
--- a/src/pages/feeds/rss/feed.liquid
+++ b/src/pages/feeds/rss/feed.liquid
@ -5,8 +5,8 @@ permalink: "/feeds/posts"
 ---
 {% render "partials/feeds/rss.liquid"
  permalink:"/feeds/posts"
-  title:"Cory Dransfeldt"
-  description:"Posts from my site."
+  title:"Posts / Cory Dransfeldt"
+  description:globals.site_description
  data:posts
  updated:posts[0].date
  site:site
--- a/src/pages/feeds/rss/links.liquid
+++ b/src/pages/feeds/rss/links.liquid
@ -5,8 +5,8 @@ permalink: "/feeds/links"
 ---
 {% render "partials/feeds/rss.liquid"
  permalink:"/feeds/links"
-  title:"Cory Dransfeldt: links"
-  description:"Links I've liked."
+  title:"Links / Cory Dransfeldt"
+  description:globals.site_description
  data:links
  updated:links[0].date
  site:site
--- a/src/pages/feeds/rss/movies.liquid
+++ b/src/pages/feeds/rss/movies.liquid
@ -5,8 +5,8 @@ permalink: "/feeds/movies"
 ---
 {% render "partials/feeds/rss.liquid"
  permalink:"/feeds/movies"
-  title:"Cory Dransfeldt: movies"
-  description:"Movies I've watched recently."
+  title:"Movies / Cory Dransfeldt"
+  description:globals.site_description
  data:movies.recentlyWatched
  updated:movies.recentlyWatched[0].lastWatched
  site:site