feat(operators): add support for vendor specific examples in operator docs

[btroncone]

trafficstars

This shouldn't be merged yet but I wanted to open a PR for discussion regarding how we want to handle larger, library or framework dependent examples. This is something that has been requested a ton (ex. how would I used x in Angular or React), and @ladyleet and I had a brief discussion the other day about potential ways to fit this into our docs.

This PR adds sub routes to each operator and if the data includes these examples, adds tabs to the operator interface to switch between general information or select examples for a specific library. For example, if no examples exist you will see the same UI as today:

If examples exist, say adding the below prop to the operator data:

vendorExamples: [
    {
      vendorName: 'Angular',
      name: 'Example Title',
      description:
        'This is a long description of the example to go before the embed.',
      code: 'Something',
      externalLink: {
        platform: 'Stackblitz',
        url: 'https://stackblitz.com/edit/angular-sptxvd?embed=1&file=main.ts'
      }
    },
    {
      vendorName: 'React',
      name: 'Example Title',
      description:
        'This is a long description of the example to go before the embed.',
      code: 'Something',
      externalLink: {
        platform: 'Stackblitz',
        url: 'https://stackblitz.com/edit/react-zp9dfj?embed=1&file=index.js'
      }
    }
  ]

You will now get a tabbed interface with the appropriate examples aggregated under each:

Each tab contains examples using Stackblitz for the embed:

Let me know what you all think, thanks!

[ashwin-sureshkumar]

@btroncone - This is looks great. This hopefully brings in more contributions since it is easier to contribute for framework specific implementations.

cc @ladyleet @sumitarora

[sumitarora]

@btroncone This looks good 👍 Few Questions:

• How are we going to decide which operators needs vendorExamples which not?
• How are we going to manage the examples even in current jsbin examples we don't have a single account where they all fall under or we are going to keep them all public?

[ashwin-sureshkumar]

@sumitarora @ladyleet - Continuing from our decision from the meeting,

We should have one JSBin account which holds all examples. The same goes with any another sites we use stackblitz, etc.,

[ladyleet]

@ashwin-sureshkumar @sumitarora well......... jsbin will not let me create an account without a github login. i think this will be a hinderance for people who are looking to help create examples/contribute so i'm not sure how we are going to keep this consistent as the # of contributors grows? thoughts?

[btroncone]

@ladyleet Good point, having to contribute under an official account would make it more difficult for new contributors. I'm not sure how to solve this problem if we want to have embeds on the site unless we want to vet code first in PR's then post to an official bin. Seems like a clunky process though.

@sumitarora I feel like this could grow organically. If you use an operator (or group of operators) to do something cool while working with one of these frameworks or libraries this just offers a space to share. I'm not sure we have to decide up front which deserve examples over others.

[codecov-io]

Codecov Report

:exclamation: No coverage uploaded for pull request base (master@1ba4c83). Click here to learn what that means. The diff coverage is n/a.

@@            Coverage Diff            @@
##             master     #210   +/-   ##
=========================================
  Coverage          ?   77.14%           
=========================================
  Files             ?       15           
  Lines             ?      175           
  Branches          ?        7           
=========================================
  Hits              ?      135           
  Misses            ?       40           
  Partials          ?        0

Impacted Files	Coverage Δ
src/app/material/material.module.ts	100% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 1ba4c83...6ce690f. Read the comment docs.

[ashwin-sureshkumar]

@sumitarora @ladyleet - I think we can merge this PR in.

@btroncone - please fix conflicts and rebase.