@signageos/front-applet 6.2.0 → 6.3.0

package/docs/{js-api/js-applet-basics.md → applet-basics.md}

@@ -17,7 +17,7 @@ This thread contains basic methods of every Applet used to load necessary config
 
 ## All methods and properties
 
-::: table-responsive
+
 | Methods/Property  | Description | Supported since |
 | ----------------- | ----------- | :---------------: |
 | `onReady()`         | This method will wait until sOS object library and all dependencies are ready to be used. | 1.0.0 |
@@ -26,8 +26,7 @@ This thread contains basic methods of every Applet used to load necessary config
 | `appletVersion`  | Returns current Applet version | JS API `4.5.0`, Front-display `7.8.0`|
 | `config` object  | Returns object with key-values set via Timing or as a bundled config| JS API `1.5.0`, Front-display `6.8.0`|
 | `config` object  | Returns object with key-values set via Timing or as a bundled config| `1.0.0`|
-| `capabilities`  | Enum of device-specific capabilities and features | `1.0.0`|
-:::
+| `capabilities`  | Enum of device-specific capabilities and features | `1.0.0`
 
 ## Starting Applet
 
@@ -77,7 +76,7 @@ console.log(sos.config);
 ## onReady()
 This method will wait until sOS object library and all dependencies are ready to be used.
 
-::: alert alert--danger
+:::danger
 Every Applet must contain this method, otherwise it won't work.
 :::
 
@@ -102,21 +101,9 @@ window.addEventListener('sos.loaded',() => {
 });
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/restore">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Example of Applet for basic start</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Example of Applet for basic start](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/restore)
+:::
 
 ## restore()
 The typical case of usage for digital signage is playing a loop with some specified duration. This method should be called always when the loop is changed. It will clear all previously played videos, streams, clear display views, and notify for garbage collection.  
@@ -145,21 +132,9 @@ window.addEventListener('sos.loaded', () => {
 });
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/restore">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Example of Applet with restore() method</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Example of Applet with restore() method](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/restore)
+:::
 
 ## refresh()
 AFter calling this method applet is freshly launched.
@@ -192,29 +167,19 @@ window.addEventListener('sos.loaded',() => {
 
 ## Custom variables in Applet
 
-You can pass CUSTOM key-value variables to the Applet. To do that, add your values as a Timing configuration (over Box of [Timings API](/api/rest/timing/3-timing-post-one)). Then you can access your values via `sos.config` object.
+You can pass CUSTOM key-value variables to the Applet. To do that, add your values as a Timing configuration (over Box of [Timings API](https://docs.signageos.io/hc/en-us/articles/4405238989458)). Then you can access your values via `sos.config` object.
 
 ```javascript
 // Parsed JSON object passed to Timing for current applet & current device together
 console.log(sos.config.mySecretID);
 console.log(sos.config.imgUrl);
 ```
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" 
-        href="https://docs.signageos.io/hc/en-us/articles/4405238989458">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fas fa-hand-point-right svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Custom variables in Applet</h3>
-                <div class="wide-box__description">How to pass custom variables and cofiguration to your Applet</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+
+:::note[Guide]
+[Custom variables in Applet](https://docs.signageos.io/hc/en-us/articles/4405238989458)
+
+How to pass custom variables and cofiguration to your Applet
+:::
 
 ## Applet JS API version
 
@@ -232,14 +197,13 @@ There are two kinds of capabilities - display and management.
 
 Display capabilities refer to the capabilities of the display in terms of content, playback, peripherals, etc.
 
-::: table-responsive
+
 | Capability                     | Description                                                                               |
 | ------------------------------ | ----------------------------------------------------------------------------------------- |
-| `FILE_SYSTEM_EXTERNAL_STORAGE` | Device file system supports [external storage](/api/js/content/js-file-system) (i.e. flash drives)                          |
-| `FILE_SYSTEM_FILE_CHECKSUM`    | Device is can [calculate a file checksum](/api/js/content/js-file-system#getfilechecksum) |
-| `VIDEO_4K`                     | Device is capable of [playing 4K video](/api/js/content/js-video)                                                     |
-| `SERIAL`                       | Device supports communication with peripherals over [serial](/api/js/content/js-hardware-serial)                                |
-:::
+| `FILE_SYSTEM_EXTERNAL_STORAGE` | Device file system supports [external storage](content/js-file-system) (i.e. flash drives)                          |
+| `FILE_SYSTEM_FILE_CHECKSUM`    | Device is can [calculate a file checksum](content/js-file-system#getfilechecksum) |
+| `VIDEO_4K`                     | Device is capable of [playing 4K video](content/js-video)                                                     |
+| `SERIAL`                       | Device supports communication with peripherals over [serial](content/js-serial)                                
 
 #### Javascript example:
 
@@ -249,41 +213,28 @@ if (await sos.display.supports('VIDEO_4K')) {
 }
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/capabilities-content">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Example of Content Capabilities</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Example of Content Capabilities](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/capabilities-content)
+:::
 
 
 ### Management capabilities
 
 Management capabilities refer to the capabilities of the display's internal state management.
 
-::: table-responsive
+
 | Capability                     | Description                                                                               |
 | ------------------------------ | ----------------------------------------------------------------------------------------- |
-| `BATTERY_STATUS` | Device can [report its battery status](/api/js/management/1-js-management#getbatterystatus). |
-| `WIFI` | Device can [connect to a Wi-Fi](/api/js/management/13-js-management-wifi#connect). |
-| `WIFI_SCAN` | Device can [scan surrounding Wi-Fi devices](/api/js/management/13-js-management-wifi#scandevices). |
-| `WIFI_AP` | Device is capable of [becoming a Wi-Fi endpoint](/api/js/management/13-js-management-wifi#enableap) that other devices can connect to. |
-| `SET_BRIGHTNESS` | Device can change its [screen brightness](/api/js/management/5-js-management-screen#setbrightness). |
-| `SET_TIME` | Device can change its [time settings](/api/js/management/6-js-management-time). |
-| `NTP_TIME` | Device can [synchronize its time with an NTP server](/api/js/management/6-js-management-time#setntp). |
-| `PACKAGE_INSTALL` | It's possible to [install additional packages](/api/js/management/8-js-management-package) on the device, managed by signageOS application. |
-| `SET_VOLUME` | Device can change its [audio volume](/api/js/management/7-js-management-volume). |
-| `SET_REMOTE_CONTROL_ENABLED` | Device can [disable control via IR remote](/api/js/management/3-js-management-remote-control) to increase security. |
-:::
+| `BATTERY_STATUS` | Device can [report its battery status](management/js-management-management#getbatterystatus). |
+| `WIFI` | Device can [connect to a Wi-Fi](management/js-management-wifi#connect). |
+| `WIFI_SCAN` | Device can [scan surrounding Wi-Fi devices](management/js-management-wifi#scandevices). |
+| `WIFI_AP` | Device is capable of [becoming a Wi-Fi endpoint](management/js-management-wifi#enableap) that other devices can connect to. |
+| `SET_BRIGHTNESS` | Device can change its [screen brightness](management/js-management-screen#setbrightness). |
+| `SET_TIME` | Device can change its [time settings](management/js-management-time). |
+| `NTP_TIME` | Device can [synchronize its time with an NTP server](management/js-management-time#setntp). |
+| `PACKAGE_INSTALL` | It's possible to [install additional packages](management/js-management-package) on the device, managed by signageOS application. |
+| `SET_VOLUME` | Device can change its [audio volume](management/js-management-audio). |
+| `SET_REMOTE_CONTROL_ENABLED` | Device can [disable control via IR remote](management/js-management-remote-control) to increase security. 
 
 ```javascript
 if (await sos.management.supports('WIFI')) {
@@ -291,18 +242,6 @@ if (await sos.management.supports('WIFI')) {
 }
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/management-js-api/capabilities-management">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Example of Management Capabilities</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Example of Management Capabilities](https://github.com/signageos/applet-examples/blob/master/examples/management-js-api/capabilities-management)
+:::

package/docs/{js-api → content}/js-applet-resources.md

@@ -16,20 +16,16 @@ description: "[Content JS API] Often there are some JavaScripts and CSS styles n
 Often there are some JavaScripts and CSS styles necessary to be loaded for your Applet. 
 It can be libraries like jQuery or even your whole application code. For these necessities offline API for saving, storing & loading files are ready.
 
-
-## All methods
-::: table-responsive
 | Methods | Description | Supported since |
-| ------- | ----------- | ------ | :---------------: |
+| ------- | ----------- | ------ |
 | `addFile()` | Add single file to Applet before starting it. | 1.0.0 |
 | `addFiles()` | Add files to Applet before starting it. | 1.0.0 |
-| `addFilesSync()` | Add files to Applet before starting it in the set order to prevent race condition. | 1.0.0 |
-:::
+| `addFilesSync()` | Add files to Applet before starting it in the set order to prevent race condition. | 1.0.0 
 
 ### File object
 Every method above, accept single object or array of objects depending by type. Every object **must have** these keys.
 
-::: table-responsive
+
 | Key | Type | Required | Description |
 | :-----: | :-----: | :----: | ------- |
 | `uri` | String | <div class="red">Yes</div> | URL of file |
@@ -37,10 +33,9 @@ Every method above, accept single object or array of objects depending by type.
 | `type` | String | <div class="red">Yes</div> | Type of file. Example: `sos.offline.types.javascript`, `sos.offline.types.css`, `sos.offline.types.video` |
 |||| ^^ |
 | `flags` | Array | <div class="red">Yes</div> | Special flag for file |
-| `headers` | Array | <div class="yellow">No</div> |  Authorization headers |
-:::
+| `headers` | Array | <div class="yellow">No</div> |  Authorization headers 
 
-::: alert alert--info
+:::info
 * The file URL must point to a file. If your URI leads to a 303 redirect (e.g. from http to http**s**), the API will not work.
 * There are some limitations for [Emulator](https://docs.signageos.io/hc/en-us/articles/4405238997138). 
 :::
@@ -84,21 +79,9 @@ const files = [ // Array of files
 await sos.offline.addFiles(files);
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/offline-resources">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Example of Applet that save files and load them in one file</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Example of Applet that save files and load them in one file](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/offline-resources)
+:::
 
 ## addFilesSync()
 Method `addFilesSync()` works same as method above, but all files are loaded in correct order. Otherwise, files are loaded in random order by file size.
@@ -156,7 +139,7 @@ interface IFlag {
 ## Errors
 Although we are doing our best, following errors may occur when working with the Applet Resources.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 40101 | AppletResourcesError | File needs to be object |
@@ -168,5 +151,4 @@ Although we are doing our best, following errors may occur when working with the
 | 40106 | AppletResourcesError | Already existing file: `FILE_NAME` |
 |^^|^^| File is already loaded or exists in Applet |
 | 49901 | FileNotFoundError    | File `FILE_ID` was not found |
-|^^|^^| Applet can not get file. URL is invalid. |
-:::
+|^^|^^| Applet can not get file. URL is invalid. 

package/docs/{js-api → content}/js-browser.md

@@ -13,25 +13,24 @@ description: "[Content JS API] There are several use-cases when you need to open
 
 # Browser
 
-There are several use-cases when you need to open a web browser on a touch-enabled device (also known as a tablet). 
-For these cases, you can use a custom web browser we built. 
-Default URL can be opened and even the whitelisting/blacklisting of certain domains is supported. 
+There are several use-cases when you need to open a web browser on a touch-enabled device (also known as a tablet).
+For these cases, you can use a custom web browser we built.
+Default URL can be opened and even the whitelisting/blacklisting of certain domains is supported.
 
 ## All methods
-::: table-responsive
+
 | Methods  | Description | Supported since |
-| ----------------- | ----------- | -----  | :---------------: |
+| ----------------- | ----------- | :---------------: |
 | `open()`        | Open page in integrated browser |      4.0.0    |
-| `close()`        | Open page in integrated browser |      4.4.0    |
-:::
+| `close()`        | Open page in integrated browser |      4.4.0
 
 ## open()
 
-::: alert alert--info
-**This API is currently available on:**  
+:::info
+**This API is currently available on:**
 - Android devices with Android 5+ (Philips, Benq, Sharp, generic Android device)
 
-**With some limitation you can use this API also on**  
+**With some limitation you can use this API also on**
 - Samsung Tizen (SSSP 4 and above); where the website is just in fullscreen without an address bar or theme options (headless mode)
 - LG webOS (webOS 3.0 and above); where the website is just in fullscreen without an address bar or theme options (headless mode)
 - Raspberry Pi and NEC Compute Module; where the website is just in fullscreen without an address bar or theme options (headless mode)
@@ -42,22 +41,23 @@ Simple opening some page ex. our main company page.
 ```javascript
 sos.browser.open('https://www.signageos.io'); // Open link in the browser
 ```
-<br>
+<br/>
 
 Method `open()` also supports properties for browser. You can set height, width or CORS domains. All properties are optional.
 
-::: table-responsive
+
 | Property | Type | Description |
 | -------- | ------ | -------- |
 | `aclDomains` | Array | ? |
 | `aclMode` | String | Can be only **blacklist** or **whitelist**. |
 | `readOnlyAddressBar` | Boolean | Accessible address bar |
-| `coordinates` | Object | Size of browser screen (only Raspberry Pi) |
+| `coordinates` | Object | Size of browser screen (only Linux) |
 | `idleTimeout` | Number | Timeout in milliseconds for loading page |
 | `theme` | Object | Setting custom theme for Android |
 | `headlessMode` | Boolean | Headless mode hides the entire address bar (default) |
-| `canUserClose` | Boolean | Whether the user can manually close the browser. Default:<br>**Headless:** `false`<br>**With UI:** `true` |
-| `clearData` | Boolean | Clear cache after the browser closes. Default:<br>**Headless:** `false`<br>**With UI:** `true` |
+| `canUserClose` | Boolean | Whether the user can manually close the browser. Default:<br/>**Headless:** `false`<br/>**With UI:** `true` |
+| `clearData` | Boolean | Clear cache after the browser closes. Default:<br/>**Headless:** `false`<br/>**With UI:** `true`
+| `method` | String | Can only be **native** (which opens a new, fully sandboxed fullscreen window) or **iframe** (which opens a configurable-sized window). (only Linux) |
 :::
 
 
@@ -66,7 +66,7 @@ sos.browser.open('https://www.signageos.io', {
   aclDomains: ['google.com', 'yahoo.com'],
   aclMode: 'blacklist', // or 'whitelist'
   readOnlyAddressBar: true,
-  coordinates: { // Supported only on Raspberry Pi and Android
+  coordinates: { // Supported only on Linux and Android
     x: 0,
     y: 0,
     height: 500,
@@ -76,26 +76,14 @@ sos.browser.open('https://www.signageos.io', {
   headlessMode: false, // supported only on Android
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/browser">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Example of Applet for using browser on Android</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Example of Applet for using browser on Android](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/browser)
+:::
 
 ### Browser themes usage with Typescript
 You can also use all these methods with [signageOS TypeScript](https://docs.signageos.io/hc/en-us/articles/4405069154962#signageos-typescript).
 
-::: alert alert--info
+:::info
 Browser themes are only available on Android devices.
 :::
 
@@ -148,6 +136,7 @@ interface IOpenLinkOptions {
 	headlessMode?: boolean;
 	clearData?: boolean;
 	canUserClose?: boolean;
+	method?: 'native' | 'iframe'
 }
 
 open(uri: string, options?: IOpenLinkOptions): void;
@@ -162,15 +151,14 @@ Simple opening some page ex. our main company page.
 ```javascript
 sos.browser.close(); // Close the browser
 ```
-<br>
+<br/>
 
 ## Errors
 Although we are doing our best, following errors may occur when opening a link.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 40301 | AppletBrowserUriError | Property argument `uri` must be a string |
-| 50301 | InternalBrowserOpenLinkError | Unexpected error occurred when opening `$$LINK$$` |
-:::
+| 50301 | InternalBrowserOpenLinkError | Unexpected error occurred when opening `$$LINK$$`
 

package/docs/{js-api → content}/js-command.md

@@ -18,25 +18,22 @@ In some cases, you might be interested in a complete log of what the device was
 All commands will be available in [Applet Command REST API](https://api.docs.signageos.io/#8e7a8814-e612-1fad-0152-72f37591c7f2) and can be downloaded [historically as CSV export](https://api.docs.signageos.io/#5dceec58-ac4f-7a0c-f5ef-0854f9376e6d).
 
 ## All methods
-::: table-responsive
+
 | Methods  | Description | Supported since |
 | ----------------- | ----------- | -----  |
 | `dispatch()`  | Dispatch method for sending logs and data from device | 1.0.3 |
 | `onCommand()`  | Event listener for incoming commands from server | 1.0.3 |
 
-:::
-
 ## dispatch()
 
 Dispatch() is used for sending your custom logs or data from device to signageOS.
 
 ### Parameters
-::: table-responsive
+
 |   Parameter    | Type | Required |  Description  |
 | -------------- | -------------| :----------------: | ------------- |
 | `type`     | String  | <div class="red">Yes</div> | Event type; can be any string **up to 100 characters**|
-| custom `parameter` | String  | No | Custom parameters and values that you need to be dispatched  |
-:::
+| custom `parameter` | String  | No | Custom parameters and values that you need to be dispatched  
 
 ### Javascript example
 ```javascript
@@ -70,30 +67,17 @@ await sos.command.dispatch({
 
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/sending/">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Sending commands</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Sending commands](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/sending/)
+:::
 
 ### Errors
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 40401 | AppletCommandTypeError | Type contains invalid characters. |
 | 40402 | AppletCommandTypeError | Type is longer then 100 characters. |
-| 40403 | AppletCommandTypeError | Command type must be a string. |
-:::
+| 40403 | AppletCommandTypeError | Command type must be a string. 
 
 
 ### Usage with Typescript
@@ -104,37 +88,19 @@ interface ICommand {
 dispatch(command: ICommand): void;
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#8e7a8814-e612-1fad-0152-72f37591c7f2">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fas fa-server svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Get Commands</h3>
-                <div class="wide-box__description">Receiving your data dispatched from devices</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
-
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#5dceec58-ac4f-7a0c-f5ef-0854f9376e6d">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fas fa-server svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Monitoring/Device Reports</h3>
-                <div class="wide-box__description">Receiving historical data</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Rest API: Get Commands](https://api.docs.signageos.io/#8e7a8814-e612-1fad-0152-72f37591c7f2)
+
+Receiving your data dispatched from devices
+
+:::
+
+:::note[GitHub Example]
+[Rest API: Monitoring/Device Reports](https://api.docs.signageos.io/#5dceec58-ac4f-7a0c-f5ef-0854f9376e6d)
+
+Receiving historical data
+
+:::
 
 ## onCommand()
 Used for sending custom messages to online connected devices. 
@@ -142,12 +108,11 @@ This can be done through the REST API by [POST new applet command](https://api.d
 The command will be dispatched to the device & the applet can set up the logic by subscribing `onCommand` method.
 
 **Parameters:**
-::: table-responsive
+
 |      Param     | Type   | Required | Description  |
 | -------------- | ---------- | :-------: | ---------------------- |
 | `command`        | object      | <div class="red">Yes</div> | Any JS object with required property type. |
-| `append`         | HTMLElement  | <div class="red">Yes</div> | Type property must be string not longer then 50 characters and must contain only characters a-zA-Z0-9_- and .	|
-:::
+| `append`         | HTMLElement  | <div class="red">Yes</div> | Type property must be string not longer then 50 characters and must contain only characters a-zA-Z0-9_- and .	
 
 ### Javascript
 ```javascript
@@ -156,21 +121,9 @@ sos.command.onCommand((command) => {
 });
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/receiving">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Receiving commands</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Receiving commands](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/receiving)
+:::
 
 ### Usage with Typescript
 ```typescript
@@ -180,29 +133,18 @@ interface ICommand {
 onCommand(listener: (command: ICommand) => void): void;
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#511e18f3-b61b-a049-6395-8541132adc44">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fas fa-server svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Monitoring</h3>
-                <div class="wide-box__description">Creating monitoring data</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Rest API: Monitoring](https://api.docs.signageos.io/#511e18f3-b61b-a049-6395-8541132adc44)
+
+Creating monitoring data
+:::
 
 ## Errors
 Although we are doing our best, following errors may occur when working with the commands.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 40401 | AppletCommandTypeError | Type contains invalid characters, allowed are `/^[a-zA-Z0-9\.\-_]+$/g`|
 | 40402 | AppletCommandTypeError | Type is longer then 100 characters. |
-| 40403 | AppletCommandTypeError | Command type must be a string. |
-:::
+| 40403 | AppletCommandTypeError | Command type must be a string. 

package/docs/{js-api/js-api-debug.md → content/js-debug.md}

@@ -16,12 +16,11 @@ JS API debug lets you information about remote debug mode.
 
 ## All methods
 
-::: table-responsive
+
 | Method  | Description | Supported since |
 | ------ | -------- | :-------------: |
 | `isRemoteDebugEnabled()` | Returns information about remote debug settings | 5.8 |
-| `onRemoteDebugChanged()` | Accept function which is called after remote debug settings is changed | 5.8 |
-:::
+| `onRemoteDebugChanged()` | Accept function which is called after remote debug settings is changed | 5.8 
 
 ## isRemoteDebugEnabled()
 Method `isRemoteDebugEnabled()` returns the state of the [Device debug](https://docs.signageos.io/hc/en-us/articles/4416366711442-Device-debug) (**true** or **false**).

package/docs/{js-api → content}/js-device-info.md

@@ -8,20 +8,19 @@ tags:
 - applet_api
 - api
 - js_api
-description: "[Content JS API] There are many device-related informations that are grouped."
+description: "Information set to the device using the CloudControl - e.g. Location and Tags."
 ---
 
 # Device Info
-There are many device-related informations that are grouped.
+Information set to the device using the CloudControl - e.g. Location and Tags.
 
 ## All methods
 
-::: table-responsive
+
 | Method            | Description        | Supported since   |
 | ----------------- | ------------------ | :---------------: |
 | `getLocation()` | Returns location when assigned to device  | 5.2.0 |
-| `getOrganizationTags()` | Returns list of organization tags when some assigned to device  | 5.2.0 |
-:::
+| `getOrganizationTags()` | Returns list of organization tags when some assigned to device  | 5.2.0 
 
 ## getLocation()
 Location is requested from server on application start, automatically updated when changed and persists in local storage.