funny and engaging way to compare github profile using meme #108
Conversation
|
@Agastya18 is attempting to deploy a commit to the lamsta Team on Vercel. A member of the Team first needs to authorize it. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Agastya18, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request introduces a major new feature that allows users to compare GitHub profiles in an engaging way, complete with meme generation based on contribution differences. Alongside this, the backend has been upgraded with AI capabilities to automatically generate SEO-friendly content for profiles. Significant effort has also gone into improving the project's documentation, including a comprehensive contributing guide and updated environment setup instructions, making it much easier for new developers to get involved and understand the project structure. Various frontend components have been refined to support these new functionalities and improve overall user experience.
Highlights
- New GitHub Profile Comparison Feature: A new 'GitHub Profile Comparison' feature has been implemented, allowing users to compare their GitHub profiles with others and generate fun, personalized memes based on their contribution differences. This feature includes interactive charts visualizing contributions over time.
- AI-Powered SEO Content Generation: The backend now integrates AI capabilities to automatically generate SEO-optimized titles, descriptions, and keywords for user profiles, enhancing discoverability and professional presentation.
- Comprehensive Contributing Guide Revamp: The
CONTRIBUTING.mdguide has been significantly expanded and updated, providing clear, detailed instructions for setting up development environments, contributing to both frontend (Next.js) and backend (FastAPI), and following best practices for code style, testing, and pull request submissions. This greatly improves the onboarding experience for new contributors. - Enhanced Documentation and Environment Setup: The project's documentation, including the
README.md, has been updated with new environment setup instructions, updated links, and clearer guidance for users and potential contributors.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces an engaging new feature for comparing GitHub profiles with memes, which is a fun addition. The backend is updated to generate SEO content, and the frontend adds the new comparison page along with many new components. The documentation, especially CONTRIBUTING.md, has been significantly improved, which is great for new contributors.
My review focuses on improving code quality, robustness, and consistency. I've identified several areas for improvement, including fixing incorrect links in the documentation, improving error handling in the API functions, correcting types in Next.js metadata generation, and addressing some code style and redundancy issues in both the backend and frontend. Overall, this is a substantial and valuable contribution to the project.
| 1. **Clone the Repository:** | ||
| ```bash | ||
| git clone https://github.com/devb-io/devb.io.git | ||
| git clone https://github.com/sunithvs/devb.io.git |
There was a problem hiding this comment.
The repository URLs in this file point to a personal fork (sunithvs/devb.io) instead of the main project repository (devb-io/devb.io). This can be confusing for users and contributors. Please update this link to point to the main repository. This also applies to the links on lines 109 and 113.
| git clone https://github.com/sunithvs/devb.io.git | |
| git clone https://github.com/devb-io/devb.io.git |
| export const getGithubInfo = async (username: string):Promise<GitHubUser | null> => { | ||
| try { | ||
| const response = await fetch(`https://api.github.com/users/${username}`); | ||
| if (!response.ok) throw new Error("Network response was not ok"); | ||
| const data = await response.json(); | ||
| return data; | ||
| } catch (error) { | ||
| console.error(`Error fetching GitHub info for ${username}:`, error); | ||
| return null; | ||
| } |
There was a problem hiding this comment.
Similar to getMemeProfileData, the error handling in getGithubInfo should be improved. Returning null on error hides the issue from the end-user. Re-throwing the error allows the calling component to handle it gracefully, for example by showing an error message.
| title = result["title"] | ||
| description = result["description"] | ||
| keywords = result["keywords"] |
There was a problem hiding this comment.
Accessing dictionary keys directly with result["key"] can lead to a KeyError if the AI model's response doesn't include one of the expected keys (title, description, keywords). It's safer to use the .get() method, which returns None if the key is not found. The subsequent check for falsy values will then handle cases where keys are missing.
| title = result["title"] | |
| description = result["description"] | |
| keywords = result["keywords"] | |
| title = result.get("title") | |
| description = result.get("description") | |
| keywords = result.get("keywords") |
| params, | ||
| }: { | ||
| params: Promise<{ username: string }>; | ||
| }): Promise<Metadata> { | ||
| const { username } = await params; |
There was a problem hiding this comment.
The type definition for params in generateMetadata is incorrect. The params object itself is not a promise, and this will likely cause a build failure or runtime error. The await on params should also be removed.
export async function generateMetadata({
params,
}: {
params: { username: string };
}): Promise<Metadata> {
const { username } = params;| export const getMemeProfileData = async (username: string):Promise<ContributionsData | null> => { | ||
| try { | ||
| const response = await fetch(`https://github-contributions-api.jogruber.de/v4/${username}`); | ||
| if (!response.ok) throw new Error("Network response was not ok"); | ||
| const data = await response.json(); | ||
| return data; | ||
| } catch (error) { | ||
| console.error(`Error fetching profile data for ${username}:`, error); | ||
| return null; | ||
| } |
There was a problem hiding this comment.
The current error handling in getMemeProfileData catches errors, logs them to the console, and returns null. This hides the error from the user. It would be more robust to re-throw the error or a custom error, allowing the calling component to catch it and display an appropriate error message in the UI.
| return ( | ||
| <html lang="en"> | ||
| <head> | ||
| <script type="text/javascript"></script> |
There was a problem hiding this comment.
This empty <script> tag is unnecessary and can be removed to clean up the code.
| If you have any questions, feel free to open an issue or reach out via [[email protected]](mailto:[email protected]). | ||
| If you have any questions, feel free to: | ||
| - Open an issue on GitHub | ||
| - Join our [Discord community](https://discord.gg/W364NEY6) |
There was a problem hiding this comment.
The Discord community link seems to be outdated. The README.md was updated to use https://discord.gg/se8fhSWSw9, but this file still points to the old link. Please update it for consistency.
| - Join our [Discord community](https://discord.gg/W364NEY6) | |
| - Join our [Discord community](https://discord.gg/se8fhSWSw9) |
| <svg | ||
| width="25" | ||
| height="24" | ||
| viewBox="0 0 25 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M12.7692 3L22 12.2308L12.7692 21.4615M20.7179 12.2308L2 12.2308" | ||
| stroke="black" | ||
| stroke-width="3.07692" | ||
| stroke-miterlimit="10" | ||
| stroke-linecap="square" | ||
| /> | ||
| </svg>; | ||
|
|
||
| import React from "react"; | ||
|
|
||
| export function ButtonArrow() { | ||
| return ( | ||
| <svg | ||
| width="25" | ||
| height="24" | ||
| viewBox="0 0 25 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M12.7692 3L22 12.2308L12.7692 21.4615M20.7179 12.2308L2 12.2308" | ||
| stroke="black" | ||
| strokeWidth="3.07692" | ||
| strokeMiterlimit="10" | ||
| strokeLinecap="square" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
There was a problem hiding this comment.
This .jsx file seems redundant as www/public/assets/buttonArrow.tsx already exists and is used. Additionally, this file contains a syntax error (a semicolon after the closing </svg> tag). Please remove this file to avoid confusion and code duplication.
| import topContender from './compare meme collection.png' | ||
|
|
||
| export { | ||
| topContender, | ||
| } No newline at end of file |
There was a problem hiding this comment.
This JavaScript file seems redundant because an equivalent TypeScript file (index.ts) exists in the same directory. To maintain a consistent codebase, please remove this .js file.
| import firstMeme from "./first.png" | ||
| import secondMeme from "./second.png" | ||
| import thirdMeme from "./third.png" | ||
| import fourthMeme from "./fourth.png" | ||
| import fifthMeme from "./fifth.png" | ||
| import sixthMeme from "./sixth.png" | ||
| import seventhMeme from "./seventh.png" | ||
| import eighthMeme from "./eighth.png" | ||
| import ninthMeme from "./ninth.png" | ||
| import tenth from "./tenth.png" | ||
|
|
||
| export { | ||
| firstMeme, | ||
| secondMeme, | ||
| thirdMeme, | ||
| fourthMeme, | ||
| fifthMeme, | ||
| sixthMeme, | ||
| seventhMeme, | ||
| eighthMeme, | ||
| ninthMeme, | ||
| tenth | ||
| } No newline at end of file |
There was a problem hiding this comment.
This JavaScript file is redundant as there is an equivalent TypeScript file (index.ts) in the same directory. Please remove this .js file to avoid code duplication and maintain consistency.
1 participant
Summary
add a feature where user can compare their profile through username
Description
Motivation and Context
How has this been tested?
Screenshots (if appropriate):
Types of changes
Checklist: