add tags to example docs

#10022

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">

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));