-
+# Introduction
+This introduction is designed to give a brief overview of how Enro works. It doesn't contain all the information you might need to know to get Enro installed in an application, or provide specific details about each of the topics covered. For this information please refer to the other documentation, such as:
+* [Installing Enro](https://enro.dev/docs/installing-enro.html)
+* [Navigation Keys](https://enro.dev/docs/navigation-keys.html)
+* [FAQ](https://enro.dev/docs/frequently-asked-questions.html)
-#### 1. Define your NavigationKeys
+## NavigationKeys
+Building a screen using Enro begins with defining a `NavigationKey`. A `NavigationKey` can be thought of like the function signature or interface for a screen. Just like a function signature, a `NavigationKey` represents a contract. By invoking the contract, and providing the requested parameters, an action will occur and you may (or may not) receive a result.
+
+Here's an example of two `NavigationKey`s that you might find in an Enro application:
```kotlin
-@Parcelize
-data class MyListKey(val listType: String): NavigationKey
@Parcelize
-data class MyDetailKey(val itemId: String, val isReadOnly): NavigationKey
+data class ShowUserProfile(
+ val userId: UserId
+) : NavigationKey.SupportsPush
@Parcelize
-data class MyComposeKey(val name: String): NavigationKey
+data class SelectDate(
+ val minDate: LocalDate? = null,
+ val maxDate: LocalDate? = null,
+) : NavigationKey.SupportsPresent.WithResultInformation on migration from JCenter and versions of Enro before 1.3.0
--Enro was previously published on JCenter, under the group name `nav.enro`. With the move to Maven Central, the group name has been changed to `dev.enro`, and the packages within the project have been updated to reflect this. -Previously older versions of Enro were available on Gituhb, but these have now been removed. If you require pre-built artifacts, and are unable to build older versions of Enro yourself, please contact Isaac Udy via LinkedIn, and he will be happy to provide you with older versions of Enro as compiled artifacts. -
-
-
- 
-
-
+
+
+
++ What's a NavigationKey? +
+ +A NavigationKey is a contract for a screen. It defines the inputs/parameters/arguments for a screen, and potentially the type of results returned from the screen (if any). + +When you perform navigation, you ask for a particular NavigationKey to be opened, and the screen/destination that is connected to that NavigationKey will be opened. + +From within a screen/destination, you have access to the NavigationKey that was used when opening it, and you can use this to read the inputs/parameters/arguments that were used. + +See [NavigationKeys](./navigation-keys.md) for more information. + +
+
+
++ How do I connect a NavigationKey to a screen/destination? +
+ +Using KAPT or KSP, annotate the screen/destination with `@NavigationDestination`, and pass in the class reference to the NavigationKey. + +```kotlin + +// Composables: +@Parcelize +class ExampleComposableKey : NavigationKey.SupportsPush + +@Composable +@NavigationDestination(ExampleComposableKey::class) +fun ExampleComposableScreen() {} + +// Fragments: +@Parcelize +class ExampleFragmentKey : NavigationKey.SupportsPresent + +@NavigationDestination(ExampleFragmentKey::class) +class ExampleFragment : Fragment() {} + +// Activities: +@Parcelize +class ExampleActivityKey : NavigationKey.SupportsPresent + +@NavigationDestination(ExampleActivityKey::class) +class ExampleActivity : AppCompatActivity() {} // Or FragmentActivity, or ComponentActivity + +``` + +
+
+
++ How do I open a screen/destination? +
+ +Once you've defined a NavigationKey for your screen/destination: +1. On a different screen, get a reference to a NavigationHandle +2. Use the `.push` or `.present` function on the NavigationHandle (depending on whether your NavigationKey is SupportsPush or SupportsPresent) +3. Pass in an instance of your NavigationKey + +```kotlin + +val navigation: NavigationHandle = TODO() // up to you! +navigation.push( ExampleNavigationKey() ) + +``` + +
+
+
++ How do I close a screen/destination? +
+ +Get the NavigationHandle for the screen and use `close` or `requestClose`. + +`close` will always cause the screen to be closed. + +`requestClose` is the same as pressing the Android back button, and is a "softer" way of asking a screen to close. It is possible to configure the behaviour for `requestClose` to perform some side effect (e.g. a confirmation). + +```kotlin + +val navigation: NavigationHandle = TODO() // up to you! +navigation.close() + +``` + +
+ ()`, and then use the NavigationResultChannel to push or present the NavigationKey you want to get a result from. If you do not use the NavigationResultChannel to push or present, the result will not get delivered. If you have multiple NavigationResultChannels, the result will be delivered to the NavigationResultChannel that was used to push or present.
+
+```kotlin
+
+class ExampleResultKey : NavigationKey.SupportsPresent.WithResult
+
+@Composable
+fun ExampleComposable() {
+ val exampleResult = registerForNavigationResult { result: Boolean ->
+ // handle result
+ }
+ LaunchedEffect(Unit) {
+ exampleResult.present(ExampleResultKey())
+ }
+}
+
+class ExampleViewModel : ViewModel() {
+ val exampleResult by registerForNavigationResult { result: Boolean ->
+ // handle result
+ }
+ fun startResultFlow() {
+ exampleResult.present(ExampleResultKey())
+ }
+}
+
+class ExampleFragment : Fragment() {
+ val exampleResult by registerForNavigationResult { result: Boolean ->
+ // handle result
+ }
+ fun startResultFlow() {
+ exampleResult.present(ExampleResultKey())
+ }
+}
+
+```
+
+
+
++ How do I open a screen if I want a result from that screen/destination? +
+ +Create a NavigationResultChannel, by using `registerForNavigationResult
+ ` (e.g. `NavigationKey.SupportsPresent.WithResult`).
+
+Get a `TypedNavigationHandle` for the screen, with the correct NavigationKey type.
+
+Call `closeWithResult` and pass in an object that matches `T` from the NavigationKey's `...WithResult`.
+
+```kotlin
+
+class ExampleResultKey : NavigationKey.SupportsPush.WithResult
+
+val navigation: TypedNavigationHandle = TODO() // up to you!
+navigation.closeWithResult(ExampleResultType(/*...*/))
+
+```
+
+
+
++ How do I send a result from a screen/destination? +
+ +Make sure that the NavigationKey for that screen/destination extends `...WithResult
+ ()`
+```kotlin
+
+@Composable
+fun ExampleComposable() {
+ val navigation = navigationHandle()
+}
+
+```
+
+In a ViewModel, use `by navigationHandle()`, but make sure you've set up your ViewModel factory correctly, see [ViewModels](./viewmodels.md).
+```kotlin
+
+class ExampleViewModel() : ViewModel() {
+ val navigation by navigationHandle()
+}
+
+```
+
+In an Activity or Fragment, use `by navigationHandle()`
+```kotlin
+
+class ExampleActivity : Activity {
+ val navigation by navigationHandle()
+}
+
+```
+
+
++ How do I get a NavigationHandle? +
+ +In a Composable, use `= navigationHandle
+
+`push(A), push(B), push(C)`, that container will show "C", and no other screens will be visible. + +If you pushed "D", and the backstack became:
+`push(A), push(B), push(C), push(D)`, then "C" would animate out, and "D" would become visible. "C" would become inactive. + +But if you presented "D" instead, and the backstack was:
+`push(A), push(B), push(C), present(D)`, then "C" would not animate out, and both "C" and "D" would be visible (assuming that D did not cover the entire screen). "C" remains active in the background. + +If "D" then pushed to "E", and the backstack was:
+`push(A), push(B), push(C), present(D), push(E)`, then both "C" and "D" would animate out, and "E" would be visible. Once "E" was closed, both "C" and "D" would become visible again. + +
+
++ What's the difference between Push and Present? +
+ +When you "push" a screen/destination, you're saying that the screen should be the top element of it's container, and it should be the only thing rendered within the container. + +When you "present" a screen/destination, you're saying that the screen should appear above the most recently pushed screen. Generally, these destinations are Dialogs, BottomSheets, or similar. Activities are also always considered to be presented, because they cannot be contained within a container. + +For example, if you have a container with a backstack that looks like this:+`push(A), push(B), push(C)`, that container will show "C", and no other screens will be visible. + +If you pushed "D", and the backstack became:
+`push(A), push(B), push(C), push(D)`, then "C" would animate out, and "D" would become visible. "C" would become inactive. + +But if you presented "D" instead, and the backstack was:
+`push(A), push(B), push(C), present(D)`, then "C" would not animate out, and both "C" and "D" would be visible (assuming that D did not cover the entire screen). "C" remains active in the background. + +If "D" then pushed to "E", and the backstack was:
+`push(A), push(B), push(C), present(D), push(E)`, then both "C" and "D" would animate out, and "E" would be visible. Once "E" was closed, both "C" and "D" would become visible again. + +
+
+
++ How do I create a BottomSheet or a Dialog screen in Compose? +
+ +Create a Composable NavigationDestination, and then call either `DialogDestination` or `BottomSheetDestination` as the root of the Composable. These destinations should generally be presented, as they should appear above the previous screen. + +```kotlin + +/** + * This is an example of creating a DialogDestination in Compose, using the standard + * Dialog Composable. + */ +@Parcelize +object ExampleDialog : NavigationKey.SupportsPresent + +@Composable +@NavigationDestination(ExampleBottomSheet::class) +fun ExampleDialogScreen() = DialogDestination { + val navigation = navigationHandle() + Dialog( + onDismissRequest = { navigation.requestClose() } + ) { + // Render screen contents + } +} + +/** + * This is an example of creating a BottomSheetDestination in Compose. The BottomSheetDestination + * lambda receives a "ModalBottomSheetState" object, which should be passed to a ModalBottomSheetLayout. + * Arguments such as "skipHalfExpanded" can be passed in to the BottomSheetDestination function. + */ +@Parcelize +object ExampleBottomSheet : NavigationKey.SupportsPresent + +@Composable +@NavigationDestination(ExampleBottomSheet::class) +fun ExampleBottomSheetScreen() = BottomSheetDestination { sheetState -> + BottomSheetDestination { sheetState -> + ModalBottomSheetLayout( + sheetState = sheetState, + sheetContent = { + // Render screen contents + }, + content = {} + ) + } +} + +/** + * This is an example of creating a NavigationDestination which can be pushed OR presented. If this + * destination is pushed, it will be rendered in a Box as a regular screen, but if it is presented, + * it will be rendered inside of a ModalBottomSheetLayout, using BottomSheetDestination. + */ +@Parcelize +object ExampleBottomSheetOrNot : NavigationKey.SupportsPresent, NavigationKey.SupportsPush + +@Composable +@NavigationDestination(ExampleBottomSheetOrNot::class) +fun ExampleBottomSheetOrNotScreen() { + val navigation = navigationHandle() + val isPresented = navigation.instruction.navigationDirection == NavigationDirection.Present + + if(isPresented) { + BottomSheetDestination { sheetState -> + ModalBottomSheetLayout( + sheetState = sheetState, + sheetContent = { + // Render screen contents + }, + content = {} + ) + } + } else { + Box(modifier = Modifier.fillMaxSize()) { + // Render screen contents + } + } +} + +``` + +
+ {
+ val activity = navigationContext.activity
+ val url = "https://www.enro.dev"
+ val intent = Intent(Intent.ACTION_VIEW)
+ intent.data = Uri.parse(url)
+ activity.startActivity(intent)
+}
+
+/**
+ * ShowDocumentDestination is an example of using a SyntheticDestination to pick between two
+ * different "real" destinations, based on a feature flag. We can get the NavigationHandle from
+ * the NavigationContext, and then use this to push to other NavigationKeys based on a feature flag,
+ * passing through some of the arguments from ShowDocumentDestination to the other NavigationKeys
+ */
+@Parcelize
+class ShowDocumentDestination(
+ val documentId: String
+) : NavigationKey.SupportsPush
+
+@NavigationDestination(ShowDocumentDestination::class.java)
+val showDocumentDestination = syntheticDestination {
+ val navigation = navigationContext.getNavigationHandle()
+ val featureFlags = getFeatureFlagsFromSomewhere()
+ if (featureFlags.isNewDocumentsEnabled) {
+ navigation.push(
+ NewShowDocumentDestination(
+ documentId = key.documentId
+ )
+ )
+ } else {
+ navigation.push(
+ LegacyShowDocumentDestination(
+ documentId = key.documentId
+ )
+ )
+ }
+}
+
+/**
+ * DatePickerDestination is an example of using a SyntheticDestination as a placeholder while
+ * a destination hasn't been implemented yet (likely during development time). We'll show a
+ * Toast to announce that the DatePickerDestination hasn't been implemented, and then we'll
+ * also send a result of LocalDate.now() (because DatePickerDestination is a result destination)
+ */
+@Parcelize
+object DatePickerDestination : NavigationKey.SupportsPresent.WithResult
+
+@NavigationDestination(DatePickerDestination::class)
+val datePickerDestination = syntheticDestination {
+ Toast.makeText(
+ navigationContext.activity,
+ "DatePickerDestination is not yet implemented",
+ Toast.LENGTH_LONG
+ ).show()
+
+ sendResult(LocalDate.now())
+}
+
+/**
+ * RequestCameraPermission is an example of using `activityResultDestination`,
+ * which is a special case SyntheticDestination builder that allows interoperability
+ * with ActivityResultContracts
+ */
+@Parcelize
+class RequestCameraPermission : NavigationKey.SupportsPresent.WithResult {
+ enum class Result {
+ GRANTED,
+ DENIED,
+ DENIED_PERMANENTLY,
+ }
+}
+
+@NavigationDestination(RequestCameraPermission::class)
+val requestCameraPermission = activityResultDestination(RequestCameraPermission::class) {
+ ActivityResultContracts.RequestPermission()
+ .withInput(Manifest.permission.CAMERA)
+ .withMappedResult { granted ->
+ when {
+ granted -> RequestCameraPermission.Result.GRANTED
+ Build.VERSION.SDK_INT >= Build.VERSION_CODES.M &&
+ activity.shouldShowRequestPermissionRationale(Manifest.permission.CAMERA) -> RequestCameraPermission.Result.DENIED
+ else -> RequestCameraPermission.Result.DENIED_PERMANENTLY
+ }
+ }
+}
+
+```
+
+
+
++ What's a SyntheticDestination? +
+ +A "SyntheticDestination" is a destination that's not a Composable/Fragment/Activity, it's a way to create a NavigationKey that can be used to perform a UI/Context-aware side-effect as if it was a navigation action. + +For example, you might use a SyntheticDestination to open an Intent, make a runtime permission request, set a container's backstack, use a feature flag to open one of two different NavigationKeys, or as a placeholder for a screen that hasn't been implemented yet. + +A SyntheticDestination receives the NavigationKey, NavigationInstruction, and NavigationContext reference of the destination that was used to open the SyntheticDestination, and can use these to perform any kind of logic. + +```kotlin + +/** + * This is an example of launching an implicit Intent to view a URL using a SyntheticDestination + */ +@Parcelize +object OpenEnroDocumentationDestination : NavigationKey.SupportsPresent + +@NavigationDestination(OpenEnroDocumentationDestination::class) +val openEnroDocumentationDestination = syntheticDestination
+ (
+ entering = yourAnimationHere, // the entering animation for ExampleComposableKey
+ exiting = yourAnimationHere, // the exiting animation for the destination that opened ExampleComposableKey
+ returnEntering = yourAnimationHere, // the entering animation for the destination that opened ExampleComposableKey, when ExampleComposableKey is closed
+ returnExiting = yourAnimationHere, // the exiting animation for ExampleComposableKey, when ExampleComposableKey is closed
+ )
+
+ // Configure an animations for when FooKey opens BarKey
+ transitionBetween(
+ entering = yourAnimationHere, // the entering animation for BarKey
+ exiting = yourAnimationHere, // the exiting animation for FooKey
+ returnEntering = yourAnimationHere, // the entering animation for FooKey when BarKey is closed
+ returnExiting = yourAnimationHere, // the exiting animation for BarKey when BarKey is closed
+ )
+
+ // Advanced APIs for adding animations in more complex situations
+ addOpeningTransition(/* ... */)
+ addClosingTransition(/* ... */)
+ }
+}
+
+class ExampleApplication : Application(), NavigationApplication {
+ override val navigationController = createNavigationController {
+ module(specificNavigationModule) // install the module defined outside of the application
+ animations {
+ // this block has the same functionality as the
+ // animations block in specificNavigationModule above
+ }
+ }
+}
+
+@Composable
+fun ExampleScreen() {
+ val container = rememberNavigationContainer(
+ animations = {
+ // this block has the same functionality as the
+ // animations block in specificNavigationModule above
+ }
+ )
+ // ...
+}
+
+```
+
+
+
++ How do I configure animations? +
+ +In the configuration for your application's `navigationController`, you can provide an `animations { }` block, which allows you to configure animations for a variety of situations. This can also be configured within a `navigationModule`, which can be installed on the `navigationController`, or can be configured on an individual `navigationContainer`. + +```kotlin + +val specificNavigationModule = createNavigationModule { + animations { + // Configure the default animations for destinations that are pushed + direction( + direction = NavigationDirection.Push, + entering = yourAnimationHere, + exiting = yourAnimationHere, + returnEntering = yourAnimationHere, + returnExiting = yourAnimationHere, + ) + + // Configure an animations for when any destination opens the "ExampleComposableKey" + transitionTo
+
diff --git a/docs/ghpages-old/docs/installing-enro-ios.md b/docs/ghpages-old/docs/installing-enro-ios.md
new file mode 100644
index 000000000..870b6842d
--- /dev/null
+++ b/docs/ghpages-old/docs/installing-enro-ios.md
@@ -0,0 +1,77 @@
+# Installing Enro for iOS
+
+1. Define a "NavigationComponent" in Kotlin code. This can be in the common source set or in the iOS source set, this should be an object which is annotated with @NavigationComponent and extends NavigationComponentConfiguration. Here is an example:
+```kotlin
+ @NavigationComponent
+ object MyNavigationComponent : NavigationComponentConfiguration(
+ // module is an optional parameter, which can be used for configuring the navigation module,
+ // and doing things like installing plugins, interceptors, manually adding bindings, etc.
+ module = createNavigationModule { /* ... */ }
+ )
+```
+
+2. In the XCode project, make sure you have configured a UIApplicationDelegate for your application (which should be annotated with `@main`, or referenced from the `@main` SwiftUI View with as `@UIApplicationDelegateAdaptor`). In your func UIApplicationDelegate's `application(_ application:, launchOptions:)` function, you will need to install Enro using the NavigationComponent you declared in step 1. Here is an example:
+```swift
+@main
+class EnroExampleAppDelegate: UIResponder, UIApplicationDelegate {
+ func application(
+ _ application: UIApplication,
+ didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
+ ) -> Bool {
+ MyNavigationComponent.shared.installNavigationController(
+ application: application,
+ root: nil,
+ strictMode: false,
+ useLegacyContainerPresentBehavior: false,
+ backConfiguration: Enro.shared.backConfiguration.Default,
+ block: { scope in
+ }
+ )
+ return true
+ }
+}
+```
+
+3. From here, you will need to launch an `EnroUIViewController`, like you would launch any other UIViewController. You can do this from the `AppDelegate` or from a SwiftUI View. Here is an example of launching an EnroUIViewController from an `@main` SwiftUI View:
+```swift
+@main
+struct EnroTestApplicationApp: App {
+ @UIApplicationDelegateAdaptor(EnroExampleAppDelegate.self) var appDelegate
+
+ var body: some Scene {
+ WindowGroup {
+ EnroRootView()
+ }
+ }
+}
+
+struct EnroRootView: UIViewControllerRepresentable {
+ func makeUIViewController(context: Context) -> UIViewController {
+ return Enro.shared.createEnroViewController(
+ present: NavigationInstruction.companion.Present(navigationKey: YourRootNavigationKey())
+ )
+ }
+
+ func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
+ }
+}
+```
+
+Alternatively, you can skip some of this additional configuration if you're writing an application that
+only uses Enro, you can provide a non-nil argument to the `root` parameter of the `installNavigationController` function. This will automatically create a root EnroUIViewController for you, and you won't need to create one yourself. Here is an example:
+```swift
+@main
+class EnroExampleAppDelegate: UIResponder, UIApplicationDelegate {
+ func application(
+ _ application: UIApplication,
+ didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
+ ) -> Bool {
+ MyNavigationComponent.shared.installNavigationController(
+ application: application,
+ root: NavigationInstruction.companion.Present(navigationKey: YourRootNavigationKey()),
+ // ...
+ )
+ return true
+ }
+}
+```
diff --git a/docs/ghpages-old/docs/installing-enro.md b/docs/ghpages-old/docs/installing-enro.md
new file mode 100644
index 000000000..20f80c849
--- /dev/null
+++ b/docs/ghpages-old/docs/installing-enro.md
@@ -0,0 +1,295 @@
+# Installing Enro
+
+## Add the Gradle Dependencies
+The first step in installing Enro is to add the Gradle dependencies to your project. These should be added to your application module, as well as any modules that will use Enro.
+
+[](https://search.maven.org/search?q=g:%22dev.enro%22)
+```kotlin
+
+dependencies {
+ implementation("dev.enro:enro:+ How do I do analytics when a user views a screen? +
+ +Enro allows you to create `EnroPlugin` classes, and register these with the `navigationController`. These plugins can be used to perform side-effects when a screen is opened or closed, and can be used to perform analytics, logging, or any other side-effect. The `EnroLogger` plugin that is defined within the Enro library is an example of this. The key functions to be interested in are: +* `onOpened(navigationHandle: NavigationHandle)` which is called the first time a screen is opened. This should be invoked once per screen. +* `onActive(navigationHandle: NavigationHandle)` which is called whenever a screen becomes "active", which essentially means whenever that screen would receive the system back button press. This can be invoked multiple times for a screen. +* `onClosed(navigationHandle: NavigationHandle)` which is called whenever a screen is closed. This should be invoked once per screen. + +
+
+
+## Add Enro to an Activity
+Once you've added Enro to your Application, it's likely that you'll want to add a Navigation Container to an Activity. This isn't necessary, as navigation using Enro will work even without a Navigation Container, but it is recommended. The exact configuration of the Navigation Container will depend on your needs, and the examples below will deal with a reasonably simple case, so if you need more information on how to configure a Navigation Container, please see the [Navigation Container documentation](./navigation-containers.md).
+
+**What is a Navigation Container?**
+
+A Navigation Container is a ViewGroup or Composable that maintains a backstack and displays the active Navigation Destination for that backstack. If you're familiar with Fragments, think of it as the `FrameLayout` that holds the Fragments. If you're more familiar with Compose, think of it as a `Box` that holds some child content (the active destination). For more information, please see the [Navigation Container documentation](./navigation-containers.md).
+
+### Adding a Navigation Container for Fragments and Composables
+If your application has Navigation Destinations that are a mix of Fragments and Composables, your top level Navigation Container should be a View based Navigation Container, as this will accept both Fragment and Composable destinations.
+
++ Show step-by-step guide +
+ +**0. An application class without Enro installed** +```kotlin + +class ExampleApplication : Application { + // ... +} + +``` + +**1. Add the `NavigationApplication` interface** +```kotlin + +class ExampleApplication : Application, NavigationApplication { +``` +{:.code-important .code-start} +```kotlin + // ... +} + +``` +{:.code-not-important .code-end} + +**2. Override the `navigationController` property** +```kotlin + +class ExampleApplication : Application, NavigationApplication { +``` +{:.code-not-important .code-start} +```kotlin + override val navigationController = createNavigationController { } +``` +{:.code-important} +```kotlin + + // ... +} + +``` +{:.code-not-important .code-end} + +In the example above we're passing an empty block to the `createNavigationController` function, but this block is used to provide configuration to Enro. In a simple application that uses annotation processing, you may not need to provide any configuration, but it's useful to be aware that this is what the block is used for. Please see [Configuring Enro](./configuring-enro.md) for more information. + +**3. Add the `@NavigationComponent` annotation to your Application (if using kapt/annotation processing)** +```kotlin + +@NavigationComponent +``` +{:.code-important .code-start} +```kotlin +class ExampleApplication : Application, NavigationApplication { + override val navigationController = createNavigationController { } + + // ... +} + +``` +{:.code-not-important .code-end} + +If you are using annotation processing (which is optional, but recommended), you are required to annotate your Application class with `@NavigationComponent` so that the annotation processor has a hook to generate and provide configuration. + +If you are not using annotation processing, you won't need to add this annotation. Instead, you'll need to provide your Application's configuration within the `createNavigationController` block. Please see [Configuring Enro](./configuring-enro.md) for more information. +
+
+```
+{:.code-not-important .code-start}
+```xml
+
+
+```
+{:.code-not-important .code-end}
+
+**2. Add a Navigation Container property to your Activity**
+```kotlin
+
+class MainActivity : AppCompatActivity() {
+
+```
+{:.code-not-important .code-start}
+```kotlin
+ private val exampleContainer by navigationContainer(
+ containerId = R.id.exampleNavigationContainer,
+ )
+```
+{:.code-important}
+```kotlin
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+ setContentView(R.layout.activity_main)
+ }
+}
+
+```
+{:.code-not-important .code-end}
+
+**3. Configure the Navigation Container**
+
+The Navigation Container that we've defined above will start off with nothing in it, and it will allow any Navigation Destination to be pushed into it. Below is an example of a configured Navigation Container that will initially show the Navigation Destination for a particular Navigation Key, and will `finish` the Activity if the Navigation Container is ever about to become empty. This isn't always the behavior that you will want for a Navigation Container, but it is a reasonably common way to set up an Activity's root Navigation Container. For more information, please see the [Navigation Container documentation](./navigation-containers.md).
+
+```kotlin
+
+class MainActivity : AppCompatActivity() {
+
+ private val exampleContainer by navigationContainer(
+ containerId = R.id.exampleNavigationContainer,
+```
+{:.code-not-important .code-start}
+```kotlin
+ root = { ExampleRootNavigationKey(/* ... */) },
+ emptyBehavior = EmptyBehavior.CloseParent,
+```
+{:.code-important}
+```kotlin
+ )
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+ setContentView(R.layout.activity_main)
+ }
+}
+
+```
+{:.code-not-important .code-end}
+
+
+
+### Adding a Navigation Container for Composables only
+If your application only has Composable destinations, you can choose to use a View based Navigation Container (as these support Composable destinations too), but you may want to consider directly using a Composable NavigationContainer.
+
++ Show step-by-step guide +
+ +**0. An Activity without a Navigation Container** +```kotlin + +class MainActivity : AppCompatActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContentView(R.layout.activity_main) + } +} + +``` + +**1. Add a FrameLayout to your Activity's layout file** +```xml + +
+
\ No newline at end of file
diff --git a/docs/ghpages-old/docs/introduction.md b/docs/ghpages-old/docs/introduction.md
new file mode 100644
index 000000000..01e38e5b4
--- /dev/null
+++ b/docs/ghpages-old/docs/introduction.md
@@ -0,0 +1,137 @@
+---
+title: Introduction
+parent: Overview
+nav_order: 1
+---
+# Introduction
+This introduction is designed to give a brief overview of how Enro works. It doesn't contain all the information you might need to know to get Enro installed in an application, or provide specific details about each of the topics covered. For this information please refer to the other documentation, such as:
+* [Installing Enro](./installing-enro.md)
+* [Navigation Keys](./navigation-keys.md)
+* [Navigation Destinations](./navigation-destinations.md)
+* [Navigation Handles](./navigation-handles.md)
+* [Navigation Containers](./navigation-containers.md)
+* [Testing](./testing.md)
+
+## NavigationKeys
+Building a screen using Enro begins with defining a `NavigationKey`. A `NavigationKey` can be thought of like the function signature or interface for a screen. Just like a function signature, a `NavigationKey` represents a contract. By invoking the contract, and providing the requested parameters, an action will occur and you may (or may not) receive a result.
+
+Here's an example of two `NavigationKey`s that you might find in an Enro application:
+```kotlin
+
+@Parcelize
+data class ShowUserProfile(
+ val userId: UserId
+) : NavigationKey.SupportsPush
+
+@Parcelize
+data class SelectDate(
+ val minDate: LocalDate? = null,
+ val maxDate: LocalDate? = null,
+) : NavigationKey.SupportsPresent.WithResult+ Show step-by-step guide +
+ +**0. A Composable Activity without a Navigation Container** +```kotlin + +class MainActivity : AppCompatActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContent { + // ... + } + } +} + +``` + +**1. Add a Navigation Container variable** +```kotlin + +class MainActivity : AppCompatActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContent { +``` +{:.code-not-important .code-start} +```kotlin + val container = rememberNavigationContainer() +``` +{:.code-important} +```kotlin + // ... + } + } +} + +``` +{:.code-not-important .code-end} + +**2. Render the Navigation Container** +```kotlin + +class MainActivity : AppCompatActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContent { + val container = rememberNavigationContainer() + +``` +{:.code-not-important .code-start} +```kotlin + Box(modifier = Modifier.fillMaxSize()) { + container.Render() + } +``` +{:.code-important} +```kotlin + // ... + } + } +} + +``` +{:.code-not-important .code-end} + +**3. Configure the Navigation Container** + +The Navigation Container that we've defined above will start off with nothing in it, and it will allow any Navigation Destination to be pushed into it. Below is an example of a configured Navigation Container that will initially show the Navigation Destination for a particular Navigation Key, and will `finish` the Activity if the Navigation Container is ever about to become empty. This isn't always the behavior that you will want for a Navigation Container, but it is a reasonably common way to set up an Activity's root Navigation Container. For more information, please see the [Navigation Container documentation](./navigation-containers.md). + +```kotlin + +class MainActivity : AppCompatActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContent { + val container = rememberNavigationContainer( +``` +{:.code-not-important .code-start} +```kotlin + root = ExampleRootNavigationKey(/* ... */), + emptyBehavior = EmptyBehavior.CloseParent, +``` +{:.code-important} +```kotlin + ) + + Box(modifier = Modifier.fillMaxSize()) { + container.Render() + } + // ... + } + } +} + +``` +{:.code-not-important .code-end} + +
+ 
+ 
+ 
+ ().isMarkedNullable) {
+ return require(nullableElements.contains(property.name)) {
+ "Property ${property.name} of type ${P::class} is nullable, but the path parameter ${property.name} is not marked as optional."
+ }
+ }
+ return require(elements.contains(property.name)) {
+ "Property ${property.name} was not found in the path pattern."
+ }
+}
+
+public inline fun ().isMarkedNullable
+ if (isNullable) return null as P
+ else error("Property ${property.name} is not nullable, but no value was found")
+ }
+ return when (P::class) {
+ String::class -> stringValue as P
+ Int::class -> stringValue.toInt() as P
+ Long::class -> stringValue.toLong() as P
+ Float::class -> stringValue.toFloat() as P
+ Double::class -> stringValue.toDouble() as P
+ Short::class -> stringValue.toShort() as P
+ Byte::class -> stringValue.toByte() as P
+ Char::class -> stringValue.first() as P
+ Boolean::class -> stringValue.toBoolean() as P
+ else -> error("Type ${P::class} is not supported")
+ }
+}
+
+
+public inline fun