From 4e256b882136ce5968f13ae60d1266ec0d686aa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Noco=C5=84?= <mnocon@users.noreply.github.com>
Date: Wed, 17 Jul 2024 09:10:22 +0200
Subject: [PATCH] New pill in user doc (#303)

* "new" pill in the ToC (#2394)

* Mark higher-level nodes with "New" pill as well, not only the actual item (#2429)

* Mark higher-level nodes with "New pill", not only the actual item

* Before review

* Update docs/js/custom.js

Co-authored-by: Dariusz Szut <dew326@gmail.com>

* Applied review suggestion

Co-authored-by: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com>

---------

Co-authored-by: Dariusz Szut <dew326@gmail.com>
Co-authored-by: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com>

* Added hidden CSS styling

* Marked Ibexa Engage as new

---------

Co-authored-by: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com>
Co-authored-by: Dariusz Szut <dew326@gmail.com>
---
 docs/css/custom.css               | 4 ++++
 docs/css/navigation.css           | 7 +++++++
 docs/ibexa_engage/ibexa_engage.md | 1 +
 docs/js/custom.js                 | 3 +++
 theme/partials/nav-item.html      | 6 ++++--
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/docs/css/custom.css b/docs/css/custom.css
index 6ced8ace..95ced300 100644
--- a/docs/css/custom.css
+++ b/docs/css/custom.css
@@ -605,3 +605,7 @@ div.path {
 .path p.description {
     color: var(--ibexa-dusk-black);
 }
+
+[hidden] {
+    display: none !important;
+}
diff --git a/docs/css/navigation.css b/docs/css/navigation.css
index 7e654d43..d622a0e7 100644
--- a/docs/css/navigation.css
+++ b/docs/css/navigation.css
@@ -133,6 +133,13 @@
     padding-bottom: 0.5rem;
 }
 
+.md-nav__link .pill.new {
+    margin-right: 15px;
+    background-color: #d9e8ff;
+    color: #3562a0;
+    text-transform: lowercase;
+}
+
 .md-nav__link::after {
     font-weight: 700;
 }
diff --git a/docs/ibexa_engage/ibexa_engage.md b/docs/ibexa_engage/ibexa_engage.md
index b9e14bfd..9b5350f6 100644
--- a/docs/ibexa_engage/ibexa_engage.md
+++ b/docs/ibexa_engage/ibexa_engage.md
@@ -1,5 +1,6 @@
 ---
 description: Ibexa Engage helps engage audiences and collect valuable data by using interactive content.
+month_change: true
 ---
 
 # Ibexa Engage
diff --git a/docs/js/custom.js b/docs/js/custom.js
index 96c528c5..9a68a3bc 100644
--- a/docs/js/custom.js
+++ b/docs/js/custom.js
@@ -156,4 +156,7 @@ $(document).ready(function() {
             document.location.hash = event.target.hash;
         }, 500);
     });
+
+    // Mark higher-level nodes with "New" pill, not only the actual item
+    $(".pill.new:not([hidden])").parents(".md-nav__item").children('label').children(".pill.new[hidden]").removeAttr('hidden');
 });
diff --git a/theme/partials/nav-item.html b/theme/partials/nav-item.html
index af5e454d..c6c67dee 100644
--- a/theme/partials/nav-item.html
+++ b/theme/partials/nav-item.html
@@ -7,7 +7,7 @@
     {% set checked = "checked" if nav_item.active %}
     <input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
     <label class="md-nav__link level-{{ level }}" for="{{ path }}">
-      {{ nav_item.title }}
+      {{ nav_item.title }} <span class="pill new" hidden>New</span>
     </label>
     <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
       <label class="md-nav__link-title md-nav__link level-{{ level }}" for="{{ path }}">
@@ -16,7 +16,7 @@
       <ul class="md-nav__list" data-md-scrollfix>
         {% set base = path %}
         {% for nav_item in nav_item.children %}
-          {% set path = base ~ "-" ~ loop.index %}
+          {% set path = base ~ "-" ~ loop.index %}
           {% set level = level + 1 %}
           {% include "partials/nav-item.html"  %}
         {% endfor %}
@@ -37,6 +37,7 @@
     {% endif %}
     <a href="{{ nav_item.url | url }}" class="md-nav__link level-{{ level }} md-nav__link--active">
       {{ nav_item.title }}
+      {% if nav_item.meta.month_change %}<span class="pill new">New</span>{% endif %}
     </a>
     {% if toc | first is defined %}
       {% include "partials/toc.html" %}
@@ -46,6 +47,7 @@
   <li class="{{ class }}">
     <a href="{{ nav_item.url | url }}" class="md-nav__link level-{{ level }}">
       {{ nav_item.title }}
+      {% if nav_item.meta.month_change %}<span class="pill new">New</span>{% endif %}
     </a>
   </li>
 {% endif %}