Files
joeac.net/website/src/components/LinksFeed.astro
2024-07-15 16:14:41 +01:00

90 lines
2.5 KiB
Plaintext

---
import FormattedDate from '../components/FormattedDate.astro';
import allLinks from '../data/links.ts';
type Link = (typeof allLinks)[number];
export interface Props {
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6,
hideAuthor?: boolean,
maxEntries?: number,
};
const { headingLevel = 2, hideAuthor = false, maxEntries } = Astro.props;
const headingElem = `h${headingLevel}`;
const subHeadingElem = `h${headingLevel + 1}`
const links: Link[] = maxEntries === undefined
? allLinks
: allLinks.sort(sortByDateAddedDescending).slice(0, maxEntries);
const distinctYears: string[] = links
.map(link => link.isoDateAdded.slice(0,4))
.reduce<string[]>((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], [])
.sort((a, b) => Number.parseInt(b) - Number.parseInt(a));
function matchesYear(year: string) {
return (link: (typeof links)[number]) => link.isoDateAdded.slice(0,4) === year;
}
function sortByDateAddedDescending(link1: (typeof links)[number], link2: (typeof links)[number]) {
const year1 = Number.parseInt(link1.isoDateAdded.slice(0, 4));
const year2 = Number.parseInt(link2.isoDateAdded.slice(0, 4));
const month1 = Number.parseInt(link1.isoDateAdded.slice(5, 7));
const month2 = Number.parseInt(link2.isoDateAdded.slice(5, 7));
const day1 = Number.parseInt(link1.isoDateAdded.slice(8, 10));
const day2 = Number.parseInt(link2.isoDateAdded.slice(8, 10));
if (year1 !== year2) {
return year2 - year1;
} else if (month1 !== month2) {
return month2 - month1;
} else {
return day2 - day1;
}
}
const canonicalLinksUrl = new URL('links', Astro.site)
---
<section class="h-feed">
<Fragment set:html={`
<${headingElem} class="p-name">
My links
</${headingElem}>
`} />
<aside>
<p hidden={hideAuthor}>
These links are collected by <a class="p-author h-card" href="/">Joe Carstairs</a>
</p>
<p hidden>
<a class="u-url" href={canonicalLinksUrl}>Permalink</a>
</p>
</aside>
{ distinctYears.map(year => (
<Fragment set:html={`
<${subHeadingElem}>
${year}
</${subHeadingElem}>
`} />
<ul>
{ links.filter(matchesYear(year)).sort(sortByDateAddedDescending).map(link => (
<li class="h-entry e-content">
<a class="u-url p-name" href={link.href} set:html={link.title} />.
<Fragment set:html={link.description} />
Added: <FormattedDate date={link.isoDateAdded} />
</li>
)) }
</ul>
)) }
{ (maxEntries !== undefined && maxEntries < allLinks.length)
? <p class="full-feed-link"><a href="/links">All links</a></p>
: <></>
}
</section>