chore: setting up android, swift, and react liveness docs pages (#752)

docs/src/components/Layout/Sidebar.tsx

@@ -140,6 +140,10 @@ const SecondaryNav = (props) => {
 
   const isFlutter = platform === 'flutter';
   const isReactNative = platform === 'react-native';
+  const isAndroid = platform === 'android';
+  const isSwift = platform === 'swift';
+  const isGuidesHidden = isFlutter || isReactNative || isAndroid || isSwift;
+  const isThemingHidden = isAndroid || isSwift;
 
   return (
     <Expander type="multiple" value={value} onChange={setValue}>
@@ -184,19 +188,22 @@ const SecondaryNav = (props) => {
         ))}
       </ExpanderItem>
 
-      <ExpanderItem
-        title={<ExpanderTitle Icon={MdOutlineAutoAwesome} text="Theming" />}
-        value="theming"
-      >
-        {theming.map(({ label, ...rest }) => (
-          <NavLink key={label} {...rest} onClick={props.onClick}>
-            {label}
-          </NavLink>
-        ))}
-      </ExpanderItem>
+      {/* Swift and Android don't have guides at this time */}
+      {isGuidesHidden ? null : (
+        <ExpanderItem
+          title={<ExpanderTitle Icon={MdOutlineAutoAwesome} text="Theming" />}
+          value="theming"
+        >
+          {theming.map(({ label, ...rest }) => (
+            <NavLink key={label} {...rest} onClick={props.onClick}>
+              {label}
+            </NavLink>
+          ))}
+        </ExpanderItem>
+      )}
 
-      {/* Flutter and React Native don't have guides at this time */}
-      {isFlutter || isReactNative ? null : (
+      {/* Flutter, React Native, Swift, and Android don't have guides at this time */}
+      {isGuidesHidden ? null : (
         <ExpanderItem
           title={<ExpanderTitle Icon={MdOutlineArticle} text="Guides" />}
           value="guides"

docs/src/data/frameworks.ts

@@ -1,24 +1,30 @@
 export type Framework =
+  | 'android'
   | 'angular'
   | 'flutter'
   | 'react'
   | 'react-native'
+  | 'swift'
   | 'vue';
 export type Frameworks = Framework[];
 
 export const FRAMEWORKS: Frameworks = [
+  'android',
   'angular',
   'flutter',
   'react',
   'react-native',
+  'swift',
   'vue',
 ];
 
 export const FRAMEWORK_DISPLAY_NAMES: Record<Framework, string> = {
+  android: 'Android',
   angular: 'Angular',
   flutter: 'Flutter',
   react: 'React',
   'react-native': 'React Native',
+  swift: 'Swift',
   vue: 'Vue',
 };
 

docs/src/data/links.tsx

@@ -145,6 +145,12 @@ export const connectedComponents: ComponentNavItem[] = [
     platforms: ['react'],
     tertiary: true,
   },
+  {
+    href: '/connected-components/liveness',
+    label: 'Liveness',
+    body: 'Amplify UI provides a UI component for detecting whether the person in front of the camera is live.',
+    platforms: ['react', 'android', 'swift'],
+  },
   {
     href: '/connected-components/geo',
     label: 'Geo',
@@ -472,12 +478,28 @@ export const gettingStarted: ComponentNavItem[] = [
   {
     href: '/getting-started/introduction',
     label: 'Introduction',
-    platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'],
+    platforms: [
+      'react',
+      'vue',
+      'angular',
+      'flutter',
+      'react-native',
+      'android',
+      'swift',
+    ],
   },
   {
     href: '/getting-started/installation',
     label: 'Installation',
-    platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'],
+    platforms: [
+      'react',
+      'vue',
+      'angular',
+      'flutter',
+      'react-native',
+      'android',
+      'swift',
+    ],
   },
   {
     href: '/getting-started/usage',

docs/src/pages/[platform]/connected-components/liveness/android.mdx

@@ -0,0 +1,12 @@
+Amplify FaceLivenessDetector is powered by [Amazon Rekognition](FIXME).
+
+### Quick Start
+
+> Prerequisites:
+>
+> 1. Install`@aws-amplify/ui-react-ml`with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/). ( e.g. `npm install @aws-amplify/ui-react-ml`)
+> 2. Follow the Rekognition developer guide FIXME LINK [FIXMELINK](fixme).
+
+## FaceLivenessDetector
+
+FIXME fill this out

docs/src/pages/[platform]/connected-components/liveness/index.page.mdx

@@ -0,0 +1,20 @@
+---
+title: Liveness
+description: Amplify UI provides a UI component for detecting whether the person in front of the camera is live.
+supportedFrameworks: react|android|swift
+---
+
+import { Fragment } from '@/components/Fragment';
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export async function getStaticPaths() {
+  return getCustomStaticPath(frontmatter.supportedFrameworks);
+}
+
+{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}
+
+export async function getStaticProps() {
+  return { props: {} }
+}
+
+<Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>

docs/src/pages/[platform]/connected-components/liveness/react.mdx

@@ -0,0 +1,12 @@
+Amplify FaceLivenessDetector is powered by [Amazon Rekognition](FIXME).
+
+### Quick Start
+
+> Prerequisites:
+>
+> 1. Install`@aws-amplify/ui-react-ml`with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/). ( e.g. `npm install @aws-amplify/ui-react-ml`)
+> 2. Follow the Rekognition developer guide FIXME LINK [FIXMELINK](fixme).
+
+## FaceLivenessDetector
+
+FIXME fill this out

docs/src/pages/[platform]/connected-components/liveness/swift.mdx

@@ -0,0 +1,12 @@
+Amplify FaceLivenessDetector is powered by [Amazon Rekognition](FIXME).
+
+### Quick Start
+
+> Prerequisites:
+>
+> 1. Install`@aws-amplify/ui-react-ml`with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/). ( e.g. `npm install @aws-amplify/ui-react-ml`)
+> 2. Follow the Rekognition developer guide FIXME LINK [FIXMELINK](fixme).
+
+## FaceLivenessDetector
+
+FIXME fill this out

docs/src/pages/[platform]/index.android.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useRouter } from 'next/router';
+
+import {
+  AmplifySection,
+  AuthenticationSection,
+} from '@/components/home/sections';
+
+const AndroidHomePage = ({ colorMode }) => {
+  const {
+    query: { platform = 'android' },
+  } = useRouter();
+
+  return (
+    <>
+      <AmplifySection platform={platform} />
+    </>
+  );
+};
+
+export default AndroidHomePage;

docs/src/pages/[platform]/index.page.tsx

@@ -12,6 +12,8 @@ import AngularHomePage from './index.angular';
 import FlutterHomePage from './index.flutter';
 import { FRAMEWORKS } from '@/data/frameworks';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+import SwiftHomePage from './index.swift';
+import AndroidHomePage from './index.android';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(FRAMEWORKS);
@@ -64,6 +66,12 @@ const HomePage = ({ colorMode }) => {
     case 'react-native':
       pageContent = <ReactNativeHomePage colorMode={colorMode} />;
       break;
+    case 'android':
+      pageContent = <AndroidHomePage colorMode={colorMode} />;
+      break;
+    case 'swift':
+      pageContent = <SwiftHomePage colorMode={colorMode} />;
+      break;
     default:
       pageContent = <ReactHomePage colorMode={colorMode} />;
       break;

docs/src/pages/[platform]/index.swift.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useRouter } from 'next/router';
+
+import {
+  AmplifySection,
+  AuthenticationSection,
+} from '@/components/home/sections';
+
+const SwiftHomePage = ({ colorMode }) => {
+  const {
+    query: { platform = 'swift' },
+  } = useRouter();
+
+  return (
+    <>
+      <AmplifySection platform={platform} />
+    </>
+  );
+};
+
+export default SwiftHomePage;