From 282e36c08d0a9736a8966911c1edeb713edc1f3b Mon Sep 17 00:00:00 2001
From: Nikhil Tanwar <2002nikhiltanwar@gmail.com>
Date: Fri, 29 Jul 2022 02:59:17 +0530
Subject: [PATCH] Add documentation for widget

Added documentation for current widget usage, currently supported arguments, using custom CSS/JS
---
 docs/index.rst  |  1 +
 docs/widget.rst | 88 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 docs/widget.rst
diff --git a/docs/index.rst b/docs/index.rst
index 3f40e6337..a190afa97 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -12,3 +12,4 @@ Welcome to libkiwix's documentation!
 
    usage
    api/ref_api
+   widget
diff --git a/docs/widget.rst b/docs/widget.rst
new file mode 100644
index 000000000..07dc45e24
--- /dev/null
+++ b/docs/widget.rst
@@ -0,0 +1,88 @@
+Kiwix serve widget
+====================
+
+Introduction
+------------
+
+The kiwix-serve widget provides an easy to embed way to show the `kiwix-serve` homepage.
+
+Usage
+-----
+
+To use the widget, simply add an iframe with its `src` attribute set to the `widget` endpoint.
+Example HTML Page ::
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+    <title>Widget Test</title>
+    </head>
+    <body>
+    <iframe src="http://192.168.18.8:8080/widget?disabledesc&disablefilter&disabledownload" width=1000 height=1000></iframe>
+    </body>
+    </html>
+
+This creates an iframe with the kiwix-serve homepage contents.
+
+Arguments are explained below.
+
+Possible Arguments
+-------------------
+
+Currently, the following arguments are supported.
+
+disabledesc (value = N/A)
+    Disables the description part of a tile.
+
+disablefilter (value = N/A)
+    Disables the search filters: language, category, tag and search function.
+
+disableclick (value = N/A)
+    Disables clicking the book to open it for reading.
+
+disabledownload (value = N/A)
+    Disables the download button (if avaialable at all) on the tile.
+
+book (value = yes)
+    Multivalue argument. Takes the name of books to display.
+
+    Example::
+    
+        <iframe src="http://192.168.18.8:8080/widget?book=wikiversity_en_all&book=bitcoin_en_all">
+
+Custom CSS and JS
+-----------------
+
+You can add your custom CSS rules and Javascript code to the widget.
+
+To do that, use the following code as template::
+
+    <iframe id="receiver" src="http://192.168.18.8:8080/widget?disabledesc=&disablefilter=&disabledownload=" width="1000" height="1000">
+    <p>Your browser does not support iframes.</p>
+    </iframe>
+
+    <script>
+    window.onload = function() {
+    var receiver = document.getElementById('receiver').contentWindow;
+    function sendMessage() {
+        let msg = {
+        css: `
+        .book__header {
+            color:red;
+        }`,
+        js: `
+        function widgetTest() {
+        console.log("Testing widget");
+        }
+        widgetTest();
+        `
+        }
+        receiver.postMessage(msg, 'http://192.168.18.8:8080/widget');
+    }
+    sendMessage();
+    }
+    </script>
+
+
+The CSS/JS fields are optional, you may send both or only one.
+
