From 55d5cae85fbb4484c259d3523e62d089c66ad445 Mon Sep 17 00:00:00 2001
From: Aetherinox <aetherinox@proton.me>
Date: Fri, 11 Apr 2025 12:59:06 -0700
Subject: [PATCH] docs: add main install page

---
 docs/docs/install/index.md      | 40 +++++++++++++++++++++++++++++++++
 docs/docs/stylesheets/extra.css | 23 ++++++++++++++++++-
 docs/mkdocs.yml                 |  5 +++++
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 docs/docs/install/index.md

diff --git a/docs/docs/install/index.md b/docs/docs/install/index.md
new file mode 100644
index 00000000..d2af6ef8
--- /dev/null
+++ b/docs/docs/install/index.md
@@ -0,0 +1,40 @@
+---
+title: Install
+tags:
+  - install
+---
+
+# Installing TVApp2
+
+To install TVApp2 using docker; you will need to use either the `🗔 docker run` command, or create a `📄 docker-compose.yml` file which contains information about how to pull the latest image and spin the container up. We have provided instructions for both.
+
+<br />
+
+{==
+
+Select your desired option to bring up the TVApp2 container with:
+
+==}
+
+<div class="grid cards" markdown>
+
+-   :material-circle: &nbsp; [docker run](docker-run.md)
+
+    ---
+
+    Spin up the TVApp2 container using the `docker run` command. 
+    This is useful for quick launches, but is not time efficient
+    if you plan to use this container long-term.
+
+-   :material-circle: &nbsp; [docker compose](docker-compose.md)
+
+    ---
+
+    Spin up the TVApp2 container by creating a `docker-compose.yml`
+    file which will store all of your variables, volumes, properties,
+    and any labels that you may need the container to utilize.
+
+</div>
+
+<br />
+<br />
diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css
index 73f0e874..8ee8b23e 100644
--- a/docs/docs/stylesheets/extra.css
+++ b/docs/docs/stylesheets/extra.css
@@ -418,7 +418,28 @@
 
     .md-typeset .tabbed-labels
     {
-        background-color: #0d0d0d;
+        background-color: #0b0b0b;
+        border-top-left-radius: 4px;
+        border-left: 1px solid #242735;
+        border-top: 1px solid #242735;
+        border-right: 1px solid #242735;
+        border-top-right-radius: 4px;
+    }
+
+    .tabbed-labels::before
+    {
+        background: hsla(343.1, 87.9%, 51.6%, 0.82);
+        bottom: 0;
+        content: "";
+        display: block;
+        height: 2px;
+        left: 0;
+        position: absolute;
+        transform: translateX(var(--md-indicator-x));
+        transition: width 225ms,background-color .25s,transform .25s;
+        transition-timing-function: ease, ease, ease;
+        transition-timing-function: cubic-bezier(.4,0,.2,1);
+        width: var(--md-indicator-width);
     }
 
     /*
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index ba8eb67d..b36b2279 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -29,6 +29,7 @@ site_url: 'https://thebinaryninja.github.io/tvapp2/'
 # #
 
 markdown_extensions:
+    - pymdownx.critic
     - markdown.extensions.extra
     - toc:
           permalink: true
@@ -238,6 +239,10 @@ nav:
           - Wiki:
                 - Conventions: 'about/conventions.md'
                 - Tags: 'about/tags.md'
+    - Install:
+          - Getting Started: 'install/index.md'
+          - docker run: 'install/docker-run.md'
+          - docker compose: 'install/docker-compose.md'
     - Config:
           - Environment Variables: 'config/env.md'
           - Volumes: 'config/volumes.md'