Add docs for Landscapist

.github/FUNDING.yml

@@ -1 +1,2 @@
 github: skydoves
+custom: ["https://www.paypal.me/skydoves", "https://www.buymeacoffee.com/skydoves"]

.github/workflows/publish-docs.yml

@@ -0,0 +1,26 @@
+name: Publish DOcs
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-python@v4
+        with:
+          python-version: 3.x
+      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV 
+      - uses: actions/cache@v3
+        with:
+          key: mkdocs-material-${{ env.cache_id }}
+          path: .cache
+          restore-keys: |
+            mkdocs-material-
+      - run: pip install mkdocs-material 
+      - run: mkdocs gh-deploy --force

README.md

@@ -500,18 +500,14 @@ Also, you can customize the image content with our own composable function like
 ```kotlin
 GlideImage( // CoilImage, FrescoImage
   imageModel = { imageUrl },
-  // draw a resized image.
-  success = { imageState ->
-    imageState.imageBitmap?.let {
-      Image(
-        bitmap = it,
-        modifier = Modifier.size(128.dp)
-      )
-    }
+  success = { state, painter ->
+    Image(
+      painter = painter,
+      modifier = Modifier.size(128.dp), // draw a resized image.
+      contentDescription = "Image"
+    )
   },
-  loading = { 
-    // do something 
-  }
+  ..  
 )
 ```
 > **Note**: You can also use the custom Composables for **`CoilImage`** and **`FrescoImage`**.
@@ -786,7 +782,7 @@ You can extract primary (theme) color profiles with `PalettePlugin`. You can che
 <img src="https://user-images.githubusercontent.com/24237865/129226361-877689b8-a1ec-4f59-b8a6-e2efe33a8de7.gif" align="right" width="250"/>
 
 ```kotlin
-var palette by remember { mutableStateOf<Palette?>(null) }
+var palette by rememberPaletteState(null)
 
 GlideImage( // CoilImage, FrescoImage also can be used.
   imageModel = { poster.image },

docs/animation.md

@@ -0,0 +1,119 @@
+# Animation
+
+The landscapist-animation package offers a set of valuable image plugins related to animations, including crossfade and circular reveal animations. 
+
+To utilize these animation supports, simply add the following dependency:
+
+[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/landscapist.svg?label=Maven%20Central)](https://central.sonatype.com/search?q=skydoves%2520landscapist)<br>
+
+=== "Groovy"
+
+    ```Groovy
+    dependencies {
+        implementation "com.github.skydoves:landscapist-animation:$version"
+    }
+    ```
+
+=== "KTS"
+
+    ```kotlin
+    dependencies {
+        implementation("com.github.skydoves:landscapist-animation:$version")
+    }
+    ```
+
+### Crossfade Animation
+
+You can effortlessly implement the crossfade animation while displaying images using the CrossfadePlugin, as shown in the example below:
+
+=== "Glide"
+
+    ```kotlin
+    GlideImage(
+      component = rememberImageComponent {
+          +CrossfadePlugin(
+            duration = 550
+          )
+      },
+      ..
+    )
+    ```
+
+=== "Coil"
+
+    ```kotlin
+    CoilImage(
+      component = rememberImageComponent {
+          +CrossfadePlugin(
+            duration = 550
+          )
+      },
+      ..
+    )
+    ```
+
+=== "Fresco"
+
+    ```kotlin
+    FrescoImage(
+      component = rememberImageComponent {
+          +CrossfadePlugin(
+            duration = 550
+          )
+      },
+      ..
+    )
+    ```
+
+By using the `CrossfadePlugin`, you can achieve smooth and visually pleasing image transitions that gracefully fade from one image to another. This animation effect adds a touch of elegance to your app and enhances the overall user experience while displaying images.
+
+### Circular Reveal Animation
+
+You can seamlessly implement the circular reveal animation while displaying images using the `CircularRevealPlugin`, as demonstrated below:
+
+=== "Glide"
+
+    ```kotlin
+    GlideImage(
+      component = rememberImageComponent {
+          +CircularRevealPlugin(
+            duration = 350
+          )
+      },
+      ..
+    )
+    ```
+
+=== "Coil"
+
+    ```kotlin
+    CoilImage(
+      component = rememberImageComponent {
+          +CircularRevealPlugin(
+            duration = 350
+          )
+      },
+      ..
+    )
+    ```
+
+=== "Fresco"
+
+    ```kotlin
+    FrescoImage(
+      component = rememberImageComponent {
+          +CircularRevealPlugin(
+            duration = 350
+          )
+      },
+    )
+    ```
+
+The `CircularRevealPlugin` allows you to create captivating image transitions that emanate from a circular shape, adding a visually engaging effect to your app. This animation enhances the user experience and provides a delightful way to showcase images within your application.
+
+### Preview
+
+|                                                                Circular Reveal                                                                 |                                                                   Crossfade                                                                    |
+|:----------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------:|
+| <img src="https://user-images.githubusercontent.com/24237865/189552544-5f8e1209-4930-45e6-a050-3a0cda088e9f.gif" align="center" width="100%"/> | <img src="https://user-images.githubusercontent.com/24237865/189552547-d933cee7-e811-4170-a806-1ac165e8f055.gif" align="center" width="100%"/> | 
+

docs/bom.md

@@ -0,0 +1,45 @@
+# BOM
+
+The Landscapist Bill of Materials (BOM) simplifies the management of all Landscapist library versions. By specifying only the BOM's version, you can effortlessly manage the versions of all Landscapist libraries used in your project.
+
+ [![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/landscapist.svg?label=Maven%20Central)](https://central.sonatype.com/search?q=skydoves%2520landscapist)<br>
+
+=== "Groovy"
+
+    ```Groovy
+    dependencies {
+        // Import the landscapist BOM
+        implementation "com.github.skydoves:landscapist-bom:$version"
+
+        // Import landscapist libraries
+        implementation "com.github.skydoves:landscapist-glide"
+        implementation "com.github.skydoves:landscapist-coil"
+        implementation "com.github.skydoves:landscapist-fresco"
+
+        implementation "com.github.skydoves:landscapist-animation"
+        implementation "com.github.skydoves:landscapist-placeholder"
+        implementation "com.github.skydoves:landscapist-palette"
+        implementation "com.github.skydoves:landscapist-transformation"
+    }
+    ```
+
+=== "KTS"
+
+    ```kotlin
+    dependencies {
+        // Import the landscapist BOM
+        implementation("com.github.skydoves:landscapist-bom:$version")
+
+        // Import landscapist libraries
+        implementation("com.github.skydoves:landscapist-glide")
+        implementation("com.github.skydoves:landscapist-coil")
+        implementation("com.github.skydoves:landscapist-fresco")
+
+        implementation("com.github.skydoves:landscapist-animation")
+        implementation("com.github.skydoves:landscapist-placeholder")
+        implementation("com.github.skydoves:landscapist-palette")
+        implementation("com.github.skydoves:landscapist-transformation")
+    }
+    ```
+
+This ensures a streamlined and efficient development process, as you can easily keep track of library versions and ensure compatibility across your Landscapist dependencies. 

docs/coil/imageloader.md

@@ -0,0 +1,67 @@
+Landscapist provides multiple ways to customize the [ImageRequest](https://coil-kt.github.io/coil/image_requests/) and [ImageLoader](https://coil-kt.github.io/coil/image_loaders/).
+
+### Custom ImageRequest and ImageLoader
+You can load images with your own [ImageRequest](https://coil-kt.github.io/coil/image_requests/) and [ImageLoader](https://coil-kt.github.io/coil/image_loaders/), which provides all the necessary information for loading images like caching strategies and transformations.
+
+```kotlin
+CoilImage(
+  imageRequest = {
+      ImageRequest.Builder(LocalContext.current)
+        .data(poster.poster)
+        .crossfade(true)
+        .build() },
+  imageLoader = {
+      ImageLoader.Builder(LocalContext.current)
+        .availableMemoryPercentage(0.25)
+        .crossfade(true)
+        .build() },
+  modifier = modifier,
+)
+```
+
+### LocalCoilImageLoader
+
+You can pass the same instance of your `ImageLoader` down through the Composition in your composable hierarchy as following the example below:
+
+```kotlin
+ val imageLoader = ImageLoader.Builder(context).build()
+CompositionLocalProvider(LocalCoilImageLoader provides imageLoader) {
+
+   // This will automatically use the value of current imageLoader in the hierarchy.
+   CoilImage(
+     imageModel = ...
+   )
+ }
+```
+
+## Animated Image Supports (GIF, Webp)
+You can load animated GIFs and WebP Images with your `ImageLoader`.
+
+ <img src="https://user-images.githubusercontent.com/24237865/131246748-b88903a1-43de-4e6c-9069-3e956a0cf8a6.gif" align="right" width="37%"/>
+
+```kotlin
+val context = LocalContext.current
+val imageLoader = ImageLoader.Builder(context)
+  .componentRegistry {
+    if (SDK_INT >= 28) {
+      add(ImageDecoderDecoder(context))
+    } else {
+      add(GifDecoder())
+    }
+  }
+  .build()
+
+CoilImage(
+    imageModel = { poster.gif }, // URL of an animated image.
+    imageLoader = { imageLoader },
+    shimmerParams = ShimmerParams(
+      baseColor = background800,
+      highlightColor = shimmerHighLight
+    ),
+    modifier = Modifier
+      .fillMaxWidth()
+      .padding(8.dp)
+      .height(500.dp)
+      .clip(RoundedCornerShape(8.dp))
+  )
+```

docs/coil/overview.md

@@ -0,0 +1,46 @@
+<div class="header">
+  <a href="https://github.com/coil-kt/coil" target="_blank"> <img src="https://user-images.githubusercontent.com/24237865/95545538-1cf27f00-0a39-11eb-83dd-ef9b8c6a74cb.png" align="left" width="6%" alt="Fresco" /></a>
+  <h1>Landscapist Coil</h1>
+</div>
+
+[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/landscapist.svg?label=Maven%20Central)](https://central.sonatype.com/search?q=skydoves%2520landscapist)<br>
+Add the dependency below to your **module**'s `build.gradle` file:
+
+=== "Groovy"
+
+    ```Groovy
+    dependencies {
+        implementation "com.github.skydoves:landscapist-coil:$version"
+    }
+    ```
+
+=== "KTS"
+
+    ```kotlin
+    dependencies {
+        implementation("com.github.skydoves:landscapist-coil:$version")
+    }
+    ```
+
+!!! note
+
+    Please make sure your project uses the same Jetpack Compose version on the [release page](https://github.com/skydoves/Landscapist/releases).
+
+### CoilImage
+You can load images by using the `CoilImage` composable function as the following example below:
+
+```kotlin
+CoilImage(
+  imageModel = { imageUrl }, // loading a network image or local resource using an URL.
+  imageOptions = ImageOptions(
+    contentScale = ContentScale.Crop,
+    alignment = Alignment.Center
+  )
+)
+```
+
+### Compose Metrics
+
+According to the [Compose Compoler Metrics](https://github.com/androidx/androidx/blob/androidx-main/compose/compiler/design/compiler-metrics.md), the `CoilImage` Composable function is marked as Restartable and Skippable. This means you don't have to worry about performance issues related to re-rendering or re-fetching problems that can occur during recomposition. The Composable function's restartable and skippable nature ensures that the necessary actions are taken to optimize rendering, making it more efficient and seamless.
+
+![compose-metrics-coil](https://github.com/skydoves/landscapist/assets/24237865/5718a15e-07bc-4ee3-b76f-13fb09ed6d27)