docs: badges (#388)

## 📜 Description Added badges for better clarity of what a particular prop/view.method does. ## 💡 Motivation and Context I've seen this feature in `react-native` docs and in my opinion it's a very good feature of design in documentation - such short information allows user to process information faster because they have associative memory. Moreover it'll be easier for users who studied RN docs to understand my documentation (similar colors, similar approach). Also in this PR I added an ability to run server on https (for some unknown reasons I can not open `http` websites in my Chrome anymore). ## 📢 Changelog    ### Docs - added an ability to run `https` server locally; - added badges for Android, iOS, Web, New and Required types (though only android is used right now); ## 🤔 How Has This Been Tested? Tested on localhost:3000 ## 📸 Screenshots (if appropriate): |Android|iOS|Web|New|Required| |--------|---|-----|----|---------| |<img width="86" alt="image" src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/23e85fb5-e9f0-4f42-81b8-ae674b447236">|<img width="57" alt="image" src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/b145aadc-ca0b-4a98-93be-1697b69776ca">|<img width="60" alt="image" src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/5874c704-433f-4f9b-81cf-1aaeb36d4708">|<img width="62" alt="image" src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/6fcfb8e1-4617-4f90-8765-f001bd26a332">|<img width="90" alt="image" src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/cfb47a30-a7b7-4f19-b4a0-193450843ca1">| ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
kirillzyusko · Mar 16, 2024 · bf8c497 · bf8c497
1 parent 350d4da
commit bf8c497
Show file tree

Hide file tree

Showing 35 changed files with 180 additions and 52 deletions.
diff --git a/.gitignore b/.gitignore
@@ -69,3 +69,6 @@ lib/
 
 # yarn cache folder (v2+)
 .yarn
+
+# Web
+*.pem
diff --git a/docs/.markdownlint.yaml b/docs/.markdownlint.yaml
@@ -2,3 +2,7 @@ default: true
 
 # Disable checks for line length
 MD013: false
+
+# Disable check for inline html (badges)
+MD033:
+  allowed_elements: ["div"]
diff --git a/docs/docs/api/keyboard-controller-view.md b/docs/docs/api/keyboard-controller-view.md
@@ -33,11 +33,11 @@ A callback function which is fired when layout of focused input gets changed.
 
 A callback function which is fired every time when user changes a text (types/deletes symbols).
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

diff --git a/docs/docs/api/keyboard-controller.md b/docs/docs/api/keyboard-controller.md
@@ -20,7 +20,7 @@ The `KeyboardController` module in React Native provides a convenient set of met
 
 ## Methods
 
-### `setInputMode`
+### `setInputMode` <div class="label android"></div>
 
 This method is used to dynamically change the `windowSoftInputMode` during runtime in an Android application. It takes an argument that specifies the desired input mode. The example provided sets the input mode to `SOFT_INPUT_ADJUST_RESIZE`:
 
@@ -36,7 +36,7 @@ To understand the difference between `adjustResize`/`adjustPan`/`adjustNothing`
 A combination of `adjustResize` + `edge-to-edge` mode will result in behavior similar to `adjustNothing` - in this case window is not resized automatically and content is not moved along with the keyboard position. And it becomes a responsibility of developer to handle keyboard appearance (thus it'll match iOS behavior).
 :::
 
-### `setDefaultMode`
+### `setDefaultMode` <div class="label android"></div>
 
 This method is used to restore the default `windowSoftInputMode` declared in the `AndroidManifest.xml`. It resets the input mode to the default value:
 

diff --git a/docs/docs/api/keyboard-gesture-area.md b/docs/docs/api/keyboard-gesture-area.md
@@ -1,5 +1,6 @@
 ---
 sidebar_position: 4
+title: KeyboardGestureArea
 keywords:
   [
     react-native-keyboard-controller,
@@ -9,7 +10,11 @@ keywords:
   ]
 ---
 
-# KeyboardGestureArea
+<!-- prettier-ignore-start -->
+<!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
+<!-- markdownlint-disable-next-line MD025 -->
+# KeyboardGestureArea <div class="label android"></div>
+<!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.
 

diff --git a/docs/docs/api/keyboard-provider.md b/docs/docs/api/keyboard-provider.md
@@ -9,15 +9,15 @@ keywords: [react-native-keyboard-controller, KeyboardProvider]
 
 ## Props
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

diff --git a/docs/package.json b/docs/package.json
@@ -10,6 +10,7 @@
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
+    "https": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem docusaurus start",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc"

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -142,3 +142,83 @@
     display: block;
   }
 }
+
+.label {
+  border-radius: 20px;
+  color: #fff;
+  display: inline-block;
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 2px 12px;
+  position: relative;
+}
+
+.label.android {
+  background: #3ddc84;
+}
+
+.label.android::before {
+  content: "Android";
+}
+
+.label.ios {
+  background: #616a70;
+}
+
+.label.ios::before {
+  content: "iOS";
+}
+
+.label.required {
+  background: #fa5035;
+}
+
+.label.required::before {
+  content: "Required";
+}
+
+.label.new {
+  background: #40e0d0;
+}
+
+.label.new::before {
+  content: "New";
+}
+
+.label.web {
+  background: #007bff;
+}
+
+.label.web::before {
+  content: "Web";
+}
+
+h1 .label {
+  padding: 3px 12px;
+  top: -9px;
+}
+
+h2 .label {
+  padding: 3px 12px;
+  top: -5px;
+}
+
+h3 .label {
+  line-height: 20px;
+  top: -2px;
+}
+
+/* to become a circle in table of contents */
+.table-of-contents .label {
+  border-radius: 100%;
+  color: transparent;
+  float: none;
+  height: 6px;
+  margin-left: 4px;
+  margin-top: 7px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 6px;
+}
diff --git a/docs/versioned_docs/version-1.0.0/api/keyboard-controller-view.md b/docs/versioned_docs/version-1.0.0/api/keyboard-controller-view.md
@@ -8,6 +8,6 @@ A plain react-native `View` with some additional methods and props. Used interna
 
 A callback function which is fired every time, when keyboard changes its position on the screen.
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
diff --git a/docs/versioned_docs/version-1.0.0/api/keyboard-provider.md b/docs/versioned_docs/version-1.0.0/api/keyboard-provider.md
@@ -4,7 +4,7 @@
 
 ## Props
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 

diff --git a/docs/versioned_docs/version-1.10.0/api/keyboard-controller-view.md b/docs/versioned_docs/version-1.10.0/api/keyboard-controller-view.md
@@ -33,11 +33,11 @@ A callback function which is fired when layout of focused input gets changed.
 
 A callback function which is fired every time when user changes a text (types/deletes symbols).
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

diff --git a/docs/versioned_docs/version-1.10.0/api/keyboard-controller.md b/docs/versioned_docs/version-1.10.0/api/keyboard-controller.md
@@ -20,7 +20,7 @@ The `KeyboardController` module in React Native provides a convenient set of met
 
 ## Methods
 
-### `setInputMode`
+### `setInputMode` <div class="label android"></div>
 
 This method is used to dynamically change the `windowSoftInputMode` during runtime in an Android application. It takes an argument that specifies the desired input mode. The example provided sets the input mode to `SOFT_INPUT_ADJUST_RESIZE`:
 
@@ -36,7 +36,7 @@ To understand the difference between `adjustResize`/`adjustPan`/`adjustNothing`
 A combination of `adjustResize` + `edge-to-edge` mode will result in behavior similar to `adjustNothing` - in this case window is not resized automatically and content is not moved along with the keyboard position. And it becomes a responsibility of developer to handle keyboard appearance (thus it'll match iOS behavior).
 :::
 
-### `setDefaultMode`
+### `setDefaultMode` <div class="label android"></div>
 
 This method is used to restore the default `windowSoftInputMode` declared in the `AndroidManifest.xml`. It resets the input mode to the default value:
 

diff --git a/docs/versioned_docs/version-1.10.0/api/keyboard-gesture-area.md b/docs/versioned_docs/version-1.10.0/api/keyboard-gesture-area.md
@@ -1,5 +1,6 @@
 ---
 sidebar_position: 4
+title: KeyboardGestureArea
 keywords:
   [
     react-native-keyboard-controller,
@@ -9,7 +10,11 @@ keywords:
   ]
 ---
 
-# KeyboardGestureArea
+<!-- prettier-ignore-start -->
+<!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
+<!-- markdownlint-disable-next-line MD025 -->
+# KeyboardGestureArea <div class="label android"></div>
+<!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.
 

diff --git a/docs/versioned_docs/version-1.10.0/api/keyboard-provider.md b/docs/versioned_docs/version-1.10.0/api/keyboard-provider.md
@@ -9,15 +9,15 @@ keywords: [react-native-keyboard-controller, KeyboardProvider]
 
 ## Props
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

diff --git a/docs/versioned_docs/version-1.11.0/api/keyboard-controller-view.md b/docs/versioned_docs/version-1.11.0/api/keyboard-controller-view.md
@@ -33,11 +33,11 @@ A callback function which is fired when layout of focused input gets changed.
 
 A callback function which is fired every time when user changes a text (types/deletes symbols).
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

diff --git a/docs/versioned_docs/version-1.11.0/api/keyboard-controller.md b/docs/versioned_docs/version-1.11.0/api/keyboard-controller.md
@@ -20,7 +20,7 @@ The `KeyboardController` module in React Native provides a convenient set of met
 
 ## Methods
 
-### `setInputMode`
+### `setInputMode` <div class="label android"></div>
 
 This method is used to dynamically change the `windowSoftInputMode` during runtime in an Android application. It takes an argument that specifies the desired input mode. The example provided sets the input mode to `SOFT_INPUT_ADJUST_RESIZE`:
 
@@ -36,7 +36,7 @@ To understand the difference between `adjustResize`/`adjustPan`/`adjustNothing`
 A combination of `adjustResize` + `edge-to-edge` mode will result in behavior similar to `adjustNothing` - in this case window is not resized automatically and content is not moved along with the keyboard position. And it becomes a responsibility of developer to handle keyboard appearance (thus it'll match iOS behavior).
 :::
 
-### `setDefaultMode`
+### `setDefaultMode` <div class="label android"></div>
 
 This method is used to restore the default `windowSoftInputMode` declared in the `AndroidManifest.xml`. It resets the input mode to the default value:
 

diff --git a/docs/versioned_docs/version-1.11.0/api/keyboard-gesture-area.md b/docs/versioned_docs/version-1.11.0/api/keyboard-gesture-area.md
@@ -1,5 +1,6 @@
 ---
 sidebar_position: 4
+title: KeyboardGestureArea
 keywords:
   [
     react-native-keyboard-controller,
@@ -9,7 +10,11 @@ keywords:
   ]
 ---
 
-# KeyboardGestureArea
+<!-- prettier-ignore-start -->
+<!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
+<!-- markdownlint-disable-next-line MD025 -->
+# KeyboardGestureArea <div class="label android"></div>
+<!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.
 

diff --git a/docs/versioned_docs/version-1.11.0/api/keyboard-provider.md b/docs/versioned_docs/version-1.11.0/api/keyboard-provider.md
@@ -9,15 +9,15 @@ keywords: [react-native-keyboard-controller, KeyboardProvider]
 
 ## Props
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

diff --git a/docs/versioned_docs/version-1.4.0/api/keyboard-controller-view.md b/docs/versioned_docs/version-1.4.0/api/keyboard-controller-view.md
@@ -16,10 +16,10 @@ A callback function which is fired every time, when keyboard changes its positio
 
 A callback function which is fired when keyboard finished a transition from one to another state (from closed to open, for example).
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
diff --git a/docs/versioned_docs/version-1.4.0/api/keyboard-provider.md b/docs/versioned_docs/version-1.4.0/api/keyboard-provider.md
@@ -4,15 +4,15 @@
 
 ## Props
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

diff --git a/docs/versioned_docs/version-1.5.0/api/keyboard-controller-view.md b/docs/versioned_docs/version-1.5.0/api/keyboard-controller-view.md
@@ -25,10 +25,10 @@ A callback function which is fired every time, when user drags keyboard.
 
 A callback function which is fired when keyboard finished a transition from one to another state (from closed to open, for example).
 
-### `statusBarTranslucent`
+### `statusBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent`
+### `navigationBarTranslucent` <div class="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
diff --git a/docs/versioned_docs/version-1.5.0/api/keyboard-gesture-area.md b/docs/versioned_docs/version-1.5.0/api/keyboard-gesture-area.md
@@ -1,5 +1,6 @@
 ---
 sidebar_position: 4
+title: KeyboardGestureArea
 keywords:
   [
     react-native-keyboard-controller,
@@ -9,7 +10,11 @@ keywords:
   ]
 ---
 
-# KeyboardGestureArea
+<!-- prettier-ignore-start -->
+<!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
+<!-- markdownlint-disable-next-line MD025 -->
+# KeyboardGestureArea <div class="label android"></div>
+<!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.