79 lines
2.1 KiB
Plaintext
79 lines
2.1 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 date1 = new Date(link1.isoDateAdded).getTime();
|
|
const date2 = new Date(link2.isoDateAdded).getTime();
|
|
return date2 - date1;
|
|
}
|
|
|
|
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">
|
|
<FormattedDate className="dt-published" date={link.isoDateAdded} />
|
|
<a class="u-url p-name" href={link.href} set:html={link.title} />
|
|
<p class="p-description" set:html={link.description} />
|
|
</li>
|
|
)) }
|
|
</ul>
|
|
)) }
|
|
|
|
{ (maxEntries !== undefined && maxEntries < allLinks.length)
|
|
? <p class="full-feed-link"><a href="/links">All links</a></p>
|
|
: <></>
|
|
}
|
|
</section>
|