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

packages/docs/content/docs/netlify-large-media.mdx

@@ -2,9 +2,14 @@
 group: Media
 title: Netlify Large Media
 weight: 20
+deprecated: true
 ---
 
-## <img 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" />
+<Alert severity="warning">
+  Netlify Large Media is deprecated as of September 1, 2023. Please refer to the deprecation notice
+  in [Netlify's Support Forums](https://docs.netlify.com/large-media/overview/) (see deprecation
+  notice).
+</Alert>
 
 [Netlify Large Media](https://www.netlify.com/features/large-media/) is a [Git LFS](https://git-lfs.github.com/) implementation for repositories connected to Netlify sites. This means that you can use Git to work with large asset files like images, audio, and video, without bloating your repository. It does this by replacing the asset files in your repository with text pointer files, then uploading the assets to the Netlify Large Media storage service.
 

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