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
This commit is contained in:
John Knox
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
297ca61c49
commit
5f1a0548f5
144
website/src/pages/index.js
Normal file
144
website/src/pages/index.js
Normal file
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Layout title="index">
|
||||
<div>
|
||||
<div className="splash">
|
||||
<div className="content">
|
||||
<h1>Extensible mobile app debugger</h1>
|
||||
<h2>
|
||||
Flipper is a platform for debugging iOS, Android and React Native
|
||||
apps. Visualize, inspect, and control your apps from a simple
|
||||
desktop interface. Use Flipper as is or extend it using the plugin
|
||||
API.
|
||||
</h2>
|
||||
<div>
|
||||
<p
|
||||
className="landing-btn landing-btn-left landing-btn-label"
|
||||
href="https://www.facebook.com/fbflipper/public/mac">
|
||||
Download
|
||||
</p>
|
||||
<a
|
||||
className="landing-btn landing-btn-middle primary"
|
||||
href="https://www.facebook.com/fbflipper/public/mac">
|
||||
Mac
|
||||
</a>
|
||||
<a
|
||||
className="landing-btn landing-btn-middle primary"
|
||||
href="https://www.facebook.com/fbflipper/public/linux">
|
||||
Linux
|
||||
</a>
|
||||
<a
|
||||
className="landing-btn landing-btn-right primary"
|
||||
href="https://www.facebook.com/fbflipper/public/windows">
|
||||
Windows
|
||||
</a>
|
||||
<a className="landing-btn" href={useBaseUrl("docs/features/index")}>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
<div className="slideshow">
|
||||
<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={useBaseUrl("img/crashreporterplugin.png")}
|
||||
className="splashScreen"
|
||||
/>
|
||||
</div>
|
||||
<div className="shadow" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="content row">
|
||||
<div className="col">
|
||||
<img
|
||||
src={useBaseUrl("img/inspector.png")}
|
||||
srcSet={`${useBaseUrl('img/inspector.png')} 1x, ${useBaseUrl('img/inspector@2x.png')} 2x`}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<h4>Tools</h4>
|
||||
<h3>Mobile development</h3>
|
||||
<p>
|
||||
Flipper aims to be your number one companion for mobile app
|
||||
development on iOS and Android. Therefore, we provide a bunch of
|
||||
useful tools including a log viewer, interactive layout inspector,
|
||||
and network inspector.
|
||||
</p>
|
||||
<a className="learnmore" href={useBaseUrl("docs/features/index")}>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content row">
|
||||
<div className="col">
|
||||
<h4>Plugins</h4>
|
||||
<h3>Extending Flipper</h3>
|
||||
<p>
|
||||
Flipper is built as a platform. In addition to using the tools
|
||||
already included, you can create your own plugins to visualize and
|
||||
debug data from your mobile apps. Flipper takes care of sending
|
||||
data back and forth, calling functions, and listening for events
|
||||
on the mobile app.
|
||||
</p>
|
||||
<a className="learnmore" href={useBaseUrl("docs/extending/index")}>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
<div className="col center">
|
||||
<img
|
||||
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={useBaseUrl("img/plugins.png")}
|
||||
srcSet={`${useBaseUrl('img/plugins.png')} 1x, ${useBaseUrl('img/plugins@2x.png')} 2x`}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<h4>Open Source</h4>
|
||||
<h3>Contributing to Flipper</h3>
|
||||
<p>
|
||||
Both Flipper's desktop app and native mobile SDKs are open-source
|
||||
and MIT licensed. This enables you to see and understand how we
|
||||
are building plugins, and of course join the community and help
|
||||
improve Flipper. We are excited to see what you will build on this
|
||||
platform.
|
||||
</p>
|
||||
<a
|
||||
className="learnmore"
|
||||
href="https://github.com/facebook/flipper"
|
||||
target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wrapper landing-cta">
|
||||
<a href="/docs/getting-started/" className="landing-btn primary">
|
||||
Integrate Flipper In Your App
|
||||
</a>
|
||||
<a
|
||||
href="https://www.facebook.com/fbflipper/public/mac"
|
||||
target="_blank"
|
||||
className="landing-btn">
|
||||
Download Flipper
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user