Added components docs headings

docs/api/components.md

@@ -0,0 +1,27 @@
+---
+layout: default
+title: Components
+parent: API
+nav_order: 2
+---
+
+# MJXGUI Components & Blocks
+
+1. TOC
+{:toc}
+
+# Base Component Class
+
+# One Block Components
+
+# Two Block Components
+
+# Three Block Components
+
+# Template Three Block Components
+
+# Trigonometric Two Block Components
+
+# Text Component
+
+# Symbol Component

docs/api/index.md

@@ -2,6 +2,7 @@
 layout: default
 title: API
 nav_order: 4
+has_children: true
 ---
 
 # API

docs/api/mjxgui-instance.md

@@ -0,0 +1,27 @@
+---
+layout: default
+title: MJXGUI Instance 
+parent: API
+nav_order: 1
+---
+
+# MJXGUI Instance API
+
+1. TOC
+{:toc}
+
+# Constructor
+
+## Writing A Success Callback
+
+## Options
+Currently, the following options are supported -
+
+| Option          | Data Type | Default value | Description                                                                                                                                                                               |
+|-----------------|-----------|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `mathDelimiter` | String    | `"$$"`        | The math delimiter as configured when you load MathJax. Use the same delimiter you use for inserting equation blocks, not inline equations. Most commonly used block delimiter is "$$".   |
+| `theme`         | String    | `undefined`   | Pass theme as "dark" to render the MJXGUI widget in dark mode. Any other value will default to light mode.                                                                                |
+
+# Attributes
+
+# Methods

docs/customizing.md

@@ -20,10 +20,10 @@ For example, lets say you want to add the ∴ symbol to the editor widget. In La
 
 `registerSymbol()` takes 2 required and 2 optional arguments -
 
-1. `latexData` - The LaTeX representation of the symbol, in this case `"\therefore"`.
-2. `buttonContent` - The HTML representation of the symbol, in this case `"∴"`. This HTML representation can be a simple string, an SVG, some custom HTML, an HTML character code, or LaTeX that can be typeset using MathJax (see argument 4).
-3. `title` - A string that will be set as the title attribute of the rendered button.
-4. `typeset` - A boolean that, if true, will use MathJax to typeset the HTML representation (argument 2). If you set this as true, make sure that MathJax is fully loaded when you call `registerSymbol()`. Defaults to `false`.
+1. `latexData` - The LaTeX representation of the symbol, in this case `"\therefore"`. Required.
+2. `buttonContent` - The HTML representation of the symbol, in this case `"∴"`. This HTML representation can be a simple string, an SVG, some custom HTML, an HTML character code, or LaTeX that can be typeset using MathJax (see argument 4). Required.
+3. `title` - A string that will be set as the title attribute of the rendered button. Optional.
+4. `typeset` - A boolean that, if true, will use MathJax to typeset the HTML representation (argument 2). If you set this as true, make sure that MathJax is fully loaded when you call `registerSymbol()`. Optional, defaults to `false`.
 
 ```javascript
 const mjxgui = new MJXGUI('#mjxgui-button');
@@ -41,19 +41,19 @@ Adding a function to the editor widget is a little different from adding a symbo
 1. A class that knows how to generate the LaTeX you need for your function
 2. An HTML representation of the function (to show in the editor widget)
 
-You will need to create a class that extends from one of MJXGUI's many Component classes, and override the `toLatex()` method of the class. You can find a list of Component classes MJXGUI provides, along with when to use them in the [API documentation](./api/index.md).
+You will need to create a class that extends from one of MJXGUI's many Component classes, and override the `toLatex()` method of the class. You can find a list of Component classes MJXGUI provides, along with when to use them in the [Components documentation](./api/components.md).
 
 Once you create this class and an MJXGUI instance, call the `registerFunction()` method on the MJXGUI instance to add the function you want.
 
-### Example: Adding $ sin^2 \framebox $ to the editor
-For example, let's say we want to add the $ sin^2 \framebox $ function to the editor.
+### Example: Adding $ sin^2 \boxed{} $ to the editor
+For example, let's say you want to add the $ sin^2 \boxed{} $ function to the editor.
 
 `registerFunction()` takes 2 required and 2 optional arguments -
 
-1. `componentClass` - A class inheriting from one of MJXGUI's many component classes, which knows how to render it's content as LaTeX.
-2. `buttonContent` - The HTML representation of the function. This can be a simple string, an SVG, some custom HTML, an HTML character code, or LaTeX that can be typeset using MathJax.
-3. `title` - A string that will be set as the title attribute of the rendered button.
-4. `typeset` - A boolean that, if true, will use MathJax to typeset the HTML representation (argument 2). If you set this as true, make sure that MathJax is fully loaded when you call `registerFunction()`. Defaults to `false`.
+1. `componentClass` - A class inheriting from one of MJXGUI's many component classes, which knows how to render it's content as LaTeX. Required.
+2. `buttonContent` - The HTML representation of the function. This can be a simple string, an SVG, some custom HTML, an HTML character code, or LaTeX that can be typeset using MathJax (see argument 4). Required.
+3. `title` - A string that will be set as the title attribute of the rendered button. Optional.
+4. `typeset` - A boolean that, if true, will use MathJax to typeset the HTML representation (argument 2). If you set this as true, make sure that MathJax is fully loaded when you call `registerFunction()`. Optional, defaults to `false`.
 
 ```javascript
 // Create the class that knows how to render sin^2 as LaTeX

docs/index.md

@@ -9,8 +9,6 @@ MJXGUI is a widget style application meant to give users a graphical interface f
 
 The motivation is to have something like a pop-up widget that would help users build an expression graphically just as they do in Google Docs or Microsoft Word, but then would also convert the same equation into LaTeX so it could be rendered with MathJax later.
 
-This is what the editor widget looks like -
-
 ![MJXGUI Editor Window](media/mjxgui-editor.png)
 
 # Features

docs/installation-usage.md

@@ -9,9 +9,13 @@ MJXGUI uses MathJax as a core dependency, so you need to include both MathJax as
 
 Make sure you include MathJax before including MJXGUI.
 
-Include the minified MJXGUI source file in your <head> tag by getting the [source from GitHub](https://raw.githubusercontent.com/hrushikeshrv/mjxgui/main/src/mjxgui.min.js).
+Then include the MJXGUI javascript file and stylesheet. You can get both the script and the stylesheet from GitHub -
+1. [mjxgui.js](https://raw.githubusercontent.com/hrushikeshrv/mjxgui/main/src/mjxgui.min.js)
+2. [mjxgui.css](https://raw.githubusercontent.com/hrushikeshrv/mjxgui/main/src/mjxgui.css)
 
-Also include the stylesheet for MJXGUI. Make sure you include the stylesheet before your site's stylesheet, to allow your CSS to override MJXGUI's CSS.
+You can include MJXGUI's stylesheet before your site's stylesheet, to allow your CSS to override MJXGUI's CSS.
+
+An example config could be -
 
 ```html
 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
@@ -25,9 +29,6 @@ MJXGUI works by showing your users a button/element prompting them to insert an
 
 Once the user is done entering the equation/expression, the editor UI disappears and a callback function that you supply is run. This callback function is where you can access the generated LaTeX for the expression the user just entered and handle however you need. The most common use case is to store it as LaTeX and/or render it on your page using MathJax.
 
-{: .note}
-Make sure the callback function you supply is not an arrow function but a regular function.
-
 Initialize MJXGUI by creating a new MJXGUI instance, which takes 3 parameters - a CSS selector, a callback function, and an options object.
 
 ```javascript
@@ -36,15 +37,13 @@ const mjxgui = new MJXGUI('selector', function() {}, options={});
 
 The selector is a CSS selector that should be able to select the elements you want users to click on to start entering an equation. MJXGUI adds click event listeners to all selected elements and shows the editor UI whenever they are clicked.
 
-The callback function is a function that is run when the user is done entering the equation and clicks on the “Done” button. This is where you will be able to access the LaTeX for the equation. The this keyword inside this function will have access to the MJXGUI cursor, which contains all the methods and properties used to build equations and generate LaTeX for them. Calling this.getLatex() will generate the LaTeX for the equation and return it to you as a string.
+The callback function is a function that is run when the user is done entering the equation and clicks on the “Done” button. This is where you will be able to access the LaTeX for the equation.
 
 You would build a minimal example as shown below. This example takes the LaTeX for the equation the user has created, appends it to the body, and typesets it using MathJax.
 
 ```html
 <button id="mjxgui-button">Add Equation</button>
-<div id="equation-output" style="padding: 40px; font-size: 2rem">
-    <h3 style="font-family: monospace">Inserted Equations:</h3>
-</div>
+<div id="equation-output"></div>
 <script>
     const eqnOutput = document.querySelector('#equation-output');
     
@@ -58,9 +57,4 @@ You would build a minimal example as shown below. This example takes the LaTeX f
 </script>
 ```
 
-Currently, the following options are supported -
-
-| Option          | Data Type | Default value | Description                                                                                                                                                                                |
-|-----------------|-----------|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `mathDelimiter` | String    | `"$$"`        | The math delimiter as configured in when you load MathJax. Use the same delimiter you use for inserting equation blocks, not inline equations. Most commonly used block delimiter is "$$". |
-| `theme`         | String    | `undefined`   | Pass theme as "dark" to render the MJXGUI widget in dark mode. Any other value will default to light mode.                                                                                 |
+The API provided by the MJXGUI instance is documented in [MJXGUI Instance documentation](./api/mjxgui-instance.md).