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

docs/tutorial/js-table.mdx

@@ -0,0 +1,155 @@
+---
+id: js-table
+title: Showing a table
+---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+<img alt="Android Tutorial App" src={useBaseUrl("img/android-tutorial-desktop.png")} />
+
+## Building a Table
+
+We have found that one of the most useful things you can do to understand how your app works
+is to give you easy access to the underlying data used to display items on screen. A very
+easy way of doing this is by showing the data in a table. We have optimized for this
+particular use case that makes it dead-simple to expose your data in a table that you
+can sort, filter and select items for more detailed information.
+
+### Row Types
+
+We start by defining what our table rows look like as types:
+
+```javascript
+type Id = number;
+
+type Row = {
+  id: Id,
+  title: string,
+  url: string,
+};
+```
+
+It is important that you have some unique identifier for every row so
+that we know when something new was added to the table. We will use the
+`id` field here for this purpose.
+
+### Columns
+
+Next, we define which columns to show and how to display them:
+
+```javascript
+const columns = {
+  title: {
+    value: 'Title',
+  },
+  url: {
+    value: 'URL',
+  },
+};
+
+const columnSizes = {
+  title: '15%',
+  url: 'flex',
+};
+```
+
+The keys used here will show up again in the next step when building
+your rows, so keep them consistent. The `value` we define for each column will show up as the header at the top of the table.
+
+For the size you can either choose a fixed proportion or choose `flex`
+to distribute the remaining available space.
+
+### Sidebar
+
+When clicking on an element in your table, you can display a sidebar
+which gives more detail about an object than what is shown inline in the
+table. You could, for instance, show images that you referenced.
+For this tutorial, however, we will just show the full object by
+using our `ManagedDataInspector` UI component:
+
+```javascript
+function renderSidebar(row: Row) {
+  return (
+    <Panel floating={false} heading={'Info'}>
+      <ManagedDataInspector data={row} expandRoot={true} />
+    </Panel>
+  );
+}
+```
+
+You'll notice how the function takes the `Row` type we have defined
+before and returns a React component. What you render in this sidebar is
+entirely up to you.
+
+### Building Rows
+
+In the same way that we create our sidebar from a `Row`, we
+also render individual rows in our table but instead of a React
+component, we provide a description of the data based
+on the column keys we have set up before.
+
+```javascript
+function buildRow(row: Row): TableBodyRow {
+  return {
+    columns: {
+      title: {
+        value: <Text>{row.title}</Text>,
+        filterValue: row.title,
+      },
+      url: {
+        value: <Text>{row.url}</Text>,
+        filterValue: row.url,
+      },
+    },
+    key: row.id,
+    copyText: JSON.stringify(row),
+    filterValue: `${row.title} ${row.url}`,
+  };
+}
+```
+
+The `title` and `url` fields correspond to the keys
+we have previously set up as part of the `columns`
+object.
+
+`filterValue` is used to power the search bar at the top
+of the table. Defining `copyText` allows you to come up
+with a serialization scheme so users can right-click on
+any row and copy the content to their clipboard.
+
+### Putting it all to work
+
+Now that we've build all the individual pieces, we
+just need to hook it all up using `createTablePlugin`:
+
+```javascript
+export default createTablePlugin<Row>({
+  method: 'newRow',
+  columns,
+  columnSizes,
+  renderSidebar,
+  buildRow,
+});
+```
+*See [index.tsx](https://github.com/facebook/flipper/blob/master/desktop/plugins/seamammals/index.tsx)*
+
+The `method` we define here corresponds to the name
+of the function we call on the native side to inform
+the desktop about new data we want to display.
+
+And that's it! Starting Flipper will now compile your
+plugin and connect to the native side. It's a good
+idea to start Flipper from the command line to see
+any potential errors. The console in the DevTools
+is a great source of information if something doesn't
+work as expected, too.
+
+## What's next?
+
+You now have an interactive table that you can sort,
+filter and use to get additional information about
+the stuff you see on screen.
+
+For many cases, this is already all you need. However,
+sometimes you want to go the extra mile and want
+to build something a bit more custom. That's what
+we're going to do in the next part of our tutorial.