From b22adbda96fe8b97839e97785c13e7c3d6f58214 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean <michal-gdula@protonmail.com> Date: Sun, 26 May 2024 21:56:50 +0100 Subject: [PATCH] Add timestamps to posts Redesign homebutton a bit arugh Clean up Card stuff --- src/components/Card.astro | 28 +++++++++++++++++----------- src/components/HomeButton.astro | 18 ++++++++++++++++-- src/content/content.ts | 3 ++- src/content/projects/gwagwa.md | 2 +- src/layouts/Layout.astro | 2 -- src/layouts/Markdown.astro | 13 +++++++++---- src/pages/index.astro | 16 ++++------------ src/pages/posts/index.astro | 8 ++------ src/pages/projects/index.astro | 8 ++------ src/styles/_main.scss | 2 ++ src/utils.ts | 32 ++++++++++++++++++++++++++++++++ 11 files changed, 87 insertions(+), 45 deletions(-) diff --git a/src/components/Card.astro b/src/components/Card.astro index 2fda6be..21f23e6 100644 --- a/src/components/Card.astro +++ b/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; diff --git a/src/components/HomeButton.astro b/src/components/HomeButton.astro index 552d33e..331e21f 100644 --- a/src/components/HomeButton.astro +++ b/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> \ No newline at end of file diff --git a/src/content/content.ts b/src/content/content.ts index ec5b3d8..425f11b 100644 --- a/src/content/content.ts +++ b/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()), }), }); diff --git a/src/content/projects/gwagwa.md b/src/content/projects/gwagwa.md index ea2a106..f6cb519 100644 --- a/src/content/projects/gwagwa.md +++ b/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" diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e2afc97..5534ac3 100644 --- a/src/layouts/Layout.astro +++ b/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; diff --git a/src/layouts/Markdown.astro b/src/layouts/Markdown.astro index 0e68f0c..145ff40 100644 --- a/src/layouts/Markdown.astro +++ b/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> diff --git a/src/pages/index.astro b/src/pages/index.astro index 52fe857..26a7eef 100644 --- a/src/pages/index.astro +++ b/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> diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro index 8d11cf7..dc8cdbf 100644 --- a/src/pages/posts/index.astro +++ b/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> diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro index 38d4308..b273372 100644 --- a/src/pages/projects/index.astro +++ b/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> diff --git a/src/styles/_main.scss b/src/styles/_main.scss index a0ed267..ca7e0e6 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -5,6 +5,8 @@ main { width: 100%; max-width: 800px; + position: relative; + display: flex; flex-direction: column; flex-grow: 1; diff --git a/src/utils.ts b/src/utils.ts index c839127..bd49194 100644 --- a/src/utils.ts +++ b/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; +} \ No newline at end of file