Draft

ChrisChinchilla · Jun 22, 2024 · f73b99e · f73b99e
1 parent c264d51
commit f73b99e
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 87 deletions.
diff --git a/src/assets/images/www-thumb.png b/src/assets/images/www-thumb.png
diff --git a/src/components/Podcast.astro b/src/components/Podcast.astro
@@ -56,6 +56,24 @@ 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">
           {

diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
@@ -1,5 +1,5 @@
 ---
-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?
@@ -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,13 @@ const {
         {
           items && (
             <div class="space-y-8">
-              {items.map(({ title: title2, description, icon }) => (
+              {items.map(({ title: title2, link, icon }) => (
                 <div class="flex">
                   <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">
+                      <Icon name={icon ? icon : 'tabler:check'} class="w-40 h-auto" />
                     </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>

diff --git a/src/components/widgets/Features.astro b/src/components/widgets/Features.astro
@@ -1,17 +1,19 @@
 ---
 import { Icon } from 'astro-icon/components';
+import { getPermalink } from '~/utils/permalinks';
 
 interface Item {
-  title: string;
-  description: string;
+  title?: string;
+  description?: string;
   icon?: string;
+  permalink: string;
 }
 
 export interface Props {
   title?: string;
   subtitle?: string;
   highlight?: string;
-  items: Array<Array<Item>>;
+  items: Array<Item>;
 }
 
 const {
@@ -22,50 +24,27 @@ const {
 } = Astro.props;
 ---
 
-<section class="scroll-mt-16" id="features">
-  <div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
-    {
-      (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}
-            />
-          )}
+<section id="shows">
+  <div class="relative max-w-6xl mx-auto -mb-12">
+    <div class="py-4 sm:py-6 lg:py-8">
 
-          {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 class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
-      {
-        items.map((subitems) => (
-          <div class="space-y-8 sm:px-8">
-            {subitems.map(({ title, description, icon }) => (
-              <div class="flex flex-row max-w-md">
-                <div class="mb-4 mr-4">
-                  <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-800 dark:bg-primary-700">
-                    {icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
-                  </div>
-                </div>
-                <div>
-                  <h3 class="mb-3 text-xl font-bold">{title}</h3>
-                  <p class="text-gray-600 dark:text-slate-400" set:html={description} />
-                </div>
+      <div class={`grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 my-12 dark:text-white items-stretch`}>
+        {
+          items.map(({ title, description, icon, permalink }) => (
+            <div class="relative flex flex-col p-6 bg-white/70 dark:bg-slate-900 rounded drop-shadow-lg hover:shadow-md transition border border-transparent dark:border-slate-800">
+              <div class="flex items-center">
+                <Icon name={icon} class="w-10 h-10" />
+                <div class="ml-4 text-xl font-bold">{title}</div>
               </div>
-            ))}
-          </div>
-        ))
-      }
+              {description && <p class="text-gray-600 dark:text-gray-400 text-md mt-4 mb-8" set:html={description} />}
+              <a
+    href={getPermalink(permalink)}
+    class="btn btn-primary font-btn sm:mb-0 w-full"
+    >{title}</a>
+            </div>
+          ))
+        }
+      </div>
     </div>
   </div>
 </section>
diff --git a/src/pages/podcast/[...page].astro b/src/pages/podcast/[...page].astro
@@ -40,7 +40,7 @@ const { page } = Astro.props;
 const meta = {
   title: 'Podcasts',
   description:
-    'My pre-eminent podcast, Chinchilla Squeaks, has run for nearly eight years and taken me all over the globe. I have dabbled in other shows. They will be listed here again in the near future.',
+    'Hear me ramble. Hear me roar! Drink whisky, cover the news, and more.',
   // canonical: post.canonical || url,
   // image: await findImage(post.image),
   // noindex: BLOG?.post?.noindex,
@@ -53,6 +53,7 @@ const meta = {
     <Headline subtitle={meta.description}>
       {meta.title}
     </Headline>
+
     <ul>
       {
         page.data.map((episode) => (

diff --git a/src/pages/podcast/chinchillasqueaks/[...page].astro b/src/pages/podcast/chinchillasqueaks/[...page].astro
@@ -30,7 +30,7 @@ const { page } = Astro.props;
 const meta = {
   title: 'Podcasts',
   description:
-    'My pre-eminent podcast, Chinchilla Squeaks, has run for nearly eight years and taken me all over the globe. I have dabbled in other shows. They will be listed here again in the near future.',
+    'My pre-eminent podcast, Chinchilla Squeaks, has run for nearly eight years and taken me all over the globe. It runs every other week as an interview with a tech or creative luminary and every other week featuring interesting links and news.',
   // canonical: post.canonical || url,
   // image: await findImage(post.image),
   // noindex: BLOG?.post?.noindex,

diff --git a/...s/podcast/whiskeywordswit/[...page].astro → ...es/podcast/whiskywordswit/[...page].astro b/...s/podcast/whiskeywordswit/[...page].astro → ...es/podcast/whiskywordswit/[...page].astro
@@ -5,8 +5,10 @@ import { PODCAST } from '~/config.mjs';
 import Podcast from '~/components/Podcast.astro';
 import { XMLParser } from 'fast-xml-parser';
 import { Pagination } from 'accessible-astro-components';
-// TODO: Feels odd to duplicate calls to API for generating each individual items and the pagination?
+import Content from '~/components/widgets/Content.astro';
+import showImage from '../../../assets/images/www-thumb.png';
 
+// TODO: Feels odd to duplicate calls to API for generating each individual items and the pagination?
 export async function getStaticPaths({ paginate }) {
   const options = {
     ignoreAttributes: false,
@@ -26,9 +28,9 @@ export async function getStaticPaths({ paginate }) {
 
 const { page } = Astro.props;
 const meta = {
-  title: 'Podcasts',
+  title: 'Whisky, Words, & Wit',
   description:
-    'My pre-eminent podcast, Chinchilla Squeaks, has run for nearly eight years and taken me all over the globe. I have dabbled in other shows. They will be listed here again in the near future.',
+    "My podcast with Mustafa Keksin, where we get together, drink whisk(e)y and discuss life, writing, and the trials and tribulations of getting old. Along the way there's jokes, stories, and more.",
   // canonical: post.canonical || url,
   // image: await findImage(post.image),
   // noindex: BLOG?.post?.noindex,
@@ -41,6 +43,28 @@ const meta = {
     <Headline subtitle={meta.description}>
       {meta.title}
     </Headline>
+    <Content
+      isReversed
+      items={[
+        {
+          link: 'Built on top of Astro 4.0',
+            icon: 'logos:spotify'
+        },
+        {
+          link: 'Built on top of Astro 4.0',
+            icon: 'simple-icons:amazonmusic'
+        },
+      ]}
+      image={{
+        src: showImage,
+        alt: 'Colorful Image',
+      }}
+    >
+      <Fragment slot="bg">
+        <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+      </Fragment>
+    </Content>
+
     <ul>
       {
         page.data.map((episode) => (

diff --git a/...s/podcast/whiskeywordswit/[...slug].astro → ...es/podcast/whiskywordswit/[...slug].astro b/...s/podcast/whiskeywordswit/[...slug].astro → ...es/podcast/whiskywordswit/[...slug].astro
@@ -1,6 +1,5 @@
 ---
 import PodcastLayout from '~/layouts/PodcastLayout.astro';
-import Podcast from '~/components/Podcast.astro';
 import { XMLParser } from 'fast-xml-parser';
 import { getEntry } from 'astro:content';