Skip to content

Add sponsor section component #1536

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
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Add sponsor section component #1536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4fd3b43
updated detailscard component
M-ayank2005 May 30, 2025
02a0108
checks performed
M-ayank2005 May 31, 2025
3bef201
Merge branch 'main' into sponser
M-ayank2005 Jun 1, 2025
2fe0319
Merge branch 'main' into sponser
kasya Jun 1, 2025
e3d38f1
Updated CardDetailsPage.tsx to use map.
M-ayank2005 Jun 4, 2025
974d9f7
Merge branch 'main' into sponser
M-ayank2005 Jun 4, 2025
97e7001
Merge branch 'main' into sponser
M-ayank2005 Jun 7, 2025
a6ab9a7
Merge branch 'main' into sponser
kasya Jun 8, 2025
68c0184
Merge branch 'main' into sponser
kasya Jun 12, 2025
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
37 changes: 37 additions & 0 deletions frontend/src/components/CardDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
faRectangleList,
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import { DetailsCardProps } from 'types/card'
import { capitalize } from 'utils/capitalize'
import { getSocialIcon } from 'utils/urlIconMappings'
Expand All @@ -35,6 +36,7 @@ const DetailsCard = ({
details,
socialLinks,
type,
key,
topContributors,
languages,
pullRequests,
Expand All @@ -47,6 +49,21 @@ const DetailsCard = ({
geolocationData = null,
repositories = [],
}: DetailsCardProps) => {
const getDonationUrl = () => {
if (!key) return 'https://owasp.org/donate/'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is still not addressed. No key is present (ever) so all links only direct to https://owasp.org/donate/
You need to update the backend to pass in this data for a key.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kasya Will it work as expected just by passing key in DetailsCard props?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@M-ayank2005 depends on what you expect to have in that key 🤔 . But I assume it should.
The thing is - you need to actually work on passing it in in this same PR.


const prefixMap = {
project: 'www-project-',
chapter: 'www-chapter-',
repository: '',
}

const encodedTitle = encodeURIComponent(`OWASP ${title || ''}`)
return `https://owasp.org/donate/?reponame=${prefixMap[type] || ''}${key}&title=${encodedTitle}`
}

const shouldShowSponsor = ['project', 'chapter', 'repository'].includes(type)

return (
<div className="min-h-screen bg-white p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
<div className="mx-auto max-w-6xl">
Expand Down Expand Up @@ -199,6 +216,26 @@ const DetailsCard = ({
<RepositoriesCard repositories={repositories} />
</SecondaryCard>
)}

{/* Sponsor Section */}
{shouldShowSponsor && (
<div className="mb-20 mt-8">
<SecondaryCard className="text-center">
<h3 className="mb-4 text-2xl font-semibold">Support Our Work</h3>
<p className="mb-6 text-gray-600 dark:text-gray-400">
Your contribution helps maintain and improve {title}. Support the OWASP community!
</p>
<Link
href={getDonationUrl()}
target="_blank"
rel="noopener noreferrer"
className="inline-block rounded bg-blue-500 px-6 py-3 font-bold text-white hover:bg-blue-600"
>
Sponsor {type === 'chapter' ? 'Chapter' : type === 'project' ? 'Project' : 'Repository'}
</Link>
</SecondaryCard>
</div>
)}
</div>
</div>
)
Expand Down
1 change: 1 addition & 0 deletions frontend/src/types/card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface DetailsCardProps {
geolocationData?: GeoLocDataGraphQL | null
heatmap?: JSX.Element
is_active?: boolean
key?: string
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@M-ayank2005 You added this new property here, but I don't see any key being passed on any page 🤔
Without it - links don't work as they should.

languages?: string[]
pullRequests?: ItemCardPullRequests[]
recentIssues?: ProjectIssuesType[]
Expand Down