[WIP][docs] Move blog to app

docs/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

docs/app/Box.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import MuiBox from '@mui/material/Box';
+
+export default function Box(props) {
+  return <MuiBox {...props} />;
+}

docs/app/BrandingProvider.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import DocsBrandingProvider from 'docs/src/BrandingProvider';
+
+export default function BrandingProvider(props) {
+  return <DocsBrandingProvider {...props} />;
+}

docs/app/Divider.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import MuiDivider from '@mui/material/Divider';
+
+export default function Divider(props) {
+  return <MuiDivider {...props} />;
+}

docs/app/EmotionRootStyleRegistry.tsx

@@ -0,0 +1,61 @@
+'use client';
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { useState } from 'react';
+import BrandingProvider from './BrandingProvider';
+// import { ThemeProvider, createTheme } from '@mui/material/styles';
+// import { green, deepPurple } from '@mui/material/colors';
+
+// const theme = createTheme({
+//   palette: {
+//     primary: green,
+//     secondary: deepPurple
+//   }
+// });
+
+export default function RootStyleRegistry({ children }: { children: JSX.Element }) {
+  const [{ cache, flush }] = useState(() => {
+    const cache = createCache({ key: 'my' });
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) return null;
+    let styles = '';
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <BrandingProvider>{children}</BrandingProvider>
+    </CacheProvider>
+  );
+}

docs/app/GradientText.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import DocsGradientText from 'docs/src/components/typography/GradientText';
+
+export default function GradientText(props) {
+  return <DocsGradientText {...props} />;
+}

docs/app/Paper.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import MuiPaper from '@mui/material/Paper';
+
+export default function Paper(props) {
+  return <MuiPaper {...props} />;
+}

docs/app/Section.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import DocsSection from 'docs/src/layouts/Section';
+
+export default function Section(props) {
+  return <DocsSection {...props} />;
+}

docs/app/blog/AppFooter.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import DocsAppFooter from 'docs/src/layouts/AppFooter';
+
+export default function AppFooter(props) {
+  return <DocsAppFooter {...props} />;
+}

docs/app/blog/AppHeader.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import DocsAppHeader from 'docs/src/layouts/AppHeader';
+
+export default function AppHeader(props) {
+  return <DocsAppHeader {...props} />;
+}

docs/app/blog/ClientComponent.tsx

@@ -0,0 +1,12 @@
+'use client';
+import * as React from 'react';
+import Button, { ButtonProps } from '@mui/material/Button';
+
+export default function ClientComponent() {
+  const [color, setColor] = React.useState<ButtonProps['color']>('primary');
+  return (
+    <Button color={color} onClick={() => setColor(color === 'primary' ? 'secondary' : 'primary')}>
+      ClientComponent
+    </Button>
+  );
+}

docs/app/blog/Head.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import * as React from 'react';
+import NextHead from 'next/head';
+import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
+
+// #major-version-switch
+const HOST = 'https://mui.com';
+
+interface HeadProps {
+  card?: string;
+  children?: React.ReactNode;
+  description: string;
+  disableAlternateLocale?: boolean;
+  largeCard?: boolean;
+  title: string;
+  type?: string;
+}
+
+export default function Head(props: HeadProps) {
+  const t = useTranslate();
+  const {
+    card = '/static/social-previews/default-preview.jpg',
+    children,
+    description = t('strapline'),
+    disableAlternateLocale = false,
+    largeCard = true,
+    title = t('headTitle'),
+    type = 'website',
+  } = props;
+  const userLanguage = useUserLanguage();
+  const preview = card.startsWith('http') ? card : `${HOST}${card}`;
+
+  return (
+    <NextHead>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      {/* Twitter */}
+      <meta name="twitter:card" content={largeCard ? 'summary_large_image' : 'summary'} />
+      {/* https://twitter.com/MUI_hq */}
+      <meta name="twitter:site" content="@MUI_hq" />
+      {/* #major-version-switch */}
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={preview} />
+      {/* Facebook */}
+      <meta property="og:type" content={type} />
+      <meta property="og:title" content={title} />
+      {/* #major-version-switch */}
+      <meta property="og:url" content={`${HOST}`} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={preview} />
+      <meta property="og:ttl" content="604800" />
+      {/* Algolia */}
+      <meta name="docsearch:language" content={userLanguage} />
+      {/* #major-version-switch */}
+      <meta name="docsearch:version" content="master" />
+      {children}
+    </NextHead>
+  );
+}

docs/app/blog/HeroEnd.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import DocsHeroEnd from 'docs/src/components/home/HeroEnd';
+
+export default function HeroEnd(props) {
+  return <DocsHeroEnd {...props} />;
+}

docs/app/blog/Link.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import { usePathname } from 'next/navigation';
+import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+import { useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { LANGUAGES_IGNORE_PAGES } from 'docs/src/modules/constants';
+
+/**
+ * File to keep in sync with:
+ *
+ * - /docs/src/modules/components/Link.tsx
+ * - /examples/nextjs/src/Link.js
+ * - /examples/nextjs-with-typescript/src/Link.tsx
+ */
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled('a')({});
+
+interface NextLinkComposedProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
+    Omit<NextLinkProps, 'href' | 'as' | 'passHref' | 'onMouseEnter' | 'onClick' | 'onTouchStart'> {
+  to: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as'];
+}
+
+const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
+  function NextLinkComposed(props, ref) {
+    const {
+      to,
+      linkAs,
+      replace,
+      scroll,
+      shallow,
+      prefetch,
+      legacyBehavior = true,
+      locale,
+      ...other
+    } = props;
+
+    return (
+      <NextLink
+        href={to}
+        prefetch={prefetch}
+        as={linkAs}
+        replace={replace}
+        scroll={scroll}
+        shallow={shallow}
+        passHref
+        locale={locale}
+        legacyBehavior={legacyBehavior}
+      >
+        <Anchor data-no-markdown-link="true" ref={ref} {...other} />
+      </NextLink>
+    );
+  },
+);
+
+export type LinkProps = {
+  activeClassName?: string;
+  as?: NextLinkProps['as'];
+  href: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as']; // Useful when the as prop is shallow by styled().
+  noLinkStyle?: boolean;
+} & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> &
+  Omit<MuiLinkProps, 'href'>;
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/api-reference/next/link
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {
+  const {
+    activeClassName = 'active',
+    as,
+    className: classNameProps,
+    href,
+    legacyBehavior,
+    linkAs: linkAsProp,
+    locale,
+    noLinkStyle,
+    prefetch,
+    replace,
+    role, // Link don't have roles.
+    scroll,
+    shallow,
+    ...other
+  } = props;
+
+  const nextPathname = usePathname();
+
+  const pathname = typeof href === 'string' ? href : href.pathname;
+  const className = clsx(classNameProps, {
+    [activeClassName]: nextPathname && nextPathname === pathname && activeClassName,
+  });
+
+  const isExternal =
+    typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0);
+  const userLanguage = useUserLanguage();
+
+  if (isExternal) {
+    if (noLinkStyle) {
+      return <Anchor className={className} href={href} ref={ref} {...other} />;
+    }
+
+    return <MuiLink className={className} href={href} ref={ref} {...other} />;
+  }
+
+  let linkAs = linkAsProp || as || (href as string);
+  if (
+    userLanguage !== 'en' &&
+    pathname &&
+    pathname.indexOf('/') === 0 &&
+    !LANGUAGES_IGNORE_PAGES(pathname) &&
+    !pathname.startsWith(`/${userLanguage}/`)
+  ) {
+    linkAs = `/${userLanguage}${linkAs}`;
+  }
+
+  const nextjsProps = {
+    to: href,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    legacyBehavior,
+    prefetch,
+    locale,
+  };
+
+  if (noLinkStyle) {
+    return <NextLinkComposed className={className} ref={ref} {...nextjsProps} {...other} />;
+  }
+
+  return (
+    <MuiLink
+      component={NextLinkComposed}
+      className={className}
+      ref={ref}
+      {...nextjsProps}
+      {...other}
+    />
+  );
+});
+
+export default Link;