From c4733caf8408e41bc050a02775ae856f8dccc8ae Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Tue, 17 Jan 2023 08:36:46 -0500
Subject: [PATCH] docs: add beta flag in nav and page header

---
 packages/docs/next.config.js                    | 10 ++++++++++
 packages/docs/src/components/docs/BetaImage.tsx | 15 +++++++++++++++
 .../src/components/docs/DocsLeftNavGroup.tsx    | 17 +++++++++++++++--
 .../docs/components/headers/Header1.tsx         |  2 +-
 packages/docs/src/interface.ts                  |  2 ++
 packages/docs/src/lib/docs.ts                   |  1 +
 packages/docs/src/pages/docs/[doc].tsx          | 13 ++++++++++---
 7 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 packages/docs/src/components/docs/BetaImage.tsx

diff --git a/packages/docs/next.config.js b/packages/docs/next.config.js
index 901488fa..6cde365a 100644
--- a/packages/docs/next.config.js
+++ b/packages/docs/next.config.js
@@ -18,6 +18,16 @@ let config = {
   redirects: async () => {
     return redirects;
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'img.shields.io',
+        port: '',
+        pathname: '/badge/**',
+      },
+    ],
+  },
 }
 
 if (process.env.NODE_ENV === 'production') {
diff --git a/packages/docs/src/components/docs/BetaImage.tsx b/packages/docs/src/components/docs/BetaImage.tsx
new file mode 100644
index 00000000..c61196b2
--- /dev/null
+++ b/packages/docs/src/components/docs/BetaImage.tsx
@@ -0,0 +1,15 @@
+import Image from 'next/image';
+
+const BetaImage = () => {
+  return (
+    <Image
+      src="https://img.shields.io/badge/-Beta%20Feature-blue"
+      alt="Beta Feature. Use at your own risk"
+      title="Beta Feature. Use at your own risk"
+      width={81}
+      height={20}
+    />
+  );
+};
+
+export default BetaImage;
diff --git a/packages/docs/src/components/docs/DocsLeftNavGroup.tsx b/packages/docs/src/components/docs/DocsLeftNavGroup.tsx
index a7914e5b..9b79e4e3 100644
--- a/packages/docs/src/components/docs/DocsLeftNavGroup.tsx
+++ b/packages/docs/src/components/docs/DocsLeftNavGroup.tsx
@@ -3,13 +3,21 @@ import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
+import BetaImage from './BetaImage';
+
 import type { DocsGroupLink } from '../../interface';
 
+const StyledListItemPrimary = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
 export interface DocsLeftNavGroupProps {
   name: string;
   links: DocsGroupLink[];
@@ -54,7 +62,12 @@ const DocsLeftNavGroup = ({ name, links }: DocsLeftNavGroupProps) => {
                     color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
                     fontWeight: selected ? 600 : 400,
                   }}
-                  primary={link.title}
+                  primary={
+                    <StyledListItemPrimary>
+                      {link.title}
+                      {link.beta ? <BetaImage /> : null}
+                    </StyledListItemPrimary>
+                  }
                 />
               </ListItemButton>
             );
diff --git a/packages/docs/src/components/docs/components/headers/Header1.tsx b/packages/docs/src/components/docs/components/headers/Header1.tsx
index f08e8f1e..f5611a6c 100644
--- a/packages/docs/src/components/docs/components/headers/Header1.tsx
+++ b/packages/docs/src/components/docs/components/headers/Header1.tsx
@@ -14,7 +14,7 @@ const Header1 = ({ children }: Header1Props) => {
   const anchor = useAnchor(textContent);
 
   return (
-    <Typography variant="h1" id={anchor}>
+    <Typography variant="h1" id={anchor} sx={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
       {children}
     </Typography>
   );
diff --git a/packages/docs/src/interface.ts b/packages/docs/src/interface.ts
index 64554d1c..82871bfd 100644
--- a/packages/docs/src/interface.ts
+++ b/packages/docs/src/interface.ts
@@ -74,6 +74,7 @@ export interface DocsData {
   readonly title: string;
   readonly weight: number;
   readonly slug: string;
+  readonly beta?: boolean;
 }
 
 export interface DocsPageHeading {
@@ -92,6 +93,7 @@ export interface DocsPage {
 export interface DocsGroupLink {
   readonly title: string;
   readonly slug: string;
+  readonly beta: boolean;
 }
 
 export interface DocsGroup {
diff --git a/packages/docs/src/lib/docs.ts b/packages/docs/src/lib/docs.ts
index 7f447fcf..9c11cacf 100644
--- a/packages/docs/src/lib/docs.ts
+++ b/packages/docs/src/lib/docs.ts
@@ -136,6 +136,7 @@ export function fetchDocsContent(): [DocsPage[], DocsGroup[]] {
     acc[doc.data.group].push({
       title: doc.data.title,
       slug: doc.data.slug,
+      beta: doc.data.beta ?? false,
     });
     return acc;
   }, {} as Record<string, DocsGroupLink[]>);
diff --git a/packages/docs/src/pages/docs/[doc].tsx b/packages/docs/src/pages/docs/[doc].tsx
index e77e22d6..9dfd539e 100644
--- a/packages/docs/src/pages/docs/[doc].tsx
+++ b/packages/docs/src/pages/docs/[doc].tsx
@@ -4,6 +4,7 @@ import { MDXRemote } from 'next-mdx-remote';
 import { serialize } from 'next-mdx-remote/serialize';
 import remarkGfm from 'remark-gfm';
 
+import BetaImage from '../../components/docs/BetaImage';
 import Anchor from '../../components/docs/components/Anchor';
 import Blockquote from '../../components/docs/components/Blockquote';
 import CodeTabs from '../../components/docs/components/CodeTabs';
@@ -76,7 +77,8 @@ interface DocsProps {
   searchablePages: SearchablePage[];
   title: string;
   slug: string;
-  description?: string;
+  beta: boolean;
+  description: string;
   source: MDXRemoteSerializeResult;
 }
 
@@ -85,8 +87,9 @@ const Docs = ({
   searchablePages,
   title,
   slug,
-  description = '',
+  description,
   source,
+  beta,
 }: DocsProps) => {
   const theme = useTheme();
 
@@ -103,7 +106,10 @@ const Docs = ({
       <StyledDocsView className={theme.palette.mode}>
         <StyledDocsContentWrapper>
           <DocsContent>
-            <Header1>{title}</Header1>
+            <Header1>
+              {title}
+              {beta ? <BetaImage /> : null}
+            </Header1>
             <MDXRemote
               {...source}
               components={{
@@ -172,6 +178,7 @@ export const getStaticProps: GetStaticProps = async ({ params }): Promise<{ prop
       searchablePages: getSearchablePages(),
       title: data.title,
       slug: data.slug,
+      beta: data.beta ?? false,
       description: '',
       source,
     },