Removing unsafe old navbar and doc swizzles, adding authors component

Author: wjohnsto

docs/create/windows/index-windows.mdx

@@ -10,6 +10,9 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import RedisCard from '@site/src/theme/RedisCard';
+import Authors from '@site/src/theme/Authors';
+
+<Authors frontMatter={frontMatter} />
 
 You can run Redis on Windows 10 using Windows Subsystem for Linux(a.k.a WSL2). WSL2 is a compatibility layer for running Linux binary executables natively on Windows 10 and Windows Server 2019. WSL2 lets developers run a GNU/Linux environment (that includes command-line tools, utilities, and applications) directly on Windows.
 
@@ -31,7 +34,7 @@ Reboot Windows after making the change — note that you only need to do this on
  start ms-windows-store:
 ```
 
-Then search for Ubuntu, or your preferred distribution of Linux, and download the latest version. 
+Then search for Ubuntu, or your preferred distribution of Linux, and download the latest version.
 
 ### Step 3: Install Redis server
 

docusaurus.config.js

@@ -2,14 +2,22 @@ const path = require('path');
 
 module.exports = {
   title: 'The Home of Redis Developers',
-  tagline: 'Learn all the best practices to get up and running with Redis in no time. Get started and discover the power of Redis, whether on your local machines or in the cloud.',
+  tagline:
+    'Learn all the best practices to get up and running with Redis in no time. Get started and discover the power of Redis, whether on your local machines or in the cloud.',
   url: 'https://developer.redis.com',
   baseUrl: '/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
   organizationName: 'redis-developer', // Usually your GitHub org/user name.
   projectName: 'redis-developer', // Usually your repo name.
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
   customFields: {
     authors: {
       simon: {
@@ -160,136 +168,143 @@ module.exports = {
       },
     },
   },
-  themeConfig: {
-    // ...
-    googleTagManager: {
-      trackingID: 'GTM-W8Z6BLQ',
-    },
-    prism: {
-      additionalLanguages: [
-        'csharp',
-        'php',
-        'ruby',
-        'java',
-        'rust',
-        'elixir',
-        'groovy',
-      ],
-    },
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      // ...
+      googleTagManager: {
+        trackingID: 'GTM-W8Z6BLQ',
+      },
+      prism: {
+        additionalLanguages: [
+          'csharp',
+          'php',
+          'ruby',
+          'java',
+          'rust',
+          'elixir',
+          'groovy',
+        ],
+      },
 
-    navbar: {
-      style: 'dark',
-      title: null,
-      logo: {
-        alt: 'Redis Developer Hub logo',
-        src: 'img/logo-1.png',
-      },
-      hideOnScroll: true,
-      items: [
-        {
-          to: '/create/rediscloud',
-          activeBasePath: 'docs',
-          label: 'Get started',
-          position: 'right',
-        },
-        {
-          href: 'https://launchpad.redis.com',
-          label: 'Redis Launchpad',
-          position: 'right',
-        },
-        {
-          href: 'https://redis.com/try-free/',
-          label: 'Try Free',
-          position: 'right',
-        },
-      ],
-    },
-    footer: {
-      style: 'dark',
-      logo: {
-        alt: 'Redis logo',
-        src: 'img/redis_logo_red_white_rgb.svg',
-        href: 'https://redis.com/',
-      },
-      links: [
-        {
-          title: 'Get Started',
-          items: [
-            {
-              label: 'Create Database',
-              to: '/create/rediscloud',
-            },
-            {
-              label: 'Develop',
-              to: '/develop/',
-            },
-            {
-              label: 'Explore your data',
-              to: '/explore/redisinsight/',
-            },
-            {
-              label: 'Best Practices',
-              href: 'https://redis.com/redis-best-practices/introduction/',
-            },
-            // {
-            //   label: 'Tutorials',
-            //   to: '#',
-            // },
-            // {
-            //   label: 'Samples & Demos',
-            //   to: '#',
-            // },
-            {
-              label: 'Redis Stack',
-              href: '/create/redis-stack/',
-            },
-          ],
+      navbar: {
+        style: 'dark',
+        title: null,
+        logo: {
+          alt: 'Redis Developer Hub logo',
+          src: 'img/logo-1.png',
         },
-        {
-          title: 'Resources',
-          items: [
-            {
-              label: 'Community',
-              href: 'https://redis.com/community/',
-            },
-            {
-              label: 'Redis University',
-              href: 'https://university.redis.com',
-            },
-            {
-              label: 'Command Reference',
-              href: 'https://redis.io/commands',
-            },
-            {
-              label: 'How-tos & tutorials',
-              to: '/howtos',
-            },
-            //   label: 'Use Cases',
-            //   href: 'https://redis.com/solutions',
-            // },
-          ],
+        hideOnScroll: true,
+        items: [
+          {
+            type: 'search',
+            position: 'right',
+          },
+          {
+            to: '/create/rediscloud',
+            activeBasePath: 'docs',
+            label: 'Get started',
+            position: 'right',
+          },
+          {
+            href: 'https://launchpad.redis.com',
+            label: 'Redis Launchpad',
+            position: 'right',
+          },
+          {
+            href: 'https://redis.com/try-free/',
+            label: 'Try Free',
+            position: 'right',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        logo: {
+          alt: 'Redis logo',
+          src: 'img/redis_logo_red_white_rgb.svg',
+          href: 'https://redis.com/',
         },
-      ],
-      copyright: `Copyright: © ${new Date().getFullYear()} Redis. All rights reserved. Redis and the cube logo are registered trademarks of Redis Ltd.`,
-    },
-    colorMode: {
-      // Hides the switch in the navbar
-      // Useful if you want to support a single color mode
-      disableSwitch: false,
-    },
-    announcementBar: {
-      id: 'redisconf20201cfp', // Any value that will identify this message.
-      content:
-        '<p class="text"> RedisDays Available Now On-Demand. </p> <a href="https://redis.com/redisdays/" target="_blank" rel="noopener" class="btn">Learn More</a>',
-      //  content: '<p class="text"></p> <a href="https://redislabs.com/redisconf/" target="_blank" rel="noopener" class="btn"></a>',
-      backgroundColor: '#fff', // Defaults to `#fff`.
-      textColor: '#000', // Defaults to `#000`.
-      isCloseable: true, // Defaults to `true`.
-    },
-  },
+        links: [
+          {
+            title: 'Get Started',
+            items: [
+              {
+                label: 'Create Database',
+                to: '/create/rediscloud',
+              },
+              {
+                label: 'Develop',
+                to: '/develop/',
+              },
+              {
+                label: 'Explore your data',
+                to: '/explore/redisinsight/',
+              },
+              {
+                label: 'Best Practices',
+                href: 'https://redis.com/redis-best-practices/introduction/',
+              },
+              // {
+              //   label: 'Tutorials',
+              //   to: '#',
+              // },
+              // {
+              //   label: 'Samples & Demos',
+              //   to: '#',
+              // },
+              {
+                label: 'Redis Stack',
+                href: '/create/redis-stack/',
+              },
+            ],
+          },
+          {
+            title: 'Resources',
+            items: [
+              {
+                label: 'Community',
+                href: 'https://redis.com/community/',
+              },
+              {
+                label: 'Redis University',
+                href: 'https://university.redis.com',
+              },
+              {
+                label: 'Command Reference',
+                href: 'https://redis.io/commands',
+              },
+              {
+                label: 'How-tos & tutorials',
+                to: '/howtos',
+              },
+              //   label: 'Use Cases',
+              //   href: 'https://redis.com/solutions',
+              // },
+            ],
+          },
+        ],
+        copyright: `Copyright: © ${new Date().getFullYear()} Redis. All rights reserved. Redis and the cube logo are registered trademarks of Redis Ltd.`,
+      },
+      colorMode: {
+        // Hides the switch in the navbar
+        // Useful if you want to support a single color mode
+        disableSwitch: false,
+      },
+      announcementBar: {
+        id: 'redisconf20201cfp', // Any value that will identify this message.
+        content:
+          '<p class="text"> RedisDays Available Now On-Demand. </p> <a href="https://redis.com/redisdays/" target="_blank" rel="noopener" class="btn">Learn More</a>',
+        //  content: '<p class="text"></p> <a href="https://redislabs.com/redisconf/" target="_blank" rel="noopener" class="btn"></a>',
+        backgroundColor: '#fff', // Defaults to `#fff`.
+        textColor: '#000', // Defaults to `#000`.
+        isCloseable: true, // Defaults to `true`.
+      },
+    }),
   presets: [
     [
-      '@docusaurus/preset-classic',
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
       {
         docs: {
           routeBasePath: '/',
@@ -315,7 +330,7 @@ module.exports = {
             '**/*.test.{js,jsx,ts,tsx}',
             '**/__tests__/**',
           ],
-        //   mdxPageComponent: '@theme/MDXPage',
+          mdxPageComponent: '@theme/MDXPage',
           remarkPlugins: [],
           rehypePlugins: [],
           beforeDefaultRemarkPlugins: [],

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Layout from '@docusaurus/theme-classic/lib/theme/Layout';
+import Layout from '@theme/Layout';
 
 import Hero from '@site/src/theme/Hero';
 import Languages from '@site/src/theme/Languages';

src/theme/DocItem/index.tsx src/theme/Authors/index.tsx

@@ -1,34 +1,28 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 import React from 'react';
-
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import DocItem from '@docusaurus/theme-classic/lib/theme/DocItem';
-import type { Props } from '@theme/DocItem';
 import styles from './styles.module.css';
 
-function DocItemWrapper(props: Props): JSX.Element {
+interface AuthorsProps {
+  frontMatter: {
+    authors?: string[];
+  };
+}
+
+function Authors({ frontMatter }: AuthorsProps): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
-  const { content: DocContent } = props;
   const authorLookup: Record<
     string,
     { link: string; name: string; title: string; image: string }
   > = (siteConfig.customFields as any).authors;
 
   return (
     <>
-      {(DocContent.frontMatter as any).authors && (
+      {frontMatter.authors && (
         <div className="docAuthors">
           <hr />
-          {/* eslint-disable-next-line @typescript-eslint/no-unsafe-call */}
-          {(DocContent.frontMatter as any).authors.map((author: string) => {
+          {frontMatter.authors.map((author) => {
             return (
-              <div className={styles.authorByline}>
+              <div key={author} className={styles.authorByline}>
                 <img
                   className={styles.authorProfileImage}
                   src={`/img/${
@@ -53,9 +47,8 @@ function DocItemWrapper(props: Props): JSX.Element {
           <hr />
         </div>
       )}
-      <DocItem {...props} />
     </>
   );
 }
 
-export default DocItemWrapper;
+export default Authors;