diff --git a/website/docs/for-super-capacitor/overview.md b/website/docs/for-super-capacitor/overview.md new file mode 100644 index 00000000..cd820997 --- /dev/null +++ b/website/docs/for-super-capacitor/overview.md @@ -0,0 +1,78 @@ +# 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 + +### MicroappOptions + +The options for configuring your microapp when using [`presentMicroapp`](#presentmicroapp). + +```typescript +interface MicroappOptions { + name: string; + type: 'push' | 'modal'; + modalStyle?: 'fullScreen' | 'pageSheet'; + startDir?: string; + initialContext?: InitialContext; + liveUpdateConfig?: LiveUpdateConfig; +} +``` + +## Methods + +- [`presentMicroapp(options: MicroappOptions)`](#presentmicroapp) +- [`dismissMicroapp()`](#dismissmicroapp) + +### presentMicroapp + +```typescript +presentMicroapp(options: MicroappOptions) => Promise +``` + +#### Usage + +```typescript +import { presentMicroapp } from '@ionic-enterprise/super-capacitor/superapp'; + +presentMicroapp({ + name: 'checkoutApp', + startDir: 'microapps/checkout', + type: 'push', +}); +``` + +> **_NOTE:_** A TypeScript module resolution Node16, NodeNext, or Bundler is required to recognize Super Capacitor's use of subpath exports. + +#### Parameters + +| Name | Type | Description | +| --------- | ------------------------------------- | --------------------------------------------------------------------------- | +| `options` | [`MicroappOptions`](#microappoptions) | The [`MicroappOptions`](#microappoptions) object to configure the microapp. | + +### dismissMicroapp + +```typescript +dismissMicroapp() => Promise +``` + +#### Usage + +```typescript +import { dismissMicroapp } from '@ionic-enterprise/super-capacitor/microapp'; + +dismissMicroapp(); +``` + +> **_NOTE:_** A TypeScript module resolution Node16, NodeNext, or Bundler is required to recognize Super Capacitor's use of subpath exports. + + +## Plugins +A microapp can only use plugins installed in its superapp. All superapp plugins are automatically available to its microapps. If a microapp requires a plugin not used by its superapp, that plugin must still be installed in the superapp. diff --git a/website/docs/for-super-capacitor/presentation-types.md b/website/docs/for-super-capacitor/presentation-types.md new file mode 100644 index 00000000..03e60b2e --- /dev/null +++ b/website/docs/for-super-capacitor/presentation-types.md @@ -0,0 +1,63 @@ +import useBaseUrl from '@docusaurus/useBaseUrl'; + +# Presentation Types + +The `type` option within the `MicroappOptions` interface allows you to specify how the microapp will be presented to users. This section of the documentation provides an example of the available presentation types. + +## Push + +```typescript +const microappOptions: MicroappOptions = { + name: 'Microapp Name'; + type: 'push'; +} +``` + + + + + +## Modal + +### FullScreen + +```typescript +const microappOptions: MicroappOptions = { + name: 'Microapp Name'; + type: 'modal'; + modalStyle: 'fullScreen'; +} +``` + + + + + +### PageSheet + +```typescript +const microappOptions: MicroappOptions = { + name: 'Microapp Name'; + type: 'modal'; + modalStyle: 'pageSheet'; +} +``` + + + + diff --git a/website/sidebars.js b/website/sidebars.js index a0a99bdb..28c568ad 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -10,211 +10,196 @@ */ module.exports = { sidebar: [ - "overview", - "what-is-a-portal", - "what-are-live-updates", - "getting-started", - "choosing-a-communication", + 'overview', + 'what-is-a-portal', + 'what-are-live-updates', + 'getting-started', + 'choosing-a-communication', { - type: "category", - label: "iOS", + type: 'category', + label: 'iOS', collapsed: true, items: [ - "for-ios/quick-start", - "for-ios/live-updates", - "for-ios/getting-started", - "for-ios/changelog", + 'for-ios/quick-start', + 'for-ios/live-updates', + 'for-ios/getting-started', + 'for-ios/changelog', { - type: "category", - label: "How To", + type: 'category', + label: 'How To', collapsed: true, items: [ - "for-ios/how-to/pull-in-web-bundle", - "for-ios/how-to/using-the-portals-plugin", - "for-ios/how-to/using-a-capacitor-plugin", - "for-ios/how-to/define-api-in-typescript", - "for-ios/how-to/multiple-portals-single-web-app", - "for-ios/how-to/multiple-portals-multiple-web-apps", - "for-ios/how-to/sharing-assets", - "for-ios/how-to/use-portals-in-an-ios-library", - "for-ios/how-to/advanced-configuration", - "for-ios/how-to/sync-with-live-updates", - "for-ios/how-to/reloading-with-live-updates", + 'for-ios/how-to/pull-in-web-bundle', + 'for-ios/how-to/using-the-portals-plugin', + 'for-ios/how-to/using-a-capacitor-plugin', + 'for-ios/how-to/define-api-in-typescript', + 'for-ios/how-to/multiple-portals-single-web-app', + 'for-ios/how-to/multiple-portals-multiple-web-apps', + 'for-ios/how-to/sharing-assets', + 'for-ios/how-to/use-portals-in-an-ios-library', + 'for-ios/how-to/advanced-configuration', + 'for-ios/how-to/sync-with-live-updates', + 'for-ios/how-to/reloading-with-live-updates', ], }, { - type: "category", - label: "Tutorials", + type: 'category', + label: 'Tutorials', collapsed: true, - items: [ - "for-ios/tutorials/auth-token-example", - "for-ios/tutorials/monorepo-example", - ], + items: ['for-ios/tutorials/auth-token-example', 'for-ios/tutorials/monorepo-example'], }, { - type: "category", - label: "Examples", + type: 'category', + label: 'Examples', collapsed: true, - items: [ - "for-ios/examples/ecommerce-app", - "for-ios/examples/ecommerce-app-live-updates", - ], + items: ['for-ios/examples/ecommerce-app', 'for-ios/examples/ecommerce-app-live-updates'], }, { - type: "category", - label: "Reference", + type: 'category', + label: 'Reference', collapsed: true, items: [ { - type: "link", - label: "API", - href: "https://ionic-portals-ios.vercel.app/documentation/ionicportals", + type: 'link', + label: 'API', + href: 'https://ionic-portals-ios.vercel.app/documentation/ionicportals', }, { - type: "link", - label: "LiveUpdates API", - href: "https://live-updates-sdk-ios.vercel.app/documentation/ionicliveupdates", + type: 'link', + label: 'LiveUpdates API', + href: 'https://live-updates-sdk-ios.vercel.app/documentation/ionicliveupdates', }, ], }, - "for-ios/upgrade-guides", - "for-ios/known-issues", + 'for-ios/upgrade-guides', + 'for-ios/known-issues', ], }, { - type: "category", - label: "Android", + type: 'category', + label: 'Android', collapsed: true, items: [ - "for-android/quick-start", - "for-android/getting-started", - "for-android/guide", - "for-android/live-updates", - "for-android/changelog", + 'for-android/quick-start', + 'for-android/getting-started', + 'for-android/guide', + 'for-android/live-updates', + 'for-android/changelog', { - type: "category", - label: "How To", + type: 'category', + label: 'How To', collapsed: true, items: [ - "for-android/how-to/pull-in-web-bundle", - "for-android/how-to/using-the-portals-plugin", - "for-android/how-to/using-a-capacitor-plugin", - "for-android/how-to/define-api-in-typescript", - "for-android/how-to/multiple-portals-single-web-app", - "for-android/how-to/multiple-portals-multiple-web-apps", - "for-android/how-to/sharing-assets", - "for-android/how-to/use-portals-in-an-android-library", - "for-android/how-to/advanced-configuration", - "for-android/how-to/sync-with-live-updates", - "for-android/how-to/reloading-with-live-updates", + 'for-android/how-to/pull-in-web-bundle', + 'for-android/how-to/using-the-portals-plugin', + 'for-android/how-to/using-a-capacitor-plugin', + 'for-android/how-to/define-api-in-typescript', + 'for-android/how-to/multiple-portals-single-web-app', + 'for-android/how-to/multiple-portals-multiple-web-apps', + 'for-android/how-to/sharing-assets', + 'for-android/how-to/use-portals-in-an-android-library', + 'for-android/how-to/advanced-configuration', + 'for-android/how-to/sync-with-live-updates', + 'for-android/how-to/reloading-with-live-updates', ], }, { - type: "category", - label: "Tutorials", + type: 'category', + label: 'Tutorials', collapsed: true, - items: [ - "for-android/tutorials/auth-token-example", - "for-android/tutorials/monorepo-example", - ], + items: ['for-android/tutorials/auth-token-example', 'for-android/tutorials/monorepo-example'], }, { - type: "category", - label: "Examples", + type: 'category', + label: 'Examples', collapsed: true, - items: [ - "for-android/examples/ecommerce-app", - "for-android/examples/ecommerce-app-live-updates", - ], + items: ['for-android/examples/ecommerce-app', 'for-android/examples/ecommerce-app-live-updates'], }, { - type: "category", - label: "Reference", + type: 'category', + label: 'Reference', collapsed: true, items: [ - "for-android/version-matrix", + 'for-android/version-matrix', { - type: "link", - label: "API", - href: "https://ionic.io/docs/portals-android-api-ref/-ionic-portals/io.ionic.portals/index.html", + type: 'link', + label: 'API', + href: 'https://ionic.io/docs/portals-android-api-ref/-ionic-portals/io.ionic.portals/index.html', }, { - type: "link", - label: "Live Updates API", - href: "https://ionic.io/docs/live-updates-sdk-android/live-updates/io.ionic.liveupdates/index.html", + type: 'link', + label: 'Live Updates API', + href: 'https://ionic.io/docs/live-updates-sdk-android/live-updates/io.ionic.liveupdates/index.html', }, ], }, - "for-android/upgrade-guides", + 'for-android/upgrade-guides', ], }, { - type: "category", - label: "React Native", + type: 'category', + label: 'React Native', collapsed: true, items: [ - "for-react-native/getting-started", - "for-react-native/guide", - "for-react-native/live-updates", - "for-react-native/changelog", + 'for-react-native/getting-started', + 'for-react-native/guide', + 'for-react-native/live-updates', + 'for-react-native/changelog', { - type: "category", - label: "How To", + type: 'category', + label: 'How To', collapsed: true, items: [ - "for-react-native/how-to/pull-in-web-bundle", - "for-react-native/how-to/statically-define-portals", - "for-react-native/how-to/using-the-portals-plugin", - "for-react-native/how-to/using-a-capacitor-plugin", - "for-react-native/how-to/define-api-in-typescript", - "for-react-native/how-to/sharing-assets", - "for-react-native/how-to/sync-with-live-updates", + 'for-react-native/how-to/pull-in-web-bundle', + 'for-react-native/how-to/statically-define-portals', + 'for-react-native/how-to/using-the-portals-plugin', + 'for-react-native/how-to/using-a-capacitor-plugin', + 'for-react-native/how-to/define-api-in-typescript', + 'for-react-native/how-to/sharing-assets', + 'for-react-native/how-to/sync-with-live-updates', ], }, { - type: "category", - label: "Tutorials", + type: 'category', + label: 'Tutorials', collapsed: true, - items: [ - "for-react-native/tutorials/auth-token-example", - "for-react-native/tutorials/monorepo-example", - ], + items: ['for-react-native/tutorials/auth-token-example', 'for-react-native/tutorials/monorepo-example'], }, { - type: "category", - label: "Examples", + type: 'category', + label: 'Examples', collapsed: true, - items: ["for-react-native/examples/ecommerce"], + items: ['for-react-native/examples/ecommerce'], }, { - type: "category", - label: "Reference", + type: 'category', + label: 'Reference', collapsed: true, items: [ { - type: "link", - label: "API", - href: "https://react-native-ionic-portals.vercel.app", + type: 'link', + label: 'API', + href: 'https://react-native-ionic-portals.vercel.app', }, ], }, - "for-react-native/upgrade-guides", - "for-react-native/known-issues", + 'for-react-native/upgrade-guides', + 'for-react-native/known-issues', ], }, { - type: "category", - label: "Portals Web Plugin", + type: 'category', + label: 'Portals Web Plugin', collapsed: true, items: [ - "for-web/overview", - "for-web/portals-plugin", - "for-web/sharing-assets", - "for-web/web-vitals", - "for-web/ios-profiling", - "for-web/android-profiling", - "for-web/upgrade-guides", - "for-web/changelog", + 'for-web/overview', + 'for-web/portals-plugin', + 'for-web/sharing-assets', + 'for-web/web-vitals', + 'for-web/ios-profiling', + 'for-web/android-profiling', + 'for-web/upgrade-guides', + 'for-web/changelog', ], }, { @@ -247,27 +232,39 @@ module.exports = { label: "Portals CLI", collapsed: true, items: [ - "cli/overview", - "cli/configuration", + 'cli/overview', + 'cli/configuration', { - type: "category", - label: "Command Reference", + type: 'category', + label: 'Command Reference', collapsed: true, items: ["cli/commands/poc", "cli/commands/sync", "cli/commands/serve-ios", "cli/commands/serve-android"], }, ], }, + { - type: "category", - label: "Federated Capacitor", + type: 'category', + className: 'bottom-item', + label: 'Super Capcaitor', + collapsed: true, + items: [ + 'for-super-capacitor/overview', + 'for-super-capacitor/presentation-types', + ], + }, + + { + type: 'category', + label: 'Federated Capacitor', collapsed: true, items: [ - "for-capacitor/overview", - "for-capacitor/module-federation", - "for-capacitor/live-updates", - "for-capacitor/reference", - "for-capacitor/example", - "for-capacitor/upgrade-guides", + 'for-capacitor/overview', + 'for-capacitor/module-federation', + 'for-capacitor/live-updates', + 'for-capacitor/reference', + 'for-capacitor/example', + 'for-capacitor/upgrade-guides', ], }, ], diff --git a/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-1.webp b/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-1.webp new file mode 100644 index 00000000..61662cdd Binary files /dev/null and b/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-1.webp differ diff --git a/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-2-1.webp b/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-2-1.webp new file mode 100644 index 00000000..3cf903f7 Binary files /dev/null and b/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-2-1.webp differ diff --git a/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-2.webp b/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-2.webp new file mode 100644 index 00000000..975b3c12 Binary files /dev/null and b/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-2.webp differ diff --git a/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-3.webp b/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-3.webp new file mode 100644 index 00000000..97337b23 Binary files /dev/null and b/website/static/img/super-capacitor/embed-nav-controller-tutorial/step-3.webp differ diff --git a/website/static/img/super-capacitor/presentation-types/fullscreen.gif b/website/static/img/super-capacitor/presentation-types/fullscreen.gif new file mode 100644 index 00000000..22b03bdf Binary files /dev/null and b/website/static/img/super-capacitor/presentation-types/fullscreen.gif differ diff --git a/website/static/img/super-capacitor/presentation-types/pagesheet.gif b/website/static/img/super-capacitor/presentation-types/pagesheet.gif new file mode 100644 index 00000000..4f9d6cc0 Binary files /dev/null and b/website/static/img/super-capacitor/presentation-types/pagesheet.gif differ diff --git a/website/static/img/super-capacitor/presentation-types/push.gif b/website/static/img/super-capacitor/presentation-types/push.gif new file mode 100644 index 00000000..5ce27176 Binary files /dev/null and b/website/static/img/super-capacitor/presentation-types/push.gif differ