From f977ee338c7eff240c26c793d7340de4a7b5788b Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Wed, 5 Jun 2024 09:38:10 +0100 Subject: [PATCH] Adds Links page and fixes blog feed --- website/public/css/feed.css | 10 ++++ website/src/components/BaseHead.astro | 1 + website/src/components/BlogFeed.astro | 11 +++- website/src/components/LinksFeed.astro | 77 ++++++++++++++++++++++++++ website/src/components/Navbar.astro | 3 + website/src/data/links.ts | 4 +- website/src/pages/index.astro | 2 + website/src/pages/links.astro | 8 +++ 8 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 website/public/css/feed.css create mode 100644 website/src/components/LinksFeed.astro create mode 100644 website/src/pages/links.astro diff --git a/website/public/css/feed.css b/website/public/css/feed.css new file mode 100644 index 0000000..699a571 --- /dev/null +++ b/website/public/css/feed.css @@ -0,0 +1,10 @@ +.h-feed { + /* Assumes there is at most one level of subheading for sub-dividing entries */ + :is(h2, h3, h4, h5, h6) { + margin-block-start: var(--spacing-block-md); + } + + .h-entry { + margin-block-start: var(--spacing-block-sm); + } +} 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; + 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)
- My blog + My blog `} /> { distinctYears.map(year => ( -

{year}

+ + ${year} + + `} />
    { posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
  • 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((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) +--- + +
    + + My links + + `} /> + + + + { distinctYears.map(year => ( + + ${year} + + `} /> +
      + { LINKS.filter(matchesYear(year)).sort(sortByDateAddedDescending).map(link => ( +
    • + {link.title}. + {link.description} + Added: +
      • + )) } +
    + )) } +
    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 @@
  • Blog
    • +
  • + Links +
diff --git a/website/src/data/links.ts b/website/src/data/links.ts index cd1e746..6816149 100644 --- a/website/src/data/links.ts +++ b/website/src/data/links.ts @@ -7,7 +7,7 @@ type Link = { isoDateAdded: `20${Digit}${Digit}-${'0'|'1'}${Digit}-${'0'|'1'|'2'|'3'}${Digit}`, }; -const links: Link[] = [ +const LINKS: Link[] = [ { href: 'https://dl.acm.org/doi/pdf/10.1145/3613904.3642596', title: 'Is Stack Overflow Obsolete? An Empirical Study of the Characteristics of ChatGPT Answers to Stack Overflow Questions', @@ -28,4 +28,4 @@ const links: Link[] = [ }, ]; -export default links; +export default LINKS; diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index 4e9d87b..835b4d3 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -1,5 +1,6 @@ --- import BlogFeed from '../components/BlogFeed.astro'; +import LinksFeed from '../components/LinksFeed.astro'; import Me from '../components/Me.astro'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import Page from '../layouts/Page.astro'; @@ -8,4 +9,5 @@ import Page from '../layouts/Page.astro'; + diff --git a/website/src/pages/links.astro b/website/src/pages/links.astro new file mode 100644 index 0000000..1368e00 --- /dev/null +++ b/website/src/pages/links.astro @@ -0,0 +1,8 @@ +--- +import Page from '../layouts/Page.astro'; +import LinksFeed from '../components/LinksFeed.astro'; +--- + + + +