Added detailed docs for Button and Slider components

Signed-off-by: Vedant <[email protected]>

CHANGELOG.md

@@ -211,7 +211,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 > 25 June 2021
 
 - ✨ Adds video shortcode [`#244`](https://github.com/h-enk/doks/pull/244)
-- ✨ Adds collapsible sidebar as an option [`#243`](https://github.com/h-enk/doks/pull/243)
+- ✨ Adds apsible sidebar as an option [`#243`](https://github.com/h-enk/doks/pull/243)
 - 🐛 Fixes scrollbar in code blocks [`#231`](https://github.com/h-enk/doks/pull/231)
 - fix: add crossorigin attribute to webmanifest link [`#306`](https://github.com/h-enk/doks/pull/306)
 - ✨ Uses inline shortcode in alerts for large texts [`#235`](https://github.com/h-enk/doks/pull/235)

config/_default/hyas/doks.toml

@@ -32,7 +32,7 @@ bootstrapJavascript = false # false (default) or true
 
 # Nav
 sectionNav = ["docs"] # ["docs"] (default) or list of sections (e.g. ["docs", "guides"])
-toTopButton = false # false (default) or true
+toTopButton = true # false (default) or true
 breadcrumbTrail = false # false (default) or true
 headlineHash = true # true (default) or false
 scrollSpy = true # true (default) or false

content/docs/user-manual/comps.md

@@ -1,5 +1,5 @@
 ---
-title: "2. Components"
+title: "Components"
 description: ""
 summary: ""
 date: 2023-09-25T21:25:32+05:30
@@ -14,4 +14,139 @@ weight: 999
 toc: true
 ---
 
-Work In Progress
+This page describes the syntax, styles and variable usage with all the components supported in Quick-FTXUI
+
+## 1. Button 
+
+`Button` can be used to execute commands, like to exit the TUI, or to execute shell commands (bash & ps supported). 
+Syntax for defining a `Button` is:
+
+```sh
+[color] Button {
+  "[Button_label]",
+  [command],
+  [Button_style],
+  [variable_name]
+}
+```
+
+where,
+  - `color` is used to give color to the Button
+  - `Button_label` is the label given to the button
+  - `command`, which can be `"Exit"`, or a `System()` call.  
+  - `Button_style`, which can be Animated or Ascii. Its an optional parameter.
+  - `variable_name`, where the variable is of type`str`. If `System()` call is used, then variable has to be defined necessarily. 
+
+Now, lets take a look at some examples, which will depict all the styles and commands which we can execute
+  - Basic button, to exit the UI
+    ```sh
+    Button {
+      "Exit",
+      "Exit"
+    }
+    ```
+    which looks like this:
+    <img src="/images/button-1.png" alt="Basic button">
+
+  - Red Animated Button, to list the items in the current directory
+    ```sh
+    str z = "init"
+    Red Button {
+      "ls -l",
+      System("ls -l"),
+      Animated,
+      z
+    }
+    ```
+    which looks like this: <br>
+    <img src="/images/button-2.png" alt="ls -l button">
+
+  - Blue Ascii Button, to open chrome (in at least Ubuntu)
+    ```
+    str z = "init"
+    BlueLight Button{
+      "chrome",
+      System("/usr/bin/google-chrome-stable"),
+      Ascii,
+      z
+    }
+    ```
+    which looks like this: <br>
+    <img src="/images/button-3.png" alt="chrome button">
+
+  Now we will see all these buttons in action:
+  <video width="100%" height="auto" controls>
+    <source src="/images/button-video.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+
+  You can find the complete example [here](https://github.com/vrnimje/quick-ftxui/blob/master/examples/Button.qf)
+
+  Note: Since we used the same variables for both the `Button`s, the output from their commands were both reflected in `z`'s value.
+
+## 2. Slider
+
+`Slider` is used to select a numerical value between a specified range. 
+Syntax for defining a `Slider` is
+```sh
+[color] Slider {
+  "[Slider_label]",
+  variable_name,
+  range_min,
+  range_max,
+  step
+}
+```
+
+where,
+  - `color` is used to give color to the Slider
+  - `Slider_label`, which provides the label for the slider
+  - `variable_name`, where the variable is of type `int`, and stores the selected value
+  - `range_min`, which specifies the minimum value of the range
+  - `range_max`, which specifies the maximum value of the range
+  - `step`, which specifies the step value by which the slider's value will increase or decrease
+
+Now, lets take a look at some examples, which will depict how `Slider`s can be configured and used
+
+  - A Blue Slider, for choosing any value between 0 and 100
+    ```
+    int x = 5
+    Blue Slider{
+      "Slider 1: ",
+      x,
+      0,
+      100,
+      1
+    }
+    ```
+    which looks like:
+    <img src="/images/slider-1.png" alt="0-100 1 step Slider">
+
+  - A YellowLight Slider, for choosing any even number between 0 and 100
+    ```sh
+    int y = 40
+    YellowLight Slider{
+      "Slider 2: ",
+      y,
+      0,
+      100,
+      2
+    }
+    ```
+
+    which looks like:
+    <img src="/images/slider-2.png" alt="0-100 2 step Slider">
+
+  Lets look at these sliders we have defined in action:
+  <video width="100%" height="auto" controls>
+    <source src="/images/slider-video.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video> 
+
+  As we can see, the YellowLight `Slider` was progressing faster than the BlueLight one, as its step value was greater. 
+
+  Note: Avoid using `Slider`s in Horizontal blocks, as it results in its compaction like described below<br>
+  <img src="/images/slider-3.png" alt="slider defect"><br>
+  The slider is at its max range
+
+

content/docs/user-manual/dom.md

@@ -1,5 +1,5 @@
 ---
-title: "3. DOM"
+title: "DOM"
 description: ""
 summary: ""
 date: 2023-09-25T21:25:51+05:30

content/docs/user-manual/overview.md

@@ -1,5 +1,5 @@
 ---
-title: "1. Overview"
+title: "Overview"
 description: ""
 summary: ""
 date: 2023-09-21T22:21:06+05:30
@@ -101,7 +101,7 @@ The option no. (which starts from 0) will be stored in the variable defined with
 
 The output is:
 
-<video width="640px" height="364px" controls>
+<video width="100%" height="auto" controls>
   <source src="/images/Screencast from 25-09-23 07:45:51 PM IST.webm" type="video/webm">
   Your browser does not support the video tag.
 </video>
@@ -120,7 +120,7 @@ As we discussed above, Components are a vital part of the TUI, and are used for
 
 Lets take a look at a glimpse of these components:
 
-<video width="640px" height="364px" controls>
+<video width="100%" height="auto" controls>
   <source src="/images/Screencast from 25-09-23 08:21:44 PM IST.webm" type="video/webm">
   Your browser does not support the video tag.
 </video>
@@ -236,7 +236,7 @@ Border Vertical{
 
 The output is:
 
-<video width="640px" height="364px" controls>
+<video width="100%" height="auto" controls>
   <source src="/images/video-3.webm" type="video/webm">
   Your browser does not support the video tag.
 </video>

themes/my-doks-theme/layouts/index.html

@@ -25,11 +25,11 @@ <h1>{{ .Title }}</h1>
       <div class="row justify-content-center text-center">
         <div class="col-lg-5">
           <h2 class="h4">Using Quick-FTXUI</h2>
-          <p>Check out this <a href="/docs/guides/using-quick-ftxui/">guide</a> for using Quick-FTXUI in your system, here</p>
+          <p>Check out this <a href="/docs/guides/using-quick-ftxui/">guide</a> for using Quick-FTXUI in your project</p>
         </div>
         <div class="col-lg-5">
           <h2 class="h4">Understanding Quick-FTXUI</h2>
-          <p>Refer to the <a href="/docs/user-manual/1.-overview">user manual</a> for understanding the working of the language</p>
+          <p>Refer to the <a href="/docs/user-manual/overview">user manual</a> for understanding the working of the language</p>
         </div>
       </div>
     </div>