From 6214203202f0f4db41c586e3aa9c08ba4827ace3 Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Sat, 19 Sep 2026 22:25:00 +0530 Subject: [PATCH 1/3] [resources] Add sort by date/relevance dropdown to Resources page Adds a Sort by dropdown to the Cloud Native Resources page with Latest, Oldest, and Relevance options. Fixes the missing date field in the GraphQL query, resets pagination when sort changes, and applies correct light/dark theme styling with a custom dropdown arrow. The dropdown is hidden on screens 990px and below per maintainer request, and includes an accessible aria-label. Signed-off-by: Akshat Singhai --- .../Resources/Resources-grid/DataWrapper.js | 70 +++---- .../Resources/Resources-grid/index.js | 67 ++++++- .../Resources-grid/resourceGrid.style.js | 180 ++++++++++-------- 3 files changed, 199 insertions(+), 118 deletions(-) diff --git a/src/sections/Resources/Resources-grid/DataWrapper.js b/src/sections/Resources/Resources-grid/DataWrapper.js index bad95e5053dad3..ac41ee419659fc 100644 --- a/src/sections/Resources/Resources-grid/DataWrapper.js +++ b/src/sections/Resources/Resources-grid/DataWrapper.js @@ -6,42 +6,48 @@ import LitePlaceholder from "../../../templates/lite-placeholder"; const DataWrapper = (WrappedComponent) => { return (props) => { - const data = useStaticQuery( - graphql`query allResourcesAndAllResources { - allMdx( - sort: {frontmatter: {date: DESC}} - filter: {fields: {collection: {in: ["blog", "resources", "news", "events"]}}, frontmatter: {published: {eq: true}, resource: {eq: true}}} - ) { - nodes { - id - frontmatter { - title - type - technology - product - mesh - thumbnail { - childImageSharp { - gatsbyImageData(width: 480, layout: CONSTRAINED) + const data = useStaticQuery(graphql` + query allResourcesAndAllResources { + allMdx( + sort: { frontmatter: { date: DESC } } + filter: { + fields: { + collection: { in: ["blog", "resources", "news", "events"] } + } + frontmatter: { published: { eq: true }, resource: { eq: true } } } - extension - publicURL - } - darkthumbnail { - childImageSharp { - gatsbyImageData(width: 480, layout: CONSTRAINED) + ) { + nodes { + id + frontmatter { + title + date + type + technology + product + mesh + thumbnail { + childImageSharp { + gatsbyImageData(width: 480, layout: CONSTRAINED) + } + extension + publicURL + } + darkthumbnail { + childImageSharp { + gatsbyImageData(width: 480, layout: CONSTRAINED) + } + extension + publicURL + } + } + fields { + slug + } } - extension - publicURL } } - fields { - slug - } - } - } -}` - ); + `); if (data.allMdx.nodes.length === 0) { return ( diff --git a/src/sections/Resources/Resources-grid/index.js b/src/sections/Resources/Resources-grid/index.js index 8958290507c5cd..066d79d3c1b87d 100644 --- a/src/sections/Resources/Resources-grid/index.js +++ b/src/sections/Resources/Resources-grid/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import Card from "../../../components/Card"; import { Row, Col } from "../../../reusecore/Layout"; import Pagination from "./paginate"; @@ -8,13 +8,42 @@ import EmptyResources from "../Resources-error/emptyStateTemplate"; import { ResourcePageWrapper } from "./resourceGrid.style"; const ResourceGrid = (props) => { + const [sortOption, setSortOption] = useState("latest"); + + const sortResources = (nodes) => { + if (sortOption === "relevance" && !props.searchQuery) { + const sorted = nodes.slice(); + sorted.sort((first, second) => { + const d1 = getDate(first); + const d2 = getDate(second); + return d2 - d1; + }); + return sorted; + } + if (sortOption === "relevance") { + return nodes; + } + const getDate = (node) => + node.frontmatter.date + ? new Date(node.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) + : new Date(0); + const sorted = nodes.slice(); + sorted.sort((first, second) => { + const d1 = getDate(first); + const d2 = getDate(second); + return sortOption === "oldest" ? d1 - d2 : d2 - d1; + }); + return sorted; + }; + // Get current posts const indexOfLastPost = props.currentPage * props.postsPerPage; const indexOfFirstPost = indexOfLastPost - props.postsPerPage; + const sortedData = sortResources(props.data); const searchedResource = props.postsPerPage > 0 - ? props.data.slice(indexOfFirstPost, indexOfLastPost) - : props.data; + ? sortedData.slice(indexOfFirstPost, indexOfLastPost) + : sortedData; const paginate = (pageNumber) => { props.setCurrentPage(pageNumber); @@ -23,13 +52,27 @@ const ResourceGrid = (props) => { left: 100, behavior: "smooth", }); - }; return (
+
+ +
{ />
- - {props.data.length < 1 && } + {props.data.length < 1 && ( + + )} {searchedResource.map(({ id, frontmatter, fields }) => ( diff --git a/src/sections/Resources/Resources-grid/resourceGrid.style.js b/src/sections/Resources/Resources-grid/resourceGrid.style.js index 25de50edbc8cfc..de856947032da6 100644 --- a/src/sections/Resources/Resources-grid/resourceGrid.style.js +++ b/src/sections/Resources/Resources-grid/resourceGrid.style.js @@ -1,102 +1,126 @@ import styled from "styled-components"; export const ResourcePageWrapper = styled.div` + .resource-grid-wrapper { + margin: 0.8rem 0 1.5rem 1.5rem; + } - .resource-grid-wrapper{ - margin: 0.8rem 0 1.5rem 1.5rem; + .search { + display: flex; + justify-content: flex-end; + width: 100%; + + margin-bottom: 0.8rem; + .searchBox { + flex: 0 0 50%; + @media only screen and (max-width: 990px) { + flex: 0 0 100%; + max-width: 100%; + } } + .sortBox { + flex: 0 0 auto; + margin-right: 1rem; + .sortDropdown { + padding: 15px 40px 15px 15px; + border-radius: 5px; + border: 1px solid ${(props) => props.theme.headingColor}; + background-color: ${(props) => props.theme.shadowDarkColor}; + color: ${(props) => props.theme.text}; + font-size: 0.9rem; + cursor: pointer; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 12px center; + background-size: 16px; - .search{ - display:flex; - justify-content:flex-end; - width:100%; - - margin-bottom: 0.8rem; - .searchBox{ - flex:0 0 50%; - @media only screen and (max-width:990px){ - - flex:0 0 100%; - max-width:100%; - - } + &:focus { + outline: 2px solid #00b39f; + outline-offset: 2px; } - - } - .post-content-block{ - height: 7rem; - } - .post-thumb-block{ - height: 10.5rem; + } + @media only screen and (max-width: 990px) { + display: none; + } } - .post-meta-block{ - p{ - margin:0; - } + } + .post-content-block { + height: 7rem; + } + .post-thumb-block { + height: 10.5rem; + } + .post-meta-block { + p { + margin: 0; } - .btn-container { - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - margin: 3rem auto 4rem; + } + .btn-container { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + margin: 3rem auto 4rem; - @media screen and (max-width: 768px) { - flex-direction: column; - gap: 1rem; - margin: 2rem auto 3rem; - } - } + @media screen and (max-width: 768px) { + flex-direction: column; + gap: 1rem; + margin: 2rem auto 3rem; + } + } - .nav-btn { - min-width: 130px; - padding: 0.75rem 1.5rem; - font-size: 1rem; - transition: all 0.3s ease; + .nav-btn { + min-width: 130px; + padding: 0.75rem 1.5rem; + font-size: 1rem; + transition: all 0.3s ease; - &:disabled { - opacity: 0.5; - cursor: not-allowed; - } + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } - @media screen and (max-width: 768px) { - min-width: 160px; - padding: 0.75rem 1.75rem; - } - } + @media screen and (max-width: 768px) { + min-width: 160px; + padding: 0.75rem 1.75rem; + } + } - @media only screen and (max-width: 575px) { - .resource-grid-wrapper{ - margin: 0 auto 5rem; - } + @media only screen and (max-width: 575px) { + .resource-grid-wrapper { + margin: 0 auto 5rem; } + } - .no-resources-page{ + .no-resources-page { padding: 1rem 1rem 4rem; margin: 1rem; - + box-shadow: 0px 3px 10px 1px rgba(0, 179, 159, 0.5); .errorMessage { - font-size: 2rem; - line-height: 2rem; + font-size: 2rem; + line-height: 2rem; } - .error-text{ - margin-top: 5rem; + .error-text { + margin-top: 5rem; } - .errorSubtitle { - font-weight: 400; - font-size: 1.5rem; - color: gray; - font-style: italic; - margin-top: 2.5rem; + .errorSubtitle { + font-weight: 400; + font-size: 1.5rem; + color: gray; + font-style: italic; + margin-top: 2.5rem; } - img{ - display: block; - margin:auto; - margin-top: 3.125rem; - width: 14rem; - @media only screen and (max-width:700px){ - max-width: 100%; - } - } + img { + display: block; + margin: auto; + margin-top: 3.125rem; + width: 14rem; + @media only screen and (max-width: 700px) { + max-width: 100%; + } } + } `; From 840d6e6a85a0761f8ea4c05ede873f6496d5beda Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Sat, 19 Sep 2026 22:45:07 +0530 Subject: [PATCH 2/3] Update index.js Signed-off-by: Akshat Singhai --- src/sections/Resources/Resources-grid/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/sections/Resources/Resources-grid/index.js b/src/sections/Resources/Resources-grid/index.js index 066d79d3c1b87d..a672b8e9926192 100644 --- a/src/sections/Resources/Resources-grid/index.js +++ b/src/sections/Resources/Resources-grid/index.js @@ -11,6 +11,11 @@ const ResourceGrid = (props) => { const [sortOption, setSortOption] = useState("latest"); const sortResources = (nodes) => { + const getDate = (node) => + node.frontmatter.date + ? new Date(node.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) + : new Date(0); + if (sortOption === "relevance" && !props.searchQuery) { const sorted = nodes.slice(); sorted.sort((first, second) => { @@ -23,10 +28,6 @@ const ResourceGrid = (props) => { if (sortOption === "relevance") { return nodes; } - const getDate = (node) => - node.frontmatter.date - ? new Date(node.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) - : new Date(0); const sorted = nodes.slice(); sorted.sort((first, second) => { const d1 = getDate(first); @@ -119,5 +120,4 @@ const ResourceGrid = (props) => { ); }; - export default ResourceGrid; From acdbb7ae7175ecd5a236f81d9cafc174f38a3533 Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Mon, 21 Sep 2026 17:44:06 +0530 Subject: [PATCH 3/3] Update DataWrapper.js Signed-off-by: Akshat Singhai