Make post component, style list

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>