diff options
| -rw-r--r-- | website/public/css/base.css | 6 | ||||
| -rw-r--r-- | website/public/css/feed.css | 27 | ||||
| -rw-r--r-- | website/src/components/BlogFeed.astro | 44 | ||||
| -rw-r--r-- | website/src/components/LinksFeed.astro | 6 | ||||
| -rw-r--r-- | website/src/pages/index.astro | 4 |
5 files changed, 56 insertions, 31 deletions
diff --git a/website/public/css/base.css b/website/public/css/base.css index 676cd08..20a6e8e 100644 --- a/website/public/css/base.css +++ b/website/public/css/base.css @@ -109,7 +109,7 @@ img { [media-end content-start] minmax(var(--grid-max-content-width), auto) [content-end grid-end]; - column-gap: var(--spacing-block-sm); + column-gap: var(--spacing-block-sm); max-width: var(--grid-total-width); --body-margin-inline-end: 6rem; @@ -151,11 +151,11 @@ img { [media-end content-start] minmax(auto, var(--grid-max-content-width)) [content-end margin-start] - minmax(auto, var(--grid-max-content-width)) + auto [margin-end grid-end]; --grid-total-width: 80rem; - --grid-max-content-width: 36rem; + --grid-max-content-width: 40rem; } } diff --git a/website/public/css/feed.css b/website/public/css/feed.css index fc665ec..d2c5a03 100644 --- a/website/public/css/feed.css +++ b/website/public/css/feed.css @@ -1,16 +1,35 @@ /* Assumes there is at most one level of subheading for sub-dividing entries */ .h-feed :is(h2, h3, h4, h5, h6) { - margin-block-start: var(--spacing-block-md); + margin-block-start: var(--spacing-block-md); } .h-feed .h-entry { - margin-block-start: var(--spacing-block-xs); + display: flex; + flex-direction: column; +} + +.h-feed .h-entry + .h-entry { + margin-block-start: var(--spacing-block-md); +} + +.h-feed .h-entry > * { + order: 1; + margin: 0; +} + +.h-feed .h-entry .dt-published { + order: 0; + font-size: var(--font-size-sm); +} + +.h-feed .h-entry .p-name { + font-size: var(--font-size-md); } .h-feed .full-feed-link { - text-align: end; + text-align: end; } .h-feed :is(a.full-feed-link, .full-feed-link a)::after { - content: ' >' + content: " >"; } diff --git a/website/src/components/BlogFeed.astro b/website/src/components/BlogFeed.astro index 5d5f727..ce011ba 100644 --- a/website/src/components/BlogFeed.astro +++ b/website/src/components/BlogFeed.astro @@ -6,10 +6,11 @@ import FormattedDate from './FormattedDate.astro'; export interface Props { headingLevel?: 1 | 2 | 3 | 4 | 5 | 6, hideAuthor?: boolean, + hideSubheadings?: boolean, maxEntries?: number, }; -const { headingLevel = 2, hideAuthor = false, maxEntries } = Astro.props; +const { headingLevel = 2, hideSubheadings = false, hideAuthor = false, maxEntries } = Astro.props; const allPosts = (await getCollection('blog')).filter((post) => !post.data.hidden); @@ -32,41 +33,46 @@ function sortByPubDateDescending(post1: CollectionEntry<'blog'>, post2: Collecti return date2 - date1; } -const headingElem = `h${headingLevel}`; -const subHeadingElem = `h${headingLevel + 1}` +const HeadingElem = `h${headingLevel} class="p-name"`; +const SubHeadingElem = `h${headingLevel + 1}`; +const AuthorElem = `p${hideAuthor ? " hidden" : ""}`; const canonicalBlogUrl = new URL('blog', Astro.site) --- <section class="h-feed"> - <Fragment set:html={` - <${headingElem} class="p-name"> - My blog - </${headingElem}> - `} /> + <HeadingElem> + My blog + </HeadingElem> <aside> - <p hidden={hideAuthor}> + <AuthorElem> This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a> - </p> + </AuthorElem> <p hidden> <a class="u-url" href={canonicalBlogUrl}>Permalink</a> </p> </aside> - { distinctYears.map(year => ( - <Fragment set:html={` - <${subHeadingElem}> - ${year} - </${subHeadingElem}> - `} /> + { hideSubheadings + ? <ul> + { posts.sort(sortByPubDateDescending).map(post => ( + <li class="h-entry"> + <a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a> + <p class="p-summary" set:html={post.data.description} /> + <FormattedDate className="dt-published" date={post.data.pubDate} /> + </li> + )) } + </ul> + : distinctYears.map(year => ( + <SubHeadingElem>{year}</SubHeadingElem> <ul> { posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => ( <li class="h-entry"> - <a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>. - <Fragment set:html={post.data.description} /> - Added: <FormattedDate date={post.data.pubDate} /> + <a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a> + <p class="p-summary" set:html={post.data.description} /> + <FormattedDate className="dt-published" date={post.data.pubDate} /> </li> )) } </ul> diff --git a/website/src/components/LinksFeed.astro b/website/src/components/LinksFeed.astro index 9e7e788..1d837f0 100644 --- a/website/src/components/LinksFeed.astro +++ b/website/src/components/LinksFeed.astro @@ -63,9 +63,9 @@ const canonicalLinksUrl = new URL('links', Astro.site) <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} /> + <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> diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index cbd7037..c1f63e8 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -8,6 +8,6 @@ import Page from '../layouts/Page.astro'; <Page title={SITE_TITLE} description={SITE_DESCRIPTION}> <Me /> - <BlogFeed hideAuthor maxEntries={3} /> - <LinksFeed hideAuthor maxEntries={5} /> + <BlogFeed hideAuthor hideSubheadings maxEntries={1} /> + <LinksFeed hideAuthor maxEntries={1} /> </Page> |