style tweaks and add hightlings

posts/bletchley-park-tnmoc-holiday.md

@@ -2,7 +2,7 @@
 title: "Visit to Bletchley Park and The National Museum of Computing"
 slug: /bletchley-park-tnmoc-holiday/
 date: 2024-08-07
-tags: ["personal", "beige", "gruvbox"]
+tags: ["personal", "gruvbox", "highlight"]
 ---
 
 As part of our holiday this year my girlfriend and I went to visit

posts/new-job.md

@@ -12,7 +12,7 @@ professional development.
 
 <div style="display:flex; flex-direction: row; justify-content: center; margin:
     1rem 0;">
-<img src="./img/bbc-leave-gruv-small.png" width="300" />
+<img src="./img/bbc-leave-gruv-small.png" />
 </div>
 I worked with a variety of stakeholders on applications used internally within
 the Corporation. I was able to work across the frontend and the backend in a

src/pages/home.tsx

@@ -22,7 +22,7 @@ const HomePage = () => {
                   </div>
                 </h1>
                 <p className="leading-relaxed text-center sm:text-left md:text-left">
-                  software engineer at ITV, formerly BBC. this is my technical
+                  Software engineer at ITV, formerly BBC. This is my technical
                   scrapbook and digital garden.
                 </p>
               </div>
@@ -31,7 +31,12 @@ const HomePage = () => {
         </div>
       </div>
 
-      <PostListing title="recent posts" posts={posts.slice(0, 5)} />
+      <PostListing title="Recent posts" posts={posts.slice(0, 5)} />
+
+      <PostListing
+        title="Highlights"
+        posts={posts.filter((post) => post.tags.includes("highlight"))}
+      />
     </MainTemplate>
   )
 }

src/templates/BlogTemplate.tsx

@@ -5,41 +5,41 @@ import { convertDate } from "@/utils/convertDate"
 import { usePosts } from "@/hooks/usePosts"
 
 const BlogTemplate = () => {
-  const { slug } = useParams()
+	const { slug } = useParams()
-  const { posts } = usePosts()
+	const { posts } = usePosts()
-  const post = posts?.find((x) => x.slug === slug)
+	const post = posts?.find((x) => x.slug === slug)
 
-  return (
+	return (
-    <MainTemplate>
+		<MainTemplate>
-      <div className="container mx-auto p-4 grow">
+			<div className="container mx-auto p-4 grow">
-        {!post ? (
+				{!post ? (
-          <div>Loading...</div>
+					<div>Loading...</div>
-        ) : (
+				) : (
-          <article className="prose prose-lg max-w-none">
+					<article className="prose prose-lg max-w-none">
-            <header className="mb-6 pb-4">
+						<header className="mb-6 pb-4">
-              <h1 className="text-4xl font-semibold mb-4 leading-tight">
+							<h1 className="text-4xl font-semibold mb-4 leading-tight">
-                {post?.title}
+								{post?.title}
-              </h1>
+							</h1>
-              <div className="flex flex-wrap align-center gap-4 text-[#928374]">
+							<div className="flex flex-wrap align-center gap-4 text-[#928374]">
-                <time datetime={convertDate(post?.date)} className="text-sm ">
+								<time datetime={convertDate(post?.date)} className="text-sm ">
-                  {convertDate(post?.date)}
+									{convertDate(post?.date)}
-                </time>
+								</time>
-                <div className="flex flex-wrap gap-3 align-center">
+								<div className="flex flex-wrap gap-3 align-center">
-                  {post?.tags?.map((tag, i) => (
+									{post?.tags?.map((tag, i) => (
-                    <Link
+										<Link
-                      className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
+											className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
-                      key={i}
+											key={i}
-                      to={`/tags/${tag}`}
+											to={`/tags/${tag}`}
-                    >
+										>
-                      {tag}
+											{tag}
-                    </Link>
+										</Link>
-                  ))}
+									))}
-                </div>
+								</div>
-              </div>
+							</div>
-            </header>
+						</header>
 
-            <div
+						<div
-              className="
+							className="
 							[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fabd2f]!
 							[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#fabd2f]
 							[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#fabd2f]
@@ -55,7 +55,7 @@ const BlogTemplate = () => {
 							[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-[#504945] [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal		
 							[&>code]:relative [&>code]:rounded [&>code]:bg-[#504945] [&>code]:px-[0.3rem] [&>code]:py-[0.2rem] [&>code]:font-mono [&>code]:text-sm [&>code]:font-normal
 							[&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
-							[&>figure>img]:w-full
+							[&>figure>img]:max-w-2xl [&>figure>img]:max-h-[700px] [&>figure>img]:w-auto [&>figure>img]:h-auto [&>figure>img]:object-contain
 							[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-[#bdae93] [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
 							[&>figure>figcaption>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80
 							[&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-[#689d6a] [&_a]:text-primary
@@ -65,13 +65,13 @@ const BlogTemplate = () => {
 							[&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
 							[&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
 								"
-              dangerouslySetInnerHTML={{ __html: post?.html }}
+							dangerouslySetInnerHTML={{ __html: post?.html }}
-            />
+						/>
-          </article>
+					</article>
-        )}
+				)}
-      </div>
+			</div>
-    </MainTemplate>
+		</MainTemplate>
-  )
+	)
 }
 
 export default BlogTemplate