[experimental] TOC notice component

docusaurus/sidebars.js

@@ -210,13 +210,31 @@ const sidebars = {
       collapsible: false,
       className: 'category-cms-configurations',
       items: [
+      // Icône info avec tooltip
+        {
+          type: 'doc',
+          label: 'API',
+          id: 'cms/configurations/api',
+          customProps: {
+            infoTooltip: `<strong>API Version 2.0</strong><br>
+            <a href="/changelog">Voir les nouveautés</a><br><br>
+            <strong>Changements :</strong>
+            <ul>
+              <li>Nouvelle authentification</li>
+              <li>Endpoints mis à jour</li>
+            </ul>`
+          }
+        },
+        // Notice sobre sous le lien
         {
           type: 'doc',
           label: 'Configurations introduction',
           id: 'cms/configurations',
+          customProps: {
+            noticeText: 'Section déplacée vers <a href="/new-config">ici</a>'
+          }
         },
         'cms/configurations/admin-panel',
-        'cms/configurations/api',
         'cms/configurations/cron',
         'cms/configurations/database',
         'cms/configurations/environment',

docusaurus/src/components/InfoIcon/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export default function InfoIcon({ tooltip, className }) {
+  if (!tooltip) return null;
+
+  return (
+    <span className={clsx('info-icon', className)}>
+      <i className="ph-fill ph-info info-icon__icon"></i>
+      <div className="info-icon__tooltip">
+        <div dangerouslySetInnerHTML={{ __html: tooltip }} />
+        <div className="tooltip-arrow"></div>
+      </div>
+    </span>
+  );
+}

docusaurus/src/scss/sidebar.scss

@@ -168,6 +168,9 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
 
   &__link__content {
     padding-right: 10px;
+    display: flex;
+    align-items: center;
+    flex: 1;
   }
 
   .badge {
@@ -285,33 +288,54 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
         pointer-events: none;
         &::before {
           content: '\E922';
+          position: relative;
+          top: -2px;
         }
       }
       .theme-doc-sidebar-item-category-level-1.category-cms-configurations > .menu__list-item-collapsible a {
         pointer-events: none;
         &::before {
           content: '\E87C';
+          position: relative;
+          top: -2px;
         }
       }
       .theme-doc-sidebar-item-category-level-1.category-cms-development > .menu__list-item-collapsible a {
         pointer-events: none;
         &::before {
           content: '\E586';
+          position: relative;
+          top: -2px;
+        }
+      }
+      .theme-doc-sidebar-item-category-level-1.category-cms-typescript > .menu__list-item-collapsible a {
+        pointer-events: none;
+        &::before {
+          content: '\E914';
+          position: relative;
+          top: -1px;
         }
       }
       .theme-doc-sidebar-item-category-level-1.category-cms-plugins > .menu__list-item-collapsible a {
         pointer-events: none;
         &::before {
           content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(142,142,169)' viewBox='0 0 256 256'><path d='M165.78,224H208a16,16,0,0,0,16-16V170.35A8,8,0,0,0,212.94,163a23.37,23.37,0,0,1-8.94,1.77c-13.23,0-24-11.1-24-24.73s10.77-24.73,24-24.73a23.37,23.37,0,0,1,8.94,1.77A8,8,0,0,0,224,109.65V72a16,16,0,0,0-16-16H171.78a35.36,35.36,0,0,0,.22-4,36,36,0,0,0-72,0,35.36,35.36,0,0,0,.22,4H64A16,16,0,0,0,48,72v32.22a35.36,35.36,0,0,0-4-.22,36,36,0,0,0,0,72,35.36,35.36,0,0,0,4-.22V208a16,16,0,0,0,16,16h42.22'></path></svg>");
           position: relative;
-          top: 2px;
+          top: 0px;
+        }
+      }
+      .theme-doc-sidebar-item-category-level-1.category-cms-cli > .menu__list-item-collapsible a {
+        pointer-events: none;
+        &::before {
+          content: '\EAE8';
+          position: relative;
+          top: -1px;
         }
       }
       .theme-doc-sidebar-item-category-level-1.category-cms-api > .menu__list-item-collapsible a {
         pointer-events: none;
         &::before {
           content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(142,142,169)' viewBox='0 0 256 256'><rect width='16' height='16' fill='rgb(142,142,169)'/><path d='M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,120,47.65,76,128,32l80.35,44Zm8,99.64V133.83l80-43.78v85.76Z'/></svg>");
-          // content: '\E1DA';
         }
       }
       .theme-doc-sidebar-item-category-level-1.category-cms-upgrade > .menu__list-item-collapsible a {
@@ -342,7 +366,7 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
         .theme-doc-sidebar-item-category-level-1.category-cloud-deployments > .menu__list-item-collapsible a {
           pointer-events: none;
           &::before {
-            content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(142,142,169)' viewBox='0 0 256 256'><path d='M248,160a48.05,48.05,0,0,1-48,48H152c-17.65,0-32-14.75-32-32.89s14.35-32.89,32-32.89a31,31,0,0,1,3.34.18A48,48,0,0,1,248,160ZM112,72a87.57,87.57,0,0,1,61.35,24.91A8,8,0,0,0,184.5,85.44,104,104,0,0,0,8,160v16a8,8,0,0,0,16,0V160A88.1,88.1,0,0,1,112,72Zm0,32a55.58,55.58,0,0,1,33.13,10.84A8,8,0,1,0,154.6,102,72,72,0,0,0,40,160v16a8,8,0,0,0,16,0V160A56.06,56.06,0,0,1,112,104Zm15.21,26.71a8,8,0,0,0-5.94-9.63A40,40,0,0,0,72,160v16a8,8,0,0,0,16,0V160a24,24,0,0,1,29.57-23.35A8,8,0,0,0,127.21,130.71Z'/></svg>");
+            content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(142,142,169)' viewBox='0 0 256 256'><path d='M248,160a48.05,48.05,0,0,1-48,48H152c-17.65,0-32-14.75-32-32.89s14.35-32.89,32-32.89a31,31,0,0,1,3.34.18A48,48,0,0,1,248,160ZM112,72a87.57,87.57,0,0,1,61.35,24.91A8,8,0,0,0,184.5,85.44A104,104,0,0,0,8,160v16a8,8,0,0,0,16,0V160A88.1,88.1,0,0,1,112,72Zm0,32a55.58,55.58,0,0,1,33.13,10.84A8,8,0,1,0,154.6,102,72,72,0,0,0,40,160v16a8,8,0,0,0,16,0V160A56.06,56.06,0,0,1,112,104Zm15.21,26.71a8,8,0,0,0-5.94-9.63A40,40,0,0,0,72,160v16a8,8,0,0,0,16,0V160a24,24,0,0,1,29.57-23.35A8,8,0,0,0,127.21,130.71Z'/></svg>");
             position: relative;
             top: 1px;
           }
@@ -442,3 +466,244 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
     }
   }
 }
+
+/* Icône info inline dans les liens de sidebar */
+.sidebar-info-icon {
+  margin-left: 6px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+}
+
+.info-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &__icon {
+    font-size: 12px;
+    color: var(--strapi-neutral-500);
+    cursor: help;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--strapi-primary-600);
+    }
+  }
+
+  &__tooltip {
+    --custom-tooltip-width: 220px;
+    font-weight: 400;
+    visibility: hidden;
+    opacity: 0;
+    width: var(--custom-tooltip-width);
+    background-color: var(--strapi-neutral-100);
+    color: var(--strapi-neutral-600);
+    text-align: left;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 99999;
+    bottom: 0;
+    transform: translateY(105%);
+    left: -64px;
+    font-size: var(--strapi-font-size-ssm);
+    line-height: var(--strapi-line-height-sm);
+    border: 1px solid var(--strapi-neutral-200);
+    box-shadow: 0 4px 12px rgba(33, 33, 52, 0.15);
+    pointer-events: none; /* Pas d'interaction avec le tooltip */
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+
+    /* Contenu HTML dans tooltip - pour affichage uniquement */
+    ul, ol {
+      margin: 4px 0;
+      padding-left: 14px;
+    }
+
+    li {
+      margin: 2px 0;
+    }
+
+    a {
+      color: var(--strapi-primary-600);
+      text-decoration: underline;
+      /* Pas de cursor: pointer puisqu'on ne peut pas cliquer */
+    }
+
+    p {
+      margin: 4px 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    strong {
+      font-weight: 600;
+      color: var(--strapi-neutral-800);
+    }
+
+    code {
+      background-color: var(--strapi-neutral-150);
+      color: var(--strapi-neutral-700);
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-size: 11px;
+    }
+
+    .tooltip-arrow {
+      position: absolute;
+      top: -12px;
+      left: 30px;
+      width: 0;
+      height: 0;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: -2px; /* Légèrement plus haut pour la bordure */
+        left: -7px;
+        width: 0;
+        height: 0;
+        border-width: 7px;
+        border-style: solid;
+        border-color: transparent transparent var(--strapi-neutral-200) transparent; /* Bordure plus grande */
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 1px;
+        left: -6px;
+        width: 0;
+        height: 0;
+        border-width: 6px;
+        border-style: solid;
+        border-color: transparent transparent var(--strapi-neutral-100) transparent; /* Remplissage par-dessus */
+      }
+    }
+  }
+}
+
+/* Afficher le tooltip au hover du li entier */
+.theme-doc-sidebar-item-link:hover .info-icon__tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Notice sobre sous les liens */
+.sidebar-notice {
+  display: flex;
+  align-items: flex-start;
+  padding: 6px 8px;
+  margin: 4px 0 4px 12px;
+  background-color: var(--strapi-neutral-100);
+  border-radius: 4px;
+  border-left: 2px solid var(--strapi-neutral-400);
+  font-size: 12px;
+  line-height: 1.4;
+
+  &__icon {
+    color: var(--strapi-neutral-600);
+    margin-right: 6px;
+    font-size: 11px;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  &__content {
+    color: var(--strapi-neutral-700);
+
+    /* Support HTML dans le contenu */
+    a {
+      color: var(--strapi-primary-600);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    ul, ol {
+      margin: 2px 0;
+      padding-left: 12px;
+    }
+
+    li {
+      margin: 1px 0;
+    }
+
+    p {
+      margin: 2px 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.sidebar-notice-item {
+  margin: 6px 0;
+}
+
+/* Mode sombre */
+@include dark {
+  .info-icon {
+    &__icon {
+      color: var(--strapi-neutral-400);
+
+      &:hover {
+        color: var(--strapi-primary-400);
+      }
+    }
+
+    &__tooltip {
+      background-color: var(--strapi-neutral-0);
+      color: var(--strapi-neutral-400);
+      border-color: var(--strapi-neutral-200);
+
+      a {
+        color: var(--strapi-primary-500);
+      }
+
+      strong {
+        color: var(--strapi-neutral-300);
+      }
+
+      code {
+        background-color: var(--strapi-neutral-100);
+        color: var(--strapi-neutral-500);
+      }
+
+      .tooltip-arrow::after {
+        border-color: transparent transparent var(--strapi-neutral-0) transparent;
+      }
+    }
+  }
+
+  .sidebar-notice {
+    background-color: var(--strapi-neutral-0);
+    border-left-color: var(--strapi-neutral-400);
+
+    &__icon {
+      color: var(--strapi-neutral-500);
+    }
+
+    &__content {
+      color: var(--strapi-neutral-400);
+
+      a {
+        color: var(--strapi-primary-500);
+      }
+    }
+  }
+}