homepage/doc-sidebar-fixation #3374
Conversation
WalkthroughThis pull request introduces comprehensive updates to the documentation website for Talawa Admin, focusing on restructuring the documentation, enhancing the user interface, and improving the overall site navigation. The changes include creating new components like Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewersPoem
✨ Finishing Touches
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
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (11)
docs/src/components/HeroImage/HeroSection.tsx (3)
7-8: Consider using package manager instead of CDN for Lottie player.Loading scripts from CDN introduces security risks and version control challenges. Consider installing
@lottiefiles/lottie-playervia npm/yarn.- script.src = - 'https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js'; + // Add to package.json dependencies instead + // "@lottiefiles/lottie-player": "^2.0.8"
5-14: Consider caching the script load status.The script is loaded on every component mount. Consider implementing a global flag to prevent redundant script loads.
+const isLottieScriptLoaded = { current: false }; + export default function HeroSection() { useEffect(() => { + if (isLottieScriptLoaded.current) return; const script = document.createElement('script'); script.src = 'https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js'; script.async = true; document.body.appendChild(script); + isLottieScriptLoaded.current = true; return () => { - document.body.removeChild(script); + // Don't remove the script as other instances might need it }; }, []);
19-27: Consider self-hosting the Lottie animation JSON.The animation is loaded from an external service (lottie.host). Consider downloading and self-hosting the JSON file to prevent potential availability issues.
- src: 'https://lottie.host/c3d8ee59-5c73-46f7-8c4e-a66763f5eba3/80bnwExY98.json', + src: '/animations/hero-animation.json',src/components/CheckIn/TableRow.tsx (1)
75-78: LGTM! Improved PDF buffer handling.The change correctly handles the buffer conversion. Consider adding error handling for buffer conversion:
- const uint8Array = new Uint8Array(pdf.buffer); + const uint8Array = pdf.buffer instanceof ArrayBuffer + ? new Uint8Array(pdf.buffer) + : new Uint8Array(new ArrayBuffer(0));docs/src/components/GuideCards/GuideCards.tsx (1)
33-70: Consider moving guide data to a separate configuration file.The hardcoded guide data should be moved to a separate configuration file for better maintainability.
// src/config/guides.ts interface GuideItem { title: string; description: string; href?: string; } interface Guide { title: string; icon: JSX.Element; items: GuideItem[]; } export const guides: Guide[] = [ // ... current guide data ];src/screens/OrganizationVenues/OrganizationVenues.spec.tsx (1)
36-72: Well-structured mock implementation of MutationObserver.The implementation provides a clean and type-safe mock for MutationObserver with proper TypeScript types. However, the
observemethod only logs debug information without actual implementation.Consider enhancing the mock implementation to trigger the callback when mutations occur:
observe(target: Node, options?: MutationObserverInit): void { - // Store parameters for future use - console.debug('Observing:', { target, options }); + // Simulate a mutation + setTimeout(() => { + this._callback( + [{ + type: 'childList', + target, + addedNodes: [] as unknown as NodeList, + removedNodes: [] as unknown as NodeList, + previousSibling: null, + nextSibling: null, + attributeName: null, + attributeNamespace: null, + oldValue: null + }], + this as unknown as MutationObserver + ); + }, 0); }docs/src/components/HeroImage/HeroSection.css (2)
1-14: Consider using CSS custom properties for better maintainability.The styles are well-structured, but hard-coded values could be moved to CSS variables for better maintainability.
+:root { + --hero-max-height: 60vh; + --hero-padding: 0; +} .heroBanner_qdFl { background-color: transparent; } .header-image { - max-height: 60vh; + max-height: var(--hero-max-height); margin: auto; - padding: 0; + padding: var(--hero-padding); }
26-31: Consider adding intermediate breakpoints for smoother scaling.The media query jumps directly from mobile to desktop. Consider adding intermediate breakpoints for tablet-sized screens.
+@media (min-width: 481px) and (max-width: 768px) { + .hero-image-section { + min-height: 400px; + max-height: 700px; + } +} @media (min-width: 480px) { .hero-image-section { min-height: 600px; max-height: 950px; } }docs/src/components/GuideCards/GuideCards.css (1)
70-73: Consider using GPU-accelerated transforms for better performance.The hover transform can benefit from GPU acceleration.
.card:hover { border: 1px solid var(--ifm-color-emphasis-200); - transform: translateY(-5px); + transform: translateY(-5px) translateZ(0); + will-change: transform; }docs/src/css/custom.css (1)
361-375: Consider optimizing the transition duration.The button styling looks good, but the transition duration of 0.8s might feel sluggish. Consider reducing it to 0.3s for a snappier user experience.
- transition: 0.8s; + transition: 0.3s;.github/workflows/pull-request.yml (1)
Line range hint
471-520: Fix YAML formatting issues.The Python-Compliance job configuration looks good, but there are minor formatting issues:
- Line 471: Remove trailing spaces
- Line 520: Add a newline at the end of file
- +🧰 Tools
🪛 yamllint (1.35.1)
[error] 471-471: trailing spaces
(trailing-spaces)
🪛 GitHub Actions: PR Workflow
[error] Unauthorized to change/delete this sensitive file
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (24)
.github/workflows/pull-request.yml(2 hunks).github/workflows/push.yml(1 hunks)docs/docs/CONFIGURING.md(1 hunks)docs/docs/INSTALLATION.md(1 hunks)docs/docs/auto-docs/utils/StaticMockLink/classes/StaticMockLink.md(3 hunks)docs/docs/auto-docs/utils/StaticMockLink/interfaces/InterfaceMockApolloLink.md(1 hunks)docs/docs/auto-docs/utils/timezoneUtils/dateTimeMiddleware/variables/requestMiddleware.md(1 hunks)docs/docs/auto-docs/utils/timezoneUtils/dateTimeMiddleware/variables/responseMiddleware.md(1 hunks)docs/package.json(2 hunks)docs/sidebars.ts(1 hunks)docs/src/components/GuideCards/GuideCards.css(1 hunks)docs/src/components/GuideCards/GuideCards.tsx(1 hunks)docs/src/components/HeroImage/HeroSection.css(1 hunks)docs/src/components/HeroImage/HeroSection.tsx(1 hunks)docs/src/components/HomepageFeatures/index.tsx(0 hunks)docs/src/components/HomepageFeatures/styles.module.css(0 hunks)docs/src/css/custom.css(7 hunks)docs/src/pages/index.module.css(0 hunks)docs/src/pages/index.tsx(1 hunks)docs/src/pages/markdown-page.md(0 hunks)package.json(1 hunks)src/App.tsx(1 hunks)src/components/CheckIn/TableRow.tsx(1 hunks)src/screens/OrganizationVenues/OrganizationVenues.spec.tsx(4 hunks)
💤 Files with no reviewable changes (4)
- docs/src/pages/markdown-page.md
- docs/src/pages/index.module.css
- docs/src/components/HomepageFeatures/styles.module.css
- docs/src/components/HomepageFeatures/index.tsx
✅ Files skipped from review due to trivial changes (4)
- docs/docs/CONFIGURING.md
- docs/docs/INSTALLATION.md
- .github/workflows/push.yml
- src/App.tsx
🧰 Additional context used
🪛 GitHub Actions: PR Workflow
package.json
[error] Unauthorized to change/delete this sensitive file
docs/sidebars.ts
[error] Unauthorized to change/delete this sensitive file
.github/workflows/pull-request.yml
[error] Unauthorized to change/delete this sensitive file
docs/package.json
[error] Unauthorized to change/delete this sensitive file
🪛 yamllint (1.35.1)
.github/workflows/pull-request.yml
[error] 471-471: trailing spaces
(trailing-spaces)
[error] 520-520: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (14)
docs/sidebars.ts (1)
19-23: Review the sidebar structure changes.The addition of the Manual category with installation and configuration guides follows good documentation practices by separating user-facing manual content from technical documentation.
However, consider:
- Adding descriptions to the category to provide more context
- Ensuring consistent casing (Manual vs Plugins vs Code Documentation)
{ type: 'category', - label: 'Manual', + label: 'User Manual', + description: 'Installation and configuration guides for users', items: ['INSTALLATION', 'CONFIGURING'], },🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] Unauthorized to change/delete this sensitive file
docs/src/pages/index.tsx (1)
14-21: LGTM! Clean restructuring of the homepage layout.The changes improve the homepage structure by:
- Properly organizing the hero section
- Adding clear separation between sections
- Introducing new components for better modularity
Also applies to: 34-35
src/screens/OrganizationVenues/OrganizationVenues.spec.tsx (2)
301-308: LGTM! Proper test setup and cleanup.The setup and cleanup of the MutationObserver mock is handled correctly in the test lifecycle hooks.
544-561: Improved async test assertions with proper waitFor usage.The changes enhance the reliability of the tests by properly waiting for elements to be present in the DOM.
docs/package.json (1)
Line range hint
18-31: Unauthorized modification of sensitive file.The pipeline indicates that you are not authorized to modify this file. Please ensure you have the necessary permissions or consult with the repository maintainers.
🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] Unauthorized to change/delete this sensitive file
docs/src/css/custom.css (4)
28-28: Verify menu text color visibility.The
--ifm-menu-colorvariable has been commented out. Please ensure that menu items remain visible in both light and dark themes.
Line range hint
101-144: LGTM! Menu styling improvements.The changes improve text wrapping and width handling for menu items, ensuring better readability and layout consistency.
196-202: LGTM! Good vertical rhythm values.The vertical rhythm variables are well-defined and will ensure consistent spacing between markdown elements.
480-490: LGTM! Good responsive layout.The section container provides appropriate constraints for responsive layouts, and the hero subtitle line height enhances readability.
.github/workflows/pull-request.yml (1)
Line range hint
472-520: LGTM! Well-structured Python compliance checks.The Python-Compliance job is well-configured with comprehensive checks:
- Black formatter for code style
- Flake8 for linting
- pydocstyle for docstring conventions
- Custom docstring compliance check
The job dependencies and environment setup are properly defined.
🧰 Tools
🪛 yamllint (1.35.1)
[error] 520-520: no new line character at the end of file
(new-line-at-end-of-file)
🪛 GitHub Actions: PR Workflow
[error] Unauthorized to change/delete this sensitive file
docs/docs/auto-docs/utils/timezoneUtils/dateTimeMiddleware/variables/requestMiddleware.md (1)
7-7: Reconsider type broadening fromApolloLinktoany.Changing the type from
ApolloLinktoanyreduces type safety and IDE support. Consider maintaining the specificApolloLinktype or using a more specific type that captures the middleware's requirements.Let's verify the impact of this type change:
docs/docs/auto-docs/utils/timezoneUtils/dateTimeMiddleware/variables/responseMiddleware.md (1)
7-7: Maintain type safety by preservingApolloLinktype.Similar to
requestMiddleware, broadening the type toanyreduces type safety. Consider keeping the specificApolloLinktype to maintain type checking and IDE support.Let's verify the impact:
✅ Verification successful
Keep
ApolloLinktype - confirmed implementation and usageThe codebase confirms
responseMiddlewareis explicitly implemented as anApolloLinkinstance and is used in the Apollo Client link chain. Changing toanywould be incorrect and potentially harmful.
src/utils/timezoneUtils/dateTimeMiddleware.ts: Implemented asnew ApolloLinksrc/index.tsx: Used in Apollo Client middleware chainsrc/utils/timezoneUtils/dateTimeMiddleware.spec.ts: Tests rely on ApolloLink-specific methods🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for usages of responseMiddleware to assess impact rg -A 3 "responseMiddleware" --type tsLength of output: 1949
docs/docs/auto-docs/utils/StaticMockLink/interfaces/InterfaceMockApolloLink.md (1)
11-11: Review interface inheritance change fromApolloLinktounknown.This change breaks the interface contract with Apollo's type system. If decoupling from Apollo types is intentional, consider:
- Creating a custom interface that maintains necessary type constraints
- Documenting the rationale for removing Apollo type dependencies
Let's check the impact on implementations:
docs/docs/auto-docs/utils/StaticMockLink/classes/StaticMockLink.md (1)
14-14:⚠️ Potential issueCritical: Review type safety changes in StaticMockLink.
Multiple type safety concerns need attention:
- Extending
unknowninstead ofApolloLinkbreaks compatibility with Apollo's link chain- Using
anyfor operation parameter and return type inrequest()method reduces type checking in testsConsider:
- Maintaining
ApolloLinkinheritance for link chain compatibility- Using specific types for operation parameter and return value
- If decoupling from Apollo is intended, document the rationale and ensure test reliability isn't compromised
Let's analyze the impact:
Also applies to: 80-80, 92-92
docs/sidebars.ts
Outdated
| { | ||
| type: 'category', | ||
| label: 'Manual', | ||
| items: ['INSTALLATION', 'CONFIGURING'], | ||
| }, |
There was a problem hiding this comment.
Critical: Pipeline failure indicates unauthorized file modification.
The PR workflow has failed with an error indicating this is a sensitive file that requires special permissions to modify.
Please:
- Verify you have the necessary permissions to modify this file
- Contact repository maintainers for guidance on the proper procedure for updating sidebar configuration
🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] Unauthorized to change/delete this sensitive file
💡 Codebase verification
Missing documentation file referenced in sidebar
The sidebar configuration references two documentation files:
- ✅
INSTALLATION.mdexists atdocs/docs/INSTALLATION.md - ❌
CONFIGURING.mdis missing and needs to be created
🔗 Analysis chain
Verify the existence of referenced documentation files.
The new Manual category references 'INSTALLATION' and 'CONFIGURING' items, which should correspond to documentation files.
Let's verify the existence of these files:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the referenced documentation files exist
echo "Checking for INSTALLATION.md and CONFIGURING.md..."
fd -e md -g "*INSTALLATION.md" -g "*CONFIGURING.md" docs/
Length of output: 258
🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] Unauthorized to change/delete this sensitive file
| {guide.items.map((item) => ( | ||
| <a className="card-item" key={item.title} href={item.href}> | ||
| <div> | ||
| <h3>{item.title}</h3> | ||
| <p>{item.description}</p> | ||
| </div> | ||
| <ChevronRightArrowIcon /> | ||
| </a> | ||
| ))} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add keyboard navigation support.
Ensure the card items are keyboard accessible by adding proper focus styles and key handlers.
- <a className="card-item" key={item.title} href={item.href}>
+ <a
+ className="card-item"
+ key={item.title}
+ href={item.href}
+ role="link"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && item.href) {
+ window.location.href = item.href;
+ }
+ }}
+ >Committable suggestion skipped: line range outside the PR's diff.
| const ChevronRightArrowIcon = () => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 320 512" | ||
| className="svg-icon" | ||
| > | ||
| <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" /> | ||
| </svg> | ||
| ); | ||
|
|
||
| const DeveloperGuideIcon = () => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 640 512" | ||
| className="svg-icon" | ||
| > | ||
| <path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" /> | ||
| </svg> | ||
| ); | ||
|
|
||
| const UserGuideIcon = () => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 448 512" | ||
| className="svg-icon" | ||
| > | ||
| <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256z" /> | ||
| </svg> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add ARIA labels to SVG icons for accessibility.
The SVG icons should include proper ARIA labels for screen readers.
const ChevronRightArrowIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
className="svg-icon"
+ role="img"
+ aria-label="Right arrow"
>Apply similar changes to other SVG icons.
📝 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 ChevronRightArrowIcon = () => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 320 512" | |
| className="svg-icon" | |
| > | |
| <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" /> | |
| </svg> | |
| ); | |
| const DeveloperGuideIcon = () => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 640 512" | |
| className="svg-icon" | |
| > | |
| <path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" /> | |
| </svg> | |
| ); | |
| const UserGuideIcon = () => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 448 512" | |
| className="svg-icon" | |
| > | |
| <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256z" /> | |
| </svg> | |
| ); | |
| const ChevronRightArrowIcon = () => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 320 512" | |
| className="svg-icon" | |
| role="img" | |
| aria-label="Right arrow" | |
| > | |
| <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" /> | |
| </svg> | |
| ); | |
| const DeveloperGuideIcon = () => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 640 512" | |
| className="svg-icon" | |
| role="img" | |
| aria-label="Developer guide" | |
| > | |
| <path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" /> | |
| </svg> | |
| ); | |
| const UserGuideIcon = () => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 448 512" | |
| className="svg-icon" | |
| role="img" | |
| aria-label="User guide" | |
| > | |
| <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256z" /> | |
| </svg> | |
| ); |
| @media (max-width: 768px) { | ||
| .card-grid { | ||
| grid-template-columns: 1fr; | ||
| height: fit-content; | ||
| } | ||
|
|
||
| .card { | ||
| justify-content: center; | ||
| height: 300px; | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add prefers-reduced-motion media query for animations.
Consider users who prefer reduced motion for accessibility.
+@media (prefers-reduced-motion: reduce) {
+ .card {
+ transition: none;
+ }
+ .card:hover {
+ transform: none;
+ }
+}
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
height: fit-content;
}
.card {
justify-content: center;
height: 300px;
}
}📝 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.
| @media (max-width: 768px) { | |
| .card-grid { | |
| grid-template-columns: 1fr; | |
| height: fit-content; | |
| } | |
| .card { | |
| justify-content: center; | |
| height: 300px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .card { | |
| transition: none; | |
| } | |
| .card:hover { | |
| transform: none; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .card-grid { | |
| grid-template-columns: 1fr; | |
| height: fit-content; | |
| } | |
| .card { | |
| justify-content: center; | |
| height: 300px; | |
| } | |
| } |
| .card-item:hover { | ||
| background-color: var(--ifm-color-emphasis-200); | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add focus styles for keyboard navigation.
The hover styles should be matched with focus styles for better accessibility.
-.card-item:hover {
+.card-item:hover,
+.card-item:focus {
background-color: var(--ifm-color-emphasis-200);
text-decoration: none;
cursor: pointer;
+ outline: 2px solid var(--ifm-color-primary);
+ outline-offset: 2px;
}📝 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.
| .card-item:hover { | |
| background-color: var(--ifm-color-emphasis-200); | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| .card-item:hover, | |
| .card-item:focus { | |
| background-color: var(--ifm-color-emphasis-200); | |
| text-decoration: none; | |
| cursor: pointer; | |
| outline: 2px solid var(--ifm-color-primary); | |
| outline-offset: 2px; | |
| } |
package.json
Outdated
| @@ -117,10 +117,10 @@ | |||
| "@babel/preset-env": "^7.26.0", | |||
| "@babel/preset-react": "^7.25.7", | |||
| "@babel/preset-typescript": "^7.26.0", | |||
| "@testing-library/dom": "^10.4.0", | |||
There was a problem hiding this comment.
Unauthorized changes to sensitive file.
The package.json file is marked as sensitive in the workflow configuration. Changes to this file require special authorization.
To proceed with this change:
- Request authorization from the repository maintainers
- Apply the 'ignore-sensitive-files-pr' label to bypass the check
🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] Unauthorized to change/delete this sensitive file
Rukhsarkh
force-pushed
the
feature/admin-docs-gen
branch
from
3ddbfed to
f9fdea1
Compare
|
sorry sir, i was trying something and this closed by itself |
What kind of change does this PR introduce?
homePage and doc-sidebar improvements
Fixes #2970
Does this PR introduce a breaking change?
no
Have you read the contributing guide?
yes
Summary by CodeRabbit
Documentation
New Features
Workflow Updates
Dependency Updates
Styling