feat(blog): a11y & various style improvements; add author

src/components/blog/BaseHead.astro

@@ -21,7 +21,7 @@ description = title === SITE_TITLE
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font preloads -->

src/consts.ts

@@ -1,5 +1,6 @@
 export const SITE_TITLE = 'Cozy Blog';
 export const SITE_AUTHOR = 'Ayo Ayco';
+export const SITE_AUTHOR_URL = 'https://ayo.ayco.io';
 export const SITE_AUTHOR_MASTODON = 'https://social.ayco.io/@ayo';
 export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy';
 export const SITE_DESCRIPTION = 'The Web is Yours.';

src/content/blog/building-a-cozy-web.md

@@ -5,7 +5,7 @@ pubDate: 'Aug 14 2024'
 heroImage: '/cozy.jpg'
 ---
 
-> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web).
+> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web) last Jun 1, 2023.
 
 Have you ever clicked a link to an article, all hyped up to read the content, only to be slapped in the face with popups over popups of requests to subscribe and asking consent to track you with cookies?
 

src/layouts/BlogPost.astro

@@ -4,6 +4,7 @@ import Header from "../components/blog/Header.astro";
 import Footer from "../components/blog/Footer.astro";
 import FormattedDate from "../components/blog/FormattedDate.astro";
 import type { CollectionEntry } from "astro:content";
+import { SITE_AUTHOR, SITE_AUTHOR_URL } from "../consts";
 
 type Props = CollectionEntry<"blog">["data"];
 
@@ -17,8 +18,30 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			main {
 				width: calc(100% - 2em);
 				max-width: 100%;
-				margin: 0;
+				margin: 0 auto;
 			}
+
+			& .cta-wrapper {
+				width: 100%;
+				text-align: center;
+				padding: 1em 0;
+			}
+
+			& span.primary-btn {
+				background-color: rgba(var(--black), 95%);
+				box-shadow: 0 2px 8px rgba(var(--black), 5%);
+				color: white;
+				border-radius: 5px;
+				display: inline-block;
+				text-align: center;
+				padding: 0 0.5em;
+			}
+
+			& span.primary-btn:hover {
+				background-color: var(--accent);
+				box-shadow: 0 2px 8px var(--accent);
+			}
+
 			.hero-image {
 				width: 100%;
 			}
@@ -26,13 +49,12 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 				display: block;
 				margin: 0 auto;
 				border-radius: 12px;
-				box-shadow: var(--box-shadow);
 			}
 			.prose {
 				width: 720px;
 				max-width: calc(100% - 2em);
 				margin: auto;
-				padding: 1em;
+				padding: 0 1em;
 				color: rgb(var(--gray-dark));
 			}
 			.title {
@@ -40,9 +62,23 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 				padding: 1em 0;
 				text-align: center;
 				line-height: 1;
-			}
+
-			.title h1 {
+				& .avatar {
-				margin: 0 0 0.5em 0;
+					width: 32px;
+					height: 32px;
+					border-radius: 50%;
+					display: inline;
+					/* height: calc(1rem + 6px); */
+					margin: 0 0.5rem;
+					margin-bottom: -10px;
+				}
+
+				& a[rel='author'] {
+					color: rgb(var(--black));
+				}
+				& a[rel='author']:hover {
+					color: var(--accent);
+				}
 			}
 			.date {
 				margin-bottom: 0.5em;
@@ -93,11 +129,19 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 							}
 						</div>
 						<h1>{title}</h1>
-						<hr />
+						<address style="display:inline">
+							By <img class="avatar" src="/ayoayco-avatar.jpg" alt="Ayo Ayco's Avatar" /> <a rel="author" href={ SITE_AUTHOR_URL }>{ SITE_AUTHOR }</a>
+						</address>
 					</div>
 					<slot />
 				</div>
 			</article>
+			<hr />
+			<div class="cta-wrapper">
+				<a href="/">
+					<span class="primary-btn">Get Cozy!</span>
+				</a>
+			</div>
 		</main>
 		<Footer />
 	</body>

src/pages/blog/index.astro

@@ -17,7 +17,7 @@ const posts = (await getCollection('blog')).sort(
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 		<style>
 			main {
-				width: 960px;
+				width: 700px;
 			}
 			ul {
 				display: flex;
@@ -27,48 +27,54 @@ const posts = (await getCollection('blog')).sort(
 				margin: 0;
 				padding: 0;
 			}
-			ul li {
-				width: calc(50% - 1rem);
-			}
 			ul li * {
 				text-decoration: none;
 				transition: 0.2s ease;
 			}
-			ul li:first-child {
+			.card {
+				border: 1px solid rgb(var(--gray));
+				border-radius: 12px;
 				width: 100%;
+				padding: 1em;
 				margin-bottom: 1rem;
 				text-align: center;
+				color: rgb(var(--black));
+				position: relative;
+				background-color: white;
 			}
-			ul li:first-child img {
+
+			.card img {
 				width: 100%;
 				max-width: 800px;
 			}
-			ul li:first-child .title {
+
+			.card .title {
 				font-size: 2.369rem;
-			}
+				margin: 1rem;
-			ul li img {
-				margin-bottom: 0.5rem;
-				border-radius: 12px;
-			}
-			ul li a {
-				display: block;
-			}
-			.title {
-				margin: 0;
 				color: rgb(var(--black));
 				line-height: 1;
 			}
+
+			.card h4 a::after {
+				position: absolute;
+				left: 0;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				cursor: pointer;
+			}
+
+			.card h4 a {
+				color: blue;
+			}
+			.card h4:hover a {
+				text-decoration: underline;
+			}
+
 			.date {
 				margin: 0;
 				color: rgb(var(--gray));
 			}
-			ul li a:hover h4,
-			ul li a:hover .date {
-				color: rgb(var(--accent));
-			}
-			ul a:hover img {
-				box-shadow: var(--box-shadow);
-			}
 			@media (max-width: 720px) {
 				ul {
 					gap: 0.5em;
@@ -93,18 +99,23 @@ const posts = (await getCollection('blog')).sort(
 				<ul>
 					{
 						posts.map((post) => (
-							<li>
+							<li class="card">
-								<a href={`/blog/${post.slug}/`}>
+									{/* {
-									{
 									 post.data.heroImage
 									 	?	<img width={720} height={360} src={post.data.heroImage} alt="" />
 									 	:	<img width={720} height={360} src="/blog-placeholder-4.jpg" alt="" />
-									}
+									} */}
-									<h4 class="title">{post.data.title}</h4>
+									<small class="date">
-									<p class="date">
 										<FormattedDate date={post.data.pubDate} />
+									</small>
+									<h4 class="title">
+										<a href={`/blog/${post.slug}/`}>
+											{post.data.title}
+										</a>
+									</h4>
+									<p class="description">
+										{post.data.description}
 									</p>
-								</a>
 							</li>
 						))
 					}

src/styles/blog.css

@@ -48,10 +48,10 @@ body {
 }
 
 main {
-	width: 720px;
+	width: 700px;
 	max-width: calc(100% - 2em);
 	margin: auto;
-	padding: 3em 1em;
+	padding: 1em;
 }
 
 h1,
@@ -66,25 +66,25 @@ h6 {
 }
 
 h1 {
-	font-size: 3.052em;
-}
-
-h2 {
 	font-size: 2.441em;
 }
 
-h3 {
+h2 {
 	font-size: 1.953em;
 }
 
-h4 {
+h3 {
 	font-size: 1.563em;
 }
 
-h5 {
+h4 {
 	font-size: 1.25em;
 }
 
+h5 {
+	font-size: 1.15em;
+}
+
 strong,
 b {
 	font-weight: 700;
@@ -101,7 +101,8 @@ a:hover {
 p,
 ul,
 ol,
-table {
+table,
+pre.astro-code {
 	margin-bottom: 1em;
 }
 
@@ -111,7 +112,7 @@ table {
 	& ul,
 	& ol,
 	& table {
-		margin-bottom: 2em;
+		margin-bottom: 1em;
 	}
 }
 
@@ -150,10 +151,10 @@ pre>code {
 }
 
 blockquote {
-	border-left: 4px solid var(--accent);
+	border-left: 2px solid var(--accent);
-	padding: 0 0 0 20px;
+	padding: 0 0 0 1em;
 	margin: 0px;
-	font-size: 1.333em;
+	font-size: 1em;
 }
 
 hr {