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

fix: link display in blogroll table

Browse source
This commit is contained in:
Cory Dransfeldt 2024-11-22 04:50:28 -08:00
parent b33f318e80
commit f289c3d3d0
No known key found for this signature in database
1 changed files with 40 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/pages/blogroll.astro
View file

@ -1,16 +1,9 @@
--- ---
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import icons from "@cdransf/astro-tabler-icons";
import { fetchBlogroll } from "@utils/data/blogroll.js"; import { fetchBlogroll } from "@utils/data/blogroll.js";
export const prerender = true; export const prerender = true;
const {
IconRss,
IconJson,
IconMailPlus,
IconBrandMastodon,
} = icons;
const blogroll = await fetchBlogroll(); const blogroll = await fetchBlogroll();
const title = "Blogroll"; const title = "Blogroll";
const description = const description =
@ -24,10 +17,8 @@ const description =
> >
<h2 class="page-title">{title}</h2> <h2 class="page-title">{title}</h2>
<p> <p>
You can <a You can <a href="/blogroll.opml">download an OPML file</a> containing all of
href="/blogroll.opml" these feeds and import them into your RSS reader.
>download an OPML file</a
> containing all of these feeds and import them into your RSS reader.
</p> </p>
<table> <table>
<thead> <thead>
@ -45,43 +36,44 @@ const description =
<td> <td>
<a href={blog.url}>{blog.url.replace("https://", "")}</a> <a href={blog.url}>{blog.url.replace("https://", "")}</a>
</td> </td>
<td class="blog-roll-icons"> <td>
{blog.rss_feed && ( {[
<a blog.rss_feed && (
class="rss" <a
href={blog.rss_feed} class="rss"
aria-label={`RSS feed for ${blog.name}`} href={blog.rss_feed}
> aria-label={`RSS feed for ${blog.name}`}
<div set:html={IconRss({ size: 16 })}/> >RSS</a>
</a> ),
)} blog.json_feed && (
{blog.json_feed && ( <a
<a class="json"
class="json" href={blog.json_feed}
href={blog.json_feed} aria-label={`JSON feed for ${blog.name}`}
aria-label={`JSON feed for ${blog.name}`} >JSON</a>
> ),
<div set:html={IconJson({ size: 16 })}/> blog.newsletter && (
</a> <a
)} class="mail-plus"
{blog.newsletter && ( href={blog.newsletter}
<a aria-label={`Subscribe to ${blog.name}'s newsletter`}
class="mail-plus" >Newsletter</a>
href={blog.newsletter} ),
aria-label={`Subscribe to ${blog.name}'s newsletter`} blog.mastodon && (
> <a
<div set:html={IconMailPlus({ size: 16 })}/> class="brand-mastodon"
</a> href={blog.mastodon}
)} aria-label={`Follow ${blog.name} on Mastodon`}
{blog.mastodon && ( >Mastodon</a>
<a ),
class="brand-mastodon" ]
href={blog.mastodon} .filter(Boolean)
aria-label={`Follow ${blog.name} on Mastodon`} .map((link, index, array) => (
> <>
<div set:html={IconBrandMastodon({ size: 16 })}/> {link}
</a> {index < array.length - 1 && " / "}
)} </>
))}
</td> </td>
</tr> </tr>
)) ))