chore: myriad fixes + artist pages
This commit is contained in:
parent
aec8471b06
commit
ff00020b70
53 changed files with 753 additions and 486 deletions
|
|
@ -1,4 +1,6 @@
|
|||
---
|
||||
import IconMapper from "@components/IconMapper.astro";
|
||||
|
||||
const {
|
||||
artists = [],
|
||||
books = [],
|
||||
|
|
|
|||
|
|
@ -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} />}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue