Bug: Display Social Icons Only with Valid Social URLs

[s2sharpit]

What happened?

Issue Description:

Currently, our website displays all social icons on the page, regardless of whether they have valid social URLs associated with them or not. Clicking on any of these icons leads to the same page in a new tab, which can be confusing for users and leads to a suboptimal user experience.

Proposed Improvement:

We should modify the social icon display behavior so that only those icons with valid social URLs are shown to the users. This way, visitors can easily find and access our official social media profiles without any confusion. Icons without valid URLs should be hidden or disabled to avoid misleading clicks.

Expected Behavior:

1. Display only social icons with valid URLs associated with them.
2. Icons without valid URLs should not be shown or should appear as inactive/disabled.

Benefits:

1. Improved user experience as users can access official social media profiles easily.
2. Reduced confusion and frustration by removing non-functional social icons.
3. A cleaner and more intuitive interface for users.

Add screenshots

20230806_200027.mp4

What browsers are you seeing the problem on?

No response

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I agree to follow this project's Code of Conduct
• I'm a GSSoC'23 contributor
• I want to work on this issue

[github-actions]

To reduce notifications, issues are locked. Your issue will be unlock when we will add label as 🏁 status: ready for dev. Check out the contributing guide for more information. Also, if you're in GSSoC'23 please check the discussion

[priyankarpal]

yeah we need to do this. Also, I was thinking we should collect only 3 social accounts (GitHub, LinkedIn, Twitter) for now

• we need to remove existing extra social accounts code
• need to change the documentation
• we are collecting github_username so I think we should avoid to collect "gitHub": "https://github.com/Sahilll15"

after we can use GitHub API to fetch all details (repo tech stacks, names, social accounts(if exists))

What do you think? @s2sharpit

[s2sharpit]

Hey @priyankarpal,

Sounds like a good plan! I agree with collecting only 3 social accounts now (GitHub, LinkedIn, Twitter). However, we'll still need to collect the LinkedIn account since we won't be able to fetch it through an API.

Regarding fetching the tech stack, we have two approaches. The first one is to fetch languages using the GitHub API, but it has a limitation. It will only show individual languages like JavaScript or TypeScript, not the complete tech stack. For instance, if someone has a React project, it will only display the language used, not the entire tech stack.

The second approach is to fetch topics from the GitHub API. However, this approach relies on users adding the tech stack information themselves to their repositories. I think this approach will be better.

Let's carefully consider these options and decide on the best way to handle the tech stack section. Your thoughts on this, @priyankarpal?

Example for Tech Stack Section:

This below data is of this repo: https://github.com/s2sharpit/s2sharpit
Screenshots:

Language	Topics
Repository Right Section Screenshots	Repository Right Section Screenshots

[priyankarpal]

so @s2sharpit we need to collect social accounts (github, linkedin & twitter) manually.
Also, GitHub API has limit we can't show everything & call. Most of the users haven't added topics even I haven't added topics to my others repo.

[s2sharpit]

For github account, as you said, we are collecting the username, therefore I think we can manage it. But for twitter & linkedin. We have to collect it.
And for tech stack. If we collect it, then also the user have to add it to form or in 'projects.json'. And if we fetch it from topics through Github API. Then also, the user have to add. By the way, it's upon you which approach you want in the project. And then, I will start work on it and also update the documentation as for that.

[priyankarpal]

for now we should skip GitHub API part. & we need to work on Social accounts issue.

For Documentation you can create separate issue

[s2sharpit]

for now we should skip GitHub API part. & we need to work on Social accounts issue.

For Documentation you can create separate issue

Sure @priyankarpal, BTW can you check this issue: #1983

[priyankarpal]

for now we should skip GitHub API part. & we need to work on Social accounts issue.
For Documentation you can create separate issue

Sure @priyankarpal, BTW can you check this issue: #1983

yeah sure after solving this issue you can work