From 049df58b0b9dae887b3037619443647b73bf0c1c Mon Sep 17 00:00:00 2001 From: Abdullah Al Sayad Date: Mon, 29 May 2023 16:53:15 +0600 Subject: [PATCH] blog page added --- components/BlogItem.jsx | 37 +++++++++++++++++++++++++++++++++++++ next.config.js | 2 +- package-lock.json | 9 +++++++++ package.json | 1 + pages/api/blogs/index.js | 12 ++++++++++++ pages/blogs/index.js | 38 ++++++++++++++++++++++++++++++++++++++ prisma/blogs.js | 7 +++++++ prisma/schema.prisma | 12 ++++++++++++ styles/globals.css | 4 ++++ 9 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 components/BlogItem.jsx create mode 100644 pages/api/blogs/index.js create mode 100644 pages/blogs/index.js create mode 100644 prisma/blogs.js diff --git a/components/BlogItem.jsx b/components/BlogItem.jsx new file mode 100644 index 0000000..d6755f0 --- /dev/null +++ b/components/BlogItem.jsx @@ -0,0 +1,37 @@ +import Image from "next/image"; +import Link from "next/link"; +import React from "react"; +import { AiOutlineStar } from "react-icons/ai"; +import moment from "moment"; + +const BlogItem = ({ blog }) => { + return ( +
+
+
+ {blog.title} +
+ +
+
+ {blog.tags} + + Post on: {moment(blog.createdAt).format("DD MMM YY. hh:mm A")} + +
+

{blog.title}

+

{blog.author}

+
+
+
+ ); +}; + +export default BlogItem; diff --git a/next.config.js b/next.config.js index efacf85..2a0f29f 100644 --- a/next.config.js +++ b/next.config.js @@ -2,7 +2,7 @@ const nextConfig = { reactStrictMode: true, images: { - domains: ["lh3.googleusercontent.com"], + domains: ["lh3.googleusercontent.com", "images.pexels.com"], remotePatterns: [ { protocol: "https", diff --git a/package-lock.json b/package-lock.json index cced9a6..f7e6e41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "eslint": "8.37.0", "eslint-config-next": "13.2.4", "micro": "^10.0.1", + "moment": "^2.29.4", "next": "^13.3.1", "next-auth": "^4.22.1", "prisma": "^4.12.0", @@ -2883,6 +2884,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index a0eaf75..a41ad8c 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "eslint": "8.37.0", "eslint-config-next": "13.2.4", "micro": "^10.0.1", + "moment": "^2.29.4", "next": "^13.3.1", "next-auth": "^4.22.1", "prisma": "^4.12.0", diff --git a/pages/api/blogs/index.js b/pages/api/blogs/index.js new file mode 100644 index 0000000..571e265 --- /dev/null +++ b/pages/api/blogs/index.js @@ -0,0 +1,12 @@ +import { getAllBlogs } from "@/prisma/blogs"; + +export default async function handler(req, res) { + try { + if (req.method === "GET") { + const blogs = await getAllBlogs(); + return res.status(200).json(blogs); + } + } catch (error) { + return res.status(500).json({ message: error.message }); + } +} diff --git a/pages/blogs/index.js b/pages/blogs/index.js new file mode 100644 index 0000000..392fb54 --- /dev/null +++ b/pages/blogs/index.js @@ -0,0 +1,38 @@ +import BlogItem from "@/components/BlogItem"; +import { getAllBlogs } from "@/prisma/blogs"; + +const BlogsPage = ({ blogs }) => { + return ( +
+
+

+ Our Blog +

+
+ +
+ {blogs.map((blog) => ( + + ))} +
+
+ ); +}; + +export default BlogsPage; + +export const getServerSideProps = async () => { + const blogs = await getAllBlogs(); + + const updatedBlogs = blogs.map((blog) => ({ + ...blog, + updatedAt: blog.updatedAt.toString(), + createdAt: blog.createdAt.toString(), + })); + + return { + props: { + blogs: updatedBlogs, + }, + }; +}; diff --git a/prisma/blogs.js b/prisma/blogs.js new file mode 100644 index 0000000..26e4175 --- /dev/null +++ b/prisma/blogs.js @@ -0,0 +1,7 @@ +import prisma from "./prisma"; + +// Get all blogs +export const getAllBlogs = async () => { + const blogs = await prisma.blog.findMany({}); + return blogs; +}; diff --git a/prisma/schema.prisma b/prisma/schema.prisma index e27ed8f..5b825e2 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -41,4 +41,16 @@ model Order{ userId String @db.ObjectId user User @relation(fields: [userId], references: [id]) +} + +model Blog{ + id String @id @default(auto()) @map("_id") @db.ObjectId + title String + author String + tags String + imageUrl String + description String + + createdAt DateTime @default(now()) + updatedAt DateTime @updatedAt } \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index aff92ec..1890dcd 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -456,3 +456,7 @@ border-radius: 50%; } } + +.blog-title { + background-image: url("https://images.pexels.com/photos/5792901/pexels-photo-5792901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); +}