mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-02-17 19:00:05 +00:00
Add timestamps to posts
Redesign homebutton a bit arugh Clean up Card stuff
This commit is contained in:
parent
59f1904d88
commit
b22adbda96
src
|
@ -1,21 +1,26 @@
|
||||||
---
|
---
|
||||||
|
import { getMonth, getDaySuffix } from "../utils";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
post: any,
|
||||||
body: string;
|
base: string,
|
||||||
href: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const { href, title, body } = Astro.props;
|
const { post, base } = Astro.props;
|
||||||
|
|
||||||
|
const date = new Date(post.data.pubDate);
|
||||||
---
|
---
|
||||||
|
|
||||||
<li class="link-card">
|
<li class="link-card">
|
||||||
<a href={href}>
|
<a href=`${base}/${post.slug}`>
|
||||||
<h3>
|
<h3>
|
||||||
{title}
|
{post.data.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
{post.data.pubDate ? (
|
||||||
{body}
|
<p>{date.getDate()}{getDaySuffix(date)} {getMonth(date)} {date.getFullYear()} • {post.data.description}</p>
|
||||||
</p>
|
) : (
|
||||||
|
<p>{post.data.description}</p>
|
||||||
|
)}
|
||||||
</a>
|
</a>
|
||||||
<div class="link-card-corner" />
|
<div class="link-card-corner" />
|
||||||
</li>
|
</li>
|
||||||
|
@ -26,8 +31,6 @@ const { href, title, body } = Astro.props;
|
||||||
$corner-speed: 0.2s;
|
$corner-speed: 0.2s;
|
||||||
|
|
||||||
.link-card {
|
.link-card {
|
||||||
height: 125px;
|
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
@ -37,7 +40,10 @@ const { href, title, body } = Astro.props;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-height: 81px;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
@ -5,11 +5,25 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
|
<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>
|
<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>
|
</svg>
|
||||||
Home
|
Homepage
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div style="height: calc(35px + 8px - 32px + 32px)" />
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#home {
|
#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>
|
</style>
|
|
@ -6,7 +6,7 @@ const postsCollection = defineCollection({
|
||||||
draft: z.boolean().optional().default(false),
|
draft: z.boolean().optional().default(false),
|
||||||
title: z.string(),
|
title: z.string(),
|
||||||
description: 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()),
|
tags: z.array(z.string()),
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
@ -17,6 +17,7 @@ const projectsCollection = defineCollection({
|
||||||
draft: z.boolean().optional().default(false),
|
draft: z.boolean().optional().default(false),
|
||||||
title: z.string(),
|
title: z.string(),
|
||||||
description: z.string(),
|
description: z.string(),
|
||||||
|
pubDate: z.string().transform((str) => new Date(str)),
|
||||||
tags: z.array(z.string()),
|
tags: z.array(z.string()),
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
title: GwaGwa
|
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:
|
tags:
|
||||||
- "GwaGwa"
|
- "GwaGwa"
|
||||||
- "Gaming"
|
- "Gaming"
|
||||||
|
|
|
@ -4,8 +4,6 @@ import Banner from "../assets/banner.png";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
image: string,
|
|
||||||
alt: string,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title} = Astro.props;
|
const { title} = Astro.props;
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
---
|
---
|
||||||
|
import { getMonth, getDaySuffix } from "../utils";
|
||||||
import HomeButton from "../components/HomeButton.astro";
|
import HomeButton from "../components/HomeButton.astro";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
@ -9,17 +10,21 @@ interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post, prev, next, base } = Astro.props;
|
const { post, prev, next, base } = Astro.props;
|
||||||
|
|
||||||
|
const date = new Date(post.data.pubDate);
|
||||||
---
|
---
|
||||||
|
|
||||||
<HomeButton />
|
<HomeButton />
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>{post.data.title}</h1>
|
<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">
|
<ul id="tags" class="pill-list" role="list">
|
||||||
{post.data.tags.map((item: string) => (
|
{post.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
|
||||||
<li class="pill">#{item}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -93,12 +93,8 @@ const posts = await getPosts("posts");
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>Projects</h2>
|
<h2>Projects</h2>
|
||||||
<ul class="project-list" role="list">
|
<ul class="project-list" role="list">
|
||||||
{projects.slice(0, 2).map(project => (
|
{projects.slice(0, 2).map(post => (
|
||||||
<Card
|
<Card {post} base="/projects"/>
|
||||||
href=`/projects/${project.slug}`
|
|
||||||
title={project.data.title}
|
|
||||||
body={project.data.description}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<a class="button" id="see-all-projects" href="/projects">All Projects</a>
|
<a class="button" id="see-all-projects" href="/projects">All Projects</a>
|
||||||
|
@ -107,12 +103,8 @@ const posts = await getPosts("posts");
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>Recent Posts</h2>
|
<h2>Recent Posts</h2>
|
||||||
<ul class="project-list" role="list">
|
<ul class="project-list" role="list">
|
||||||
{posts.slice(0, 2).map(project => (
|
{posts.slice(0, 2).map(post => (
|
||||||
<Card
|
<Card {post} base="/posts" />
|
||||||
href=`/posts/${project.slug}`
|
|
||||||
title={project.data.title}
|
|
||||||
body={project.data.description}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<a class="button" id="see-all-posts" href="/posts">All Posts</a>
|
<a class="button" id="see-all-posts" href="/posts">All Posts</a>
|
||||||
|
|
|
@ -18,12 +18,8 @@ const posts = await getPosts("posts");
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<ul role="list" class="project-list">
|
<ul role="list" class="project-list">
|
||||||
{posts.map(project => (
|
{posts.map(post => (
|
||||||
<Card
|
<Card {post} base="/posts"/>
|
||||||
href=`/posts/${project.slug}`
|
|
||||||
title={project.data.title}
|
|
||||||
body={project.data.description}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -18,12 +18,8 @@ const projects = await getPosts("projects");
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<ul role="list" class="project-list">
|
<ul role="list" class="project-list">
|
||||||
{projects.map(project => (
|
{projects.map(post => (
|
||||||
<Card
|
<Card {post} base="/projects"/>
|
||||||
href=`/projects/${project.slug}`
|
|
||||||
title={project.data.title}
|
|
||||||
body={project.data.description}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -5,6 +5,8 @@ main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
32
src/utils.ts
32
src/utils.ts
|
@ -11,3 +11,35 @@ export async function getPosts(collection: keyof ContentEntryMap) {
|
||||||
: 0,
|
: 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;
|
||||||
|
}
|
Loading…
Reference in a new issue