Add Some Changes and fix issues #348
Conversation
|
Someone is attempting to deploy a commit to the shravan20's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis PR updates docs, UI styles, and theme data; replaces the animations export shape; tweaks SVG/layout font usage and background image handling; adds a custom theme and merges it into server themes; renames a fetch helper parameter and improves logging; adjusts Swagger title; and performs minor formatting edits. Changes
Sequence Diagram(s)Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
frontend/src/components/Pages/Home/index.js (1)
4-4: Theme options drift: derive from the actual theme map to avoid mismatches.The selectable themes come from a static list, but rendering uses util/themes. Keys like “moonlit-asteroid” and “matrix” aren’t selectable. Drive options from the source of truth.
Apply:
-import { themes, animations, layouts, fonts, colorValues, quoteTypes } from '../../../config/cardTemplate'; +import { animations, layouts, fonts, colorValues, quoteTypes } from '../../../config/cardTemplate'; +import uiThemes from '../../../util/themes'; ... - const [theme, setTheme] = useState(themes[0]); + const [theme, setTheme] = useState(Object.keys(uiThemes)[0] || 'default'); ... - options={themes} + options={Object.keys(uiThemes)}Also applies to: 19-21, 51-63
frontend/src/components/organisms/TemplateCard/index.js (1)
48-50: Revoke blob URLs to avoid memory leaks.Revoke on change/unmount.
const file = new Blob([getTemplate(template)], { type: "image/svg+xml" }); const url = URL.createObjectURL(file); @@ useEffect(() => { setImageLoaded(false); }, [quoteUrl]); + + useEffect(() => { + return () => { + try { URL.revokeObjectURL(url); } catch {} + }; + }, [url]);Also applies to: 90-93
🧹 Nitpick comments (8)
frontend/src/components/Dashboard/discord.js (1)
14-26: Improve accessibility and keyboard support for Discord triggersAdd an accessible name to the button and make the icon keyboard-operable.
<button - className="discord" + className="discord" + aria-label="Join our Discord" style={{ backgroundColor: 'white', color: 'white', padding: '10px 20px', borderRadius: '5px', border: 'none', cursor: 'pointer', }} onClick={handleDiscordButtonClick} > @@ - <FaDiscord - onClick={handleDiscordButtonClick} - className='discord-sm' - /> + <FaDiscord + onClick={handleDiscordButtonClick} + onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleDiscordButtonClick()} + role="button" + tabIndex={0} + aria-label="Join our Discord" + className='discord-sm' + />Also applies to: 39-42
README.md (1)
351-360: Tighten troubleshooting copy and formatting; show a concrete query example.Improve readability, fix punctuation, and provide a working example.
-### Troubleshooting: Auto-correct didn’t work - -->Sometimes the API can’t auto-correct your author or theme (for example, if there’s a typo or uncommon name). -->In that case, you can provide your own custom quote and author manually. - -*Example:* -- quote -> Stay Motivated(URL-encoded, spaces as %20) -- author -> mohdayaan123 -- theme -> any theme name you want -- autocorrect=0 → disables auto-correct so it uses your exact input +### Troubleshooting: Auto-correct didn’t work + +Sometimes the API can’t auto-correct your author or theme (e.g., typos or uncommon names). +In that case, pass your own quote and author, and disable auto-correct. + +Example: +- quote: `Stay%20Motivated` (URL-encoded) +- author: `mohdayaan123` +- theme: any supported theme +- `autocorrect=0` (uses your exact input) + +``` + +```src/utils/fetchApi.js (1)
2-2: Nit: fix comment wording.“Improve Code Read Ability” → “Improve code readability.”
-//Improve Code Read Ability +// Improve code readabilityfrontend/src/components/ContributorsCard/ContributorCard.js (1)
76-78: Avoid using extra
for spacing; prefer semantic spacing via styles.Use margin on Typography instead of multiple line breaks.
- <br /> - <br /> - Bringing this project to life + Bringing this project to lifeAnd add spacing via style or class:
- <Typography className={classes.pos} color="textSecondary"> + <Typography className={classes.pos} color="textSecondary" style={{ marginTop: 12 }}>frontend/src/components/Pages/Home/index.js (1)
165-187: Confirm backend support for bgSource/unsplashQuery and add validation
bgSource and unsplashQuery are already read in quotesController (req.query.bgSource, req.query.unsplashQuery) and passed to quotesService, which uses encodeURIComponent when calling Unsplash. Add explicit validation (e.g. whitelist characters, enforce max length) on unsplashQuery to prevent abuse.src/animations/animation.js (2)
31-31: Typo: transfrom → transform.Fix included in the diff above.
1-23: Avoid shipping large commented blocks.Delete the old commented object once compatibility is restored.
frontend/src/components/organisms/TemplateCard/index.js (1)
16-16: Remove unused import.mainThemes is no longer used.
-import mainThemes from "../../../util/themes";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (16)
README.md(2 hunks)frontend/src/components/ContributorsCard/ContributorCard.js(3 hunks)frontend/src/components/Dashboard/discord.js(1 hunks)frontend/src/components/Dashboard/index.js(0 hunks)frontend/src/components/Pages/Home/index.js(1 hunks)frontend/src/components/organisms/TemplateCard/index.js(3 hunks)frontend/src/util/themes/index.js(1 hunks)src/animations/animation.js(2 hunks)src/app.js(1 hunks)src/common/getTemplate.js(1 hunks)src/layouts/layout.js(1 hunks)src/models/Template.js(1 hunks)src/themes/README.md(1 hunks)src/themes/customTheme.js(1 hunks)src/themes/themes.js(1 hunks)src/utils/fetchApi.js(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/components/Dashboard/index.js
🧰 Additional context used
🧬 Code graph analysis (5)
src/themes/customTheme.js (2)
frontend/src/util/themes/index.js (1)
themes(1-267)src/themes/themes.js (1)
themes(2-269)
frontend/src/components/organisms/TemplateCard/index.js (3)
frontend/src/util/themes/index.js (1)
themes(1-267)src/themes/themes.js (1)
themes(2-269)frontend/src/config/cardTemplate/index.js (2)
themes(1-47)themes(1-47)
src/themes/themes.js (2)
src/themes/customTheme.js (1)
themes(1-8)frontend/src/config/cardTemplate/index.js (2)
themes(1-47)themes(1-47)
src/animations/animation.js (1)
src/api/controllers/quotesController.js (1)
animations(2-2)
frontend/src/util/themes/index.js (3)
src/themes/customTheme.js (1)
themes(1-8)src/themes/themes.js (1)
themes(2-269)frontend/src/config/cardTemplate/index.js (2)
themes(1-47)themes(1-47)
🪛 LanguageTool
src/themes/README.md
[style] ~17-~17: Using many exclamation marks might seem excessive (in this case: 44 exclamation marks for a text that’s 2075 characters long)
Context: ...| | | | :--: | :--: | :--: | | efault ![default][default] | dark ![dark][dark] | radical ![radical][radical] | | merko ![merko][merko] | gruvbox ![gruvbox][gruvbox] | tokyonight ![tokyonight][tokyonight] | | onedark ![onedark][onedark] | cobalt ![cobalt][cobalt] | synthwave ![synthwave][synthwave] | | highcontrast ![highcontrast][highcontrast] | dracula ![dracula][dracula] | prussian ![prussian][prussian] | | monokai ![monokai][monokai] | vue ![vue][vue] | vue-dark ![vue-dark][vue-dark] | | shades-of-purple ![shades-of-purple][shades-of-purple] | nightowl ![nightowl][nightowl] | buefy ![buefy][buefy] | | blue-green ![blue-green][blue-green] | algolia ![algolia][algolia] | great-gatsby ![great-gatsby][great-gatsby] | | darcula ![darcula][darcula] | bear ![bear][bear] | solarized-dark ![solarized-dark][solarized-dark] | | solarized-light ![solarized-light][solarized-light] | chartreuse-dark ![chartreuse-dark][chartreuse-dark] | nord ![nord][nord] | | gotham ![gotham][gotham] | material-palenight ![material-palenight][material-palenight] | graywhite ![graywhite][graywhite] | | vision-friendly-dark ![vision-friendly-dark][vision-friendly-dark] | ayu-mirage ![ayu-mirage][ayu-mirage] | midnight-purple ![midnight-purple][midnight-purple] | | calm ![calm][calm] | flag-india ![flag-india][flag-india] | omni ![omni][omni] | | react ![react][react] | jolly ![jolly][jolly] | maroongold ![maroongold][maroongold] | | yeblu ![yeblu][yeblu] | blueberry ![blueberry][blueberry] | slateorange ![slateorange][slateorange] | | kacho_ga ![kacho_ga][kacho_ga] | soft-green ![soft-green][soft-green] | | [default]...
(EN_EXCESSIVE_EXCLAMATION)
README.md
[grammar] ~5-~5: There might be a mistake here.
Context: ...le* font file URL. Parameter: fontUrl Supported formats: .woff2, .woff, .ttf ...
(QB_NEW_EN)
[grammar] ~356-~356: There might be a mistake here.
Context: ...om quote and author manually. Example: - quote -> Stay Motivated(URL-encoded, sp...
(QB_NEW_EN)
[grammar] ~357-~357: There might be a mistake here.
Context: ...ay Motivated(URL-encoded, spaces as %20) - author -> mohdayaan123 - theme -> any ...
(QB_NEW_EN)
[grammar] ~358-~358: There might be a mistake here.
Context: ...paces as %20) - author -> mohdayaan123 - theme -> any theme name you want - aut...
(QB_NEW_EN)
[grammar] ~359-~359: There might be a mistake here.
Context: ...123 - theme -> any theme name you want - autocorrect=0 → disables auto-correct so...
(QB_NEW_EN)
🪛 markdownlint-cli2 (0.17.2)
README.md
11-11: Multiple headings with the same content
(MD024, no-duplicate-heading)
🔇 Additional comments (9)
src/models/Template.js (1)
4-4: Formatting-only change — OKNo functional impact.
src/common/getTemplate.js (1)
5-10: AI summary inconsistency: height and preserveAspectRatio are still present.The summary claims the background
lost height/preserveAspectRatio, but the code retains them. No change needed here; just flagging the mismatch.
frontend/src/components/ContributorsCard/ContributorCard.js (1)
61-62: LGTM: centering content in the container improves layout consistency.frontend/src/components/Pages/Home/index.js (1)
43-44: WCAG AA contrast for large text is met
Contrast ratio is 4.32:1, exceeding the 3:1 requirement for large text (default Typography h5 = 1.5 rem/24 px), so no change needed.src/animations/animation.js (1)
25-27: Animation key ‘grow_out_in’ is consistent
FE config (animations = ['default', 'grow_out_in']), animation util, BE controller and README all reference the same snake_case key—no mismatches found.frontend/src/components/organisms/TemplateCard/index.js (1)
45-47: Backend/FE parameter alignment verified. bgSource, unsplashQuery and borderColor names and defaults match in controller, service, and TemplateCard—no regressions to existing cards.src/themes/themes.js (1)
272-272: Keep export style consistent.module.exports=themes is fine once the import is switched to require.
frontend/src/util/themes/index.js (2)
1-6: Data looks consistent; export default is correct.Catalog refresh LGTM pending renderer verification above.
257-266: Confirm compatibility of non-color bg_color values
- CSS backgrounds accept gradients/URLs, but bg_color is also used for border-color in frontend/src/util/layouts/index.js (e.g. lines defining
border: solid … ${template.theme.bg_color}) and likely for SVG fill in quotesController.- Verify both the browser renderer (border‐color) and the server-side image generator can handle gradients/URLs; if not, split into a solid-color field (bg_color) plus separate bg_image/bg_gradient.
| <a style={{textDecoration:"none"}} href="https://github.com/zhravan/github-readme-quotes/graphs/contributors"> | ||
| <Button variant="contained" color="primary" size="small">More Details Here</Button> | ||
| <Button variant="contained" color="primary" size="small" style={{marginLeft:"40px"}}>Click Here For More Details Here</Button> | ||
| </a> | ||
| </CardActions> |
There was a problem hiding this comment.
Fix user-facing copy and anchor/button semantics.
Text reads awkwardly (“Click Here For More Details Here”). Also, prefer Button with href instead of wrapping a Button in an anchor.
- <CardActions>
- <a style={{textDecoration:"none"}} href="https://github.com/zhravan/github-readme-quotes/graphs/contributors">
- <Button variant="contained" color="primary" size="small" style={{marginLeft:"40px"}}>Click Here For More Details Here</Button>
- </a>
- </CardActions>
+ <CardActions style={{ justifyContent: 'center' }}>
+ <Button
+ variant="contained"
+ color="primary"
+ size="small"
+ href="https://github.com/zhravan/github-readme-quotes/graphs/contributors"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ See all contributors
+ </Button>
+ </CardActions>📝 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.
| <a style={{textDecoration:"none"}} href="https://github.com/zhravan/github-readme-quotes/graphs/contributors"> | |
| <Button variant="contained" color="primary" size="small">More Details Here</Button> | |
| <Button variant="contained" color="primary" size="small" style={{marginLeft:"40px"}}>Click Here For More Details Here</Button> | |
| </a> | |
| </CardActions> | |
| <CardActions style={{ justifyContent: 'center' }}> | |
| <Button | |
| variant="contained" | |
| color="primary" | |
| size="small" | |
| href="https://github.com/zhravan/github-readme-quotes/graphs/contributors" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| See all contributors | |
| </Button> | |
| </CardActions> |
🤖 Prompt for AI Agents
In frontend/src/components/ContributorsCard/ContributorCard.js around lines 92
to 95, the CTA text is awkward and a Button is incorrectly wrapped by an anchor;
change the copy to a concise, user-facing phrase like "View contributors" (or
"View all contributors") and remove the surrounding <a> tag, using the Button's
href prop instead (e.g. <Button href="...">) and keep any styling on the Button
itself (move marginLeft there) so the link is semantic and text reads clearly.
| }; | ||
|
|
||
| const theme = { ...mainThemes[props.theme] }; | ||
| const theme = { ...themes[props.theme] }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Guard against undefined theme to prevent runtime error.
Spreading undefined throws. Provide a safe fallback.
- const theme = { ...themes[props.theme] };
+ const baseTheme = themes[props.theme] || themes.default || {};
+ const theme = { ...baseTheme };📝 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.
| const theme = { ...themes[props.theme] }; | |
| const baseTheme = themes[props.theme] || themes.default || {}; | |
| const theme = { ...baseTheme }; |
🤖 Prompt for AI Agents
In frontend/src/components/organisms/TemplateCard/index.js around line 31,
spreading themes[props.theme] can throw if that value is undefined; change to
guard against undefined by resolving a safe fallback (e.g., const base = (themes
&& themes[props.theme]) || {}; then const theme = { ...base }; or use a defined
DEFAULT_THEME object) so the spread always receives an object and runtime errors
are prevented.
| <React.Fragment > | ||
|
|
||
| <marquee style={{ padding: '10px', borderRadius: '10px', width: '80%', margin: 'auto', textAlign: 'center' }}> | ||
| <Typography variant='h6' align='center' component='h4' style={{ margin: '20px', padding: '25px', color: '#6e45e2', fontFamily: 'Arial, sans-serif' }}> | ||
| <marquee style={{ padding: '10px', borderRadius: '40px', width: '80%' , textAlign: 'center' , backgroundColor:'#6C63FF' , margin:'0 100px' , boxShadow:'3px 4px 8px rgba(0,0,0,0.9)'}}> | ||
| <Typography variant='h6' align='center' component='h4' style={{ margin: '20px', padding: '25px', color: '#fff', fontFamily: 'cursive' , | ||
| }}> | ||
| 🚀 After migrating to Vercel, our application now has separate UI and server deployments for PRODUCTION, while still maintaining server-side rendering locally for DEVELOPMENT. 🚀 | ||
| </Typography> | ||
| </marquee> |
There was a problem hiding this comment.
Replace deprecated with CSS animation (accessibility + deprecation).
is obsolete and problematic for a11y. Use CSS keyframes via makeStyles.
Apply:
- <React.Fragment >
-
- <marquee style={{ padding: '10px', borderRadius: '40px', width: '80%' , textAlign: 'center' , backgroundColor:'#6C63FF' , margin:'0 100px' , boxShadow:'3px 4px 8px rgba(0,0,0,0.9)'}}>
- <Typography variant='h6' align='center' component='h4' style={{ margin: '20px', padding: '25px', color: '#fff', fontFamily: 'cursive' ,
- }}>
+ <React.Fragment>
+ <div className={classes.marquee}>
+ <Typography
+ variant='h6'
+ align='center'
+ component='h4'
+ className={classes.marqueeText}
+ >
🚀 After migrating to Vercel, our application now has separate UI and server deployments for PRODUCTION, while still maintaining server-side rendering locally for DEVELOPMENT. 🚀
</Typography>
- </marquee>
+ </div>And extend styles:
const useStyles = makeStyles({
customTooltip: {
fontSize: '16px',
fontWeight: 'bold'
},
+ marquee: {
+ padding: '10px',
+ borderRadius: 40,
+ width: '80%',
+ textAlign: 'center',
+ backgroundColor: '#6C63FF',
+ margin: '0 100px',
+ boxShadow: '3px 4px 8px rgba(0,0,0,0.9)',
+ overflow: 'hidden'
+ },
+ marqueeText: {
+ margin: 20,
+ padding: 25,
+ color: '#fff',
+ fontFamily: 'cursive',
+ whiteSpace: 'nowrap',
+ display: 'inline-block',
+ animation: '$scroll 16s linear infinite'
+ },
+ '@keyframes scroll': {
+ '0%': { transform: 'translateX(100%)' },
+ '100%': { transform: 'translateX(-100%)' }
+ }
});📝 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.
| <React.Fragment > | |
| <marquee style={{ padding: '10px', borderRadius: '10px', width: '80%', margin: 'auto', textAlign: 'center' }}> | |
| <Typography variant='h6' align='center' component='h4' style={{ margin: '20px', padding: '25px', color: '#6e45e2', fontFamily: 'Arial, sans-serif' }}> | |
| <marquee style={{ padding: '10px', borderRadius: '40px', width: '80%' , textAlign: 'center' , backgroundColor:'#6C63FF' , margin:'0 100px' , boxShadow:'3px 4px 8px rgba(0,0,0,0.9)'}}> | |
| <Typography variant='h6' align='center' component='h4' style={{ margin: '20px', padding: '25px', color: '#fff', fontFamily: 'cursive' , | |
| }}> | |
| 🚀 After migrating to Vercel, our application now has separate UI and server deployments for PRODUCTION, while still maintaining server-side rendering locally for DEVELOPMENT. 🚀 | |
| </Typography> | |
| </marquee> | |
| <React.Fragment> | |
| <div className={classes.marquee}> | |
| <Typography | |
| variant='h6' | |
| align='center' | |
| component='h4' | |
| className={classes.marqueeText} | |
| > | |
| 🚀 After migrating to Vercel, our application now has separate UI and server deployments for PRODUCTION, while still maintaining server-side rendering locally for DEVELOPMENT. 🚀 | |
| </Typography> | |
| </div> |
🤖 Prompt for AI Agents
In frontend/src/components/Pages/Home/index.js around lines 34 to 41, replace
the deprecated <marquee> with a styled container using CSS keyframes (via
makeStyles or styled-components): create a horizontal scrolling animation class,
apply it to a div wrapping the Typography, respect prefers-reduced-motion by
disabling animation when set, pause animation on hover/focus for accessibility,
ensure the container has appropriate aria attributes (e.g., role="note" or
aria-live if needed) and use semantic markup instead of the obsolete tag.
| ### Using a Custom Font (via URL) | ||
|
|
||
| You can render quotes with your own font by passing a *publicly accessible* font file URL. | ||
|
|
||
| *Parameter:* fontUrl | ||
| *Supported formats:* .woff2, .woff, .ttf | ||
|
|
||
| *Example — Google Fonts (Roboto):* | ||
|  |
There was a problem hiding this comment.
Section title and example do not match feature; fix param name and grammar.
Title says “via URL” but example uses ?font=Roboto (by name). Either change the title to “Using a Custom Font (by name)” or change the example to use fontUrl. Also tidy grammar/spaces.
-### Using a Custom Font (via URL)
-
-You can render quotes with your own font by passing a *publicly accessible* font file URL.
-
-*Parameter:* fontUrl
-*Supported formats:* .woff2, .woff, .ttf
-
-*Example — Google Fonts (Roboto):*
-
+### Using a Custom Font (via URL)
+
+You can render quotes with your own font by passing a publicly accessible font file URL.
+
+Parameter: `fontUrl`
+Supported formats: `.woff2`, `.woff`, `.ttf`
+
+Example:
+```
+
+```If the intent was “by name,” rename the heading and keep ?font=Roboto.
📝 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.
| ### Using a Custom Font (via URL) | |
| You can render quotes with your own font by passing a *publicly accessible* font file URL. | |
| *Parameter:* fontUrl | |
| *Supported formats:* .woff2, .woff, .ttf | |
| *Example — Google Fonts (Roboto):* | |
|  | |
| ### Using a Custom Font (via URL) | |
| You can render quotes with your own font by passing a publicly accessible font file URL. | |
| Parameter: `fontUrl` | |
| Supported formats: `.woff2`, `.woff`, `.ttf` | |
| Example: |
🧰 Tools
🪛 LanguageTool
[grammar] ~5-~5: There might be a mistake here.
Context: ...le* font file URL. Parameter: fontUrl Supported formats: .woff2, .woff, .ttf ...
(QB_NEW_EN)
| ### Using a Custom Font (via URL) | ||
|
|
||
| Tou can render quotes with your own font by passing a publicly accessible font file URL. | ||
|
|
||
| *Example with Poppins font:* | ||
|
|
||
| <img src="https://github-readme-quotes.vercel.app/quote?theme=light&font=Poppins" alt="Custom Font Quote"/> | ||
|
|
There was a problem hiding this comment.
Duplicate section and typo (“Tou”); remove duplicate or consolidate.
There are two identical “Using a Custom Font (via URL)” headings; the second starts with “Tou”. Keep one canonical section.
-### Using a Custom Font (via URL)
-
-Tou can render quotes with your own font by passing a publicly accessible font file URL.
-
-*Example with Poppins font:*
-
-<img src="https://github-readme-quotes.vercel.app/quote?theme=light&font=Poppins" alt="Custom Font Quote"/>
+<!-- Duplicate removed; see section above -->📝 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.
| ### Using a Custom Font (via URL) | |
| Tou can render quotes with your own font by passing a publicly accessible font file URL. | |
| *Example with Poppins font:* | |
| <img src="https://github-readme-quotes.vercel.app/quote?theme=light&font=Poppins" alt="Custom Font Quote"/> | |
| <!-- Duplicate removed; see section above --> |
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
11-11: Multiple headings with the same content
(MD024, no-duplicate-heading)
🤖 Prompt for AI Agents
In README.md around lines 11 to 18, there is a duplicated "Using a Custom Font
(via URL)" section and a typo ("Tou"); remove the duplicate section and
consolidate content into a single canonical "Using a Custom Font (via URL)"
heading, correct the typo to "You", and ensure the example (img tag and
descriptive text) appears only once with correct wording.
| | | | | | ||
| | :--: | :--: | :--: | | ||
| | `default` ![default][default] | `dark` ![dark][dark] | `radical` ![radical][radical] | | ||
| | `efault` ![default][default] | `dark` ![dark][dark] | `radical` ![radical][radical] | |
There was a problem hiding this comment.
Typo in themes table: “default” misspelled
User-facing docs; please correct.
-| `efault` ![default][default] | `dark` ![dark][dark] | `radical` ![radical][radical] |
+| `default` ![default][default] | `dark` ![dark][dark] | `radical` ![radical][radical] |📝 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.
| | `efault` ![default][default] | `dark` ![dark][dark] | `radical` ![radical][radical] | | |
| | `default` ![default][default] | `dark` ![dark][dark] | `radical` ![radical][radical] | |
🧰 Tools
🪛 LanguageTool
[style] ~17-~17: Using many exclamation marks might seem excessive (in this case: 44 exclamation marks for a text that’s 2075 characters long)
Context: ...| | | | :--: | :--: | :--: | | efault ![default][default] | dark ![dark][dark] | radical ![radical][radical] | | merko ![merko][merko] | gruvbox ![gruvbox][gruvbox] | tokyonight ![tokyonight][tokyonight] | | onedark ![onedark][onedark] | cobalt ![cobalt][cobalt] | synthwave ![synthwave][synthwave] | | highcontrast ![highcontrast][highcontrast] | dracula ![dracula][dracula] | prussian ![prussian][prussian] | | monokai ![monokai][monokai] | vue ![vue][vue] | vue-dark ![vue-dark][vue-dark] | | shades-of-purple ![shades-of-purple][shades-of-purple] | nightowl ![nightowl][nightowl] | buefy ![buefy][buefy] | | blue-green ![blue-green][blue-green] | algolia ![algolia][algolia] | great-gatsby ![great-gatsby][great-gatsby] | | darcula ![darcula][darcula] | bear ![bear][bear] | solarized-dark ![solarized-dark][solarized-dark] | | solarized-light ![solarized-light][solarized-light] | chartreuse-dark ![chartreuse-dark][chartreuse-dark] | nord ![nord][nord] | | gotham ![gotham][gotham] | material-palenight ![material-palenight][material-palenight] | graywhite ![graywhite][graywhite] | | vision-friendly-dark ![vision-friendly-dark][vision-friendly-dark] | ayu-mirage ![ayu-mirage][ayu-mirage] | midnight-purple ![midnight-purple][midnight-purple] | | calm ![calm][calm] | flag-india ![flag-india][flag-india] | omni ![omni][omni] | | react ![react][react] | jolly ![jolly][jolly] | maroongold ![maroongold][maroongold] | | yeblu ![yeblu][yeblu] | blueberry ![blueberry][blueberry] | slateorange ![slateorange][slateorange] | | kacho_ga ![kacho_ga][kacho_ga] | soft-green ![soft-green][soft-green] | | [default]...
(EN_EXCESSIVE_EXCLAMATION)
🤖 Prompt for AI Agents
In src/themes/README.md around line 17, the themes table has a typo: "`efault`"
should be "`default`"; update the table cell to spell "default" correctly
(preserve the existing inline code/backticks and image reference tag
`[default]`) so the displayed theme name and its reference are accurate.
| @@ -1,4 +1,6 @@ | |||
| import customTheme from './customTheme.js' | |||
There was a problem hiding this comment.
Do not mix ESM import with CommonJS export.
Use require for consistency (or convert file to ESM fully).
-import customTheme from './customTheme.js'
+const customTheme = require('./customTheme.js');📝 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.
| import customTheme from './customTheme.js' | |
| const customTheme = require('./customTheme.js'); |
🤖 Prompt for AI Agents
In src/themes/themes.js around line 1, the file currently mixes an ESM import
with a CommonJS export; either convert the file to full ESM or use CommonJS
consistently. Fix by replacing the ESM import with a CommonJS require (e.g.,
const customTheme = require('./customTheme.js')) and keep the existing
module.exports export, or alternatively convert the file to ESM by changing
module.exports to export default and ensure the project uses ESM (package.json
"type":"module"); choose one consistent module system and apply the matching
syntax throughout the file.
| import customTheme from './customTheme.js' | ||
| const themes = { | ||
| ...customTheme, | ||
| "algolia": { |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Cross-source-of-truth: ensure FE theme list includes custom keys.
If “ayaan-theme” should be selectable in UI, add it to frontend/src/config/cardTemplate/index.js or drive UI options from util/themes (see Home comment).
🏁 Script executed:
#!/bin/bash
# Compare FE selectable theme names vs BE theme keys
rg -n -S "export const themes" frontend/src/config/cardTemplate/index.js -n -C1
rg -n -S '"ayaan-theme"' frontend srcLength of output: 231
Include “ayaan-theme” in FE theme list
frontend/src/config/cardTemplate/index.js: add 'ayaan-theme' to the export const themes array (or drive UI options from util/themes to avoid duplication).
🤖 Prompt for AI Agents
In src/themes/themes.js around lines 1 to 4, the project is missing the
"ayaan-theme" entry in the exported themes object; add an "ayaan-theme" key (or
import/merge it from wherever the theme is defined) into the themes export so
it’s available to the frontend, and then update
frontend/src/config/cardTemplate/index.js to either add 'ayaan-theme' to its
export const themes array or, better, refactor that file to derive its UI theme
list from util/themes (or this src/themes/themes.js) to avoid duplicating the
theme list.
| const themes = { | ||
| ...customTheme, | ||
| "algolia": { |
There was a problem hiding this comment.
Validate customTheme export and color formats.
customTheme.js (shown) doesn’t export via module.exports and lacks “#” on colors. This will break require() and produce invalid CSS.
Fix customTheme.js:
// src/themes/customTheme.js
module.exports = {
"ayaan-theme": {
quote_color: "#FFAA33",
author_color: "#123456",
bg_color: "#000000"
}
};🤖 Prompt for AI Agents
In src/themes/themes.js around lines 2 to 4, the review notes that
src/themes/customTheme.js does not export via module.exports and uses color
values missing the leading "#" causing require() to fail and invalid CSS; update
customTheme.js to export the theme object using module.exports and ensure all
color values are valid hex strings prefixed with "#" (e.g., "#RRGGBB") and
include the expected theme key ("ayaan-theme") with properties quote_color,
author_color, and bg_color to match how themes.js spreads customTheme.
| const fetchCall = async(url , option)=>{ | ||
| try{ | ||
| let response = await fetch(url , option); | ||
| return await response.json(); | ||
| }catch(error){ | ||
| console.error("Fetching Error", error); | ||
| throw error; | ||
| } | ||
| } | ||
|
|
||
| module.exports = fetchCall; | ||
| module.exports = fetchCall//module.exports the function so that other files can import and use it |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Harden fetch helper: keep conventional param name, handle non-2xx, and JSON parse errors.
Renaming options to option is unnecessary noise. Add res.ok handling and safer JSON parsing.
-const fetchCall = async(url , option)=>{
- try{
- let response = await fetch(url , option);
- return await response.json();
- }catch(error){
- console.error("Fetching Error", error);
- throw error;
- }
-}
-module.exports = fetchCall//module.exports the function so that other files can import and use it
+const fetchCall = async (url, options = {}) => {
+ try {
+ const response = await fetch(url, options);
+ if (!response.ok) {
+ const text = await response.text().catch(() => '');
+ throw new Error(`HTTP ${response.status} ${response.statusText} ${text ? `- ${text}` : ''}`.trim());
+ }
+ // Tolerate empty body or non-JSON responses
+ const contentType = response.headers.get('content-type') || '';
+ if (contentType.includes('application/json')) {
+ return await response.json();
+ }
+ const text = await response.text();
+ return text;
+ } catch (error) {
+ console.error('Fetching Error', error);
+ throw error;
+ }
+};
+module.exports = fetchCall; // export for reuse📝 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.
| const fetchCall = async(url , option)=>{ | |
| try{ | |
| let response = await fetch(url , option); | |
| return await response.json(); | |
| }catch(error){ | |
| console.error("Fetching Error", error); | |
| throw error; | |
| } | |
| } | |
| module.exports = fetchCall; | |
| \ No newline at end of file | |
| module.exports = fetchCall//module.exports the function so that other files can import and use it | |
| const fetchCall = async (url, options = {}) => { | |
| try { | |
| const response = await fetch(url, options); | |
| if (!response.ok) { | |
| const text = await response.text().catch(() => ''); | |
| throw new Error( | |
| `HTTP ${response.status} ${response.statusText}` + | |
| (text ? ` - ${text}` : '') | |
| ); | |
| } | |
| // Tolerate empty body or non-JSON responses | |
| const contentType = response.headers.get('content-type') || ''; | |
| if (contentType.includes('application/json')) { | |
| return await response.json(); | |
| } | |
| return await response.text(); | |
| } catch (error) { | |
| console.error('Fetching Error', error); | |
| throw error; | |
| } | |
| }; | |
| module.exports = fetchCall; // export for reuse |
🤖 Prompt for AI Agents
In src/utils/fetchApi.js around lines 5 to 14, the helper uses the nonstandard
param name `option`, doesn't handle non-2xx responses, and can crash on invalid
JSON; rename the parameter to `options`, check response.ok after fetch and throw
a descriptive error containing status and statusText for non-2xx responses,
attempt to parse JSON inside its own try/catch so JSON parse errors are caught
(fall back to response.text() or include raw body in the error), log the error
with context before rethrowing, and keep exporting the function via
module.exports.
1 participant
Summary by CodeRabbit
New Features
Documentation
Style