Spaces:
Runtime error
Runtime error
File size: 2,769 Bytes
cd6f98e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import { useRouter } from "next/router";
import React from "react";
import ReactMarkdown from "react-markdown";
import AppHead from "../../components/AppHead";
import FooterLinks from "../../components/landing/FooterLinks";
import FadeIn from "../../components/motions/FadeIn";
import NavBar from "../../components/NavBar";
import { getPostData, getSortedPostsData } from "../../lib/posts";
export default function BlogPost({
postData,
}: {
postData: { title: string; date: string; content: string };
}) {
const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<div className="min-w-screen mx-6 grid min-h-screen place-items-center py-2 selection:bg-purple-700/25 lg:overflow-x-hidden lg:overflow-y-hidden">
<AppHead title="Reworkd Blog" />
<div className="flex h-full w-full max-w-[1440px] flex-col justify-between overflow-hidden">
<NavBar />
<FadeIn duration={3}>
<div className="flex min-h-screen justify-center">
<div className="bg-stars animate-stars"></div>
<div className="flex h-full max-w-[1440px] flex-col justify-between">
<main className="mx-auto px-6 lg:px-8">
<div className="bg-transparent py-8 sm:py-16">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
Reblogd
</h2>
</div>
</div>
</main>
<div className="mx-auto mb-8 max-w-2xl sm:mb-16">
<div className="text-white">
<p>{postData.date}</p>
<ReactMarkdown className="prose text-white">{postData.content}</ReactMarkdown>
</div>
</div>
</div>
</div>
<footer className="flex flex-col items-center justify-center gap-2 pb-2 sm:gap-4 sm:pb-4 lg:flex-row">
<FooterLinks />
<div className="font-inter text-xs font-normal text-gray-300 sm:text-sm lg:order-first">
© 2023 Reworkd AI, Inc.
</div>
</footer>
</FadeIn>
</div>
</div>
);
}
export async function getStaticPaths() {
// Fetch the list of blog post slugs or IDs dynamically
const allPostsData = getSortedPostsData();
// Generate the paths based on the slugs
const paths = allPostsData.map(({ id }) => ({
params: { slug: id },
}));
return {
paths,
fallback: true,
};
}
export async function getStaticProps({ params }: { params: { slug: string } }) {
const postData = getPostData(params.slug);
return {
props: {
postData,
},
};
}
|