[docs] Deeper Diamond integration

oliviertassinari · oliviertassinari · commit 14f30952981d · 2019-11-18T14:53:09.000+01:00
diff --git a/README.md b/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 diamond@material-ui.com 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
diff --git a/docs/pages/discover-more/backers.js b/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} />;
 }
diff --git a/docs/src/modules/components/AppDrawer.js b/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>
   );
diff --git a/docs/src/modules/components/AppTableOfContents.js b/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>
   );
 }
diff --git a/docs/src/modules/components/DiamondSponsors.js b/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"
       >
         <AddIcon />
       </a>
-    </Box>
+    </div>
   );
 }
diff --git a/docs/src/modules/components/HomeQuickWord.js b/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',
diff --git a/docs/src/modules/components/backers.md b/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 diamond@material-ui.com 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/).
diff --git a/docs/src/pages/discover-more/backers/backers.md b/docs/src/pages/discover-more/backers/backers.md
@@ -1,21 +1,19 @@
 # Sponsors & Backers
 
-<p class="description">Support Material-UI’s development through donations.</p>
+<p class="description">Support Material-UI core’s development through crowdfunding.</p>
 
-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. If you'd like to join them, please consider:
+The core of Material-UI is a crowd-funded open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development.
 
-- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari).
-- [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui).
+## Material-UI's sponsors
 
-#### What's the difference between Patreon and OpenCollective?
+### Diamond 💎
 
-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.
+*3/3 slots available*
 
-## Gold Sponsors
+Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI.
+Please contact us at diamond@material-ui.com to subscribe to this tier.
 
-Gold Sponsors are those who have pledged $500/month and more to Material-UI.
+### Gold 🏆
 
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
@@ -31,58 +29,89 @@ 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>
 
-## Silver Sponsors
+Gold Sponsors are those who have pledged $500/month and more to Material-UI.
 
-Silver Sponsors are those who have pledged $250/month to $500/month to Material-UI.
+### Silver
 
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="overflow: auto;">
-  <object type="image/svg+xml" data="https://opencollective.com/material-ui/tiers/silver-sponsors.svg?avatarHeight=70&width=600">Silver Sponsors</object>
+  <object type="image/svg+xml" data="https://opencollective.com/material-ui/tiers/silver-sponsor.svg?avatarHeight=70&width=600">Silver Sponsors</object>
 </p>
 
-## Bronze Sponsors
+Silver Sponsors are those who have pledged $250/month to $500/month to Material-UI.
 
-Bronze Sponsors are those who have pledged $100/month to $250/month to Material-UI.
+### Bronze
 
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="overflow: auto;">
-  <object type="image/svg+xml" data="https://opencollective.com/material-ui/tiers/bronze-sponsors.svg?avatarHeight=60&width=600">Bronze Sponsors</object>
+  <object type="image/svg+xml" data="https://opencollective.com/material-ui/tiers/bronze-sponsor.svg?avatarHeight=60&width=600">Bronze Sponsors</object>
 </p>
 
-## Backers
-
-via [Patreon](https://www.patreon.com/oliviertassinari)
+Bronze Sponsors are those who have pledged $100/month to $250/month to Material-UI.
 
-| ♥️ | ♥️ | ♥️ | ♥️ | ♥️ |
-|---|---|---|---|---|
-| Olivier Baumann | Linus Gubenis | Scott Fortmann-Roe | Yosmany García Alfonso | cocoanton |
-| Hong Yuan | Lucas Nascimento | the-noob | Thomas Hermann | Diana-Alina Olaru |
-| Daniel Faust | David Langheiter | LocalMonero | Adam Wells | Vincent Bouzeran |
-| Ashwin Hegde | Eric Schultz | Conor Dunk | Jerome Wilson | Greenlink |
-| Jolse Maginnis | asmeikal | David Auffret | Naresh Bhatia | Henk van Hest |
-| Avétis KAZARIAN | Withinpixels | SIM KIM SIA | Renaud Bompuis | Yaron Malin |
-| Arvanitis Panagiotis | Jesse Weigel | Bogdan Mihai Nicolae | Dung Tran | Kyle Pennell |
-| Kai Mit Pansen | Eric Nagy | Karens Grigorjancs | Mohamed Turco | Haroun Serang |
-| Antonio Seveso | Ali Akhavan | Bruno Winck | Alessandro Annini | Victor Irzak |
-| Manuel U Grullon | Skaronator | Peter James | Vincz | Micah Davidson |
-| Nelson Batalha | Daniel Woss | Michael Staub | Scott Fortmann-Roe | Markus Wüstenberg |
-| Anthony Mezzolesta | Julien Vallini | Johan Eliasson | Tomasz Szkodziński | Joseph Dillman |
+### Backers
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="overflow: auto;">
   <object type="image/svg+xml" data="https://opencollective.com/material-ui/tiers/backer.svg?avatarHeight=50&width=600">Backers</object>
 </p>
 
-## Why?
+## FAQ
+
+#### Why is Material-UI a "crowd-funded open-source project"?
+
+The core of Material-UI is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To make Material-UI a project that users can rely on for years to come, it needs to be well directed and financially sustainable.
+
+The absolute best way to support Material-UI’s ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving Material-UI core, which you and other Material-UI users then benefit from.
+
+#### How is sponsorship money spent?
+
+Sponsorship money is used to fund software development, testing, documentation, and releases of the Material-UI software suite.
+
+#### Is sponsorship required to use Material-UI?
+
+Users are not legally required to give back to the Material-UI project, but it is in their interest to do so.
+
+By significantly reducing the amount of work needed to achieve business goals and reducing running costs, Material-UI results in huge time and money savings for users. We encourage organizations to contribute a portion of these savings back, enabling the project to advance more rapidly and result in even greater savings for your organization.
+
+#### What's the difference between Patreon and OpenCollective?
+
+Funds received via Patreon or other forms, directly support [Olivier Tassinari](https://github.com/oliviertassinari) and the core team mission.
+The funds go to a for-profit entity that employs some of the core team members.
+
+Funds donated via OpenCollective are managed transparently and aimed to sustain the MIT core of Material-UI. Material-UI benefits from the Open Collective's fiscal sponsorship (hosted as a non-profit), in exchange for 10% of the donations.
+
+## Services
+
+These great services sponsor Material-UI's 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.
 
-If you run a business and are using Material-UI in a revenue-generating product, it makes business sense to sponsor Material-UI development: **it ensures the project that your product relies on stays healthy and actively maintained**.
-It can also help your exposure in the Material-UI community and makes it easier to attract Material-UI developers.
+- [<img src="https://raw.githubusercontent.com/codecov/media/master/logos/icon-50.png" height="30">](https://codecov.io/)
 
-If you are an individual user and have enjoyed the productivity of using Material-UI, consider donating as a sign of appreciation.
+CodeCov allows us to monitor the test coverage.

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,5 @@ const reqSource = require.context(`
`10`	`10`	`const reqPrefix = 'pages/discover-more/backers';`
`11`	`11`
`12`	`12`	`export default function Page() {`
`13`		`- return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;`
	`13`	`+ return <MarkdownDocs req={req} reqSource={reqSource} disableAd reqPrefix={reqPrefix} />;`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const backers = [`
`11`	`11`	`href:`
`12`	`12`	`'https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage',`
`13`	`13`	`alt: 'tidelift',`
`14`		`- title: 'Tidelift — Get Professionally Supported Material-UI',`
	`14`	`+ title: 'Tidelift — Enterprise-ready open source software',`
`15`	`15`	`},`
`16`	`16`	`{`
`17`	`17`	`href: 'https://bit.dev',`