Add Library Support Types Feature

src/_data/support-types.yml

@@ -0,0 +1,10 @@
+types:
+  - display_name: Community
+    slug: community
+    support-note: "This integration is supported by the community members who maintain it."
+  - display_name: Legacy
+    slug: legacy
+    support-note: "This integration is no longer supported by Segment."
+  - display_name: Flagship
+    slug: flagship
+    support-note: "This integration is officially supported by Segment."

src/_includes/content/support-grid.md

@@ -0,0 +1,36 @@
+<!--
+This include is adapted from the plan-grid.md include.
+The support-types.yml file centralizes this support type data.
+-->
+{% assign supportTypesData = site.data.support-types.types %}
+{% assign supportType = supportTypesData | where: "slug", page.support_type | first %}
+<!-- The line below hides the grid if there's no matching data in sources.yml-->
+{% if supportType %}
+
+<div class="popover" data-popover data-active-class="popover--active">
+<div class="flex flex--wrap waffle" style="margin-top: 8px;" >
+
+{% for item in supportTypesData %}
+{% if item.slug == supportType.slug %}
+<div class="flex__column flex__column--shrink">
+        <span class="badge badge--{% if item.slug == 'community' %}warning{% elsif item.slug == 'legacy' %}gray{% elsif item.slug == 'flagship' %}success{%endif%}"> {{item.display_name | capitalize }} ✓ </span>
+</div>
+{% else %}
+<div class="flex__column flex__column--shrink">
+        <span class="badge badge--gray" style="opacity:0.2"> {{item.slug | capitalize }} x </span>
+        </div>
+{% endif %}
+{% endfor %}
+
+<div class="flex__column flex__column--shrink" style="padding-top:0px">
+  <a class="recent-contributor__button" style="padding: 4px 10px;" href="#" data-popover-target="contributors">?</a>
+</div>
+</div>
+
+<div class="popover__body" data-popover-body="contributors">
+{% if supportType.support-note %}
+<p style="font-size:12px">{{supportType.support-note}}</p>
+{% endif %}
+</div>
+</div>
+{% endif %}

src/_layouts/integration.html

@@ -48,6 +48,7 @@
                 <h1 id="{{ page.title | slugify }}">
                   {{ page.title }}
                 </h1>
+                {% include content/support-grid.md %}
               {%- endif -%}
 
               {%- if page.excerpt -%}

src/_sass/components/_badge.scss

@@ -23,6 +23,10 @@
     background-color: lighten(color(error), 10%);
     color: white;
   }
+  &--warning {
+    background-color: lighten(color(warning), 40%);
+    color: color(warning-dark);
+  }
 
   &--none {
     background-color: white;

src/connections/sources/catalog/libraries/mobile/react-native/index.md

@@ -2,6 +2,7 @@
 title: Analytics for React Native
 strat: react-native
 id: B0X0QmvMny
+support_type: flagship
 ---
 
 With Analytics for React Native, you can collect analytics in your React Native application and send data to any analytics or marketing tool without having to learn, test, or implement a new API every time. Analytics React Native enables you to process and track the history of a payload, while Segment controls the API and prevents unintended operations.

src/connections/sources/catalog/libraries/mobile/xamarin/index.md

@@ -3,6 +3,7 @@ title: Analytics for Xamarin
 sourceTitle: 'Xamarin'
 sourceCategory: 'Mobile'
 id: wcssVcPJrc
+support_type: community
 ---
 Segment's [Xamarin](http://xamarin.com/) Portable Class Library ([PCL](http://developer.xamarin.com/guides/cross-platform/application_fundamentals/pcl/)) is the best way to integrate analytics into your Xamarin application. It lets you record analytics data from your C#, F#, and .NET code, and supports `PCL Profile 4.0 - Profile136`, which targets the following platforms:
 

src/connections/sources/catalog/libraries/server/net/index.md

@@ -2,6 +2,7 @@
 title: Analytics for .NET
 repo: analytics.NET
 id: 8HWbgPTt3k
+support_type: legacy
 tags:
   - C#
   - C-sharp