Add timestamps to posts

Redesign homebutton a bit
arugh
Clean up Card stuff

src/components/Card.astro

@@ -1,21 +1,26 @@
 ---
+import { getMonth, getDaySuffix } from "../utils";
+
 interface Props {
-	title: string;
-	body: string;
-	href: string;
+	post: any,
+	base: string,
 }
 
-const { href, title, body } = Astro.props;
+const { post, base } = Astro.props;
+
+const date = new Date(post.data.pubDate);
 ---
 
 <li class="link-card">
-	<a href={href}>
+	<a href=`${base}/${post.slug}`>
 		<h3>
-			{title}
+			{post.data.title}
 		</h3>
-		<p>
-			{body}
-		</p>
+			{post.data.pubDate ? (
+				<p>{date.getDate()}{getDaySuffix(date)} {getMonth(date)} {date.getFullYear()} • {post.data.description}</p>
+			) : (
+				<p>{post.data.description}</p>
+			)}
 	</a>
 	<div class="link-card-corner" />
 </li>
@@ -26,8 +31,6 @@ const { href, title, body } = Astro.props;
 	$corner-speed: 0.2s;
 
 	.link-card {
-		height: 125px;
-
 		position: relative;
 
 		border-radius: $radius;
@@ -37,7 +40,10 @@ const { href, title, body } = Astro.props;
 
 		> a {
 			padding: 16px;
+
 			height: 100%;
+			min-height: 81px;
+
 			display: block;
 
 			text-decoration: none;

src/components/HomeButton.astro

@@ -5,11 +5,25 @@
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
         <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
     </svg>
-    Home
+    Homepage
 </a>
 
+<div style="height: calc(35px + 8px - 32px + 32px)" />
+
 <style lang="scss">
     #home {
-        margin-bottom: 32px;
+        padding: 0 20px;
+
+        position: absolute;
+        top: 8px;
+        left: 0;
+
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:before {
+            /*border-top-left-radius: 0;*/
+            /*border-bottom-left-radius: 0;*/
+        }
     }
 </style>

src/content/content.ts

@@ -6,7 +6,7 @@ const postsCollection = defineCollection({
         draft: z.boolean().optional().default(false),
         title: z.string(),
         description: z.string(),
-        date: z.string().transform((str) => new Date(str)),
+        pubDate: z.string().transform((str) => new Date(str)),
         tags: z.array(z.string()),
     }),
 });
@@ -17,6 +17,7 @@ const projectsCollection = defineCollection({
         draft: z.boolean().optional().default(false),
         title: z.string(),
         description: z.string(),
+        pubDate: z.string().transform((str) => new Date(str)),
         tags: z.array(z.string()),
     }),
 });

src/content/projects/gwagwa.md

@@ -1,6 +1,6 @@
 ---
 title: GwaGwa
-description: This astro page
+description: This is a very very very very very very very very very very very very long description of a post
 tags:
     - "GwaGwa"
     - "Gaming"

src/layouts/Layout.astro

@@ -4,8 +4,6 @@ import Banner from "../assets/banner.png";
 
 interface Props {
     title: string;
-    image: string,
-    alt: string,
 }
 
 const { title} = Astro.props;

src/layouts/Markdown.astro

@@ -1,4 +1,5 @@
 ---
+import { getMonth, getDaySuffix } from "../utils";
 import HomeButton from "../components/HomeButton.astro";
 
 interface Props {
@@ -9,17 +10,21 @@ interface Props {
 }
 
 const { post, prev, next, base } = Astro.props;
+
+const date = new Date(post.data.pubDate);
 ---
 
 <HomeButton />
 
 <div class="header">
     <h1>{post.data.title}</h1>
-    <p>{post.data.description}</p>
+    {post.data.pubDate ? (
+        <p>{date.getDate()}{getDaySuffix(date)} {getMonth(date)} {date.getFullYear()} • {post.data.description}</p>
+    ) : (
+        <p>{post.data.description}</p>
+    )}
     <ul id="tags" class="pill-list" role="list">
-        {post.data.tags.map((item: string) => (
-                <li class="pill">#{item}</li>
-        ))}
+        {post.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
     </ul>
 </div>
 

src/pages/index.astro

@@ -93,12 +93,8 @@ const posts = await getPosts("posts");
 	<div class="section">
 		<h2>Projects</h2>
 		<ul class="project-list" role="list">
-			{projects.slice(0, 2).map(project => (
-				<Card
-					href=`/projects/${project.slug}`
-					title={project.data.title}
-					body={project.data.description}
-				/>
+			{projects.slice(0, 2).map(post => (
+				<Card {post} base="/projects"/>
 			))}
 		</ul>
 		<a class="button" id="see-all-projects" href="/projects">All Projects</a>
@@ -107,12 +103,8 @@ const posts = await getPosts("posts");
 	<div class="section">
 		<h2>Recent Posts</h2>
 		<ul class="project-list" role="list">
-			{posts.slice(0, 2).map(project => (
-				<Card
-					href=`/posts/${project.slug}`
-					title={project.data.title}
-					body={project.data.description}
-				/>
+			{posts.slice(0, 2).map(post => (
+				<Card {post} base="/posts" />
 			))}
 		</ul>
 		<a class="button" id="see-all-posts" href="/posts">All Posts</a>

src/pages/posts/index.astro

@@ -18,12 +18,8 @@ const posts = await getPosts("posts");
     <hr>
 
     <ul role="list" class="project-list">
-        {posts.map(project => (
-            <Card
-                href=`/posts/${project.slug}`
-                title={project.data.title}
-                body={project.data.description}
-            />
+        {posts.map(post => (
+            <Card {post} base="/posts"/>
         ))}
     </ul>
 </Layout>

src/pages/projects/index.astro

@@ -18,12 +18,8 @@ const projects = await getPosts("projects");
     <hr>
 
     <ul role="list" class="project-list">
-        {projects.map(project => (
-            <Card
-                href=`/projects/${project.slug}`
-                title={project.data.title}
-                body={project.data.description}
-            />
+        {projects.map(post => (
+            <Card {post} base="/projects"/>
         ))}
     </ul>
 </Layout>

src/styles/_main.scss

@@ -5,6 +5,8 @@ main {
     width: 100%;
     max-width: 800px;
 
+    position: relative;
+
     display: flex;
     flex-direction: column;
     flex-grow: 1;

src/utils.ts

@@ -11,3 +11,35 @@ export async function getPosts(collection: keyof ContentEntryMap) {
             : 0,
     );
 }
+
+export function getMonth(date: Date): string {
+    const months = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ];
+
+    return months[date.getMonth()];
+}
+
+export function getDaySuffix(date: Date): string {
+    let suffix = 'th';
+    if (date.getDate() % 10 === 1 && date.getDate() !== 11) {
+        suffix = 'st';
+    } else if (date.getDate() % 10 === 2 && date.getDate() !== 12) {
+        suffix = 'nd';
+    } else if (date.getDate() % 10 === 3 && date.getDate() !== 13) {
+        suffix = 'rd';
+    }
+
+    return suffix;
+}