Cross linking between Essentials and Components

docs/_layouts/component.njk

@@ -9,7 +9,7 @@
 {% block beforeContent %}
   <h1 class="title">{{ title }}</h1>
   <div class="component-info">
-    <code class="component-tag">&lt;{{ component.tagName }}&gt;</code>
+    <code class="tag">&lt;{{ component.tagName }}&gt;</code>
     <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
     <wa-badge
       {% if component.status == 'stable' %}variant="brand"{% endif %}
@@ -17,14 +17,19 @@
     >
       {{ component.status }}
     </wa-badge>
-    {# TODO - add a pro flag for pro components #}
-    {% if component.tagName == 'wa-page' %}
-      <wa-badge class="pro">PRO</wa-badge>
-    {% endif %}
+
+    {% if isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
   </div>
   <p class="component-summary">
     {{ component.summary | inlineMarkdown | safe }}
   </p>
+  {% if essentials %}
+  <wa-callout variant="success">
+    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
+    Just want the styles?
+    Check out <a href="/docs/essentials/{{ essentials }}/">{{ ('/docs/essentials/' + essentials + '/') | getTitleFromUrl }} essentials</a>!
+  </wa-callout>
+  {% endif %}
 {% endblock %}
 
 {# Content #}

docs/_layouts/element.njk

@@ -0,0 +1,52 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+
+{% extends '../_includes/base.njk' %}
+
+{# Component header #}
+{% block beforeContent %}
+  <h1 class="title">{{ title }}</h1>
+  <div class="component-info">
+    {% for tag, url in elements %}
+      <code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
+    {% endfor %}
+    {% if since %}<wa-badge variant="neutral">Since {{ since }}</wa-badge>{% endif %}
+    {% if status %}
+      <wa-badge
+        {% if status == 'stable' %}variant="brand"{% endif %}
+        {% if status == 'experimental' %}variant="warning"{% endif %}
+      >
+        {{ status }}
+      </wa-badge>
+    {% endif %}
+
+    {% if isPro %}
+      <wa-badge class="pro">PRO</wa-badge>
+    {% endif %}
+  </div>
+  {% if component %}
+  <wa-callout variant="success">
+    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
+    Want to do more?
+    Check out the {% for name in (component | toArray) -%}
+      {{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code>&lt;wa-{{ name }}&gt;</code></a>{{ ', ' if not loop.last }}
+      {%- endfor %} component{{ 's' if (component | isArray) }}</a>!
+  </wa-callout>
+  {% endif %}
+{% endblock %}
+
+{# Content #}
+{% block content %}
+  {{ content | safe }}
+{% endblock %}
+
+{# Component API #}
+{% block afterContent %}
+  {# Slots #}
+  {% if css_file %}
+    <h2>Using these styles</h2>
+    <p>If you want to use these styles without using the entirety of Web Awesome Essentials, you can include the following CSS files:</p>
+
+
+  {% endif %}
+{% endblock %}

docs/_utils/filters.js

@@ -69,3 +69,11 @@ export function breadcrumbs(url, { withCurrent = false } = {}) {
   }
   return ret;
 }
+
+export function isArray(value) {
+  return Array.isArray(value);
+}
+
+export function toArray(value) {
+  return isArray(value) ? value : [value];
+}

docs/docs/components/details.md

@@ -2,6 +2,7 @@
 title: Details
 description: Details show a brief summary and expand to show additional content.
 tags: component
+essentials: details
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->

docs/docs/components/input.md

@@ -2,6 +2,7 @@
 title: Input
 description: Inputs collect data from the user.
 tags: component
+essentials: input
 ---
 
 ```html {.example}

docs/docs/components/select.md

@@ -2,6 +2,7 @@
 title: Select
 description: Selects allow you to choose items from a menu of predefined options.
 tags: component
+essentials: input
 ---
 
 ```html {.example}

docs/docs/components/textarea.md

@@ -2,6 +2,7 @@
 title: Textarea
 description: Textareas collect data from the user and allow multiple lines of text.
 tags: component
+essentials: input
 ---
 
 ```html {.example}

docs/docs/essentials/button.md

@@ -1,6 +1,7 @@
 ---
 title: Button
 tags: essentials
+layout: element
 ---
 
 ```html {.example}

docs/docs/essentials/content.md

@@ -1,6 +1,7 @@
 ---
 title: Content
 tags: essentials
+layout: element
 ---
 
 

docs/docs/essentials/details.md

@@ -1,14 +1,20 @@
 ---
 title: Details
 tags: essentials
+layout: element
+component: details
+elements:
+  "<details>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
 ---
 
-Individual details look like this.
+Details show a brief summary and expand to show additional content.
 
+```html {.example}
 <details>
   <summary>Tincidunt nunc pulvinar</summary>
   <p>Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.</p>
 </details>
+```
 
 ## Examples
 

docs/docs/essentials/input.md

@@ -1,6 +1,15 @@
 ---
 title: Form Inputs
 tags: essentials
+layout: element
+component:
+ - input
+ - select
+ - textarea
+elements:
+  "<input>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+  "<textarea>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+  "<select>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
 ---
 <style>
 wa-code-demo::part(preview) {

docs/docs/essentials/lists.md

@@ -1,6 +1,11 @@
 ---
 title: Lists
 tags: essentials
+layout: element
+elements:
+  "<ul>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
+  "<ol>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
+  "<dl>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
 ---
 
 ## Unordered Lists

docs/docs/essentials/table.md

@@ -1,6 +1,9 @@
 ---
 title: Table
 tags: essentials
+layout: element
+elements:
+  "<table>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
 ---
 
 ```html {.example}