Automatically build API documentation (#11)

* Automatically build API documentation using Typedoc and Docusaurus * Move MD and move to MDX for Docusaurus Guides
2021-03-03 12:37:43 +01:00
parent d7409e31df
commit 0b7b4d50b5
84 changed files with 15605 additions and 164 deletions
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+
+const features = [
+  {
+    title: 'Easy to use',
+    imageUrl: 'https://github.com/cuvent/react-native-vision-camera/blob/main/img/example_intro.png?raw=true',
+    description: (
+      <>
+        While having a lot of features, VisionCamera makes sure you don't get overwhelmed from the beginning. It provides hooks and functions to help you get started faster, and if you need full control, you can easily do that.
+      </>
+    ),
+  },
+  {
+    title: 'Feature Rich',
+    imageUrl: 'https://github.com/cuvent/react-native-vision-camera/blob/main/img/example.png?raw=true',
+    description: (
+      <>
+        VisionCamera was designed from the ground up to provide all features a camera app should have. You have full control over what device is used, and can even configure options such as frame rate, colorspace and more.
+      </>
+    ),
+  },
+  {
+    title: 'Rich Developer Support',
+    imageUrl: 'https://github.com/cuvent/react-native-vision-camera/blob/main/img/example_error.png?raw=true',
+    description: (
+      <>
+        Every functionality has been thoroughly documented and even errors are fully typed. Use TypeScript to get compile-time feedback on what has went wrong.
+      </>
+    ),
+  },
+];
+
+function Feature({imageUrl, title, description}) {
+  const imgUrl = useBaseUrl(imageUrl);
+  return (
+    <div className={clsx('col col--4', styles.feature)}>
+      {imgUrl && (
+        <div className="text--center">
+          <img className={styles.featureImage} src={imgUrl} alt={title} />
+        </div>
+      )}
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  );
+}
+
+function Home() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className={styles.buttons}>
+            <Link
+              className={clsx(
+                'button button--outline button--secondary button--lg',
+                styles.getStarted,
+              )}
+              to={useBaseUrl('docs/')}>
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main>
+        {features && features.length > 0 && (
+          <section className={styles.features}>
+            <div className="container">
+              <div className="row">
+                {features.map((props, idx) => (
+                  <Feature key={idx} {...props} />
+                ))}
+              </div>
+            </div>
+          </section>
+        )}
+      </main>
+    </Layout>
+  );
+}
+
+export default Home;
--- a/docs/src/pages/styles.module.css
+++ b/docs/src/pages/styles.module.css
@@ -0,0 +1,36 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureImage {
+  width: 200px;
+}