Add a language section above first-timers only issue

[govindgoel]

Please describe the idea:

It would be great if we can add a section that fetches what are the languages used in that repository.It would be great as it will give a idea to newcomers on which project they should contribute ,and github-api-simple has api for this purpose also or we can use Github linguist.
Something like this

Please show us where to look

https://code.publiclab.org/ ...

What's your PublicLab.org username?

This can help us diagnose the issue:

Browser, version, and operating system

Many bugs are related to these -- please help us track it down and reproduce what you're seeing!

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[akanksha-v]

@govindgoel May I work upon this?
And also, do we need to show languages for every repo of publiclab or just community toolbox?

[govindgoel]

@akanksha-v Yeah you can work on this, it would be better if we go for languages of each repo if you have some other sort of design from which is discussed do share.

[YogeshSharma01]

Hi, @akanksha-v You working on this?

[akanksha-v]

@YogeshSharma01 you can work upon this

[YogeshSharma01]

@akanksha-v Ok cool!

[YogeshSharma01]

hi, @govindgoel we can fetch the name of the repo, the link, and the language for all the repository in the public lab by using GitHub API.
We can use that data to display the hyperlinked name and the corresponding language for that repo. All this data in this section can be displayed just like the FTO issues one right below it. The user will be able to go to that repo directly by clicking on the hyperlinked name of the repo.

[YogeshSharma01]

@govindgoel, @akanksha-v what do you think about it?

[govindgoel]

@YogeshSharma01 yeah it can be done, I was thinking of an approach where language can be specified somewhere else as it may look crowded at this place.

[YogeshSharma01]

hi, @govindgoel no I don't think it would be crowded like the repo name with the link of that particular repo will be set at the left corner in the language section and the language is used in that particular repo will be placed at the right corner and we can also use some special icons to represent the language used in the repo.

[YogeshSharma01]

Hi, @govindgoel what do you think? Do we need to add anything more?

Video-Language-Section.mov

[YogeshSharma01]

[YogeshSharma01]

I give a pull request, please review @govindgoel
link to pull request #422

[govindgoel]

It seems crowded and will lead to more scrolling, it would be great if we can find a way to show the language with respect to the repo name in the dropdown. Warm Regards, Govind Goel

[YogeshSharma01]

Hi, @govindgoel

Language-section.mov

What do you think is this fine? Now we don't need to scroll the Language-section and also it don't look crowedy now.

[YogeshSharma01]

Hi, @govindgoel please review the changes I have updated the changes.
link to pull request #422

[YogeshSharma01]

Hi, @govindgoel please review
link to pull requests #422, #420

[jywarren]

Hi, I'm sorry I missed this conversation! I really appreciate it. However, i wonder if we need to put this section at the bottom of the page and link down to it from the new navbar. Because we really want people to be able to see the first-timers-only issues as close to the top as possible!

Another possibility is that in the first-timers-only issues explanation text, as shown below the header in this screenshot, we could add the line "You can also sort by language" which then links down to the languages section. How does that sound?

[YogeshSharma01]

Hi, @jywarren that sounds awesome ok I'll place this section at the bottom of the page and add the line "You can also sort by language" which then links down to the languages section.
Thanks
warm regards
Yogesh Sharma

[YogeshSharma01]

@jywarren how does it look ...?

language.section.at.bottom.mov

[jywarren]

This looks great! One more request though -- can we add the text description "Hover over each project to see what languages it uses"? I might prefer a visible label though because this won't work in mobile, you know? But, tell me what you think! Could we add labels in this style, maybe?

I'm just worried about the visibility on mobile, you know? Thank you!!

[YogeshSharma01]

Hi @jywarren, Yes you're right it won't work on mobile we can add labels in this style like repo name at the left corner and the language used on the right side.

but it may look crowded at this place. which leads to more scrolling so what I think is we can increase the size of the repo-name at the left corner and the (language used) on the right side in a small size.

And like this ... we don't even need to use this hover and can show language on mobile too!

So, what do you think?

[govindgoel]

@jywarren I have another idea to implement this, we can think of displaying it in the dropdown list of repo's itself then there will be no need for a new section.

[YogeshSharma01]

@govindgoel like we can do that but I think it would look crowded like all the repo names within a single dropdown? Can you please show some mockup or sketch for a better understanding? That would be a big help.

[jywarren]

Hi @YogeshSharma01 i like your last design, let's give it a try! @govindgoel i appreciate your idea as well; one way we could do this is to consider having this selection show only the top 3-5, and have a button that says "See all" or "Expand to see all" which opens the full box. What do you think?

[YogeshSharma01]

Hi, @jywarren and @govindgoel sorry for the late reply actually I was busy with my exams Please review this.

Language-section.mov

and also review the PR #422