docs: compressed lottie (#205)

## 📜 Description

Compressed lottie and (as bonus) favicon. Total saved size is ~250kb.

## 💡 Motivation and Context

It turns out that some assets are still not optimized in documentation.
In this PR I'm adding a check to use optimized lottie.

Right now it saves ~100kb (just 3 lottie animations), but I'm planning
to add more lottie animations in the future, so it will save even more
space 😊

As bonus I uploaded compressed `.ico` file (it saves ~150kb). As a
result such optimizations improves page loading (a little bit, but
still). `Lighthouse` now gives more stable score than a previous version
and slightly higher score (97 vs 96).

And as a small chore work I've reorganized `compress-images` script -
corrected few job names and stopped to use deprecated actions.

## 📢 Changelog

### Docs
- compressed lotties;
- compressed `favicon.ico`;
- started to use `.lottie.json` file extension for lottie animations
instead of `.json`;

### CI
- added script that checks, that lottie are always compressed;
- update `compress-images` script (slightly changed namings, started to
use `checkout@v3`).

## 🤔 How Has This Been Tested?

Tested deployed version on preview. Gathered all metrics from deployed
version.

## 📸 Screenshots (if appropriate):

|Before|After|
|-------|-----|
|<img width="706" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/f4fabf34-2724-4735-899b-e4ca6c1ed635">|<img
width="707" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/e3193911-3633-4988-ad52-01770b7b1a73">|
|<img width="705" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/fc32374b-e6a4-4ba6-bfbe-ee510349e03d">|<img
width="704" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/8550a29a-6e93-49c7-9dd6-b2fbf0749915">|

## 📝 Checklist

- [x] CI successfully passed

.github/workflows/compress-images.yml

@@ -1,4 +1,4 @@
-name: 📦 Compress Images
+name: 📦 Compress Docs
 on:
   pull_request:
     # Run Image Actions when JPG, JPEG, PNG or WebP files are added or changed.
@@ -9,15 +9,16 @@ on:
       - '**.jpeg'
       - '**.png'
       - '**.webp'
+
 jobs:
-  build:
+  compress-images:
     # Only run on Pull Requests within the same repository, and not from forks.
     if: github.event.pull_request.head.repo.full_name == github.repository
-    name: calibreapp/image-actions
+    name: 🗂 Compress images
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Compress Images
         uses: calibreapp/image-actions@main

.github/workflows/compress-lottie.yml

@@ -0,0 +1,20 @@
+name: 📦 Compress Docs
+on:
+  pull_request:
+    paths:
+      - '.github/workflows/compress-lottie.yml'
+      - '**.lottie.json'
+
+jobs:
+  compress-lottie:
+    name: 🎞 Compress lottie
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Compress Lottie
+        run: find . -name '*.lottie.json' -exec npx lottie-optim -p 1 -o {} {} \;
+
+      - name: Verify that the lottie hasn't been changed
+        run: git diff --exit-code HEAD

docs/blog/2022-06-22-welcome/index.mdx

@@ -11,7 +11,7 @@ Many flagship applications that are written natively (such as `Telegram`, `Insta
 Unfortunately, in `react-native` this aspect was given little attention and all `react-native` applications were suffering because of that - animations were rough, you couldn't write cross-platform code because some keyboard events were not available, etc. But with the advent of this library, everything changes... 😎
 
 import Lottie from 'lottie-react';
-import lottie from '../../src/components/HomepageFeatures/transform.json';
+import lottie from '../../src/components/HomepageFeatures/transform.lottie.json';
 
 <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
 <Lottie animationData={lottie} style={{ width: 400, height: 400 }} loop />

docs/blog/2023-04-10-interactive-keyboard/index.mdx

@@ -9,7 +9,7 @@ keywords: [react-native-keyboard-controller, interactive keyboard, swipe to dism
 I'm excited to announce that the upcoming release of `react-native-keyboard-controller`, version `1.5.0`, will include a new feature that allows users to control the position of the keyboard on the screen via gestures. This new interactive keyboard feature will make it easier for users to interact with the keyboard in a more natural and intuitive way, improving the overall user experience of your React Native app.
 
 import Lottie from 'lottie-react';
-import lottie from '../../src/components/HomepageFeatures/interactive.json';
+import lottie from '../../src/components/HomepageFeatures/interactive.lottie.json';
 
 <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
 <Lottie animationData={lottie} style={{ width: 400, height: 400 }} loop />

docs/src/components/HomepageFeatures/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Lottie from 'lottie-react';
-import interactive from './interactive.json';
-import transform from './transform.json';
-import crossPlatform from './cross-platform.json';
+import interactive from './interactive.lottie.json';
+import transform from './transform.lottie.json';
+import crossPlatform from './cross-platform.lottie.json';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';