diff options
Diffstat (limited to 'website/src/components')
| -rw-r--r-- | website/src/components/BaseHead.astro | 1 | ||||
| -rw-r--r-- | website/src/components/BlogFeed.astro | 11 | ||||
| -rw-r--r-- | website/src/components/LinksFeed.astro | 77 | ||||
| -rw-r--r-- | website/src/components/Navbar.astro | 3 |
4 files changed, 89 insertions, 3 deletions
diff --git a/website/src/components/BaseHead.astro b/website/src/components/BaseHead.astro index e8e44ab..3d8223c 100644 --- a/website/src/components/BaseHead.astro +++ b/website/src/components/BaseHead.astro @@ -14,6 +14,7 @@ const { title, description, image = '/images/headshot.jpg' } = Astro.props; <link rel="stylesheet" href="/css/reset.css" /> <link rel="stylesheet" href="/css/base.css" /> <link rel="stylesheet" href="/css/hcard.css" /> +<link rel="stylesheet" href="/css/feed.css" /> <!-- Global Metadata --> <meta charset="utf-8" /> diff --git a/website/src/components/BlogFeed.astro b/website/src/components/BlogFeed.astro index c507d69..f0c34e7 100644 --- a/website/src/components/BlogFeed.astro +++ b/website/src/components/BlogFeed.astro @@ -38,6 +38,7 @@ function sortByPubDateDescending(post1: CollectionEntry<'blog'>, post2: Collecti } const headingElem = `h${headingLevel}`; +const subHeadingElem = `h${headingLevel + 1}` const canonicalBlogUrl = new URL('blog', Astro.site) --- @@ -45,12 +46,12 @@ const canonicalBlogUrl = new URL('blog', Astro.site) <section class="h-feed"> <Fragment set:html={` <${headingElem} class="p-name"> - My blog + My blog </${headingElem}> `} /> <aside> - <p class={hideAuthor ? 'hidden' : ''}> + <p hidden={hideAuthor}> This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a> </p> @@ -60,7 +61,11 @@ const canonicalBlogUrl = new URL('blog', Astro.site) </aside> { distinctYears.map(year => ( - <h3>{year}</h3> + <Fragment set:html={` + <${subHeadingElem}> + ${year} + </${subHeadingElem}> + `} /> <ul> { posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => ( <li class="h-entry"> diff --git a/website/src/components/LinksFeed.astro b/website/src/components/LinksFeed.astro new file mode 100644 index 0000000..a428395 --- /dev/null +++ b/website/src/components/LinksFeed.astro @@ -0,0 +1,77 @@ +--- +import FormattedDate from '../components/FormattedDate.astro'; +import LINKS from '../data/links.ts'; + +export interface Props { + headingLevel?: 1 | 2 | 3 | 4 | 5 | 6, + hideAuthor?: boolean, +}; + +const { headingLevel = 2, hideAuthor = false } = Astro.props; + +const headingElem = `h${headingLevel}`; +const subHeadingElem = `h${headingLevel + 1}` + +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}>{link.title}</a>. + {link.description} + Added: <FormattedDate date={link.isoDateAdded} /> + </li> + )) } + </ul> + )) } +</section> diff --git a/website/src/components/Navbar.astro b/website/src/components/Navbar.astro index c94944a..479f8b5 100644 --- a/website/src/components/Navbar.astro +++ b/website/src/components/Navbar.astro @@ -9,5 +9,8 @@ <li> <a href="/blog">Blog</a> </li> + <li> + <a href="/links">Links</a> + </li> </ul> </nav> |