Skip to content

N
NextJs-Blog
Commit 644f9234 by Madhankumar
Options

code changes

parent d3b8a857
Showing with 55 additions and 72 deletions
app/@header/default.js
"use client";
import Header from "@components/base/header";
import { useAppContext } from "@context/index";
import { useAppContext } from "theme-context/index";
import { useRouter } from "next/navigation";
export default function PageHeader({ searchParams }) {
......
app/layout.js
import { ThemeProvider } from "@context/index";
import { ThemeProvider } from "theme-context/index";
import "@styles/globals.css";
export default function RootLayout({ children, header }) {
// Check if localStorage is available (client-side)
const themeClass =
typeof window !== "undefined" ? localStorage.getItem("theme") : "light";
return (
<ThemeProvider>
<html lang="en" className={themeClass}>
<html lang="en">
<body>
<div id="root">
<ThemeProvider>
{header}
{children}
</ThemeProvider>
</div>
</body>
</html>
</ThemeProvider>
);
}
app/page.js
import BlogLists from "@components/top-level/blog-lists";
import Pagination from "@components/top-level/pagination";
import { getPosts, getPostsBySearch } from "@lib/api";
import styles from "./page.module.css";
const Home = async ({ searchParams }) => {
let blogs;
let pageNo = searchParams.page || 1;
let search = searchParams.search;
const pageNo = searchParams.page || 1;
const search = searchParams.search;
if ("search" in searchParams) {
if (search !== "") {
blogs = await getPostsBySearch("posts", pageNo, search);
if (search) {
var { blogs, total } = await getPostsBySearch("posts", pageNo, search);
} else {
blogs.data.length = 0;
}
} else {
blogs = await getPosts("posts", pageNo);
var { blogs, total } = await getPosts("posts", pageNo);
}
return (
<div className={styles.container}>
{blogs.data?.length ? (
<>
{blogs?.length ? (
<div>
<BlogLists
title="Lifestyle"
description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
blogs={blogs.data}
blogs={blogs}
/>
<div className={styles.pagination}>
<Pagination
currentPage={Number(pageNo)}
total={Number(blogs.total)}
perPage={6}
total={Number(total)}
search={search}
/>
</div>
</div>
) : (
<h2 className="center">No data found</h2>
)}
</div>
</>
);
};
......
app/page.module.css deleted 100644 → 0
.container {
padding-top: 1rem;
}
.pagination {
margin-block: 2rem;
}
app/singleblog/[id]/page.js → app/singleblog/[slug]/page.js
import SingleBlog from "@components/top-level/single-blog";
import { getPostById } from "@lib/api";
import { getPostBySlug } from "@lib/api";
const SingleBlogApp = async ({ params: { id } }) => {
const blog = await getPostById("posts", id);
const SingleBlogApp = async ({ params: { slug } }) => {
const blog = await getPostBySlug(slug);
return <SingleBlog {...blog} />;
};
......
components/base/card/index.js
......@@ -5,7 +5,7 @@ import Icons from "@components/base/icons";
import styles from "./styles.module.css";
const Card = ({
id,
slug,
title,
description,
images,
......@@ -16,7 +16,7 @@ const Card = ({
return (
<div className={styles.card}>
<div className={styles["card-body"]}>
<Link href={`singleblog/${id}`}>
<Link href={`singleblog/${slug}`}>
<Image
className={styles.img}
src={images.card.url}
......
components/top-level/blog-lists/styles.module.css
.blog-container {
max-width: 1200px;
margin: 0 auto;
margin-bottom: 2rem;
padding-block: 2rem;
scroll-behavior: smooth;
padding-inline: 0.8rem;
width: min(100% - 1rem);
......
components/top-level/pagination/styles.module.css
......@@ -4,6 +4,7 @@
align-items: center;
width: 100%;
font-weight: 500;
margin-block: 2rem;
}
.pagination-container > span {
display: flex;
......
jsconfig.json
......@@ -5,7 +5,7 @@
"@components/*": ["components/*"],
"@img/*": ["public/images/*"],
"@posts/*": ["posts/*"],
"@context/*": ["context/*"],
"@context/*": ["theme-context/*"],
"@lib/*": ["lib/*"],
"@styles/*": ["styles/*"]
},
......
lib/api.js
......@@ -4,11 +4,13 @@ import matter from "gray-matter";
import { remark } from "remark";
import html from "remark-html";
export async function getPostById(fileDirectory, slug) {
// common function for get all post data
async function getAllPosts(fileDirectory) {
const directory = path.join(process.cwd(), fileDirectory);
const fileNames = await fs.readdir(directory);
const data = await Promise.all(
const post = await Promise.all(
fileNames.map(async (fileName) => {
const id = fileName.replace(/\.md$/, "");
const fullPath = path.join(fileDirectory, fileName);
const fileContents = await fs.readFile(fullPath, "utf8");
const { data, content } = matter(fileContents);
......@@ -16,41 +18,16 @@ export async function getPostById(fileDirectory, slug) {
.use(html)
.processSync(content)
.toString();
return {
markdown: processedContent,
...data,
};
})
);
return data.filter((e) => e.id == slug)[0];
}
async function getAllPosts(fileDirectory) {
const directory = path.join(process.cwd(), fileDirectory);
const fileNames = await fs.readdir(directory);
const post = await Promise.all(
fileNames.map(async (fileName) => {
const id = fileName.replace(/\.md$/, "");
const fullPath = path.join(fileDirectory, fileName);
const fileContents = await fs.readFile(fullPath, "utf8");
const { data } = matter(fileContents);
return {
id,
...data,
markdown: processedContent,
};
})
);
return post;
}
export async function getPosts(fileDirectory, page) {
let post = await getAllPosts(fileDirectory, page);
return getSlicedPost(post, page);
}
function getSlicedPost(post, page) {
const itemsPerPage = 6;
// Calculate the start and end indices for the current page
......@@ -60,12 +37,25 @@ function getSlicedPost(post, page) {
? post.slice(startIndex, endIndex)
: [];
const totalPages = Math.ceil(post?.length / itemsPerPage);
const response = { blogs: slicedData, total: totalPages };
return response;
}
const response = { data: slicedData, total: totalPages };
//common function end
return response;
//get by slug
export async function getPostBySlug(slug) {
const blogs = await getAllPosts("posts");
return blogs.filter((e) => e.slug === slug)[0];
}
//get all
export async function getPosts(fileDirectory, page) {
let post = await getAllPosts(fileDirectory, page);
return getSlicedPost(post, page);
}
//get by search
export async function getPostsBySearch(fileDirectory, page, search) {
const post = await getAllPosts(fileDirectory);
const filterBlog = post.filter((e) => {
......
posts/blog1.md
......@@ -16,6 +16,7 @@ publishedDate: "2023-05-14."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "how-to-get-a-perfect-start-for-beginning-runners"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog2.md
......@@ -16,6 +16,7 @@ publishedDate: "2023-03-24."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "great-tools-to-improve-your-personal-blogging-experience"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog3.md
......@@ -16,6 +16,7 @@ publishedDate: "2023-07-18."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "blog-guide-how-to-start-a-personal-blog-on-wordPress"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog4.md
......@@ -16,6 +16,7 @@ publishedDate: "2023-07-12."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "the-technical-setup-when-starting-a-personal-blog"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog5.md
......@@ -13,6 +13,7 @@ publishedDate: "2023-01-09."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "3-new-outfit-formulas-to-add-to-your-capsule-wardrobe"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog6.md
......@@ -16,6 +16,7 @@ publishedDate: "2023-09-20."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "blog-guide-how-to-start-a-personal-blog-on-wordPress"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog7.md
......@@ -13,6 +13,7 @@ publishedDate: "2023-08-28."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "how-to-get-a-perfect-start-for-beginning-runners"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog8.md
......@@ -13,6 +13,7 @@ publishedDate: "2023-02-16."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "great-tools-to-improve-your-personal-blogging-experience"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog9.md
......@@ -16,6 +16,7 @@ publishedDate: "2023-10-11."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
slug: "how-to-get-a-perfect-start-for-beginning-runners"
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
context/index.js → theme-context/index.js
......@@ -12,7 +12,7 @@ export const ThemeProvider = ({ children }) => {
const storedTheme = localStorage.getItem("theme");
setTheme(storedTheme);
document.documentElement.setAttribute("class", storedTheme);
}, []);
}, [theme]);
const toggleTheme = () => {
const newTheme = theme === "light" ? "dark" : "light";
......@@ -28,7 +28,9 @@ export const ThemeProvider = ({ children }) => {
return (
<ThemeContext.Provider value={contextValue}>
<div id="root" className={theme}>
{children}
</div>
</ThemeContext.Provider>
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment