Fixes #5244 Add examples component

[muuki88]

Adds a new include that replaces JS Fiddle.

🏷 Type of documentation

• new bid adapter
• update bid adapter
• new feature
• text edit only (wording, typos)
• bugfix (code examples)
• new examples

📋 Checklist

• Fixes Rework examples, migrate to new GAM instance & rethink JSFiddle #5244

Usage

<!-- storing the code inside a variable makes it a lot more readable -->
{% capture htmlCode %}<h4>Hello world</h4>
<div id="ad-slot" class="border border-info bg-white mb-2" style="height:250px; width: 300px">Ad Slot</div>
<button type="button" class="btn btn-primary" onclick="exampleFunction()">Interactive</button>
{% endcapture %}

{% capture jsCode %}console.log('hello world');
function exampleFunction() { 
  alert('hey there'); 
}
{% endcapture %}

{% include code/web-example.html id="hello-world" html=htmlCode js=jsCode %}

See the demo page on how it works and looks like.
https://deploy-preview-5463--prebid-docs-preview.netlify.app/docs-examples/web-example.html

[netlify]

✅ Deploy Preview for prebid-docs-preview ready!

Name	Link
🔨 Latest commit	85277f4
🔍 Latest deploy log	https://app.netlify.com/sites/prebid-docs-preview/deploys/66c756cee2cd200008d36255
😎 Deploy Preview	https://deploy-preview-5463--prebid-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[muuki88]

Add a separate info box in the example layout that explains that the js code can be put anywhere (head, script tag, external script)

[muuki88]

Here are some examples

• https://deploy-preview-5463--prebid-docs-preview.netlify.app/dev-docs/examples/adunit-refresh.html

[muuki88]

Feedback

• add a better distinction between the result and the rest of the page
• add required javascript tags (prebid, gpt.js, ...) to the html and not the outer page

[muuki88]

Check the debugging module if there are some examples that could benefit as well:
https://docs.prebid.org/dev-docs/modules/debugging.html

[muuki88]

All Feedback implemented.

• source tab that shows the full html source code along with the required scripts necessary
• make the example code more visible

[muuki88]

With the scripts include an example can specify the scripts required for this example. I chose a sensible default that most examples use

[muuki88]

This looks ugly in code, but nicer on the page: a lot less whitespace

[muuki88]

Here's an example for a different scripts attribute

[muuki88]

@ChrisHuie you are a master 🙏