feat: mark items as deprecated in sidebar

Author: erickzhao

sidebars.js

@@ -46,19 +46,19 @@ module.exports = {
         {
           type: 'doc',
           id: 'latest/tutorial/in-app-purchases',
-          customProps: { tags: ['mac'] },
+          customProps: { platforms: ['mac'] },
         },
         'latest/tutorial/keyboard-shortcuts',
         'latest/tutorial/launch-app-from-url-in-another-app',
         {
           type: 'doc',
           id: 'latest/tutorial/linux-desktop-actions',
-          customProps: { tags: ['linux'] },
+          customProps: { platforms: ['linux'] },
         },
         {
           type: 'doc',
           id: 'latest/tutorial/macos-dock',
-          customProps: { tags: ['mac'] },
+          customProps: { platforms: ['mac'] },
         },
         'latest/tutorial/multithreading',
         'latest/tutorial/native-file-drag-drop',
@@ -70,20 +70,20 @@ module.exports = {
         {
           type: 'doc',
           id: 'latest/tutorial/recent-documents',
-          customProps: { tags: ['mac', 'windows'] },
+          customProps: { platforms: ['mac', 'windows'] },
         },
         {
           type: 'doc',
           id: 'latest/tutorial/represented-file',
-          customProps: { tags: ['mac'] },
+          customProps: { platforms: ['mac'] },
         },
         'latest/tutorial/spellchecker',
         'latest/tutorial/tray',
         'latest/tutorial/web-embeds',
         {
           type: 'doc',
           id: 'latest/tutorial/windows-taskbar',
-          customProps: { tags: ['windows'] },
+          customProps: { platforms: ['windows'] },
         },
         {
           type: 'category',
@@ -228,7 +228,11 @@ module.exports = {
         'latest/api/app',
         'latest/api/auto-updater',
         'latest/api/base-window',
-        'latest/api/browser-view',
+        {
+          type: 'doc',
+          id: 'latest/api/browser-view',
+          customProps: { deprecated: true },
+        },
         'latest/api/browser-window',
         'latest/api/clipboard',
         'latest/api/content-tracing',

src/theme/DocSidebarItem/Link/index.tsx

@@ -53,18 +53,29 @@ export default function DocSidebarItemLink({
 
         {
           // BEGIN SWIZZLED CODE
-          isStringArray(customProps?.tags) && (
-            <ul className={styles.tagContainer}>
-              {customProps.tags.map((tag) => (
-                <li
-                  className={clsx('badge', styles.badge, styles[tag])}
-                  key={tag}
-                >
-                  <TagContent platform={tag} />
-                </li>
-              ))}
-            </ul>
-          )
+        }
+        {isStringArray(customProps?.platforms) && (
+          <ul className={styles.tagContainer}>
+            {customProps.platforms.map((tag) => (
+              <li
+                className={clsx('badge', styles.badge, styles[tag])}
+                key={tag}
+              >
+                <TagContent platform={tag} />
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {customProps?.deprecated && (
+          <ul className={styles.tagContainer}>
+            <li className={clsx('badge', styles.badge2, styles.deprecated)}>
+              Deprecated
+            </li>
+          </ul>
+        )}
+
+        {
           // END SWIZZLED CODE
         }
       </Link>

src/theme/DocSidebarItem/Link/styles.module.css

@@ -15,8 +15,12 @@
   width: 20px;
 }
 
+.badge2 {
+  font-style: italic;
+}
+
 .linux {
-  background: tomato;
+  background: coral;
 }
 
 .mac {
@@ -26,3 +30,7 @@
 .windows {
   background: dodgerblue;
 }
+
+.deprecated {
+  background: tomato;
+}

src/theme/README.md

@@ -24,17 +24,32 @@ passed in, so we must Swizzle.
 
 See: https://docusaurus.io/docs/sidebar#passing-custom-props
 
-The `customProps` object will accept a `tags` property of type
-`Array<'mac'|'windows'|'linux'>`. These will be rendered as SVG icons that are
-stored as static assets in `static/assets/img/`.
+The `customProps` object will accept:
+
+A `platforms` property of type `Array<'mac'|'windows'|'linux'>`.
+These will be rendered as SVG icons that are stored as static assets in `static/assets/img/`.
 
 ```js
 // sidebars.js
 {
   type: 'doc',
   id: 'doc1',
   customProps: {
-    tags: ['mac', 'windows', 'linux']
+    platforms: ['mac', 'windows', 'linux']
+  },
+};
+```
+
+A `deprecated` property of type `boolean`. This will mark a specific API as deprecated in the
+sidebar if the entire module is deprecated.
+
+```js
+// sidebars.js
+{
+  type: 'doc',
+  id: 'doc2',
+  customProps: {
+    deprecated: true
   },
 };
 ```