Fixes #5244 Add examples component

_includes/code/web-example.html

@@ -0,0 +1,32 @@
+<!-- 
+  provide the following variables:
+  - id: unique id for the example
+  - html: html code snippet
+  - js: js code snippet 
+--->
+<ul class="nav nav-tabs" role="tablist">
+    <li class="nav-item ui-tab" role="presentation">
+      <button class="nav-link active" id="{{ include.id }}-result-tab" data-toggle="tab" data-target="#{{ include.id }}-result" type="button" role="tab" aria-controls="result" aria-selected="true">result</button>
+    </li>
+    <li class="nav-item ui-tab" role="presentation">
+      <button class="nav-link" id="{{ include.id }}-html-tab" data-toggle="tab" data-target="#{{ include.id }}-html" type="button" role="tab" aria-controls="html" aria-selected="false">html</button>
+    </li>
+    <li class="nav-item ui-tab" role="presentation">
+      <button class="nav-link" id="{{ include.id }}-js-tab" data-toggle="tab" data-target="#{{ include.id }}-js" type="button" role="tab" aria-controls="js" aria-selected="false">js</button>
+    </li>
+</ul>
+<div class="tab-content" id="example-tab-content">
+  <div class="tab-pane fade show active" id="{{ include.id }}-result" role="tabpanel" aria-labelledby="{{ include.id }}-result-tab">
+    <div class="mt-2 p-3">
+      {{ include.html }}
+      <script>{{ include.js }}</script>
+    </div>
+  </div>
+  <div class="tab-pane fade" id="{{ include.id }}-html" role="tabpanel" aria-labelledby="{{ include.id }}-html-tab">
+    <pre><code class="language-html">{{ include.html | xml_escape}}</code></pre>
+  </div>
+  <div class="tab-pane fade" id="{{ include.id }}-js" role="tabpanel" aria-labelledby="{{ include.id }}-js-tab">
+    <pre><code class="language-javascript">{{ include.js }}</code></pre>
+  </div>
+</div>
+

docs-examples/web-example.md

@@ -0,0 +1,63 @@
+---
+layout: page_v2
+title: Web Code Example
+description: How web code examples can be written
+---
+
+# How to implement code examples for web
+
+The prebid documentation uses bootstrap for styling. Bootstrap offers a [tab component](https://getbootstrap.com/docs/4.6/components/navs/#javascript-behavior).
+
+## Example
+
+{% 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 %}
+
+## Instructions
+
+The code you need to for this looks like this
+
+{% raw %}
+
+```liquid
+<!-- 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 %}
+```
+
+{% endraw %}
+
+There are few things to understand here
+
+1. The `include` directive requires a unique `id` for the page. Otherwise the tabs won't work properly
+2. Capturing the code into a variable makes everything a lot more readable
+
+## More information
+
+- [jekyll includes](https://jekyllrb.com/docs/includes/)
+- [jekyll includes with parameters](https://jekyllrb.com/docs/includes/#passing-parameter-variables-to-includes)
+- [bootstrap tabs](https://getbootstrap.com/docs/4.6/components/navs/#javascript-behavior)