Add tutorial steps for SwiftUI

Sources/Documentation.docc/Resources/code-files/02-ContentView-1.swift

@@ -11,8 +11,3 @@ struct ContentView: View {
         .padding()
     }
 }
-
-#Preview {
-    ContentView()
-}
-

Sources/Documentation.docc/Resources/code-files/02-ContentView-2.swift

@@ -15,8 +15,3 @@ struct ContentView: View {
         }
     }
 }
-
-#Preview {
-    ContentView()
-}
-

Sources/Documentation.docc/Resources/code-files/02-ContentView-3.swift

@@ -0,0 +1,16 @@
+import SwiftUI
+import Kingfisher
+
+struct ContentView: View {
+    var body: some View {
+        List {
+            ForEach(0 ..< 10) { i in
+                HStack {
+                    Rectangle().fill(Color.gray)
+                        .frame(width: 64, height: 64)
+                    Text("Index \(i)")
+                }
+            }
+        }.listStyle(.plain)
+    }
+}

Sources/Documentation.docc/Resources/code-files/02-ContentView-4.swift

@@ -0,0 +1,22 @@
+import SwiftUI
+import Kingfisher
+
+struct ContentView: View {
+    func url(at index: Int) -> URL? {
+        let urlPrefix = "https://raw.githubusercontent.com/onevcat/Kingfisher-TestImages/master/DemoAppImage/Loading/kingfisher"
+        return URL(string: "\(urlPrefix)-\(index + 1).jpg")
+    }
+    
+    var body: some View {
+        List {
+            ForEach(0 ..< 10) { i in
+                HStack {
+                    KFImage(url(at: i))
+                        .resizable()
+                        .frame(width: 64, height: 64)
+                    Text("Index \(i)")
+                }
+            }
+        }.listStyle(.plain)
+    }
+}

Sources/Documentation.docc/Tutorials/GettingStartedSwiftUI.tutorial

@@ -1,4 +1,4 @@
-@Tutorial(time: 15) {
+@Tutorial(time: 10) {
     @Intro(title: "Getting Started with Kingfisher (SwiftUI)") {
         Installs Kingfisher and basic usage of the framework with SwiftUI.
         @Image(source: "getting-started-card", alt: "Title image of the tutorial. A kingfisher bird standing on a tree.")    
@@ -64,4 +64,36 @@
         }
     }
     
+    @Section(title: "Loading image with Kingfisher") {
+        @ContentAndMedia {
+            In this section, we will create a `List` and use Kingfisher to load some images from the network.
+        }
+        
+        @Steps {
+            @Step {
+                Setting up a `List` in SwiftUI is easy. With the `ContentView` from the SwiftUI template.
+                @Code(name: "ContentView.swift", file: 02-ContentView-2.swift)
+            }
+            @Step {
+                Replace the `body` of the `ContentView` with a `List` and the embedded `ForEach`.
+                @Code(name: "ContentView.swift", file: 02-ContentView-3.swift) {
+                    @Image(source: preview-1-swiftui.png, alt: "")
+                }
+            }
+            @Step {
+                To load an image from network, the easiest way is using the `KFImage` struct provided in Kingfisher. It
+                accepts a URL, loads and shows the image when its `onAppear` is called. `KFImage` has a set of similar
+                APIs to SwiftUI's `Image` type. Here we call `resizable()` to allow the image fit into the given frame.
+                
+                @Code(name: "ContentView.swift", file: 02-ContentView-4.swift) {
+                    @Image(source: preview-2-swiftui.png, alt: "")
+                }
+            }
+        }
+    }
+        
+    @Section(title: "Loading Options") {
+        
+    }
+    
 }