feat: numerous other pages

src/components/blocks/BlockRenderer.astro

@@ -0,0 +1,64 @@
+---
+import { fetchAllPosts } from "@data/posts.js";
+import { fetchAnalyticsData } from "@data/analytics.js";
+import { fetchLinks } from "@data/links.js";
+
+import AddonLinks from '@components/blocks/links/AddonLinks.astro';
+import AssociatedMedia from '@components/blocks//AssociatedMedia.astro';
+import GitHub from '@components/blocks/banners/GitHub.astro';
+import Hero from '@components/blocks//Hero.astro';
+import Modal from '@components/blocks//Modal.astro';
+import Npm from '@components/blocks/banners/Npm.astro';
+import Rss from '@components/blocks/banners/Rss.astro';
+import YouTubePlayer from '@components/blocks//YouTubePlayer.astro';
+
+import { md } from '@utils/helpers.js';
+import { getPopularPosts } from '@utils/getPopularPosts.js';
+
+const analytics = await fetchAnalyticsData();
+const links = await fetchLinks();
+const posts = await fetchAllPosts();
+const popularPosts = getPopularPosts(posts, analytics);
+
+const { block } = Astro.props;
+---
+
+{block.type === 'addon_links' && (
+  <AddonLinks popularPosts={popularPosts} links={links} />
+)}
+
+{block.type === 'associated_media' && (
+  <AssociatedMedia media={block.media} />
+)}
+
+{block.type === 'divider' && (
+  <div set:html={md(block.markup)}></div>
+)}
+
+{block.type === 'github_banner' && (
+  <GitHub url={block.url} />
+)}
+
+{block.type === 'hero' && (
+  <Hero image={block.image} alt={block.alt} />
+)}
+
+{block.type === 'markdown' && (
+  <div set:html={md(block.text)}></div>
+)}
+
+{block.type === 'npm_banner' && (
+  <Npm url={block.url} command={block.command} />
+)}
+
+{block.type === 'modal' && (
+  <Modal content={block.content} />
+)}
+
+{block.type === 'rss_banner' && (
+  <Rss url={block.url} text={block.text} />
+)}
+
+{block.type === 'youtube_player' && (
+  <YouTubePlayer url={block.url} />
+)}

src/components/blocks/MastodonPost.astro

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

src/components/blocks/NowPlaying.astro

@@ -1,5 +1,5 @@
 ---
-import { fetchNowPlaying } from '../../utils/data/nowPlaying.js';
+import { fetchNowPlaying } from '@utils/data/nowPlaying.js';
 
 const isProduction = import.meta.env.MODE === 'production';
 const nowPlayingData = await fetchNowPlaying();

src/components/blocks/YouTubePlayer.astro

@@ -1,10 +1,7 @@
 ---
+import YoutubeVideo from '@npm/youtube-video-element/dist/react.js';
+
 const { url } = Astro.props;
 ---
 
-<iframe
-  width="560"
-  height="315"
-  src={url}
-  allowfullscreen>
-</iframe>
+<YoutubeVideo src={url} controls />

src/components/blocks/banners/Mastodon.astro

@@ -0,0 +1,15 @@
+---
+import { IconBrandMastodon } from "@tabler/icons-react";
+
+const { url } = Astro.props;
+---
+<div class="banner mastodon">
+  <p>
+    <a
+      class="mastodon plausible-event-name=Discuss+on+Mastodon+post+footer"
+      href={url}
+    >
+      <IconBrandMastodon size={24} /> Discuss this post on Mastodon.
+    </a>
+  </p>
+</div>

src/components/blocks/links/AddonLinks.astro

@@ -0,0 +1,10 @@
+---
+import PopularPosts from './PopularPosts.astro';
+import RecentLinks from './RecentLinks.astro';
+
+const { popularPosts, links } = Astro.props;
+---
+<div class="addon-links">
+  <PopularPosts popularPosts={popularPosts} />
+  <RecentLinks links={links} />
+</div>

src/components/blocks/links/PopularPosts.astro

@@ -0,0 +1,21 @@
+---
+const { popularPosts } = Astro.props;
+import { IconChartBarPopular } from '@tabler/icons-react';
+---
+{popularPosts && popularPosts.length > 0 && (
+  <article>
+    <h3>
+      <a class="article" href="/posts">
+        <IconChartBarPopular size={24} />
+        Popular posts
+      </a>
+    </h3>
+    <ol type="1">
+      {popularPosts.slice(0, 5).map((post) => (
+        <li>
+          <a href={post.url}>{post.title}</a>
+        </li>
+      ))}
+    </ol>
+  </article>
+)}

src/components/blocks/links/RecentLinks.astro

@@ -0,0 +1,26 @@
+---
+const { links } = Astro.props;
+import { IconLink } from '@tabler/icons-react';
+---
+{links && links.length > 0 && (
+  <article>
+    <h3>
+      <a class="link" href="/links">
+        <IconLink size={24} />
+        Recent links
+      </a>
+    </h3>
+    <ul>
+      {links.slice(0, 5).map((link) => (
+        <li>
+          <a href={link.link} title={link.title}>
+            {link.title}
+          </a>
+          {link.author && (
+            <> via <a href={link.author.url}>{link.author.name}</a></>
+          )}
+        </li>
+      ))}
+    </ul>
+  </article>
+)}