[wp-meta] [Making WordPress.org] #6682: Missing social icons on profile pages (Genericons)

Tue Jan 17 19:23:34 UTC 2023

#6682: Missing social icons on profile pages (Genericons)
--------------------------+--------------------
 Reporter:  overengineer  |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:
Component:  Profiles      |   Keywords:
--------------------------+--------------------
 I added my Stack Overflow account to my Gravatar profile, but its icon is
 not showing up on my wordpress.org profile:
 https://profiles.wordpress.org/overengineer

 It seems that the icons next to "Find me on:" use the
 [https://github.com/Automattic/Genericons Genericons] vector icons, which
 don't include a Stack Overflow icon. A recent ticket (#6641) mentioned the
 same issue with the Mastodon icon, and it was fixed by including an
 additional CSS rule for that specific icon (see
 https://profiles.wordpress.org/wp-
 content/themes/profiles.wordpress.org/style.css?ver=1673791875):

 {{{#!css
 #user-social-media-accounts li a .genericon-mastodon {
   background-image: url("data:image/svg+xml,%3Csvg
 xmlns='http://www.w3.org/2000/svg' width='74' height='79' viewBox='0 0 74
 79' fill='%2321759B'%3E%3Cpath d='M73.7014 17.4323C72.5616 9.05152 65.1774
 2.4469 56.424 1.1671C54.9472 0.950843 49.3518 0.163818 36.3901
 0.163818H36.2933C23.3281 0.163818 20.5465 0.950843 19.0697 1.1671C10.56
 2.41145 2.78877 8.34604 0.903306 16.826C-0.00357854 21.0022 -0.100361
 25.6322 0.068112 29.8793C0.308275 35.9699 0.354874 42.0498 0.91406
 48.1156C1.30064 52.1448 1.97502 56.1419 2.93215 60.0769C4.72441 67.3445
 11.9795 73.3925 19.0876 75.86C26.6979 78.4332 34.8821 78.8603 42.724
 77.0937C43.5866 76.8952 44.4398 76.6647 45.2833 76.4024C47.1867 75.8033
 49.4199 75.1332 51.0616 73.9562C51.0841 73.9397 51.1026 73.9184 51.1156
 73.8938C51.1286 73.8693 51.1359 73.8421 51.1368 73.8144V67.9366C51.1364
 67.9107 51.1302 67.8852 51.1186 67.862C51.1069 67.8388 51.0902 67.8184
 51.0695 67.8025C51.0489 67.7865 51.0249 67.7753 50.9994 67.7696C50.9738
 67.764 50.9473 67.7641 50.9218 67.7699C45.8976 68.9569 40.7491 69.5519
 35.5836 69.5425C26.694 69.5425 24.3031 65.3699 23.6184 63.6327C23.0681
 62.1314 22.7186 60.5654 22.5789 58.9744C22.5775 58.9477 22.5825 58.921
 22.5934 58.8965C22.6043 58.8721 22.621 58.8505 22.6419 58.8336C22.6629
 58.8167 22.6876 58.8049 22.714 58.7992C22.7404 58.7934 22.7678 58.794
 22.794 58.8007C27.7345 59.9796 32.799 60.5746 37.8813 60.5733C39.1036
 60.5733 40.3223 60.5733 41.5447 60.5414C46.6562 60.3996 52.0437 60.1408
 57.0728 59.1694C57.1983 59.1446 57.3237 59.1233 57.4313 59.0914C65.3638
 57.5847 72.9128 52.8555 73.6799 40.8799C73.7086 40.4084 73.7803 35.9415
 73.7803 35.4523C73.7839 33.7896 74.3216 23.6576 73.7014 17.4323ZM61.4925
 47.3144H53.1514V27.107C53.1514 22.8528 51.3591 20.6832 47.7136
 20.6832C43.7061 20.6832 41.6988 23.2499 41.6988
 28.3194V39.3803H33.4078V28.3194C33.4078 23.2499 31.3969 20.6832 27.3894
 20.6832C23.7654 20.6832 21.9552 22.8528 21.9516
 27.107V47.3144H13.6176V26.4937C13.6176 22.2395 14.7157 18.8598 16.9118
 16.3545C19.1772 13.8552 22.1488 12.5719 25.8373 12.5719C30.1064 12.5719
 33.3325 14.1955 35.4832 17.4394L37.5587 20.8853L39.6377 17.4394C41.7884
 14.1955 45.0145 12.5719 49.2765 12.5719C52.9614 12.5719 55.9329 13.8552
 58.2055 16.3545C60.4017 18.8574 61.4997 22.2371 61.4997 26.4937L61.4925
 47.3144Z' fill='inherit'/%3E%3C/svg%3E");
   background-size: 16px 16px;
 }
 }}}

 Unfortunately, Genericons seems to be missing quite a few icons.
 Gravatar's Verified Services include:

 - Foursquare (**not included** in Genericons)
 - GitHub (included in Genericons)
 - Mastodon (**not included** in Genericons, wordpress.org handles that)
 - Stack Overflow (**not included** in Genericons)
 - TikTok (**not included** in Genericons)
 - TripIt (**not included** in Genericons)
 - Tumblr (included in Genericons)
 - Twitter (included in Genericons)
 - Vimeo (included in Genericons)
 - WordPress (included in Genericons)

 So, we still need to handle the following:

 - Foursquare
 - Stack Overflow
 - TikTok
 - TripIt

 I was able to confirm that Stack Overflow and TikTok icons don't show up,
 so I assume it's the same for Foursquare and TripIt as well.

 Genericons is an old project and doesn't seem to be maintained (see
 https://github.com/Automattic/Genericons/issues/106). The referenced issue
 suggests [https://github.com/Automattic/genericons-neue Genericons Neue]
 and [https://github.com/Automattic/social-logos Social Logos] as possible
 replacements.

 - Genericons Neue doesn't include social icons
 - Social Logos ''does'' include social icons, but it's ''not'' up-to-date
 either

 Social Logos includes icons for Foursquare and TikTok, but doesn't include
 icons for Mastodon, Stack Overflow etc.

 There are open issues ''and'' PRs for those icons, but they haven't been
 merged (some PRs are open since 2018 with virtually no updates).

 For example,

 - Mastodon [https://github.com/Automattic/social-logos/issues/67 issue]
 [https://github.com/Automattic/social-logos/pull/70 PR]
 - Stack Overflow [https://github.com/Automattic/social-logos/issues/54
 issue] [https://github.com/Automattic/social-logos/pull/89 PR]

 So, IMHO, it's not a viable replacement.

 Maybe the missing icons should be added like the Mastodon icon was in
 #6641?

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/6682>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org