Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: refactor blog code to access the 404 page as redirection #77

Merged
merged 6 commits into from
Jan 5, 2025
Merged

fix: refactor blog code to access the 404 page as redirection #77

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e698b3c
fix: refactor blog code to access the 404 page as redirection
khareyash05 Dec 13, 2024
96be851
refactor file with unecessary changes
khareyash05 Dec 13, 2024
7e2d056
Merge branch 'main' into blog-404
khareyash05 Dec 13, 2024
f7781ca
Merge branch 'main' into blog-404
khareyash05 Dec 17, 2024
1f2cc03
fix: tech stories
khareyash05 Dec 30, 2024
7594e2e
Merge branch 'main' into blog-404
khareyash05 Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions pages/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,35 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import Head from "next/head";
import NotFoundPage from "../components/NotFoundPage";

export default function Custom404() {

const router = useRouter();
const category = router.asPath.split("/")[1];
const asPath = router.asPath;

useEffect(() => {
const redirectTimeout = setTimeout(() => {
if (category === "community") {
router.replace("/technology");
} else if (category === "technology") {
if (asPath.startsWith("/community/")) {
router.replace("/community");
} else if (asPath.startsWith("/technology/")) {
router.replace("/technology");
} else {
router.replace("/");
}
}, );
}
}, 5000);

return () => clearTimeout(redirectTimeout);
}, [category, router]);
}, [asPath, router]);

return <NotFoundPage />;
}
return (
<>
<Head>
<title>404 - Page Not Found | Keploy Blog</title>
</Head>
<NotFoundPage />
<div style={{ textAlign: "center", marginTop: "20px" }}>
<p>You will be redirected shortly...</p>
</div>
</>
);
};
180 changes: 99 additions & 81 deletions pages/community/[slug].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useRouter } from "next/router";
import ErrorPage from "next/error";
import Head from "next/head";
import { GetStaticPaths, GetStaticProps } from "next";
import Container from "../../components/container";
Expand All @@ -14,37 +13,29 @@ import {
getAllPostsWithSlug,
getMoreStoriesForSlugs,
getPostAndMorePosts,
getReviewAuthorDetails,
} from "../../lib/api";
import PrismLoader from "../../components/prism-loader";
import ContainerSlug from "../../components/containerSlug";
import { useEffect, useRef, useState } from "react";
import { useScroll, useSpringValue } from "@react-spring/web";
import { getReviewAuthorDetails } from "../../lib/api";
import { calculateReadingTime } from "../../utils/calculateReadingTime";
import dynamic from "next/dynamic";
import "./styles.module.css"

const PostBody = dynamic(() => import("../../components/post-body"), {
ssr: false,
});

// Define formatAuthor function before the Post component
const postBody = ({ content, post }) => {
// Define the regular expression pattern to match the entire URL structure
const urlPattern = /https:\/\/keploy\.io\/wp\/author\/[^\/]+\//g;

// Replace the URL in the content with the desired one using the regular expression
const replacedContent = content.replace(
urlPattern,
`/blog/authors/${post.ppmaAuthorName}/`
);

return replacedContent;
};
interface PostProps {
preview: boolean;
post: any;
posts: any;
reviewAuthorDetails: any;
}

export default function Post({ post, posts, reviewAuthorDetails, preview }) {
export default function Post ({ post, posts, reviewAuthorDetails, preview }: PostProps){
const router = useRouter();
const { slug }= router.query;
const { slug } = router.query;
const morePosts = posts?.edges;
const [avatarImgSrc, setAvatarImgSrc] = useState("");
const time = 10 + calculateReadingTime(post?.content);
Expand All @@ -55,14 +46,17 @@ export default function Post({ post, posts, reviewAuthorDetails, preview }) {
const [postBodyReviewerAuthor, setpostBodyReviewerAuthor] = useState(0);
const [updatedContent, setUpdatedContent] = useState("");

const postBodyRef = useRef<HTMLDivElement>(null);
const readProgress = useSpringValue(0);

useEffect(() => {
if (reviewAuthorDetails && reviewAuthorDetails?.length > 0) {
const authorIndex = post.ppmaAuthorName === "Neha" ? 1 : 0;
const authorNode = reviewAuthorDetails[authorIndex]?.edges[0]?.node;
const authorNode = reviewAuthorDetails[authorIndex]?.edges?.[0]?.node;
if (authorNode) {
setpostBodyReviewerAuthor(authorIndex);
setreviewAuthorName(authorNode.name);
setreviewAuthorImageUrl(authorNode.avatar.url);
setreviewAuthorDescription(authorNode.avatar.url);
setreviewAuthorDescription(authorNode.description);
}
}
Expand All @@ -71,39 +65,38 @@ export default function Post({ post, posts, reviewAuthorDetails, preview }) {
{
name: post?.ppmaAuthorName || "Author",
ImageUrl: avatarImgSrc || "/blog/images/author.png",
description: blogWriterDescription || "An author for keploy's blog.",
description: blogWriterDescription || "An author for Keploy's blog.",
},
];
const blogreviewer = [
{
name: reviewAuthorName || "Reviewer",
ImageUrl: reviewAuthorImageUrl || "/blog/images/author.png",
description: reviewAuthorDescription || "A Reviewer for keploy's blog",
description: reviewAuthorDescription || "A Reviewer for Keploy's blog",
},
];

const postBodyRef = useRef<HTMLDivElement>();
const readProgress = useSpringValue(0);
useScroll({
onChange(v) {
const topOffset = postBodyRef.current?.offsetTop || 0;
const clientHeight = postBodyRef.current?.clientHeight || 0;
if (v.value.scrollY < topOffset) v.value.scrollY = 0;
else if (
v.value.scrollY > topOffset &&
v.value.scrollY < clientHeight + topOffset
) {

if (v.value.scrollY < topOffset) {
v.value.scrollY = 0;
} else if (v.value.scrollY > topOffset && v.value.scrollY < clientHeight + topOffset) {
v.value.scrollY = ((v.value.scrollY - topOffset) / clientHeight) * 100;
} else {
v.value.scrollY = 100;
}

readProgress.set(v.value.scrollY);
},
});

useEffect(() => {
if (post && post.content) {

const content = post.content;

const avatarDivMatch = content.match(
/<div[^>]*class="pp-author-boxes-avatar"[^>]*>\s*<img[^>]*src='([^']*)'[^>]*\/?>/
);
Expand All @@ -113,20 +106,18 @@ export default function Post({ post, posts, reviewAuthorDetails, preview }) {
} else {
setAvatarImgSrc("/blog/images/author.png");
}

// Match the <p> with class pp-author-boxes-description and extract its content
const authorDescriptionMatch = content.match(
/<p[^>]*class="pp-author-boxes-description multiple-authors-description"[^>]*>(.*?)<\/p>/
);

// Apply table responsive wrapper
const newContent = content.replace(
/<table[^>]*>[\s\S]*?<\/table>/gm,
(table) => `<div class="overflow-x-auto">${table}</div>`
);

setUpdatedContent(newContent);

if (authorDescriptionMatch && authorDescriptionMatch[1].trim()?.length > 0) {
setBlogWriterDescription(authorDescriptionMatch[1].trim());
} else {
Expand All @@ -135,12 +126,6 @@ export default function Post({ post, posts, reviewAuthorDetails, preview }) {
}
}, [post]);

useEffect(() => {
if (!router.isFallback && !post?.slug) {
router.push("/404"); // Redirect to 404 page if slug is not available
}
}, [router, router.isFallback, post]);

return (
<Layout
preview={preview}
Expand Down Expand Up @@ -174,20 +159,19 @@ export default function Post({ post, posts, reviewAuthorDetails, preview }) {
)}
</Container>
<ContainerSlug>
{/* PostBody component placed outside the Container */}
<div ref={postBodyRef}>
<PostBody
content={
updatedContent // Use the updated content with responsive tables
}
authorName={post?.ppmaAuthorName || ""}
ReviewAuthorDetails={
reviewAuthorDetails &&
reviewAuthorDetails?.length > 0 &&
reviewAuthorDetails[postBodyReviewerAuthor]
}
slug={slug}
/>
{!router.isFallback && post ? (
<PostBody
content={updatedContent}
authorName={post?.ppmaAuthorName || ""}
ReviewAuthorDetails={
reviewAuthorDetails &&
reviewAuthorDetails.length > 0 &&
reviewAuthorDetails[postBodyReviewerAuthor]
}
slug={slug as string}
/>
) : null}
</div>
</ContainerSlug>
<Container>
Expand All @@ -203,41 +187,75 @@ export default function Post({ post, posts, reviewAuthorDetails, preview }) {
</Container>
</Layout>
);
}
};



export const getStaticProps: GetStaticProps = async ({
params,
preview = false,
previewData,
}) => {
const data = await getPostAndMorePosts(params?.slug, preview, previewData);
const { communityMoreStories } = await getMoreStoriesForSlugs(data?.post?.tags, data?.post?.slug);

// console.log("here is the main post: ",data?.post);
const authorDetails = [];
authorDetails.push(await getReviewAuthorDetails("neha"));
authorDetails.push(await getReviewAuthorDetails("Jain"));
return {
props: {
preview,
post: data?.post || {},
posts: communityMoreStories || [],
reviewAuthorDetails: authorDetails || {},
},
revalidate: 10,
};
const slug = params?.slug as string;

try {
const data = await getPostAndMorePosts(slug, preview, previewData);

if (!data?.post) {
return {
notFound: true,
};
}

const { communityMoreStories } = await getMoreStoriesForSlugs(
data.post.tags,
data.post.slug
);

const authorDetails = await Promise.all([
getReviewAuthorDetails("neha"),
getReviewAuthorDetails("Jain"),
]);

return {
props: {
preview,
post: data.post,
posts: communityMoreStories || [],
reviewAuthorDetails: authorDetails || [],
},
revalidate: 10, // Revalidate every 10 seconds
};
} catch (error) {
console.error("Error in getStaticProps:", error);
return {
notFound: true, // Redirect to 404 on error
};
}
};

export const getStaticPaths: GetStaticPaths = async () => {
const allPosts = await getAllPostsWithSlug();
const communtiyPosts =
allPosts?.edges
.filter(({ node }) =>
node?.categories?.edges?.some(({ node }) => node?.name === "community")
)
.map(({ node }) => `/community/${node?.slug}`) || [];
return {
paths: communtiyPosts || [],
fallback: true,
};
try {
const allPosts = await getAllPostsWithSlug();

const communityPosts =
allPosts?.edges
?.filter(({ node }) =>
node?.categories?.edges?.some(({ node }) => node?.name === "community")
)
?.map(({ node }) => ({
params: { slug: node?.slug },
})) || [];

return {
paths: communityPosts,
fallback: true,
};
} catch (error) {
console.error("Error fetching posts for static paths:", error);
return {
paths: [],
fallback: true,
};
}
};
Loading
Loading