update social preview images

mui · Sep 15, 2021 · 2c23853 · 2c23853
1 parent 0ebdece
commit 2c23853
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 5 deletions.
diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx
@@ -17,6 +17,7 @@ export default function Home() {
       <Head
         title="MUI: Ready to use components, free forever"
         description="Get a growing list of components, ready to use, free forever and with accessibility always in mind. We've built the foundational UI blocks for your design system so you don't have to."
+        card="/static/social-previews/core-preview.jpg"
       />
       <CssBaseline />
       <AppHeader />

diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx
@@ -17,6 +17,7 @@ export default function DesignKits() {
       <Head
         title="MUI in your favorite design tool."
         description="Pick your favorite design tool to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers."
+        card="/static/social-previews/designkits-preview.jpg"
       />
       <AppHeader />
       <main>

diff --git a/docs/pages/templates.tsx b/docs/pages/templates.tsx
@@ -16,6 +16,7 @@ export default function Templates() {
       <Head
         title="MUI: Fully built templates for your app."
         description="A collection of 4.5 average rating templates, selected and curated by MUI's team of maintainers to get your projects up and running today."
+        card="/static/social-previews/templates-preview.jpg"
       />
       <AppHeader />
       <main>

diff --git a/docs/pages/x.tsx b/docs/pages/x.tsx
@@ -17,6 +17,7 @@ export default function Home() {
       <Head
         title="MUI: Performant advanced components."
         description="We are kicking it off with the most powerful Data Grid on the market and there's a lot more to come. Build complex applications with our advanced components."
+        card="/static/social-previews/x-preview.jpg"
       />
       <CssBaseline />
       <AppHeader />

diff --git a/docs/public/static/branding/card.jpeg b/docs/public/static/branding/card.jpeg
diff --git a/docs/public/static/social-previews/core-preview.jpg b/docs/public/static/social-previews/core-preview.jpg
diff --git a/docs/public/static/social-previews/default-preview.jpg b/docs/public/static/social-previews/default-preview.jpg
diff --git a/docs/public/static/social-previews/designkits-preview.jpg b/docs/public/static/social-previews/designkits-preview.jpg
diff --git a/docs/public/static/social-previews/templates-preview.jpg b/docs/public/static/social-previews/templates-preview.jpg
diff --git a/docs/public/static/social-previews/x-preview.jpg b/docs/public/static/social-previews/x-preview.jpg
diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
@@ -4,38 +4,41 @@ import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
+const HOST = 'https://mui.com';
+
 export default function Head(props) {
   const t = useTranslate();
   const {
     // #major-version-switch
-    card = 'https://material-ui.com/static/branding/card.jpeg',
+    card = '/static/social-previews/default-preview.jpg',
     children,
     description = t('strapline'),
     largeCard = true,
     title = t('headTitle'),
   } = props;
   const userLanguage = useUserLanguage();
   const router = useRouter();
-
+  const preview = card.startsWith('http') ? card : `${HOST}${card}`;
   return (
     <NextHead>
       <meta name="viewport" content="initial-scale=1, width=device-width" />
       <title>{title}</title>
       <meta name="description" content={description} />
       {/* Twitter */}
       <meta name="twitter:card" content={largeCard ? 'summary_large_image' : 'summary'} />
+      {/* https://twitter.com/MaterialUI */}
       <meta name="twitter:site" content="@MaterialUI" />
       {/* #major-version-switch */}
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={card} />
+      <meta name="twitter:image" content={preview} />
       {/* Facebook */}
       <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
       {/* #major-version-switch */}
-      <meta property="og:url" content={`https://material-ui.com${router.asPath}`} />
+      <meta property="og:url" content={`${HOST}${router.asPath}`} />
       <meta property="og:description" content={description} />
-      <meta property="og:image" content={card} />
+      <meta property="og:image" content={preview} />
       <meta property="og:ttl" content="604800" />
       {/* Algolia */}
       <meta name="docsearch:language" content={userLanguage} />