fix accessibility problems with external ID badges on profiles

[paregorios]

aka "We don't need no stinkin' badges."

In a time before now, we decided to add an "External URIs" multi-line field to our Profile content type. This was an is a good thing.

We also decided that we should be fancy and render certain of these links using cute little icons in the base view:

As implemented, this cuteness is (a) not conformant to WCAG accessibility guidelines, and (b) is opaque to many of our site users and therefore is ignored.

To address both of these issues I propose that we be less fancy. Let's rip out all the icon stuff and instead use plain old HTML links as follows:

1. Keep the <ul class="ProfileLinks"> wrapper that we currently have for these links.
2. Instead of creating a <li><a class="..."><i class="..."> hierarchy for each link in order to hang the icon magic on, let's just make plain <li><a href=""> links for each.

Also:

• Get rid of support for plus.google.com entirely
• Add support for hcommons.org (URIs look like https://hcommons.org/members/paregorios/)

For the text content of the links, please use the following:

• facebook.com: "Facebook: {last component of URI path}
• academia.edu: "Academia.edu: {last component of URI path}
• github.com: "GitHub: {last component of URI path}
• linkedin.com: "LinkedIn: {last component of URI path}
• orcid.org: "OrcID: {last component of URI path}
• twitter.com: "Twitter: {last component of URI path}
• viaf.org: "VIAF: {last component of URI path}
• zotero.org: "Zotero: {last component of URI path}
• hcommons.org: "Humanities Commons: {last component of URI path}

So, the HTML in my profile would change from its current state to something like this:

<ul class="ProfileLinks">
    <li>
        <a href="http://orcid.org/0000-0002-4114-6677">
            OrcID: 0000-0002-4114-6677
        </a>
    </li>
    <li>
        <a href="http://viaf.org/viaf/309842724">
            VIAF: 309842724
        </a>
    </li>
    <li>
        <a href="https://github.com/paregorios">
            GitHub: paregorios
        </a>
    </li>
    <li>
        <a href="https://www.zotero.org/paregorios">
            Zotero: paregorios
        </a>
    </li>
    <li>
        <a href="https://en.wikipedia.org/wiki/User:Paregorios">
            Wikipedia: Paregorios
        </a>
    </li>
</ul>

For style:

Let's render the list without any bullet icons, single-line spacing, no indent, and other CSS style equivalent to our "discreet" style in the WYSIWYG editor for pages etc. So, something like this, but with a little closer line spacing:

[alecpm]

I've implemented a link list using the regexps you shared:

https://isaw.nyu.edu/people/staff/tom-elliott

It supports user id detection for GitHub, Humanities Commons, Twitter, VIAF, Wikipedia (user or page), and Zotero. For Facebook, Academia.edu, Doodle, LinkedIn, and ORCID it just uses the person's full name for the link. For unrecognized likes it just displays the link, but you can add a custom title by using a | separator like https://myspecialdomain.com|My Fancy Site.

Perhaps this could use some custom styling, right now they just look like all other links on the site.

[paregorios]

For style, how about:

1. In the profile view template, add "discreet" to <ul class="ProfileLinks">. Modify/add CSS selectors as necessary to make sure that "discreet" can be effectively applied to that element+attribute combination effectively.
2. Modify CSS definition for "discreet" (globally across the entire site), as follows:
   • color: #666 --> color: #333
   • font-size: 85% --> font-size: 95%

[paregorios]

Also, we need to do one minor bit of cleanup in the associated template that produces the FOAF serialization of the profile pages. We need to make sure that any postfixed "|blah blah blah" gets removed from the URI before dropping into the rdf:resource attribute on foaf:primaryTopicOf. For example, instead of:

<foaf:primaryTopicOf rdf:resource="https://paregorios.org|Personal website: paregorios.org"/>

we want to see:

<foaf:primaryTopicOf rdf:resource="https://paregorios.org"/>

[alecpm]

The styling and FOAF serialization should be fixed now.