From 18fa0d3af179d47fbc01a3e6166afaebcd45519b Mon Sep 17 00:00:00 2001 From: Swathi Vutukuri Date: Sat, 21 Mar 2026 13:46:32 +0530 Subject: [PATCH 1/3] made logo clickable and redirected to org page --- src/components/SupportUsButton.tsx | 60 ++++++++++++++++++++++++------ src/types/index.ts | 2 +- 2 files changed, 49 insertions(+), 13 deletions(-) diff --git a/src/components/SupportUsButton.tsx b/src/components/SupportUsButton.tsx index c9b7278..f270795 100644 --- a/src/components/SupportUsButton.tsx +++ b/src/components/SupportUsButton.tsx @@ -48,6 +48,16 @@ function getButtonClasses(buttonVariant: ButtonVariant): string { return `${base} bg-primary hover:bg-primary/90 text-black font-black py-4 transition-all active:scale-[0.98] shadow-lg shadow-primary/20`; } +// Helper function to validate URLs and prevent XSS through 'javascript:' protocol +function validateUrl(url?: string): string | undefined { + if (!url) return undefined; + const lowerUrl = url.toLowerCase(); + if (lowerUrl.startsWith("http://") || lowerUrl.startsWith("https://")) { + return url; + } + return undefined; +} + // Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant function SupportUsButton({ Theme = "AOSSIE", @@ -70,6 +80,7 @@ function SupportUsButton({ }, buttonVariant = "AOSSIE", }: supportUsButtonProps): React.JSX.Element { + const validatedUrl = validateUrl(organizationInformation?.url); return ( // Container for the support us button, with dynamic classes based on the selected theme and custom class names
+ +
+ {validatedUrl ? ( + {typeof organizationInformation.logo === "string" ? ( - + {organizationInformation.logo} ) : ( {organizationInformation.logo?.alt} )} -
- + + ) : ( + <> + {typeof organizationInformation.logo === "string" ? ( + + + {organizationInformation.logo} + + + ) : ( + {organizationInformation.logo?.alt} + )} + + )} +
{/* Organization name and description */}

@@ -192,6 +225,9 @@ function SupportUsButton({

+ + + {/* Line */} {organizationInformation.projectInformation && (
{sponsors.map((sponsor, index) => ( {ctaSection.sponsorLink.map((link, index) => ( Date: Sat, 21 Mar 2026 14:28:21 +0530 Subject: [PATCH 2/3] coderabbit issues resolved --- README.md | 2 + src/components/SupportUsButton.tsx | 81 +++++++++++++++--------------- 2 files changed, 42 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index c120f4a..c32401d 100644 --- a/README.md +++ b/README.md @@ -181,6 +181,7 @@ const props: supportUsButtonProps = { name: "", // ← your organization name description: "", // ← short org description logo: { src: "", alt: "" }, // ← Add file path to src and alt text for accessibility. Note: Accepts a string path/url. + url:"",// ← If a valid organization URL is provided, the organization logo becomes clickable projectInformation: { name: "", // ← your project name description: "",// ← short project description @@ -334,6 +335,7 @@ Information about the organization and project. | `name` | string | Yes | Organization name | | `description` | string | Yes | Organization description | | `logo` | `Image` / string | No | Organization logo | +| `url` | string | No | Organization link | | `projectInformation` | `projectInformation` | No | Project details | diff --git a/src/components/SupportUsButton.tsx b/src/components/SupportUsButton.tsx index f270795..11e3f57 100644 --- a/src/components/SupportUsButton.tsx +++ b/src/components/SupportUsButton.tsx @@ -173,47 +173,46 @@ function SupportUsButton({ {/* Organization logo */} -
- {validatedUrl ? ( - - {typeof organizationInformation.logo === "string" ? ( - - - {organizationInformation.logo} - - - ) : ( - {organizationInformation.logo?.alt} - )} - - ) : ( - <> - {typeof organizationInformation.logo === "string" ? ( - - - {organizationInformation.logo} - - - ) : ( - {organizationInformation.logo?.alt} - )} - - )} +
+ {organizationInformation?.logo ? ( + validatedUrl ? ( + + {typeof organizationInformation.logo === "string" ? ( + + + {organizationInformation.logo} + + + ) : ( + {organizationInformation.logo.alt} + )} + + ) : typeof organizationInformation.logo === "string" ? ( + + + {organizationInformation.logo} + + + ) : ( + {organizationInformation.logo.alt} + ) + ) : null}
{/* Organization name and description */}
From 7073b9596cdfe76ad031025c9cd0e0fb4c3c8c1b Mon Sep 17 00:00:00 2001 From: Swathi Vutukuri Date: Sat, 21 Mar 2026 14:50:00 +0530 Subject: [PATCH 3/3] coderabbit issues solved --- README.md | 2 +- src/components/SupportUsButton.tsx | 77 +++++++++++++----------------- src/types/index.ts | 2 +- 3 files changed, 34 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index c32401d..74f1c4b 100644 --- a/README.md +++ b/README.md @@ -181,7 +181,7 @@ const props: supportUsButtonProps = { name: "", // ← your organization name description: "", // ← short org description logo: { src: "", alt: "" }, // ← Add file path to src and alt text for accessibility. Note: Accepts a string path/url. - url:"",// ← If a valid organization URL is provided, the organization logo becomes clickable + url: "https://example.com", // ← optional: if a valid https:// URL is provided, the logo becomes clickable projectInformation: { name: "", // ← your project name description: "",// ← short project description diff --git a/src/components/SupportUsButton.tsx b/src/components/SupportUsButton.tsx index 11e3f57..e380029 100644 --- a/src/components/SupportUsButton.tsx +++ b/src/components/SupportUsButton.tsx @@ -81,6 +81,20 @@ function SupportUsButton({ buttonVariant = "AOSSIE", }: supportUsButtonProps): React.JSX.Element { const validatedUrl = validateUrl(organizationInformation?.url); + const logoContent = + typeof organizationInformation.logo === "string" ? ( + + {organizationInformation.logo} + + ) : ( + {organizationInformation.logo?.alt} + ); return ( // Container for the support us button, with dynamic classes based on the selected theme and custom class names
- {organizationInformation?.logo ? ( - validatedUrl ? ( - - {typeof organizationInformation.logo === "string" ? ( - - - {organizationInformation.logo} - - +
+ {organizationInformation?.logo && + (validatedUrl ? ( + + {logoContent} + ) : ( - {organizationInformation.logo.alt} - )} - - ) : typeof organizationInformation.logo === "string" ? ( - - - {organizationInformation.logo} - - - ) : ( - {organizationInformation.logo.alt} - ) - ) : null} -
+ logoContent + ))} +
+ {/* Organization name and description */}

@@ -224,9 +214,6 @@ function SupportUsButton({

- - - {/* Line */} {organizationInformation.projectInformation && (
{sponsors.map((sponsor, index) => ( {ctaSection.sponsorLink.map((link, index) => (