feat: add date to blog

This commit is contained in:
xHyroM 2023-06-03 22:09:58 +02:00
parent 4213322fbc
commit ca77ffa5d5
No known key found for this signature in database
GPG key ID: BE0423F386C436AA
5 changed files with 47 additions and 19 deletions

View file

@ -1,7 +1,7 @@
module.exports = {
plugins: [
require.resolve("prettier-plugin-astro"),
//require.resolve("prettier-plugin-tailwindcss"),
require.resolve("prettier-plugin-tailwindcss"),
],
overrides: [
{

View file

@ -1,4 +1,4 @@
<div class="fireworks-container absolute top-0 left-0 z-[-1000] h-full w-full">
<div class="fireworks-container absolute left-0 top-0 z-[-1000] h-full w-full">
</div>
<script>

View file

@ -23,16 +23,24 @@ const parseDepth = (depth: number) => {
<ul class="mt-24 flex flex-col gap-4">
{
headings.map(({ slug, text, depth }: {
slug: string;
text: string;
depth: number;
}) => {
return (
<li class={`text-slate-100 hover:text-slate-700 ${parseDepth(depth)}`}>
<a href={`#${slug}`}>{text}</a>
</li>
);
})
headings.map(
({
slug,
text,
depth,
}: {
slug: string;
text: string;
depth: number;
}) => {
return (
<li
class={`text-slate-100 hover:text-slate-700 ${parseDepth(depth)}`}
>
<a href={`#${slug}`}>{text}</a>
</li>
);
}
)
}
</ul>

View file

@ -8,13 +8,30 @@ const { item } = Astro.props;
const url = Astro.url.pathname;
---
<Layout description={item.frontmatter.title} date={item.frontmatter.date} url={`https://xhyrom.dev${url}`}>
<Layout
description={item.frontmatter.title}
date={item.frontmatter.date}
url={`https://xhyrom.dev${url}`}
>
<Navbar />
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
{item.frontmatter.title}
</h1>
<div class="w-full py-32">
<div class="flex flex-col items-center justify-center gap-2">
<h1 class="text-5xl font-extrabold text-white">
{item.frontmatter.title}
</h1>
<h2 class="text-2xl font-semibold text-white text-opacity-40">
{
new Date(item.frontmatter.date).toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})
}
</h2>
</div>
</div>
<Container class="prose prose-invert text-2xl content-center justify-center">
<Container class="prose prose-invert content-center justify-center text-2xl">
<article>
<slot />
</article>

View file

@ -3,8 +3,11 @@ import Layout from "@layouts/Layout.astro";
import Navbar from "@components/widgets/Navbar.astro";
import Container from "@components/atoms/Container.astro";
import Button from "~/components/widgets/Button.astro";
import type { PaginateFunction } from "astro";
export async function getStaticPaths({ paginate }) {
export async function getStaticPaths({ paginate }: {
paginate: PaginateFunction;
}) {
// Load your data with fetch(), Astro.glob(), etc.
const posts = (await Astro.glob('@blog/*.md')).sort(
(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()