From c23552b3d76af9cd43027af831566bd3e706b1f7 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Wed, 4 Sep 2024 11:04:45 +0200
Subject: [PATCH] fix: remove extra top margin in the toc when there is no
 message block (#233)

Only apply an extra top margin when the HTML generation that a message
block is used.

Closes #123
---
 src/helpers/isMessageBlockDisplayed.js | 8 ++++++++
 src/partials/toc.hbs                   | 2 +-
 src/partials/toolbar.hbs               | 2 ++
 src/stylesheets/globals/vars.scss      | 4 +++-
 src/stylesheets/toc.scss               | 9 +++++++++
 5 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/helpers/isMessageBlockDisplayed.js

diff --git a/src/helpers/isMessageBlockDisplayed.js b/src/helpers/isMessageBlockDisplayed.js
new file mode 100644
index 00000000..a4de1f9c
--- /dev/null
+++ b/src/helpers/isMessageBlockDisplayed.js
@@ -0,0 +1,8 @@
+'use strict'
+
+module.exports = (page) => {
+  // To keep in sync with the message blocks that are supported (see partials/toolbar.hbs)
+  return page.attributes?.['next-release'] ||
+    page.attributes?.['custom-message'] ||
+    page.attributes?.['out-of-support']
+}
diff --git a/src/partials/toc.hbs b/src/partials/toc.hbs
index 2b291908..1825a1bb 100644
--- a/src/partials/toc.hbs
+++ b/src/partials/toc.hbs
@@ -1,3 +1,3 @@
-<aside class="toc sidebar" data-title="{{or page.attributes.toctitle 'Contents'}}" data-levels="{{{or page.attributes.toclevels 2}}}">
+<aside class="toc sidebar{{#if (isMessageBlockDisplayed page)}} toc-with-message-block{{/if}}" data-title="{{or page.attributes.toctitle 'Contents'}}" data-levels="{{{or page.attributes.toclevels 2}}}">
   <div class="toc-menu"></div>
 </aside>
diff --git a/src/partials/toolbar.hbs b/src/partials/toolbar.hbs
index c2f57cb1..3c2adf40 100644
--- a/src/partials/toolbar.hbs
+++ b/src/partials/toolbar.hbs
@@ -22,6 +22,7 @@
   {{/if}}
   </div>
 
+  {{!-- START support for message blocks - to keep in sync with the 'isMessageBlockDisplayed' helper --}}
   {{#if page.attributes.next-release}}
     <div class="paragraph message-block next-release-block">
       <p>This content is dedicated to our next version.
@@ -45,6 +46,7 @@
       <p>You may want to view the same page for the <a href="{{{relativize page.latest.url}}}">latest version</a>, or for any of the versions available in the drop-down menu in the top-right corner.</p>
     </div>
   {{/if}}
+  {{!-- END support for message blocks --}}
 
   {{/unless}}
 </div>
diff --git a/src/stylesheets/globals/vars.scss b/src/stylesheets/globals/vars.scss
index 95a260bc..588f5080 100644
--- a/src/stylesheets/globals/vars.scss
+++ b/src/stylesheets/globals/vars.scss
@@ -161,8 +161,10 @@
   --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
   --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
-  --toc-top: calc(var(--body-top) + var(--toolbar-height) + var(--header-message-height));
+  --toc-top: calc(var(--body-top) + var(--toolbar-height));
+  --toc-top-with-message-block: calc(var(--toc-top) + var(--header-message-height));
   --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
+  --toc-height-with-message-block: calc(var(--toc-height) - var(--header-message-height));
   --toc-width: calc(162 / var(--rem-base) * 1rem);
   --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
   --doc-max-width: calc(720 / var(--rem-base) * 1rem);
diff --git a/src/stylesheets/toc.scss b/src/stylesheets/toc.scss
index 3d98a1ed..1610528a 100644
--- a/src/stylesheets/toc.scss
+++ b/src/stylesheets/toc.scss
@@ -22,6 +22,15 @@
     }
   }
 }
+.toc-with-message-block.sidebar {
+  .toc-menu {
+    top: var(--toc-top-with-message-block);
+  }
+
+  ul {
+    max-height: var(--toc-height-with-message-block);
+  }
+}
 
 .toc {
   .toc-menu {