initial commit

src/components/blocks/AssociatedMedia.astro

@@ -0,0 +1,110 @@
+---
+const {
+  artists = [],
+  books = [],
+  genres = [],
+  movies = [],
+  posts = [],
+  shows = [],
+} = Astro.props;
+
+const media = [
+  ...(artists || []),
+  ...(books || []),
+  ...(genres || []),
+  ...(movies || []),
+  ...(posts || []),
+  ...(shows || []),
+];
+
+if (media.length === 0) return null;
+
+const sections = [
+  {
+    key: "artists",
+    icon: "headphones",
+    cssClass: "music",
+    label: "Related artist(s)",
+    items: artists || [],
+  },
+  {
+    key: "books",
+    icon: "books",
+    cssClass: "books",
+    label: "Related book(s)",
+    items: books || [],
+  },
+  {
+    key: "genres",
+    icon: "headphones",
+    cssClass: "music",
+    label: "Related genre(s)",
+    items: genres || [],
+  },
+  {
+    key: "movies",
+    icon: "movie",
+    cssClass: "movies",
+    label: "Related movie(s)",
+    items: movies || [],
+  },
+  {
+    key: "posts",
+    icon: "article",
+    cssClass: "article",
+    label: "Related post(s)",
+    items: posts || [],
+  },
+  {
+    key: "shows",
+    icon: "device-tv-old",
+    cssClass: "tv",
+    label: "Related show(s)",
+    items: shows || [],
+  },
+];
+---
+
+<div class="associated-media">
+  {
+    sections.map(({ key, icon, cssClass, label, items }) => {
+      if (!items.length) return null;
+
+      return (
+        <section id={key} class={cssClass}>
+          <p>
+            <IconMapper icon={icon} /> {label}
+          </p>
+          <ul>
+            {items.map((item) => (
+              <li>
+                <a href={item.url}>{item.title || item.name}</a>
+                {key === "artists" && item.total_plays > 0 && (
+                  <strong class="highlight-text">
+                    {item.total_plays}{" "}
+                    {item.total_plays === 1 ? "play" : "plays"}
+                  </strong>
+                )}
+                {key === "books" && <span>by {item.author}</span>}
+                {(key === "movies" || key === "shows") && (
+                  <span>({item.year})</span>
+                )}
+                {key === "posts" && (
+                  <span>
+                    (
+                    {new Date(item.date).toLocaleDateString("en-US", {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                    })}
+                    )
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </section>
+      );
+    })
+  }
+</div>

src/components/blocks/Hero.astro

@@ -0,0 +1,7 @@
+---
+const { image, alt } = Astro.props;
+---
+
+<div class="hero">
+  <img src={image} alt={alt} />
+</div>

src/components/blocks/MastodonPost.astro

@@ -0,0 +1,7 @@
+---
+const { post } = Astro.props;
+---
+
+<article class="mastodon-post">
+  <p>{post.content}</p>
+</article>

src/components/blocks/Modal.astro

@@ -0,0 +1,8 @@
+---
+const { content } = Astro.props;
+---
+
+<div class="modal">
+  <button class="close">Close</button>
+  <div class="content">{content}</div>
+</div>

src/components/blocks/NowPlaying.astro

@@ -0,0 +1,24 @@
+---
+import { fetchNowPlaying } from '../../utils/data/nowPlaying.js';
+
+const isProduction = import.meta.env.MODE === 'production';
+const nowPlayingData = await fetchNowPlaying();
+---
+
+<span class="loading client-side" id="now-playing-content" set:html={nowPlayingData.content}></span>
+<noscript>
+  <p>{nowPlayingData.content}</p>
+</noscript>
+
+{isProduction && (<script type="module">
+  async function updateNowPlaying() {
+    const response = await fetch('/api/now-playing');
+    if (response.ok) {
+      const data = await response.json();
+      document.getElementById('now-playing-content').innerHTML = data.content;
+    }
+  }
+
+  setInterval(updateNowPlaying, 180000);
+  updateNowPlaying();
+</script>)}

src/components/blocks/YouTubePlayer.astro

@@ -0,0 +1,10 @@
+---
+const { url } = Astro.props;
+---
+
+<iframe
+  width="560"
+  height="315"
+  src={url}
+  allowfullscreen>
+</iframe>

src/components/blocks/banners/Coffee.astro

@@ -0,0 +1,13 @@
+---
+import { IconCoffee } from "@tabler/icons-react";
+---
+<div class="banner coffee">
+  <p>
+    <a
+      class="coffee plausible-event-name=Buy+Me+a+Coffee+post+footer"
+      href="https://buymeacoffee.com/cory"
+    >
+      <IconCoffee size={24} /> If you found this post helpful, you can buy me a coffee.
+    </a>
+  </p>
+</div>

src/components/blocks/banners/Error.astro

@@ -0,0 +1,8 @@
+---
+import { IconAlertCircle } from '@tabler/icons-react';
+
+const { text } = Astro.props
+---
+<div class="banner error">
+  <p><IconAlertCircle size={24} />{ text }</p>
+</div>

src/components/blocks/banners/GitHub.astro

@@ -0,0 +1,9 @@
+---
+import { IconBrandGithub } from '@tabler/icons-react';
+
+const { url } = Astro.props;
+---
+
+<div class="banner github">
+  <p><IconBrandGithub size={24} /> Take a look at <a href={url}>the GitHub repository for this project</a>. (Give it a star if you feel like it.)</p>
+</div>

src/components/blocks/banners/Npm.astro

@@ -0,0 +1,12 @@
+---
+import { IconBrandNpm } from '@tabler/icons-react';
+
+const { url, command } = Astro.props;
+---
+
+<div class="banner npm">
+  <p>
+    <IconBrandNpm size={24} />
+    <a href={url}>You can take a look at this package on NPM</a> or install it by running <code>{command}</code>.
+  </p>
+</div>

src/components/blocks/banners/OldPost.astro

@@ -0,0 +1,14 @@
+---
+import { IconClockX } from '@tabler/icons-react';
+
+const { isOldPost } = Astro.props;
+---
+
+{isOldPost && (
+  <div class="banner old-post">
+    <p>
+      <IconClockX size={24} />
+      This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.
+    </p>
+  </div>
+)}

src/components/blocks/banners/Rss.astro

@@ -0,0 +1,12 @@
+---
+import { IconRss } from '@tabler/icons-react';
+
+const { url, text } = Astro.props;
+---
+
+<div class="banner rss">
+  <p>
+    <IconRss size={24} />
+    <a href={url}>{text}</a>.
+  </p>
+</div>

src/components/blocks/banners/Warning.astro

@@ -0,0 +1,12 @@
+---
+import { IconAlertTriangle } from '@tabler/icons-react';
+
+const { text } = Astro.props;
+---
+
+<div class="banner warning">
+  <p>
+    <IconAlertTriangle size={24} />
+    {text}
+  </p>
+</div>