feat(v2): add showcase page (#1660)

* feat(v2): add showcase page

* misc(v2): shift users out of pages to prevent it from being treated as a page

* misc(v2): update title

website/docusaurus.config.js

@@ -54,6 +54,7 @@ module.exports = {
       links: [
         {to: 'docs/introduction', label: 'Docs', position: 'left'},
         {to: 'blog', label: 'Blog', position: 'left'},
+        {to: 'showcase', label: 'Showcase', position: 'left'},
         {to: 'feedback', label: 'Feedback', position: 'left'},
         {
           href: 'https://github.com/facebook/docusaurus',

website/src/data/users.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const users = [
+  // Please add in alphabetical order of title.
+  {
+    title: 'Channel.js',
+    description: 'The missing constructor for creating safe async iterators',
+    preview: '/img/showcase/channeljs.png',
+    website: 'https://channel.js.org',
+    source: 'https://github.com/channeljs/channel',
+    fbOpenSource: false,
+    pinned: false,
+  },
+  {
+    title: 'Component Kit',
+    description: 'A declarative UI framework for iOS',
+    preview: '/img/showcase/componentkit.png',
+    website: 'https://componentkit.org',
+    source: 'https://github.com/facebook/componentkit',
+    fbOpenSource: true,
+    pinned: true,
+  },
+  {
+    title: 'Flux',
+    description: 'Application architecture for building user interfaces',
+    preview: '/img/showcase/flux.png',
+    website: 'https://facebook.github.io/flux/',
+    source: 'https://github.com/facebook/flux',
+    fbOpenSource: true,
+    pinned: true,
+  },
+  {
+    title: 'Hermes',
+    description: 'JavaScript engine optimized for React Native',
+    preview: '/img/showcase/hermes.png',
+    website: 'https://hermesengine.dev',
+    source: 'https://github.com/facebook/hermes',
+    fbOpenSource: true,
+    pinned: true,
+  },
+  {
+    title: 'uniforms',
+    description: 'A set of React libraries for building forms',
+    preview: '/img/showcase/uniforms.png',
+    website: 'https://uniforms.tools/',
+    source: 'https://github.com/vazco/uniforms',
+    fbOpenSource: false,
+    pinned: false,
+  },
+];
+
+export default users;

website/src/pages/showcase/index.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useEffect} from 'react';
+import Layout from '@theme/Layout';
+
+import classnames from 'classnames';
+import styles from './styles.module.css';
+import users from '../../data/users';
+
+const ITEMS_PER_ROW = 3; // Sync up the item col width if this is changed.
+const TITLE = 'Showcase';
+const DESCRIPTION =
+  'See the awesome websites people are building with Docusaurus';
+
+function chunkArray(array, size) {
+  const chunks = [];
+  const copied = [...array];
+  const numChunks = Math.ceil(copied.length / size); // Round up to the nearest integer.
+  for (let i = 0; i < numChunks; i++) {
+    chunks.push(copied.splice(0, size));
+  }
+
+  return chunks;
+}
+
+function Showcase() {
+  return (
+    <Layout title={TITLE} description={DESCRIPTION}>
+      <div className="container margin-vert--xl">
+        <div className="text--center margin-bottom--xl">
+          <h1>{TITLE}</h1>
+          <p>{DESCRIPTION}</p>
+        </div>
+        {chunkArray(users, ITEMS_PER_ROW).map(row => (
+          <div className="row margin-vert--lg">
+            {row.map(user => (
+              <div className="col col--4">
+                <div className={classnames('card', styles.showcaseUser)}>
+                  <div className="card__image">
+                    <img src={user.preview} alt={user.title} />
+                  </div>
+                  <div className="card__body">
+                    <div class="avatar">
+                      <div class="avatar__intro margin-left--none">
+                        <h4 class="avatar__name">{user.title}</h4>
+                        <small class="avatar__subtitle">
+                          {user.description}
+                        </small>
+                      </div>
+                    </div>
+                  </div>
+                  {(user.website || user.source) && (
+                    <div className="card__footer">
+                      <div class="button-group button-group--block">
+                        {user.website && (
+                          <a
+                            className="button button--small button--secondary button--block"
+                            href={user.website}
+                            target="_blank"
+                            rel="noreferrer noopener">
+                            Website
+                          </a>
+                        )}
+                        {user.source && (
+                          <a
+                            className="button button--small button--secondary button--block"
+                            href={user.source}
+                            target="_blank"
+                            rel="noreferrer noopener">
+                            Source
+                          </a>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </Layout>
+  );
+}
+
+export default Showcase;

website/src/pages/showcase/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.showcaseUser {
+  height: 100%;
+}

website/static/img/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><path fill="none" d="M0 0h600v600H0z"/><circle fill="#00D8FF" cx="299.529" cy="299.628" r="50.167"/><path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M299.529 197.628c67.356 0 129.928 9.665 177.107 25.907 56.844 19.569 91.794 49.233 91.794 76.093 0 27.991-37.041 59.503-98.083 79.728-46.151 15.291-106.879 23.272-170.818 23.272-65.554 0-127.63-7.492-174.29-23.441-59.046-20.182-94.611-52.103-94.611-79.559 0-26.642 33.37-56.076 89.415-75.616 47.355-16.509 111.472-26.384 179.486-26.384z"/><path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.736 248.922c33.649-58.348 73.281-107.724 110.92-140.48 45.35-39.466 88.507-54.923 111.775-41.505 24.248 13.983 33.042 61.814 20.067 124.796-9.81 47.618-33.234 104.212-65.176 159.601-32.749 56.788-70.25 106.819-107.377 139.272-46.981 41.068-92.4 55.929-116.185 42.213-23.079-13.31-31.906-56.921-20.834-115.233 9.355-49.27 32.832-109.745 66.81-168.664z"/><path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.821 351.482c-33.746-58.292-56.731-117.287-66.312-166.255-11.544-58.999-3.382-104.109 19.864-117.566 24.224-14.024 70.055 2.244 118.14 44.94 36.356 32.28 73.688 80.837 105.723 136.173 32.844 56.733 57.461 114.209 67.036 162.582 12.117 61.213 2.309 107.984-21.453 121.74-23.057 13.348-65.249-.784-110.239-39.499-38.013-32.711-78.682-83.253-112.759-142.115z"/></svg>

website/static/img/search.svg

@@ -1 +0,0 @@
-<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h50v50H0z" fill="none"/><path d="M18.623 4.256c-7.913 0-14.367 6.454-14.367 14.367 0 7.913 6.454 14.367 14.367 14.367 3.241 0 6.228-1.095 8.637-2.918a2 2 0 0 0 .15.166l14.898 14.898a2 2 0 1 0 2.828-2.828L30.238 27.41a2 2 0 0 0-.166-.15c1.823-2.409 2.918-5.396 2.918-8.637 0-7.913-6.454-14.367-14.367-14.367zm0 3.59A10.75 10.75 0 0 1 29.4 18.623c0 5.973-4.804 10.777-10.777 10.777S7.846 24.595 7.846 18.623A10.75 10.75 0 0 1 18.623 7.846z" color="#000" fill="#555" style="block-progression:tb;isolation:auto;mix-blend-mode:normal;text-decoration-color:#000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-transform:none"/></svg>

website/static/img/translation.svg

@@ -1 +0,0 @@
-<svg class="language {{include.class}}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 0 1 1.229-.799l.082 4.277a2.773 2.773 0 0 1-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 0 0-.196-.145h-1.95a.194.194 0 0 0-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z"/></svg>

website/static/img/versioning.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 1190.6 841.9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" transform="rotate(-77.936 612.785 446.886)" d="M287.4 88.5h650.7v716.8H287.4z"/></defs><clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath><path d="M275.3 368.5c36.8-172.1 207-282.2 379.1-245.4C826.6 159.9 936.8 329.8 900 502c-2.5 11.6-5.7 22.9-9.4 34.1l50.5 10.8c6.6 1.4 11.5 6.7 12.8 13.1 1.1 6.7-1.7 13.2-7.4 16.8L812 663.7c-7.7 5-17.8 2.8-22.7-4.9l-87.5-134.2c-3.6-5.7-3.6-12.8.2-18.5 3.9-5.3 10.6-8.1 17-6.7l56 12c4.6-11 8-22.3 10.5-33.9 23.3-109-46.4-216.7-155.5-240C521 214.2 413.2 284 389.9 393s46.5 216.8 155.6 240.1c8.8 1.9 14.6 10.6 12.7 19.5l-17.6 82.1c-1.9 8.9-10.7 14.6-19.6 12.7-172.1-36.7-282.5-206.8-245.7-378.9z" clip-path="url(#b)"/></svg>