Stack Overflow as Web Component

Question

Background

This project was developed to address the following issues:

• Simplify the process of using Stack Exchange API in a websites, for starter we simplify the process of displaying the most recent post associated with a tag.
• Make the Stack Exchange API work with other HTML tags, This Simplifies the process of development & of creating a solution (see how).

Objectives

Using an API is great but it is very technical and not always welcoming, Simplify the usage of Stack Exchange API can be achieved by wrapping the API as a Web Component or A Directive, this enables the Developer to play with Stack Exchange API as an HTML tag, without the need to use JavaScript coding.

For example get the content of recent post on a specific tag can look like this:

<sogettopanswerers tag="stackoverflow">
   ... the context here will be the data of the posts
</sogettopanswerers>

But it gives even more, it enables to connect different tag to it (using the attribute and the scope parameters), and with little effort create a more complex solutions.

For example display the answers of the post (from the previous example), the code will look like:

<sogettopanswerers tag="stackoverflow">
    <div ng-repeat="oPost in mostrecenttagposts.items track by $index">
        <sogetanswers postid="oPost.question_id">
            <div ng-repeat="oAnswer in answers.items track by $index">
                ...scope will containe the answer scope.
                Can be used as:
              <h1>oAnswer.title</h1>
           </div>
        </sogetanswers>
   </div>
</sogettopanswerers>

So this Solution, all it did is wrapped the Stack Exchange API with an HTML tag.

Here you can find simple sample of getting the content of recent post on a specific tag , click on the "view" button to run it.

In this sample we play with it even more. Wrapped it with a carousel component Wrapped it with a popover component.

And this is what we got, Click on the button

License:

MIT