Add search tags to feature list entries and feature detail page. (#1046)

* Add search tags to feature list entries and feature detail page.

* Do conditional commas with CSS rather than JS or template logic.

static/elements/chromedash-feature.js

@@ -484,6 +484,17 @@ class ChromedashFeature extends LitElement {
           </section>
           ` : nothing}
         ` : nothing}
+        ${this.open && this.feature.tags ? html`
+          <section>
+            <h3>Search tags</h3>
+            <div class="resources comma-sep-links">
+              ${this.feature.tags.map((tag) => html`
+                <a href="#tags:${tag}" target="_blank"
+                  >${tag}</a><span class="conditional-comma">,&nbsp; </span>
+              `)}
+            </div>
+          </section>
+          ` : nothing}
     `;
   }
 }

static/sass/elements/_element.scss

@@ -21,3 +21,7 @@ $feature-min-height: 75px;
   text-align: center;
   color: $default-font-color;
 }
+
+.conditional-comma:last-child {
+  display: none;
+}

static/sass/features/feature.scss

@@ -86,6 +86,16 @@ iron-icon {
   font-style: italic;
 }
 
+#updated {
+  padding-top: var(--content-padding);
+}
+
+#updated span {
+  color: var(--unimportant-text-color);
+  border-top: var(--default-border);
+  padding: var(--content-padding-quarter) var(--content-padding) 0 0;
+}
+
 @media only screen and (max-width: 700px) {
   #feature {
     border-radius: 0 !important;

static/sass/shared.scss

@@ -76,6 +76,10 @@ button:not(:disabled):hover {
   margin-right: .2em;
 }
 
+.conditional-comma:last-child {
+  display: none;
+}
+
 .no-web-share {
   display: none;
 }

static/sass/theme.scss

@@ -37,6 +37,7 @@
   --default-font: 14px "Roboto", sans-serif;
   --form-element-font: system-ui;
   --default-color: var(--md-gray-900-alpha);
+  --unimportant-text-color: var(--md-gray-700-alpha);
 
   --content-padding: 16px;
   --content-padding-half: 8px;

templates/feature.html

@@ -96,13 +96,6 @@
     </section>
     {% endif %}
 
-    {% if feature.comments %}
-    <section id="comments">
-      <h3>Comments</h3>
-      <p>{{ feature.comments|urlize }}</p>
-    </section>
-    {% endif %}
-
     {% if feature.sample_links %}
     <section id="demo">
       <h3>{% if feature.sample_links|length == 1 %}Demo{% else %}Demos{% endif %}</h3>
@@ -229,8 +222,25 @@
     </section>
     {% endif %}
 
+    {% if feature.comments %}
+    <section id="comments">
+      <h3>Comments</h3>
+      <p>{{ feature.comments|urlize }}</p>
+    </section>
+    {% endif %}
+
+    {% if feature.search_tags %}
+    <section>
+      <h3>Search tags</h3>
+        {% for tag in feature.search_tags %}
+          <a href="/features#tags:{{ tag }}">{{ tag }}</a><span
+            class="conditional-comma">, </span>
+        {% endfor %}
+    </section>
+    {% endif %}
+
     <section id="updated">
-      <p>Last updated on {{ feature.updated_display }}</p>
+      <p><span>Last updated on {{ feature.updated_display }}</span></p>
     </section>
   </div>
 {% endblock %}

templates/guide/metadata.html

@@ -49,7 +49,12 @@
       </tr>
       <tr>
         <th>Search tags</th>
-        <td>{{ feature.search_tags | join:', ' }}</td>
+        <td>
+          {% for tag in feature.search_tags %}
+            <a href="/features#tags:{{tag}}"
+               >{{tag}}</a><span class="conditional-comma">, </span>
+          {% endfor %}
+        </td>
       </tr>
     </table>