Make post component, style list

src/components/Header.astro

@@ -12,11 +12,8 @@ import { SITE_TITLE } from "../config";
 	</div>
 	<nav>
 		<HeaderLink href="/">home</HeaderLink>
-		<HeaderLink href="/blog">posts</HeaderLink>
+		<HeaderLink href="/posts">posts</HeaderLink>
 		<HeaderLink href="https://cassidoo.co" target="_blank">website</HeaderLink>
-		<HeaderLink href="https://twitter.com/cassidoo" target="_blank"
-			>twitter
-		</HeaderLink>
 		<HeaderLink href="https://cassidoo.co/newsletter" target="_blank"
 			>newsletter
 		</HeaderLink>

src/components/Post.astro

@@ -0,0 +1,24 @@
+---
+// import Tag from './Tag.astro';
+const { slug, title, tags, description, date } = Astro.props;
+---
+
+<li>
+  <a href={`/${slug}/`} class="title">{title}</a>
+  <time datetime={date}>
+    {new Date(date).toLocaleDateString('en-us', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })}
+  </time>
+  <br />
+  {description && <span class="excerpt">{description}</span>}
+  <ul>
+    {tags && tags.map(tag => (
+    <li class="tag">
+      <div>{tag}</div>
+    </li>
+    ))}
+  </ul>
+</li>

src/global.css

@@ -28,7 +28,7 @@ body {
   word-wrap: break-word;
   overflow-wrap: break-word;
   line-height: 1.8;
-  color: #444;
+  color: var(--black);
 }
 h1,
 h2,
@@ -38,7 +38,7 @@ h5,
 h6,
 strong,
 b {
-  color: #222;
+  color: var(--black);
 }
 a {
   color: var(--pink);
@@ -82,8 +82,8 @@ pre > code {
   all: unset;
 }
 blockquote {
-  border: 1px solid #999;
-  color: #222;
+  border: 1px solid var(--gray);
+  color: var(--black);
   padding: 2px 0px 2px 20px;
   margin: 0px;
   font-style: italic;
@@ -114,3 +114,9 @@ h3 {
 .header-frame {
   max-width: 350px;
 }
+
+ul li time {
+  flex: 0 0 130px;
+  font-style: italic;
+  color: var(--gray);
+}

src/pages/posts.astro

@@ -2,10 +2,12 @@
 import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import Post from '../components/Post.astro';
+
 import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
 
 // Use Astro.glob() to fetch all posts, and then sort them by date.
-const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
+const posts = (await Astro.glob('./post/*.{md,mdx}')).sort(
 	(a, b) => new Date(b.frontmatter.added).valueOf() - new Date(a.frontmatter.added).valueOf()
 );
 ---
@@ -22,11 +24,6 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
 			ul li {
 				display: flex;
 			}
-			ul li time {
-				flex: 0 0 130px;
-				font-style: italic;
-				color: #888;
-			}
 			ul li a:visited {
 				color: #8e32dc;
 			}
@@ -50,6 +47,13 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
 						</li>
 					))}
 				</ul>
+
+				<ul>
+          {posts.map(
+          ({url, frontmatter: { description, slug, title, tags, added: date }}) => (
+          	<Post {url} {description} {date} {slug} {title} {tags} />
+          ))}
+        </ul>
 			</content>
 			<Footer />
 		</main>