diff --git a/docs/pages/experiments/docs/callouts.js b/docs/pages/experiments/docs/callouts.js
index 5d971e7e051592..d9190aab01cee4 100644
--- a/docs/pages/experiments/docs/callouts.js
+++ b/docs/pages/experiments/docs/callouts.js
@@ -1,7 +1,7 @@
import * as React from 'react';
-import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
import { docs } from './callouts.md?@mui/markdown';
export default function Page() {
- return ;
+ return ;
}
diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.tsx
similarity index 87%
rename from docs/src/modules/components/Head.js
rename to docs/src/modules/components/Head.tsx
index a4a01f637fb552..fc9e8ef9b88c5e 100644
--- a/docs/src/modules/components/Head.js
+++ b/docs/src/modules/components/Head.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
import NextHead from 'next/head';
import { useRouter } from 'next/router';
-import PropTypes from 'prop-types';
import { LANGUAGES_SSR } from 'docs/src/modules/constants';
import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
@@ -9,7 +8,17 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
// #major-version-switch
const HOST = 'https://mui.com';
-export default function Head(props) {
+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',
@@ -18,11 +27,12 @@ export default function Head(props) {
disableAlternateLocale = false,
largeCard = true,
title = t('headTitle'),
+ type = 'website',
} = props;
const userLanguage = useUserLanguage();
const router = useRouter();
- const preview = card.startsWith('http') ? card : `${HOST}${card}`;
const { canonicalAs } = pathnameToLanguage(router.asPath);
+ const preview = card.startsWith('http') ? card : `${HOST}${card}`;
return (
@@ -37,7 +47,7 @@ export default function Head(props) {
{/* Facebook */}
-
+
{/* #major-version-switch */}
@@ -64,12 +74,3 @@ export default function Head(props) {
);
}
-
-Head.propTypes = {
- card: PropTypes.string,
- children: PropTypes.node,
- description: PropTypes.string,
- disableAlternateLocale: PropTypes.bool,
- largeCard: PropTypes.bool,
- title: PropTypes.string,
-};
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 5a92529ef04e8c..b54db12a477753 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -1,20 +1,21 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled, alpha } from '@mui/material/styles';
+import { useRouter } from 'next/router';
+import { exactProp } from '@mui/utils';
+import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
import Head from 'docs/src/modules/components/Head';
import BrandingProvider from 'docs/src/BrandingProvider';
import AppHeader from 'docs/src/layouts/AppHeader';
import AppContainer from 'docs/src/modules/components/AppContainer';
import AppFooter from 'docs/src/layouts/AppFooter';
import HeroEnd from 'docs/src/components/home/HeroEnd';
-import { useRouter } from 'next/router';
-import { exactProp } from '@mui/utils';
-import Divider from '@mui/material/Divider';
-import Typography from '@mui/material/Typography';
-import Avatar from '@mui/material/Avatar';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import ROUTES from 'docs/src/route';
-import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
import Link from 'docs/src/modules/components/Link';
export const authors = {
@@ -213,6 +214,11 @@ function TopLayoutBlog(props) {
const { description, rendered, title, headers } = docs.en;
const finalTitle = title || headers.title;
const router = useRouter();
+ const { canonicalAs } = pathnameToLanguage(router.asPath);
+ const card =
+ headers.card === 'true'
+ ? `https://mui.com/static${router.pathname}/card.png`
+ : 'https://mui.com/static/logo.png';
return (
@@ -222,11 +228,8 @@ function TopLayoutBlog(props) {
description={description}
largeCard={headers.card === 'true'}
disableAlternateLocale
- card={
- headers.card === 'true'
- ? `https://mui.com/static${router.pathname}/card.png`
- : 'https://mui.com/static/logo.png'
- }
+ card={card}
+ type="article"
/>
@@ -293,6 +296,56 @@ function TopLayoutBlog(props) {
+
);
}