hyro/website
1
0
Fork 0
mirror of https://github.com/xHyroM/website.git synced 2024-11-22 15:01:05 +01:00
Code Issues Projects Releases Wiki Activity Actions

feat: add date to blog

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc.cjs
View file

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

2
src/components/widgets/decorations/Fireworks.astro
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> </div>
<script> <script>

30
src/components/widgets/docs/TableOfContents.astro
View file

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

27
src/layouts/blog/PostLayout.astro
View file

@ -8,13 +8,30 @@ const { item } = Astro.props;
const url = Astro.url.pathname; 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 /> <Navbar />
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white"> <div class="w-full py-32">
{item.frontmatter.title} <div class="flex flex-col items-center justify-center gap-2">
</h1> <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> <article>
<slot /> <slot />
</article> </article>

5
src/pages/blog/[...page].astro
View file

@ -3,8 +3,11 @@ import Layout from "@layouts/Layout.astro";
import Navbar from "@components/widgets/Navbar.astro"; import Navbar from "@components/widgets/Navbar.astro";
import Container from "@components/atoms/Container.astro"; import Container from "@components/atoms/Container.astro";
import Button from "~/components/widgets/Button.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. // Load your data with fetch(), Astro.glob(), etc.
const posts = (await Astro.glob('@blog/*.md')).sort( const posts = (await Astro.glob('@blog/*.md')).sort(
(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf() (a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()