fix: newsroom section is not ui friendly #3639
Conversation
jayraj175coder
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThis pull request updates dependency management and enhances UI styling. Two separate Changes
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
components/newsroom/Newsroom.tsx (1)
71-80: Improve code style and maintainability.The UI changes look good but need some refinements:
- Use predefined height class
- Fix quote style
- Order Tailwind classes consistently
Apply these changes:
- <div className="flex flex-col sm:flex-row w-full lg:w-3/4 h-auto md:h-[30rem] bg-white shadow-lg rounded-xl overflow-hidden"> + <div className='flex h-auto w-full flex-col overflow-hidden rounded-xl bg-white shadow-lg md:h-120 sm:flex-row lg:w-3/4'> {/* Left Content */} - <div className="relative flex w-full flex-col p-4 sm:p-6 overflow-y-auto scrollbar-hide"> - <div className="min-h-0"> - <div className="relative sm:absolute inset-0 flex items-center justify-center"> + <div className='relative flex w-full flex-col overflow-y-auto p-4 scrollbar-hide sm:p-6'> + <div className='min-h-0'> + <div className='relative inset-0 flex items-center justify-center sm:absolute'>🧰 Tools
🪛 ESLint
[error] 71-71: Replace
"flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden"with'flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden'(prettier/prettier)
[error] 71-71: Unexpected usage of doublequote.
(jsx-quotes)
[error] 73-73: Replace
"relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide"with'relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide'(prettier/prettier)
[error] 73-73: Unexpected usage of doublequote.
(jsx-quotes)
[error] 74-74: Replace
"min-h-0"with'min-h-0'(prettier/prettier)
[error] 74-74: Unexpected usage of doublequote.
(jsx-quotes)
[error] 75-75: Replace
"relative·sm:absolute·inset-0·flex·items-center·justify-center"with'relative·sm:absolute·inset-0·flex·items-center·justify-center'(prettier/prettier)
[error] 75-75: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[warning] 71-71: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 71-71: The arbitrary class 'md:h-[30rem]' could be replaced by 'md:h-120' tailwindcss/no-unnecessary-arbitrary-value
[error] 71-71: Replace "flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden" with 'flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden' prettier/prettier
[error] 71-71: Unexpected usage of doublequote. jsx-quotes
[warning] 73-73: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 73-73: Replace "relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide" with 'relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide' prettier/prettier
[error] 73-73: Unexpected usage of doublequote. jsx-quotes
[error] 74-74: Replace "min-h-0" with 'min-h-0' prettier/prettier
[error] 74-74: Unexpected usage of doublequote. jsx-quotes
[warning] 75-75: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 75-75: Replace "relative·sm:absolute·inset-0·flex·items-center·justify-center" with 'relative·sm:absolute·inset-0·flex·items-center·justify-center' prettier/prettier
[error] 75-75: Unexpected usage of doublequote. jsx-quotes
[error] 80-80: Delete
⏎⏎prettier/prettier
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
.github/workflows/scripts/mailchimp/package-lock.jsonis excluded by!**/package-lock.jsonpackage-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
.github/workflows/scripts/mailchimp/package.json(1 hunks)components/newsroom/Newsroom.tsx(1 hunks)package.json(1 hunks)
🧰 Additional context used
🪛 ESLint
components/newsroom/Newsroom.tsx
[error] 71-71: Replace "flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden" with 'flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden'
(prettier/prettier)
[error] 71-71: Unexpected usage of doublequote.
(jsx-quotes)
[error] 73-73: Replace "relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide" with 'relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide'
(prettier/prettier)
[error] 73-73: Unexpected usage of doublequote.
(jsx-quotes)
[error] 74-74: Replace "min-h-0" with 'min-h-0'
(prettier/prettier)
[error] 74-74: Unexpected usage of doublequote.
(jsx-quotes)
[error] 75-75: Replace "relative·sm:absolute·inset-0·flex·items-center·justify-center" with 'relative·sm:absolute·inset-0·flex·items-center·justify-center'
(prettier/prettier)
[error] 75-75: Unexpected usage of doublequote.
(jsx-quotes)
[error] 80-82: Delete ⏎⏎
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
components/newsroom/Newsroom.tsx
[warning] 71-71: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 71-71: The arbitrary class 'md:h-[30rem]' could be replaced by 'md:h-120' tailwindcss/no-unnecessary-arbitrary-value
[error] 71-71: Replace "flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden" with 'flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden' prettier/prettier
[error] 71-71: Unexpected usage of doublequote. jsx-quotes
[warning] 73-73: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 73-73: Replace "relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide" with 'relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide' prettier/prettier
[error] 73-73: Unexpected usage of doublequote. jsx-quotes
[error] 74-74: Replace "min-h-0" with 'min-h-0' prettier/prettier
[error] 74-74: Unexpected usage of doublequote. jsx-quotes
[warning] 75-75: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 75-75: Replace "relative·sm:absolute·inset-0·flex·items-center·justify-center" with 'relative·sm:absolute·inset-0·flex·items-center·justify-center' prettier/prettier
[error] 75-75: Unexpected usage of doublequote. jsx-quotes
[error] 80-80: Delete ⏎⏎ prettier/prettier
[error] 82-82: More than 1 blank line not allowed. no-multiple-empty-lines
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (1)
components/newsroom/Newsroom.tsx (1)
14-108: Well-structured component with good practices!The component demonstrates:
- Clear section separation
- Consistent typography usage
- Good test coverage
- Proper accessibility attributes
🧰 Tools
🪛 ESLint
[error] 71-71: Replace
"flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden"with'flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden'(prettier/prettier)
[error] 71-71: Unexpected usage of doublequote.
(jsx-quotes)
[error] 73-73: Replace
"relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide"with'relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide'(prettier/prettier)
[error] 73-73: Unexpected usage of doublequote.
(jsx-quotes)
[error] 74-74: Replace
"min-h-0"with'min-h-0'(prettier/prettier)
[error] 74-74: Unexpected usage of doublequote.
(jsx-quotes)
[error] 75-75: Replace
"relative·sm:absolute·inset-0·flex·items-center·justify-center"with'relative·sm:absolute·inset-0·flex·items-center·justify-center'(prettier/prettier)
[error] 75-75: Unexpected usage of doublequote.
(jsx-quotes)
[error] 80-82: Delete
⏎⏎(prettier/prettier)
[error] 82-83: More than 1 blank line not allowed.
(no-multiple-empty-lines)
🪛 GitHub Actions: PR testing - if Node project
[warning] 71-71: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 71-71: The arbitrary class 'md:h-[30rem]' could be replaced by 'md:h-120' tailwindcss/no-unnecessary-arbitrary-value
[error] 71-71: Replace "flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden" with 'flex·flex-col·sm:flex-row·w-full·lg:w-3/4·h-auto·md:h-[30rem]·bg-white··shadow-lg·rounded-xl·overflow-hidden' prettier/prettier
[error] 71-71: Unexpected usage of doublequote. jsx-quotes
[warning] 73-73: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 73-73: Replace "relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide" with 'relative·flex·w-full·flex-col·p-4·sm:p-6·overflow-y-auto·scrollbar-hide' prettier/prettier
[error] 73-73: Unexpected usage of doublequote. jsx-quotes
[error] 74-74: Replace "min-h-0" with 'min-h-0' prettier/prettier
[error] 74-74: Unexpected usage of doublequote. jsx-quotes
[warning] 75-75: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 75-75: Replace "relative·sm:absolute·inset-0·flex·items-center·justify-center" with 'relative·sm:absolute·inset-0·flex·items-center·justify-center' prettier/prettier
[error] 75-75: Unexpected usage of doublequote. jsx-quotes
[error] 80-80: Delete
⏎⏎prettier/prettier
[error] 82-82: More than 1 blank line not allowed. no-multiple-empty-lines
| @@ -4,6 +4,7 @@ | |||
| "license": "Apache 2.0", | |||
| "dependencies": { | |||
| "@actions/core": "1.6.0", | |||
| "@mailchimp/mailchimp_marketing": "3.0.74" | |||
| "@mailchimp/mailchimp_marketing": "3.0.74", | |||
| "schedule-email": "file:" | |||
There was a problem hiding this comment.
💡 Codebase verification
Local file dependency configuration issue detected.
The "schedule-email": "file:" entry in the .github/workflows/scripts/mailchimp/package.json file is incomplete because it lacks the local path to the dependency. Additionally, no directory named schedule-email exists in the repository. Please specify the correct local path to the package and ensure the package exists at the expected location.
- Update the dependency entry to include a valid relative path (e.g.,
"schedule-email": "file:../schedule-email"if applicable). - Verify that the intended local package directory is present in the repository.
🔗 Analysis chain
Verify the local file dependency configuration.
The "schedule-email": "file:" dependency is missing a path to the local package.
Please ensure:
- The correct path to the local package is specified
- The package exists at the expected location
I'm not seeing the expected details for the local dependency configuration. To gather more information, please run the following scripts to inspect the contents of the Mailchimp workflow package file and check for any local package directories:
Once you’ve verified these outputs, please confirm that:
- The
"schedule-email"dependency in.github/workflows/scripts/mailchimp/package.jsonincludes a valid path (instead of just"file:"). - The referenced local package exists at the expected location.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if schedule-email package exists
fd -t f "package.json" | xargs grep -l "schedule-email"
Length of output: 53
Script:
#!/bin/bash
echo "=== Contents of .github/workflows/scripts/mailchimp/package.json ==="
grep -R '"schedule-email":' .github/workflows/scripts/mailchimp/package.json || echo "No 'schedule-email' dependency found in package.json."
echo ""
echo "=== Searching for directories named 'schedule-email' ==="
fd -t d "schedule-email" || echo "No directory named 'schedule-email' found in the repository."
Length of output: 420
| @@ -46,6 +46,7 @@ | |||
| }, | |||
| "homepage": "https://github.com/asyncapi/website#readme", | |||
| "dependencies": { | |||
| "@asyncapi/website": "file:", | |||
There was a problem hiding this comment.
Remove circular dependency.
The package is referencing itself as a dependency: "@asyncapi/website": "file:". This creates a circular dependency which could cause issues during installation and builds.
Remove this line as it's not needed:
- "@asyncapi/website": "file:",📝 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.
| "@asyncapi/website": "file:", |
|
@jayraj175coder There are some issues with this PR. Please fix the lint errors. You also need to change the title of this PR and provide a description for it. Additionally, there is no issue linked to it. Do we really need this change? If yes, then please address all these points |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3639 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 20 20
Lines 732 732
=========================================
Hits 732 732 ☔ View full report in Codecov by Sentry. |
|
@jayraj175coder add a prefix "fix: " in the title and to fix lint errors run "npm run lint:fix" |
jayraj175coder
changed the title
jayraj175coder
changed the title
jayraj175coder
changed the title
|
How come the branch has been deleted but PR is still open? 😅 |
|
Hey @akshatnema what the issue of LightHouse/cli here.. Is the branch deleted is the reason behind this.? |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
.github/workflows/lighthouse-ci.yml (1)
97-97: Nitpick: Add Newline at End-of-File and Remove Trailing SpacesYAMLlint notes that line 97 contains trailing spaces and lacks a newline at the end of the file. Please ensure the file ends with a clean newline with no trailing spaces.
- message: ${{ steps.lighthouse_score_report.outputs.comment }} - + message: ${{ steps.lighthouse_score_report.outputs.comment }} +🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 97-97: no new line character at the end of file
(new-line-at-end-of-file)
[error] 97-97: trailing spaces
(trailing-spaces)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.github/workflows/.prettierrc(1 hunks).github/workflows/lighthouse-ci.yml(2 hunks)components/newsroom/Newsroom.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .github/workflows/.prettierrc
🚧 Files skipped from review as they are similar to previous changes (1)
- components/newsroom/Newsroom.tsx
🧰 Additional context used
🪛 YAMLlint (1.35.1)
.github/workflows/lighthouse-ci.yml
[error] 48-48: syntax error: expected , but found ''
(syntax)
[error] 57-57: trailing spaces
(trailing-spaces)
[error] 97-97: no new line character at the end of file
(new-line-at-end-of-file)
[error] 97-97: trailing spaces
(trailing-spaces)
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Test NodeJS PR - windows-latest
🔇 Additional comments (1)
.github/workflows/lighthouse-ci.yml (1)
51-57: Approval: Updated Version Tag and Dynamic Artifact NamingThe update from a specific commit hash to the version tag
v10.1.0for the Lighthouse CI Action is a good improvement for maintainability. In addition, the introduction of the dynamicartifactNameoutput variable (using the GitHub run ID) is well implemented.🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 57-57: trailing spaces
(trailing-spaces)
.github/workflows/lighthouse-ci.yml
Outdated
| - if: steps.should_run.outputs.shouldrun == 'true' | ||
| name: Lighthouse Audit | ||
| id: lighthouse_audit | ||
| uses: treosh/lighthouse-ci-action@v10.1.0 | ||
| with: | ||
| urls: | | ||
| https://deploy-preview-$PR_NUMBER--asyncapi-website.netlify.app/ | ||
| configPath: ./.github/workflows/lighthouserc.json | ||
| uploadArtifacts: true | ||
| artifactName: lhci-results-${{ github.run_id }} | ||
| temporaryPublicStorage: true | ||
| env: | ||
| PR_NUMBER: ${{ github.event.pull_request.number}} | ||
| env: | ||
| PR_NUMBER: ${{ github.event.pull_request.number}} | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Critical: Fix YAML Indentation and Trailing Spaces in Lighthouse Audit Step
The Lighthouse Audit step (lines 48–61) exhibits a potential indentation issue that could trigger a YAML syntax error (as flagged by YAMLlint). In addition, the artifactName field on line 57 has trailing spaces. Please adjust the indentation to match the rest of the steps and remove any trailing spaces to ensure proper YAML parsing.
- - if: steps.should_run.outputs.shouldrun == 'true'
+ - if: steps.should_run.outputs.shouldrun == 'true'
- artifactName: lhci-results-${{ github.run_id }}
+ artifactName: lhci-results-${{ github.run_id }}📝 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.
| - if: steps.should_run.outputs.shouldrun == 'true' | |
| name: Lighthouse Audit | |
| id: lighthouse_audit | |
| uses: treosh/[email protected] | |
| with: | |
| urls: | | |
| https://deploy-preview-$PR_NUMBER--asyncapi-website.netlify.app/ | |
| configPath: ./.github/workflows/lighthouserc.json | |
| uploadArtifacts: true | |
| artifactName: lhci-results-${{ github.run_id }} | |
| temporaryPublicStorage: true | |
| env: | |
| PR_NUMBER: ${{ github.event.pull_request.number}} | |
| env: | |
| PR_NUMBER: ${{ github.event.pull_request.number}} | |
| - if: steps.should_run.outputs.shouldrun == 'true' | |
| name: Lighthouse Audit | |
| id: lighthouse_audit | |
| uses: treosh/[email protected] | |
| with: | |
| urls: | | |
| https://deploy-preview-$PR_NUMBER--asyncapi-website.netlify.app/ | |
| configPath: ./.github/workflows/lighthouserc.json | |
| uploadArtifacts: true | |
| artifactName: lhci-results-${{ github.run_id }} | |
| temporaryPublicStorage: true | |
| env: | |
| PR_NUMBER: ${{ github.event.pull_request.number}} |
🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 48-48: syntax error: expected , but found ''
(syntax)
[error] 57-57: trailing spaces
(trailing-spaces)
|
Hey @vishvamsinh28 , I fix lint errors. |
Description
This PR addresses the above issue by redesigning the "Latest News" section to improve its layout and enhance user experience:
Left-Aligned Title and Follow Button: Ensures better readability by positioning the section title and Twitter follow button on the left.
Card-Based News Layout: Introduces a vertical stack of cards for news articles, with clean typography and sufficient padding. Each card includes:
A publication date.
A bold headline.
A short description for clarity.
Improved Responsiveness: Ensures the layout scales well across all screen sizes, including desktop and mobile.
Related issue(s)
Fixes issue #3587
Summary by CodeRabbit
Summary by CodeRabbit
Style
Chores
@asyncapi/websiteandschedule-email, and addedprettier-plugin-tailwindcss. Updated theprettierversion to improve code formatting.