chore: same styles for site + feeds; clean up unused param; send reviews not description in dedicated movies/books feeds

config/filters/feeds.js

@@ -39,7 +39,7 @@ export default {
     entryData.forEach((entry) => {
       const md = mdGenerator()
       const dateKey = Object.keys(entry).find(key => key.includes('date'))
-      let { artist, authors, backdrop, content, description, image, link, rating, slug, title, url, tags, type  } = entry
+      let { artist, authors, backdrop, content, description, image, link, rating, review, slug, title, url, tags, type  } = entry
       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>'
       const processedEntry = { title: title.trim(), date: new Date(entry[dateKey]), content: description }
 
@@ -54,10 +54,15 @@ export default {
           url: authors['url'],
           mastodon: authors?.['mastodon'] || '',
           rss: authors?.['rss_feed'] || ''
-        }
+        },
+        processedEntry['excerpt'] = sanitizeHtml(`${md.render(description)}`)
       }
       if (description) processedEntry['excerpt'] = description
-      if (['book', 'movie', 'link'].includes(type)) processedEntry['excerpt'] = sanitizeHtml(`${md.render(description)}`)
+      if (['book', 'movie'].includes(type) && review) {
+        processedEntry['excerpt'] = sanitizeHtml(`${md.render(review)}`)
+      } else if (['book', 'movie'].includes(type)) {
+        processedEntry['excerpt'] = sanitizeHtml(`${md.render(description)}`)
+      }
       if (slug && content) processedEntry['excerpt'] = sanitizeHtml(`${md.render(content)}${feedNote}`, {
         disallowedTagsMode: 'completelyDiscard'
       })

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "24.7.3",
+  "version": "24.7.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "24.7.3",
+      "version": "24.7.4",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -1743,9 +1743,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.17",
+      "version": "1.5.18",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.17.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.18.tgz",
-      "integrity": "sha512-Q6Q+04tjC2KJ8qsSOSgovvhWcv5t+SmpH6/YfAWmhpE5/r+zw6KQy1/yWVFFNyEBvy68twTTXr2d5eLfCq7QIw==",
+      "integrity": "sha512-1OfuVACu+zKlmjsNdcJuVQuVE61sZOLbNM4JAQ1Rvh6EOj0/EUKhMJjRH73InPlXSh8HIJk1cVZ8pyOV/FMdUQ==",
       "dev": true,
       "license": "ISC"
     },

package.json

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

src/assets/styles/base/index.css

@@ -470,7 +470,6 @@ article {
     display: block;
     color: var(--gray-dark);
     font-size: var(--font-size-sm);
-    margin-right: var(--spacing-xs);
   }
 }
 
@@ -489,6 +488,7 @@ ul, ol {
 /* images */
 .image-banner {
   border: var(--border-default);
+  border-radius: var(--border-radius-slight);
   height: auto;
   width: 100%;
   display: block;

src/assets/styles/feed.xsl

@@ -7,356 +7,9 @@
         <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">
+        <link rel="stylesheet" href="/assets/styles/index.css" type="text/css" />
-          :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;
-
-            --spacing-xs: var(--sizing-xs);
-            --spacing-sm: var(--sizing-sm);
-            --spacing-md: var(--sizing-md);
-            --spacing-lg: var(--sizing-lg);
-            --spacing-base: var(--sizing-base);
-            --spacing-xl: var(--sizing-xl);
-            --spacing-2xl: var(--sizing-2xl);
-            --spacing-3xl: var(--sizing-3xl);
-
-            --margin-vertical-base-horizontal-zero: var(--sizing-base) 0;
-
-            --border-radius-slight: var(--sizing-xs);
-            --border-radius-full: 9999px;
-
-            --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
-
-            --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;
-
-            --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-1000: #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-1000);
-
-            --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;
-
-            --line-height-md: 1.5;
-            --line-height-base: 2;
-
-            /* outline */
-            --outline-default: var(--outline-default);
-
-            /* borders */
-            --border-default: 1px solid var(--accent-color);
-            --border-gray: 1px solid var(--gray-light);
-          }
-
-          @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-track {
-            background-color: var(--gray-light);
-          }
-
-          ::-webkit-scrollbar-thumb {
-            background: var(--accent-color);
-            border-radius: var(--border-radius-full);
-          }
-
-          ::-webkit-scrollbar-button {
-            background-color: var(--accent-color);
-          }
-
-          ::-webkit-scrollbar,
-          body::-webkit-scrollbar {
-            width: var(--sizing-md);
-            height: var(--sizing-md);
-          }
-
-          body {
-            font-family: var(--font-mono);
-            font-size: var(--font-size-base);
-            font-weight: var(--font-weight-base);
-            line-height: var(--line-height-base);
-            letter-spacing: -.05rem;
-            word-spacing: -.125rem;
-            color: var(--text-color);
-            background-color: var(--background-color);
-            margin: 0;
-          }
-
-          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;
-          }
-
-          main footer {
-            margin-bottom: var(--spacing-base);
-          }
-
-          main footer hr {
-            margin-top: 0;
-          }
-
-          .default-wrapper {
-            padding-top: var(--spacing-2xl);
-          }
-
-          .default-wrapper > p:first-of-type {
-            margin-top: 0;
-          }
-
-          .main-title {
-            padding-top: var(--spacing-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: var(--line-height-md);
-            margin-bottom: var(--spacing-base);
-          }
-
-          a {
-            color: var(--accent-color);
-            text-decoration: none;
-          }
-
-          a:focus,
-          a:focus-within, {
-            outline: var(--outline-default);
-            border-radius: var(--border-radius-slight);
-            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(--spacing-base) 0;
-            border-bottom: 1px solid var(--border-color);
-          }
-
-          .item h3 {
-            margin-top: 0;
-            margin-bottom: var(--spacing-base);
-          }
-
-          .item p:first-of-type {
-            margin-top: 0;
-          }
-
-          .item:first-of-type {
-            padding-top: 0;
-          }
-
-          .item:last-of-type {
-            border-bottom: 0;
-          }
-
-          .item img {
-            border: var(--border-default);
-            border-radius: var(--border-radius-slight);
-            width: 100%;
-            height: auto;
-            display: block;
-            margin-top: var(--spacing-base);
-          }
-
-          p {
-            margin-bottom: var(--spacing-base)
-          }
-
-          p a {
-            text-decoration: underline;
-            text-decoration-style: dashed;
-            text-underline-offset: var(--spacing-xs);
-          }
-
-          p:last-of-type {
-            margin-bottom: 0;
-          }
-
-          strong,
-          blockquote {
-            font-weight: var(--font-weight-bold);
-          }
-
-          blockquote {
-            font-size: var(--font-size-lg);
-            word-break: break-word;
-            color: var(--gray-dark);
-            padding-left: var(--spacing-lg);
-            border-left: var(--sizing-xs) solid var(--gray-dark);
-            margin: var(--margin-vertical-base-horizontal-zero);
-          }
-
-          hr {
-            height: 1px;
-            background-color: var(--border-color);
-            border: 0;
-            margin: var(--margin-vertical-base-horizontal-zero);
-          }
-
-          .highlight-text {
-            color: var(--color-lightest);
-            background-color: var(--accent-color);
-            padding: var(--spacing-xs);
-          }
-
-          pre {
-            padding: var(--spacing-base);
-            overflow: auto;
-            margin: var(--margin-vertical-base-horizontal-zero);
-            font-size: var(--body-font-size);
-          }
-
-          code {
-            padding: 2px 4px;
-          }
-
-          .highlight-text,
-          pre,
-          code {
-            border-radius: var(--border-radius-slight);
-          }
-
-          pre, code {
-            font-family: var(--font-mono);
-            background-color: var(--code-bg-color);
-            color: var(--code-text-color);
-            border: var(--border-gray);
-            border-radius: var(--border-radius-slight);
-          }
-
-          pre code {
-            padding: 0;
-            background: none;
-            border: none;
-          }
-
-          pre.small {
-            padding: var(--spacing-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>
+      <body class="feed">
         <div class="main-wrapper">
           <main>
             <section class="main-title">

src/assets/styles/index.css

@@ -18,6 +18,7 @@
 @import url('./pages/books.css') layer(page);
 @import url('./pages/blogroll.css') layer(page);
 @import url('./pages/contact.css') layer(page);
+@import url('./pages/feeds.css') layer(page);
 @import url('./pages/links.css') layer(page);
 @import url('./pages/music.css') layer(page);
 @import url('./pages/post.css') layer(page);

src/assets/styles/pages/feeds.css

@@ -0,0 +1,47 @@
+.feed {
+  & .item {
+    &:not(:last-of-type) {
+      border-bottom: var(--border-gray);
+      margin-bottom: var(--spacing-base);
+      padding-bottom: var(--spacing-base);
+    }
+
+    & .date {
+      display: block;
+      color: var(--gray-dark);
+      font-size: var(--font-size-sm);
+      margin-bottom: 0;
+    }
+
+    & h3 {
+      margin-top: 0;
+    }
+
+    & img {
+      border: var(--border-default);
+      border-radius: var(--border-radius-slight);
+      height: auto;
+      width: 100%;
+      display: block;
+      margin-top: var(--sizing-base);
+    }
+  }
+
+  & p {
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  & ol > li p {
+    display: inline;
+  }
+
+  & footer {
+    padding-bottom: var(--spacing-3xl);
+  }
+}

src/assets/styles/pages/post.css

@@ -13,7 +13,6 @@ youtube-video + .associated-media {
 .footnotes {
   & .footnotes-list {
     margin-bottom: 0;
-    padding-left: 0;
 
     & li:last-child {
       margin-bottom: 0;

src/assets/styles/plugins/prism.css

@@ -1,5 +1,5 @@
-code[class*="language-"],
+code,
-pre[class*="language-"] {
+pre {
   color: var(--blue-200);
   background: none;
   border-radius: var(--border-radius-slight);
@@ -15,7 +15,7 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-pre[class*="language-"] {
+pre {
   padding: var(--spacing-lg);
   margin: var(--sizing-xl) 0;
   overflow: auto;
@@ -23,7 +23,7 @@ pre[class*="language-"] {
   border: 1px solid var(--gray-200);
 }
 
-:not(pre) > code[class*="language-"] {
+:not(pre) > code {
   padding: var(--spacing-xs);
   white-space: normal;
   background: var(--gray-1000);

src/includes/partials/feeds/rss.liquid

@@ -11,7 +11,7 @@
     <image>
       <title><![CDATA[{{ title }}]]></title>
       <link>{{ permalink | absoluteUrl }}</link>
-      <url>{{ "https://cdn.coryd.dev/" | append: globals.feed_image | append: "?class=w200&amp;v=" | append: appVersion }}</url>
+      <url>{{ "https://cdn.coryd.dev/" | append: globals.feed_image | append: "?class=w200" }}</url>
       <width>144</width>
       <height>144</height>
     </image>

src/pages/feeds/rss/album-releases.liquid

@@ -10,5 +10,4 @@ permalink: "/feeds/album-releases"
   globals:globals
   data:releases
   updated:releases[0].release_date
-  appVersion:appVersion
 %}

src/pages/feeds/rss/all.liquid

@@ -9,5 +9,4 @@ permalink: "/feeds/all"
   globals:globals
   data:collections.allContent
   updated:collections.allContent[0].date
-  appVersion:appVersion
 %}

src/pages/feeds/rss/books.liquid

@@ -11,5 +11,4 @@ permalink: "/feeds/books"
   data:bookData
   updated:bookData[0].date
   utm_campaign:"books_feed"
-  appVersion:appVersion
 %}

src/pages/feeds/rss/links.liquid

@@ -9,5 +9,4 @@ permalink: "/feeds/links"
   globals:globals
   data:links
   updated:links[0].date
-  appVersion:appVersion
 %}

src/pages/feeds/rss/movies.liquid

@@ -10,5 +10,4 @@ permalink: "/feeds/movies"
   data:movies.recentlyWatched
   updated:movies.recentlyWatched[0].lastWatched
   utm_campaign:"movies_feed"
-  appVersion:appVersion
 %}

src/pages/feeds/rss/posts.liquid

@@ -10,5 +10,4 @@ permalink: "/feeds/posts"
   data:posts
   updated:posts[0].date
   utm_campaign:"posts_feed"
-  appVersion:appVersion
 %}