Add front-end support for non github hosted resource types

[jomsie]

Summary

Right now we only really support github hosted resource types on the front end. There's been a fix proposed for the backend so it doesn't give up and quit.

Are you interested in implementing/fixing it yourself?

Yep!

What would make it better?

It should preferably not show the github icon / stars on a resource type not hosted on github. Down the road we can add support for other more popular hosts, but that'll be something to deal with when it happens!

[jamieklassen]

can there be a default icon? i like the idea of being able to scan the cards and have a little image to quickly tell if it's going to have github-specific features. will it have stars or a README or will it just be one of those austere, unornamented sourceforge pages? As you suggest, there's probably room for some gitlab-specific stuff down the line.

[jomsie]

can there be a default icon? i like the idea of being able to scan the cards and have a little image to quickly tell if it's going to have github-specific features. will it have stars or a README or will it just be one of those austere, unornamented sourceforge pages? As you suggest, there's probably room for some gitlab-specific stuff down the line.

good idea, currently i've just made it .. no icon and no stars which can be kinda jarring and inconsistent when scrolling...

(will need some space fixes)

i'm not quite sure who is the designer on RTW (resource types website) right now, @YoussB do you know?

[jomsie]

think there should be an icon? @YoussB

[jomsie]

@matthewpereira how do you feel about the difference between github and non github resource types? should the non-github-resource-type have something more than just name / desc?

[matthewpereira]

Having specific icons to let people know where they'll be taken when they click on a resource type would be nice.

For now while we're linking directly to Github repos (and soon other repos as well) I like the idea of there at least being some icon there for consistency's sake, and to help signify that you can click to navigate to somewhere else (maybe it could be a generic chain-link-in-a-circle for now?), with the goal of expanding into specific Gitlab/Bitbucket/etc icons as the app gets more sophisticated and can better detect and integrate those other repository sources.

WDYT? I could prep an SVG at the right scale or native pixel dimensions for you if that helps. My first thought is that without some element in the bottom left the tile looks incomplete compared to the rest of them.

[jomsie]

i dig the link icon, and i agree it does look empty without something there!

right now it'll just be github or other, and when we get another hosting solution, we can revisit this.

that icon would be great :)

[matthewpereira]

Here's how it looks (normal/hover) with the attached SVG. Let me know what you think - at that 16px icon size the link icon is a bit difficult for me to read - WDYT?

<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M8 16c4.4183 0 8-3.5817 8-8 0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 4.4183 3.58172 8 8 8zm4.2433-12.2429c.781.78105.781 2.04738 0 2.82843l-1.7678 1.76776c-.78104.78105-2.04964.78332-2.83069.00227-.34981-.34981-.89431-.38628-1.28471-.10941.1424.29425.33569.57007.57987.81425.24419.24419.52.43748.81425.57987 1.02061.49393 2.26308.37553 3.17738-.35519.0868-.06937.1706-.14427.251-.22468l1.7678-1.76777c.0732-.07322.1418-.14929.2059-.22784.9611-1.17832.8924-2.91645-.2059-4.0148-1.1716-1.17157-3.07109-1.17157-4.24266 0L6.93998 4.81776c-.08042.08041-.15531.16426-.22469.25106.42211-.02337.84721.01984 1.25824.1296L9.41485 3.7571c.78105-.78105 2.04735-.78105 2.82845 0zm-8.48583 8.4858c-.78105-.781-.78105-2.0474 0-2.82843l1.76777-1.76776c.78105-.78105 2.04964-.78332 2.83069-.00227.34981.34981.89431.38628 1.28472.10941-.1424-.29425-.33569-.57007-.57988-.81425-.24418-.24419-.52-.43748-.81424-.57987-1.02062-.49391-2.26309-.37551-3.17734.35519-.0868.06937-.17065.14427-.25106.22468L3.05037 8.70737c-.07323.07322-.14187.14929-.20594.22784-.96106 1.17829-.89241 2.91649.20594 4.01479 1.17157 1.1716 3.07106 1.1716 4.24264 0l1.76776-1.7678c.08041-.0804.15531-.1642.22468-.251-.4221.0233-.84721-.0199-1.25823-.1296L6.5859 12.2429c-.78105.781-2.04738.781-2.82843 0z" fill="#000"/>
</svg>

[jomsie]

it does look a bit difficult to read, i'll admit it! i think having loads of white in the github icon makes it much easier, the chain lines are so thin... i like where this is headed though!

(side note, i think i screwed up the left align on the description, but that's a separate topic 👀 )

[jomsie]

so i just used the image you posted, and it looks pretty good!

[matthewpereira]

I'll try to find some time to experiment with the icon to see if I can make it a little more balanced - thicker lines, less dark background relative to the lighter github icon. 👍

Looks good so far, though!

[matthewpereira]

Update: here's a fatter link icon. It's still not the same as the GH icon, but maybe it'll be more readable.

SVG:

<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 8c0 4.4183-3.5817 8-8 8-4.41828 0-8-3.5817-8-8 0-4.41828 3.58172-8 8-8 4.4183 0 8 3.58172 8 8z" fill="#000"/>
  <path d="M3.05037 12.9499c-1.17149-1.1715-1.17157-3.07106 0-4.24264l2.12132-2.12132c1.17158-1.17157 3.07115-1.17149 4.24264 0 .12102.12102.22965.24993.32565.38491l-.72695.72696c-.17629.17628-.47884.12257-.65513-.05371-.58626-.58626-1.53676-.58629-2.123-.00004L4.11185 9.7671c-.58624.5862-.58622 1.5367.00005 2.123.58626.5863 1.53676.5863 2.123.0001l.91261-.9127c.57553.2435 1.19639.346 1.81019.3077l-1.66469 1.6647c-1.17157 1.1716-3.07115 1.1715-4.24264 0z" fill="#fff"/>
  <path d="M12.9504 3.05004c1.1715 1.17149 1.1716 3.07106 0 4.24264L10.8291 9.414c-1.1716 1.1716-3.07117 1.1715-4.24266 0-.12106-.12106-.22961-.2499-.32565-.38491l.72696-.72696c.1763-.1763.47883-.12258.65512.05371.58626.58626 1.53676.58629 2.123.00004l2.12303-2.12304c.5863-.58624.5862-1.53674 0-2.12301-.5863-.58626-1.5368-.58628-2.12303-.00004l-.91259.9126c-.5755-.24338-1.19642-.34594-1.8102-.30767l1.66468-1.66468c1.17158-1.17158 3.07114-1.17149 4.24264 0z" fill="#fff"/>
  <path d="M6.58175 9.406c-1.17149-1.17149-1.17157-3.07106 0-4.24263l2.12132-2.12132c1.17158-1.17158 3.07113-1.1715 4.24263 0 .121.12101.2297.24993.3257.3849l-.727.72696c-.1763.17628-.4788.12258-.6551-.05371-.5863-.58626-1.5368-.58628-2.12302-.00004L7.64323 6.22321c-.58624.58624-.58622 1.53673.00005 2.123.58626.58626 1.53676.58628 2.123.00004l.91262-.9126c.5755.24343 1.1964.34591 1.8102.30767l-1.6647 1.66469C9.65282 10.5776 7.75325 10.5775 6.58175 9.406z" fill="#fff" fill-opacity=".5"/>
  <path d="M9.41799 6.58215c1.17151 1.17149 1.17161 3.07107 0 4.24265l-2.12132 2.1213c-1.17158 1.1716-3.07115 1.1715-4.24264 0-.12107-.121-.22962-.2499-.32566-.3849l.72697-.727c.17629-.1762.47882-.1225.65512.0538.58626.5862 1.53676.5862 2.123 0l2.12305-2.12305c.58624-.58624.58622-1.53674-.00005-2.123-.58626-.58626-1.53676-.58628-2.123-.00004l-.9126.9126c-.5755-.24338-1.19642-.34594-1.8102-.30767l1.66469-1.66469c1.17157-1.17157 3.07115-1.17149 4.24264 0z" fill="#fff" fill-opacity=".5"/>
</svg>

PNG:

[jomsie]

That is smooooth like butter. I'll try it out tomorrow! Thanks @matthewpereira

[jomsie]

i think this is a case where anything different than the github logo is kinda weird at first, but it makes sense and will be completely normal after just going for it

psychology!