feat(): Introduce category badges

src/_includes/sidebar/destination-menu.html

@@ -6,7 +6,7 @@
     {% for category in categories %}
       {% assign category_icon = category.slug | slugify %}
       <li class="destination-menu__item">
-        <a class="destination-menu__link flex" href="#{{ category.slug | slugify }}" title="{{ category.display_name }}">
+        <a class="destination-menu__link flex" href="#{{ category.display_name | slugify }}" title="{{ category.display_name }}">
           <span class="destination-menu__icon">
             {% include icons/destinations-catalog/{{ category_icon }}.svg %}
           </span>

src/_includes/sidebar/mobile-menu-side.html

@@ -1,7 +1,13 @@
 <div class="mobile-menu-side">
-  <p class="mobile-menu-side__title">On this page</p>
+  {%- unless page.hide_toc -%}
+    {% include sidebar/menu-side.html class="mobile-menu-side__list" anchor_class="mobile-menu-side__link" html=content h_min=2 h_max=2 %}
+  {%- endunless -%}
 
-  {% include sidebar/menu-side.html class="mobile-menu-side__list" anchor_class="mobile-menu-side__link" html=content h_min=2 h_max=2 %}
+  {% if page.related %}
+    {% include sidebar/related-content.html items=page.related %}
+  {% endif %}
+
+  {% include sidebar/related-categories.html %}
 
   <hr class="mobile-menu-side__divider">
 </div>

src/_includes/sidebar/related-categories.html

@@ -0,0 +1,19 @@
+{% if page.url contains 'destinations' %}
+  {% assign items = site.data.catalog.destinations.items %}
+  {% assign catalog_url = site.url | append: "/docsv2/connections/destinations/catalog/" %}
+  {% assign current_slug = page.url | split: "/" | last %}
+  {% assign current_integration = items | where: "slug", current_slug | first %}
+
+  <div class="related-categories">
+    <p class="destination-menu__title">Related categories</p>
+    <ul class="related-categories__list menu-side">
+      {% for category in current_integration.categories %}
+        <li class="related-categories__item">
+          <a href="{{ catalog_url }}/#{{ category | slugify }}" class="related-categories__link">
+            {{ category }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}

src/_includes/sidebar/related-content.html

@@ -0,0 +1,13 @@
+<div>
+  <p class="destination-menu__title">Related content</p>
+  <ul class="menu-side">
+    {% for related_url in include.items %}
+      {% assign subpage = site.pages | where: 'url', related_url | first %}
+      <li>
+        <a href="{{ subpage.url }}" class="menu-side__link">
+          {{ subpage.title }}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>

src/_layouts/integration.html

@@ -75,6 +75,12 @@ <h1 id="{{ page.title | downcase }}" class="page__heading">
           </div>
         {%- endunless -%}
 
+        {% if page.related %}
+          {% include sidebar/related-content.html items=page.related %}
+        {% endif %}
+
+        {% include sidebar/related-categories.html %}
+
         {% unless page.hide-feedback %}
           {% include sidebar/feedback.html %}
         {% endunless %}

src/_layouts/main.html

@@ -43,6 +43,10 @@
           </div>
         {%- endunless -%}
 
+        {% if page.related %}
+          {% include sidebar/related-content.html items=page.related %}
+        {% endif %}
+
         {% unless page.hide-feedback %}
           {% include sidebar/feedback.html %}
         {% endunless %}

src/_sass/_variables.scss

@@ -6,6 +6,8 @@ $color-values: (
   primary-dark: #1eb57d,
   primary-light: #52bd95,
   secondary: #1f477d,
+  secondary-light: #abbfdc,
+  secondary-lighter: #d8e2f2,
   secondary-dark: #435a6f,
   gray-light: #f7f9fa,
   gray-lighter: #f9fafb,

src/_sass/components/_markdown.scss

@@ -80,6 +80,7 @@
 
   & > p {
     margin-top: 8px;
+    overflow-wrap: break-word;
 
     @include breakpoint(medium up) {
       margin-top: 16px;

src/_sass/components/_mobile-menu-side.scss

@@ -9,6 +9,10 @@
     margin-top: 5px;
   }
 
+  & > * + div {
+    margin-top: 20px;
+  }
+
   &__title {
     font-weight: 500;
   }

src/_sass/components/_related-categories.scss

@@ -0,0 +1,30 @@
+.related-categories {
+  &__list {
+    & > * + * {
+      margin-top: 8px;
+    }
+  }
+
+  &__item {
+    background-color: rgba(color(secondary-lighter), 0.4);
+    border: 1px solid color(secondary-light);
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 16px;
+    display: inline-block;
+
+    &:hover {
+      background-color: color(secondary-lighter);
+    }
+  }
+
+  &__link {
+    color: color(secondary-dark);
+    padding: 4px 5px;
+    display: block;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

src/_sass/components/_sidebar.scss

@@ -1,6 +1,9 @@
 .sidebar {
   & > * + * {
     margin-top: 32px;
+  }
+
+  & > * + *:last-child {
     padding-top: 32px;
     border-top: 1px solid color(border-gray);
   }

src/_sass/segment.scss

@@ -90,6 +90,7 @@
 @import "components/mobile-menu-side";
 @import "components/gloss";
 @import "components/back-scrolling";
+@import "components/related-categories";
 
 // Pages
 // =================================================

src/connections/destinations/catalog/index.md

@@ -8,7 +8,7 @@ layout: catalog
   {% assign categories = site.data.catalog.destination_categories.items | sort:"display_name" %}
 
   {% for category in categories %}
-    <div class="destinations-catalog__section markdown" id="{{ category.slug | slugify }}">
+    <div class="destinations-catalog__section markdown" id="{{ category.display_name | slugify }}">
       {% assign category_icon = category.slug | slugify %}
 
       <h2 class="destinations-catalog__title" id="{{ category.slug | slugify }}">