Web UI migration to Vite and Vue3 and improvements to the UX (#1673)

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>

docs/source/building/linux.rst

@@ -192,13 +192,6 @@ If the version of CUDA available from your distro is not adequate, manually inst
    ./cuda.run --silent --toolkit --toolkitpath=/usr --no-opengl-libs --no-man-page --no-drm
    rm ./cuda.run
 
-npm dependencies
-----------------
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
-
 Build
 -----
 .. Attention:: Ensure you are in the build directory created during the clone step earlier before continuing.

docs/source/building/macos.rst

@@ -24,13 +24,6 @@ Install Requirements
       cd /usr/local/include
       ln -s ../opt/openssl/include/openssl .
 
-npm dependencies
-----------------
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
-
 Build
 -----
 .. Attention:: Ensure you are in the build directory created during the clone step earlier before continuing.

docs/source/building/windows.rst

@@ -16,17 +16,8 @@ Install dependencies:
 
       pacman -S base-devel cmake diffutils gcc git make mingw-w64-x86_64-binutils \
       mingw-w64-x86_64-boost mingw-w64-x86_64-cmake mingw-w64-x86_64-curl \
-      mingw-w64-x86_64-onevpl mingw-w64-x86_64-openssl mingw-w64-x86_64-opus \
-      mingw-w64-x86_64-toolchain
-
-npm dependencies
-----------------
-Install nodejs and npm. Downloads available `here <https://nodejs.org/en/download/>`__.
-
-Install npm dependencies.
-   .. code-block:: bash
-
-      npm install
+      mingw-w64-x86_64-nodejs mingw-w64-x86_64-onevpl mingw-w64-x86_64-openssl \ 
+      mingw-w64-x86_64-opus mingw-w64-x86_64-toolchain
 
 Build
 -----

docs/source/conf.py

@@ -69,7 +69,7 @@ source_suffix = ['.rst', '.md']
 # -- Options for HTML output -------------------------------------------------
 
 # images
-html_favicon = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'images', 'sunshine.ico')
+html_favicon = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'public', 'images', 'sunshine.ico')
 html_logo = os.path.join(root_dir, 'sunshine.png')
 
 # Add any paths that contain custom static files (such as style sheets) here,

docs/source/contributing/contributing.rst

@@ -3,3 +3,23 @@ Contributing
 
 Read our contribution guide in our organization level
 `docs <https://lizardbyte.readthedocs.io/en/latest/developers/contributing.html>`__.
+
+Web UI
+------
+The Web UI uses `Vite <https://vitejs.dev/>`__ as its build system, to handle the integration of the NPM libraries.
+
+The HTML pages used by the Web UI are found in ``src_assets/common/assets/web``.
+
+`EJS <https://www.npmjs.com/package/vite-plugin-ejs>`__ is used as a templating system for the pages (check ``template_header.html`` and ``template_header_main.html``).
+
+The Style System is provided by `Bootstrap <https://getbootstrap.com/>`__.
+
+The JS framework used by the more interactive pages is `Vue <https://vuejs.org/>`__.
+
+Building
+^^^^^^^^
+Sunshine already builds the UI as part of its build process, but you can make faster changes by starting vite manually.
+
+.. code-block:: bash
+
+   npm run dev