Podcast, blog, and other minor changes (#86)

* Fix podcast meta description * Fix tags * Fix tags * Fix more tags * Fix tags * Fix links * Fix links * Fix tags * Fix links * Fix tags * Fix tags * Fix tags * Fix tags * Add additional podcasts * Add tags to posts * Update Links page to use Raindrop * Fix static pages for now * Create default player ID for podcasts * Draft * Update dependencies * Draft * Create overview page * Add new icons sets * Draft * Layout * Change Raindrop URL * Update dependencies * Final layout * Final update * Fix bad tags * Add debug build * Fix title and URL creation
ChrisChinchilla · Jul 10, 2024 · 75005e7 · 75005e7
1 parent 8b5cfce
commit 75005e7
Show file tree

Hide file tree

Showing 736 changed files with 2,960 additions and 1,267 deletions.
diff --git a/.astro/settings.json b/.astro/settings.json
@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1716371658769
+	}
+}
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -27,12 +27,13 @@ export default defineConfig({
       // TODO: Streamline to only include needed
       include: {
         tabler: ['*'],
-        logos: ['*'],
+        'simple-line-icons': ['*'],
         fa: ['*'],
         carbon: ['*'],
         fluent: ['*'],
         ri: ['*'],
-        ph: ['*']
+        ph: ['*'],
+        'simple-icons': ['*']
       }
     }),
     tailwind({

diff --git a/package.json b/package.json
@@ -7,57 +7,59 @@
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
+    "buildv": "astro build --verbose",
     "preview": "astro preview",
     "astro": "astro",
     "format": "prettier -w .",
     "lint:eslint": "eslint . --ext .js,.ts,.astro"
   },
   "dependencies": {
     "@astrojs/markdown-component": "1.0.5",
-    "@astrojs/react": "^3.4.0",
+    "@astrojs/react": "^3.6.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.18",
-    "@mui/material": "^5.15.18",
-    "@netlify/functions": "^2.7.0",
+    "@mui/icons-material": "^5.16.0",
+    "@mui/material": "^5.16.0",
+    "@netlify/functions": "^2.8.1",
     "fast-xml-parser": "^4.4.0",
-    "markdown-truncate": "^1.1.0",
+    "markdown-truncate": "^1.1.1",
     "node-fetch": "^3.3.2"
   },
   "devDependencies": {
     "@astro-community/astro-embed-youtube": "^0.5.2",
-    "@astrojs/mdx": "^3.0.1",
-    "@astrojs/partytown": "^2.1.0",
-    "@astrojs/rss": "^4.0.6",
-    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/mdx": "^3.1.2",
+    "@astrojs/partytown": "^2.1.1",
+    "@astrojs/rss": "^4.0.7",
+    "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@astrolib/analytics": "^0.5.0",
     "@astrolib/seo": "^1.0.0-beta.5",
     "@fontsource/albert-sans": "^5.0.13",
-    "@fontsource/bitter": "^5.0.18",
-    "@iconify-json/carbon": "^1.1.34",
+    "@fontsource/bitter": "^5.0.19",
+    "@iconify-json/carbon": "^1.1.36",
     "@iconify-json/fa": "^1.1.8",
-    "@iconify-json/fluent": "^1.1.55",
-    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/fluent": "^1.1.58",
+    "@iconify-json/simple-line-icons": "^1.1.8",
     "@iconify-json/ph": "^1.1.13",
-    "@iconify-json/ri": "^1.1.20",
-    "@iconify-json/tabler": "^1.1.113",
+    "@iconify-json/ri": "^1.1.21",
+    "@iconify-json/simple-icons": "^1.1.109",
+    "@iconify-json/tabler": "^1.1.117",
     "@tailwindcss/typography": "^0.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.0.0-alpha.20",
-    "@typescript-eslint/parser": "^8.0.0-alpha.20",
+    "@typescript-eslint/eslint-plugin": "^8.0.0-alpha.41",
+    "@typescript-eslint/parser": "^8.0.0-alpha.41",
     "accessible-astro-components": "^2.3.6",
-    "astro": "^4.9.2",
+    "astro": "^4.11.5",
     "astro-icon": "^1.1.0",
-    "eslint": "^9.3.0",
-    "eslint-plugin-astro": "^1.2.0",
+    "eslint": "^9.6.0",
+    "eslint-plugin-astro": "^1.2.3",
     "limax": "4.1.0",
     "mdast-util-to-string": "^4.0.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.2",
     "prettier-plugin-astro": "^0.14.0",
     "reading-time": "^1.5.0",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "truncate-html": "^1.1.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.3"
   }
 }
diff --git a/src/assets/images/www-thumb.png b/src/assets/images/www-thumb.png
diff --git a/src/components/Link.astro b/src/components/Link.astro
@@ -3,45 +3,37 @@ import { Image } from 'astro:assets';
 // import { findImage } from '~/utils/images';
 export interface Props {
   title: string;
-  description: string;
   link: string;
+  excerpt: string;
   image: string;
+  domain: string;
+  note: string;
 }
-const { title, description, link, image } = Astro.props;
+const { title, link, excerpt, image, domain, note } = Astro.props;
 
 // Default images
-var src = "";
+var src = '';
 if (image != null) {
   src = image;
 } else {
-  src = "/images/default.png";
+  src = '/images/default.png';
 }
-
-// TODO: add source
-// Default source
-// var sourceText = "";
-// if (source != null) {
-//   sourceText = source;
-// } else {
-//   sourceText = "No source defined";
-// }
 ---
 
-<!-- <a href={link} class="cleanlink"> -->
-  <div>
-    <!-- <Picture
+<div>
+  <!-- <Picture
       src={src}
       widths={[250, 400]}
       sizes="(max-width: 400px) 75vw, 200px"
       alt={title}
       aspectRatio="4:3"
       fit="inside"
     /> -->
-<img src={src} />
-<a href={link} class="cleanlink"><h3>
-        {title}
-        <span>&rarr;</span>
-      </h3></a>
-      <p set:html={description} />
-  </div>
-<!-- </a> -->
+  <img src={src} />
+  <h2 class="text-xl sm:text-2xl leading-tight mb-2 font-heading dark:text-slate-300">
+    {title}
+  </h2>
+  <i class="my-2 block"><a href={link} class="cleanlink">{domain}</a></i>
+  <p class="my-2" set:html={note} />
+  <p class="my-2" set:html={excerpt} />
+</div>
diff --git a/src/components/Podcast.astro b/src/components/Podcast.astro
@@ -7,7 +7,15 @@ export interface Props {
 }
 const { podcast } = Astro.props;
 
-var url = '/podcast/' + slugify(podcast.title[0]);
+// For some reason one feed returns duplicate title as an array
+let podcastTitle;
+if (Array.isArray(podcast.title)) {
+  podcastTitle = podcast.title[0];
+} else {
+  podcastTitle = podcast.title;
+}
+
+var url = '/podcast/' + slugify(podcastTitle);
 function slugify(str) {
   str = str.replace(/^\s+|\s+$/g, '');
 
@@ -39,7 +47,7 @@ function slugify(str) {
     <!-- TODO: These images might be quite heavy -->
     <Image
       src={podcast.image ? podcast.image.att_href : '../../assets/images/default.png'}
-      alt={podcast.title ? podcast.title[0] : 'null'}
+      alt={podcast.title ? podcastTitle : 'null'}
       class="absolute object-contain h-full mb-6 rounded drop-shadow-lg"
       width="420"
       height="420"
@@ -48,15 +56,33 @@ function slugify(str) {
 
   <div class="mt-2">
     <div class="mt-2">
+      <!-- TODO: Is there a less brittle way? -->
+      {
+        podcast.link === 'https://chinchillasqueaks.substack.com/podcast' ? (
+          <a
+            href="podcast/chinchillasqueaks"
+            class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2  font-medium"
+          >
+            Chinchilla Squeaks
+          </a>
+        ) : (
+          <a
+            href="podcast/whiskywordswit"
+            class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2  font-medium"
+          >
+            Whisky, Words, & Wit
+          </a>
+        )
+      }
       <header>
         <h2 class="text-xl sm:text-2xl font-semibold leading-tight mb-2 font-subheading dark:text-slate-300">
           {
             url ? (
               <a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={url}>
-                {podcast.title[0]}
+                {podcastTitle}
               </a>
             ) : (
-              podcast.title[0]
+              podcastTitle
             )
           }
         </h2>

diff --git a/src/components/Post.astro b/src/components/Post.astro
@@ -3,6 +3,7 @@ import { Image } from 'astro:assets';
 // import { findImage } from '~/utils/images';
 import Markdown from '@astrojs/markdown-component';
 import truncateMarkdown from 'markdown-truncate';
+import Tags from '~/components/common/Tags.astro';
 import type { CollectionEntry } from 'astro:content';
 interface Props {
   post: CollectionEntry<'posts'>;
@@ -38,7 +39,7 @@ const truncatedBody = truncateMarkdown(post.body, {
   ellipsis: true,
 });
 ---
-
+<!-- TODO: Tidy and fix grid -->
 <article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${post.data.image ? 'md:grid-cols-2' : ''}`}>
   <div
     class="relative h-0 pb-[56.25%] md:pb-[75%] lg:pb-[56.25%] overflow-hiddenrounded drop-shadow-lg"
@@ -84,5 +85,14 @@ const truncatedBody = truncateMarkdown(post.body, {
     <div class="post-body body">
       <Markdown class="m-2" />{truncatedBody}</Markdown>
     </div>
+    {
+      post.data.tags && Array.isArray(post.data.tags) ? (
+        <footer class="mt-2">
+          <Tags tags={post.data.tags} />
+        </footer>
+      ) : (
+        <Fragment />
+      )
+    }
   </div>
 </article>
diff --git a/src/components/common/MetaTags.astro b/src/components/common/MetaTags.astro
@@ -33,7 +33,7 @@ if (Astro.props.publication_url) {
 }
 const {
   title = SITE.name,
-  description = '',
+  description = description,
   image: _image = defaultImage,
   canonical = canonicalURL,
   noindex = false,

diff --git a/src/components/common/Tags.astro b/src/components/common/Tags.astro
@@ -5,7 +5,7 @@ import { BLOG } from '~/config.mjs';
 import type { Post } from '~/types';
 
 export interface Props {
-  tags: Post['tags'];
+  tags:Post['tags'];
   class?: string;
 }
 

diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
@@ -1,10 +1,10 @@
 ---
-import Icon from 'astro-icon/components';
+import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
 // TODO: Is this used or can it be upgraded?
 interface Item {
-  title: string;
+  link: string;
   description?: string;
   icon?: string;
 }
@@ -21,9 +21,6 @@ export interface Props {
 }
 
 const {
-  title = await Astro.slots.render('title'),
-  subtitle = await Astro.slots.render('subtitle'),
-  highlight,
   content = await Astro.slots.render('content'),
   items = [],
   image = await Astro.slots.render('image'),
@@ -32,31 +29,7 @@ const {
 } = Astro.props;
 ---
 
-<section class={`bg-primary-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
-  <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
-    {
-      (title || subtitle || highlight) && (
-        <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
-          {highlight && (
-            <p
-              class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
-              set:html={highlight}
-            />
-          )}
-          {title && (
-            <h2
-              class="text-4xl md:text-5xl leading-tighter tracking-tighter mb-4 font-subheading font-semibold"
-              set:html={title}
-            />
-          )}
-
-          {subtitle && (
-            <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
-          )}
-        </div>
-      )
-    }
-  </div>
+<section class={`bg-primary-50 dark:bg-slate-800 py-8 md:py-10 md:mb-10 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
   <div class="mx-auto max-w-6xl p-4 md:px-8">
     <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
       <div class="md:basis-1/2 self-center">
@@ -65,17 +38,15 @@ const {
         {
           items && (
             <div class="space-y-8">
-              {items.map(({ title: title2, description, icon }) => (
-                <div class="flex">
+              {items.map(({ link, icon }) => (
+                <div class="inline-flex items-start p-2.5">
                   <div class="flex-shrink-0">
-                    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800 text-gray-50">
-                      <Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
+                    <div class="flex items-center justify-center text-gray-50">
+                      <a href={link} target="_blank">
+                      <Icon name={icon ? icon : 'tabler:check'} class="w-12 h-auto" style="color: black" />
+                    </a>
                     </div>
                   </div>
-                  <div class="ml-4">
-                    {title2 && <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">{title2}</h3>}
-                    {description && <p class="mt-2 text-gray-600 dark:text-slate-400" set:html={description} />}
-                  </div>
                 </div>
               ))}
             </div>