Skip to content

Updated Readme.md #9

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

Closed
MiriyalaJayanth-19 wants to merge 2 commits into from
Closed

Updated Readme.md #9

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f3923e
Updated Readme.md
MiriyalaJayanth-19 Mar 11, 2026
4b1bded
Update README.md
MiriyalaJayanth-19 Mar 11, 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
139 changes: 21 additions & 118 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,146 +160,49 @@ Once included, the component will be available to use in your project.

---

## Example Usage
## Quick Start

Below is an example configuration for the `SupportUsButton` component.
Replace the placeholder text (titles, descriptions, images, links, etc.) with your own project information.
Props template — fill in your own values:

```tsx
// Example props configuration for SupportUsButton
// Modify the values according to your project needs

const props: supportUsButtonProps = {
// Theme of the widget (e.g., AOSSIE, light, dark, minimal)
Theme: "AOSSIE",

// Background pattern type (e.g., grid, dots)
pattern: "grid",
Theme: "", // "AOSSIE" | "light" | "dark" | "minimal" | "corporate"
pattern: "", // "AOSSIE" | "dots" | "grid" | "none"
buttonVariant: "", // "AOSSIE" | "primary" | "secondary" | "ghost" | "gradient"
Comment on lines +169 to +171
Copy link

@coderabbitai coderabbitai bot Mar 11, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Empty strings are invalid for enum-type props.

Lines 169-171 use empty strings ("") as placeholders for Theme, pattern, and buttonVariant, but these props expect specific enum values. If users copy this template as-is, they'll encounter type errors or runtime issues.

Recommendation: Either use valid example values (e.g., "AOSSIE") or omit these optional props entirely (don't include the lines). A Quick Start template should work out-of-the-box or be one small edit away from working.

📝 Proposed fix using valid example values 
-    Theme: "",              // "AOSSIE" | "light" | "dark" | "minimal" | "corporate"
-    pattern: "",            // "AOSSIE" | "dots" | "grid" | "none"
-    buttonVariant: "",      // "AOSSIE" | "primary" | "secondary" | "ghost" | "gradient"
+    Theme: "AOSSIE",        // "AOSSIE" | "light" | "dark" | "minimal" | "corporate"
+    pattern: "dots",        // "AOSSIE" | "dots" | "grid" | "none"
+    buttonVariant: "AOSSIE", // "AOSSIE" | "primary" | "secondary" | "ghost" | "gradient"

Alternative: Omit these optional props entirely from the Quick Start template and document them separately.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Theme: "", // "AOSSIE" | "light" | "dark" | "minimal" | "corporate"
pattern: "", // "AOSSIE" | "dots" | "grid" | "none"
buttonVariant: "", // "AOSSIE" | "primary" | "secondary" | "ghost" | "gradient"
Theme: "AOSSIE", // "AOSSIE" | "light" | "dark" | "minimal" | "corporate"
pattern: "dots", // "AOSSIE" | "dots" | "grid" | "none"
buttonVariant: "AOSSIE", // "AOSSIE" | "primary" | "secondary" | "ghost" | "gradient"
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@README.md` around lines 169 - 171, The README uses empty-string placeholders
for enum props Theme, pattern, and buttonVariant which are invalid; update the
example so those entries either use valid enum values (e.g., Theme: "AOSSIE",
pattern: "dots", buttonVariant: "primary") or remove those three optional lines
entirely so the Quick Start works out-of-the-box; locate the entries labeled
Theme, pattern, and buttonVariant in the snippet and replace the empty string
values with concrete examples or delete the lines and document the enums
elsewhere.


hero: {
Image: {
// Replace with your hero image
src: "https://your-image-link.com/hero-image.png",
alt: "Hero section image",
},

// Main title shown at the top of the widget
title: "Your Title Here",

// Short description about your project or mission
description:
"Write a brief description about your project, organization, or the purpose of sponsorship here.",

// Label shown above the sponsors section
sponsorLabel: "Your Sponsors",
title: "", // ← your heading
description: "", // ← your subheading
sponsorLabel: "", // ← optional label above org info
Image: { src: "", alt: "" }, // ← hero background image, Note: Remove the prop if you do not rquire a hero image.
Copy link

@coderabbitai coderabbitai bot Mar 11, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix typo in Image prop note.

Line 177 contains a typo: "rquire" should be "require".

✍️ Proposed fix 
-        Image: { src: "", alt: "" }, // ← hero background image, Note: Remove the prop if you do not rquire a hero image.
+        Image: { src: "", alt: "" }, // ← hero background image, Note: Remove the prop if you do not require a hero image.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Image: { src: "", alt: "" }, // ← hero background image, Note: Remove the prop if you do not rquire a hero image.
Image: { src: "", alt: "" }, // ← hero background image, Note: Remove the prop if you do not require a hero image.
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@README.md` at line 177, Update the inline comment next to the Image prop (the
line containing "Image: { src: "", alt: "" }") to correct the typo: change
"rquire" to "require" so the note reads "Note: Remove the prop if you do not
require a hero image."

},

organizationInformation: {
// Name of your organization
name: "Your Organization Name",

// Short description about the organization
description:
"Describe your organization, its mission, and what it works on.",

// Optional organization logo
logo: {
src: "https://your-image-link.com/logo.png",
alt: "Organization Logo",
},

name: "", // ← your organization name
description: "", // ← short org description
logo: { src: "", alt: "" }, // ← org logo (or pass a string for text fallback)
Copy link
Contributor

@rahul-vyas-dev rahul-vyas-dev Mar 11, 2026

Choose a reason for hiding this comment

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

Update this info too.

projectInformation: {
// Name of the project that is being sponsored
name: "Your Project Name",

// Short description of the project
description:
"Provide a short description of the project that sponsors are supporting.",
name: "", // ← your project name
description: "",// ← short project description
},
},
Comment on lines 180 to 188
Copy link

@coderabbitai coderabbitai bot Mar 11, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Consider demonstrating the simpler string form for logo.

Line 183 correctly notes that logo can be an Image object or a string, but only shows the object form. Since the Quick Start aims for simplicity, consider showing the string form in the template (which is simpler) and mentioning the object alternative in a comment.

💡 Alternative approach 
     organizationInformation: {
         name: "",           // ← your organization name
         description: "",    // ← short org description
-        logo: { src: "", alt: "" }, // ← org logo (or pass a string for text fallback)
+        logo: "",           // ← org logo URL (or use { src: "", alt: "" } for an Image object)
         projectInformation: {
             name: "",       // ← your project name
             description: "",// ← short project description
         },
     },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
organizationInformation: {
// Name of your organization
name: "Your Organization Name",
// Short description about the organization
description:
"Describe your organization, its mission, and what it works on.",
// Optional organization logo
logo: {
src: "https://your-image-link.com/logo.png",
alt: "Organization Logo",
},
name: "", // ← your organization name
description: "", // ← short org description
logo: { src: "", alt: "" }, // ← org logo (or pass a string for text fallback)
projectInformation: {
// Name of the project that is being sponsored
name: "Your Project Name",
// Short description of the project
description:
"Provide a short description of the project that sponsors are supporting.",
name: "", // ← your project name
description: "",// ← short project description
},
},
organizationInformation: {
name: "", // ← your organization name
description: "", // ← short org description
logo: "", // ← org logo URL (or use { src: "", alt: "" } for an Image object)
projectInformation: {
name: "", // ← your project name
description: "",// ← short project description
},
},
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@README.md` around lines 180 - 188, Update the README template example for
organizationInformation to show the simpler string form for logo (e.g., logo:
"MyOrg") instead of only the Image object; mention the object alternative in a
short inline comment (e.g., "// or an Image object: { src: '', alt: '' }") so
readers see the quick string usage first while still knowing the more detailed
logo option. Reference organizationInformation and logo in the example so
maintainers can locate and update the snippet.


// List of sponsors
// Optional — remove if you have no sponsors yet
sponsors: [
{
name: "Sponsor Name",
logo: "https://your-image-link.com/sponsor-logo.png",
link: "https://sponsor-website.com",

// Optional tier: Bronze | Silver | Gold | Platinum
sponsorshipTier: "Bronze",
},
{
name: "Another Sponsor",
logo: "https://your-image-link.com/sponsor-logo.png",
link: "https://sponsor-website.com",
sponsorshipTier: "Silver",
},
{
name: "Company Name",
logo: "https://your-image-link.com/company-logo.png",
link: "https://company-website.com",
sponsorshipTier: "Gold",
},
{ name: "", logo: "", link: "", sponsorshipTier: "" },
// Tiers: "Platinum" | "Gold" | "Silver" | "Bronze" (higher → bigger card)
],
Comment on lines +190 to 194
Copy link

@coderabbitai coderabbitai bot Mar 11, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Minor: Clarify that multiple sponsors can be added.

The sponsors array structure is correct, but it might be helpful to explicitly note that users can duplicate entries to add multiple sponsors (not just list tier options).

📝 Minor clarity improvement 
     // Optional — remove if you have no sponsors yet
     sponsors: [
         { name: "", logo: "", link: "", sponsorshipTier: "" },
-        // Tiers: "Platinum" | "Gold" | "Silver" | "Bronze" (higher → bigger card)
+        // Add more entries as needed. Tiers: "Platinum" | "Gold" | "Silver" | "Bronze" (higher → bigger card)
     ],
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Optional — remove if you have no sponsors yet
sponsors: [
{
name: "Sponsor Name",
logo: "https://your-image-link.com/sponsor-logo.png",
link: "https://sponsor-website.com",
// Optional tier: Bronze | Silver | Gold | Platinum
sponsorshipTier: "Bronze",
},
{
name: "Another Sponsor",
logo: "https://your-image-link.com/sponsor-logo.png",
link: "https://sponsor-website.com",
sponsorshipTier: "Silver",
},
{
name: "Company Name",
logo: "https://your-image-link.com/company-logo.png",
link: "https://company-website.com",
sponsorshipTier: "Gold",
},
{ name: "", logo: "", link: "", sponsorshipTier: "" },
// Tiers: "Platinum" | "Gold" | "Silver" | "Bronze" (higher → bigger card)
],
// Optional — remove if you have no sponsors yet
sponsors: [
{ name: "", logo: "", link: "", sponsorshipTier: "" },
// Add more entries as needed. Tiers: "Platinum" | "Gold" | "Silver" | "Bronze" (higher → bigger card)
],
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@README.md` around lines 190 - 194, The README sponsors snippet doesn't
explicitly say you can add more than one sponsor; update the description around
the sponsors array so it clarifies you can add multiple sponsor objects by
duplicating entries in the sponsors array (each object with name, logo, link,
sponsorshipTier), and keep the existing note about allowed tiers ("Platinum" |
"Gold" | "Silver" | "Bronze") for clarity; reference the sponsors array and the
example object keys (name, logo, link, sponsorshipTier) when adding this
explanatory line.


ctaSection: {
// Call-to-action title
title: "Support This Project",

// Description encouraging users to sponsor the project
description:
"Explain why supporting your project matters and how people can help.",

title: "", // ← CTA heading
description: "", // ← why people should sponsor
sponsorLink: [
{
// Platform name
name: "Patreon",

// Sponsorship link
url: "https://www.patreon.com/yourproject",

// Optional icon for the platform
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
),

// Optional custom class for styling
className: "patreon-link",

// Open link in a new tab
newTab: true,
},
{
name: "GitHub Sponsors",
url: "https://github.com/sponsors/yourproject",
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
),
className: "github-sponsors-link",
newTab: true,
},
{ name: "", url: "", icon: null, newTab: true },
Copy link
Contributor

@rahul-vyas-dev rahul-vyas-dev Mar 11, 2026

Choose a reason for hiding this comment

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

Add className too and also let the user know that this icon is a react Node type

// Add one entry per sponsorship platform
],
},
Comment on lines 196 to 203
Copy link

@coderabbitai coderabbitai bot Mar 11, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Consider omitting optional icon field from template.

Line 200 explicitly includes icon: null, but since icon is optional, it's more typical in templates to omit optional fields entirely. This reduces clutter and makes the template clearer for Quick Start users.

🧹 Cleaner template approach 
     ctaSection: {
         title: "",          // ← CTA heading
         description: "",    // ← why people should sponsor
         sponsorLink: [
-            { name: "", url: "", icon: null, newTab: true },
+            { name: "", url: "", newTab: true },
+            // Optional: add icon: YourIconComponent to any link
             // Add one entry per sponsorship platform
         ],
     },
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@README.md` around lines 196 - 203, Remove the optional icon field from the
example template to reduce clutter: update the ctaSection example (keys: title,
description, sponsorLink) so sponsorLink entries omit icon entirely (leave name,
url, newTab) instead of setting "icon: null", ensuring the example still shows
one entry per sponsorship platform and keeps field names title, description and
sponsorLink as-is.


// Button styling variant
buttonVariant: "AOSSIE",
};

// Component usage
<SupportUsButton {...props} />;
```

Expand Down
Loading