Reader definition

apiVersion: v1
kind: reader

metadata:
  id: github/profile
  version: 0.0.1
  name: Github Profile Reader
  description: Read information from a Github user profile

definition:

  isAvailable:
    # Github profile URLs have the form: https://github.com/<username>/. So we have match on all Github URLs
    # by including a glob '*' after the hostname
    matchPatterns: "https://github.com/*"

    # We can pick any element that will be available if we're on a user profile page
    selectors: .vcard-details

  reader:
    type: jquery

    selectors:
      # alternatively could use ".vcard-fullname" or "[itemprop='name']" here
      name: ".p-name"

      # alternatively could use ".vcard-username" or "[itemprop='additionalName']" here
      username: ".p-nickname"

Foundation

apiVersion: v1
kind: extensionPoint
metadata:
  id: github/profile-menu
  version: 0.0.1
  name: Github user profile menu action
  description: Add an item to the Github profile sidebar
definition:
  type: menuItem

  # The id of our reader we created
  reader: github/profile

  # We use the same isAvailable that we used for the reader, because they'll 
  # be available in the same context
  isAvailable:
    matchPatterns: https://github.com/*
    selectors: .vcard-details

  defaultOptions:
    # Using a mustache template for the default caption. The name variable 
    # is provided by our reader
    caption: Action for {{name}}
    icon:
      id: box
      library: bootstrap
      size: 16

  # We want the the unordered list element (ul) that also has the class 
  # name vcard-details
  containerSelector: ul.vcard-details

  # Wrap the icon in a span octicon class because the Github page uses 
  # the octicon class to determine the margin on the icon. Try it without 
  # the span, and see how the page renders.
  template: |
    <li class="vcard-detail pt-1 css-truncate css-truncate-target "><span class="octicon">{{& icon }}</span>
      <a class="link-gray-dark" href="#">{{ caption }}</a>
    </li>

The easiest way to define a template is to copy one of the existing elements on the page, and then trim out any of the information that's specific to that element.

In the Chrome inspector, right click one of existing menu items, and click "Copy Element"

<li itemprop="url" data-test-selector="profile-website-url" class="vcard-detail pt-1 css-truncate css-truncate-target "><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>
      <a rel="nofollow me" class="link-gray-dark " href="https://toddschiller.com">https://toddschiller.com</a>
</li>

Adding a GitHub Profile Action

Reader definition

Foundation