Skip to content

fix: Pagination instability, console errors #7364

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

Draft
saurabhraghuvanshii wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

fix: Pagination instability, console errors #7364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7e8be52
fix: paginations, slug
saurabhraghuvanshii Jan 21, 2026
6aa6f01
fix: path
saurabhraghuvanshii Jan 21, 2026
558cdc5
Merge branch 'master' into blog
saurabhraghuvanshii Jan 21, 2026
54c8969
fix: undefined blog
saurabhraghuvanshii Jan 21, 2026
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
93 changes: 37 additions & 56 deletions gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,33 +21,6 @@ const HEAVY_COLLECTIONS = new Set(["members", "integrations"]);
const isFullSiteBuild = process.env.BUILD_FULL_SITE !== "false";
const shouldIncludeCollection = (collection) => isFullSiteBuild || !HEAVY_COLLECTIONS.has(collection);

if (process.env.CI === "true") {
// All process.env.CI conditionals in this file are in place for GitHub Pages, if webhost changes in the future, code may need to be modified or removed.
//Replacing '/' would result in empty string which is invalid
const replacePath = (url) =>
url === "/" || url.includes("/404") || url.endsWith(".html") ? url : `${url}.html`;

exports.onCreatePage = ({ page, actions }) => {
const { createPage, deletePage, createRedirect } = actions;
const oldPage = Object.assign({}, page);
page.matchPath = page.path;
page.path = replacePath(page.path);

if (page.path !== oldPage.path) {
// Replace new page with old page
deletePage(oldPage);
createPage(page);

createRedirect({
fromPath: `/${page.matchPath}/`,
toPath: `/${page.matchPath}`,
redirectInBrowser: true,
isPermanent: true,
});
}
};
}


const { loadRedirects } = require("./src/utils/redirects.js");

Expand All @@ -59,25 +32,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions;

const envCreatePage = (props) => {
if (process.env.CI === "true") {
const { path, matchPath, ...rest } = props;
const isHandbookPage = path.startsWith("/community/handbook/");
createRedirect({
fromPath: `/${path}/`,
toPath: `/${path}`,
redirectInBrowser: true,
isPermanent: true,
});

return createPage({
path: isHandbookPage ? path : `${path}.html`,
matchPath: matchPath || path,
...rest,
});
}
return createPage(props);
return createPage({
...props,
matchPath: props.matchPath || props.path,
});
};

const blogPostTemplate = path.resolve("src/templates/blog-single.js");
const blogCategoryListTemplate = path.resolve(
"src/templates/blog-category-list.js"
Expand Down Expand Up @@ -147,6 +107,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
frontmatter {
program
programSlug
date
}
fields {
collection
Expand Down Expand Up @@ -260,6 +221,25 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
};

const blogs = filterByCollection("blog");
blogs.sort((a, b) => {
const da =
new Date(a.frontmatter?.date || a.internal.contentFilePath).getTime();
const db =
new Date(b.frontmatter?.date || b.internal.contentFilePath).getTime();
return db - da;
});


paginate({
createPage: envCreatePage,
items: blogs,
itemsPerPage: 10,
pathPrefix: "/blog",
component: path.resolve(
"src/sections/Blog/Blog-list/index.js"
),
});

const resources = filterByCollection("resources");
const news = filterByCollection("news");
const books = filterByCollection("service-mesh-books");
Expand Down Expand Up @@ -676,12 +656,13 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
slug = `/${collection}/${node.frontmatter.permalink}`;
} else {
switch (collection) {
case "blog":
if (node.frontmatter.published)
slug = `/${collection}/${slugify(
node.frontmatter.category
)}/${slugify(node.frontmatter.title)}`;
case "blog": {
const category = node.frontmatter.category || "general";
const title = node.frontmatter.title || node.id;

slug = `/${collection}/${slugify(category)}/${slugify(title)}`;
break;
}
case "news":
slug = `/company/${collection}/${slugify(node.frontmatter.title)}`;
break;
Expand All @@ -690,12 +671,12 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
case "kanvas-labs":
slug = `/learn/${collection}/${slugify(node.frontmatter.title)}`;
break;
case "resources":
if (node.frontmatter.published)
slug = `/${collection}/${slugify(
node.frontmatter.category
)}/${slugify(node.frontmatter.title)}`;
break;
case "resources": {
const category = node.frontmatter.category || "general";
const title = node.frontmatter.title || node.id;
slug = `/${collection}/${slugify(category)}/${slugify(title)}`;
break;
}
case "members":
if (node.frontmatter.published)
slug = `/community/members/${node.frontmatter.permalink ?? slugify(node.frontmatter.name)}`;
Expand Down
93 changes: 52 additions & 41 deletions src/sections/Blog/Blog-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,29 @@ import Pagination from "../../Resources/Resources-grid/paginate";
import SearchBox from "../../../reusecore/Search";

const BlogList = ({
isListView,
setListView,
setGridView,
pageContext,
currentPage,
searchQuery,
searchData,
setCurrentPage,
queryResults,
postsPerPage,
searchedPosts,
isListView = false,
setListView = () => {},
setGridView = () => {},
pageContext = {},
currentPage = 1,
searchQuery = "",
searchData = [],
setCurrentPage = () => {},
queryResults = [],
postsPerPage = 10,
searchedPosts = [],
}) => {
const category = pageContext.category ? pageContext.category : null;
const tag = pageContext.tag ? pageContext.tag : null;
const totalCount = queryResults.length;
const category = pageContext?.category ?? null;
const tag = pageContext?.tag ?? null;

const totalCount = Array.isArray(queryResults) ? queryResults.length : 0;

const header = tag
? `${totalCount} post${totalCount === 1 ? "" : "s"} tagged with "${tag}"`
: category
? `${totalCount} post${totalCount === 1 ? "" : "s"
} categorized as "${category}"`
: "Blog";
? `${totalCount} post${totalCount === 1 ? "" : "s"} categorized as "${category}"`
: "Blog";

// Change page
const paginate = (pageNumber) => {
setCurrentPage(pageNumber);
};
Expand All @@ -45,14 +45,12 @@ const BlogList = ({
img={RssFeedIcon}
feedlink="/blog/feed.xml"
/>

<div className="blog-page-wrapper">
<Container>
<Row style={{
flexWrap: "wrap"
}}
>
<Row style={{ flexWrap: "wrap" }}>
<Col $xs={12} $lg={8}>
{!pageContext.tag && !pageContext.category ? (
{!tag && !category ? (
<div className="tooltip-search">
<BlogViewToolTip
isListView={isListView}
Expand All @@ -62,38 +60,51 @@ const BlogList = ({
<SearchBox
searchQuery={searchQuery}
searchData={searchData}
paginate={paginate} currentPage={currentPage}
paginate={paginate}
currentPage={currentPage}
focusSearch={true}
/>
</div>
) : (
<SearchBox searchQuery={searchQuery} searchData={searchData} paginate={paginate} currentPage={currentPage} focusSearch={true} />
<SearchBox
searchQuery={searchQuery}
searchData={searchData}
paginate={paginate}
currentPage={currentPage}
focusSearch={true}
/>
)}

<div className="blog-list-wrapper">
<Row style={{
flexWrap: "wrap"
}}
className="blog-lists"
>
{searchedPosts.length > 0 &&
searchedPosts?.map(({ id, frontmatter, fields }, index) => (
<Row className="blog-lists" style={{ flexWrap: "wrap" }}>
{Array.isArray(searchedPosts) &&
searchedPosts.length > 0 &&
searchedPosts.map(({ id, frontmatter, fields }, index) => (
<Col $xs={12} key={id}>
<Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} />
<Card
frontmatter={frontmatter}
fields={fields}
loading={index === 0 ? "eager" : "lazy"}
fetchpriority={index === 0 ? "high" : "auto"}
/>
</Col>
))}

<Col>
{searchedPosts.length > 0 && (
<Pagination
postsPerPage={postsPerPage}
totalPosts={queryResults.length}
currentPage={currentPage}
paginate={paginate}
/>
)}
{Array.isArray(searchedPosts) &&
searchedPosts.length > 0 && (
<Pagination
postsPerPage={postsPerPage}
totalPosts={totalCount}
currentPage={currentPage}
paginate={paginate}
/>
)}
</Col>
</Row>
</div>
</Col>

<Col $xs={12} $lg={4}>
<Sidebar pageContext={pageContext} />
</Col>
Expand Down