cdransf/coryd.dev-astro
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: myriad fixes + artist pages

Browse source
This commit is contained in:
Cory Dransfeldt 2024-11-17 13:21:45 -08:00
parent aec8471b06
commit ff00020b70
No known key found for this signature in database
53 changed files with 753 additions and 486 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/Footer.astro
View file

@ -1,36 +1,36 @@
---
import NavLink from '@components/nav/NavLink.astro';
import { fetchGlobalData } from '@utils/data/global/index.js';
import NavLink from "@components/nav/NavLink.astro";
import { fetchGlobalData } from "@utils/data/global/index.js";
const { updated } = Astro.props;
const { nav } = await fetchGlobalData(Astro);
---
<footer style={updated ? undefined : 'margin-top: var(--spacing-3xl)'}>
{updated && (
<p class="updated">
<em>This page was last updated on {new Date(updated).toLocaleDateString()}</em>
</p>
)}
<footer style={updated ? undefined : "margin-top: var(--spacing-3xl)"}>
{
updated && (
<p class="updated">
<em>
This page was last updated on {new Date(updated).toLocaleDateString()}
</em>
</p>
)
}
<nav aria-label="Social icons" class="social">
{nav.footer_icons.map(link => (
<NavLink
url={link.permalink}
title={link.title}
icon={link.icon}
/>
))}
{
nav.footer_icons.map((link) => (
<NavLink url={link.permalink} title={link.title} icon={link.icon} />
))
}
</nav>
<nav aria-label="Secondary site navigation" class="sub-pages">
{nav.footer_text.map((link, index) => (
<>
<NavLink
url={link.permalink}
title={link.title}
icon={link.icon}
/>
{index < nav.footer_text.length - 1 && <span>/</span>}
</>
))}
{
nav.footer_text.map((link, index) => (
<>
<NavLink url={link.permalink} title={link.title} icon={link.icon} />
{index < nav.footer_text.length - 1 && <span>/</span>}
</>
))
}
</nav>
</footer>

22
src/components/Header.astro
View file

@ -1,19 +1,23 @@
---
import Menu from '@components/nav/Menu.astro';
import { fetchGlobalData } from '@utils/data/global/index.js';
import Menu from "@components/nav/Menu.astro";
import { fetchGlobalData } from "@utils/data/global/index.js";
const { siteName, url } = Astro.props;
const { nav } = await fetchGlobalData(Astro);
const isHomePage = url === '/';
const isHomePage = url === "/";
---
<section class="main-title">
<h1>
{isHomePage ? (
siteName
) : (
<a href="/" tabindex="0">{siteName}</a>
)}
{
isHomePage ? (
siteName
) : (
<a href="/" tabindex="0">
{siteName}
</a>
)
}
</h1>
<Menu nav={nav} />
</section>
</section>

18
src/components/IconMapper.astro
View file

@ -15,29 +15,29 @@ import {
IconCoffee,
IconDeviceWatch,
IconHeartHandshake,
} from '@tabler/icons-react';
} from "@tabler/icons-react";
const { icon } = Astro.props;
const iconComponents = {
article: IconArticle,
headphones: IconHeadphones,
'device-tv-old': IconDeviceTvOld,
"device-tv-old": IconDeviceTvOld,
books: IconBooks,
link: IconLink,
'info-circle': IconInfoCircle,
"info-circle": IconInfoCircle,
search: IconSearch,
rss: IconRss,
'brand-mastodon': IconBrandMastodon,
"brand-mastodon": IconBrandMastodon,
mail: IconMail,
'brand-github': IconBrandGithub,
'brand-npm': IconBrandNpm,
"brand-github": IconBrandGithub,
"brand-npm": IconBrandNpm,
coffee: IconCoffee,
'device-watch': IconDeviceWatch,
'heart-handshake': IconHeartHandshake,
"device-watch": IconDeviceWatch,
"heart-handshake": IconHeartHandshake,
};
const SelectedIcon = iconComponents[icon?.toLowerCase()] || null;
---
{SelectedIcon ? <SelectedIcon size={24} /> : null}
{SelectedIcon ? <SelectedIcon size={24} /> : null}

5
src/components/Metadata.astro
View file

@ -1,6 +1,6 @@
---
import { escapeHtml } from "@utils/helpers/general.js";
import { fetchGlobalData } from '@utils/data/global/index.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
const {
schema = "page",
@ -107,7 +107,8 @@ if (titleOverride) pageTitle = titleOverride;
if (descriptionOverride) pageDescription = descriptionOverride;
if (ogImageOverride) ogImage = ogImageOverride;
if (pageTitle !== globals.site_name && schema !== "blog") pageTitle = `${pageTitle} / ${globals.site_name}`;
if (pageTitle !== globals.site_name && schema !== "blog")
pageTitle = `${pageTitle} / ${globals.site_name}`;
const escapedPageDescription = escapeHtml(pageDescription);
---

2
src/components/blocks/AssociatedMedia.astro
View file

@ -1,4 +1,6 @@
---
import IconMapper from "@components/IconMapper.astro";
const {
artists = [],
books = [],

64
src/components/blocks/BlockRenderer.astro
View file

@ -3,17 +3,17 @@ 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 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/general.js';
import { getPopularPosts } from '@utils/getPopularPosts.js';
import { md } from "@utils/helpers/general.js";
import { getPopularPosts } from "@utils/getPopularPosts.js";
const analytics = await fetchAnalyticsData();
const links = await fetchLinks();
@ -22,42 +22,26 @@ const popularPosts = getPopularPosts(posts, analytics);
const { block } = Astro.props;
---
{block.type === 'addon_links' && (
<AddonLinks popularPosts={popularPosts} links={links} />
)}
{
block.type === "addon_links" && (
<AddonLinks popularPosts={popularPosts} links={links} />
)
}
{block.type === 'associated_media' && (
<AssociatedMedia media={block.media} />
)}
{block.type === "associated_media" && <AssociatedMedia media={block.media} />}
{block.type === 'divider' && (
<div set:html={md(block.markup)}></div>
)}
{block.type === "divider" && <div set:html={md(block.markup)} />}
{block.type === 'github_banner' && (
<GitHub url={block.url} />
)}
{block.type === "github_banner" && <GitHub url={block.url} />}
{block.type === 'hero' && (
<Hero image={block.image} alt={block.alt} />
)}
{block.type === "hero" && <Hero image={block.image} alt={block.alt} />}
{block.type === 'markdown' && (
<div set:html={md(block.text)}></div>
)}
{block.type === "markdown" && <div set:html={md(block.text)} />}
{block.type === 'npm_banner' && (
<Npm url={block.url} command={block.command} />
)}
{block.type === "npm_banner" && <Npm url={block.url} command={block.command} />}
{block.type === 'modal' && (
<Modal content={block.content} />
)}
{block.type === "modal" && <Modal content={block.content} />}
{block.type === 'rss_banner' && (
<Rss url={block.url} text={block.text} />
)}
{block.type === "rss_banner" && <Rss url={block.url} text={block.text} />}
{block.type === 'youtube_player' && (
<YouTubePlayer url={block.url} />
)}
{block.type === "youtube_player" && <YouTubePlayer url={block.url} />}

4
src/components/blocks/Hero.astro
View file

@ -1,8 +1,8 @@
---
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchGlobalData } from "@utils/data/global/index.js";
const { image, alt } = Astro.props;
const globals = await fetchGlobals(Astro);
const { globals } = await fetchGlobalData(Astro);
---
<div class="hero">

10
src/components/blocks/NowPlaying.astro
View file

@ -1,7 +1,7 @@
---
import { fetchNowPlaying } from '@utils/data/nowPlaying.js';
import { fetchNowPlaying } from "@utils/data/nowPlaying.js";
const isProduction = import.meta.env.MODE === 'production';
const isProduction = import.meta.env.MODE === "production";
const nowPlayingData = await fetchNowPlaying();
---
@ -10,12 +10,12 @@ const nowPlayingData = await fetchNowPlaying();
<p>{nowPlayingData.content}</p>
</noscript>
{isProduction && (<script type="module">
{isProduction && (<script type="module" is:inline>
async function updateNowPlaying() {
const response = await fetch('/api/now-playing');
const response = await fetch("/api/now-playing");
if (response.ok) {
const data = await response.json();
document.getElementById('now-playing-content').innerHTML = data.content;
document.getElementById("now-playing-content").innerHTML = data.content;
}
}

4
src/components/blocks/YouTubePlayer.astro
View file

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

9
src/components/blocks/banners/Error.astro
View file

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

10
src/components/blocks/banners/GitHub.astro
View file

@ -1,9 +1,13 @@
---
import { IconBrandGithub } from '@tabler/icons-react';
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>
<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>

7
src/components/blocks/banners/Npm.astro
View file

@ -1,5 +1,5 @@
---
import { IconBrandNpm } from '@tabler/icons-react';
import { IconBrandNpm } from "@tabler/icons-react";
const { url, command } = Astro.props;
---
@ -7,6 +7,7 @@ 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>.
<a href={url}>You can take a look at this package on NPM</a> or install it by
running <code>{command}</code>.
</p>
</div>
</div>

21
src/components/blocks/banners/OldPost.astro
View file

@ -1,14 +1,17 @@
---
import { IconClockX } from '@tabler/icons-react';
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>
)}
{
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>
)
}

4
src/components/blocks/banners/Rss.astro
View file

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

4
src/components/blocks/banners/Warning.astro
View file

@ -1,5 +1,5 @@
---
import { IconAlertTriangle } from '@tabler/icons-react';
import { IconAlertTriangle } from "@tabler/icons-react";
const { text } = Astro.props;
---
@ -9,4 +9,4 @@ const { text } = Astro.props;
<IconAlertTriangle size={24} />
{text}
</p>
</div>
</div>

39
src/components/blocks/links/PopularPosts.astro
View file

@ -1,21 +1,24 @@
---
const { popularPosts } = Astro.props;
import { IconChartBarPopular } from '@tabler/icons-react';
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>
)}
{
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>
)
}

52
src/components/blocks/links/RecentLinks.astro
View file

@ -1,26 +1,32 @@
---
const { links } = Astro.props;
import { IconLink } from '@tabler/icons-react';
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>
)}
{
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>
)
}

57
src/components/home/RecentActivity.astro
View file

@ -1,12 +1,12 @@
---
import { fetchMusicData } from '@utils/data/music.js';
import { fetchShows } from '@utils/data/tv.js';
import { fetchMovies } from '@utils/data/movies.js';
import { fetchBooks } from '@utils/data/books.js';
import { fetchLinks } from '@utils/data/links.js';
import { IconActivity } from '@tabler/icons-react';
import { fetchMusicData } from "@utils/data/music.js";
import { fetchShows } from "@utils/data/tv.js";
import { fetchMovies } from "@utils/data/movies.js";
import { fetchBooks } from "@utils/data/books.js";
import { fetchLinks } from "@utils/data/links.js";
import { IconActivity } from "@tabler/icons-react";
import Rss from '@components/blocks/banners/Rss.astro';
import Rss from "@components/blocks/banners/Rss.astro";
const music = await fetchMusicData();
const tv = await fetchShows();
@ -27,17 +27,42 @@ const link = links[0];
Recent activity
</h2>
<ul>
<li><span class="music">Top track this week:</span> <a href={track.artist_url}>{track.track_name} by {track.artist_name}</a></li>
<li><span class="tv">Last episode watched:</span> <strong class="highlight-text">{show.formatted_episode}</strong> of <a href={show.url}>{show.title}</a></li>
<li><span class="movies">Last movie watched:</span> <a href={movie.url}>{movie.title}</a>{movie.rating ? ` (${movie.rating})` : ''}</li>
<li><span class="books">Last book finished:</span> <a href={book.url}>{book.title}</a> by {book.author}{book.rating ? ` (${book.rating})` : ''}</li>
<li>
<span class="music">Top track this week:</span>
<a href={track.artist_url}>{track.track_name} by {track.artist_name}</a>
</li>
<li>
<span class="tv">Last episode watched:</span>
<strong class="highlight-text">{show.formatted_episode}</strong> of <a
href={show.url}>{show.title}</a>
</li>
<li>
<span class="movies">Last movie watched:</span>
<a href={movie.url}>{movie.title}</a>{
movie.rating ? ` (${movie.rating})` : ""
}
</li>
<li>
<span class="books">Last book finished:</span>
<a href={book.url}>{book.title}</a> by {book.author}{
book.rating ? ` (${book.rating})` : ""
}
</li>
<li>
<span class="link">Last link shared:</span>
<a href={link.link}>{link.title}</a>
{link.author && (
<span> via <a href={link.author.url}>{link.author.name}</a></span>
)}
{
link.author && (
<span>
{" "}
via <a href={link.author.url}>{link.author.name}</a>
</span>
)
}
</li>
</ul>
<Rss url="/feeds" text="Subscribe to my movies, books, links or activity feed(s)" />
</article>
<Rss
url="/feeds"
text="Subscribe to my movies, books, links or activity feed(s)"
/>
</article>

46
src/components/home/RecentPosts.astro
View file

@ -1,7 +1,7 @@
---
import { IconClock, IconStar, IconArrowRight } from '@tabler/icons-react';
import { fetchAllPosts } from '@utils/data/posts.js';
import { md } from '@utils/helpers/general.js';
import { IconClock, IconStar, IconArrowRight } from "@tabler/icons-react";
import { fetchAllPosts } from "@utils/data/posts.js";
import { md } from "@utils/helpers/general.js";
const posts = await fetchAllPosts();
---
@ -10,24 +10,26 @@ const posts = await fetchAllPosts();
<IconClock size={24} />
Recent posts
</h2>
{posts.slice(0, 5).map(post => (
<article key={post.url}>
<div class="post-meta">
{post.featured && <IconStar size={16} />}
<time datetime={post.date}>
{new Date(post.date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</time>
</div>
<h3>
<a href={post.url}>{post.title}</a>
</h3>
<p set:html={md(post.description)}></p>
</article>
))}
{
posts.slice(0, 5).map((post) => (
<article key={post.url}>
<div class="post-meta">
{post.featured && <IconStar size={16} />}
<time datetime={post.date}>
{new Date(post.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</time>
</div>
<h3>
<a href={post.url}>{post.title}</a>
</h3>
<p set:html={md(post.description)} />
</article>
))
}
<a class="icon-link" href="/posts">
View all posts <IconArrowRight size={16} />
</a>
</a>

75
src/components/media/Grid.astro
View file

@ -1,6 +1,6 @@
---
import Paginator from '@components/nav/Paginator.astro';
import { fetchGlobalData } from '@utils/data/global/index.js';
import Paginator from "@components/nav/Paginator.astro";
import { fetchGlobalData } from "@utils/data/global/index.js";
const { data, count, shape, pagination, loading = "lazy" } = Astro.props;
const { globals } = await fetchGlobalData(Astro);
@ -9,24 +9,24 @@ const hidePagination = pageCount <= 1;
function getImageAttributes(item, shape) {
let imageUrl = item.grid.image;
let imageClass = '';
let imageClass = "";
let width = 0;
let height = 0;
switch (shape) {
case 'poster':
case "poster":
imageUrl = item.grid.backdrop;
imageClass = 'banner';
imageClass = "banner";
width = 256;
height = 170;
break;
case 'square':
imageClass = 'square';
case "square":
imageClass = "square";
width = 200;
height = 200;
break;
case 'vertical':
imageClass = 'vertical';
case "vertical":
imageClass = "vertical";
width = 200;
height = 307;
break;
@ -37,36 +37,39 @@ function getImageAttributes(item, shape) {
---
<div class={`media-grid ${shape}`}>
{data.slice(0, count).map((item) => {
const alt = item.grid.alt?.replace(/['"]/g, '');
const { imageUrl, imageClass, width, height } = getImageAttributes(item, shape);
{
data.slice(0, count).map((item) => {
const alt = item.grid.alt?.replace(/['"]/g, "");
const { imageUrl, imageClass, width, height } = getImageAttributes(
item,
shape
);
return (
<a href={item.grid.url} title={alt}>
<div class="item media-overlay">
<div class="meta-text">
<div class="header">{item.grid.title}</div>
<div class="subheader">{item.grid.subtext}</div>
</div>
<img
srcSet={`
return (
<a href={item.grid.url} title={alt}>
<div class="item media-overlay">
<div class="meta-text">
<div class="header">{item.grid.title}</div>
<div class="subheader">{item.grid.subtext}</div>
</div>
<img
srcSet={`
${globals.cdn_url}${imageUrl}?class=${imageClass}sm&type=webp ${width}w,
${globals.cdn_url}${imageUrl}?class=${imageClass}md&type=webp ${width * 2}w
`}
sizes={`(max-width: 450px) ${width}px, ${width * 2}px`}
src={`${globals.cdn_url}${imageUrl}?class=${imageClass}sm&type=webp`}
alt={alt}
loading={loading}
decoding="async"
width={width}
height={height}
/>
</div>
</a>
);
})}
sizes={`(max-width: 450px) ${width}px, ${width * 2}px`}
src={`${globals.cdn_url}${imageUrl}?class=${imageClass}sm&type=webp`}
alt={alt}
loading={loading}
decoding="async"
width={width}
height={height}
/>
</div>
</a>
);
})
}
</div>
{!hidePagination && (
<Paginator pagination={pagination} />
)}
{!hidePagination && <Paginator pagination={pagination} />}

42
src/components/media/music/Chart.astro
View file

@ -1,29 +1,33 @@
---
import ProgressBar from '@components/media/ProgressBar.astro';
import ProgressBar from "@components/media/ProgressBar.astro";
const { data, count } = Astro.props;
---
<div class="music-chart">
<ol type="1">
{data.slice(0, count).map((item) => {
const percentage = `${item.chart.percentage}%`;
const playsLabel = item.chart.plays === 1 ? 'play' : 'plays';
{
data.slice(0, count).map((item) => {
const percentage = `${item.chart.percentage}%`;
const playsLabel = item.chart.plays === 1 ? "play" : "plays";
return (
<li value={item.chart.rank}>
<div class="item">
<div class="info">
<a class="title" href={item.chart.url}>{item.chart.title}</a>
<span class="subtext">{item.chart.artist}</span>
<span class="subtext">
{item.chart.plays} {playsLabel}
</span>
return (
<li value={item.chart.rank}>
<div class="item">
<div class="info">
<a class="title" href={item.chart.url}>
{item.chart.title}
</a>
<span class="subtext">{item.chart.artist}</span>
<span class="subtext">
{item.chart.plays} {playsLabel}
</span>
</div>
<ProgressBar percentage={percentage} />
</div>
<ProgressBar percentage={percentage} />
</div>
</li>
);
})}
</li>
);
})
}
</ol>
</div>
</div>

66
src/components/media/music/Recent.astro
View file

@ -1,44 +1,48 @@
---
import { fetchGlobalData } from '@utils/data/global/index.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
const { data } = Astro.props;
const { globals } = await fetchGlobalData(Astro);
---
<div class="music-chart">
{data.slice(0, 10).map((item) => (
<div class="item">
<div class="meta">
<a href={item.chart.url}>
<img
srcSet={`
{
data.slice(0, 10).map((item) => (
<div class="item">
<div class="meta">
<a href={item.chart.url}>
<img
srcSet={`
${globals.cdn_url}${item.chart.image}?class=w50&type=webp 50w,
${globals.cdn_url}${item.chart.image}?class=w100&type=webp 100w
`}
sizes="(max-width: 450px) 50px, 100px"
src={`${globals.cdn_url}${item.chart.image}?class=w50&type=webp`}
alt={item.chart.alt.replace(/['"]/g, '')}
loading="lazy"
decoding="async"
width="64"
height="64"
/>
</a>
<div class="meta-text">
<a class="title" href={item.chart.url}>{item.chart.title}</a>
<span class="subtext">{item.chart.subtext}</span>
sizes="(max-width: 450px) 50px, 100px"
src={`${globals.cdn_url}${item.chart.image}?class=w50&type=webp`}
alt={item.chart.alt.replace(/['"]/g, "")}
loading="lazy"
decoding="async"
width="64"
height="64"
/>
</a>
<div class="meta-text">
<a class="title" href={item.chart.url}>
{item.chart.title}
</a>
<span class="subtext">{item.chart.subtext}</span>
</div>
</div>
<time dateTime={item.chart.played_at}>
{new Date(item.chart.played_at).toLocaleString("en-US", {
timeZone: "America/Los_Angeles",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
})}
</time>
</div>
<time dateTime={item.chart.played_at}>
{new Date(item.chart.played_at).toLocaleString("en-US", {
timeZone: "America/Los_Angeles",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
})}
</time>
</div>
))}
))
}
</div>

2
src/components/media/watching/Hero.astro
View file

@ -1,5 +1,5 @@
---
import { fetchGlobalData } from '@utils/data/global/index.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
import Hero from "@components/blocks/Hero.astro";
const { movie } = Astro.props;

28
src/components/nav/Menu.astro
View file

@ -1,6 +1,6 @@
---
import { IconMenu2, IconX } from '@tabler/icons-react';
import NavLink from './NavLink.astro';
import { IconMenu2, IconX } from "@tabler/icons-react";
import NavLink from "./NavLink.astro";
const { nav } = Astro.props;
---
@ -16,15 +16,17 @@ const { nav } = Astro.props;
</div>
</label>
<ul class="menu-primary" aria-label="Primary site navigation" id="primary-navigation">
{nav.primary.map((link) => (
<li>
<NavLink
url={link.permalink}
title={link.title}
icon={link.icon}
/>
</li>
))}
<ul
class="menu-primary"
aria-label="Primary site navigation"
id="primary-navigation"
>
{
nav.primary.map((link) => (
<li>
<NavLink url={link.permalink} title={link.title} icon={link.icon} />
</li>
))
}
</ul>
</menu>
</menu>

38
src/components/nav/NavLink.astro
View file

@ -1,24 +1,26 @@
---
import IconMapper from '@components/IconMapper.astro';
import IconMapper from "@components/IconMapper.astro";
const { url, title, icon } = Astro.props;
const isHttp = url.startsWith('http');
const isHttp = url.startsWith("http");
const isActive = Astro.url.pathname === url;
---
{isActive ? (
<span class={`active icon ${icon?.toLowerCase()}`} aria-current="page">
<IconMapper icon={icon} />
<span>{title}</span>
</span>
) : (
<a
class={`icon ${icon}`}
href={url}
rel={isHttp ? 'me' : undefined}
aria-label={title}
>
<IconMapper icon={icon} />
<span>{title}</span>
</a>
)}
{
isActive ? (
<span class={`active icon ${icon?.toLowerCase()}`} aria-current="page">
<IconMapper icon={icon} />
<span>{title}</span>
</span>
) : (
<a
class={`icon ${icon}`}
href={url}
rel={isHttp ? "me" : undefined}
aria-label={title}
>
<IconMapper icon={icon} />
<span>{title}</span>
</a>
)
}

10
src/components/utils/ToggleContent.astro Normal file
View file

@ -0,0 +1,10 @@
---
import { md } from "@utils/helpers/general.js";
const { content } = Astro.props;
---
<div data-toggle-content class="text-toggle-hidden">
<div set:html={md(content)} />
</div>
<button data-toggle-button>Show more</button>

9
src/layouts/Layout.astro
View file

@ -3,7 +3,7 @@ import "@styles/index.css";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Metadata from "@components/Metadata.astro";
import { fetchGlobalData } from '@utils/data/global/index.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
const {
schema = "page",
@ -61,7 +61,11 @@ const isProduction = import.meta.env.MODE === "production";
)
}
<noscript>
<style>.client-side {display:none}</style>
<style>
.client-side {
display: none;
}
</style>
</noscript>
</head>
<body>
@ -74,5 +78,6 @@ const isProduction = import.meta.env.MODE === "production";
</main>
<Footer updated={updated} />
</div>
</body>
</html>

2
src/pages/.well-known/webfinger.js
View file

@ -1,4 +1,4 @@
import { fetchGlobals } from "@utils/data/globals";
import { fetchGlobals } from "@utils/data/globals.js";
export async function GET() {
try {

12
src/pages/[permalink].astro
View file

@ -1,8 +1,8 @@
---
import Layout from '@layouts/Layout.astro';
import BlockRenderer from '@components/blocks/BlockRenderer.astro';
import { fetchPages } from '@utils/data/pages';
import { fetchGlobalData } from '@utils/data/global/index.js';
import Layout from "@layouts/Layout.astro";
import BlockRenderer from "@components/blocks/BlockRenderer.astro";
import { fetchPages } from "@utils/data/pages.js";
import { fetchGlobalData } from "@utils/data/global/index.js";
export const prerender = true;
@ -26,7 +26,5 @@ const currentUrl = Astro.url.pathname;
updated={page.updated}
currentUrl={currentUrl}
>
{page.blocks.map((block) => (
<BlockRenderer block={block} />
))}
{page.blocks.map((block) => <BlockRenderer block={block} />)}
</Layout>

112
src/pages/blogroll.astro
View file

@ -1,21 +1,28 @@
---
import Layout from '@layouts/Layout.astro';
import { IconRss, IconJson, IconMailPlus, IconBrandMastodon } from "@tabler/icons-react";
import { fetchBlogroll } from '@utils/data/blogroll.js';
import Layout from "@layouts/Layout.astro";
import {
IconRss,
IconJson,
IconMailPlus,
IconBrandMastodon,
} from "@tabler/icons-react";
import { fetchBlogroll } from "@utils/data/blogroll.js";
const blogroll = await fetchBlogroll();
const currentUrl = Astro.url.pathname;
const title = "Blogroll";
const description = "These are awesome blogs that I enjoy and you may enjoy too.";
const description =
"These are awesome blogs that I enjoy and you may enjoy too.";
---
<Layout
pageTitle={title}
description={description}
currentUrl={currentUrl}
>
<Layout pageTitle={title} description={description} currentUrl={currentUrl}>
<h2 class="page-title">{title}</h2>
<p>
You can <a href="/blogroll.opml" class="plausible-event-name=Blogroll+OPML+download">download an OPML file</a> containing all of these feeds and import them into your RSS reader.
You can <a
href="/blogroll.opml"
class="plausible-event-name=Blogroll+OPML+download"
>download an OPML file</a
> containing all of these feeds and import them into your RSS reader.
</p>
<table>
<thead>
@ -26,39 +33,60 @@ const description = "These are awesome blogs that I enjoy and you may enjoy too.
</tr>
</thead>
<tbody>
{blogroll.map((blog) => (
<tr>
<td>{blog.name}</td>
<td>
<a href={blog.url}>{blog.url.replace("https://", "")}</a>
</td>
<td class="blog-roll-icons">
{blog.rss_feed && (
<a class="rss" href={blog.rss_feed} aria-label={`RSS feed for ${blog.name}`}>
<IconRss size={16} />
</a>
)}
{blog.json_feed && (
<a class="json" href={blog.json_feed} aria-label={`JSON feed for ${blog.name}`}>
<IconJson size={16} />
</a>
)}
{blog.newsletter && (
<a class="mail-plus" href={blog.newsletter} aria-label={`Subscribe to ${blog.name}'s newsletter`}>
<IconMailPlus size={16} />
</a>
)}
{blog.mastodon && (
<a class="brand-mastodon" href={blog.mastodon} aria-label={`Follow ${blog.name} on Mastodon`}>
<IconBrandMastodon size={16} />
</a>
)}
</td>
</tr>
))}
{
blogroll.map((blog) => (
<tr>
<td>{blog.name}</td>
<td>
<a href={blog.url}>{blog.url.replace("https://", "")}</a>
</td>
<td class="blog-roll-icons">
{blog.rss_feed && (
<a
class="rss"
href={blog.rss_feed}
aria-label={`RSS feed for ${blog.name}`}
>
<IconRss size={16} />
</a>
)}
{blog.json_feed && (
<a
class="json"
href={blog.json_feed}
aria-label={`JSON feed for ${blog.name}`}
>
<IconJson size={16} />
</a>
)}
{blog.newsletter && (
<a
class="mail-plus"
href={blog.newsletter}
aria-label={`Subscribe to ${blog.name}'s newsletter`}
>
<IconMailPlus size={16} />
</a>
)}
{blog.mastodon && (
<a
class="brand-mastodon"
href={blog.mastodon}
aria-label={`Follow ${blog.name} on Mastodon`}
>
<IconBrandMastodon size={16} />
</a>
)}
</td>
</tr>
))
}
</tbody>
</table>
<p>
Head on over to <a href="https://blogroll.org">blogroll.org</a> to find more blogs to follow or search for feeds using <a href="https://feedle.world">feedle</a>.
Head on over to <a href="https://blogroll.org">blogroll.org</a> to find more
blogs to follow or search for feeds using <a href="https://feedle.world"
>feedle</a
>.
</p>
</Layout>
</Layout>

4
src/pages/blogroll.opml.js
View file

@ -1,5 +1,5 @@
import { fetchBlogroll } from "@utils/data/blogroll";
import { fetchGlobals } from "@utils/data/globals";
import { fetchBlogroll } from "@utils/data/blogroll.js";
import { fetchGlobals } from "@utils/data/global/index.js";
export async function GET() {
try {

2
src/pages/books/[isbn].astro
View file

@ -5,7 +5,7 @@ import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
import ProgressBar from "@components/media/ProgressBar.astro";
import { IconArrowLeft, IconHeart, IconNeedle } from "@tabler/icons-react";
import { fetchBookByUrl } from "@utils/data/dynamic/bookByUrl.js";
import { fetchGlobalData } from '@utils/data/global/index.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
const { isbn } = Astro.params;

5
src/pages/books/index.astro
View file

@ -3,7 +3,7 @@ import Layout from "@layouts/Layout.astro";
import Rss from "@components/blocks/banners/Rss.astro";
import ProgressBar from "@components/media/ProgressBar.astro";
import { fetchBooks } from "@utils/data/books.js";
import { fetchGlobalData } from '@utils/data/global/index.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
import { md, htmlTruncate } from "@utils/helpers/general.js";
const books = await fetchBooks();
@ -30,7 +30,6 @@ const bookYearLinks = (years) =>
---
<Layout
globals={globals}
pageTitle={title}
description={description}
updated={updated}
@ -43,7 +42,7 @@ const bookYearLinks = (years) =>
>{currentBookCount} books</strong
> this year.
</p>
<p set:html={bookYearLinks(books.years)}></p>
<p set:html={bookYearLinks(books.years)} />
<Rss
url="/feeds/books"
text="Subscribe to my books feed or follow along on this page"

27
src/pages/books/years/[year].astro
View file

@ -2,8 +2,12 @@
import Layout from "@layouts/Layout.astro";
import Grid from "@components/media/Grid.astro";
import { IconArrowLeft } from "@tabler/icons-react";
import { filterBooksByStatus, findFavoriteBooks, mediaLinks } from "@utils/helpers/media.js";
import { fetchGlobalData } from '@utils/data/global/index.js';
import {
filterBooksByStatus,
findFavoriteBooks,
mediaLinks,
} from "@utils/helpers/media.js";
import { fetchGlobalData } from "@utils/data/global/index.js";
import { fetchBooks } from "@utils/data/books.js";
import { DateTime } from "luxon";
@ -26,21 +30,30 @@ const description = isCurrentYear
const intro = isCurrentYear
? `
I've finished <strong class="highlight-text">${bookData.length} books</strong> this year.
${favoriteBooks ? ` Among my favorites are ${favoriteBooks}.` : ''}
${favoriteBooks ? ` Among my favorites are ${favoriteBooks}.` : ""}
`
: `
I finished <strong class="highlight-text">${bookData.length} books</strong> in
<strong class="highlight-text">${year}</strong>.
${favoriteBooks ? ` Among my favorites were ${favoriteBooks}.` : ''}
${favoriteBooks ? ` Among my favorites were ${favoriteBooks}.` : ""}
`;
---
<Layout globals={globals} pageTitle={pageTitle} description={description} schema="books-year">
<Layout
pageTitle={pageTitle}
description={description}
schema="books-year"
>
<a href="/books" class="back-link">
<IconArrowLeft size={18} /> Back to books
</a>
<h2 class="page-title">{year} / Books</h2>
<div set:html={intro}></div>
<div set:html={intro} />
<hr />
<Grid globals={globals} data={bookData} shape="vertical" count={200} loading="eager" />
<Grid
data={bookData}
shape="vertical"
count={200}
loading="eager"
/>
</Layout>

12
src/pages/feeds/all.json.js
View file

@ -1,8 +1,8 @@
import { generateJsonFeed } from '@utils/generateJsonFeed';
import { fetchGlobals } from '@utils/data/globals';
import { fetchActivity } from '@utils/data/activity';
import fs from 'fs/promises';
import path from 'path';
import { generateJsonFeed } from "@utils/generateJsonFeed.js";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchActivity } from "@utils/data/activity.js";
import fs from "fs/promises";
import path from "path";
export async function getStaticPaths() {
const globals = await fetchGlobals();
@ -15,7 +15,7 @@ export async function getStaticPaths() {
data: activity,
});
const filePath = path.resolve('public/feeds/all.json');
const filePath = path.resolve("public/feeds/all.json");
await fs.mkdir(path.dirname(filePath), { recursive: true });
await fs.writeFile(filePath, feed);

4
src/pages/feeds/all.xml.js
View file

@ -1,6 +1,6 @@
import { generateRssFeed } from "@utils/generateRssFeed";
import { fetchGlobals } from "@utils/data/globals";
import { fetchActivity } from "@utils/data/activity";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchActivity } from "@utils/data/activity.js";
import fs from "fs/promises";
import path from "path";

6
src/pages/feeds/books.json.js
View file

@ -1,6 +1,6 @@
import { generateJsonFeed } from "@utils/generateJsonFeed";
import { fetchGlobals } from "@utils/data/globals";
import { fetchBooks } from "@utils/data/books";
import { generateJsonFeed } from "@utils/generateJsonFeed.js";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchBooks } from "@utils/data/books.js";
import fs from "fs/promises";
import path from "path";

4
src/pages/feeds/books.xml.js
View file

@ -1,6 +1,6 @@
import { generateRssFeed } from "@utils/generateRssFeed";
import { fetchGlobals } from "@utils/data/globals";
import { fetchBooks } from "@utils/data/books";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchBooks } from "@utils/data/books.js";
import fs from "fs/promises";
import path from "path";

6
src/pages/feeds/links.json.js
View file

@ -1,6 +1,6 @@
import { generateJsonFeed } from "@utils/generateJsonFeed";
import { fetchGlobals } from "@utils/data/globals";
import { fetchLinks } from "@utils/data/links";
import { generateJsonFeed } from "@utils/generateJsonFeed.js";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchLinks } from "@utils/data/links.js";
import fs from "fs/promises";
import path from "path";

2
src/pages/feeds/links.xml.js
View file

@ -1,5 +1,5 @@
import { generateRssFeed } from "@utils/generateRssFeed";
import { fetchGlobals } from "@utils/data/globals";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchLinks } from "@utils/data/links";
import fs from "fs/promises";
import path from "path";

4
src/pages/feeds/movies.json.js
View file

@ -1,5 +1,5 @@
import { generateJsonFeed } from '@utils/generateJsonFeed';
import { fetchGlobals } from '@utils/data/globals';
import { generateJsonFeed } from '@utils/generateJsonFeed.js';
import { fetchGlobals } from '@utils/data/globals.js';
import { fetchMovies } from '@utils/data/movies';
import fs from 'fs/promises';
import path from 'path';

4
src/pages/feeds/movies.xml.js
View file

@ -1,6 +1,6 @@
import { generateRssFeed } from "@utils/generateRssFeed";
import { fetchGlobals } from "@utils/data/globals";
import { fetchMovies } from "@utils/data/movies";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchMovies } from "@utils/data/movies.js";
import fs from "fs/promises";
import path from "path";

6
src/pages/feeds/posts.json.js
View file

@ -1,6 +1,6 @@
import { generateJsonFeed } from "@utils/generateJsonFeed";
import { fetchGlobals } from "@utils/data/globals";
import { fetchAllPosts } from "@utils/data/posts";
import { generateJsonFeed } from "@utils/generateJsonFeed.js";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchAllPosts } from "@utils/data/posts.js";
import fs from "fs/promises";
import path from "path";

4
src/pages/feeds/posts.xml.js
View file

@ -1,6 +1,6 @@
import { generateRssFeed } from "@utils/generateRssFeed";
import { fetchGlobals } from "@utils/data/globals";
import { fetchAllPosts } from "@utils/data/posts";
import { fetchGlobals } from "@utils/data/globals.js";
import { fetchAllPosts } from "@utils/data/posts.js";
import fs from "fs/promises";
import path from "path";

2
src/pages/humans.txt.js
View file

@ -1,4 +1,4 @@
import { fetchGlobals } from '@utils/data/globals';
import { fetchGlobals } from '@utils/data/globals.js';
export async function GET() {
try {

19
src/pages/index.astro
View file

@ -1,18 +1,19 @@
---
import Layout from '@layouts/Layout.astro';
import Intro from '@components/home/Intro.astro';
import RecentActivity from '@components/home/RecentActivity.astro';
import RecentPosts from '@components/home/RecentPosts.astro';
import { fetchGlobalData } from '@utils/data/global/index.js';
import Layout from "@layouts/Layout.astro";
import Intro from "@components/home/Intro.astro";
import RecentActivity from "@components/home/RecentActivity.astro";
import RecentPosts from "@components/home/RecentPosts.astro";
import { fetchGlobalData } from "@utils/data/global/index.js";
const { globals } = await fetchGlobalData(Astro);
const schema = 'blog';
const schema = "blog";
const pageTitle = globals.site_name;
const description = 'This is a blog post description';
const description = "This is a blog post description";
const ogImage = globals.cdn_url + globals.avatar;
const fullUrl = globals.url + '/blog/my-post';
const fullUrl = globals.url + "/blog/my-post";
const themeColor = globals.theme_color;
---
<Layout
pageTitle={pageTitle}
description={description}
@ -24,4 +25,4 @@ const themeColor = globals.theme_color;
<Intro intro={globals.intro} />
<RecentActivity />
<RecentPosts />
</Layout>
</Layout>

63
src/pages/links.astro
View file

@ -3,16 +3,20 @@ import Layout from "@layouts/Layout.astro";
import Paginator from "@components/nav/Paginator.astro";
import RssBanner from "@components/blocks/banners/Rss.astro";
import { fetchLinks } from "@utils/data/links.js";
import { fetchGlobalData } from '@utils/data/global/index.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
const { globals } = await fetchGlobalData(Astro);
const links = await fetchLinks();
const title = "Links";
const description = "These are links I've liked or otherwise found interesting. They're all added manually, after having been read and, I suppose, properly considered.";
const description =
"These are links I've liked or otherwise found interesting. They're all added manually, after having been read and, I suppose, properly considered.";
const pageSize = 30;
const currentPage = parseInt(Astro.url.searchParams.get("page") || "1", 10);
const totalPages = Math.ceil(links.length / pageSize);
const paginatedLinks = links.slice((currentPage - 1) * pageSize, currentPage * pageSize);
const paginatedLinks = links.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
);
const pagination = {
currentPage,
@ -29,37 +33,40 @@ const pagination = {
---
<Layout
globals={globals}
pageTitle={title}
description={description}
currentUrl={Astro.url.pathname}
>
{currentPage === 1 && (
<>
<h2 class="page-title">{title}</h2>
<p>{description}</p>
<RssBanner
url="/feeds/links"
text="Subscribe to my links feed or follow along on this page"
/>
<hr />
</>
)}
{
currentPage === 1 && (
<>
<h2 class="page-title">{title}</h2>
<p>{description}</p>
<RssBanner
url="/feeds/links"
text="Subscribe to my links feed or follow along on this page"
/>
<hr />
</>
)
}
<div class="link-grid">
{paginatedLinks.map((link) => (
<div class="link-box">
<a href={link.link} title={link.title}>
<strong>{link.title}</strong>
</a>
{link.author && (
<>
{" via "}
<a href={link.author.url}>{link.author.name}</a>
</>
)}
</div>
))}
{
paginatedLinks.map((link) => (
<div class="link-box">
<a href={link.link} title={link.title}>
<strong>{link.title}</strong>
</a>
{link.author && (
<>
{" via "}
<a href={link.author.url}>{link.author.name}</a>
</>
)}
</div>
))
}
</div>
<Paginator pagination={pagination} />

133
src/pages/music/artists/[slug].astro Normal file
View file

@ -0,0 +1,133 @@
---
import Layout from "@layouts/Layout.astro";
import ToggleContent from "@components/utils/ToggleContent.astro";
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
import { IconArrowLeft, IconHeart, IconNeedle, IconMapPin, IconDeviceSpeaker } from "@tabler/icons-react";
import { fetchGlobalData } from "@utils/data/global/index.js";
import { fetchArtistByUrl } from "@utils/data/dynamic/artistByUrl.js";
const { globals } = await fetchGlobalData(Astro);
const artist = await fetchArtistByUrl(Astro.url.pathname);
if (!artist) return Astro.redirect("/404", 404);
const pageTitle = `${artist.name} / Music`;
const description = artist.description || `Learn more about ${artist.name}`;
const alt = `${artist.name} / ${artist.country}`;
const playLabel = artist.total_plays === 1 ? "play" : "plays";
---
<Layout pageTitle={pageTitle} description={description} schema="artist">
<a href="/music" class="back-link">
<IconArrowLeft size={18} /> Back to music
</a>
<article class="artist-focus">
<div class="artist-display">
<img
srcset={`
${globals.cdn_url}${artist.image}?class=w200&type=webp 200w,
${globals.cdn_url}${artist.image}?class=w600&type=webp 400w,
${globals.cdn_url}${artist.image}?class=w800&type=webp 800w
`}
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
800px"
src={`${globals.cdn_url}${artist.image}?class=w200&type=webp`}
alt={alt}
loading="eager"
decoding="async"
width="200"
height="200"
/>
<div class="media-meta">
<span class="title"><strong>{artist.name}</strong></span>
<span class="sub-meta country">
<IconMapPin size={18} /> {artist.country}
</span>
{artist.favorite && (
<span class="sub-meta favorite">
<IconHeart size={18} /> This is one of my favorite artists!
</span>
)}
{artist.tattoo && (
<span class="sub-meta tattoo">
<IconNeedle size={18} /> I have a tattoo inspired by this artist!
</span>
)}
{artist.total_plays > 0 && (
<span class="sub-meta">
<strong class="highlight-text">{artist.total_plays} {playLabel}</strong>
</span>
)}
<span class="sub-meta">
<a href={artist.genre.url} title={`Learn more about ${artist.genre.name}`}>
{artist.genre.name}
</a>
</span>
</div>
</div>
<AssociatedMedia
artists={artist.related_artists}
books={artist.books}
genres={artist.genres}
movies={artist.movies}
posts={artist.posts}
shows={artist.shows}
/>
{artist.description && (
<>
<h2>Overview</h2>
<ToggleContent content={artist.description} />
</>
)}
{artist.concerts && (
<>
<p id="concerts" class="concerts">
<IconDeviceSpeaker size={18} /> I've seen this artist live!
</p>
<ul>
{artist.concerts.map((concert) => {
const venue = concert.venue_latitude && concert.venue_longitude
? `<a href="https://www.openstreetmap.org/?mlat=${concert.venue_latitude}&mlon=${concert.venue_longitude}#map=18/${concert.venue_latitude}/${concert.venue_longitude}">${concert.venue_name_short}</a>`
: concert.venue_name_short;
return (
<li>
On <strong class="highlight-text">{concert.date.toLocaleString(DateTime.DATE_MED)}</strong>
{venue && <> at {venue}</>}
{concert.notes && (
<span> — {concert.notes}</span>
)}
</li>
);
})}
</ul>
</>
)}
{artist.albums && (
<>
<table>
<tr>
<th>Album</th>
<th>Plays</th>
<th>Year</th>
</tr>
{artist.albums.map((album) => (
<tr>
<td>{album.name}</td>
<td>{album.total_plays}</td>
<td>{album.release_year}</td>
</tr>
))}
</table>
<p>
<em>These are the albums by this artist that are in my collection, not necessarily a comprehensive discography.</em>
</p>
</>
)}
</article>
</Layout>

15
src/pages/music/releases.ics.js
View file

@ -1,23 +1,24 @@
import { albumReleasesCalendar } from '@utils/albumReleasesCalendar';
import { fetchAlbumReleases } from '@utils/data/albumReleases';
import { albumReleasesCalendar } from "@utils/albumReleasesCalendar.js";
import { fetchAlbumReleases } from "@utils/data/albumReleases.js";
export async function GET() {
try {
const { all: albumReleases } = await fetchAlbumReleases();
const icsContent = await albumReleasesCalendar(albumReleases);
if (!icsContent) return new Response('Error generating ICS file', { status: 500 });
if (!icsContent)
return new Response("Error generating ICS file", { status: 500 });
return new Response(icsContent, {
status: 200,
headers: {
'Content-Type': 'text/calendar',
'Content-Disposition': 'attachment; filename="releases.ics"',
"Content-Type": "text/calendar",
"Content-Disposition": 'attachment; filename="releases.ics"',
},
});
} catch (error) {
console.error('Error generating album releases ICS file:', error);
return new Response('Error generating album releases ICS file', {
console.error("Error generating album releases ICS file:", error);
return new Response("Error generating album releases ICS file", {
status: 500,
});
}

52
src/pages/posts/[...page].astro
View file

@ -1,12 +1,12 @@
---
import { getCollection } from 'astro:content';
import { IconStar } from '@tabler/icons-react';
import { getCollection } from "astro:content";
import { IconStar } from "@tabler/icons-react";
import { fetchAllPosts } from "@data/posts.js";
import { fetchGlobalData } from '@utils/data/global/index.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
import Layout from "@layouts/Layout.astro";
import Paginator from '@components/nav/Paginator.astro';
import { md } from '@utils/helpers/general.js';
import { DateTime } from 'luxon';
import Paginator from "@components/nav/Paginator.astro";
import { md } from "@utils/helpers/general.js";
import { DateTime } from "luxon";
const posts = await fetchAllPosts();
const { page } = Astro.props;
@ -35,25 +35,23 @@ const pagination = {
};
---
<Layout
globals={globals}
pageTitle="All posts"
currentUrl={currentUrl}
>
{paginatedPosts.map((post) => (
<article>
<div class="post-meta">
{post.featured && <IconStar size={16} />}
<time datetime={post.date}>
{DateTime.fromISO(post.date).toLocaleString(DateTime.DATE_FULL)}
</time>
</div>
<h3>
<a href={post.url}>{post.title}</a>
</h3>
<p set:html={md(post.description)}></p>
</article>
))}
<Layout pageTitle="All posts" currentUrl={currentUrl}>
{
paginatedPosts.map((post) => (
<article>
<div class="post-meta">
{post.featured && <IconStar size={16} />}
<time datetime={post.date}>
{DateTime.fromISO(post.date).toLocaleString(DateTime.DATE_FULL)}
</time>
</div>
<h3>
<a href={post.url}>{post.title}</a>
</h3>
<p set:html={md(post.description)} />
</article>
))
}
<Paginator pagination={pagination} />
</Layout>
<Paginator pagination={pagination} />
</Layout>

8
src/pages/posts/[year]/[title].astro
View file

@ -3,16 +3,16 @@ import { IconStar } from "@tabler/icons-react";
import { fetchAllPosts } from "@data/posts.js";
import { fetchAnalyticsData } from "@data/analytics.js";
import { fetchLinks } from "@data/links.js";
import { fetchGlobalData } from '@utils/data/global/index.js';
import { md } from '@utils/helpers/general.js';
import { getPopularPosts } from '@utils/getPopularPosts.js';
import { fetchGlobalData } from "@utils/data/global/index.js";
import { md } from "@utils/helpers/general.js";
import { getPopularPosts } from "@utils/getPopularPosts.js";
const analytics = await fetchAnalyticsData();
const links = await fetchLinks();
const posts = await fetchAllPosts();
const popularPosts = getPopularPosts(posts, analytics);
import AddonLinks from '@components/blocks/links/AddonLinks.astro';
import AddonLinks from "@components/blocks/links/AddonLinks.astro";
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
import BlockRenderer from "@components/blocks/BlockRenderer.astro";
import Coffee from "@components/blocks/banners/Coffee.astro";

25
src/utils/data/dynamic/artistByUrl.js Normal file
View file

@ -0,0 +1,25 @@
import { createClient } from "@supabase/supabase-js";
const SUPABASE_URL = import.meta.env.SUPABASE_URL;
const SUPABASE_KEY = import.meta.env.SUPABASE_KEY;
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
const artistCache = {};
export async function fetchArtistByUrl(url) {
if (import.meta.env.MODE === "development" && artistCache[url]) return artistCache[url];
const { data: artist, error } = await supabase
.from("optimized_artists")
.select("*")
.eq("url", url)
.limit(1);
if (error) {
console.error("Error fetching artist:", error);
return null;
}
if (import.meta.env.MODE === "development") artistCache[url] = artist[0];
return artist[0];
}

8
src/utils/data/dynamic/bookByUrl.js
View file

@ -3,11 +3,10 @@ import { createClient } from "@supabase/supabase-js";
const SUPABASE_URL = import.meta.env.SUPABASE_URL;
const SUPABASE_KEY = import.meta.env.SUPABASE_KEY;
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
const bookCache = {};
export async function fetchBookByUrl(url) {
if (bookCache[url]) return bookCache[url];
if (import.meta.env.MODE === "development" && bookCache[url]) return bookCache[url];
const { data: book, error } = await supabase
.from("optimized_books")
@ -15,12 +14,11 @@ export async function fetchBookByUrl(url) {
.eq("url", url)
.limit(1);
if (error || !book) {
if (error || !book || book.length === 0) {
console.error(`Error fetching book with URL ${url}:`, error);
return null;
}
bookCache[url] = book[0];
if (import.meta.env.MODE === "development") bookCache[url] = book[0];
return book[0];
}