Finish Blog styling
Change-Id: I0acdd0b4665c7abca22acf3d3131330039ca049c
Reviewed-on: https://git.clicks.codes/c/Coded/thecoded.prof/+/680
Tested-by: Samuel Shuert <coded@clicks.codes>
Reviewed-by: Samuel Shuert <coded@clicks.codes>
diff --git a/sites/blog/src/pages/index.astro b/sites/blog/src/pages/index.astro
index 13b3aef..3d66624 100644
--- a/sites/blog/src/pages/index.astro
+++ b/sites/blog/src/pages/index.astro
@@ -5,9 +5,12 @@
import { getCollection } from 'astro:content';
import FormattedDate from '../components/FormattedDate.astro';
-const posts = (await getCollection('blog')).sort(
- (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
-);
+
+const posts = await getCollection('post')
+
+const pinnedPosts = posts.filter(p => p.data.pinned);
+const otherPosts = posts.filter(p => !(p.data.pinned || false))
+
---
<!doctype html>
@@ -15,8 +18,8 @@
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
- <body class="bg-mantle px-72 min-h-dvh flex flex-col max-md:px-4 transition-all">
- <div class="w-full min-h-[90vh]">
+ <body class="bg-mantle min-h-screen flex flex-col items-center">
+ <div class="flex justify-center w-full flex-col gap-2 md:min-w-[768px] px-4 md:max-w-screen-lg">
<nav class="bg-mantle flex justify-center py-2 h-12">
<div class="flex flex-col items-center group">
<a href="/" class="text-text cursor-pointer hover:bg-surface0 rounded px-4 transition-colors">
@@ -25,24 +28,48 @@
<div class="bg-text h-[2px] w-8 -mt-1 rounded-full group-hover:w-10 transition-all" />
</div>
</nav>
- <main class="w-full bg-mantle mt-6 h-full">
- <section id="posts" class="flex justify-center rounded-2xl min-h-full">
- <div class="flex flex-wrap gap-4 m-0 p-0 w-full min-h-full">
+ <main class="w-full bg-mantle mt-6 min-h-[84vh]">
+ <section id="posts">
+ <div class="flex flex-wrap gap-4 justify-center mb-10">
{
- posts.map((post) => (
- <a href={`/blog/${post.slug}/`} class="
- min-w-72
- w-[calc(25%-0.75rem)] text-lg bg-base p-4 rounded-2xl
- first:w-[calc(50%-0.5rem)] first:text-center first:text-2xl
- first:max-md:text-lg first:max-md:text-left first:max-md:w-full first:max-md:h-auto
+ pinnedPosts.length > 0 ? pinnedPosts.map((post) => (
+ <a href={`/post/${post.slug}/`} class="
+ h-32 text-base bg-base p-4 rounded-2xl flex flex-col flex-grow border border-blue
+ hover:bg-surface0 hover:-translate-y-2 transition-all">
+ <h4 class="text-text w-full text-ellipsis">{post.data.title}</h4>
+ <div class="text-subtext0 flex">
+ <p title="Pinned">📌 </p>
+ <FormattedDate date={post.data.pubDate} />
+ </div>
+ </a>
+ )) : null
+ }
+ </div>
+ <div class="flex flex-wrap gap-4 justify-center">
+ {
+ otherPosts.length > 0 ? otherPosts.map((post, idx) => (
+ <a href={`/post/${post.slug}/`} class="
+ h-32 text-base bg-base p-4 rounded-2xl flex flex-col flex-grow
+ first:text-center first:text-xl first:border-yellow first:border first:box-border
+ first:max-md:text-left first:max-md:w-full
hover:bg-surface0 hover:-translate-y-2 transition-all
max-md:w-full">
- <h4 class="text-text">{post.data.title}</h4>
- <p class="text-subtext0">
+ <h4 class="text-text w-full text-ellipsis">{post.data.title}</h4>
+ <div class="text-subtext0 flex">
+ { idx === 0 ? <p title="Latest">✨ </p> : null }
<FormattedDate date={post.data.pubDate} />
- </p>
+ </div>
</a>
- ))
+ )) : null
+ }
+ </div>
+ <div class="flex justify-center h-40">
+ {
+ posts.length === 0 ?
+ <div class="border border-dashed border-surface0 rounded-xl flex justify-center items-center w-1/2">
+ No Posts Yet
+ </div> :
+ null
}
</div>
</section>
diff --git "a/sites/blog/src/pages/blog/\133...slug\135.astro" "b/sites/blog/src/pages/post/\133...slug\135.astro"
similarity index 82%
rename from "sites/blog/src/pages/blog/\133...slug\135.astro"
rename to "sites/blog/src/pages/post/\133...slug\135.astro"
index ecdd3da..9162df4 100644
--- "a/sites/blog/src/pages/blog/\133...slug\135.astro"
+++ "b/sites/blog/src/pages/post/\133...slug\135.astro"
@@ -3,13 +3,13 @@
import BlogPost from '../../layouts/BlogPost.astro';
export async function getStaticPaths() {
- const posts = await getCollection('blog');
+ const posts = await getCollection('post');
return posts.map((post: { slug: any; }) => ({
params: { slug: post.slug },
props: post,
}));
}
-type Props = CollectionEntry<'blog'>;
+type Props = CollectionEntry<'post'>;
const post = Astro.props;
const { Content } = await post.render();
diff --git a/sites/blog/src/pages/rss.xml.js b/sites/blog/src/pages/rss.xml.js
index 9ff9801..41b0d4a 100644
--- a/sites/blog/src/pages/rss.xml.js
+++ b/sites/blog/src/pages/rss.xml.js
@@ -3,14 +3,14 @@
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
export async function GET(context) {
- const posts = await getCollection('blog');
+ const posts = await getCollection('post');
return rss({
title: SITE_TITLE,
description: SITE_DESCRIPTION,
site: context.site,
items: posts.map((post) => ({
...post.data,
- link: `/blog/${post.slug}/`,
+ link: `/post/${post.slug}/`,
})),
});
}