QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-12-15 01:21:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: 🎸 blog

Browse Source 
added link to rollback
This commit is contained in:
Stan Girard 2023-10-23 22:00:42 +02:00
parent 623b4f0a52
commit 4024d2c05c
2 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/pages/blog/[id]/index.tsx → frontend/pages/blog/[slug]/index.tsx
View File

@ -41,6 +41,7 @@ type BlogPostAttributes = {
createdAt: string;
updatedAt: string;
publishedAt: string;
slug: string;
seo: SeoAttributes;
};
@ -56,7 +57,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
throw new Error('Network response was not ok');
}
const data: { data: BlogPost[] } = await response.json();
const paths = data.data.map(post => ({ params: { id: post.id.toString() } }));
const paths = data.data.map(post => ({ params: { slug: post.attributes.slug } }));
return {
paths,
@ -71,14 +72,21 @@ export const getStaticPaths: GetStaticPaths = async () => {
}
};
export const getStaticProps = async (context: { params: { id: string } }) => {
export const getStaticProps = async (context: { params: { slug: string } }) => {
try {
const response = await fetch(`https://cms.quivr.app/api/blogs/${context.params.id}?populate=seo,seo.metaImage`);
const data: { data: BlogPost } = await response.json();
const response = await fetch(`https://cms.quivr.app/api/blogs?slug=${context.params.slug}&populate=seo,seo.metaImage`);
const data: { data: BlogPost[] } = await response.json();
// Find the blog post with the exact slug match
const blogPost = data.data.find(post => post.attributes.slug === context.params.slug);
if (!blogPost) {
throw new Error('No blog post found for the provided slug');
}
return {
props: {
post: data.data,
post: blogPost,
},
};
} catch (error) {
@ -107,10 +115,11 @@ const BlogPostDetail = ({ post }: InferGetStaticPropsType<typeof getStaticProps>
<header className="bg-white text-zinc-900 py-4 border-b">
<div className="container mx-auto px-4 md:px-6">
<nav className="flex items-center justify-between">
<div className="text-2xl font-bold">Quivr - Blog</div>
<Link href="/blog">
<div className="text-2xl font-bold cursor-pointer">Quivr</div>
</Link>
<div className="space-x-4">
<Link className="text-zinc-900 hover:text-zinc-700" href="https://quivr.app">Try Quivr</Link>
<Link className="text-zinc-900 hover:text-zinc-700" href="/blog">Blog</Link>
</div>
</nav>
</div>

36
frontend/pages/blog/index.tsx
View File

@ -12,8 +12,11 @@ type BlogPostAttributes = {
imageUrl: string;
title: string;
description: string;
slug: string;
publishedAt: string;
seo: {
metaTitle: string;
metaDescription: string;
metaImage: {
data: {
attributes: {
@ -36,13 +39,15 @@ type BlogPost = {
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const getStaticProps = async () => {
try {
const resulting = await fetch("https://cms.quivr.app/api/blogs?populate=seo,seo.metaImage");
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const resulting = await fetch("https://cms.quivr.app/api/blogs?populate=seo,seo.metaImage,slug");
const data: { data: BlogPost[] } = await resulting.json();
// Sort blogs by publishedAt in descending order
const sortedBlogs = data.data.sort((a, b) => new Date(b.attributes.publishedAt).getTime() - new Date(a.attributes.publishedAt).getTime());
return {
props: {
result: data.data,
result: sortedBlogs,
},
};
} catch (error) {
@ -67,10 +72,11 @@ const Blog = ({ result }: InferGetStaticPropsType<typeof getStaticProps>) => {
<header className="bg-white text-zinc-900 py-4 border-b">
<div className="container mx-auto px-4 md:px-6">
<nav className="flex items-center justify-between">
<div className="text-2xl font-bold">Quivr</div>
<Link href="/blog">
<div className="text-2xl font-bold cursor-pointer">Quivr</div>
</Link>
<div className="space-x-4">
<Link className="text-zinc-900 hover:text-zinc-700" href="/">Try Quivr</Link>
<Link className="text-zinc-900 hover:text-zinc-700" href="/blog">Blog</Link>
</div>
</nav>
</div>
@ -81,16 +87,18 @@ const Blog = ({ result }: InferGetStaticPropsType<typeof getStaticProps>) => {
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{result.map(post => (
<div key={post.id}>
<Image
src={`${post.attributes.seo.metaImage.data.attributes.formats.medium.url}`}
alt="Blog Post Image"
width={600}
height={400}
className="w-full rounded-lg object-cover"
/>
<Link href={`/blog/${post.attributes.slug}`}>
<Image
src={`${post.attributes.seo.metaImage.data.attributes.formats.medium.url}`}
alt="Blog Post Image"
width={600}
height={400}
className="w-full rounded-lg object-cover cursor-pointer"
/>
</Link>
<h3 className="text-xl font-bold mb-2 mt-4">{post.attributes.seo.metaTitle}</h3>
<p className="text-zinc-500">{post.attributes.description}</p>
<Link className="text-blue-500 hover:text-blue-700 mt-4" href={`/blog/${post.id}`}>
<p className="text-zinc-500">{post.attributes.seo.metaDescription}</p>
<Link className="text-blue-500 hover:text-blue-700 mt-4" href={`/blog/${post.attributes.slug}`}>
Read More
</Link>
</div>