Skip to content

Fix oversized GitHub icon on What is GitOps resource page #7997

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

Open
Abh-igyan wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix oversized GitHub icon on What is GitOps resource page #7997

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
ff17c2f
Fix oversized GitHub icon on What is GitOps resource page
Abh-igyan Aug 23, 2026
e9cdb35
Added named tokens for gitops image dimensions
Abh-igyan Aug 24, 2026
c9ee2e8
Merge branch 'master' into gitops_img_size
rishiraj38 Aug 25, 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
97 changes: 62 additions & 35 deletions src/reusecore/PageHeader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,47 +9,71 @@ import layer5_img from "../../assets/images/layer5/layer5-only/svg/layer5-gray-n
const authorField = (author, isSlugAvailable) => {
return (
<>
{
isSlugAvailable ?
<Link to={`/community/members/${slugify(author.name)}`}>
<span>{author.name}</span>
</Link>
: <span>{author.name}</span>
}
{isSlugAvailable ? (
<Link to={`/community/members/${slugify(author.name)}`}>
<span>{author.name}</span>
</Link>
) : (
<span>{author.name}</span>
)}
</>
);
};

const PageHeader = ({ category, title, img, feedlink, subtitle, author, thumbnail, superscript, date }) => {
const PageHeader = ({
category,
title,
img,
feedlink,
subtitle,
author,
thumbnail,
superscript,
date,
featureImageClassName,
}) => {
let isSlugAvailable = false;
if (author){
const validMembers = useStaticQuery(
graphql`
query validMemberss{
allMdx(
filter:{
fields:{ collection:{eq:"members"} }
}
) {
nodes {
frontmatter {
name
}
}
}
}
`
if (author) {
const validMembers = useStaticQuery(graphql`
query validMemberss {
allMdx(filter: { fields: { collection: { eq: "members" } } }) {
nodes {
frontmatter {
name
}
}
}
}
`);
isSlugAvailable = validMembers.allMdx.nodes.some(
(matter) => matter.frontmatter.name == author.name,
);
isSlugAvailable = validMembers.allMdx.nodes.some(matter => matter.frontmatter.name == author.name);
}
return (
<PageHeaderWrapper>
<div className="page-header">
{ thumbnail && <div className="feature-image" style={{ minHeight: "250px" }}>
<Image {...thumbnail} imgStyle={{ objectFit: "contain" }} alt={title}/>
</div>}
<h1 className="page-title" >{title} <sup className="supscript">{superscript}</sup>{ img && feedlink && (<a href= {feedlink} target="_blank" rel="noreferrer"> <img src={img} alt="RSS Feed"/> </a>) } </h1>
{subtitle && (<h3>{subtitle}</h3>)}
{thumbnail && (
<div
className={`feature-image ${featureImageClassName || ""}`}
style={{ minHeight: "250px" }}
>
<Image
{...thumbnail}
imgStyle={{ objectFit: "contain" }}
alt={title}
/>
</div>
)}
<h1 className="page-title">
{title} <sup className="supscript">{superscript}</sup>
{img && feedlink && (
<a href={feedlink} target="_blank" rel="noreferrer">
{" "}
<img src={img} alt="RSS Feed" />{" "}
</a>
)}{" "}
</h1>
{subtitle && <h3>{subtitle}</h3>}
{category && (
<div className="breadcrumbs">
<span>
Expand All @@ -64,10 +88,13 @@ const PageHeader = ({ category, title, img, feedlink, subtitle, author, thumbnai
<>
<span>
<h5>By:</h5>
{author.name === "Layer5 Team"
? <p><img src={layer5_img} alt="Layer5" width="85" /> Team</p>
: <p>{authorField(author, isSlugAvailable)}</p>
}
{author.name === "Layer5 Team" ? (
<p>
<img src={layer5_img} alt="Layer5" width="85" /> Team
</p>
) : (
<p>{authorField(author, isSlugAvailable)}</p>
)}
</span>
</>
)}
Expand Down
44 changes: 30 additions & 14 deletions src/reusecore/PageHeader/pageHeader.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,17 @@ const PageHeaderWrapper = styled.div`
justify-content: center;
align-items: center;
width: 100%;
max-width: 700px;
margin: 0 auto;
padding: 0 1rem;
max-width: 700px;
margin: 0 auto;
padding: 0 1rem;

img {
margin-top: 0rem;
width: 100%;
max-width: auto;
max-height: auto;
height: 100%;
object-fit: fill;
margin-top: 0rem;
width: 100%;
max-width: auto;
max-height: auto;
height: 100%;
object-fit: fill;
display: block;
}
}
Expand All @@ -64,14 +64,13 @@ const PageHeaderWrapper = styled.div`
}
}


@media (max-width: 768px) {
.feature-image {
max-width: 90vw;
max-width: 90vw;
padding: 0 0.5rem;

img {
max-width: 100%;
max-width: 100%;
max-height: 350px;
}
}
Expand All @@ -80,10 +79,27 @@ const PageHeaderWrapper = styled.div`
@media (max-width: 480px) {
.feature-image {
img {
max-height: 250px;
max-height: 250px;
}
}
}
.gitops-feature-image {
min-height: ${(props) => props.theme.gitopsFeatureImageHeight};
overflow: visible;

.old-gatsby-image-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
img {
width: auto;
max-width: 100%;
height: auto;
max-height: ${(props) => props.theme.gitopsFeatureImageMaxHeight};
object-fit: contain;
}
}
`;

export default PageHeaderWrapper;
export default PageHeaderWrapper;
98 changes: 50 additions & 48 deletions src/sections/Resources/Resource-single/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,57 +10,58 @@ import RelatedResourcesFactory from "../../../components/Related-Resources/relat
import { IoIosArrowDropleftCircle } from "@react-icons/all-files/io/IoIosArrowDropleftCircle";
import CTA_Bottom from "../../../components/Call-To-Actions/CTA_Bottom";


const ResourceSingle = ({ data, children }) => {
const { frontmatter, fields } = data.mdx;
const resourceData = useStaticQuery(
graphql`query relatedResources {
allMdx(
sort: {frontmatter: {date: DESC}}
filter: {fields: {collection: {eq: "resources"}}, frontmatter: {published: {eq: true}}}
) {
nodes {
frontmatter {
title
date(formatString: "MMM Do YYYY")
author
category
tags
thumbnail {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
}
extension
publicURL
}
thumbnail_svg {
extension
publicURL
const resourceData = useStaticQuery(graphql`
query relatedResources {
allMdx(
sort: { frontmatter: { date: DESC } }
filter: {
fields: { collection: { eq: "resources" } }
frontmatter: { published: { eq: true } }
}
darkthumbnail {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
) {
nodes {
frontmatter {
title
date(formatString: "MMM Do YYYY")
author
category
tags
thumbnail {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
}
extension
publicURL
}
thumbnail_svg {
extension
publicURL
}
darkthumbnail {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
}
extension
publicURL
}
darkthumbnail_svg {
extension
publicURL
}
}
fields {
slug
}
extension
publicURL
}
darkthumbnail_svg {
extension
publicURL
}
}
fields {
slug
}
}
}
}`
);
`);

const resources = resourceData.allMdx.nodes;
const relatedResources = new RelatedResourcesFactory(
resources, fields.slug
).setMaxResources(6)
const relatedResources = new RelatedResourcesFactory(resources, fields.slug)
.setMaxResources(6)
.setCategory(frontmatter.category)
.setTags(frontmatter.tags)
.getResources();
Expand All @@ -72,16 +73,17 @@ const ResourceSingle = ({ data, children }) => {
subtitle={frontmatter.subtitle}

thumbnail={frontmatter.thumbnail || frontmatter.thumbnail_svg}
featureImageClassName={
fields.slug === "/resources/cloud-native/what-is-gitops"
? "gitops-feature-image"
: ""
}
/>
<div className="single-resource-wrapper">
<Container>
<SRLWrapper>
{children}
</SRLWrapper>
<SRLWrapper>{children}</SRLWrapper>

<CTA_Bottom
category={"Kanvas"}
/>
<CTA_Bottom category={"Kanvas"} />

<div className="backBtn">
<Link to="/resources">
Expand Down
Loading