Feat/website for auth#131
Conversation
- Added Tailwind CSS as a dependency and configured PostCSS. - Updated global styles to utilize Tailwind's utility classes. - Created a new layout with Header and Footer components for better structure. - Implemented a responsive design for the homepage with feature highlights. - Added a documentation page with setup instructions. - Removed unused CSS files to streamline the project.
- Introduced new landing page components: Hero, Features, Architecture, Resources, and OpenSource. - Updated global styles to include a new landing hero design with responsive background gradients. - Replaced static content with dynamic components for better maintainability and scalability. - Added icons for features to improve visual representation. - Integrated tagline and description from a centralized copy file for consistency across the site.
- Updated global styles for a more cohesive dark theme and improved background effects. - Refined landing hero section with new animations and responsive design. - Introduced a Terminal component to simulate command-line interactions for user engagement. - Adjusted layout and spacing across various components for better visual hierarchy. - Enhanced footer and header styles to align with the new design language.
|
Thank you for your contribution! Before we can merge this PR, we need you to sign our Contributor License Agreement. I have read the CLA and agree to its terms. You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot. |
📝 WalkthroughWalkthroughThe Next.js developer website is replaced from a starter template to a full landing page. Tailwind CSS is wired up via PostCSS, shared copy/link constants are introduced, two icon libraries are added, and the layout is rebuilt with Header/Footer. Five landing sections (Hero, Features, Architecture, Resources, OpenSource) with an animated Terminal are composed into the home page, and a new Docs page is added. ChangesDeveloper Website Landing Page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@developer-website/src/app/globals.css`:
- Line 3: Update the `.stylelintrc.json` configuration file to properly handle
Tailwind v4 at-rules. In the rules section, configure the `at-rule-no-unknown`
rule to ignore Tailwind directives by adding an `ignoreAtRules` array containing
"theme" and "import". If the stylelint configuration is no longer actively used
or maintained, you can alternatively remove the `.stylelintrc.json` file
entirely from the project to avoid confusion and maintenance overhead.
In `@developer-website/src/components/Header.tsx`:
- Around line 184-212: The mobile menu visual collapse controlled by the
grid-rows CSS classes does not prevent keyboard focus from reaching the NavLink
items and the "Get started" Link inside the menu-body. Conditionally render the
entire content inside the overflow-hidden div (which contains the NavLink.map
loop and the Link component) only when the open state is true, rather than
relying on CSS alone to hide it. This ensures that when the menu is closed,
keyboard users cannot tab through the hidden navigation items.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 7046d5a6-0200-430b-b207-b3a4338bb2dd
⛔ Files ignored due to path filters (2)
developer-website/package-lock.jsonis excluded by!**/package-lock.jsondeveloper-website/public/logo.pngis excluded by!**/*.png
📒 Files selected for processing (19)
developer-website/package.jsondeveloper-website/postcss.config.mjsdeveloper-website/src/app/docs/page.tsxdeveloper-website/src/app/globals.cssdeveloper-website/src/app/layout.tsxdeveloper-website/src/app/page.module.cssdeveloper-website/src/app/page.tsxdeveloper-website/src/components/Footer.tsxdeveloper-website/src/components/Header.tsxdeveloper-website/src/components/NavIcons.tsxdeveloper-website/src/components/landing/Architecture.tsxdeveloper-website/src/components/landing/Features.tsxdeveloper-website/src/components/landing/Hero.tsxdeveloper-website/src/components/landing/OpenSource.tsxdeveloper-website/src/components/landing/Resources.tsxdeveloper-website/src/components/landing/Terminal.tsxdeveloper-website/src/components/landing/icons.tsxdeveloper-website/src/lib/copy.tsdeveloper-website/src/lib/links.ts
💤 Files with no reviewable changes (1)
- developer-website/src/app/page.module.css
| --foreground: #171717; | ||
| @import "tailwindcss"; | ||
|
|
||
| @theme { |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether stylelint config is Tailwind-v4 aware and where the rule is enforced.
set -euo pipefail
echo "== stylelint-related config files =="
fd -HI 'stylelint|\.stylelintrc|stylelint\.config' .
echo
echo "== Search for at-rule-no-unknown settings =="
rg -n --hidden -S 'at-rule-no-unknown|scss/at-rule-no-unknown|ignoreAtRules|`@theme`|tailwind' .Repository: roshankumar0036singh/auth-server
Length of output: 6047
🏁 Script executed:
cat .stylelintrc.jsonRepository: roshankumar0036singh/auth-server
Length of output: 1436
🏁 Script executed:
cat -n developer-website/package.json | grep -A 5 -B 5 "stylelint\|lint\|script"Repository: roshankumar0036singh/auth-server
Length of output: 742
Remove or update unused stylelint configuration for Tailwind v4 compatibility.
The .stylelintrc.json extends stylelint-config-standard-scss without configuring at-rule-no-unknown to recognize Tailwind v4 at-rules like @theme. While this doesn't currently impact CI (since stylelint isn't in the npm lint script), the config should either be removed if no longer used or updated to handle Tailwind directives by adding ignoreAtRules: ["theme", "import"] to prevent future issues if stylelint is re-enabled.
🧰 Tools
🪛 Stylelint (17.13.0)
[error] 3-3: Unexpected unknown at-rule "@theme" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@developer-website/src/app/globals.css` at line 3, Update the
`.stylelintrc.json` configuration file to properly handle Tailwind v4 at-rules.
In the rules section, configure the `at-rule-no-unknown` rule to ignore Tailwind
directives by adding an `ignoreAtRules` array containing "theme" and "import".
If the stylelint configuration is no longer actively used or maintained, you can
alternatively remove the `.stylelintrc.json` file entirely from the project to
avoid confusion and maintenance overhead.
Source: Linters/SAST tools
| <div | ||
| id="mobile-menu" | ||
| className={`grid border-t border-zinc-800/70 transition-[grid-template-rows,opacity] duration-200 md:hidden ${ | ||
| open | ||
| ? "grid-rows-[1fr] opacity-100" | ||
| : "grid-rows-[0fr] opacity-0" | ||
| }`} | ||
| aria-hidden={!open} | ||
| > | ||
| <div className="overflow-hidden"> | ||
| <div className="flex flex-col gap-1 px-4 py-3 sm:px-6"> | ||
| {nav.map((item) => ( | ||
| <NavLink | ||
| key={item.label} | ||
| item={item} | ||
| onNavigate={closeMenu} | ||
| className={mobileNavLinkClass} | ||
| /> | ||
| ))} | ||
| <Link | ||
| href="/docs" | ||
| onClick={closeMenu} | ||
| className="mt-2 inline-flex items-center justify-center rounded-xl bg-accent px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-hover" | ||
| > | ||
| Get started | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Prevent keyboard focus from reaching collapsed mobile-menu links.
When open is false, Line 186-Line 190 only visually collapses the menu; interactive children remain mounted and can still be reached via keyboard tabbing. Keep hidden menu items out of the tab order (e.g., conditionally render the menu body only when open, or otherwise make the closed state non-interactive for keyboard users).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@developer-website/src/components/Header.tsx` around lines 184 - 212, The
mobile menu visual collapse controlled by the grid-rows CSS classes does not
prevent keyboard focus from reaching the NavLink items and the "Get started"
Link inside the menu-body. Conditionally render the entire content inside the
overflow-hidden div (which contains the NavLink.map loop and the Link component)
only when the open state is true, rather than relying on CSS alone to hide it.
This ensures that when the menu is closed, keyboard users cannot tab through the
hidden navigation items.
|
@Ingole712521 provide ss to assess the ui |
|
@Ingole712521 resolev all the suggestions and sonar workflow flagged issues |
|
I am still working on it, it will take a time to create website in a week or maybe early |
|
@Ingole712521 no problem but just show me progress like a hero page so i can be sure of the result for the design |
2 participants
Summary
Adds a production-ready developer website for Auth Server under
developer-website/. The site gives contributors and integrators a professional landing page, quick-start docs, and links to GitHub, Swagger, and the npm SDK.Working #126
What's included
Landing page
UI / UX
prefers-reduced-motion)Tech stack
Summary by CodeRabbit
Release Notes
New Features
Style
Chores