Merge pull request #295 from chrismwilliams/refactor-blog-hero

Refactor blog hero

README.md

@@ -135,7 +135,7 @@ This integration brings a static search feature for searching blog posts. In its
 
 Search results only includes blog posts. If you would like to include other/all your pages, remove/re-locate the attribute `data-pagefind-body` to the article tag found in `src/layouts/BlogPost.astro`.
 
-It also allows you to filter posts by tags added in the frontmatter of blog posts. If you would rather remove this, remove the data attribute `data-pagefind-filter="tag"` from the link in `src/components/blog/Hero.astro`.
+It also allows you to filter posts by tags added in the frontmatter of blog posts. If you would rather remove this, remove the data attribute `data-pagefind-filter="tag"` from the link in `src/components/blog/Masthead.astro`.
 
 If you would rather not include this integration, simply remove the component `src/components/Search.astro`, and uninstall both `@pagefind/default-ui` & `pagefind` from package.json. You will also need to remove the postbuild script from here as well.
 

src/components/FormattedDate.astro

@@ -12,6 +12,4 @@ const { date, dateTimeOptions, ...attrs } = Astro.props;
 const postDate = getFormattedDate(date, dateTimeOptions);
 ---
 
-<time datetime={date.toISOString()} {...attrs}>
-	{postDate}
-</time>
+<time datetime={date.toISOString()} {...attrs}>{postDate}</time>

src/components/SocialList.astro

@@ -27,12 +27,12 @@ const socialLinks: {
 			socialLinks.map(({ friendlyName, isWebmention, link, name }) => (
 				<li class="flex">
 					<a
-						class="inline-block p-1 sm:hover:text-link"
+						class="inline-block sm:hover:text-link"
 						href={link}
 						rel={`noreferrer ${isWebmention ? "me authn" : ""}`}
 						target="_blank"
 					>
-						<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name={name} />
+						<Icon aria-hidden="true" class="h-8 w-8" focusable="false" name={name} />
 						<span class="sr-only">{friendlyName}</span>
 					</a>
 				</li>

src/components/blog/Hero.astro → src/components/blog/Masthead.astro

@@ -42,9 +42,8 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 	</p>
 	{
 		data.updatedDate && (
-			<span class="rounded-lg bg-quote/10 p-1 text-quote">
-				Last Updated:
-				<FormattedDate class="ms-1" date={data.updatedDate} dateTimeOptions={dateTimeOptions} />
+			<span class="rounded-lg bg-quote/10 px-2 py-1 text-quote">
+				Updated:<FormattedDate class="ms-1" date={data.updatedDate} dateTimeOptions={dateTimeOptions} />
 			</span>
 		)
 	}

src/layouts/BlogPost.astro

@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 
-import BlogHero from "@/components/blog/Hero.astro";
+import Masthead from "@/components/blog/Masthead.astro";
 import TOC from "@/components/blog/TOC.astro";
 import WebMentions from "@/components/blog/webmentions/index.astro";
 
@@ -25,7 +25,7 @@ const { headings } = await post.render();
 	<div class="gap-x-10 lg:flex lg:items-start">
 		{!!headings.length && <TOC headings={headings} />}
 		<article class="flex-grow break-words" data-pagefind-body>
-			<div id="blog-hero"><BlogHero content={post} /></div>
+			<div id="blog-hero"><Masthead content={post} /></div>
 			<div
 				class="prose prose-sm prose-cactus mt-12 prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-accent sm:prose-headings:before:content-['#'] sm:prose-th:before:content-none"
 			>

src/pages/index.astro

@@ -56,9 +56,9 @@ const cactusTech: { desc: string; href: string; title: string }[] = [
 	<section>
 		<h1 class="title mb-6">Hello World!</h1>
 		<p class="mb-4">
-			Hi, I’m a theme for Astro, an example of how you can use this starter to create a personal
-			blog. If you want to know more about how you can customise me, add more posts, and make it
-			your own, click on the github icon link below and it will take you to my repo.
+			Hi, I’m a theme for Astro, a simple starter that you can use to create your website or blog.
+			If you want to know more about how you can customise me, add more posts, and make it your own,
+			click on the GitHub icon link below and it will take you to my repo.
 		</p>
 		<SocialList />
 	</section>