joeac/joeac.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Styling overhaul

Browse Source
This commit is contained in:
Joe Carstairs
2024-05-12 08:33:19 +01:00
parent 88c6e8a658
commit 0f75bf3443
11 changed files with 210 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
website/src/components/BlogFeed.astro
View File

@@ -54,23 +54,19 @@ const canonicalBlogUrl = new URL('blog', Astro.site)
This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a>
</p>
<p>
<p hidden>
<a class="u-url" href={canonicalBlogUrl}>Permalink</a>
</p>
</aside>
<ul>
{ distinctYears.map(year => (
<li>
{year}
<ul>
{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
<li class="h-entry">
<a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>
</li>
)) }
</ul>
</li>
)) }
</ul>
</section>
{ distinctYears.map(year => (
<h3>{year}</h3>
<ul>
{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
<li class="h-entry">
<a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>
</li>
)) }
</ul>
)) }
</section>

28
website/src/components/Me.astro
View File

@@ -4,13 +4,19 @@
<section class="h-card">
<img class="u-photo" src="/images/headshot.jpg" height="256" width="256" />
<div>
<header>
<h1>
<a class="p-name u-url u-uid" href="https://joeac.net" rel="me">
Joe Carstairs
</a>
Joe Carstairs
</h1>
<div hidden>
<a class="p-name u-url u-uid" href="https://joeac.net" rel="me">
Permalink
</a>
</div>
</header>
<div class="h-card__text">
<p>
Hi! 👋 My name is <span class="p-given-name">Joe</span>
<span class="p-family-name">Carstairs</span>. I’m a
@@ -33,11 +39,13 @@
</p>
<p>
Or get me on
<a href="https://www.facebook.com/joe.carstairs.5" rel="me">Facebook</a>,
<a href="https://mastodon.social/@joe_carstairs" rel="me">Mastodon</a>,
<a href="https://www.linkedin.com/in/joe-carstairs-0aa936277" rel="me">LinkedIn</a>,
or <a href="https://github.com/joeacarstairs" rel="me">GitHub</a>.
<small>
Or get me on
<a href="https://www.facebook.com/joe.carstairs.5" rel="me">Facebook</a>,
<a href="https://mastodon.social/@joe_carstairs" rel="me">Mastodon</a>,
<a href="https://www.linkedin.com/in/joe-carstairs-0aa936277" rel="me">LinkedIn</a>,
or <a href="https://github.com/joeacarstairs" rel="me">GitHub</a>.
</small>
</p>
</div>
</section>
</section>

13
website/src/components/Navbar.astro Normal file
View File

@@ -0,0 +1,13 @@
---
---
<nav>
<li>
<ul>
<a href="/">Home</a>
</ul>
<ul>
<a href="/blog">Blog</a>
</ul>
</li>
</nav>

18
website/src/layouts/BlogPost.astro
View File

@@ -2,6 +2,7 @@
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import FormattedDate from '../components/FormattedDate.astro';
import Navbar from '../components/Navbar.astro';
type Props = CollectionEntry<'blog'>['data'];
@@ -22,11 +23,12 @@ const updatedDateStr = updatedDate ?
</head>
<body>
<Navbar />
<article class="h-entry">
<aside>
<span>
This is a blog post by
<a class="p-author h-card h-card--minimal" href="/">Joe Carstairs</a>.
<a class="p-author h-card" href="/">Joe Carstairs</a>.
</span>
{ updatedDate
? (
@@ -34,17 +36,17 @@ const updatedDateStr = updatedDate ?
<span>Originally published: <FormattedDate date={pubDateStr} className="dt-published"/>.</span>
) : <span>Published: <FormattedDate date={pubDateStr} className="dt-published"/>.</span>
}
<span>Go back to his <a href="/blog">blog</a> if you like.</span>
<span><a class="u-url uid" href={canonicalUrl}>Permalink</a></span>
<span hidden><a class="u-url uid" href={canonicalUrl}>Permalink</a></span>
</aside>
<h1 class="h-name">{title}</h1>
<header>
<h1 class="h-name">{title}</h1>
<p class="p-summary" set:html={description} />
</header>
<p class="p-summary" set:html={description} />
<div class="e-content">
<section class="e-content">
<slot />
</div>
</section>
</article>
</body>
</html>

6
website/src/layouts/Page.astro
View File

@@ -1,5 +1,6 @@
---
import BaseHead from "../components/BaseHead.astro";
import Navbar from "../components/Navbar.astro";
const { title, description } = Astro.props;
---
@@ -11,7 +12,10 @@ const { title, description } = Astro.props;
</head>
<body>
<slot />
<Navbar />
<main>
<slot />
</main>
</body>
</html>

2
website/src/pages/blog/index.astro
View File

@@ -2,6 +2,7 @@
import BaseHead from '../../components/BaseHead.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import BlogFeed from '../../components/BlogFeed.astro';
import Navbar from '../../components/Navbar.astro';
---
<!doctype html>
@@ -10,6 +11,7 @@ import BlogFeed from '../../components/BlogFeed.astro';
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<Navbar />
<main>
<BlogFeed headingLevel={1} />
</main>

2
website/src/pages/index.astro
View File

@@ -8,4 +8,4 @@ import Page from '../layouts/Page.astro';
<Page title={SITE_TITLE} description={SITE_DESCRIPTION}>
<Me />
<BlogFeed hideAuthor />
</Page>
</Page>