chore: add debug color to toc

XansamLin · Sep 2, 2020 · 7a0320d · 7a0320d
1 parent a204040
commit 7a0320d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less
@@ -24,6 +24,10 @@ ul.toc > li {
     margin-right: 0;
     padding-right: 0;
   }
+
+  &.toc-debug a {
+    color: @purple-6;
+  }
 }
 
 .toc li > ul {

diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
@@ -122,16 +122,21 @@ class ComponentDoc extends React.Component {
           rightChildren.push(demoElem);
         }
       });
-    const expandTriggerClass = classNames({
-      'code-box-expand-trigger': true,
+    const expandTriggerClass = classNames('code-box-expand-trigger', {
       'code-box-expand-trigger-active': expandAll,
     });
 
     const jumper = showedDemo.map(demo => {
       const { title } = demo.meta;
       const localizeTitle = title[locale] || title;
       return (
-        <li key={demo.meta.id} title={localizeTitle}>
+        <li
+          key={demo.meta.id}
+          title={localizeTitle}
+          className={classNames({
+            'toc-debug': demo.meta.debug,
+          })}
+        >
           <a href={`#${demo.meta.id}`}>{localizeTitle}</a>
         </li>
       );