Skip to content

N
NextJs-Blog
Commit 644f9234 by Madhankumar
Options

code changes

parent d3b8a857
Showing with 65 additions and 82 deletions
app/@header/default.js
"use client"; "use client";
import Header from "@components/base/header"; import Header from "@components/base/header";
import { useAppContext } from "@context/index"; import { useAppContext } from "theme-context/index";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
export default function PageHeader({ searchParams }) { export default function PageHeader({ searchParams }) {
......
app/layout.js
import { ThemeProvider } from "@context/index"; import { ThemeProvider } from "theme-context/index";
import "@styles/globals.css"; import "@styles/globals.css";
export default function RootLayout({ children, header }) { export default function RootLayout({ children, header }) {
// Check if localStorage is available (client-side)
const themeClass =
typeof window !== "undefined" ? localStorage.getItem("theme") : "light";
return ( return (
<ThemeProvider> <html lang="en">
<html lang="en" className={themeClass}> <body>
<body> <div id="root">
<div id="root"> <ThemeProvider>
{header} {header}
{children} {children}
</div> </ThemeProvider>
</body> </div>
</html> </body>
</ThemeProvider> </html>
); );
} }
app/page.js
import BlogLists from "@components/top-level/blog-lists"; import BlogLists from "@components/top-level/blog-lists";
import Pagination from "@components/top-level/pagination"; import Pagination from "@components/top-level/pagination";
import { getPosts, getPostsBySearch } from "@lib/api"; import { getPosts, getPostsBySearch } from "@lib/api";
import styles from "./page.module.css";
const Home = async ({ searchParams }) => { const Home = async ({ searchParams }) => {
let blogs; const pageNo = searchParams.page || 1;
let pageNo = searchParams.page || 1; const search = searchParams.search;
let search = searchParams.search;
if ("search" in searchParams) { if (search) {
if (search !== "") { var { blogs, total } = await getPostsBySearch("posts", pageNo, search);
blogs = await getPostsBySearch("posts", pageNo, search);
} else {
blogs.data.length = 0;
}
} else { } else {
blogs = await getPosts("posts", pageNo); var { blogs, total } = await getPosts("posts", pageNo);
} }
return ( return (
<div className={styles.container}> <>
{blogs.data?.length ? ( {blogs?.length ? (
<div> <div>
<BlogLists <BlogLists
title="Lifestyle" title="Lifestyle"
description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum." description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
blogs={blogs.data} blogs={blogs}
/>
<Pagination
currentPage={Number(pageNo)}
total={Number(total)}
search={search}
/> />
<div className={styles.pagination}>
<Pagination
currentPage={Number(pageNo)}
total={Number(blogs.total)}
perPage={6}
search={search}
/>
</div>
</div> </div>
) : ( ) : (
<h2 className="center">No data found</h2> <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 SingleBlog from "@components/top-level/single-blog";
import { getPostById } from "@lib/api"; import { getPostBySlug } from "@lib/api";
const SingleBlogApp = async ({ params: { id } }) => { const SingleBlogApp = async ({ params: { slug } }) => {
const blog = await getPostById("posts", id); const blog = await getPostBySlug(slug);
return <SingleBlog {...blog} />; return <SingleBlog {...blog} />;
}; };
......
components/base/card/index.js
...@@ -5,7 +5,7 @@ import Icons from "@components/base/icons"; ...@@ -5,7 +5,7 @@ import Icons from "@components/base/icons";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
const Card = ({ const Card = ({
id, slug,
title, title,
description, description,
images, images,
...@@ -16,7 +16,7 @@ const Card = ({ ...@@ -16,7 +16,7 @@ const Card = ({
return ( return (
<div className={styles.card}> <div className={styles.card}>
<div className={styles["card-body"]}> <div className={styles["card-body"]}>
<Link href={`singleblog/${id}`}> <Link href={`singleblog/${slug}`}>
<Image <Image
className={styles.img} className={styles.img}
src={images.card.url} src={images.card.url}
......
components/top-level/blog-lists/styles.module.css
.blog-container { .blog-container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
margin-bottom: 2rem; padding-block: 2rem;
scroll-behavior: smooth; scroll-behavior: smooth;
padding-inline: 0.8rem; padding-inline: 0.8rem;
width: min(100% - 1rem); width: min(100% - 1rem);
......
components/top-level/pagination/styles.module.css
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
font-weight: 500; font-weight: 500;
margin-block: 2rem;
} }
.pagination-container > span { .pagination-container > span {
display: flex; display: flex;
......
jsconfig.json
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"@components/*": ["components/*"], "@components/*": ["components/*"],
"@img/*": ["public/images/*"], "@img/*": ["public/images/*"],
"@posts/*": ["posts/*"], "@posts/*": ["posts/*"],
"@context/*": ["context/*"], "@context/*": ["theme-context/*"],
"@lib/*": ["lib/*"], "@lib/*": ["lib/*"],
"@styles/*": ["styles/*"] "@styles/*": ["styles/*"]
}, },
......
lib/api.js
...@@ -4,11 +4,13 @@ import matter from "gray-matter"; ...@@ -4,11 +4,13 @@ import matter from "gray-matter";
import { remark } from "remark"; import { remark } from "remark";
import html from "remark-html"; 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 directory = path.join(process.cwd(), fileDirectory);
const fileNames = await fs.readdir(directory); const fileNames = await fs.readdir(directory);
const data = await Promise.all( const post = await Promise.all(
fileNames.map(async (fileName) => { fileNames.map(async (fileName) => {
const id = fileName.replace(/\.md$/, "");
const fullPath = path.join(fileDirectory, fileName); const fullPath = path.join(fileDirectory, fileName);
const fileContents = await fs.readFile(fullPath, "utf8"); const fileContents = await fs.readFile(fullPath, "utf8");
const { data, content } = matter(fileContents); const { data, content } = matter(fileContents);
...@@ -16,41 +18,16 @@ export async function getPostById(fileDirectory, slug) { ...@@ -16,41 +18,16 @@ export async function getPostById(fileDirectory, slug) {
.use(html) .use(html)
.processSync(content) .processSync(content)
.toString(); .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 { return {
id, id,
...data, ...data,
markdown: processedContent,
}; };
}) })
); );
return post; return post;
} }
export async function getPosts(fileDirectory, page) {
let post = await getAllPosts(fileDirectory, page);
return getSlicedPost(post, page);
}
function getSlicedPost(post, page) { function getSlicedPost(post, page) {
const itemsPerPage = 6; const itemsPerPage = 6;
// Calculate the start and end indices for the current page // Calculate the start and end indices for the current page
...@@ -60,12 +37,25 @@ function getSlicedPost(post, page) { ...@@ -60,12 +37,25 @@ function getSlicedPost(post, page) {
? post.slice(startIndex, endIndex) ? post.slice(startIndex, endIndex)
: []; : [];
const totalPages = Math.ceil(post?.length / itemsPerPage); 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) { export async function getPostsBySearch(fileDirectory, page, search) {
const post = await getAllPosts(fileDirectory); const post = await getAllPosts(fileDirectory);
const filterBlog = post.filter((e) => { const filterBlog = post.filter((e) => {
......
posts/blog1.md
...@@ -16,6 +16,7 @@ publishedDate: "2023-05-14." ...@@ -16,6 +16,7 @@ publishedDate: "2023-05-14."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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." ...@@ -16,6 +16,7 @@ publishedDate: "2023-03-24."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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." ...@@ -16,6 +16,7 @@ publishedDate: "2023-07-18."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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." ...@@ -16,6 +16,7 @@ publishedDate: "2023-07-12."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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." ...@@ -13,6 +13,7 @@ publishedDate: "2023-01-09."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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." ...@@ -16,6 +16,7 @@ publishedDate: "2023-09-20."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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." ...@@ -13,6 +13,7 @@ publishedDate: "2023-08-28."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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." ...@@ -13,6 +13,7 @@ publishedDate: "2023-02-16."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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." ...@@ -16,6 +16,7 @@ publishedDate: "2023-10-11."
readingTime: "1 min" readingTime: "1 min"
category: "Fashion" category: "Fashion"
categories: ["Fashion", "Beauty"] 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. ### 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 }) => { ...@@ -12,7 +12,7 @@ export const ThemeProvider = ({ children }) => {
const storedTheme = localStorage.getItem("theme"); const storedTheme = localStorage.getItem("theme");
setTheme(storedTheme); setTheme(storedTheme);
document.documentElement.setAttribute("class", storedTheme); document.documentElement.setAttribute("class", storedTheme);
}, []); }, [theme]);
const toggleTheme = () => { const toggleTheme = () => {
const newTheme = theme === "light" ? "dark" : "light"; const newTheme = theme === "light" ? "dark" : "light";
...@@ -28,7 +28,9 @@ export const ThemeProvider = ({ children }) => { ...@@ -28,7 +28,9 @@ export const ThemeProvider = ({ children }) => {
return ( return (
<ThemeContext.Provider value={contextValue}> <ThemeContext.Provider value={contextValue}>
{children} <div id="root" className={theme}>
{children}
</div>
</ThemeContext.Provider> </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