Conversation
|
@amaan-bhati kindly review the PR |
Code Review SummaryStatus: No Issues Found | Recommendation: Merge OverviewThis PR improves the blog website in several ways:
Files Reviewed (6 files)
Notes✅ Local avatar fallback mechanism in |
There was a problem hiding this comment.
Pull request overview
This PR primarily modernizes the root documentation while also updating the testimonials marquee UI/asset handling used on the homepage.
Changes:
- Overhauled
README.mdwith verified architecture, routes, API endpoints, and project structure documentation. - Refactored testimonials marquee rendering (mask-based fade, repeat/duration tweaks) and updated tweet/avatar data + added local avatar assets.
- Included non-doc changes such as
package-lock.jsonmetadata edits.
Reviewed changes
Copilot reviewed 5 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
README.md |
Replaced the old setup-focused README with a comprehensive, developer-facing guide (routes, API, structure, stack). |
components/testimonials.tsx |
Updates marquee container styling and changes avatar loading/fallback logic for testimonials. |
components/Marquee.tsx |
Adds transform rendering hints (will-change-transform, backface-visibility). |
services/Tweets.tsx |
Reformats and updates tweet entries; switches some avatars to local /blog/avatars/* paths and adds new testimonials. |
styles/index.css |
Adds .marquee-mask class for mask-based fade effect on marquee edges. |
public/avatars/*.png |
Adds local avatar images used by testimonials. |
public/avatars/avatar-placeholder.svg |
Adds a local placeholder avatar fallback asset. |
package-lock.json |
Removes several "peer": true markers (lockfile metadata churn). |
Comments suppressed due to low confidence (1)
README.md:276
- Typo: "servr-side" should be "server-side".
- **Full-Text Search** — Client-side search with servr-side API backing (`/api/search-all`)
- **Pagination / Infinite Scroll** — Posts load progressively as the user scrolls
- **Syntax-Highlighted Code Blocks** — Prism.js for blog post code, CodeMirror for interactive JSON diffs
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| src={avatar} | ||
| onError={(e) => { | ||
| const img = e.target as HTMLImageElement; | ||
| if (img.src !== localPlaceholder) { |
There was a problem hiding this comment.
if (img.src !== localPlaceholder) is comparing img.src (typically an absolute URL) against a relative path string, so the condition won’t behave as intended in the browser. If the placeholder ever errors first, this can cause the fallback logic to keep re-running. Prefer comparing new URL(img.src).pathname (or endsWith(localPlaceholder)) or track fallback state via a data attribute.
| if (img.src !== localPlaceholder) { | |
| const isLocalPlaceholder = img.src.endsWith(localPlaceholder); | |
| if (!isLocalPlaceholder) { |
| ## What is this? | ||
|
|
||
| ### Step 2. Populate Content | ||
| A **Next.js (Pages Router)** blog application that powers the [Keploy Blog](https://keploy.io/blog). Content is authored in a headless **WordPress** instance and fetched at build time via the **WPGraphQL** plugin. The site is statically generated with **Incremental Static Regeneration (ISR)**, revalidating every 10 seconds for near-instant page loads and always-fresh content. | ||
|
|
||
| Inside your WordPress admin, go to **Posts** and start adding new posts: | ||
| --- |
There was a problem hiding this comment.
PR title/description focuses on a README revamp, but this PR also changes runtime UI behavior (testimonials marquee styling + avatar loading logic), adds new public assets, and modifies package-lock.json. If these changes are intentional, it would help to call them out explicitly in the PR description (or split into a separate PR) to keep review/rollback scope clear.
| ## What is this? | ||
|
|
||
| ### Step 2. Populate Content | ||
| A **Next.js (Pages Router)** blog application that powers the [Keploy Blog](https://keploy.io/blog). Content is authored in a headless **WordPress** instance and fetched at build time via the **WPGraphQL** plugin. The site is statically generated with **Incremental Static Regeneration (ISR)**, revalidating every 10 seconds for near-instant page loads and always-fresh content. |
There was a problem hiding this comment.
The README says pages are revalidated "every 10 seconds", but several routes use different ISR intervals (e.g. many [slug] pages use revalidate: 60). The doc should reflect the actual per-route revalidate behavior (or avoid stating a single global value).
| A **Next.js (Pages Router)** blog application that powers the [Keploy Blog](https://keploy.io/blog). Content is authored in a headless **WordPress** instance and fetched at build time via the **WPGraphQL** plugin. The site is statically generated with **Incremental Static Regeneration (ISR)**, revalidating every 10 seconds for near-instant page loads and always-fresh content. | |
| A **Next.js (Pages Router)** blog application that powers the [Keploy Blog](https://keploy.io/blog). Content is authored in a headless **WordPress** instance and fetched at build time via the **WPGraphQL** plugin. The site is statically generated with **Incremental Static Regeneration (ISR)** to provide near-instant page loads while keeping content up to date. |
| const fallbackAvatar = `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random&size=64`; | ||
| const localPlaceholder = "/blog/avatars/avatar-placeholder.svg"; | ||
| return ( | ||
| <a href={post} target="_blank" className="lg:mx-2"> | ||
| <a href={post} target="_blank" rel="noopener noreferrer" className="lg:mx-2"> | ||
| <figure className="relative w-80 cursor-pointer overflow-hidden rounded-xl border p-4 border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]"> | ||
| <div className="flex flex-row items-center gap-2"> | ||
| <img | ||
| className="rounded-full" | ||
| width="32" | ||
| height="32" | ||
| alt="" | ||
| src={proxiedAvatar} | ||
| alt={`${name}'s avatar`} | ||
| src={avatar} | ||
| onError={(e) => { | ||
| const img = e.target as HTMLImageElement; | ||
| if (img.src !== localPlaceholder) { | ||
| img.onerror = () => { img.src = localPlaceholder; }; | ||
| img.src = fallbackAvatar; | ||
| } |
There was a problem hiding this comment.
ReviewCard now uses src={avatar} directly (and falls back to ui-avatars.com). With the current CSP in next.config.js (img-src 'self' ...), remote avatars like https://pbs.twimg.com/... will be blocked, so images will always error and fall back to the placeholder. Consider restoring the /api/proxy-image?url=... behavior for external avatars (as used elsewhere in the codebase) or explicitly allow the required remote domains in the CSP (including pbs.twimg.com and ui-avatars.com).
amaan-bhati
left a comment
amaan-bhati
left a comment
There was a problem hiding this comment.
Closing this pr since it got covered in: #333
PR Description: Comprehensive README Revamp
Overview
This PR provides a complete overhaul of the project's root README.md. The objective was to transform the documentation from a generic setup guide into a developer-friendly, technically documented resource that accurately reflects the current state of the Keploy blog website.
Previous Issues
Key Changes & Improvements
1. Technical Audit & Verification
package.jsonand source code. Every library (GSAP, Framer Motion, React Spring, Radix UI, etc.) is now listed with its specific use case and primary file locations.2. Deep Site Mapping
https://keploy.io/blog/tag/a2a).3. Structural Reorganization
4. Qualitative Enhancements
Technical Details
/blog)Verification
pages/directory structure.