Make post component, style list

2022-08-24 00:30:12 -05:00
parent 0af0bcd885
commit 8cf3601874
4 changed files with 45 additions and 14 deletions
--- a/src/pages/posts.astro
+++ b/src/pages/posts.astro
@@ -0,0 +1,61 @@
+---
+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('./post/*.{md,mdx}')).sort(
+	(a, b) => new Date(b.frontmatter.added).valueOf() - new Date(a.frontmatter.added).valueOf()
+);
+---
+
+<!DOCTYPE html>
+<html lang="en-us">
+	<head>
+		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+		<style>
+			ul {
+				list-style-type: none;
+				padding: unset;
+			}
+			ul li {
+				display: flex;
+			}
+			ul li a:visited {
+				color: #8e32dc;
+			}
+		</style>
+	</head>
+	<body>
+		<Header />
+		<main>
+			<content>
+				<ul>
+					{posts.map((post) => (
+						<li>
+							<time datetime={post.frontmatter.added}>
+								{new Date(post.frontmatter.added).toLocaleDateString('en-us', {
+									year: 'numeric',
+									month: 'short',
+									day: 'numeric',
+								})}
+							</time>
+							<a href={post.url}>{post.frontmatter.title}</a>
+						</li>
+					))}
+				</ul>
+
+				<ul>
+          {posts.map(
+          ({url, frontmatter: { description, slug, title, tags, added: date }}) => (
+          	<Post {url} {description} {date} {slug} {title} {tags} />
+          ))}
+        </ul>
+			</content>
+			<Footer />
+		</main>
+	</body>
+</html>