chore: add deprecation notice to netlify large media docs (#948)

packages/docs/src/components/docs/DeprecatedImage.tsx

@@ -0,0 +1,35 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+const DeprecatedImage = () => {
+  return (
+    <Box
+      title="Beta Feature. Use at your own risk"
+      sx={{
+        width: 81,
+        height: 20,
+        background: '#ffa726',
+        borderRadius: 1,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Typography
+        variant="caption"
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontWeight: 'bold',
+          lineHeight: '20px',
+          color: 'white',
+        }}
+      >
+        Deprecated
+      </Typography>
+    </Box>
+  );
+};
+
+export default DeprecatedImage;

packages/docs/src/components/docs/DocsLeftNavGroup.tsx

@@ -9,6 +9,7 @@ import { useRouter } from 'next/router';
 import { useState } from 'react';
 
 import BetaImage from './BetaImage';
+import DeprecatedImage from './DeprecatedImage';
 
 import type { DocsGroupLink } from '../../interface';
 
@@ -66,7 +67,7 @@ const DocsLeftNavGroup = ({ name, links }: DocsLeftNavGroupProps) => {
                   primary={
                     <StyledListItemPrimary>
                       {link.title}
-                      {link.beta ? <BetaImage /> : null}
+                      {link.deprecated ? <DeprecatedImage /> : link.beta ? <BetaImage /> : null}
                     </StyledListItemPrimary>
                   }
                 />

packages/docs/src/components/layout/Header.tsx

@@ -134,6 +134,7 @@ const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderPr
             title: link.title,
             url: `/docs/${link.slug}`,
             beta: link.beta,
+            deprecated: link.deprecated,
           })),
         })),
       },

packages/docs/src/components/layout/mobile-drawer/MobileNavLink.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import { useMemo } from 'react';
 
 import BetaImage from '../../docs/BetaImage';
+import DeprecatedImage from '../../docs/DeprecatedImage';
 
 import type { MouseEvent } from 'react';
 import type { MenuLink } from '../../../interface';
@@ -15,7 +16,7 @@ interface MobileNavLinkProps {
 }
 
 const MobileNavLink = ({ link, onClick }: MobileNavLinkProps) => {
-  const { title, url, beta = false } = link;
+  const { title, url, beta = false, deprecated = false } = link;
   const { asPath } = useRouter();
 
   const selected = useMemo(() => {
@@ -35,7 +36,7 @@ const MobileNavLink = ({ link, onClick }: MobileNavLinkProps) => {
         primary={
           <>
             {title}
-            {beta ? <BetaImage /> : null}
+            {deprecated ? <DeprecatedImage /> : beta ? <BetaImage /> : null}
           </>
         }
         primaryTypographyProps={{

packages/docs/src/interface.ts

@@ -76,6 +76,7 @@ export interface DocsData {
   readonly weight: number;
   readonly slug: string;
   readonly beta?: boolean;
+  readonly deprecated?: boolean;
 }
 
 export interface DocsPageHeading {
@@ -95,6 +96,7 @@ export interface DocsGroupLink {
   readonly title: string;
   readonly slug: string;
   readonly beta: boolean;
+  readonly deprecated: boolean;
 }
 
 export interface DocsGroup {
@@ -133,6 +135,7 @@ export interface MenuLink {
   readonly title: string;
   readonly url: string;
   readonly beta?: boolean;
+  readonly deprecated?: boolean;
 }
 
 export interface MenuLinkSubGroup {

packages/docs/src/lib/docs.ts

@@ -137,6 +137,7 @@ export function fetchDocsContent(): [DocsPage[], DocsGroup[]] {
       title: doc.data.title,
       slug: doc.data.slug,
       beta: doc.data.beta ?? false,
+      deprecated: doc.data.deprecated ?? false,
     });
     return acc;
   }, {} as Record<string, DocsGroupLink[]>);

packages/docs/src/pages/docs/[doc].tsx

@@ -4,6 +4,7 @@ import { serialize } from 'next-mdx-remote/serialize';
 import remarkGfm from 'remark-gfm';
 
 import BetaImage from '../../components/docs/BetaImage';
+import DeprecatedImage from '../../components/docs/DeprecatedImage';
 import DocsContent from '../../components/docs/DocsContent';
 import DocsLeftNav from '../../components/docs/DocsLeftNav';
 import DocsRightNav from '../../components/docs/DocsRightNav';
@@ -81,6 +82,7 @@ interface DocsProps {
   title: string;
   slug: string;
   beta: boolean;
+  deprecated: boolean;
   description: string;
   source: MDXRemoteSerializeResult;
 }
@@ -93,6 +95,7 @@ const Docs = ({
   description,
   source,
   beta,
+  deprecated,
 }: DocsProps) => {
   const theme = useTheme();
 
@@ -111,7 +114,7 @@ const Docs = ({
           <DocsContent>
             <Header1>
               {title}
-              {beta ? <BetaImage /> : null}
+              {deprecated ? <DeprecatedImage /> : beta ? <BetaImage /> : null}
             </Header1>
             <MDXRemote
               {...source}
@@ -134,6 +137,7 @@ const Docs = ({
                 Template,
                 Templates,
                 BetaImage,
+                DeprecatedImage,
                 Deprecated,
               }}
             />
@@ -186,6 +190,7 @@ export const getStaticProps: GetStaticProps = async ({ params }): Promise<{ prop
       title: data.title,
       slug: data.slug,
       beta: data.beta ?? false,
+      deprecated: data.deprecated ?? false,
       description: '',
       source,
     },