Templates. Set fixed height (#996)

tutorials/Getting_Started/README.md

@@ -24,11 +24,11 @@ capable to create a Compose application automatically.
 Note that JDK must be at least JDK 11, and to use the native distribution
 packaging JDK 15 or later must be used.
 
-![Create new project 1](screen3.png)
+<img alt="Create new project 1" src="screen3.png" height="500" />
 
-![Create new project 2](screen4.png)
+<img alt="Create new project 2" src="screen4.png" height="500" />
 
-![Create new project 3](screen5.png)
+<img alt="Create new project 3" src="screen5.png" height="500" />
 
 ### IDE plugin
 
@@ -146,17 +146,17 @@ fun main() = application {
 
 Open `build.gradle.kts` as a project in IntelliJ IDEA.
 
-![New project](screen1.png)
+<img alt="New project" src="screen1.png" height="1596" />
 
 After you download the Compose for Desktop dependencies from the Maven repositories your new project is ready
 to go. Open the Gradle toolbar on the right, and select `sample/Tasks/compose desktop/run`.
 The first run may take some time, but afterwards the following dialog will be shown:
 
-![Application running](screen2.gif)
+<img alt="Application running" src="screen2.gif" height="500" />
 
 You can click on the button several times and see that the application reacts and
 updates the UI.
 
 Running and debugging the `main()` function using run gutter is also supported.
 
-![Application running](screen6.png)
+<img alt="Application running" src="screen6.png" height="500" />

tutorials/Image_And_Icons_Manipulations/README.md

@@ -8,7 +8,7 @@ In this tutorial we will show you how to work with images using Compose for Desk
 
 Using images from application resources is very simple. Suppose we have a PNG image that is placed in the `resources` directory in our project. For this tutorial we will use the image sample:
 
-![Sample](sample.png)
+<img alt="Sample" src="sample.png" height="500" />
 
 ```kotlin
 import androidx.compose.foundation.Image
@@ -28,7 +28,7 @@ fun main() = singleWindowApplication {
 
 `painterResource` supports raster (BMP, GIF, HEIF, ICO, JPEG, PNG, WBMP, WebP) and vector formats (SVG, [XML vector drawable](https://developer.android.com/guide/topics/graphics/vector-drawable-resources)).
 
-![Resources](image_from_resources.png)
+<img alt="Resources" src="image_from_resources.png" height="375" />
 
 ## Loading images from device storage asynchronously
 
@@ -127,7 +127,7 @@ fun loadXmlImageVector(file: File, density: Density): ImageVector =
     file.inputStream().buffered().use { loadXmlImageVector(InputSource(it), density) }
 ```
 
-![Storage](image_from_resources2.png)
+<img alt="Storage" src="image_from_resources2.png" height="356" />
 
 [PNG](sample.png)
 
@@ -198,7 +198,7 @@ private fun ImageBitmap.getBytes(): ByteArray {
 }
 ```
 
-![Drawing raw images](draw_image_into_canvas.png)
+<img alt="Drawing raw images" src="draw_image_into_canvas.png" height="496" />
 
 ## Setting the application window icon
 
@@ -226,7 +226,7 @@ fun main() = application {
 }
 ```
 
-![Window icon](window_icon.png)
+<img alt="Window icon" src="window_icon.png" height="371" />
 
 ## Setting the application tray icon
 
@@ -261,4 +261,4 @@ fun main() = application {
 }
 ```
 
-![Tray icon](tray_icon.png)
+<img alt="Tray icon" src="tray_icon.png" height="479" />

tutorials/Keyboard/README.md

@@ -74,7 +74,7 @@ fun main() = singleWindowApplication {
 
 Note the annotation `@OptIn(ExperimentalComposeUiApi::class)`. Some keys related APIs are still an experimental feature of Compose, and later API changes are possible. So it requires the use of a special annotation to emphasize the experimental nature of the code.
 
-![keyInputFilter](keyInputFilter.gif)
+<img alt="keyInputFilter" src="keyInputFilter.gif" height="272" />
 
 ## Window-scoped events
 
@@ -163,4 +163,4 @@ fun App() {
 }
 ```
 
-![window_keyboard](window_keyboard.gif)
+<img alt="window_keyboard" src="window_keyboard.gif" height="280" />

tutorials/Mouse_Events/README.md

@@ -60,7 +60,7 @@ fun main() = singleWindowApplication {
 }
 ```
 
-![Application running](mouse_click.gif)
+<img alt="Application running" src="mouse_click.gif" height="500" />
 
 ### Mouse move listeners
 
@@ -100,7 +100,7 @@ fun main() = singleWindowApplication {
 }
 ```
 
-![Application running](mouse_move.gif)
+<img alt="Application running" src="mouse_move.gif" height="519" />
 
 ### Mouse enter listeners
 
@@ -152,7 +152,7 @@ fun main() = singleWindowApplication {
     }
 }
 ```
-![Application running](mouse_enter.gif)
+<img alt="Application running" src="mouse_enter.gif" height="500" />
 
 ### Mouse right/middle clicks and keyboard modifiers
 
@@ -195,6 +195,6 @@ fun main() = singleWindowApplication {
     )
 }
 ```
-![Application running](mouse_event.gif)
+<img alt="Application running" src="mouse_event.gif" height="500" />
 
 If you need more information about events there is an available raw AWT mouse event object in `mouseEvent` property of `PointerEvent`

tutorials/Native_distributions_and_local_execution/README.md

@@ -116,7 +116,7 @@ The following formats available for the supported operating systems:
 By default, Apple does not allow users to execute unsigned applications downloaded from the internet.  Users attempting
 to run such applications will be faced with an error like this:
 
-![](attrs-error.png)
+<img alt="" src="attrs-error.png" height="462" />
 
 See [our tutorial](/tutorials/Signing_and_notarization_on_macOS/README.md) 
 on how to sign and notarize your application. 

tutorials/Swing_Integration/README.md

@@ -126,7 +126,7 @@ fun Counter(text: String, counter: MutableState<Int>) {
 }
 ```
 
-![IntegrationWithSwing](screenshot.png)
+<img alt="IntegrationWithSwing" src="screenshot.png" height="781" />
 
 ## Adding a Swing component to CFD composition using SwingPanel
 
@@ -221,4 +221,4 @@ fun actionButton(
 }
 ```
 
-![IntegrationWithSwing](swing_panel.gif)
+<img alt="IntegrationWithSwing" src="swing_panel.gif" height="523" />

tutorials/Tab_Navigation/README.md

@@ -53,7 +53,7 @@ fun main() = application {
 }
 ```
 
-![default-tab-nav](default-tab-nav.gif)
+<img alt="default-tab-nav" src="default-tab-nav.gif" height="480" />
 
 To make a non-focusable component focusable, you need to apply `Modifier.focusable()` modifier to the component.
 
@@ -171,7 +171,7 @@ fun FocusableButton(
 }
 ```
 
-![focusable-buttons](focusable-button.gif)
+<img alt="focusable-buttons" src="focusable-button.gif" height="480" />
 
 ## Custom ordering
 To move focus in custom order we need to create a `FocusRequester` and apply the `Modifier.focusOrder` modifier to each component you want to navigate.
@@ -234,7 +234,7 @@ fun main() = application {
 }
 ```
 
-![reverse-order](reverse-order.gif)
+<img alt="reverse-order" src="reverse-order.gif" height="480" />
 
 ## Making component focused
 
@@ -309,4 +309,4 @@ fun main() = application {
 }
 ```
 
-![reverse-order](focus-switcher.gif)
+<img alt="reverse-order" src="focus-switcher.gif" height="480" />

tutorials/Tray_Notifications_MenuBar_new/README.md

@@ -99,7 +99,7 @@ object TrayIcon : Painter() {
 }
 ```
 
-![](tray.gif)
+<img alt="Tray" src="tray.gif" height="266" />
 
 ## MenuBar
 
@@ -179,4 +179,4 @@ object TrayIcon : Painter() {
 }
 ```
 
-![](window_menubar.gif)
+<img alt="" src="window_menubar.gif" height="260" />

tutorials/Web/Getting_Started/README.md

@@ -25,7 +25,7 @@ The project wizard doesn't support Compose for web projects yet, so we need to p
 - Tick `Kotlin DSL build script`
 - Tick `Kotlin/Multiplatform`
 
-![](create-mpp.png)
+<img alt="" src="create-mpp.png" height="500" />
 
 
 #### 2. Update `settings.gradle.kts`:
@@ -135,8 +135,8 @@ Use the command line to run:
 
 Or run it from the IDE:
 
-![](run_project.png)
+<img alt="" src="run_project.png" height="500" />
 
 The browser will open `localhost:8080`:
 
-![](run_result.png)
+<img alt="" src="run_result.png" height="500" />

tutorials/Window_API_new/README.md

@@ -44,7 +44,7 @@ fun main() = application {
     }
 }
 ```
-<img src="window_properties.gif" height="260" />
+<img alt="Window properties" src="window_properties.gif" height="260" />
 
 You can also close/open windows using a simple `if` statement.
 
@@ -80,7 +80,7 @@ fun main() = application {
     }
 }
 ```
-<img src="window_splash.gif" height="354" />
+<img alt="Window splash" src="window_splash.gif" height="354" />
 
 If the window requires some custom logic on close (for example, to show a dialog), you can override the close action using `onCloseRequest`.
 
@@ -120,7 +120,7 @@ fun main() = application {
     }
 }
 ```
-<img src="ask_to_close.gif" height="309" />
+<img alt="Ask to close" src="ask_to_close.gif" height="309" />
 
 If you don't need to close the window and just need to hide it (for example to the tray), you can change the `windowState.isVisible` state:
 ```kotlin
@@ -177,7 +177,7 @@ object TrayIcon : Painter() {
     }
 }
 ```
-<img src="hide_instead_of_close.gif" height="308" />
+<img alt="Hide instead of closing" src="hide_instead_of_close.gif" height="308" />
 
 If an application has multiple windows, then it is better to put its state into a separate class and open/close window in response to `mutableStateListOf` changes (see [notepad example](https://github.com/JetBrains/compose-jb/tree/master/examples/notepad) for more complex use cases):
 ```kotlin
@@ -246,7 +246,7 @@ private class MyWindowState(
     fun close() = close(this)
 }
 ```
-<img src="multiple_windows.gif" height="280" />
+<img alt="Multiple windows" src="multiple_windows.gif" height="280" />
 
 ## Function `singleWindowApplication`
 
@@ -298,7 +298,7 @@ fun main() = application {
     }
 }
 ```
-<img src="adaptive.png" height="327" />
+<img alt="Adaptive window size" src="adaptive.png" height="327" />
 
 ## Changing the state (maximized, minimized, fullscreen, size, position) of the window.
 
@@ -378,7 +378,7 @@ fun main() = application {
     }
 }
 ```
-<img src="state.gif" height="231" />
+<img alt="Changing the state" src="state.gif" height="231" />
 
 ## Listening the state of the window
 Reading the state in composition is useful when you need to update UI, but there are cases when you need to react to the state changes and send a value to another non-composable level of your application (write it to the database, for example):
@@ -579,7 +579,7 @@ fun main() = application {
     }
 }
 ```
-Note that `WindowDraggableArea` can be used only inside `singleWindowApplication`, `Window` and `Dialog`. If you need to use it in another Composable function, pass `WindowScope` as a reciever there:
+Note that `WindowDraggableArea` can be used only inside `singleWindowApplication`, `Window` and `Dialog`. If you need to use it in another Composable function, pass `WindowScope` as a receiver there:
 ```kotlin
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -605,5 +605,4 @@ private fun WindowScope.AppWindowTitleBar() = WindowDraggableArea {
     Box(Modifier.fillMaxWidth().height(48.dp).background(Color.DarkGray))
 }
 ```
-<img src="state.gif" height="239" />
-![](draggable_area.gif)
+<img alt="Draggable area" src="draggable_area.gif" height="239" />