Twindle: Automation for the Teams Page

[Akshay2996]

I have created a Static Card using HTML & CSS for the Teams Page.

Simple view of the Card

---

When hovering over the card

Task to be done

• [x] Automate/Generate the card using JavaScript
• [x] Fetch the data from the Persons.js file to fill the card dynamically.

@ni3-kdm @JoelVinayKumar @vasu001 See if you can help me out in this? I am not getting enough time to work on this but will try to do this whenever I get the time.

Also see if any changes are required cause this is the card that will be generated using javascript. CSS Styling can be done at later stages too.

[UnevenCoder]

Could you send the html and css .. will try to do it in js , shouldn't be hard hopefully

[teckiegeek]

Nil @ javascript, but I really like this new design. Well done to everyone.

[UnevenCoder]

true btw color on hover should be darker blue will match the theme of the website nicely , what do you think ?

[tolgaerdonmez]

Hi @Akshay2996, from where you want to fetch the team, from collabs or organization members ?
I can help you with this.

[Akshay2996]

Could you send the html and css .. will try to do it in js , shouldn't be hard hopefully

Hi @UnevenCoder It is already uploaded in the twindle-web inside teams folder.

It is not hard to generate the card in javascript. It's just we have to call the function generateCard which contains the html. I am quite busy with other work but needed some help so that this can be wrapped up quickly.

I have already created a template in team_details.js file which contains the function.

PS: For the design aspect I have left it for later stages as we can modify it based on the requirement.

[Akshay2996]

Hi @Akshay2996, from where you want to fetch the team, from collabs or organization members ?
I can help you with this.

Hi @tolgaerdonmez there is a persons.js file inside *teams folder in twindle-web* which contains an Object from there we can fetch the data dynamically.

[proful]

@tolgaerdonmez you can fetch dynamic as well and get in touch with @johnjacobkenny he did some progress

[Akshay2996]

Hello everyone, I have created the Automated page for the Teams Page card. See the PR #640 or see the code inside the team_details folder to check if it is working correctly & do review & make some changes in it as you feel like it.

[Akshay2996]

I have created a Static Card using HTML & CSS for the Teams Page.

Simple view of the Card

When hovering over the card

Task to be done

• [x] Automate/Generate the card using JavaScript
• [ ] Fetch the data from the Persons.js file to fill the card dynamically.

@ni3-kdm @JoelVinayKumar @vasu001 See if you can help me out in this? I am not getting enough time to work on this but will try to do this whenever I get the time.

Also see if any changes are required cause this is the card that will be generated using javascript. CSS Styling can be done at later stages too.

One of the two tasks is done.

[johnjacobkenny]

@Akshay2996 take a look at https://javascript.info/template-element

[tolgaerdonmez]

@Akshay2996 we could fetch the team members from github api ?
We could then use either contributers or only the ones in the twindle-co organization ?

[proful]

@tolgaerdonmez go ahead and raise a PR.

We can update the person file with your script via cron task or github action daily or something like that

[Akshay2996]

@Akshay2996 we could fetch the team members from github api ?
We could then use either contributers or only the ones in the twindle-co organization ?

Yes @tolgaerdonmez we can do it that way too. I think that will be a great approach.

[teckiegeek]

Bravo! @Akshay2996

[Akshay2996]

@tolgaerdonmez I am looking into Github Api & have some questions

One Problem:

• Card I created has Url link for linkedin & other Website & a title.
• Using Github Api will restrict us with the github profile page of the user that we can use to fetch data if it is possible.

See this if we can have a workaround for this problem & also right now I'm unable to use Github Api.

• Getting the user details can be done like this -> Github User twindle-co
• Getting the users Repos can be done like this -> Github User twindle-co Repos

PS: I think this will be hard from the way I see it but We have to thorougly research Github Api so that we can fully utilize it's potential

[joelvinaykumar]

Guess restricting to github profile is fine. People want to follow other developers, they will find the profile and they can find further info in their profiles

[tolgaerdonmez]

Guess restricting to github profile is fine. People want to follow other developers, they will find the profile and they can find further info in their profiles

I believe so

[tolgaerdonmez]

@Akshay2996 what problem did you have while using github api, I could handle the api requests if you want. Let's discuss about it, I'll ping you on discord today, when I'm available.

[Akshay2996]

@Akshay2996 what problem did you have while using github api, I could handle the api requests if you want. Let's discuss about it, I'll ping you on discord today, when I'm available.

Me & @UnevenCoder are working on it Tolga. We have figure something out. Kudos to @UnevenCoder for this.

[UnevenCoder]

I got rate limited ... can't say the reason 😆

think this many parameters are enough :

full name
location
github link
company
blog
bio
twitter_username
Avatar of course too

the only thing that's affecting right now is load speed but I have decreased it but will still try to make a more efficient solution

the coding part is still having some errors after I can get it to run will post it here : )

[johnjacobkenny]

Check out this https://blog.covid19india.org/2020/09/04/architecture/

[Akshay2996]

I have created a Static Card using HTML & CSS for the Teams Page.

Simple view of the Card

When hovering over the card

Task to be done

• [x] Automate/Generate the card using JavaScript
• [x] Fetch the data from the Persons.js file to fill the card dynamically.

@ni3-kdm @JoelVinayKumar @vasu001 See if you can help me out in this? I am not getting enough time to work on this but will try to do this whenever I get the time.

Also see if any changes are required cause this is the card that will be generated using javascript. CSS Styling can be done at later stages too.

Second Task is achieved by @UnevenCoder Now the code refinement is needed & see if it is working properly for all the cases.

Kudos👏 to Ameen

[tolgaerdonmez]

Happy to see this😊

[johnjacobkenny]

Good job everyone!

[UnevenCoder]

Codes more human friendly now
https://github.com/twindle-co/twindle/pull/750

Would be great if someone could review it .