update: done with the bulk of instructions

Author: zamulla

topics/compose-onboard/compose-multiplatform-modify-project.md

@@ -69,6 +69,7 @@ To use the `kotlinx-datetime` library:
 1. Open the `composeApp/src/commonMain/kotlin/App.kt` file and add the following function which returns a string containing the current date:
 
    ```kotlin
+   @OptIn(ExperimentalTime::class)
    fun todaysDate(): String {
        fun LocalDateTime.format() = toString().substringBefore('T')
 

topics/compose-onboard/compose-multiplatform-new-project.md

@@ -68,7 +68,8 @@ To get started, implement a new `App` composable:
 
    When you run your application and click the button, the hardcoded time is displayed.
 
-3. Run the application on the desktop. It works, but the window is clearly too large for the UI:
+3. Run the application on the desktop (with the **composeApp [jvm]** run configuration).
+   It works, but the window is clearly too large for the UI:
 
    ![New Compose Multiplatform app on desktop](first-compose-project-on-desktop-3.png){width=400}
 
@@ -77,7 +78,7 @@ To get started, implement a new `App` composable:
     ```kotlin
    fun main() = application {
        val state = rememberWindowState(
-           size = DpSize(400.dp, 250.dp),
+           size = DpSize(400.dp, 350.dp),
            position = WindowPosition(300.dp, 300.dp)
        )
        Window(
@@ -94,22 +95,22 @@ To get started, implement a new `App` composable:
     Here, you set the title of the window and use the `WindowState` type to give the window an initial size and position on
     the screen.
 
-    > To see your changes in real time in the desktop app, use [Compose Hot Reload](compose-hot-reload.md):
-    > 1. In the `main.kt` file, click the **Run** icon in the gutter.
-    > 2. Select **Run 'composeApp [hotRunJvm]' with Compose Hot Reload (Beta)**.
-    > ![Run Compose Hot Reload from gutter](compose-hot-reload-gutter-run.png){width=350}
-    > 
-    > To see the app automatically update, save any modified files (<shortcut>⌘ S</shortcut> / <shortcut>Ctrl+S</shortcut>).
-    > 
-    > Compose Hot Reload is currently in [Beta](https://kotlinlang.org/components-stability.html#stability-levels-explained) so its functionality is subject to change.
-    >
-    {style="tip"}
-
 5. Follow the IDE's instructions to import the missing dependencies.
 6. Run the desktop application again. Its appearance should improve:
 
    ![Improved appearance of the Compose Multiplatform app on desktop](first-compose-project-on-desktop-4.png){width=350}
 
+> To see your changes in real time in the desktop app, use [Compose Hot Reload](compose-hot-reload.md):
+> 1. In the `main.kt` file, click the **Run** icon in the gutter.
+> 2. Select **Run 'composeApp [hotRunJvm]' with Compose Hot Reload (Beta)**.
+    > ![Run Compose Hot Reload from gutter](compose-hot-reload-gutter-run.png){width=350}
+>
+> To see the app automatically update, save any modified files (<shortcut>⌘ S</shortcut> / <shortcut>Ctrl+S</shortcut>).
+>
+> Compose Hot Reload is currently in [Beta](https://kotlinlang.org/components-stability.html#stability-levels-explained) so its functionality is subject to change.
+>
+{style="tip"}
+
 <!--
    ### Compose Hot Reload demo {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -121,7 +122,7 @@ To get started, implement a new `App` composable:
 Now let users enter the name of a city to see the time at that location. The simplest way to achieve this is by adding
 a `TextField` composable:
 
-1. Replace the current implementation of `App` with the one below:
+1. Replace the current implementation of `App()` in `commonMain/kotlin/compose.project.demo/App.kt` with the one below:
 
     ```kotlin
     @Composable
@@ -168,7 +169,8 @@ The next step is to use the given input to calculate time. To do this, create a
 1. Return to the `App.kt` file and add the following function:
 
     ```kotlin
-    fun currentTimeAt(location: String): String? {
+   @OptIn(ExperimentalTime::class) 
+   fun currentTimeAt(location: String): String? {
         fun LocalTime.formatted() = "$hour:$minute:$second"
 
         return try {
@@ -300,6 +302,7 @@ list.
     ```kotlin
     data class Country(val name: String, val zone: TimeZone)
     
+    @OptIn(ExperimentalTime::class)
     fun currentTimeAt(location: String, zone: TimeZone): String {
         fun LocalTime.formatted() = "$hour:$minute:$second"
     
@@ -405,7 +408,7 @@ modify the build file.
 To support images in your project, you'll need to download image files, store them in the correct directory, and add
 code to load and display them:
 
-1. Using an external resource, such as [Flag CDN](https://flagcdn.com/), download flags to match the list of countries
+1. Download flag images from [Flag CDN](https://flagcdn.com/) to match the list of countries
    you have already created. In this case, these
    are [Japan](https://flagcdn.com/w320/jp.png), [France](https://flagcdn.com/w320/fr.png), [Mexico](https://flagcdn.com/w320/mx.png), [Indonesia](https://flagcdn.com/w320/id.png),
    and [Egypt](https://flagcdn.com/w320/eg.png).
@@ -419,14 +422,15 @@ code to load and display them:
 4. Update the code in the `commonMain/kotlin/.../App.kt` file to support images:
 
     ```kotlin
-    import compose.project.demo.generated.resources.eg
-    import compose.project.demo.generated.resources.fr
-    import compose.project.demo.generated.resources.id
-    import compose.project.demo.generated.resources.jp
-    import compose.project.demo.generated.resources.mx
+    import demo.composeapp.generated.resources.jp
+    import demo.composeapp.generated.resources.mx
+    import demo.composeapp.generated.resources.eg
+    import demo.composeapp.generated.resources.fr
+    import demo.composeapp.generated.resources.id
 
-   data class Country(val name: String, val zone: TimeZone, val image: DrawableResource)
+    data class Country(val name: String, val zone: TimeZone, val image: DrawableResource)
 
+    @OptIn(ExperimentalTime::class)
     fun currentTimeAt(location: String, zone: TimeZone): String {
         fun LocalTime.formatted() = "$hour:$minute:$second"