docs: add beta flag in nav and page header

Author: KaneFreeman

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') {

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;

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>
             );

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>
   );

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 {

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[]>);

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,
     },