chore: add README file for the repo for Project understanding.#8
Merged
rahul-vyas-dev merged 2 commits intoAOSSIE-Org:mainfrom Mar 9, 2026
Merged
chore: add README file for the repo for Project understanding.#8rahul-vyas-dev merged 2 commits intoAOSSIE-Org:mainfrom
rahul-vyas-dev merged 2 commits intoAOSSIE-Org:mainfrom
Conversation
github-actions
bot
added
no-issue-linked
WalkthroughComprehensive rewrite of README.md: replaces placeholders with real project identity “SupportUsButton”, adds installation/usage (npm & CDN), full Props/API documentation with examples, updated features, maintainer info, and copyright year set to 2026. (48 words) Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@README.md`:
- Around line 540-543: Update the duplicate alt text on the three <img> tags so
each image has a unique, descriptive alt attribute instead of the repeated
"AOSSIE-theme"; specifically change the alt for "./public/AOSSIE_THEME.jpeg",
"./public/AOSSIE_THEME-SPONSOR.jpeg", and "./public/AOSSIE_THEME_CTA.jpeg" to
meaningful labels (e.g., "AOSSIE theme light screenshot", "AOSSIE sponsor banner
dark screenshot", "AOSSIE call-to-action banner screenshot") and likewise fix
the duplicated "AOSSIE-theme" alt entries used for the Light/Dark screenshots
elsewhere so each referenced image filename (AOSSIE_THEME, AOSSIE_THEME-SPONSOR,
AOSSIE_THEME_CTA) has a distinct, accessible alt text describing its content and
theme.
- Around line 315-319: The README's `pattern` prop list is inconsistent with the
source type; align the docs with the Pattern union in src/types/index.ts by
removing `"stripes"` and listing the exact allowed values (`"AOSSIE" | "dots" |
"grid" | "none"`) (or if `"stripes"` is the intended option, update the Pattern
type instead). Update the table row for `pattern` and the later “Pattern”
reference section to match the Pattern type defined in src/types/index.ts so the
documentation and code agree.
- Around line 146-159: The README CDN snippet is invalid for browser use: update
the section that references index.umd.js and style.css to first load React and
ReactDOM via CDN, then load the package UMD script, and replace the JSX
<SupportUsButton /> example with a concrete browser instantiation using the
actual global export provided by the UMD build (e.g., access
window.<globalExportName> and render it via ReactDOM API such as
ReactDOM.createRoot or ReactDOM.render); also mention verifying the UMD global
name from the built bundle or rollup config (the package identifier
`@aossie/support-us-button` is not the runtime global) and ensure the stylesheet
link remains included.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 34c7ab18-7a52-4b2a-abd3-7116c56ef5af
⛔ Files ignored due to path filters (9)
public/AOSSIE_THEME-SPONSOR.jpegis excluded by!**/*.jpegpublic/AOSSIE_THEME.jpegis excluded by!**/*.jpegpublic/AOSSIE_THEME_CTA.jpegis excluded by!**/*.jpegpublic/DARK_THEME.jpegis excluded by!**/*.jpegpublic/DARK_THEME_CTA.jpegis excluded by!**/*.jpegpublic/DARK_THEME_SPONSOR.pngis excluded by!**/*.pngpublic/LIGHT_THEME.jpegis excluded by!**/*.jpegpublic/LIGHT_THEME_CTA.jpegis excluded by!**/*.jpegpublic/LIGHT_THEME_SPONSOR.pngis excluded by!**/*.png
📒 Files selected for processing (1)
README.md
Comment on lines
+540
to
+543
| <div style="width:fit-content; margin:auto; display:flex; flex-wrap:wrap; gap:12px; justify-content:center;"> | ||
| <img src="./public/AOSSIE_THEME.jpeg" alt="AOSSIE-theme" style="width:fit-content; max-width:100%; height:auto;" /> | ||
| <img src="./public/AOSSIE_THEME-SPONSOR.jpeg" alt="AOSSIE-theme" style="width:fit-content; max-width:100%; height:auto;" /> | ||
| <img src="./public/AOSSIE_THEME_CTA.jpeg" alt="AOSSIE-theme" style="width:fit-content; max-width:100%; height:auto;" /> |
There was a problem hiding this comment.
Use accurate alt text for each screenshot.
Several screenshot images reuse the same alt text, and Lines 556-558 / 571-573 still say AOSSIE-theme for Light/Dark screenshots. That makes the README less accessible and mislabels the images for screen readers.
Also applies to: 556-558, 571-573
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 540 - 543, Update the duplicate alt text on the three
<img> tags so each image has a unique, descriptive alt attribute instead of the
repeated "AOSSIE-theme"; specifically change the alt for
"./public/AOSSIE_THEME.jpeg", "./public/AOSSIE_THEME-SPONSOR.jpeg", and
"./public/AOSSIE_THEME_CTA.jpeg" to meaningful labels (e.g., "AOSSIE theme light
screenshot", "AOSSIE sponsor banner dark screenshot", "AOSSIE call-to-action
banner screenshot") and likewise fix the duplicated "AOSSIE-theme" alt entries
used for the Light/Dark screenshots elsewhere so each referenced image filename
(AOSSIE_THEME, AOSSIE_THEME-SPONSOR, AOSSIE_THEME_CTA) has a distinct,
accessible alt text describing its content and theme.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
README.md (2)
541-543:⚠️ Potential issue | 🟡 MinorFix duplicate alt text for accessibility.
All three AOSSIE theme screenshots use identical
alt="AOSSIE-theme"text. Each image should have unique, descriptive alt text for screen reader users.♿ Proposed fix
- <img src="./public/AOSSIE_THEME.jpeg" alt="AOSSIE-theme" style="width:fit-content; max-width:100%; height:auto;" /> - <img src="./public/AOSSIE_THEME-SPONSOR.jpeg" alt="AOSSIE-theme" style="width:fit-content; max-width:100%; height:auto;" /> - <img src="./public/AOSSIE_THEME_CTA.jpeg" alt="AOSSIE-theme" style="width:fit-content; max-width:100%; height:auto;" /> + <img src="./public/AOSSIE_THEME.jpeg" alt="AOSSIE theme hero section" style="width:fit-content; max-width:100%; height:auto;" /> + <img src="./public/AOSSIE_THEME-SPONSOR.jpeg" alt="AOSSIE theme sponsors section" style="width:fit-content; max-width:100%; height:auto;" /> + <img src="./public/AOSSIE_THEME_CTA.jpeg" alt="AOSSIE theme call-to-action section" style="width:fit-content; max-width:100%; height:auto;" />Apply the same pattern to Light theme (lines 556-558) and Dark theme (lines 571-573) screenshots.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` around lines 541 - 543, The three theme images use identical alt text causing accessibility issues; update each img tag's alt attribute to a unique descriptive label referencing the image filenames (e.g., "AOSSIE theme overview", "AOSSIE theme sponsor banner", "AOSSIE theme call-to-action") for the files AOSSIE_THEME.jpeg, AOSSIE_THEME-SPONSOR.jpeg, and AOSSIE_THEME_CTA.jpeg, and apply the same unique-descriptive pattern to the Light and Dark theme image blocks so every screenshot has meaningful, distinct alt text.
146-157:⚠️ Potential issue | 🟠 MajorThe CDN usage example remains invalid.
The previous review identified three critical issues with this CDN snippet that have not been addressed:
- Missing React dependencies: The UMD build declares
react,react-dom, andreact/jsx-runtimeas external dependencies. They must be loaded from CDN before the component script.- Invalid syntax:
<SupportUsButton />is JSX and will not run in a browser without a transpiler. Plain HTML requiresReact.createElementor the UMD global access pattern.- Undefined global access: The UMD global name is
@aossie/support-us-button(not a valid identifier), so the component must be accessed aswindow["@aossie/support-us-button"].default.🌐 Working CDN example
<!-- 1. Load React dependencies first --> <script src="https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@19/umd/react-dom.production.min.js"></script> <!-- 2. Load the component --> <script src="https://cdn.jsdelivr.net/npm/@aossie/support-us-button@latest/dist/index.umd.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aossie/support-us-button@latest/dist/style.css" /> <!-- 3. Mount the component using ReactDOM API --> <div id="support-us-root"></div> <script> var SupportUsButton = window["@aossie/support-us-button"].default; ReactDOM.createRoot(document.getElementById("support-us-root")).render( React.createElement(SupportUsButton, { /* props here */ }) ); </script>Consider updating the UMD
nameinrollup.config.jsto"SupportUsButton"for a cleaner browser experience.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` around lines 146 - 157, The README's CDN snippet is invalid: it omits required React/ReactDOM UMD scripts, uses JSX which won't run in the browser, and assumes an illegal UMD global name; fix it by updating the example to (1) load React and ReactDOM UMD bundles before your component, (2) replace the JSX usage of <SupportUsButton /> with mounting via ReactDOM.createRoot/ReactDOM.render and React.createElement, and (3) access the component from the actual UMD global name window["@aossie/support-us-button"].default (or, better, change the rollup/UMD name in rollup.config.js to a valid identifier like "SupportUsButton" and then reference window.SupportUsButton.default in the example).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@README.md`:
- Around line 469-475: Update the sponsor description table entries to hyphenate
compound adjectives: change "High level sponsor" to "High-level sponsor", "Mid
level sponsor" to "Mid-level sponsor", and "Entry level sponsor" to "Entry-level
sponsor" for the rows associated with `Gold`, `Silver`, and `Bronze` (leave
`Platinum` unchanged).
- Around line 392-395: Update the README table row for the Image prop: locate
the table entry for `src` (under the headers Value | Type | Required |
Description) where the description reads "Imag URl" and correct the typo to
"Image URL" so the `src` description reads "Image URL".
---
Duplicate comments:
In `@README.md`:
- Around line 541-543: The three theme images use identical alt text causing
accessibility issues; update each img tag's alt attribute to a unique
descriptive label referencing the image filenames (e.g., "AOSSIE theme
overview", "AOSSIE theme sponsor banner", "AOSSIE theme call-to-action") for the
files AOSSIE_THEME.jpeg, AOSSIE_THEME-SPONSOR.jpeg, and AOSSIE_THEME_CTA.jpeg,
and apply the same unique-descriptive pattern to the Light and Dark theme image
blocks so every screenshot has meaningful, distinct alt text.
- Around line 146-157: The README's CDN snippet is invalid: it omits required
React/ReactDOM UMD scripts, uses JSX which won't run in the browser, and assumes
an illegal UMD global name; fix it by updating the example to (1) load React and
ReactDOM UMD bundles before your component, (2) replace the JSX usage of
<SupportUsButton /> with mounting via ReactDOM.createRoot/ReactDOM.render and
React.createElement, and (3) access the component from the actual UMD global
name window["@aossie/support-us-button"].default (or, better, change the
rollup/UMD name in rollup.config.js to a valid identifier like "SupportUsButton"
and then reference window.SupportUsButton.default in the example).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: c0523d40-5ecd-45d8-9f82-b9f3f6e0b9fb
📒 Files selected for processing (1)
README.md
Comment on lines
+469
to
+475
| | Value | Description | | ||
| | ---------- | -------------------- | | ||
| | `Platinum` | Highest tier sponsor | | ||
| | `Gold` | High level sponsor | | ||
| | `Silver` | Mid level sponsor | | ||
| | `Bronze` | Entry level sponsor | | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding hyphens to compound modifiers.
In formal documentation, compound adjectives like "high level" should be hyphenated when they precede a noun: "high-level sponsor", "mid-level sponsor", "entry-level sponsor".
✍️ Proposed fix
| Value | Description |
| ---------- | -------------------- |
| `Platinum` | Highest tier sponsor |
-| `Gold` | High level sponsor |
-| `Silver` | Mid level sponsor |
-| `Bronze` | Entry level sponsor |
+| `Gold` | High-level sponsor |
+| `Silver` | Mid-level sponsor |
+| `Bronze` | Entry-level sponsor |🧰 Tools
🪛 LanguageTool
[grammar] ~472-~472: Use a hyphen to join words.
Context: ...ghest tier sponsor | | Gold | High level sponsor | | Silver | Mid lev...
(QB_NEW_EN_HYPHEN)
[grammar] ~473-~473: Use a hyphen to join words.
Context: ...igh level sponsor | | Silver | Mid level sponsor | | Bronze | Entry ...
(QB_NEW_EN_HYPHEN)
[grammar] ~474-~474: Use a hyphen to join words.
Context: ... level sponsor | | Bronze | Entry level sponsor |
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 469 - 475, Update the sponsor description table
entries to hyphenate compound adjectives: change "High level sponsor" to
"High-level sponsor", "Mid level sponsor" to "Mid-level sponsor", and "Entry
level sponsor" to "Entry-level sponsor" for the rows associated with `Gold`,
`Silver`, and `Bronze` (leave `Platinum` unchanged).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a complete README.md file to the repository to improve project documentation and make the project easier to understand and contribute to.
The README provides an overview of the project, its purpose, and essential information needed by users and contributors. It organizes the repository information in a clear and structured manner so that anyone visiting the project can quickly understand what the project does and how to interact with it.
Key additions include:
A clear project introduction explaining the purpose of the repository.
Structured sections for usage, installation, and contribution guidance.
A contributors section to acknowledge individuals who have contributed to the project.
Proper formatting and layout improvements to make the documentation readable and visually organized.
This addition helps improve the repository’s accessibility, transparency, and maintainability while providing a better onboarding experience for new contributors and users.
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit