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)
• [x] new examples

📋 Checklist

• Fixes #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[bot]]

✅ Deploy Preview for prebid-docs-preview ready!

Name	Link
🔨 Latest commit	85277f4aff6d311f1037a7f4830979bcc620941a
🔍 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]

@ChrisHuie you are a master :pray: