From fe74f42d173685a1c437fbce055cebcdad04c142 Mon Sep 17 00:00:00 2001
From: Gustavo Pagani <gustavopagani@google.com>
Date: Tue, 10 May 2022 11:12:23 +0100
Subject: [PATCH] Fix images not displaying in docs

---
 README.md                | 8 ++++----
 docs/media-playscreen.md | 8 ++++----
 docs/media-ui.md         | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index c30f46cc22..2215b2a108 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ UI and Data layers for media player. PlayScreen and individual UI components.
 
 | PlayScreen |
 |---|
-| <img src="./docs/media-ui/playscreen.png" height="120" width="120" > |
+| <img src="https://raw.githubusercontent.com/google/horologist/main/docs/media-ui/playscreen.png" height="120" width="120" > |
 
 ## 📅 Composables
 
@@ -21,7 +21,7 @@ High quality prebuilt composables, such as Time and Date pickers.
 
 DatePicker             |  TimePickerWith12HourClock |  TimePicker
 :-------------------------:|:-------------------------:|:-------------------------:
-<img src="https://github.com/google/horologist/blob/6b4a07a4d5cf010838b151e345860dca92c5490a/docs/composables/date_picker.png" height="120" width="120" >  |  <img src="https://github.com/google/horologist/blob/6b4a07a4d5cf010838b151e345860dca92c5490a/docs/composables/time_12h_picker.png" height="120" width="120"> | <img src="https://github.com/google/horologist/blob/6b4a07a4d5cf010838b151e345860dca92c5490a/docs/composables/time_24h_picker.png" height="120" width="120">
+<img src="https://raw.githubusercontent.com/google/horologist/main/docs/composables/date_picker.png" height="120" width="120" >  |  <img src="https://raw.githubusercontent.com/google/horologist/main/docs/composables/time_12h_picker.png" height="120" width="120"> | <img src="https://raw.githubusercontent.com/google/horologist/main/docs/composables/time_24h_picker.png" height="120" width="120">
 
 ## 📐 Compose Layout
 
@@ -31,7 +31,7 @@ Layout related functionality such as a Navigation Aware Scaffold.
 
 fillMaxRectangle()             |  fadeAway()
 :-------------------------:|:-------------------------:
-<img src="https://github.com/google/horologist/blob/6b4a07a4d5cf010838b151e345860dca92c5490a/docs/compose-layout/fill_max_rectangle.png" height="120" width="120" >  |  <img src="https://github.com/google/horologist/blob/6b4a07a4d5cf010838b151e345860dca92c5490a/docs/compose-layout/fade_away.png" height="120" width="120" >
+<img src="https://raw.githubusercontent.com/google/horologist/main/docs/compose-layout/fill_max_rectangle.png" height="120" width="120" >  |  <img src="https://raw.githubusercontent.com/google/horologist/main/docs/compose-layout/fade_away.png" height="120" width="120" >
 
 ## 🔊 Audio and UI
 
@@ -43,7 +43,7 @@ Subscribing to a Flow of changes in audio or output.
 
 VolumeScreen            |  
 :-------------------------:|
-<img src="https://github.com/google/horologist/blob/6b4a07a4d5cf010838b151e345860dca92c5490a/docs/audio-ui/volume_screen.png" height="120" width="120" > |
+<img src="https://raw.githubusercontent.com/google/horologist/main/docs/audio-ui/volume_screen.png" height="120" width="120" > |
 
 ## 🖽 Tiles
 
diff --git a/docs/media-playscreen.md b/docs/media-playscreen.md
index e0c3e7ad38..18ce5c081a 100644
--- a/docs/media-playscreen.md
+++ b/docs/media-playscreen.md
@@ -4,7 +4,7 @@ This is a guide on how to use the stateful `PlayScreen` with your own implementa
 
 ## Basic usage
 
-1. Implement PlayerRepository
+##### 1. Implement PlayerRepository
 
 ```kotlin
 class PlayerRepositoryImpl() : PlayerRepository {
@@ -12,7 +12,7 @@ class PlayerRepositoryImpl() : PlayerRepository {
 }
 ```
 
-2. Extend PlayerViewModel
+##### 2. Extend PlayerViewModel
 
 Pass your implementation of `PlayerRepository` as constructor parameter.
 
@@ -24,7 +24,7 @@ class MyCustomViewModel(
 }
 ```
 
-3. Add PlayScreen
+##### 3. Add PlayScreen
 
 Pass your `PlayerViewModel` extension as value to the constructor parameter.
 
@@ -36,4 +36,4 @@ PlayScreen(playerViewModel = myCustomViewModel)
 
 The following diagram shows the interactions between the classes.
 
-<img src="https://github.com/google/horologist/blob/main/docs/media/media_class_diagram.png" height="420" width="300" >
+![](media_class_diagram.png){: loading=lazy align=center }
diff --git a/docs/media-ui.md b/docs/media-ui.md
index e36ec71665..29240dd883 100644
--- a/docs/media-ui.md
+++ b/docs/media-ui.md
@@ -21,7 +21,7 @@ There is a guide on the usage of the stateful `PlayScreen` [here][stateful playe
 
 A sample usage of [PlayScreen][play screen] can be found in the [sample][sample app package] app in this project, in the [media][media screen sample package] package.
 
-<img src="https://github.com/google/horologist/blob/main/docs/media-ui/playscreen.png" height="120" width="120" >
+![](playscreen.png){: loading=lazy align=center }
 
 ## Download