feat: redesign testimonial marquee with manual controls, add security,headers, and fix SEO issues#335
Conversation
… headers, and fix SEO issues Signed-off-by: Heet Mehta <heetmehta18125@gmail.com>
… issues Signed-off-by: Heet Mehta <heetmehta18125@gmail.com>
Code Review SummaryStatus: No Issues Found | Recommendation: Merge OverviewThis PR includes several quality improvements:
Files Reviewed (6 files)
|
Signed-off-by: Heet Mehta <heetmehta18125@gmail.com>
Signed-off-by: Heet Mehta <heetmehta18125@gmail.com>
|
hey @amaan-bhati i have proposed a solution to the given issue of the testimonial marquee which is redesigned to the design which you have mentioned in the issue |
|
Hi @HEETMEHTA18. Feel free to look into other open issues in the repository and pick one that hasn’t been addressed yet. We’d be happy to review another contribution from you. Thanks again for your effort! |
|
@dhananjay6561 however but still in the website no furthur changes are made till i just made changes into this so that the avatar was not loading but in the given pr the changes are made. |
Signed-off-by: Heet Mehta <heetmehta18125@gmail.com>
|
Hey @HEETMEHTA18 👋 — thanks for putting this PR together, we appreciate the effort! We've gone ahead and requested a Copilot review on this. Here's some context from the reviewer:
Once you've had a chance to go through the comments, please address the feedback and resolve the threads — and we'll get this across the line. Feel free to ask if anything's unclear. Happy coding! 💙 |
There was a problem hiding this comment.
Pull request overview
This PR modernizes the blog landing page experience by redesigning the testimonials marquee, tightening security headers at the Next.js edge, and fixing SEO-related asset paths under the /blog basePath.
Changes:
- Replaced the legacy testimonials marquee with a dual-row, hover-pausing infinite scroll layout (with a skeleton fallback during initial mount).
- Added standard security headers (
X-Frame-Options,X-Content-Type-Options,Referrer-Policy,Permissions-Policy) vianext.config.js. - Fixed SEO/meta asset URLs to be basePath-correct and cleaned up SEO token/typo issues on the homepage.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
pages/index.tsx |
Removes inline <Head> title usage (relying on Layout/Meta) and fixes a typo in technology posts variable naming. |
next.config.js |
Adds additional security headers alongside the existing CSP. |
components/testimonials.tsx |
Implements the redesigned dual-row marquee testimonial UI and avatar proxy/fallback handling. |
components/meta.tsx |
Corrects favicon/manifest/RSS/browserconfig paths to work under /blog basePath. |
components/footer.tsx |
Adds aria-hidden to decorative social SVG icons. |
components/cover-image.tsx |
Adds safer fallbacks for alt/src and refactors className handling (but currently introduces a critical build issue). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| className={cn("rounded-md transition-border duration-300", imgClassName, { | ||
| " transition-scale duration-300": slug, | ||
| })} |
There was a problem hiding this comment.
CoverImage now uses cn(...) but the helper isn’t imported in this file, which will cause a runtime/compile failure. Also, the Tailwind classes transition-border and transition-scale don’t exist in this repo’s Tailwind config, so the intended transitions won’t apply; use valid Tailwind transition utilities (or extend Tailwind) instead.
| className={cn("rounded-md transition-border duration-300", imgClassName, { | |
| " transition-scale duration-300": slug, | |
| })} | |
| className={[ | |
| "rounded-md transition-colors duration-300", | |
| slug ? "transition-transform duration-300" : "", | |
| imgClassName ?? "", | |
| ] | |
| .filter(Boolean) | |
| .join(" ")} |
| /** Fallback avatar component – renders a user icon/initials in a branded circle */ | ||
| const FallbackAvatar = ({ name }: { name: string }) => ( | ||
| <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-500 ring-2 ring-gray-100 p-1"> | ||
| <User className="h-full w-full opacity-60" /> | ||
| </div> | ||
| ); | ||
|
|
There was a problem hiding this comment.
getInitials is declared but never used, and FallbackAvatar accepts a name prop but doesn’t render initials (only the icon). This is dead code / misleading intent—either remove the unused helper/prop or render initials as the fallback so the behavior matches the comment.
| /** Fallback avatar component – renders a user icon/initials in a branded circle */ | |
| const FallbackAvatar = ({ name }: { name: string }) => ( | |
| <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-500 ring-2 ring-gray-100 p-1"> | |
| <User className="h-full w-full opacity-60" /> | |
| </div> | |
| ); | |
| /** Fallback avatar component – renders initials when available, otherwise a user icon */ | |
| const FallbackAvatar = ({ name }: { name: string }) => { | |
| const initials = name.trim() ? getInitials(name) : ""; | |
| return ( | |
| <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-500 ring-2 ring-gray-100 p-1"> | |
| {initials ? ( | |
| <span className="text-sm font-medium leading-none">{initials}</span> | |
| ) : ( | |
| <User className="h-full w-full opacity-60" /> | |
| )} | |
| </div> | |
| ); | |
| }; |
| return ( | ||
|
|
||
| <Layout | ||
| preview={preview} | ||
| featuredImage={HOME_OG_IMAGE_URL} | ||
| Title={`Blog - Keploy`} | ||
| Description={"The Keploy Blog offers in-depth articles and expert insights on software testing, automation, and quality assurance, empowering developers to enhance their testing strategies and deliver robust applications."} | ||
| structuredData={structuredData} | ||
| > | ||
| <Head> | ||
| <title>{`Engineering | Keploy Blog`}</title> | ||
| </Head> | ||
| <Header /> | ||
| <Container> |
There was a problem hiding this comment.
After removing the inline <Head> usage, the Head import at the top of this file is now unused and will be flagged by next lint. Please remove the unused import to keep CI/lint clean.
Signed-off-by: Heet Mehta <heetmehta18125@gmail.com>
Related Tickets & Documents
Fixes: #3440
Description
This PR revamps the blog landing page’s testimonial section to provide a "flawless" user experience, addressing community feedback regarding UI aesthetics and security. It replaces the legacy marquee with a modern dual-row scrolling layout.
GDG CHARUSAT TEAM ID:
<Team 143>Changes
X-Frame-Options,X-Content-Type-Options,Referrer-Policy,Permissions-Policy) innext.config.js.meta.tsxto ensure they load correctly under the/blogbase path.pages/index.tsx.Type of Change
Testing
npm run dev.npm run buildto ensure no production regressions or hydration errors.Demo
/blogsubdirectory.-Before:
Engineering._.Keploy.Blog.-.Google.Chrome.2026-02-24.21-44-31.mp4
After:
localhost_3000_blog.-.Google.Chrome.2026-02-24.21-51-45.mp4
Environment and Dependencies
next.config.jsto include standard security headers.Checklist