[docs] Deeper Diamond integration

Author: oliviertassinari

README.md

@@ -44,26 +44,21 @@ yarn add @material-ui/core
 
 Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
 
-## Supporting Material-UI
+## Who sponsors Material-UI?
 
-Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development helped by the support of these awesome [backers](https://material-ui.com/discover-more/backers/). If you'd like to join them, please consider:
-- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari).
-- [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui).
+### Diamond 💎
 
-#### What's the difference between Patreon and OpenCollective?
+*3/3 slots available*
 
-Funds donated via Patreon directly support [Olivier Tassinari](https://github.com/oliviertassinari)'s work on Material-UI.
-Funds donated via OpenCollective are managed transparently and will be used for compensating work and expenses for core team members.
-Your name/logo will receive proper recognition and exposure by donating on either platform.
+Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI.
+Please contact us at [email protected] to subscribe to this tier.
 
-### Gold Sponsors
-
-Gold Sponsors are those who have pledged $500/month and more to Material-UI.
+### Gold 🏆
 
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Get Professionally Supported Material-UI"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Enterprise-ready open source software"></a>
   <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code"></a>
 </p>
 
@@ -74,6 +69,8 @@ via [OpenCollective](https://opencollective.com/material-ui)
   <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.crosswordsolver.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/crosswordsolver/avatar.png" alt="crosswordsolver" title="Crossword Puzzle Solver" width="100" loading="lazy"></a>
 </p>
 
+Gold Sponsors are those who have pledged $500/month and more to Material-UI.
+
 ### There is more!
 
 See the full list of [our backers](https://material-ui.com/discover-more/backers/).
@@ -137,34 +134,6 @@ Please read the [changelog](https://github.com/mui-org/material-ui/releases).
 
 The future plans and high priority features and enhancements can be found in the [roadmap](https://material-ui.com/discover-more/roadmap/) file.
 
-## Thanks
-
-Material-UI is only made possible thanks to these great services that sponsor our core infrastructure:
-
-[<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" width="100">](https://github.com/)
-
-GitHub allows us to host the Git repository.
-
-[<img src="https://assets.brandfolder.com/otz6k5-cj8pew-e4rk9u/element.png?v=1501538594" width="120">](https://circleci.com/)
-
-CircleCI allows us to run the test suite.
-
-[<img src="https://cdn.netlify.com/15ecf59b59c9d04b88097c6b5d2c7e8a7d1302d0/1b6d6/img/press/logos/full-logo-light.svg" width="120">](https://www.netlify.com/)
-
-Netlify allows us to distribute the documentation.
-
-[<img src="https://support.crowdin.com/assets/logos/crowdin-logo1-small.png" width="120">](https://crowdin.com/)
-
-CrowdIn allows us to translate the documentation.
-
-[<img src="https://www.browserstack.com/images/mail/browserstack-logo-footer.png" width="120">](https://www.browserstack.com/)
-
-BrowserStack allows us to test in real browsers.
-
-[<img src="https://raw.githubusercontent.com/codecov/media/master/logos/icon-50.png" height="30">](https://codecov.io/)
-
-CodeCov allows us to monitor the test coverage.
-
 ## License
 
 This project is licensed under the terms of the

docs/pages/discover-more/backers.js

@@ -10,5 +10,5 @@ const reqSource = require.context(
 const reqPrefix = 'pages/discover-more/backers';
 
 export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+  return <MarkdownDocs req={req} reqSource={reqSource} disableAd reqPrefix={reqPrefix} />;
 }

docs/src/modules/components/AppDrawer.js

@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Drawer from '@material-ui/core/Drawer';
+import Box from '@material-ui/core/Box';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import Divider from '@material-ui/core/Divider';
 import Hidden from '@material-ui/core/Hidden';
@@ -29,7 +30,7 @@ function PersistScroll(props) {
 
     const activeBox = activeElement.getBoundingClientRect();
 
-    if (savedScrollTop === null || activeBox.top - savedScrollTop < 0) {
+    if (savedScrollTop !== null || activeBox.top < savedScrollTop) {
       // Center the selected item in the list container.
       activeElement.scrollIntoView();
       // Fix a Chrome issue, reset the tabbable ring back to the top of the document.
@@ -161,7 +162,9 @@ function AppDrawer(props) {
         </div>
       </div>
       <Divider />
-      <DiamondSponsors />
+      <Box mx={3} my={2}>
+        <DiamondSponsors />
+      </Box>
       {renderNavItems({ props, pages, activePage, depth: 0, t })}
     </PersistScroll>
   );

docs/src/modules/components/AppTableOfContents.js

@@ -4,10 +4,12 @@ import PropTypes from 'prop-types';
 import marked from 'marked';
 import throttle from 'lodash/throttle';
 import clsx from 'clsx';
+import Box from '@material-ui/core/Box';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import textToHash from 'docs/src/modules/utils/textToHash';
+import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
 import Link from 'docs/src/modules/components/Link';
 
 const useStyles = makeStyles(theme => ({
@@ -255,6 +257,9 @@ export default function AppTableOfContents(props) {
           </Typography>
         </React.Fragment>
       ) : null}
+      <Box mt={3} mb={2} mx={1.5}>
+        <DiamondSponsors />
+      </Box>
     </nav>
   );
 }

docs/src/modules/components/DiamondSponsors.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import AddIcon from '@material-ui/icons/Add';
@@ -39,7 +38,7 @@ export default function DiamondSponsors() {
   const t = useSelector(state => state.options.t);
 
   return (
-    <Box mx={3} my={2} className={classes.root}>
+    <div className={classes.root}>
       <Typography variant="caption" color="textSecondary" display="block">
         {t('diamondSponsors')}
       </Typography>
@@ -48,10 +47,10 @@ export default function DiamondSponsors() {
         className={classes.placeholder}
         rel="noopener noreferrer"
         target="_blank"
-        href="https://www.patreon.com/oliviertassinari"
+        href="/discover-more/backers/#diamond-sponsors"
       >
         <AddIcon />
       </a>
-    </Box>
+    </div>
   );
 }

docs/src/modules/components/HomeQuickWord.js

@@ -11,7 +11,7 @@ const backers = [
     href:
       'https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage',
     alt: 'tidelift',
-    title: 'Tidelift — Get Professionally Supported Material-UI',
+    title: 'Tidelift — Enterprise-ready open source software',
   },
   {
     href: 'https://bit.dev',

docs/src/modules/components/backers.md

@@ -1,17 +1,20 @@
-<h2 align="center">Supporting Material-UI</h2>
+<h2 align="center">Material-UI's sponsors</h2>
 
-Material-UI is an MIT-licensed open source project.
-It's an independent project with ongoing development made possible entirely
-thanks to the support of these awesome [backers](/discover-more/backers/).
+The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development.
 
-### Gold Sponsors
+### Diamond 💎
 
-Gold Sponsors are those who have pledged $500/month and more to Material-UI.
+*3/3 slots available*
+
+Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI.
+Please contact us at [email protected] to subscribe to this tier.
+
+### Gold 🏆
 
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Get Professionally Supported Material-UI" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Enterprise-ready open source software" loading="lazy"></a>
   <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code" loading="lazy"></a>
 </p>
 
@@ -22,6 +25,8 @@ via [OpenCollective](https://opencollective.com/material-ui)
   <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.crosswordsolver.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/crosswordsolver/avatar.png" alt="crosswordsolver" title="Crossword Puzzle Solver" width="100" loading="lazy"></a>
 </p>
 
+Gold Sponsors are those who have pledged $500/month and more to Material-UI.
+
 ### There are more!
 
 See the full list of [our backers](/discover-more/backers/).