fix: fixing the roadmap page issue/bug it was redirecting to github l…#1338
fix: fixing the roadmap page issue/bug it was redirecting to github l…#1338sachinggsingh wants to merge 2 commits intorecodehive:mainfrom
Conversation
…ink data was already present in src/data/roadmaps folder fixing (recodehive#1253)
|
@sachinggsingh is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
github-actions
Bot
added
recode
|
✅ Synchronized metadata from Issue #1253:
|
|
✅ Synchronized metadata from Issue #1253:
|
|
hi @sanjay-kv have work done on #1127 but i have pushed the code in this i think in this pr #1338 kindly have a look i have worked on the roadmap and social link for blogs bug |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
there was some deployment error 12:34:50.878 Running build in Washington, D.C., USA (East) – iad1 |
There was a problem hiding this comment.
Pull request overview
This PR fixes the navbar “Roadmap” link to point to an internal /roadmap page and introduces a new Roadmap landing page backed by existing src/data/roadmaps data. It also expands blog author metadata and UI to display author avatars and social links on blog-related pages.
Changes:
- Update navbar Roadmap link from an external GitHub Project to the new internal
/roadmappage. - Add a new
/roadmappage + styling that renders cards fromsrc/data/roadmaps. - Enhance blog author rendering by adding socials metadata and UI (custom
BlogPostAuthortheme component + updated/blogscards).
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
docusaurus.config.ts |
Routes navbar “🗺️ Roadmap” to /roadmap. |
src/pages/roadmap/index.tsx |
New Roadmap page rendering roadmap cards from src/data/roadmaps. |
src/pages/roadmap/roadmap.css |
Styling for the new Roadmap page layout/cards. |
src/data/roadmaps/index.tsx |
Source of roadmap/lesson data consumed by the new page (used, not modified in this PR). |
src/utils/authors.ts |
Changes authors map to include name + socials, and updates getAuthorNames accordingly. |
blog/authors.yml |
Adds socials metadata for blog authors and fixes tile → title. |
src/theme/BlogPostAuthor/index.tsx |
New theme override to render author avatar/name/title plus socials. |
src/theme/BlogPostAuthor/styles.module.css |
Adds styling for author photo presentation. |
src/theme/BlogPostAuthor/Socials/index.tsx |
New socials renderer that maps platform → icon and constructs profile URLs. |
src/theme/BlogPostAuthor/Socials/styles.module.css |
Styling for social icon links. |
src/pages/blogs/index.tsx |
Updates blog cards to render author avatars + social icons using authorsMap. |
src/pages/blogs/blogs-new.css |
Adds styling for the multi-author layout + social icon buttons on blog cards. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| let href = handle; | ||
|
|
||
| if (!handle.startsWith('http')) { | ||
| switch (platform.toLowerCase()) { | ||
| case 'github': | ||
| href = `https://github.com/${handle}`; | ||
| break; | ||
| case 'twitter': | ||
| case 'x': | ||
| href = `https://x.com/${handle}`; | ||
| break; | ||
| case 'linkedin': | ||
| href = `https://www.linkedin.com/in/${handle}`; | ||
| break; | ||
| case 'instagram': | ||
| href = `https://www.instagram.com/${handle}`; | ||
| break; | ||
| case 'youtube': | ||
| href = `https://www.youtube.com/@${handle}`; | ||
| break; | ||
| case 'facebook': | ||
| href = `https://www.facebook.com/${handle}`; | ||
| break; | ||
| case 'medium': | ||
| href = `https://medium.com/@${handle}`; | ||
| break; | ||
| case 'hashnode': | ||
| href = `https://hashnode.com/@${handle}`; | ||
| break; | ||
| case 'stackoverflow': | ||
| href = `https://stackoverflow.com/users/${handle}`; | ||
| break; | ||
| case 'bluesky': | ||
| href = `https://bsky.app/profile/${handle}`; |
There was a problem hiding this comment.
handle can be a non-string (e.g., stackoverflow: 8332327 in blog/authors.yml will parse as a number). Calling handle.startsWith(...) will throw at runtime and break blog pages. Coerce handle to a string (e.g., const handleStr = String(handle)), and use that for startsWith + URL construction (and keep href as the original string URL when it already looks like an absolute URL).
| let href = handle; | |
| if (!handle.startsWith('http')) { | |
| switch (platform.toLowerCase()) { | |
| case 'github': | |
| href = `https://github.com/${handle}`; | |
| break; | |
| case 'twitter': | |
| case 'x': | |
| href = `https://x.com/${handle}`; | |
| break; | |
| case 'linkedin': | |
| href = `https://www.linkedin.com/in/${handle}`; | |
| break; | |
| case 'instagram': | |
| href = `https://www.instagram.com/${handle}`; | |
| break; | |
| case 'youtube': | |
| href = `https://www.youtube.com/@${handle}`; | |
| break; | |
| case 'facebook': | |
| href = `https://www.facebook.com/${handle}`; | |
| break; | |
| case 'medium': | |
| href = `https://medium.com/@${handle}`; | |
| break; | |
| case 'hashnode': | |
| href = `https://hashnode.com/@${handle}`; | |
| break; | |
| case 'stackoverflow': | |
| href = `https://stackoverflow.com/users/${handle}`; | |
| break; | |
| case 'bluesky': | |
| href = `https://bsky.app/profile/${handle}`; | |
| const handleStr = String(handle); | |
| let href = | |
| typeof handle === 'string' && handle.startsWith('http') | |
| ? handle | |
| : handleStr; | |
| if (!handleStr.startsWith('http')) { | |
| switch (platform.toLowerCase()) { | |
| case 'github': | |
| href = `https://github.com/${handleStr}`; | |
| break; | |
| case 'twitter': | |
| case 'x': | |
| href = `https://x.com/${handleStr}`; | |
| break; | |
| case 'linkedin': | |
| href = `https://www.linkedin.com/in/${handleStr}`; | |
| break; | |
| case 'instagram': | |
| href = `https://www.instagram.com/${handleStr}`; | |
| break; | |
| case 'youtube': | |
| href = `https://www.youtube.com/@${handleStr}`; | |
| break; | |
| case 'facebook': | |
| href = `https://www.facebook.com/${handleStr}`; | |
| break; | |
| case 'medium': | |
| href = `https://medium.com/@${handleStr}`; | |
| break; | |
| case 'hashnode': | |
| href = `https://hashnode.com/@${handleStr}`; | |
| break; | |
| case 'stackoverflow': | |
| href = `https://stackoverflow.com/users/${handleStr}`; | |
| break; | |
| case 'bluesky': | |
| href = `https://bsky.app/profile/${handleStr}`; |
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import Link from '@docusaurus/Link'; | ||
| import Socials from '@theme/BlogPostAuthor/Socials'; | ||
| import styles from './styles.module.css'; | ||
|
|
||
| export default function BlogPostAuthor({author, className}) { | ||
| const {name, title, url, imageURL, socials} = author; | ||
| return ( | ||
| <div className={clsx('avatar margin-bottom--sm', className)}> | ||
| {imageURL && ( | ||
| <Link className="avatar__photo-link" href={url || imageURL}> | ||
| <img className={clsx('avatar__photo', styles.authorPhoto)} src={imageURL} alt={name} /> |
There was a problem hiding this comment.
These new theme components use single quotes, but the repo’s Prettier config has singleQuote: false. Running the formatter/format check will rewrite these and may fail CI if not formatted. Please update imports/strings to use double quotes (or run npm run format).
| import React from 'react'; | |
| import clsx from 'clsx'; | |
| import Link from '@docusaurus/Link'; | |
| import Socials from '@theme/BlogPostAuthor/Socials'; | |
| import styles from './styles.module.css'; | |
| export default function BlogPostAuthor({author, className}) { | |
| const {name, title, url, imageURL, socials} = author; | |
| return ( | |
| <div className={clsx('avatar margin-bottom--sm', className)}> | |
| {imageURL && ( | |
| <Link className="avatar__photo-link" href={url || imageURL}> | |
| <img className={clsx('avatar__photo', styles.authorPhoto)} src={imageURL} alt={name} /> | |
| import React from "react"; | |
| import clsx from "clsx"; | |
| import Link from "@docusaurus/Link"; | |
| import Socials from "@theme/BlogPostAuthor/Socials"; | |
| import styles from "./styles.module.css"; | |
| export default function BlogPostAuthor({author, className}) { | |
| const {name, title, url, imageURL, socials} = author; | |
| return ( | |
| <div className={clsx("avatar margin-bottom--sm", className)}> | |
| {imageURL && ( | |
| <Link className="avatar__photo-link" href={url || imageURL}> | |
| <img className={clsx("avatar__photo", styles.authorPhoto)} src={imageURL} alt={name} /> |
| import styles from './styles.module.css'; | ||
|
|
||
| export default function BlogPostAuthor({author, className}) { | ||
| const {name, title, url, imageURL, socials} = author; |
There was a problem hiding this comment.
socials is destructured from author but never used in this component, which triggers @typescript-eslint/no-unused-vars warnings. Remove it from the destructuring (or otherwise use it).
| const {name, title, url, imageURL, socials} = author; | |
| const {name, title, url, imageURL} = author; |
| { | ||
| label: "🗺️ Roadmap", | ||
| to: "https://github.com/orgs/recodehive/projects/9", | ||
| to: "/roadmap" |
There was a problem hiding this comment.
Formatting: this object entry is missing a trailing comma after to: "/roadmap". The repo runs Prettier with trailing commas, so npm run format:check is likely to fail until this is formatted.
| to: "/roadmap" | |
| to: "/roadmap", |
| FaMedium, | ||
| // FaHashnod÷e, | ||
| FaExternalLinkAlt, | ||
| FaRss, | ||
| } from 'react-icons/fa'; | ||
| import { FaXTwitter } from 'react-icons/fa6'; | ||
| import { SiBluesky, SiSubstack } from 'react-icons/si'; | ||
| import styles from './styles.module.css'; | ||
|
|
||
| const SocialIcons = { | ||
| github: FaGithub, | ||
| twitter: FaTwitter, | ||
| x: FaXTwitter, | ||
| linkedin: FaLinkedin, | ||
| instagram: FaInstagram, | ||
| youtube: FaYoutube, | ||
| facebook: FaFacebook, | ||
| stackoverflow: FaStackOverflow, | ||
| medium: FaMedium, | ||
| // hashnode: FaHashn÷ode, | ||
| newsletter: SiSubstack, |
There was a problem hiding this comment.
There are garbled characters in the commented-out Hashnode icon names (FaHashnod÷e / FaHashn÷ode). Even though they’re commented, they’re likely accidental and make the file harder to maintain—please clean these up (and re-add Hashnode support when needed).
| <img | ||
| src={author.id ? `https://github.com/${author.socials?.github || author.id}.png` : ""} | ||
| alt={author.name} | ||
| className="author-img" | ||
| onError={(e) => { | ||
| (e.target as HTMLImageElement).src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"; | ||
| }} | ||
| /> |
There was a problem hiding this comment.
These author avatar images are loaded from GitHub for every card. Consider adding loading="lazy" to reduce initial page load cost, and prefer avatars.githubusercontent.com/<user>?size=... (or a locally cached image) to avoid redirects and reduce external dependency/latency.
| import React from 'react'; | ||
| import Link from '@docusaurus/Link'; | ||
| import { | ||
| FaGithub, | ||
| FaTwitter, | ||
| FaLinkedin, | ||
| FaInstagram, | ||
| FaYoutube, | ||
| FaFacebook, | ||
| FaStackOverflow, | ||
| FaMedium, | ||
| // FaHashnod÷e, | ||
| FaExternalLinkAlt, | ||
| FaRss, | ||
| } from 'react-icons/fa'; | ||
| import { FaXTwitter } from 'react-icons/fa6'; | ||
| import { SiBluesky, SiSubstack } from 'react-icons/si'; | ||
| import styles from './styles.module.css'; |
There was a problem hiding this comment.
This file also uses single quotes while Prettier is configured for double quotes (singleQuote: false). Please reformat to match the repo formatting settings.
| return ( | ||
| <Link | ||
| key={platform} | ||
| href={href} | ||
| className={styles.socialLink} | ||
| title={platform.charAt(0).toUpperCase() + platform.slice(1)}> | ||
| <Icon /> | ||
| </Link> |
There was a problem hiding this comment.
The rendered social links are icon-only. Please add an aria-label per platform (and consider target/rel behavior if you intend these to open externally) so the links are usable with screen readers.
| import { roadmaps } from "../../data/roadmaps"; | ||
| import "./roadmap.css"; | ||
|
|
||
| const RoadmapCard = ({ roadmap, index }: { roadmap: any; index: number }) => { |
There was a problem hiding this comment.
roadmap is typed as any, which triggers the repo’s no-explicit-any lint warnings and loses type safety. Since src/data/roadmaps exports MyRoadmap, consider importing that type and using it here (e.g., roadmap: MyRoadmap).
| import { roadmaps } from "../../data/roadmaps"; | |
| import "./roadmap.css"; | |
| const RoadmapCard = ({ roadmap, index }: { roadmap: any; index: number }) => { | |
| import { roadmaps, type MyRoadmap } from "../../data/roadmaps"; | |
| import "./roadmap.css"; | |
| const RoadmapCard = ({ roadmap, index }: { roadmap: MyRoadmap; index: number }) => { |
| <div className="roadmap-card-stats"> | ||
| <span className="roadmap-stat">{roadmap.lessons.length} Lessons</span> | ||
| <a href={roadmap.lessons[0]?.link || "#"} className="roadmap-button" target="_blank" rel="noopener noreferrer"> | ||
| View Roadmap | ||
| </a> |
There was a problem hiding this comment.
If a roadmap ever has zero lessons, the current link falls back to "#" but still opens a new tab. Consider conditionally rendering/disabling the "View Roadmap" button when roadmap.lessons.length === 0, or link to a dedicated internal roadmap detail page instead of "#".
…ink data was already present in src/data/roadmaps folder fixing (#1253)
Description
Fixes # (issue)
Type of Change
Changes Made
Dependencies
Checklist
npm run buildand attached screenshot(s) in this PR.