[docs] Add Onepixel to the showcase (#13227)

docs/src/pages/discover-more/showcase/Showcase.js

@@ -13,14 +13,19 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.default,
     // Hide the demo container padding
     margin: -theme.spacing.unit * 3,
-    width: 'calc(100% + 48px)',
     // Maintain alignment with the markdown text
     [theme.breakpoints.down('xs')]: {
       padding: 30,
     },
   },
+  title: {
+    marginBottom: theme.spacing.unit * 2,
+  },
   card: {
-    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit,
+    maxWidth: 600,
+  },
+  description: {
     marginBottom: theme.spacing.unit * 6,
   },
   cardMedia: {
@@ -29,6 +34,12 @@ const styles = theme => ({
 });
 
 const appList = [
+  {
+    title: 'Onepixel',
+    description: 'Beautiful Stock Photos for $1.',
+    image: '/static/images/showcase/onepixel.jpg',
+    link: 'https://www.onepixel.com/',
+  },
   {
     title: 'SFR Presse',
     description:
@@ -37,6 +48,52 @@ const appList = [
     image: '/static/images/showcase/sfrpresse.jpg',
     link: 'https://magazine-presse.sfr.fr/',
   },
+  {
+    title: 'react-admin',
+    description:
+      'The admin of an imaginary poster shop, used as a demo for the react-admin framework. ' +
+      'Uses many material-ui components, including tables, forms, snackbars, buttons, and ' +
+      'theming. The UI is responsive. The code is open-source!',
+    image: '/static/images/showcase/posters-galore.jpg',
+    link: 'https://marmelab.com/react-admin-demo/',
+    source:
+      'https://github.com/marmelab/react-admin/tree/be23a1a8ebc4e2293b57898adcb2f359e836f0fd/examples/demo',
+  },
+  {
+    title: 'Hijup',
+    description: 'A pioneering Muslim Fashion e-commerce site.',
+    image: '/static/images/showcase/hijup.jpg',
+    link: 'https://www.hijup.com/',
+  },
+  {
+    title: 'Venumob',
+    description:
+      'A platform for individuals and businesses to find and book the perfect venue for any event.',
+    image: '/static/images/showcase/venuemob.jpg',
+    link: 'https://venuemob.com.au/',
+  },
+  {
+    title: 'Builder Book',
+    description:
+      'Open source web app to write and host documentation or sell books. ' +
+      'Built with React, Material-UI, Next, Express, Mongoose, MongoDB.',
+    image: '/static/images/showcase/builderbook.jpg',
+    link: 'https://builderbook.org/',
+    source: 'https://github.com/builderbook/builderbook',
+  },
+  {
+    title: 'SlidesUp',
+    description: 'SlidesUp is a platform to help conference organizers plan their events.',
+    image: '/static/images/showcase/slidesup.jpg',
+    link: 'https://slidesup.com/',
+  },
+  {
+    title: 'npm registry browser',
+    description: 'A web app that lets you search the npm registry and browse packages details.',
+    image: '/static/images/showcase/npm-registry-browser.jpg',
+    link: 'https://topheman.github.io/npm-registry-browser/',
+    source: 'https://github.com/topheman/npm-registry-browser',
+  },
   {
     title: 'Insights',
     description:
@@ -48,17 +105,6 @@ const appList = [
     image: '/static/images/showcase/justaskusers.jpg',
     link: 'https://justaskusers.com/',
   },
-  {
-    title: 'Posters Galore',
-    description:
-      'The admin of an imaginary poster shop, used as a demo for the react-admin framework. ' +
-      'Uses many material-ui components, including tables, forms, snackbars, buttons, and ' +
-      'theming. The UI is responsive. The code is open-source!',
-    image: '/static/images/showcase/posters-galore.jpg',
-    link: 'https://marmelab.com/react-admin-demo/',
-    source:
-      'https://github.com/marmelab/react-admin/tree/be23a1a8ebc4e2293b57898adcb2f359e836f0fd/examples/demo',
-  },
   {
     title: 'Trafikito',
     description:
@@ -68,13 +114,6 @@ const appList = [
     image: '/static/images/showcase/trafikito-monitoring.jpg',
     link: 'https://trafikito.com/',
   },
-  {
-    title: 'Venumob',
-    description:
-      'A platform for individuals and businesses to find and book the perfect venue for any event.',
-    image: '/static/images/showcase/venuemob.jpg',
-    link: 'https://venuemob.com.au/',
-  },
   {
     title: 'Local Insights',
     description:
@@ -83,12 +122,6 @@ const appList = [
     image: '/static/images/showcase/localinsights.jpg',
     link: 'https://localinsights.io',
   },
-  {
-    title: 'Hijup',
-    description: 'A pioneering Muslim Fashion e-commerce site.',
-    image: '/static/images/showcase/hijup.jpg',
-    link: 'https://hijup.com',
-  },
   {
     title: 'Johnny Metrics',
     description: 'Upload your trades, and analyze your crypto portfolio.',
@@ -103,28 +136,6 @@ const appList = [
     image: '/static/images/showcase/sc.bnu.edu.cn.jpg',
     link: 'http://sc.bnu.edu.cn',
   },
-  {
-    title: 'npm registry browser',
-    description: 'A web app that lets you search the npm registry and browse packages details.',
-    image: '/static/images/showcase/npm-registry-browser.jpg',
-    link: 'https://topheman.github.io/npm-registry-browser/',
-    source: 'https://github.com/topheman/npm-registry-browser',
-  },
-  {
-    title: 'SlidesUp',
-    description: 'SlidesUp is a platform to help conference organizers plan their events.',
-    image: '/static/images/showcase/slidesup.jpg',
-    link: 'https://slidesup.com/',
-  },
-  {
-    title: 'Builder Book',
-    description:
-      'Open source web app to write and host documentation or sell books. ' +
-      'Built with React, Material-UI, Next, Express, Mongoose, MongoDB.',
-    image: '/static/images/showcase/builderbook.jpg',
-    link: 'https://builderbook.org/',
-    source: 'https://github.com/builderbook/builderbook',
-  },
   {
     title: 'LocalMonero',
     description:
@@ -150,12 +161,6 @@ const appList = [
     image: '/static/images/showcase/manty.jpg',
     link: 'https://app.manty.eu/',
   },
-  {
-    title: 'Meetingku',
-    description: 'A tool for controlling the meeting time.',
-    image: '/static/images/showcase/meetingku.jpg',
-    link: 'https://www.meetingku.com/',
-  },
   {
     title: 'Modole Language Exchange',
     description:
@@ -245,22 +250,20 @@ function Showcase(props) {
     <div className={classes.root}>
       {appList.map(app => (
         <div key={app.image}>
-          <Typography component="h2" variant="h4" gutterBottom>
+          <Typography component="h2" variant="h4" gutterBottom className={classes.title}>
             <span>{app.title}</span>
             {app.source ? (
               <IconButton href={app.source} target="_blank" aria-label={`${app.title} source code`}>
                 <GithubIcon />
               </IconButton>
             ) : null}
           </Typography>
-          <Typography variant="subtitle1" gutterBottom>
-            {app.description}
-          </Typography>
           <Card className={classes.card}>
-            <Link href={app.link} target="_blank" rel="nofollow noopener">
-              <CardMedia className={classes.cardMedia} image={app.image} title={app.title} />
+            <Link href={app.link} target="_blank" rel="noopener">
+              <CardMedia image={app.image} title={app.title} className={classes.cardMedia} />
             </Link>
           </Card>
+          <Typography className={classes.description}>{app.description}</Typography>
         </div>
       ))}
     </div>

docs/src/pages/discover-more/showcase/showcase.md

@@ -2,6 +2,6 @@
 
 <p class="description">The following is a list of some of the public apps using Material-UI.</p>
 
-Want to add your app? Found an app that no longer works or no longer uses Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update this page!
+Want to add your app? Found an app that no longer works or no longer uses Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update [this page](https://github.com/mui-org/material-ui/blob/5c70845cc4d60918c528f3aa58416ed8851a259c/docs/src/pages/discover-more/showcase/Showcase.js#L31)!
 
 {{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true}}