Allow to users to choose language during config

[CryogenicPlanet]

• Enables users to choose from all the languages on their repo to highlight whichever language they want.

• Enables custom language choices to display logos like react also

From reddit

[Siddhant-K-code]

Options to add: Multiple languages or Single language limit only?

[CryogenicPlanet]

@Siddhant-K-code if you could draw up a figma with a good design for multiple languages we might be able to implement that

[wei]

@akshgpt7 was thinking about tackling it. Please share your proposal here so we can discuss and be in alignment before you are too far into it~

[akshgpt7]

@wei I went through the code and realized I need to read up a bit more about GraphQL to get myself up to speed.
As per my current observation, the API response does return a list of languages used in the repo, out of which the first one is chosen. My thought as of now is to use that list itself and change the frontend component to be a dropdown with all the languages used in the repo.
Please correct me if I'm wrong or you have a different implementation in mind! I'll read up on graphql and present a more detailed proposal of implementation before I begin working on this.

[CryogenicPlanet]

@akshgpt7 The only graphql you need to change is this, you will get an array of 10 languages, and it is about designing a UI element to switch languages.

 languages(orderBy: {field: SIZE, direction: DESC}, first: 10) {

Change the file here:

socialify/common/relay/repoQuery.ts

Lines 14 to 20 in b71d5dd

	languages(first: 1, orderBy: { field: SIZE, direction: DESC }) {
	totalCount
	nodes {
	name
	color
	}
	}

You can mess with graphql directly here: https://developer.github.com/v4/explorer/

[wei]

We also need to check the language returned against the list of languages we have devicons for and hide the ones that are not supported. We should use devicons naming in the url query string and in the dropdown so we can do

Enables custom language choices to display logos like react also

too.

[wei]

Now that we are using simple-icons, it is very easy to add new languages.

We can start with the most popular languages by github/linguist and add in some popular frameworks like React, Svelte, etc in https://survey.stackoverflow.co/2022