From ad1fded323ae59079009758f53fc1292ab813232 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 28 Jan 2019 13:42:50 +0100
Subject: [PATCH] fix TOC item clicks, dim deprecated items, minimal deprecated
 entities

---
 src/components/Sidebar.module.scss         |  6 ++++++
 src/templates/Typedoc/Entities.jsx         | 10 +++-------
 src/templates/Typedoc/Entities.module.scss |  8 ++++++--
 src/templates/Typedoc/Toc.jsx              | 23 +++++++++++++++-------
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 2f664797..259095b2 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -148,3 +148,9 @@
         border-left-color: $green;
     }
 }
+
+[data-deprecated='true'] {
+    code {
+        opacity: .5;
+    }
+}
diff --git a/src/templates/Typedoc/Entities.jsx b/src/templates/Typedoc/Entities.jsx
index a49839e8..7ece9053 100644
--- a/src/templates/Typedoc/Entities.jsx
+++ b/src/templates/Typedoc/Entities.jsx
@@ -145,13 +145,9 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
             className={styles.property}
             data-private={!isPublic}
             data-deprecated={!!deprecation}
+            id={`${parentAnchor}-${slugify(name)}`}
         >
-            <h3
-                id={`${parentAnchor}-${slugify(name)}`}
-                className={styles.propertyName}
-            >
-                {name}
-            </h3>
+            <h3 className={styles.propertyName}>{name}</h3>
 
             <div
                 className={styles.propertyType}
@@ -167,7 +163,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
                 </div>
             )}
 
-            {comment && (
+            {comment && !deprecation && (
                 <div className={styles.propertyDescription}>
                     {comment.text || comment.shortText}
                 </div>
diff --git a/src/templates/Typedoc/Entities.module.scss b/src/templates/Typedoc/Entities.module.scss
index 6ceff5ad..79f1dad0 100644
--- a/src/templates/Typedoc/Entities.module.scss
+++ b/src/templates/Typedoc/Entities.module.scss
@@ -32,6 +32,10 @@
             opacity: .5;
         }
 
+        code {
+            opacity: 1;
+        }
+
         .sourceLink {
             display: none;
         }
@@ -107,10 +111,10 @@
 
 .deprecation {
     font-size: $font-size-small;
-    margin-bottom: $spacer / 4;
+    margin-top: $spacer / 4;
 
     strong {
-        color: $red;
+        color: $brand-grey-light;
     }
 }
 
diff --git a/src/templates/Typedoc/Toc.jsx b/src/templates/Typedoc/Toc.jsx
index e5121e45..baee0fa5 100644
--- a/src/templates/Typedoc/Toc.jsx
+++ b/src/templates/Typedoc/Toc.jsx
@@ -11,13 +11,22 @@ export default class Toc extends PureComponent {
     }
 
     subItems = (children, parentName) =>
-        children.filter(filterByKindOfProperty).map(({ name }) => (
-            <li key={name}>
-                <a href={`#${parentName}-${slugify(name)}`}>
-                    <code>{name}</code>
-                </a>
-            </li>
-        ))
+        children.filter(filterByKindOfProperty).map(({ name, decorators }) => {
+            const deprecation = (decorators || []).filter(
+                ({ name }) => name === 'deprecated'
+            )[0] // Assuming deprecated annotation
+
+            return (
+                <li key={name}>
+                    <a
+                        data-deprecated={!!deprecation}
+                        href={`#${parentName}-${slugify(name)}`}
+                    >
+                        <code>{name}</code>
+                    </a>
+                </li>
+            )
+        })
 
     items = this.props.data.map(({ name, children }) => {
         let subIds = []