StanGirard/quivr
1
1
Fork 0
mirror of https://github.com/StanGirard/quivr.git synced 2024-12-28 13:51:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

docs(blog): updated

Browse Source
This commit is contained in:
Stan Girard 2023-09-21 21:13:54 +02:00
parent 03ca82ba38
commit 65de6839fc
4 changed files with 59 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/Dockerfile.dev
View File

@ -1,4 +1,4 @@
FROM node:18-alpine
FROM node:18.13.0-alpine
# Install Python and essential build tools
RUN apk add --update --no-cache python3 make g++ && ln -sf python3 /usr/bin/python
RUN python3 -m ensurepip

2
frontend/app/layout.tsx
View File

@ -8,8 +8,8 @@ import { FeatureFlagsProvider } from "@/lib/context";
import { BrainProvider } from "@/lib/context/BrainProvider";
import { SupabaseProvider } from "@/lib/context/SupabaseProvider";
import "@/globals.css";
import { App } from "./App";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });

44
frontend/app/globals.css → frontend/globals.css
View File

@ -37,48 +37,4 @@ a {
/* background: #000; */
@apply bg-gray-500;
}
}
.custom-prose {
max-height: 60vh;
/* Adjust this value based on the desired maximum height */
overflow-y: auto;
/* Enable vertical scroll if the content exceeds the maximum height */
padding-right: 1rem;
/* Optional: Add some padding if the scrollbar appears, so the text is not squished */
}
.container,
.post {
width: 100%;
min-height: 100vh;
margin: 0 auto;
padding: 40px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1,
.post h1 {
font-size: 2em;
}
.card {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
padding: 40px 0;
}
.flexing {
width: 30%;
box-sizing: content-box;
background: #f8f6f8;
margin: 1%;
padding: 30px;
border-radius: 8px;
}

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

@ -5,6 +5,7 @@ import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import "@/globals.css";
type BlogPostAttributes = {
imageUrl: string;
@ -41,36 +42,68 @@ export const getStaticProps = async () => {
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const Blog = ({ result }: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<main className="bg-gray-100 min-h-screen p-8">
<main className="bg-white min-h-screen p-8 text-gray-900">
<Head>
<title>thisBlog</title>
<meta name="description" content="This is an example of our blog" />
<title>Quivr - Blog</title>
<meta name="description" content="Quivr.app - Your Generative AI second brain builder's blog" />
</Head>
<div className="max-w-screen-xl mx-auto">
<h1 className="text-4xl font-bold mb-12 text-center">Blog Posts</h1>
<div className="grid gap-12 grid-cols-1 md:grid-cols-2">
{result.map(post => (
<Link href={`/blog/${post.id}`} key={post.id}>
<div className="block p-8 bg-white rounded-lg shadow-md hover:shadow-xl transform hover:scale-105 transition-transform duration-200">
<div className="mb-6">
<Image
src={`${post.attributes.imageUrl}`}
alt="blog-post"
priority={true}
className="w-full rounded-lg object-cover h-56"
width={600}
height={300}
/>
</div>
<h2 className="text-2xl font-semibold mb-4">{post.attributes.title}</h2>
<p className="text-gray-600">{post.attributes.description}</p>
</div>
</Link>
))}
<div className="mx-auto container">
<h1 className="text-6xl font-extrabold mb-16 text-center tracking-tight text-black">Blog Posts</h1>
<div className="grid gap-16 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
{result.map((post, index) => {
if (index === 0) {
// Special layout for the first post
return (
<Link
href={`/blog/${post.id}`}
key={post.id}
className="col-span-full block p-8 bg-white border-2 border-gray-300 rounded-lg shadow-md hover:border-black hover:shadow-xl transform hover:scale-105 transition-transform duration-200 flex"
>
<div className="flex-1 pr-8">
<h2 className="text-4xl font-bold mb-4 group-hover:text-black transition-colors duration-200">{post.attributes.title}</h2>
<p className="text-gray-600 line-clamp-3">{post.attributes.description}</p>
</div>
<div className="flex-none">
<Image
src={`${post.attributes.imageUrl}`}
alt="blog-post"
width={400}
height={400}
className="rounded-lg object-cover"
/>
</div>
</Link>
);
} else {
// Standard layout for the rest of the posts
return (
<Link
href={`/blog/${post.id}`}
key={post.id}
className="block p-8 bg-white border-2 border-gray-300 rounded-lg shadow-md hover:border-black hover:shadow-xl transform hover:scale-105 transition-transform duration-200"
>
<div className="mb-6">
<Image
src={`${post.attributes.imageUrl}`}
alt="blog-post"
width={300}
height={300}
className="w-full rounded-lg object-cover"
/>
</div>
<h2 className="text-3xl font-bold mb-4 group-hover:text-black transition-colors duration-200">{post.attributes.title}</h2>
<p className="text-gray-600 line-clamp-3">{post.attributes.description}</p>
</Link>
);
}
})}
</div>
</div>
</main>
);
}
export default Blog;