refactor: admin-doc to hasura docs style #3087
Conversation
WalkthroughThis pull request focuses on enhancing the documentation website for Talawa-Admin by updating the Docusaurus configuration, CSS styling, and homepage. The changes include modifying the Vite configuration, updating the Husky pre-commit script, and introducing new CSS variables and styles to improve the visual design and responsiveness of the documentation site. Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Congratulations on making your first PR! 🎊 If you haven't already, check out our Contributing Guidelines and PR Reporting Guidelines to ensure that you are following our guidelines for contributing and creating PR.
![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
🧹 Nitpick comments (5)
docs/src/pages/index.tsx (1)
13-13: Consider reintroducing a call-to-action.
Removing the tutorial link creates a cleaner look, but you might lose a quick way for new users to discover how to get started. Consider adding another link or CTA that takes users directly to a primary resource.config/vite.config.ts.timestamp-1735476518176-eac443967cb4b.mjs (1)
1-35: Apply consistent quoting and formatting.
According to the static analysis, replace double quotes with single quotes, ensure trailing commas where needed, and insert missing commas for cleaner code style. This also helps maintain consistency with the rest of the codebase.A representative diff for these changes (applied throughout the file):
- import { defineConfig } from "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js"; + import { defineConfig } from 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js'; - base: "", + base: '', - EnvironmentPlugin("all"), + EnvironmentPlugin('all'), - host: "0.0.0.0", + host: '0.0.0.0', - outDir: "build" + outDir: 'build', // and so on for other quoted values and missing commas🧰 Tools
🪛 eslint
[error] 2-2: Replace
"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js'(prettier/prettier)
[error] 3-3: Replace
"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/@vitejs/plugin-react/dist/index.mjs"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/@vitejs/plugin-react/dist/index.mjs'(prettier/prettier)
[error] 4-4: Replace
"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-tsconfig-paths/dist/index.js"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-tsconfig-paths/dist/index.js'(prettier/prettier)
[error] 5-5: Replace
"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-svgr/dist/index.js"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-svgr/dist/index.js'(prettier/prettier)
[error] 6-6: Replace
"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-environment/dist/index.js"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-environment/dist/index.js'(prettier/prettier)
[error] 10-10: Replace
"build"with'build',(prettier/prettier)
[error] 12-12: Replace
""with''(prettier/prettier)
[error] 16-16: Replace
"all"with'all'(prettier/prettier)
[error] 19-19: Insert
,(prettier/prettier)
[error] 21-21: Insert
,(prettier/prettier)
[error] 22-22: Insert
,(prettier/prettier)
[error] 27-27: Replace
"0.0.0.0"with'0.0.0.0'(prettier/prettier)
[error] 29-29: Insert
,(prettier/prettier)
[error] 30-30: Insert
,(prettier/prettier)
[error] 32-34: Replace
⏎··vite_config_default·as·default⏎with·vite_config_default·as·default·(prettier/prettier)
🪛 GitHub Check: Performs linting, formatting, type-checking, checking for different source and target branch
[failure] 2-2:
Replace"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js'
[failure] 3-3:
Replace"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/@vitejs/plugin-react/dist/index.mjs"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/@vitejs/plugin-react/dist/index.mjs'
[failure] 4-4:
Replace"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-tsconfig-paths/dist/index.js"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-tsconfig-paths/dist/index.js'
[failure] 5-5:
Replace"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-svgr/dist/index.js"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-svgr/dist/index.js'
[failure] 6-6:
Replace"file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-environment/dist/index.js"with'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-environment/dist/index.js'
[failure] 10-10:
Replace"build"with'build',
[failure] 12-12:
Replace""with''
[failure] 16-16:
Replace"all"with'all'
[failure] 19-19:
Insert,
[failure] 21-21:
Insert,docs/docusaurus.config.ts (1)
136-140: Revisit default color mode policy.
Currently, the default mode is set to "light," and you allow switching. Some users may prefer auto-detection based on their OS preferences.docs/src/css/index.css (1)
473-513: Improve ActionButton accessibility and hover states.The ActionButton component has good base styling but could benefit from accessibility improvements:
- Add hover transition for background-color
- Add focus states for keyboard navigation
- Consider adding aria-labels for buttons with icon-only content
Apply these enhancements:
.ActionButton { /* existing styles */ - transition: all 0.2s ease-out; + transition: background-color 0.2s ease-out, transform 0.2s ease-out; + cursor: pointer; } +.ActionButton:focus-visible { + outline: 2px solid var(--ifm-color-primary); + outline-offset: 2px; } .ActionButton.primary:hover { background-color: #1cbb99; + transform: translateY(-1px); }docs/src/css/custom.css (1)
427-484: Optimize media query organization.The media queries for responsive design are scattered and have overlapping breakpoints. This can lead to specificity issues and makes maintenance difficult.
Consider reorganizing media queries using a mobile-first approach and consistent breakpoints:
/* Base styles (mobile) */ .navbar__items--right > .navbar__item:not(:first-of-type) { margin-left: 0.25rem; } /* Tablet (768px and up) */ @media (min-width: 768px) { .navbar__items--right > .navbar__item:not(:first-of-type) { margin-left: 0.5rem; } } /* Desktop (1024px and up) */ @media (min-width: 1024px) { .navbar__items--right > .navbar__item:not(:first-of-type) { margin-left: 1.5rem; } }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (13)
docs/static/img/facebook.svgis excluded by!**/*.svgdocs/static/img/favicon_palisadoes.icois excluded by!**/*.icodocs/static/img/github-dark.svgis excluded by!**/*.svgdocs/static/img/github.svgis excluded by!**/*.svgdocs/static/img/instagram.svgis excluded by!**/*.svgdocs/static/img/opportunities.svgis excluded by!**/*.svgdocs/static/img/slack.svgis excluded by!**/*.svgdocs/static/img/source.svgis excluded by!**/*.svgdocs/static/img/team.svgis excluded by!**/*.svgdocs/static/img/twitter.svgis excluded by!**/*.svgdocs/static/img/youtube-white.svgis excluded by!**/*.svgdocs/static/img/youtube.svgis excluded by!**/*.svgpackage-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (7)
.husky/pre-commit(0 hunks)config/vite.config.ts.timestamp-1735476518176-eac443967cb4b.mjs(1 hunks)docs/docusaurus.config.ts(2 hunks)docs/src/css/custom.css(1 hunks)docs/src/css/index.css(1 hunks)docs/src/pages/index.tsx(1 hunks)package.json(2 hunks)
💤 Files with no reviewable changes (1)
- .husky/pre-commit
🧰 Additional context used
🪛 eslint
config/vite.config.ts.timestamp-1735476518176-eac443967cb4b.mjs
[error] 2-2: Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js'
(prettier/prettier)
[error] 3-3: Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/@vitejs/plugin-react/dist/index.mjs" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/@vitejs/plugin-react/dist/index.mjs'
(prettier/prettier)
[error] 4-4: Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-tsconfig-paths/dist/index.js" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-tsconfig-paths/dist/index.js'
(prettier/prettier)
[error] 5-5: Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-svgr/dist/index.js" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-svgr/dist/index.js'
(prettier/prettier)
[error] 6-6: Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-environment/dist/index.js" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-environment/dist/index.js'
(prettier/prettier)
[error] 10-10: Replace "build" with 'build',
(prettier/prettier)
[error] 12-12: Replace "" with ''
(prettier/prettier)
[error] 16-16: Replace "all" with 'all'
(prettier/prettier)
[error] 19-19: Insert ,
(prettier/prettier)
[error] 21-21: Insert ,
(prettier/prettier)
[error] 22-22: Insert ,
(prettier/prettier)
[error] 27-27: Replace "0.0.0.0" with '0.0.0.0'
(prettier/prettier)
[error] 29-29: Insert ,
(prettier/prettier)
[error] 30-30: Insert ,
(prettier/prettier)
[error] 32-34: Replace ⏎··vite_config_default·as·default⏎ with ·vite_config_default·as·default·
(prettier/prettier)
🪛 GitHub Check: Performs linting, formatting, type-checking, checking for different source and target branch
config/vite.config.ts.timestamp-1735476518176-eac443967cb4b.mjs
[failure] 2-2:
Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite/dist/node/index.js'
[failure] 3-3:
Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/@vitejs/plugin-react/dist/index.mjs" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/@vitejs/plugin-react/dist/index.mjs'
[failure] 4-4:
Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-tsconfig-paths/dist/index.js" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-tsconfig-paths/dist/index.js'
[failure] 5-5:
Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-svgr/dist/index.js" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-svgr/dist/index.js'
[failure] 6-6:
Replace "file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-environment/dist/index.js" with 'file:///C:/Users/reesh/Desktop/talawa-admin/node_modules/vite-plugin-environment/dist/index.js'
[failure] 10-10:
Replace "build" with 'build',
[failure] 12-12:
Replace "" with ''
[failure] 16-16:
Replace "all" with 'all'
[failure] 19-19:
Insert ,
[failure] 21-21:
Insert ,
🪛 Biome (1.9.4)
docs/src/css/custom.css
[error] 150-150: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
[error] 151-151: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
🔇 Additional comments (3)
docs/docusaurus.config.ts (1)
63-77: Validate updated branding and design approach.
Renaming the title to "Talawa-docs" and customizing the header is an excellent step toward a cohesive brand identity. Before finalizing, ensure these changes align with marketing materials and existing brand guidelines.
package.json (1)
120-120: Double-check required Husky hooks and testing library usage.
You re-added @testing-library/dom and updated Husky to ^9.1.7. Ensure:
- Any relevant hooks (like pre-commit) are properly configured to run your tests or lint checks.
@testing-library/domis actually being used in updated or new test files.
Also applies to: 150-150
docs/src/css/index.css (1)
8-37: 🛠️ Refactor suggestion
CSS variables are well-organized but some values need adjustment.
The CSS variables are logically grouped (brand colors, dark theme, text, UI components). However, there are a few concerns:
- The opacity value of 2 in several image classes (e.g., line 61) is invalid as opacity must be between 0 and 1.
- The left positioning of -250px (e.g., lines 101, 112) might push content off-screen on smaller devices.
Apply these fixes:
- opacity: 2;
+ opacity: 1;
- left: -250px;
+ left: 0;
+ transform: translateX(-250px);Likely invalid or redundant comment.
| .second-panel-image { | ||
| width: 140%; | ||
| height: auto; | ||
| position: relative; | ||
| top: -50px; | ||
| left: -65px; | ||
| opacity: 2; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize image sizing and positioning.
Multiple image classes have fixed width percentages that are either too large (500%, 1000%) or use fixed pixel positioning that can cause layout issues:
.seventh-panel-image: 500% width.eigth-panel-image: 1000% width- Fixed pixel positioning with negative values
Consider using more maintainable approaches:
.seventh-panel-image {
- width: 500%;
+ width: 100%;
+ max-width: 1200px;
height: auto;
position: relative;
- opacity: 2;
+ opacity: 1;
}
.eigth-panel-image {
- width: 1000%;
+ width: 100%;
+ max-width: 1500px;
height: auto;
position: relative;
- opacity: 2;
+ opacity: 1;
}Also applies to: 286-293, 415-420, 464-471
| :root { | ||
| --ifm-color-primary: #1e56e3; | ||
| --ifm-color-primary-dark: #cc4a00; | ||
| --ifm-color-primary-darker: #993800; | ||
| --ifm-color-primary-darkest: #662500; | ||
| --ifm-color-primary-light: #ff7d33; | ||
| --ifm-color-primary-lighter: #ff9e66; | ||
| --ifm-color-primary-lightest: #ffbe99; | ||
| --ifm-color-gray-100: #e3e3e6; | ||
| --ifm-color-gray-200: #c9c9cc; | ||
| --ifm-color-gray-300: #b0b0b3; | ||
| --ifm-color-gray-400: #979799; | ||
| --ifm-color-gray-500: #7e7e80; | ||
| --ifm-color-gray-600: #656566; | ||
| --ifm-color-gray-700: #4c4c4d; | ||
| --ifm-color-gray-800: #323233; | ||
| --ifm-color-gray-900: #19191a; | ||
| --ifm-background-surface-color: var(--ifm-color-white); | ||
| --ifm-menu-color: var(--ifm-color-gray-600); | ||
| --ifm-toc-link-color: var(--ifm-color-gray-600); | ||
| --ifm-code-font-size: 95%; | ||
| --ifm-toc-border-color: transparent; | ||
| --ifm-code-background: #e5ecff; | ||
| --ifm-code-color: #0087ff; | ||
| --ifm-color-content: #000e33; | ||
| --ifm-heading-line-height: 1.5; | ||
| --ifm-h1-font-size: 2.25rem; | ||
| --ifm-h2-font-size: 1.875rem; | ||
| --ifm-navbar-shadow: 0 1px 2px 0 #0000001a; | ||
| --ifm-navbar-search-input-background-color: var(--ifm-color-gray-100); | ||
| --ifm-navbar-search-input-color: var(--ifm-color-content); | ||
| --ifm-table-stripe-background: #efeff2; | ||
| --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, | ||
| Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, | ||
| Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; | ||
| --ifm-font-family-monospace: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, | ||
| Consolas, 'Liberation Mono', 'Courier New', monospace; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consolidate duplicate CSS variable declarations.
There are multiple :root and dark theme variable declarations that should be consolidated to avoid confusion and potential conflicts.
Merge all root variables into a single declaration and all dark theme variables into a single declaration. For example:
:root {
/* Primary colors */
--ifm-color-primary: #1e56e3;
/* ... other primary colors ... */
/* Gray scale */
--ifm-color-gray-100: #e3e3e6;
/* ... other gray colors ... */
/* System colors */
--ifm-background-surface-color: var(--ifm-color-white);
/* ... other system colors ... */
}
[data-theme='dark'] {
/* Single dark theme declaration */
--ifm-background-color: #111927;
/* ... other dark theme colors ... */
}
- /* Remove duplicate :root and [data-theme='dark'] declarations */Also applies to: 123-148
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap'); | ||
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); |
There was a problem hiding this comment.
Fix invalid @import rule positions.
The @import rules for Google Fonts are placed after other CSS rules, which makes them invalid according to the CSS specification.
Move the @import rules to the top of the file:
+ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
- @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');📝 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 url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); | |
| /** | |
| * Any CSS included here will be global. The classic template | |
| * bundles Infima by default. Infima is a CSS framework designed to | |
| * work well for content-centric websites. | |
| */ |
🧰 Tools
🪛 Biome (1.9.4)
[error] 150-150: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
[error] 151-151: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
| @@ -0,0 +1,35 @@ | |||
| // config/vite.config.ts | |||
There was a problem hiding this comment.
Exclude this file. See commands to use below. DO NOT DELETE THE FILE.
git add -u
git reset HEAD path/to/file
git commit
git push
This PR was successful without adding adding it.
| navbar: { | ||
| title: 'My Site', | ||
| title: 'Talawa-docs', |
There was a problem hiding this comment.
Change to Talawa Admin Documentation
| @@ -1,6 +1,3 @@ | |||
| #!/usr/bin/env sh | |||
| . "$(dirname -- "$0")/_/husky.sh" | |||
There was a problem hiding this comment.
Exclude this file. It is used by many other contributors and will cause our workflow to fail. See commands to use below. DO NOT DELETE THE FILE.
git add -u
git reset HEAD path/to/file
git commit
git push
varshith257
changed the title
What kind of change does this PR introduce?
This PR introduces completion of first part of issue #2970
Issue Number:
fixes #2970 's first part
Did you add tests for your changes?
no, no need for tests ( simple design implementations )
Snapshots/Videos:
If relevant, did you update the documentation?
not needed
Summary
This PR is a start to build a whole new doc web for talawa-admin, emphasis was given on giving the website similar look to hashura's website and to keep consistence css (color scheme, fonts and typography)all over the web
Does this PR introduce a breaking change?
No
Other information
The changes have been tested for cross-browser compatibility.
css defined in docs/src/css/index.css will be used for further changes
Have you read the contributing guide?
yes
Summary by CodeRabbit
Documentation
Chores
Style