Migrate website to Docusaurus 2

Summary:
Docusaurus 2 is quite a lot more powerful than docu 1 it turns out.
This should convert the website fully.

* [done] Go through migration guide https://v2.docusaurus.io/docs/migrating-from-v1-to-v2
* [done] Convert landing page html
* [done] Convert all images to img tags
* [done] Convert all .md files to .mdx
* [done] Make sure ui-doc generation and including still works
* [done] Scan every page visually for sanity check
* [done] Make sure footer still works
* [done] Make sure search still works
* [done] Change all links/ to links/index
* [done] Change all links.md to links
* [done] Add some custom css to make the navbar look like the old one and darken the footer.

Reviewed By: passy

Differential Revision: D21158717

fbshipit-source-id: 5f45b711b1b6fd5ece4c5c15c55635c7ebbfb568

website/.gitignore

@@ -3,9 +3,20 @@ node_modules
 lib/core/metadata.js
 lib/core/MetadataBlog.js
 website/translated_docs
-website/build/
+build/
 website/yarn.lock
 website/node_modules
 
 website/i18n/*
 !website/i18n/en.json
+
+.docusaurus
+.cache-loader
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/core/Footer.js

@@ -1,82 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-const React = require('react');
-
-class Footer extends React.Component {
-  docUrl(doc, language) {
-    const baseUrl = this.props.config.baseUrl;
-    return baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
-  }
-
-  pageUrl(doc, language) {
-    const baseUrl = this.props.config.baseUrl;
-    return baseUrl + (language ? language + '/' : '') + doc;
-  }
-
-  render() {
-    return (
-      <footer className="nav-footer" id="footer">
-        <section className="sitemap">
-          <a href={this.props.config.baseUrl} className="nav-home">
-            {this.props.config.footerIcon && (
-              <img
-                src={this.props.config.baseUrl + this.props.config.footerIcon}
-                alt="Flipper mascot"
-                title="I'm a dolphin not a whale!"
-                width="66"
-              />
-            )}
-          </a>
-          <div>
-            <h5>Docs</h5>
-            <a href="/docs/getting-started/">Getting Started</a>
-            <a href="/docs/extending/js-setup.html">Creating Plugins</a>
-          </div>
-          <div>
-            <h5>Plugins</h5>
-            <a href="/docs/features/logs-plugin.html">Log Viewer</a>
-            <a href="/docs/features/layout-plugin.html">Layout Inspector</a>
-            <a href="/docs/features/network-plugin.html">Network Inspector</a>
-          </div>
-          <div>
-            <h5>More</h5>
-            <a href="https://twitter.com/flipper_fb">Twitter</a>
-            <a href={this.props.config.repoUrl}>GitHub</a>
-            <a
-              className="github-button"
-              href={this.props.config.repoUrl}
-              data-icon="octicon-star"
-              data-count-href="/facebook/flipper/stargazers"
-              data-show-count={true}
-              data-count-aria-label="# stargazers on GitHub"
-              aria-label="Star this project on GitHub">
-              Star
-            </a>
-          </div>
-        </section>
-
-        <a
-          href="https://code.facebook.com/projects/"
-          target="_blank"
-          className="fbOpenSource">
-          <img
-            src={this.props.config.baseUrl + 'img/oss_logo.png'}
-            alt="Facebook Open Source"
-            width="170"
-            height="45"
-          />
-        </a>
-        <section className="copyright">{this.props.config.copyright}</section>
-      </footer>
-    );
-  }
-}
-
-module.exports = Footer;

website/docusaurus.config.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const repoUrl = 'https://github.com/facebook/flipper';
+
+const siteConfig = {
+  title: 'Flipper',
+  tagline: 'Extensible mobile app debugging',
+  url: 'https://fbflipper.com/',
+  baseUrl: '/',
+  projectName: 'flipper',
+  themeConfig: {
+    navbar: {
+      title: 'Flipper',
+      logo: {
+        alt: 'Flipper Logo',
+        src: 'img/icon.png',
+      },
+      links: [
+        {to: 'docs/features/index', label: 'Features', position: 'right'},
+        {to: 'docs/getting-started/index', label: 'Setup', position: 'right'},
+        {to: 'docs/extending/index', label: 'Extending', position: 'right'},
+        {href: repoUrl, label: 'GitHub', position: 'right'},
+      ],
+    },
+    disableDarkMode: true,
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Learn',
+          items: [
+            {label: 'Getting Started', to: 'docs/getting-started/index'},
+            {label: 'Plugin Creation Tutorial', to: 'docs/tutorial/intro'},
+          ],
+        },
+        {
+          title: 'Plugins',
+          items: [
+            {label: 'Core Plugins', to: 'docs/features'},
+            {
+              label: 'Community Plugins',
+              to: 'https://www.npmjs.com/search?q=keywords:flipper-plugin',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {label: 'Twitter', to: 'https://twitter.com/flipper_fb'},
+            {label: 'GitHub', to: repoUrl},
+          ],
+        },
+      ],
+      copyright: 'Copyright © ' + new Date().getFullYear() + ' Facebook',
+      logo: {
+        alt: 'Flipper Mascot',
+        src: 'img/mascot.png',
+        title: "I'm a dolphin not a whale!",
+      },
+    },
+    algolia: {
+      apiKey: '2df980e7ffc95c19552790f7cad32666',
+      indexName: 'fbflipper',
+      algoliaOptions: {
+        hitsPerPage: 5,
+      },
+    },
+  },
+  favicon: 'img/icon.png',
+  scripts: [
+    'https://buttons.github.io/buttons.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
+    '/js/code-blocks-buttons.js',
+    '/js/google-analytics.js',
+  ],
+  stylesheets: [],
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          path: '../docs',
+          sidebarPath: require.resolve('./sidebars.json'),
+          editUrl: 'https://github.com/facebook/flipper/blob/master/website',
+        },
+        theme: {
+          customCss: require.resolve('./static/css/custom.css'),
+        },
+      },
+    ],
+  ],
+};
+
+module.exports = siteConfig;

website/generate-uidocs.js

@@ -20,7 +20,7 @@ title: UI Components
 
 Flipper has a lot of built in React components to build UIs. You can import them directly using e.g. \`import {Button} from 'flipper'\`.`;
 
-const TARGET = __dirname + '/../docs/extending/ui-components.md';
+const TARGET = __dirname + '/../docs/extending/ui-components.mdx';
 
 glob(__dirname + '/../desktop/app/src/ui/components/**/*.tsx', (err, files) => {
   const content = files

website/package.json

@@ -1,22 +1,26 @@
 {
   "scripts": {
-    "examples": "docusaurus-examples",
-    "start": "yarn generate-uidocs && docusaurus-start",
-    "build": "yarn generate-uidocs && docusaurus-build",
-    "publish-gh-pages": "docusaurus-publish",
-    "write-translations": "docusaurus-write-translations",
-    "version": "docusaurus-version",
-    "rename-version": "docusaurus-rename-version",
+    "start": "yarn generate-uidocs && docusaurus start",
+    "build": "yarn generate-uidocs && docusaurus build",
+    "publish-gh-pages": "docusaurus deploy",
+    "write-translations": "docusaurus write-translations",
+    "version": "docusaurus version",
+    "rename-version": "docusaurus rename-version",
     "generate-uidocs": "node ./generate-uidocs.js"
   },
   "devDependencies": {
     "@babel/parser": "^7.8.3",
+    "@docusaurus/core": "^2.0.0-alpha.50",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.50",
     "docblock-parser": "^1.0.0",
-    "docusaurus": "^1.11.1",
     "glob": "^7.1.3",
-    "react-docgen": "^5.2.1"
+    "react-docgen": "^5.2.1",
+    "classnames": "^2.2.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "dependencies": {
   },
-  "dependencies": {},
   "resolutions": {
     "minimist": "1.2.3",
     "kind-of": "6.0.3"

website/pages/docs/en/index.js

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-const React = require('react');
-
-class Docs extends React.Component {
-  render() {
-    return (
-      <script
-        dangerouslySetInnerHTML={{
-          __html: "window.location.href = '/docs/getting-started/index.html'",
-        }}
-      />
-    );
-  }
-}
-
-module.exports = Docs;

website/siteConfig.js

@@ -1,58 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-const repoUrl = 'https://github.com/facebook/flipper';
-
-const siteConfig = {
-  title: 'Flipper' /* title for your website */,
-  tagline: 'Extensible mobile app debugging',
-  url: 'https://fbflipper.com/' /* your website url */,
-  baseUrl: '/' /* base url for your project */,
-  projectName: 'flipper',
-  headerLinks: [
-    {doc: 'features/index', label: 'Features'},
-    {doc: 'getting-started/index', label: 'Setup'},
-    {doc: 'extending/index', label: 'Extending'},
-    {href: repoUrl, label: 'GitHub'},
-  ],
-  editUrl: 'https://github.com/facebook/flipper/blob/master/docs/',
-  /* path to images for header/footer */
-  headerIcon: 'img/icon.png',
-  footerIcon: 'img/mascot.png',
-  favicon: 'img/icon.png',
-  /* colors for website */
-  colors: {
-    primaryColor: '#121020',
-    secondaryColor: '#121020',
-    accentColor: '#785BA3',
-    actionColor: '#008cf2',
-  },
-  copyright: 'Copyright © ' + new Date().getFullYear() + ' Facebook',
-  highlight: {
-    theme: 'default',
-  },
-  algolia: {
-    apiKey: '2df980e7ffc95c19552790f7cad32666',
-    indexName: 'fbflipper',
-    algoliaOptions: {
-      hitsPerPage: 5,
-    },
-  },
-  scripts: [
-    'https://buttons.github.io/buttons.js',
-    'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
-    '/js/code-blocks-buttons.js',
-    '/js/google-analytics.js',
-  ],
-  repoUrl,
-  stylesheets: [],
-  onPageNav: 'separate',
-};
-
-module.exports = siteConfig;

website/src/pages/index.js

@@ -3,15 +3,15 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @format
  */
 
-const React = require('react');
+import React from 'react';
+import Layout from '@theme/Layout';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
-class Index extends React.Component {
-  render() {
+export default function Index() {
     return (
+      <Layout title="index">
       <div>
         <div className="splash">
           <div className="content">
@@ -22,7 +22,7 @@ class Index extends React.Component {
               desktop interface. Use Flipper as is or extend it using the plugin
               API.
             </h2>
-            <div className="row">
+            <div>
               <p
                 className="landing-btn landing-btn-left landing-btn-label"
                 href="https://www.facebook.com/fbflipper/public/mac">
@@ -43,16 +43,16 @@ class Index extends React.Component {
                 href="https://www.facebook.com/fbflipper/public/windows">
                 Windows
               </a>
-              <a className="landing-btn" href="/docs/features/index.html">
+              <a className="landing-btn" href={useBaseUrl("docs/features/index")}>
                 Learn more
               </a>
             </div>
             <div className="slideshow">
-              <img src="/docs/assets/logs.png" className="splashScreen" />
-              <img src="/docs/assets/layout.png" className="splashScreen" />
-              <img src="/docs/assets/network.png" className="splashScreen" />
+              <img src={useBaseUrl("img/logs.png")} className="splashScreen" />
+              <img src={useBaseUrl("img/layout.png")} className="splashScreen" />
+              <img src={useBaseUrl("img/network.png")} className="splashScreen" />
               <img
-                src="/docs/assets/crashreporterplugin.png"
+                src={useBaseUrl("img/crashreporterplugin.png")}
                 className="splashScreen"
               />
             </div>
@@ -62,8 +62,8 @@ class Index extends React.Component {
         <div className="content row">
           <div className="col">
             <img
-              src="/img/inspector.png"
-              srcSet="/img/inspector.png 1x, /img/inspector@2x.png 2x"
+              src={useBaseUrl("img/inspector.png")}
+              srcSet={`${useBaseUrl('img/inspector.png')} 1x, ${useBaseUrl('img/inspector@2x.png')} 2x`}
             />
           </div>
           <div className="col">
@@ -75,7 +75,7 @@ class Index extends React.Component {
               useful tools including a log viewer, interactive layout inspector,
               and network inspector.
             </p>
-            <a className="learnmore" href="/docs/features/index.html">
+            <a className="learnmore" href={useBaseUrl("docs/features/index")}>
               Learn more
             </a>
           </div>
@@ -91,22 +91,22 @@ class Index extends React.Component {
               data back and forth, calling functions, and listening for events
               on the mobile app.
             </p>
-            <a className="learnmore" href="/docs/extending/index.html">
+            <a className="learnmore" href={useBaseUrl("docs/extending/index")}>
               Learn more
             </a>
           </div>
           <div className="col center">
             <img
-              src="/img/FlipperKit.png"
-              srcSet="/img/FlipperKit.png 1x, /img/FlipperKit@2x.png 2x"
+              src={useBaseUrl("img/FlipperKit.png")}
+              srcSet={`${useBaseUrl('img/FlipperKit.png')} 1x, ${useBaseUrl('img/FlipperKit@2x.png')} 2x`}
             />
           </div>
         </div>
         <div className="content row">
           <div className="col">
             <img
-              src="/img/plugins.png"
-              srcSet="/img/plugins.png 1x, /img/plugins@2x.png 2x"
+              src={useBaseUrl("img/plugins.png")}
+              srcSet={`${useBaseUrl('img/plugins.png')} 1x, ${useBaseUrl('img/plugins@2x.png')} 2x`}
             />
           </div>
           <div className="col">
@@ -139,8 +139,6 @@ class Index extends React.Component {
           </a>
         </div>
       </div>
+      </Layout>
     );
-  }
 }
-
-module.exports = Index;

website/static/css/custom.css

@@ -5,6 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+:root {
+  --ifm-color-primary: #121020;
+  --ifm-navbar-background-color: var(--ifm-color-primary);
+  --ifm-navbar-link-color: #ebedf0;
+  --ifm-navbar-shadow: none;
+  --ifm-navbar-link-hover-color: var(--ifm-navbar-link-color);
+  --ifm-footer-link-color: #ebedf0;
+  --ifm-footer-link-hover-color: var(--ifm-footer-link-color);
+}
+
 body,
 h1,
 h2,
@@ -465,11 +475,6 @@ footer iframe {
   margin-bottom: 0px;
 }
 
-.navListItem a[href='/docs/features/index.html'] {
-  /* Hide sidebar link to "Features"-pages, because it is linked in header */
-  display: none !important;
-}
-
 .content.row {
   position: relative;
 }