Skip to content

fix: /whatson homepage underfill by filtering out invalid image rows … #578

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

Merged
kmurugulla merged 3 commits into from
Mar 18, 2026
Merged

fix: /whatson homepage underfill by filtering out invalid image rows … #578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6dbc195
fix: /whatson homepage underfill by filtering out invalid image rows …
kmurugulla Mar 18, 2026
7253f0f
fix : lint
kmurugulla Mar 18, 2026
e152610
fix: removing the limit to make sure it loads all 7 on home page
kmurugulla Mar 18, 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
16 changes: 6 additions & 10 deletions aemedge/blocks/category/category.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import {
pathToTag,
} from '../../scripts/utils.js';

const LIMIT_100 = '100';

// Create cardLarge images for 2 breakpoints
export async function addCardImageLarge(row, style, eagerImage = true) {
const cardImageDiv = createTag('div', { class: 'card-image' });
Expand Down Expand Up @@ -103,25 +101,23 @@ export default async function decorate(block) {
lastSegmentOfURL = currentCategory;
}

let limit = '';
// check if whatson homepage and add limit what we pull from query index for better performance
if (window.location.pathname === '/whatson' || window.location.pathname === '/whatson/') {
limit = LIMIT_100;
}
let blogsbypaths;
if (paths.length >= 1) blogsbypaths = await getBlogsByPaths(paths, limit);
if (paths.length >= 1) blogsbypaths = await getBlogsByPaths(paths);
let blogs;
let mergedBlogs;
if (blogsbypaths && (blogsbypaths.length > 0 && blogsbypaths.length < 8)) {
numberofblogs -= blogsbypaths.length;
// Get blogs
if (numberofblogs > 0) {
blogs = await getBlogs(categories.map((cat) => pathToTag(cat)), numberofblogs, limit);
blogs = await getBlogs(categories.map((cat) => pathToTag(cat)), numberofblogs);
mergedBlogs = [...blogs, ...blogsbypaths];
} else {
mergedBlogs = blogsbypaths;
}
} else {
mergedBlogs = await getBlogs(categories.map((cat) => pathToTag(cat)), numberofblogs, limit);
mergedBlogs = await getBlogs(categories.map((cat) => pathToTag(cat)), numberofblogs);
}

mergedBlogs.forEach(async (blog, i) => {
if (blog.image === '') return;
let card;
Expand Down
40 changes: 25 additions & 15 deletions aemedge/scripts/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,8 @@ export async function fetchData(path) {
const json = await response.json();

return json.data.map((row) => {
if (row.image.startsWith('/default-meta-image.png')) {
const img = row.image;
if (typeof img === 'string' && img.startsWith('/default-meta-image.png')) {
row.image = `/${window.hlx.codeBasePath}${row.image}`;
}
return row;
Expand All @@ -223,29 +224,38 @@ function compareArrays(arr, arr2) {
return arr.every((i) => arr2.includes(i));
}

/**
* Returns true if the entry has a renderable blog image.
* Excludes missing, empty, '0', and default-meta-image to avoid underfill or runtime errors.
* @param {Object} entry - Query-index row
* @returns {boolean}
*/
function hasValidBlogImage(entry) {
return typeof entry.image === 'string'
&& entry.image !== ''
&& entry.image !== '0'
&& !entry.image.includes('default-meta-image.png');
}

const QUERY_INDEX_PATH = '/whatson/query-index.json';

/**
* Retrieves blogs matching specific tags
* @param {Array} categories - An array of categories to filter by
* @param {number} num - The number of blogs to retrieve
* @param {string} limit - The limit of blogs to retrieve from the query-index
* @returns {Promise<Array>} - A promise resolving to the filtered blogs array
*/
export async function getBlogs(categories, num, limit = '') {
export async function getBlogs(categories, num) {
const isBlogsHome = (window.location.pathname === '/whatson' || window.location.pathname === '/whatson/');
if (!window.allBlogs) {
window.allBlogs = await fetchData(`/whatson/query-index.json${limit ? `?limit=${limit}` : ''}`);
window.allBlogs = await fetchData(QUERY_INDEX_PATH);
}
const isBlogsHome = (window.location.pathname === '/whatson' || window.location.pathname === '/whatson/');
const blogArticles = isBlogsHome
? window.allBlogs.filter(
(e) => (e.template === 'blog-article'
&& e.image !== ''
&& !e.image.startsWith('//aemedge/default-meta-image.png')
&& (e.hideFromHome !== 'yes')),
(e) => (e.template === 'blog-article' && hasValidBlogImage(e) && (e.hideFromHome !== 'yes')),
)
: window.allBlogs.filter(
(e) => (e.template === 'blog-article'
&& e.image !== ''
&& !e.image.startsWith('//aemedge/default-meta-image.png')),
(e) => (e.template === 'blog-article' && hasValidBlogImage(e)),
);

if ((categories && categories.length > 0)) {
Expand All @@ -265,12 +275,12 @@ export async function getBlogs(categories, num, limit = '') {
return blogArticles;
}

export async function getBlogsByPaths(paths, limit = '') {
export async function getBlogsByPaths(paths) {
if (!window.allBlogs) {
window.allBlogs = await fetchData(`/whatson/query-index.json${limit ? `?limit=${limit}` : ''}`);
window.allBlogs = await fetchData(QUERY_INDEX_PATH);
}
const blogArticles = window.allBlogs.filter(
(e) => (e.template !== 'blog-category' && e.image !== '' && !e.image.startsWith('//aemedge/default-meta-image.png')),
(e) => (e.template !== 'blog-category' && hasValidBlogImage(e)),
);
let filterArticles = [];
if (paths && paths.length > 0) {
Expand Down
Loading