From 9908433cfd3c6a779bb1e7d73222a9ffc2005665 Mon Sep 17 00:00:00 2001
From: roemhildtg <roemhildtg@gmail.com>
Date: Wed, 23 Oct 2019 22:06:46 -0500
Subject: [PATCH 1/2] add tags to example docs #10022

---
 examples/templates/example.html     |  9 ++++++++-
 examples/webpack/example-builder.js | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/examples/templates/example.html b/examples/templates/example.html
index 7aa00b695f..844761821c 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -108,7 +108,14 @@
       <div class="row-fluid">
         <a class="codepen-button pull-right"><i class="fa fa-codepen"></i> Edit</a>
         <div class="span12">
-          <h4 id="title">{{ title }}</h4>
+          <h4 id="title">
+            {{ title }}
+          </h4>
+          <p class="tags">
+            {{#each tags}}
+              <a href="./index.html?q={{.}}"><span class="label label-primary">{{.}}</span></a>
+            {{/each}}
+          </p>
           {{{ contents }}}
         </div>
         <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js
index fd03d2d631..22a7867500 100644
--- a/examples/webpack/example-builder.js
+++ b/examples/webpack/example-builder.js
@@ -138,9 +138,13 @@ ExampleBuilder.prototype.apply = function(compiler) {
       .filter(chunk => chunk.names[0] !== this.common);
 
     const exampleData = [];
+    const uniqueTags = new Set();
     const promises = chunks.map(async chunk => {
       const [assets, data] = await this.render(compiler.context, chunk);
 
+      // collect tags for main page... TODO: implement index tag links
+      data.tags.forEach(tag => uniqueTags.add(tag));
+
       exampleData.push({
         link: data.filename,
         example: data.filename,
@@ -158,7 +162,8 @@ ExampleBuilder.prototype.apply = function(compiler) {
 
     const info = {
       examples: exampleData,
-      index: createWordIndex(exampleData)
+      index: createWordIndex(exampleData),
+      tags: Array.from(uniqueTags)
     };
 
     const indexSource = `var info = ${JSON.stringify(info)}`;
@@ -182,6 +187,13 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
   data.olVersion = pkg.version;
   data.filename = htmlName;
 
+  // process tags
+  if (data.tags) {
+    data.tags = data.tags.replace(/[\s"]+/g, '').split(',');
+  } else {
+    data.tags = [];
+  }
+
   // add in script tag
   const jsName = `${name}.js`;
   let jsSource = getJsSource(chunk, path.join('.', jsName));

From f8b145f82aab4c12a535acefabc029ef7d24a09c Mon Sep 17 00:00:00 2001
From: Gregg Roemhildt <roemhildtg@gmail.com>
Date: Thu, 12 Dec 2019 20:03:21 -0600
Subject: [PATCH 2/2] Using label classes on the anchor

Co-Authored-By: Olivier Guyot <olivier.guyot@camptocamp.com>
---
 examples/templates/example.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/templates/example.html b/examples/templates/example.html
index 844761821c..3b50584a4b 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -113,7 +113,7 @@
           </h4>
           <p class="tags">
             {{#each tags}}
-              <a href="./index.html?q={{.}}"><span class="label label-primary">{{.}}</span></a>
+              <a href="./index.html?q={{.}}" class="label label-primary">{{.}}</a>
             {{/each}}
           </p>
           {{{ contents }}}