docs: initial version of super-capacitor docs

Author: trevor-lambert

website/docs/for-super-capacitor/overview.md

@@ -0,0 +1,83 @@
+# Overview
+
+Super Capacitor is a Capacitor plugin designed to allow Capacitor apps to utilize the capabilities of Ionic Portals.
+
+## Install
+
+```bash
+npm install @ionic-enterprise/super-capacitor
+npx cap sync
+```
+
+## Types
+
+### PortalOptions
+
+The options for configuring your portal when using [`presentPortal`](#presentportal).
+
+```typescript
+interface PortalOptions {
+  name: string;
+  startDir?: string;
+  initialContext?: InitialContext;
+  plugins?: CapacitorPlugin[];
+  liveUpdateConfig?: LiveUpdateConfig;
+  type: 'push' | 'modal';
+  modalStyle?: 'fullscreen' | 'sheet';
+}
+```
+
+### CapacitorPlugin
+
+If you need to use any Capacitor plugins, the classpath of the Android plugins and the Objective-C class name will have to be provided to [`PortalOptions`](#portaloptions) in the `plugins` property.
+
+```typescript
+interface CapacitorPlugin {
+  /** The classpath of the plugin to be used in Android. (e.g. com.capacitorjs.plugins.camera.CameraPlugin) */
+  androidClassPath: string;
+  /** The class name of the plugin to be used in iOS.
+   * This must be the name as it is exposed to the Objective-C runtime.
+   * For example, The CameraPlugin swift class is exposed to Objective-C as CAPCameraPlugin.
+   */
+  iosClassName: string;
+}
+```
+
+## Methods
+
+- [`presentPortal(options: PortalOptions)`](#presentportal)
+- [`dismissPortal()`](#dismissportal)
+
+### presentPortal
+
+```typescript
+presentPortal(options: PortalOptions) => Promise<void>
+```
+
+#### Usage
+
+```typescript
+import { presentPortal } from '@ionic-enterprise/super-capacitor/superapp';
+
+presentPortal({ name: 'checkoutApp', startDir: 'portals/checkout', type: 'push' });
+```
+
+#### Parameters
+
+| Name      | Type                            | Description                                                         |
+| --------- | ------------------------------- | ------------------------------------------------------------------- |
+| `options` | [`PortalOptions`](#portaloptions) | The [`PortalOptions`](#portaloptions) object to configure the portal. |
+
+### dismissPortal
+
+```typescript
+dismissPortal() => Promise<void>
+```
+
+#### Usage
+
+```typescript
+import { dismissPortal } from '@ionic-enterprise/super-capacitor/miniapp';
+
+dismissPortal();
+```

website/docs/for-super-capacitor/tutorials/nav-controller-example.md

@@ -0,0 +1,75 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Connecting a Root Navigation Controller in Swift Using Storyboard
+
+By default, Capacitor apps are embedded in a `CAPBridgeViewController`. To utilize the "push" type for presenting portals, it is necessary to embed the app within a navigation controller.
+
+## Step 1: Open the Main Storyboard
+
+1. In the project navigator, locate and open the `Main.storyboard` file.
+
+<em
+  style={{
+    textAlign: 'center',
+    display: 'block',
+  }}
+>
+  <img
+    src={useBaseUrl('/img/super-capacitor/embed-nav-controller-tutorial/step-1.webp')}
+    data-zoom-src={useBaseUrl('/img/super-capacitor/embed-nav-controller-tutorial/step-1.webp')}
+    width="75%"
+  />
+</em>
+
+## Step 2: Add a Navigation Controller
+
+1. Drag and drop a "Navigation Controller" from the Object Library onto the storyboard canvas.
+
+<em
+  style={{
+    textAlign: 'center',
+    display: 'block',
+  }}
+>
+  <img
+    src={useBaseUrl('/img/super-capacitor/embed-nav-controller-tutorial/step-2.webp')}
+    data-zoom-src={useBaseUrl('/img/super-capacitor/embed-nav-controller-tutorial/step-2.webp')}
+    width="75%"
+  />
+</em>
+
+2. The navigation controller will come with an attached view controller. Remove the attached view controller and add a root view controller seugue from the navigation controller to the bridge view controller.
+
+<em
+  style={{
+    textAlign: 'center',
+    display: 'block',
+  }}
+>
+  <img
+    src={useBaseUrl('/img/super-capacitor/embed-nav-controller-tutorial/step-2-1.webp')}
+    data-zoom-src={useBaseUrl('/img/super-capacitor/embed-nav-controller-tutorial/step-2-1.webp')}
+    width="75%"
+  />
+</em>
+
+## Step 3: Set the Initial View Controller
+
+1. Set the navigation controller as the initial view controller.
+
+<em
+  style={{
+    textAlign: 'center',
+    display: 'block',
+  }}
+>
+  <img
+    src={useBaseUrl('/img/super-capacitor/embed-nav-controller-tutorial/step-3.webp')}
+    data-zoom-src={useBaseUrl('/img/super-capacitor/embed-nav-controller-tutorial/step-3.webp')}
+    width="75%"
+  />
+</em>
+
+## Step 4: Customize the Navigation Controller
+
+1. To remove the navigation bar, set "Top Bar" to "None" in the Simulated Metrics section of the navigation controller.