typedoc styling updates, fix some props warnings

content/references/squid-py.md

@@ -1,6 +1,5 @@
 ---
-title: API Reference
+title: Squid-py API Reference
-description:
 ---
 
 ReadTheDocs hosts the [squid-py API Reference Docs](https://squid-py.readthedocs.io/en/latest/).

src/templates/Doc.jsx

@@ -26,8 +26,8 @@ const DocMain = ({ title, description, tableOfContents, post, single }) => (
 
 DocMain.propTypes = {
     title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
+    description: PropTypes.string,
-    tableOfContents: PropTypes.string,
+    tableOfContents: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     post: PropTypes.object.isRequired,
     single: PropTypes.bool
 }

src/templates/Typedoc.jsx

@@ -170,6 +170,8 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
             data-private={!isPublic}
             data-deprecated={!!deprecation}
         >
+            <h3 className={styles.propertyName}>{name}</h3>
+
             <div
                 className={styles.propertyType}
                 data-type={kindString.toLowerCase()}
@@ -177,8 +179,6 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
                 {kindString}
             </div>
 
-            <h3 className={styles.propertyName}>{name}</h3>
-
             {isStatic && <div className={styles.propertyModifier}>static</div>}
             {!isPublic && (
                 <div className={styles.propertyModifier} data-secondary>
@@ -197,22 +197,24 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
                 </a>
             )}
 
-            {!!deprecation && (
-                <div className={styles.deprecation}>
-                    <strong>Deprecated:</strong> use{' '}
-                    <a href={`#${parentAnchor}/${slugify(deprecatedUse)}`}>
-                        {deprecatedUse}
-                    </a>{' '}
-                    instead
-                </div>
-            )}
-
             {comment && (
                 <div className={styles.propertyDescription}>
                     {comment.text || comment.shortText}
                 </div>
             )}
 
+            {deprecation && (
+                <div className={styles.deprecation}>
+                    <strong>Deprecated:</strong> use{' '}
+                    <code>
+                        <a href={`#${parentAnchor}/${slugify(deprecatedUse)}`}>
+                            {deprecatedUse}
+                        </a>
+                    </code>{' '}
+                    instead
+                </div>
+            )}
+
             {(() => {
                 switch (kindString) {
                     case 'Method':

src/templates/Typedoc.module.scss

@@ -31,12 +31,14 @@
     border-radius: $border-radius;
     position: relative;
 
-    &[data-private='true'] {
+    &[data-deprecated='true'] {
-        background: rgba($brand-black, .06);
+        > *:not(.deprecation) {
+            opacity: .4;
         }
 
-    &[data-deprecated='true'] {
+        .sourceLink {
-        background: rgba($brand-pink, .06);
+            display: none;
+        }
     }
 }
 
@@ -48,45 +50,44 @@
     margin-bottom: $spacer / 4;
     margin-top: 0;
     display: inline-block;
-    padding: $spacer / 8 $spacer / 3;
+    padding: 0 $spacer / 4;
     border-radius: $border-radius;
     vertical-align: middle;
 }
 
 .propertyName {
     font-size: $font-size-large;
+    padding: 0;
+    margin-right: $spacer / 3;
 }
 
 .propertyType,
 .propertyModifier {
     font-size: $font-size-small;
-    line-height: 1.4em;
+    color: $brand-grey;
-    padding: $spacer / 16 $spacer / 6;
+    margin-right: $spacer / 4;
 }
 
 .propertyType {
     &[data-type='method'] {
-        background: rgba($green, .4);
+        background: rgba($green, .3);
     }
 
     &[data-type='property'] {
-        background: rgba($brand-pink, .4);
+        background: rgba($yellow, .3);
     }
 }
 
 .propertyModifier {
     background: rgba($red, .2);
-    padding: 0 $spacer / 6;
-    margin-right: $spacer / 3;
 
     &[data-secondary] {
-        background: rgba($brand-blue, .5);
+        background: rgba($brand-blue, .2);
-        color: $brand-white;
     }
 }
 
 .propertyDescription {
-    padding: $spacer / 6 0 $spacer / 3;
+    margin-bottom: $spacer;
 }
 
 .sourceLink {
@@ -101,7 +102,13 @@
 
 .deprecation {
     font-size: $font-size-small;
-    color: mix($brand-black, $brand-pink, 50%);
+    padding: $spacer / 3;
+    border: 1px solid $red;
+    border-radius: $border-radius;
+
+    strong {
+        color: $red;
+    }
 }
 
 .type {