Merged master into doc-theme

update manual deploy script
Move lightbox assets into the manual build
2019-11-04 16:17:12 -05:00 · 2019-10-28 14:28:59 -04:00 · 2019-10-28 14:28:01 -04:00 · 2019-10-28 11:41:34 -04:00 · 2019-10-15 11:42:11 -04:00 · 2019-10-14 17:05:38 -04:00
37 changed files with 757 additions and 224 deletions
@@ -3,6 +3,10 @@ title = "Glossary of Terms"
 weight = 9
 sort_by = "weight"
 insert_anchor_links = "right"
+
+
+[extra]
+page_description = "Definitions of common terms used in BTS Spark and this manual"
 +++


@@ -3,12 +3,12 @@ title = "Help"
 weight = 3
 sort_by = "weight"
 insert_anchor_links = "right"
+
+[extra]
+page_description = "Report a problem or find the activity log from the Help module in BTS Spark"
 +++

-
-<div>
-   <iframe width="560" height="315" src="https://www.youtube.com/embed/yGQfr_puT3w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="yGQfr_puT3w") }}

 ## Report a Problem
   If there is any issue at all, you can click here
@@ -18,14 +18,14 @@ insert_anchor_links = "right"
   send, BTS will get an alert of everything you submitted and will be
   in contact with you shortly.

-![](image58.png)
+{{ image(name="image58.png", alt="screenshot") }}

 ## About Spark
   Upon launching this, you will see an info window
   which will list what version you are running as well as who is
   currently logged in.

-![](about_spark.png)
+{{ image(name="about_spark.png", alt="screenshot") }}

 ## Activity log
   This is an overall log viewer which will show
@@ -34,4 +34,4 @@ insert_anchor_links = "right"
   messages in a text box in the right top corner.

  
-![](image39.png)
+{{ image(name="image39.png", alt="screenshot") }}
@@ -1,15 +1,15 @@
 +++
-title = "Module Launcher"
+title = "Launcher"
 weight = 2
 sort_by = "weight"
 insert_anchor_links = "right"
+
+[extra]
+page_description = "The basics of the BTS Spark launcher and user interface"
 +++


-
-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/OxVqQBKFIDw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="OxVqQBKFIDw") }}

 -  The module launcher is the first item that will come up after
    logging in to Spark.
@@ -18,7 +18,7 @@ insert_anchor_links = "right"
    each module
 -  It appears like the following:

-![](image38.png)
+{{ image(name="image38.png", alt="screenshot") }}

 -  If you right-click anywhere on the launcher you can modify
    various display settings including:
@@ -29,7 +29,7 @@ insert_anchor_links = "right"
      -  Ability to exit the front end, this can also be done by simply clicking the “X” on the top right of this window or by clicking on exit from this options window
 -  These options are all displayed like the following:

-![](image68.png)
+{{ image(name="image68.png", alt="screenshot") }}

 ## Spark User interface

@@ -3,17 +3,21 @@ title = "Logging in to the system"
 weight = 1
 sort_by = "weight"
 insert_anchor_links = "right"
+
+[extra]
+page_description = "How to log into BTS Spark"
 +++


 The shortcut icon will appear on your desktop like below:

-![](image64.png)
+{{ image(name="image64.png", alt="BTS icon") }}

 Simply double click or single click and hit enter to launch the
    login screen:

-![](image3.png)
+{{ image(name="image3.png", alt="login screen") }}
+

 Choose your username from the drop down, choose your initial
    workspace, enter your password, and click Login
@@ -3,22 +3,22 @@ title = "Market"
 weight = 4
 sort_by = "weight"
 insert_anchor_links = "right"
-+++

+[extra]
+page_description = "The BTS Spark Market module contains the Market View and Time and Sales windows"
+++


 -  This is one of the main items on the module launcher
 -  When hovering over it, it will show 2 different modules which can
    be launched from it, market view and then, time and sales
-  It appears like the below:

-![](image53.png)
+
+{{ image(name="image53.png", alt="screenshot") }}

 ## Market View

-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/Y54S1uscT_g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="Y54S1uscT_g") }}

 -  This provides a grid of outright, spread, and synthetic products
    showing real-time market data all in one place
@@ -29,7 +29,7 @@ insert_anchor_links = "right"
 -  You choose which products you would like to view upon launching it,
    the security browser will appear as shown below:

-![](image21.png)
+{{ image(name="image21.png", alt="security picker") }}

 -  Click on individual securities that you wish to view and click add,
    they will then show up in the selected securities window below.  If
@@ -45,13 +45,13 @@ insert_anchor_links = "right"
 -  Below is an example of an outright, spread, all futures, and
    synthetic chosen:

-![](image14.png)
+{{ image(name="image14.png", alt="screenshot") }}

 -  Clicking OK will bring up the Market View with the selected
    securities you have chosen, in this example, it appears like the
    following:

-![](market_view.png)
+{{ image(name="market_view.png", alt="screenshot") }}

 -  Once a market view is launched and you are viewing data, you can
    customize the view further by the following:
@@ -61,19 +61,19 @@ insert_anchor_links = "right"
      -  Filtering - by hovering over the column header, a filtering box
         will appear like below:

-      ![](image66.png)
+      {{ image(name="image66.png", alt="screenshot") }}

      -  All columns let you sort by that columns minimum and maximum
         information in a box that appears like the following:

-      ![](image24.png)
+      {{ image(name="image24.png", alt="screenshot") }}

      -  Specifically for the securities column, there is a search box that
         will appear by bringing up the filtering box, which enables users to
         type the security in which they are looking for.  This appears like
         the following:

-![](image11.png)
+{{ image(name="image11.png", alt="screenshot") }}

 -  Besides viewing the market data, you can do a lot within the market
    view by utilizing the icons to the left of the main window, these
@@ -88,7 +88,7 @@ insert_anchor_links = "right"

 -  Change securities

-      -  Click on the settings icon ![](change_securities.png) which will launch the market view security selection.  You can add or remove Securities you have already selected and are shown in the market view.
+      -  Click on the settings icon {{ image(name="change_securities.png", alt="screenshot") }} which will launch the market view security selection.  You can add or remove Securities you have already selected and are shown in the market view.

 -  Launch an order ticket
      -  This is done 1 of 3 ways:
@@ -96,7 +96,7 @@ insert_anchor_links = "right"
            or Ask Qty which will bring up an order ticket pre-populated with
            either the Bid or Ask price and volume.
         -  Highlighting a single security and clicking on the order ticket
-            ![](image23.png) icon
+            {{ image(name="image23.png", alt="screenshot") }} icon
            on the left-hand browser window of the market view
         -  Highlighting a single security and right clicking bringing up the
            menu options to launch an order ticket.
@@ -121,7 +121,7 @@ insert_anchor_links = "right"

      -  This is done by either highlighting 1 or many securities and then
         clicking on the Fills icon
-         ![](image20.png) on
+         {{ image(name="image20.png", alt="screenshot") }} on
         the left-hand side to bring up a fill window for the selected
         securities.  

@@ -132,14 +132,14 @@ insert_anchor_links = "right"

      -  This is accomplished by highlighting 1 or many securities and then
         clicking on the time and sales icon
-         ![](image49.png) on
+         {{ image(name="image49.png", alt="screenshot") }} on
         the left-hand side

 -  Launching the synthetic window to create a synthetic product

      -  This is accomplished by highlighting either 1 or 2 securities and
         clicking on the Synthetic icon
-         ![](image34.png) on
+         {{ image(name="image34.png", alt="screenshot") }} on
         the lower left-hand side

         -  Please note - If only 1 security is chosen, a create synthetic
@@ -148,9 +148,7 @@ insert_anchor_links = "right"

 ## Time and Sales

-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/nEkSGacjt0s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="nEkSGacjt0s") }}

 -  Provides a display of real-time fills as they happen for 1 or many
    securities
@@ -161,9 +159,9 @@ insert_anchor_links = "right"
 -  On launching a security browser will appear, allowing you to choose
    the products you would like to view.

-![](time_and_sales.png)
+{{ image(name="time_and_sales.png", alt="screenshot") }}

 -  From time and sales, you can launch the same items as the market
    view with the exception of a launching the synthetic window to
    create a synthetic product
-  From the settings icon ![](settings_icon.png) you can customize the time and sales modifying grid; the colors of the aggressor, status of trades coming in, as well as font sizes and which columns to see.
+-  From the settings icon {{ image(name="settings_icon.png", alt="screenshot") }} you can customize the time and sales modifying grid; the colors of the aggressor, status of trades coming in, as well as font sizes and which columns to see.
@@ -3,13 +3,13 @@ title = "My Windows"
 weight = 7
 sort_by = "weight"
 insert_anchor_links = "right"
+
+[extra]
+page_description = "Name and load windows with the My Windows module in BTS Spark"
 +++


-
-<div>
-   <iframe width="560" height="315" src="https://www.youtube.com/embed/pjm1JJ9Q3jM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="pjm1JJ9Q3jM") }}

 This is the housing of the windows that you have manually named and
 creates a place where you can quickly and easily launch windows
@@ -20,18 +20,18 @@ click on any tab and the “Add to My Windows” menu will appear.  If you
 click on Add to My Windows, it will give you the ability to type in a
 text box on the tab itself.

-![](image16.png)
+{{ image(name="image16.png", alt="screenshot") }}

 Once you have named the tab, click enter to get out of the editing view
 of the text box.  Once that is done, it will display that name for that
 tab moving forward, which will be displayed within the My Windows
 section of the module launcher.

-![](image15.png)
+{{ image(name="image15.png", alt="screenshot") }}

 Right-clicking on a tab that has already had its default title modified
 will show the following which will allow you to rename the modified
 title or remove it from the My Windows, which will then restore the
 default standard title.

-![](image37.png)
+{{ image(name="image37.png", alt="screenshot") }}
@@ -3,12 +3,13 @@ title = "Settings"
 weight = 8
 sort_by = "weight"
 insert_anchor_links = "right"
+
+
+[extra]
+page_description = "The BTS Spark Settings module and workspaces management"
 +++

-
-<div>
-   <iframe width="560" height="315" src="https://www.youtube.com/embed/yGQfr_puT3w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="yGQfr_puT3w") }}

 ## Workspaces

@@ -16,7 +17,7 @@ This is where your workspaces can be saved or switched
 to pre-saved ones that you have created.  If you click on the
 Settings module, the Workspaces

-![](image9.png)
+{{ image(name="image9.png", alt="screenshot") }}

 Once the Workspace menu is launched you can save your current workspace
 by typing in a name in the text box and clicking save.  This will save
@@ -26,4 +27,4 @@ switching to it from the workspace launcher later on.
 You can also delete workspaces by clicking on the “X” to the right of
 the saved workspace from the workspace menu.

-![](image51.png)
+{{ image(name="image51.png", alt="screenshot") }}
@@ -3,47 +3,33 @@ title = "Spreader"
 weight = 6
 sort_by = "weight"
 insert_anchor_links = "right"
+[extra]
+page_description = "How to create and edit synthetic spreads in BTS Spark's spreader"
 +++

 {{ youtube(id="RZU9Wj0cETo") }}
+{{ youtube(id="XEZpuPAgMC0") }}
+{{ youtube(id="EVFK2yNQFS4") }}
+{{ youtube(id="d5ywlHen6yo") }}
+{{ youtube(id="Mmw8PNJA0Dw") }}
+{{ youtube(id="QK-bBSH6Rc0") }}

-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/XEZpuPAgMC0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/EVFK2yNQFS4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-
-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/d5ywlHen6yo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-<div>
-<iframe width="560" height="315" src="https://www.youtube.com/embed/Mmw8PNJA0Dw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/QK-bBSH6Rc0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-  Launching the spreader from the module launcher will bring up the
+-  Launching the spreader from the launcher will bring up the
    synthetic management browser which appears like below:

-![](image35.png)
+{{ image(name="image35.png", alt="screenshot") }}

 -  From this window, it will show any synthetics that you have already
    created as well as various other options of both managing the
    synthetics and other tasks all from the left-hand side pane within
    the window, including:

-    -  Adding a new synthetic ![](image8.png)
-    -  Removing a synthetic ![](image13.png)
-    -  Changing a synthetic ![](image55.png)
-    -  Cloning a synthetic ![](image28.png)
-    -  Launching a ladder of a highlighted synthetic ![](image7.png)
-    -  Launching an order book of selected synthetic ![](image43.png)
+    -  Adding a new synthetic {{ image(name="image8.png", alt="screenshot") }}
+    -  Removing a synthetic {{ image(name="image13.png", alt="screenshot") }}
+    -  Changing a synthetic {{ image(name="image55.png", alt="screenshot") }}
+    -  Cloning a synthetic {{ image(name="image28.png", alt="screenshot") }}
+    -  Launching a ladder of a highlighted synthetic {{ image(name="image7.png", alt="screenshot") }}
+    -  Launching an order book of selected synthetic {{ image(name="image43.png", alt="screenshot") }}



@@ -63,7 +49,7 @@ insert_anchor_links = "right"
 -  An empty synthetic browser will look like below without any legs
    chosen:

-![](image31.png)
+{{ image(name="image31.png", alt="screenshot") }}

 -  Clicking on Add Leg on the top right of the window will launch the
    security browser, which will allow you to choose the first leg
@@ -77,13 +63,13 @@ insert_anchor_links = "right"
        name your synthetic product.  By default, it will auto-populate
        based on the symbols you have chosen:

-    ![](image29.png)
+    {{ image(name="image29.png", alt="screenshot") }}

    -  You can click into the text box to the right of the name and
        customize the name to be whatever you would like, we’ll call this
        ES\_CAL:

-    ![](image19.png)
+    {{ image(name="image19.png", alt="screenshot") }}

    -  Also included on this row are what ticks you would like this to be
        priced in as well as the format of the pricing
@@ -92,7 +78,7 @@ insert_anchor_links = "right"
        as the option to add additional legs through the add leg box to the
        right of the symbols:

-    ![](image18.png)
+    {{ image(name="image18.png", alt="screenshot") }}

    -  The following rows are all part of the main parameters which can
        all be modified according to the traders style of designing the
@@ -104,14 +90,14 @@ insert_anchor_links = "right"
        details of how that parameter functions.  Below is an example of the
        throttle details displayed:

-    ![](image56.png)
+    {{ image(name="image56.png", alt="screenshot") }}

    -  Main parameters - these are the top 4 rows in the Create Synthetic
        window which all synthetics will be required to have set.
         Everything below these can be customized to a trader's needs, however, the top 4 are the main foundational aspects used for the calculation of
        the synthetic:

-    ![](image10.png)
+    {{ image(name="image10.png", alt="screenshot") }}

    -  Quantity - This is the number of contracts of the security you
        would like to be included in the calculation of the synthetic as
@@ -139,7 +125,7 @@ insert_anchor_links = "right"
        displayed and click on such will display further details on how this
        parameter is used:

-    ![](image72.png)
+    {{ image(name="image72.png", alt="screenshot") }}

    -  Quote

@@ -148,7 +134,7 @@ insert_anchor_links = "right"
            by defining a region on either side of the working quote order,
            inside which quote updates will not be sent:

-    ![](image6.png)
+    {{ image(name="image6.png", alt="screenshot") }}

    -  Pre-Hedge

@@ -161,7 +147,7 @@ insert_anchor_links = "right"
            more than the threshold defined.  The hedge order will pay up by the
            “Payup Ticks” as defined per leg.

-    ![](image54.png)
+    {{ image(name="image54.png", alt="screenshot") }}

    -  Post-Hedge

@@ -172,7 +158,7 @@ insert_anchor_links = "right"
            opposite inside market, it is re-priced to cross the opposite inside
            market as defined by “cross ticks”

-        ![](image70.png)
+        {{ image(name="image70.png", alt="screenshot") }}

        -  Time Based Cross - Basically the same as Ticks Away Cross,
            however, this is based on time (in ms) on when to automatically cross
@@ -181,7 +167,7 @@ insert_anchor_links = "right"
            away from the opposite inside market, it is re-priced to cross the
            opposite inside market as defined by “cross ticks”

-        ![](image40.png)
+        {{ image(name="image40.png", alt="screenshot") }}

        -  Size Based Cross - similar to ticks and time based cross, but based
            on size instead.  If you define a threshold of the opposite inside
@@ -189,5 +175,3 @@ insert_anchor_links = "right"
            the market.  If a legged hedge order’s price gets X amount of
            “ticks” away from the opposite inside market, it is re-priced to
            cross the opposite inside market as defined by “cross ticks”
-
-        ![](image76.png)
@@ -4,6 +4,10 @@ weight = 1
 sort_by = "weight"
 insert_anchor_links = "right"
 aliases = ["./bts_spark/Algos/"]
+
+
+[extra]
+page_description = "Definitions of the Algos built into BTS Spark and their parameters"
 +++

 ## Lean
@@ -3,6 +3,9 @@ title = "Trading"
 weight = 5
 sort_by = "weight"
 insert_anchor_links = "right"
+
+[extra]
+page_description = "BTS Spark's Trading module, including The Order Book, Fills, P&amp;L, Ladder, Order Ticket, and Algo Studio"
 +++


@@ -10,13 +13,11 @@ insert_anchor_links = "right"
    Order Book, Fills, P&L, Ladder, and Order Ticket
 -  It appears like below:

-![](image44.png)
+{{ image( name = "image44.png", alt = "screenshot") }}

 ## Order Book

-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/ygMFkjBBGeU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="ygMFkjBBGeU") }}

 -  This provides a list of all orders a user has placed, by default it
    will display only working orders
@@ -26,7 +27,7 @@ insert_anchor_links = "right"
    other windows within BTS
 -  Appears like the following:

-![](image5.png)
+{{ lightbox( name = "image5.png", alt = "screenshot") }}

 -  You can sort all columns by single left clicking on the column
    header which will sort in either descending or ascending order, an
@@ -34,14 +35,14 @@ insert_anchor_links = "right"
     Below is a display of the security column sorting in descending
    fashion.

-![](image60.png)
+{{ image( name = "image60.png", alt = "screenshot") }}

 -  Filtering can occur, by hovering over any column header which will
    display a “Filter” box.  Clicking on this will then display the
    available components which can be filtered, below is an example of
    clicking on the securities column

-![](image52.png)
+{{ image( name = "image52.png", alt = "screenshot") }}

 -  If the column is displaying time base information, a special style
    box will appear when clicking on the filtering box providing more
@@ -53,49 +54,45 @@ insert_anchor_links = "right"
    -  Since Open
    -  A specific user-defined period of time

-![](image25.png)
+{{ image( name = "image25.png", alt = "screenshot") }}

 -  The left-hand box within an order book provides users with further
    functionality to quickly perform various tasks with live orders as
-    well as launch other modules.  It appears like the below:
+    well as launch other modules.
+    {{ image(name="spark_menu_order_book.png", alt="the spark menu in the order book", pull="right") }}

-    ![](spark_menu_order_book.png)
-
-    -  ![](image48.png)Fills -
+    -  {{ icon(name="image48.png", alt="Fills icon") }} Fills -
        clicking on this will launch a fills window
-    -  ![](image57.png) Modify -
+    -  {{ icon(name="image57.png", alt = "modify icon") }} Modify -
        clicking on this will launch an order ticket for a live order
        highlighted in the Order Book.
-    -  ![](image73.png)Cancel
+    -  {{ icon(name="image73.png", alt = "cancel selected icon")}} Cancel
        selected - clicking on this will cancel the selected orders you have
        highlighted in the order book.  You can choose more than one by
        holding hold the Ctrl key when clicking on each row of orders
-    -  ![](image74.png)Cancel
+    -  {{ icon(name="image74.png", alt = "cancel buys icon")}} Cancel
        buys - clicking on this will cancel all the buy orders you have in
        the order book
-    -  ![](image33.png)Cancel
+    -  {{ icon(name="image33.png", alt = "cancel all icon")}} Cancel
        sells - clicking on this will cancel all the sell orders you have in
        the order book
-    -  ![](image2.png)Cancel
+    -  {{ icon(name="image2.png", alt = "cancel all icon")}} Cancel
        all - clicking on this will cancel all working orders you have the
        order book
-    -  ![](recreate_icon.png) Recreate - clicking this will recreate already cancelled orders, sending them back to market with the same price and quantity as they were previously at before being cancelled.
-    -  ![](collapse_all_icon.png) Collapse all - This will collapse all trees inside the order book to show only the top level of the order.
-    -  ![](expand_all_icon.png) Expand all - This will expand to show everything inside the order book.
-    -  ![](settings_icon.png) Settings - This launches the settings for the orderbook.
-    -  Furthermore, there is a “floating” or “mini orderbook” feature as well
-       integrated within the ladder itself.
-            - To access this, you need to center click with your mouse wheel over
-              working orders on the ladder.
-            - From here, you can change the price and quantity of any working order
-              within the mini orderbook straight from the window
-            - This looks like below:
-            ![](mini_orderbook.png)
+    -  {{ icon(name = "recreate_icon.png", alt = "screenshot") }} Recreate - clicking this will recreate already cancelled orders, sending them back to market with the same price and quantity as they were previously at before being cancelled.
+    -  {{ image( name = "collapse_all_icon.png", alt = "screenshot") }} Collapse all - This will collapse all trees inside the order book to show only the top level of the order.
+    -  {{ icon( name = "expand_all_icon.png", alt = "screenshot") }} Expand all - This will expand to show everything inside the order book.
+    -  {{ icon( name = "settings_icon.png", alt = "screenshot") }} Settings - This launches the settings for the orderbook.
+    -  The  mini orderbook is integrated into the ladder
+
+        - Middle click (click the mouse wheel) on a working order to display the mini orderbook
+        - From here, you can change the price and quantity of any working order
+        {{ image( name = "mini_orderbook.png", alt = "screenshot") }}

 ## Fills

 -  This provides a list of all fills a user has had for a given time
-    period, by default it will open up with “since open” timeframe
+    period, by default it will open up with “since open” time frame
    selected showing you fills on the day thus far
 -  You can create multiple fill windows, filtered however you
    like
@@ -106,9 +103,7 @@ insert_anchor_links = "right"

 ## P&amp;L

-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/xj6cEQ6By34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="xj6cEQ6By34") }}

 -  This provides a running ledger of a users account(s) profit and
    loss, broken down per symbol
@@ -125,20 +120,18 @@ insert_anchor_links = "right"
 -  This is accomplished on the top bar, which when clicked on, displays
    the choices for calculation, this appears like below:

-    ![](pnl_calculation.png)
+    {{ image( name = "pnl_calculation.png", alt = "screenshot") }}


 -  Below is an example P&L window showing a user’s multiple accounts and
    various positions in each:

-![](pnl_window.png)
+{{ image( name = "pnl_window.png", alt = "screenshot") }}


 ## Ladder

-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/Q0qsyc1nvYo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="Q0qsyc1nvYo") }}

 -  The ladder was designed to be the most logically produced ladder on
    the market, engineered and designed by professional traders for
@@ -149,12 +142,12 @@ insert_anchor_links = "right"
    market with a single click
 -  Below is an example ladder:

-![](ladder.png)
+{{ image( name = "ladder.png", alt = "screenshot") }}

 -  The ladder consists of 2 major parts, the Ladder itself and the
    information and control section on the left-hand side

-  The information section on the left contains the following: &nbsp; ![](image1.png)
+-  The information section on the left contains the following: &nbsp; {{ image( name = "image1.png", alt = "screenshot") }}
      -  Day - showing the current price of the security on the day
      -  High - showing the high price of the security on the day
      -  Low - showing the low price of the security on the day
@@ -167,7 +160,7 @@ insert_anchor_links = "right"
 -  The control section right underneath the information section on the
    left-hand side offers the following:

-![](image62.png)
+{{ image( name = "image62.png", alt = "screenshot") }}

 -  The account in which the orders will flow into when trading this
    security
@@ -202,7 +195,7 @@ insert_anchor_links = "right"
            the stop price, by clicking on the “&lt;” to bring up the stop price
            option:

-      ![](image61.png)
+      {{ image( name = "image61.png", alt = "screenshot") }}

      -  Iceberg

@@ -213,7 +206,7 @@ insert_anchor_links = "right"
            quantity.  You will need to define what type of order that will
            be used for the child order to be sent.

-      ![](image47.png)
+      {{ image( name = "image47.png", alt = "screenshot") }}

      -  Time Box

@@ -233,9 +226,9 @@ insert_anchor_links = "right"
         -  Below are images of the type of time frame that can be used within
            the time box

-      ![](image42.png)
+      {{ image( name = "image42.png", alt = "screenshot") }}
               
-      ![](image50.png)
+      {{ image( name = "image50.png", alt = "screenshot") }}

    -  Lean
        -  This is a specialized algo order which allows the user to
@@ -244,14 +237,14 @@ insert_anchor_links = "right"
        -  “Cross” means to take an order working on the bid and 'cross' by
            buying into the asks.  This is often referred to as “paying up” as well

-            ![](lean_algo_control.png)
+            {{ image( name = "lean_algo_control.png", alt = "screenshot") }}

    -  Join
        -  This is a specialized algo order which allows the user to enter an
            order which will watch the opposite-inside market and join when the
            market flips and has at least threshold size as defined.

-            ![](join_algo_control.png)
+            {{ image( name = "join_algo_control.png", alt = "screenshot") }}

    -  Top
        -  This is a specialized algo order which allows the user to
@@ -259,14 +252,14 @@ insert_anchor_links = "right"
        -  If the order is on the market (current bid price) and the quantity
            on that bid price is below the top threshold defined the order will
            cancel and do nothing else
-            ![](top_algo_control.png)
+            {{ image( name = "top_algo_control.png", alt = "screenshot") }}

    - Offset

        - The goal of the offset order is to send your order X amount of ticks
            from where you actually place it on the ladder.  This is sometimes
            known as a "fat finger" safety.
-        ![](offset_algo_control.png)
+        {{ image( name = "offset_algo_control.png", alt = "screenshot") }}

    - OCO

@@ -276,26 +269,26 @@ insert_anchor_links = "right"
            of the fill. Composing this order with Cover simulates scalping
            functionality.

-            ![](oco_algo_control.png)
+            {{ image( name = "oco_algo_control.png", alt = "screenshot") }}

    - Cover

        - A Cover order’s purpose is to fire a hedge order (of any algo-type) in response to fills from it’s child order on the opposite side of the market N ticks away.

-            ![](cover_algo_control.png)
+            {{ image( name = "cover_algo_control.png", alt = "screenshot") }}

    - Trigger

        - The Trigger order is exactly as it sounds, where it will trigger an order based on conditions defined.
        - This order also has exit strategy built in where a user can define when the trigger order can auto-cancel based on time as well as price conditional.

-        ![](trigger_algo_control.png)
+        {{ image( name = "trigger_algo_control.png", alt = "screenshot") }}

 -  The middle of the control section is where you can click on
    predefined values to quickly populate the volume at which you wish
    to enter the market.

-![](image17.png)
+{{ image( name = "image17.png", alt = "screenshot") }}

 -  You can manually type in a quantity here as well
 -  Furthermore, if you have a value in the volume bar, you can
@@ -305,7 +298,7 @@ insert_anchor_links = "right"
 -  By having the auto clear box checked, it will bring the value back
    to zero after placing an order at the size chosen.

-![](image59.png)
+{{ image( name = "image59.png", alt = "screenshot") }}

 -   The bottom section of the control area of a ladder has 4 aspects
    to it
@@ -317,7 +310,7 @@ insert_anchor_links = "right"
    - Cancel All, which will cancel all orders on the ladder
    - Settings, which will launch the ladder settings window which
        appears like below
-    ![](ladder_settings.png)
+    {{ image( name = "ladder_settings.PNG", alt = "screenshot") }}
        - Fonts and Colors - This is where you can customize the overall main
            aspects of the ladder.
        - Market Break Lines - These are where can control the viewing of what
@@ -339,7 +332,7 @@ insert_anchor_links = "right"
 -  The other, main part of the ladder, is the ladder itself as
    displayed below

-![](ladder_main_part.png)
+{{ image( name = "ladder_main_part.png", alt = "screenshot") }}

 -  There are 5 main columns

@@ -356,7 +349,7 @@ insert_anchor_links = "right"
    -  To enter an order directly by clicking in the ladder, left click on either the bid or ask volume with a volume greater than 0 on the predefined value box on the left-hand section
    -  A badge will be displayed within the orders column of the value you have chosen and the quantity filled as displayed below

-    ![](ladder_badges.png)
+    {{ image( name = "ladder_badges.png", alt = "screenshot") }}

 -  To change the price level you wish to work the order, you can right-click and hold on the badge to move it up or down the ladder for the
    desired price
@@ -367,9 +360,7 @@ insert_anchor_links = "right"

 ##  Order Ticket

-<div>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/bdC5pZ6T35I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+{{ youtube(id="bdC5pZ6T35I") }}

 -  The order ticket was designed to provide another means other than
    the ladder to enter orders into the market
@@ -378,7 +369,7 @@ insert_anchor_links = "right"
    which security to populate
 -  The order ticket appears like below

-![](image27.png)
+{{ image( name = "image27.png", alt = "screenshot") }}

 -  On the top left, you have the price for the order as well as the
    volume
@@ -416,7 +407,7 @@ insert_anchor_links = "right"

 - This is all in place in a very user friendly GUI as shown below:

-![](algo_studio.png)
+{{ image( name = "algo_studio.png", alt = "screenshot") }}


 - There are 3 main areas of the Algo Studio:
@@ -3,6 +3,9 @@ title = "BTS Spark"
 weight = 1
 sort_by = "weight"
 insert_anchor_links = "right"
+
+[extra]
+page_description = "Documentation for Blue Trading Systems' BTS Spark"
 +++

 Click on the headings on the left to expand their contents. If you need specific information quickly use the Search button in the top right of this page.
@@ -3,6 +3,9 @@ title = "Release notes"
 weight = 3
 sort_by = "weight"
 insert_anchor_links = "right"
+
+[extra]
+page_description = "Release notes for BTS Spark"
 +++
 ## 2.13.0
 ### User Visible Changes  
@@ -29,11 +32,11 @@ insert_anchor_links = "right"
  - Fixed an issue that could cause erroneous fill account attribution in the event of a crash
 ### Internal Changes
  - Added support for tag 1031. Currently defaults to Y, can it be override through config.
-  - To facilitate support, allowed the bts user to view and edit algos from all other users 
+  - To facilitate support, allowed the bts user to view and edit algos from all other users
  - Improved system tests
  - Improved log messages in UI to include dispatcher thread name
  - Added support for Windows core dumps in the UI
-  
+
 ## 2.10.0
 ### User Visible Changes
  - Fills now include information about the algo that originated the fill
@@ -153,7 +156,7 @@ insert_anchor_links = "right"

 ## 2.6.0
 ### User Visible Changes
-  - In the ladder made last trade more distinctive when overlayed on the volumn column
+  - In the ladder made last trade more distinctive when overlaid on the volume column
  - In the ladder, corrected display of volume tool tip
  - In the ladder, changed the consolidation of last trade to consider only the price ignoring aggressor changes
  - Added an option for the Top Algo to delete itself if within N ticks from top of book
@@ -170,11 +173,11 @@ insert_anchor_links = "right"
  - Made algos, synthetics and user names private so that multiple users can share a single system privately.
  - Allowed the mini order book defaults for column widths to be changed from the mini order book
  - Allowed the mini order book to shrink to the minimum size that will be needed to display the selected columns
-  - Improved accuracy of the directional arrow when displaying last trades in the volumn column
+  - Improved accuracy of the directional arrow when displaying last trades in the volume column
 ## 2.4.0
 ### User Visible Settings
  - In the ladder, changed the last trade column to accumulate successive trades at the same price
-  - Fixed a bug in the order book where the right side ladder would display the top leve order's security rather then current row's
+  - Fixed a bug in the order book where the right side ladder would display the top level order's security rather then current row's
  - Added OK, Cancel buttons to the security picker for ladder profiles or sounds
  - Added ladder settings for the mini order book
  - Added a safety check to guard against unintentional market crosses
@@ -190,7 +193,7 @@ insert_anchor_links = "right"
 ### User Visible Changes
  - Introduced multiple settings profiles for the ladder
     - This allows multiple standard configuration for the ladder, optionally with security specific variations
-  - Made Cover order more independent from its hedging chidren:
+  - Made Cover order more independent from its hedging children:
     - Cover continues to operate even if an hedging child is canceled
 	 - When a cover is canceled it will detach from any running hedging children, instead of canceling them
  - Changed Lean, Join and Cover algos to hide themselves in the ladder once they have completed their work
@@ -237,7 +240,7 @@ insert_anchor_links = "right"

 ## 2.2.1
 ### User Visible Changes
-  - Fixed order book form exception when display a spreader order for whichs the legs were not present yet
+  - Fixed order book form exception when display a spreader order for which the legs were not present yet

 ## 2.1.1
 ### User Visible Changes
@@ -249,7 +252,7 @@ insert_anchor_links = "right"
  - Added support for the GLBX Iceberg order type
  - Allowed quick algo param edits by middle-clicking on either the bid/ask columns or a "favorite" button
  - Added support for manual fills, either entered manually or imported from file. Manual fills are used only for P&L purposes, they have no impact on limits
-  - Allowed the LTQ and VAP values to be overlayed on the same ladder column
+  - Allowed the LTQ and VAP values to be overlaid on the same ladder column
  - Added day position information to the ladder
  - Added PIQ to the mini order book
  - Fixed a rare bug that could lead to server failure when requesting market data
@@ -330,7 +333,7 @@ insert_anchor_links = "right"
  - Integrated stunnel into UI to make VPN setup unnecessary in unsecured environments.
 ## 1.5.7
 ### User Visible Changes
-  - New videos have been added to the manual describing the [Algo Studio](./bts_spark/Trading/_index.md#algo-studio) and [Spreader](./bts_spark/Spreader/_index.md)
+  - New videos have been added to the manual describing the [Algo Studio](@/bts_spark/Trading/_index.md#algo-studio) and [Spreader](@/bts_spark/Spreader/_index.md)
  - Fixed a bug that occasionally would cause windows to be position outside the visible screen on startup
  - Fixed a bug in the order book form that would occasionally cause the Recreate Order option to be unavailable
  - Added a confirmation step to Cancel All, Cancel Buys and Cancel Sells commands
@@ -406,7 +409,7 @@ insert_anchor_links = "right"
  - Fixed a bug in handling of built-in bts to user that could lead to failure to login as bts in old systems
  - Improved market data subsystem to support security definition updates
  - Fixed a startup race in market data that could lead to data corruption on startup
-  - Increased default order price precision to 8 digis as required by some CME products
+  - Increased default order price precision to 8 digits as required by some CME products

 ## 1.4.11
 ### New Features
@@ -474,7 +477,7 @@ insert_anchor_links = "right"

 ### Ladder Usability Improvements
  - Controls found in Left Pane of the ladder can now be hidden via the checkboxes found under Ladder Form -> Settings button -> Left Pane tab
-  - The Left Pane is now scrollable with the mouse wheel when there isn't enough vertical space to accomodate the entire form
+  - The Left Pane is now scrollable with the mouse wheel when there isn't enough vertical space to accommodate the entire form
  - The Left Pane can now grown and shrunk horizontally via the splitter between the left pane and the main ladder area
 ### Performance Improvements
  - Requoting and hedging latency has been reduced by up to 30%
@@ -3,6 +3,9 @@ title = "System Requirements"
 weight = 4
 sort_by = "weight"
 insert_anchor_links = "right"
+
+[extra]
+page_description = "Recommended and minimum systems requirements for BTS Spark"
 +++


@@ -1,15 +1,20 @@
 #/bin/bash
-#python -m mkdocs build -d site

 ./run_zola.sh build

+ssh bts@bluetradesys.com "rm -r /home/bts/bts_website/zola/content/docs"
+scp -r ./content bts@bluetradesys.com:/home/bts/bts_website/zola/content/docs
 scp -r ./public bts@bluetradesys.com:/home/bts/doc/

 ssh bts@bluetradesys.com  << EOF
-cd doc
+cd /home/bts/doc/
 sudo rm -r /var/www/documentation/*
 sudo mv ./public/* /var/www/documentation/

+cd /home/bts/bts_website/zola/
+./fix_links.sh
+./deploy.sh
+
 EOF

 rm -r public
@@ -1,4 +1,4 @@
-.page {
+.page, .menu-open .page {
  position: absolute;
  width: calc(100% - #{$sidebar-width});
  height: 100%;
@@ -7,15 +7,24 @@
  background: #f6f6f6;
  padding-bottom: 20px;
  transition: 0.5s;
+  left: $sidebar-width;
+
+  h1:hover .zola-anchor, h2:hover .zola-anchor, h3:hover .zola-anchor, h4:hover .zola-anchor, h5:hover .zola-anchor, h6:hover .zola-anchor {
+    visibility: visible;
+  }

  .zola-anchor {
    color: #4183c4;
-    padding-left: 10px;
+    padding-right: .5em;
+    margin-left: -1.5em;
    text-decoration: none;
    font-weight: initial;
+    float: left;
+    visibility: hidden;

    &:hover {
-      text-decoration: underline;
+      text-decoration: none;
+      visibility: visible;
    }
  }

@@ -155,13 +164,13 @@
  }
 }

-@include min-screen(600px) {
-  .page {
-    left: $sidebar-width;
-  }
-}
+// @include min-screen(600px) {
+//   .page {
+//     left: $sidebar-width;
+//   }
+// }

-.page-without-menu {
+.menu-closed .page {
  width: 100%;
  left: 0;

@@ -123,27 +123,9 @@

 .page__header {
  height: 50px;
+  position: fixed;

  .menu-icon {
-    height: 50px;
-    width: 50px;
-    font-size: 24px;
-    text-align: center;
-    float: left;
-    position: relative;
-    transition: background .5s;
-    cursor: pointer;
-
-    @include menu-icon();
-
-    &:hover {
-      span {
-        background-color: black;
-      }
-    }
-  }
-
-  .search-icon {
    height: 50px;
    width: 50px;
    display: inline-block;
@@ -156,5 +138,50 @@
    &:hover {
      color: black
    }
+
+    @include menu-icon();
+
+    &:hover {
+      span {
+        background-color: black;
+      }
+    }
  }
+
+  .search-icon, .font-icon {
+    height: 40px;
+    width: 40px;
+    display: inline-block;
+    text-align: center;
+    line-height: 40px;
+    color: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    font-size: 2rem;
+
+    &:hover {
+      color: #eee;
+      background-color:#666;
+      border-radius: .2ex;
+    }
+  }
+
+
+  .font-icon{
+    display: inline-block;
+    // padding:0.6ex 1ex;
+    margin-left:1rem;
+    background:#333;
+    color:#eee;
+    border-radius: .2ex;
+
+  &:hover {
+    background:#666;
+  }
+  }
+
+}
+
+.dark-mode .font-icon{
+  background:#aaa;
+  color:#333;
 }
@@ -1,4 +1,4 @@
-.menu {
+.menu, .menu-open .menu {
  height: 100%;
  position: absolute;
  left: 0;
@@ -39,7 +39,7 @@
  }
 }

-.menu-hidden {
+.menu-closed .menu {
  width: 0;
 }

@@ -47,4 +47,19 @@
  .menu {
    width: 0;
  }
+
+  .menu-close-icon {
+    display: block;
+    padding:1ex;
+    font-size: 1.5em;
+    float:right;
+
+  }
+}
+
+@include min-screen(600px) {
+
+  .menu-close-icon {
+    display: none;
+  }
 }
@@ -1,6 +1,7 @@
@charset "utf-8";

@import "normalize";
+@import "colorbox";

 * {
  box-sizing: border-box;
@@ -21,6 +22,10 @@ body {
  letter-spacing: 0.2px;
 }

+body.dark-mode .page{
+  background:#444;
+  color:#eee;
+}

@mixin min-screen($min-width: $body-width) {
   @media screen and (min-width: $min-width) {
@@ -40,9 +45,21 @@ $sidebar-width: 300px;
@import "content";
@import "header";

-img {
-  transform: scale(0.666);
-  transform-origin: top left;
+@media screen and (min-width: 1920px)
+{
+  // img.scaled-image {
+  //   transform: scale(0.666);
+  //   transform-origin: top left;
+  // }
+}
+
+.colorbox-inline img {
+  max-width: 100%;
+}
+
+.icon-image {
+  display:inline;
+  max-height: 1.4em;
 }

 .back-button {
@@ -58,4 +75,82 @@ img {
 iframe {
  width:560px;
  height:315px;
+}
+
+.youtube-thumb {
+  margin-top:2em;
+  position:relative;
+  max-width:500px;
+}
+
+.youtube-overlay {
+  position:absolute;
+  width:8rem;
+  height:4.5rem;
+  line-height:4.5rem;
+  font-size: 2.5rem;
+  left:calc(50% - 4rem);
+  top:calc(50% - 2.25rem);
+  text-align:center;
+  opacity:.8;
+  background:#f68a28;
+  color:white;
+  border-radius: .3rem;
+}
+
+.youtube-overlay:hover {
+  background:#f68a28;
+  opacity:1;
+}
+
+.video-parent {
+  position: relative;
+  width: fit-content;
+}
+
+.video-parent:hover .play-pause, .video-parent.paused .play-pause {
+  display: block;
+}
+
+.play-pause {
+  display:none;
+  opacity:.7;
+  position:absolute;
+  width:8rem;
+  height:4.5rem;
+  line-height:4.5rem;
+  font-size: 2.5rem;
+  left:calc(50% - 4rem);
+  top:calc(50% - 2.25rem);
+  text-align:center;
+  background:#f68a28;
+  color:#fff;
+  border-radius: .3rem;
+  z-index:1000;
+}
+
+.play-pause:hover {
+  opacity: 0.9;
+}
+
+@media (hover: none) {
+  .play-pause {
+      display:block;
+  }
+
+  .video-parent.playing:hover .play-pause {
+      display:none;
+  }
+}
+
+.is-clearfix {
+  clear:both;
+}
+
+.is-pulled-left {
+  float: left;
+}
+
+.is-pulled-right {
+  float: right;
 }
@@ -0,0 +1,42 @@
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0);}
+#cboxWrapper{max-width:none;}
+#cboxOverlay{position:fixed;width:100%;height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative;}
+#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic;}
+.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0;}
+#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
+#cboxOverlay{background:#000;opacity:0.9;filter:alpha(opacity = 90);}
+#colorbox{outline:0;}
+#cboxTopLeft{width:14px;height:14px;background:url(colorbox-images/controls.png) no-repeat 0 0;}
+#cboxTopCenter{height:14px;background:url(colorbox-images/border.png) repeat-x top left;}
+#cboxTopRight{width:14px;height:14px;background:url(colorbox-images/controls.png) no-repeat -36px 0;}
+#cboxBottomLeft{width:14px;height:43px;background:url(colorbox-images/controls.png) no-repeat 0 -32px;}
+#cboxBottomCenter{height:43px;background:url(colorbox-images/border.png) repeat-x bottom left;}
+#cboxBottomRight{width:14px;height:43px;background:url(colorbox-images/controls.png) no-repeat -36px -32px;}
+#cboxMiddleLeft{width:14px;background:url(colorbox-images/controls.png) repeat-y -175px 0;}
+#cboxMiddleRight{width:14px;background:url(colorbox-images/controls.png) repeat-y -211px 0;}
+#cboxContent{background:#fff;overflow:visible;}
+.cboxIframe{background:#fff;}
+#cboxError{padding:50px;border:1px solid #ccc;}
+#cboxLoadedContent{margin-bottom:5px;}
+#cboxLoadingOverlay{background:url(colorbox-images/loading_background.png) no-repeat center center;}
+#cboxLoadingGraphic{background:url(colorbox-images/loading.gif) no-repeat center center;}
+#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C;}
+#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C;}
+#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose{border:0;padding:0;margin:0;overflow:visible;position:absolute;bottom:-29px;background:url(colorbox-images/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px;}
+#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active{outline:0;}
+#cboxPrevious{left:0px;background-position:-51px -25px;}
+#cboxPrevious:hover{background-position:-51px 0px;}
+#cboxNext{left:27px;background-position:-75px -25px;}
+#cboxNext:hover{background-position:-75px 0px;}
+#cboxClose{right:0;background-position:-100px -25px;}
+#cboxClose:hover{background-position:-100px 0px;}
+.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px;}
+.cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;}
+.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px;}
+.cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}
@@ -1,10 +1,19 @@
 function initToggleMenu() {
-    var $menu = document.querySelector(".menu");
-    var $menuIcon = document.querySelector(".menu-icon");
-    var $page = document.querySelector(".page");
-    $menuIcon.addEventListener("click", function () {
-        $menu.classList.toggle("menu-hidden");
-        $page.classList.toggle("page-without-menu");
+    $(".menu-icon").click(function (e) {
+        let body = $("body");
+        let mobile = window.innerWidth < 600;
+        let menu_closed = body.hasClass("menu-closed");
+        let menu_open = body.hasClass("menu-open");
+        let new_page = !(menu_closed || menu_open);
+
+        if((!mobile && (new_page || menu_open)) || mobile && menu_open) {
+            body.addClass("menu-closed");
+            body.removeClass("menu-open");
+        }
+        else {
+            body.removeClass("menu-closed");
+            body.addClass("menu-open");
+        }
    });
 }
 function debounce(func, wait) {
@@ -1,11 +1,40 @@

 $(document).ready(function() {
-    $("img").each(function(idx, elm){
-        $(elm).css("margin-bottom", elm.height * -0.333);
-    }).on("load", function(e){
-        $(e.target).css("margin-bottom", e.target.height * -0.333);
+    jQuery('a.thumbnail').colorbox({rel:'gal'});
+    jQuery('a.gallery_image').colorbox({rel:'gal'});
+    jQuery(".youtube").colorbox({iframe:true, innerWidth:'75%', innerHeight:'75%'});
+
+    jQuery(".font-icon").click(function (){
+        jQuery("body").toggleClass("dark-mode");
+        if(getCookie("dark-mode") === "true") {
+            setCookie("dark-mode", "false", 365);
+        }
+        else {
+            setCookie("dark-mode", "true", 365);
+        }
    });

+    if(getCookie("dark-mode") === "true") {
+        jQuery("body").toggleClass("dark-mode");
+    }
+
+    if(window.innerWidth >= 1920) {
+
+        // $("img.scaled-image").each(function(idx, elm){
+        //         $(elm).css("margin-bottom", elm.height * -0.333);
+        //     }).on("load", function(e){
+        //         $(e.target).css("margin-bottom", e.target.height * -0.333);
+        //     });
+        $("a.colorbox-inline").each(function(idx, elm){
+                let child = $(elm).children("img")[0];
+                let w = (child.naturalWidth * 0.666) + 1
+                let h = (child.naturalHeight * 0.666) + 1
+                $(elm).colorbox({inline: true, innerWidth: w, innerHeight: h, scrolling: false});
+            });
+    }
+    else {
+        jQuery("a.colorbox-inline").colorbox({inline:true});
+    }
    $(".back-button")
        .html("Go Back")
        .click(function(_) { window.history.back()});
@@ -14,4 +43,29 @@ $(document).ready(function() {
        console.log(navigator.userAgent);
        $(".search-icon").css("display", "none");
    }
+
+
 });
+
+function setCookie(cname, cvalue, exdays) {
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    var expires = "expires="+ d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+function getCookie(cname) {
+    var name = cname + "=";
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var ca = decodedCookie.split(';');
+    for(var i = 0; i <ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+        c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
@@ -0,0 +1,6 @@
+/*!
+	Colorbox 1.6.3
+	license: MIT
+	http://www.jacklmoore.com/colorbox
+*/
+(function(t,e,i){function n(i,n,o){var r=e.createElement(i);return n&&(r.id=Z+n),o&&(r.style.cssText=o),t(r)}function o(){return i.innerHeight?i.innerHeight:t(i).height()}function r(e,i){i!==Object(i)&&(i={}),this.cache={},this.el=e,this.value=function(e){var n;return void 0===this.cache[e]&&(n=t(this.el).attr("data-cbox-"+e),void 0!==n?this.cache[e]=n:void 0!==i[e]?this.cache[e]=i[e]:void 0!==X[e]&&(this.cache[e]=X[e])),this.cache[e]},this.get=function(e){var i=this.value(e);return t.isFunction(i)?i.call(this.el,this):i}}function h(t){var e=W.length,i=(A+t)%e;return 0>i?e+i:i}function a(t,e){return Math.round((/%/.test(t)?("x"===e?E.width():o())/100:1)*parseInt(t,10))}function s(t,e){return t.get("photo")||t.get("photoRegex").test(e)}function l(t,e){return t.get("retinaUrl")&&i.devicePixelRatio>1?e.replace(t.get("photoRegex"),t.get("retinaSuffix")):e}function d(t){"contains"in x[0]&&!x[0].contains(t.target)&&t.target!==v[0]&&(t.stopPropagation(),x.focus())}function c(t){c.str!==t&&(x.add(v).removeClass(c.str).addClass(t),c.str=t)}function g(e){A=0,e&&e!==!1&&"nofollow"!==e?(W=t("."+te).filter(function(){var i=t.data(this,Y),n=new r(this,i);return n.get("rel")===e}),A=W.index(_.el),-1===A&&(W=W.add(_.el),A=W.length-1)):W=t(_.el)}function u(i){t(e).trigger(i),ae.triggerHandler(i)}function f(i){var o;if(!G){if(o=t(i).data(Y),_=new r(i,o),g(_.get("rel")),!$){$=q=!0,c(_.get("className")),x.css({visibility:"hidden",display:"block",opacity:""}),I=n(se,"LoadedContent","width:0; height:0; overflow:hidden; visibility:hidden"),b.css({width:"",height:""}).append(I),j=T.height()+k.height()+b.outerHeight(!0)-b.height(),D=C.width()+H.width()+b.outerWidth(!0)-b.width(),N=I.outerHeight(!0),z=I.outerWidth(!0);var h=a(_.get("initialWidth"),"x"),s=a(_.get("initialHeight"),"y"),l=_.get("maxWidth"),f=_.get("maxHeight");_.w=Math.max((l!==!1?Math.min(h,a(l,"x")):h)-z-D,0),_.h=Math.max((f!==!1?Math.min(s,a(f,"y")):s)-N-j,0),I.css({width:"",height:_.h}),J.position(),u(ee),_.get("onOpen"),O.add(F).hide(),x.focus(),_.get("trapFocus")&&e.addEventListener&&(e.addEventListener("focus",d,!0),ae.one(re,function(){e.removeEventListener("focus",d,!0)})),_.get("returnFocus")&&ae.one(re,function(){t(_.el).focus()})}var p=parseFloat(_.get("opacity"));v.css({opacity:p===p?p:"",cursor:_.get("overlayClose")?"pointer":"",visibility:"visible"}).show(),_.get("closeButton")?B.html(_.get("close")).appendTo(b):B.appendTo("<div/>"),w()}}function p(){x||(V=!1,E=t(i),x=n(se).attr({id:Y,"class":t.support.opacity===!1?Z+"IE":"",role:"dialog",tabindex:"-1"}).hide(),v=n(se,"Overlay").hide(),L=t([n(se,"LoadingOverlay")[0],n(se,"LoadingGraphic")[0]]),y=n(se,"Wrapper"),b=n(se,"Content").append(F=n(se,"Title"),R=n(se,"Current"),P=t('<button type="button"/>').attr({id:Z+"Previous"}),K=t('<button type="button"/>').attr({id:Z+"Next"}),S=n("button","Slideshow"),L),B=t('<button type="button"/>').attr({id:Z+"Close"}),y.append(n(se).append(n(se,"TopLeft"),T=n(se,"TopCenter"),n(se,"TopRight")),n(se,!1,"clear:left").append(C=n(se,"MiddleLeft"),b,H=n(se,"MiddleRight")),n(se,!1,"clear:left").append(n(se,"BottomLeft"),k=n(se,"BottomCenter"),n(se,"BottomRight"))).find("div div").css({"float":"left"}),M=n(se,!1,"position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;"),O=K.add(P).add(R).add(S)),e.body&&!x.parent().length&&t(e.body).append(v,x.append(y,M))}function m(){function i(t){t.which>1||t.shiftKey||t.altKey||t.metaKey||t.ctrlKey||(t.preventDefault(),f(this))}return x?(V||(V=!0,K.click(function(){J.next()}),P.click(function(){J.prev()}),B.click(function(){J.close()}),v.click(function(){_.get("overlayClose")&&J.close()}),t(e).bind("keydown."+Z,function(t){var e=t.keyCode;$&&_.get("escKey")&&27===e&&(t.preventDefault(),J.close()),$&&_.get("arrowKey")&&W[1]&&!t.altKey&&(37===e?(t.preventDefault(),P.click()):39===e&&(t.preventDefault(),K.click()))}),t.isFunction(t.fn.on)?t(e).on("click."+Z,"."+te,i):t("."+te).live("click."+Z,i)),!0):!1}function w(){var e,o,r,h=J.prep,d=++le;if(q=!0,U=!1,u(he),u(ie),_.get("onLoad"),_.h=_.get("height")?a(_.get("height"),"y")-N-j:_.get("innerHeight")&&a(_.get("innerHeight"),"y"),_.w=_.get("width")?a(_.get("width"),"x")-z-D:_.get("innerWidth")&&a(_.get("innerWidth"),"x"),_.mw=_.w,_.mh=_.h,_.get("maxWidth")&&(_.mw=a(_.get("maxWidth"),"x")-z-D,_.mw=_.w&&_.w<_.mw?_.w:_.mw),_.get("maxHeight")&&(_.mh=a(_.get("maxHeight"),"y")-N-j,_.mh=_.h&&_.h<_.mh?_.h:_.mh),e=_.get("href"),Q=setTimeout(function(){L.show()},100),_.get("inline")){var c=t(e);r=t("<div>").hide().insertBefore(c),ae.one(he,function(){r.replaceWith(c)}),h(c)}else _.get("iframe")?h(" "):_.get("html")?h(_.get("html")):s(_,e)?(e=l(_,e),U=_.get("createImg"),t(U).addClass(Z+"Photo").bind("error."+Z,function(){h(n(se,"Error").html(_.get("imgError")))}).one("load",function(){d===le&&setTimeout(function(){var e;_.get("retinaImage")&&i.devicePixelRatio>1&&(U.height=U.height/i.devicePixelRatio,U.width=U.width/i.devicePixelRatio),_.get("scalePhotos")&&(o=function(){U.height-Line truncated
@@ -0,0 +1,131 @@
+jQuery(function($)
+{
+
+    // Default time delay before checking location
+    var call_back_delay = 500;
+
+    // Set some flags for tracking & execution
+    var scroll_timer = null;
+    var scroller = false; // indicate the user has begun scrolling
+
+    scroll_points_in_page = jQuery(".scroll_point");
+    video_screenshots = jQuery(".video-screenshot");
+    video_parents = jQuery(".video-parent");
+
+    var apply_video_click = function (video) {
+        $(video).click(function (e) {
+            var v = $(this)[0];
+            if(v.paused) {
+                v.play();
+                $(v).attr("data-paused", "false");
+            }
+            else {
+                v.pause();
+                $(v).attr("data-paused", "true");
+            }
+        });
+    }
+
+    for(var i = 0; i < video_parents.length; i++) {
+        let video_with_event = $(video_parents[i]).children("video")[0];
+        let play_icon = $($(video_parents[i]).children(".play-pause")[0]).children("i");
+        let parent = $(video_parents[i]);
+
+        parent.addClass("playing");
+
+        video_with_event.onpause = function () {
+            parent.addClass("paused");
+            parent.removeClass("playing");
+            play_icon.addClass("fa-play");
+            play_icon.removeClass("fa-pause");
+        }
+        video_with_event.onplay = function () {
+            parent.removeClass("paused");
+            parent.addClass("playing");
+            play_icon.removeClass("fa-play");
+            play_icon.addClass("fa-pause");
+        }
+
+    }
+
+    for(var i = 0; i < video_screenshots.length; i++) {
+        apply_video_click(video_screenshots[i]);
+    }
+
+    $(".play-pause").click(function (e) { $(this).next("video").click();});
+
+
+    // Check the location and track user
+      function track_location()
+      {
+         view_bottom = $(window).height() + $(window).scrollTop();// the bottom of the visible area
+
+         // loop through the scroll points and send events for any within the visible part of the page
+         for(var i = 0; i < scroll_points_in_page.length; i++)
+         {
+               check_scroll_point(scroll_points_in_page[i]);
+         }
+         for(var i = 0; i < video_screenshots.length; i++)
+         {
+               video_screenshots_play_pause(video_screenshots[i]);
+         }
+
+    }
+
+
+
+    var check_scroll_point = function(current_value)
+    {
+        var current_object = $(current_value);
+
+        if (view_bottom >= current_object.offset().top && $(window).scrollTop() <= current_object.offset().top && (current_object.attr("hit") === undefined || current_object.attr("hit") === null))
+        {
+            if (!debug_mode)
+            {
+                ga('send', 'event', current_object.attr("data-eventCategory") + "_scroll_points", "in_view", current_object.attr("data-eventLabel"));
+            }
+            else
+            {
+                console.log(current_object.attr("data-eventCategory") + "_scroll_points, " + current_object.attr("data-eventLabel"));
+            }
+
+            $("[data-eventLabel='" + current_object.attr("data-eventLabel")+ "']").attr("hit", "1"); // after the point has been hit don't count it again
+        }
+
+    }
+
+    var video_screenshots_play_pause = function(current_value)
+    {
+        var current_object = $(current_value);
+        var video_middle = current_object.offset().top + (current_object.height() / 2);
+        var video_on_screen = view_bottom > video_middle && video_middle > $(window).scrollTop();
+
+        if (
+            window.innerWidth > 600
+            && video_on_screen
+            && current_value.paused
+            && current_object.attr("data-paused") === "false"
+            )
+        {
+            current_value.play();
+        }
+        else if (!current_value.paused && !video_on_screen) {
+            current_value.pause();
+        }
+
+    }
+
+    // Track the scrolling and track location
+   $(".page").scroll(function()
+   {
+      if (scroll_timer) {
+         clearTimeout(scroll_timer);
+      }
+
+        // Use a buffer so we don't call track_location too often.
+      scroll_timer = setTimeout(track_location, call_back_delay);
+
+   });
+
+
+});
@@ -0,0 +1 @@
+<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"><i class="fas fa-link"></i></a>
@@ -5,9 +5,12 @@
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
-        <meta name="keywords" content="Futures, Options, Derivatives, Trade, Trading, Professional, options trading, futures trading, Software" />
        <meta name="rights" content="© Blue Trading Systems" />
-        <meta name="description" content="Documentation for Blue Trading Systems' BTS Spark" />
+
+        <!-- <meta name="keywords" content="Futures, Derivatives, Trade, Trading, Trader, Professional, futures trading, Software" />
+        <meta name="description" content="Documentation for Blue Trading Systems' BTS Spark" /> -->
+        {% block meta %}
+        {% endblock meta %}

        <title>{% block title %}{{ config.title }}{% endblock title %}</title>

@@ -36,12 +39,8 @@

            }
        </script>
+        <script src="https://kit.fontawesome.com/93aca32d82.js"></script>

-        <script
-            src="https://code.jquery.com/jquery-3.3.1.min.js"
-            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-            crossorigin="anonymous"></script>
-        <script type="text/javascript" src="{{ get_url(path="image.js") | safe }}"></script>
        {% block js %}

        {% endblock js %}
@@ -60,6 +59,9 @@
            {% block before_menu %}
            {% endblock before_menu %}
            <nav role="navigation">
+                <div class="menu-icon menu-close-icon">
+                    <i class="fas fa-arrow-left"></i>
+                </div>
                <ul>
                    {% block menu %}
                        {% set index = get_section(path="_index.md") %}
@@ -116,14 +118,14 @@

        <div class="page">
            <div class="page__header">
-                <div class="menu-icon">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </div>
+                <span class="menu-icon">
+                    <i class="fas fa-bars"></i>
+                </span>
                {% if config.build_search_index %}
-                <span class="search-icon">🔎</span>
+                <span class="search-icon"><i class="fas fa-search"></i></span>
                {% endif %}
+                <span class="font-icon"><i class="fas fa-font"></i></span>
+
            </div>

            <div class="page__content">
@@ -154,11 +156,19 @@
        </div>

        {% block js_body %}
+            <script
+                src="https://code.jquery.com/jquery-3.3.1.min.js"
+                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+                crossorigin="anonymous"></script>
+                <script type="text/javascript" src="{{ get_url(path="jquery.colorbox-min.js") | safe }}"></script>
+            <script type="text/javascript" src="{{ get_url(path="image.js") | safe }}"></script>
+            <script type="text/javascript" src="{{ get_url(path="scroll_actions.js") | safe }}"></script>
            {% if config.build_search_index %}
            <script type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") | safe }}"></script>
            <script type="text/javascript" src="{{ get_url(path="search_index.en.js") | safe }}"></script>
            {% endif %}
            <script type="text/javascript" src="{{ get_url(path="book.js") | safe }}"></script>
+
        {% endblock js_body %}
    </body>

@@ -1,5 +1,13 @@
 {% extends "index.html" %}

+{% block meta %}
+    {% if page.extra.page_description %}
+        <meta name="description" content="{{ page.extra.page_description }}" />
+    {% else %}
+        <meta name="description" content="{{ page.title }} Documentation for Blue Trading Systems' BTS Spark" />
+    {% endif %}
+{% endblock meta %}
+
 {% block title %}{{ page.title }} &bull; {{ config.title }}{% endblock title %}

 {% block content %}
@@ -1,5 +1,13 @@
 {% extends "index.html" %}

+{% block meta %}
+    {% if section.extra.page_description %}
+        <meta name="description" content="{{ section.extra.page_description }}" />
+    {% else %}
+        <meta name="description" content="{{ section.title }} Documentation for Blue Trading Systems' BTS Spark" />
+    {% endif %}
+{% endblock meta %}
+
 {% block title %}{{ section.title }} &bull; {{ config.title }}{% endblock title %}

 {% block content %}
@@ -0,0 +1 @@
+<div style="clear:both;"></div>
@@ -0,0 +1,17 @@
+{% if class %}
+        {% set cls = class %}
+{% else %}
+        {% set cls = "" %}
+{% endif %}
+
+{% if page %}
+        {% set context = page %}
+{% elif section %}
+        {% set context = section %}
+{% endif %}
+
+<img
+    class="icon-image {{cls}}"
+    src="{{name}}"
+    alt="{{alt}}"
+    />
@@ -0,0 +1,34 @@
+{% if pull %}
+        {% if pull == "left" %}
+                {% set float = "is-pulled-left" %}
+        {% elif pull == "right" %}
+                {% set float = "is-pulled-right" %}
+        {% else %}
+        {% set float = "is-pulled-over-there" %}
+        {% endif %}
+{% else %}
+        {% set float = " " %}
+{% endif %}
+
+{% if class %}
+        {% set cls = class %}
+{% else %}
+        {% set cls = "" %}
+{% endif %}
+
+{% if page %}
+        {% set context = page %}
+{% elif section %}
+        {% set context = section %}
+{% endif %}
+
+{% set image_path = context.path ~ name %}
+{% set meta = get_image_metadata(path = image_path) %}
+{% set image_width = (meta.width * 0.666)%}
+
+<img
+    class="{{cls}} {{float}}"
+    style="width:{{image_width}}px;"
+    src="{{name}}"
+    alt="{{alt}}"
+    />
@@ -0,0 +1,52 @@
+{% if pull %}
+        {% if pull == "left" %}
+                {% set float = "is-pulled-left" %}
+        {% elif pull == "right" %}
+                {% set float = "is-pulled-right" %}
+        {% else %}
+        {% set float = "is-pulled-over-there" %}
+        {% endif %}
+{% else %}
+        {% set float = " " %}
+{% endif %}
+
+{% if class %}
+        {% set cls = class %}
+{% else %}
+        {% set cls = "" %}
+{% endif %}
+
+{% if width %}
+        {% set wdth = width %}
+{% else %}
+        {% set wdth = "100%" %}
+{% endif %}
+
+{% if page %}
+        {% set context = page %}
+{% elif section %}
+        {% set context = section %}
+{% endif %}
+
+{% set image_path = context.path ~ name %}
+{% set meta = get_image_metadata(path = image_path) %}
+{% set image_width = (meta.width * 0.666)%}
+{% set id = name | replace(from=".", to="-") %}
+
+<a class="colorbox-inline" href="#{{id}}">
+    <img
+        class="{{cls}} {{float}}"
+        style="width: {{wdth}}; max-width:{{image_width}}"
+        src="{{name}}"
+        alt="{{alt}}"
+    />
+</a>
+
+<div id="colorbox-inline-content" style="display: none;">
+    <div id="{{id}}">
+        <img class = "" style="width:{{image_width}}; max-width:95vw; max-height:95vh; object-fit: scale-down"
+            src="{{name}}"
+            alt="{{alt}}"
+        />
+    </div>
+</div>
@@ -0,0 +1,6 @@
+<div class="video-parent">
+   <div class="play-pause"><i class="fas fa-play"></i></div>
+   <video class="video-screenshot" style="width: {{width}}; max-width:100%;" muted loop data-paused="false">
+       <source src="{{name}}" type="video/mp4">
+   </video>
+</div>
@@ -0,0 +1,8 @@
+<div {% if class %}class="{{class}}"{% endif %}>
+    <div class="embed-responsive embed-responsive-16by9 youtube-thumb">
+        <a class="gallery_image youtube cboxElement" href="https://www.youtube.com/embed/{{id}}" style="display:block;">
+            <img class="video_thumb" style="width:100%;" src="https://img.youtube.com/vi/{{id}}/0.jpg" alt="Video Thumbnail" />
+            <div class="youtube-overlay"><i class="fas fa-play"></i></div>
+        </a>
+    </div>
+</div>
Author	SHA1	Message	Date
Michael Harding	ebaf8ff51f	Merged master into doc-theme	2019-11-04 16:17:12 -05:00
Michael Harding	01ab0dd3e5	update manual deploy script	2019-10-28 14:28:59 -04:00
Michael Harding	fbdf56b4dc	Move lightbox assets into the manual build	2019-10-28 14:28:01 -04:00
Michael Harding	b698b64879	Merge master into doc-theme	2019-10-28 11:41:34 -04:00
Michael Harding	68a822c342	Fix build	2019-10-15 11:42:11 -04:00
Michael Harding	5ee2cfb5f6	Merged master into doc-theme	2019-10-14 17:05:38 -04:00
Michael Harding	e8d4fa1200	Manual: Add page descriptions	2019-10-14 16:48:31 -04:00
Michael Harding	8d47584ee8	Manual: make navigation fixed	2019-10-11 14:05:48 -04:00
Michael Harding	7b95174171	Manual: Fix menu on mobile	2019-10-11 13:36:08 -04:00
Michael Harding	31e913fb1b	manual: improve lightbox	2019-10-11 10:48:36 -04:00
Michael Harding	20f6c76050	Manual: screen_recording short code better youtube	2019-10-10 17:05:54 -04:00
Michael Harding	4a41f9b166	Manual: image shortcode	2019-10-10 11:27:07 -04:00
BTS	f4bb2aaada	Manual: image processing	2019-10-09 17:45:01 -04:00
BTS	36b43024ac	Manual Dark Mode	2019-10-09 16:35:21 -04:00
Michael Harding	ffd1835218	Manual: Add icons, hover heading links	2019-09-17 11:07:06 -04:00
BTS	18af3dce74	manual: make images floatable	2019-09-16 17:46:59 -04:00
BTS	88c42ee6bd	Manual: fixes for High DPI and icon short code	2019-09-16 17:13:26 -04:00
BTS	ba61d5de76	Add image shorttags in the manual	2019-09-13 19:48:10 -04:00
BTS	ffbdd81a9e	Add Youtube lightbox to manual	2019-09-13 14:57:24 -04:00
Michael Harding	66f58e1d4b	Add meta description to Manual	2019-09-13 10:14:19 -04:00
				`@@ -0,0 +1 @@`
				`<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"><i class="fas fa-link"></i></a>`