Release v0.5.1

Changelog:
- Add Discord RPC

.github/workflows/build.yml

@@ -1,6 +1,6 @@
 name: Build/release
 
-on: push
+on: workflow_dispatch
 
 jobs:
   release:

.gitignore

@@ -1,3 +1,3 @@
 /node_modules/
 /.idea/
-/release/
+/release/

.prettierignore

@@ -0,0 +1,3 @@
+yarn.lock
+node_modules/
+README.md

LICENSE

@@ -1,22 +1,21 @@
-MIT License
-
-Copyright (c) 2021 Agampreet Singh
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
+MIT License
+
+Copyright (c) 2022 Agampreet Singh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -9,7 +9,7 @@
 <a href="https://electronjs.org">
  <img align="center" src="https://img.shields.io/badge/Developed%20With-Electron-red?logo=Electron&logoColor=white&style=flat">  
  </a>
-<a href="https://github.com/agam778/MS-Office-Electron/blob/main/license.txt">
+<a href="https://github.com/agam778/MS-Office-Electron/blob/main/LICENSE">
  <img align="center" src="https://img.shields.io/github/license/agam778/MS-Office-Electron?style=flat">  
  </a>
 <a  href="https://github.com/agam778/MS-Office-Electron/releases/">
@@ -118,9 +118,17 @@ Arch Linux builds have been published to "AUR" now!
 
 1. Install any AUR helper like [`yay`](https://github.com/Jguer/yay)
 
-2. The package name is `ms-office-electron-git`, so run `yay -Sy ms-office-electron-git`
+2. There are 2 packages in the AUR
+   - `ms-office-electron-bin`: For installing pre-built releases
+   - `ms-office-electron-git`: For building the app from source and installing.
 
-3. Wait for it to install and tada! The app is installed.
+3. Now, for example, using `yay`, run:
+   ```bash
+   yay -Sy ms-office-electron-*
+   ```
+   To install the package accordingly.
+
+4. Wait for it to install and tada! The app is installed.
 
 If you find any issues in using the AUR Builds, please create a [New Issue](https://github.com/agam778/MS-Office-Electron/issues/new) and i'll try to fix that as soon as possible :D
 

docs/README.md

@@ -1,9 +1,7 @@
 # MS-Office-Electron
+
 A Microsoft Office Online Desktop Client made with Electron. Free of Cost.
 
-# Website Branch
-Just a website for the MS-Office-Electron App, nothing much<br>
-Includes the loading screen for now [here](https://agam778.github.io/MS-Office-Electron/loading/)
+# Website
 
-# Todo:
-- [ ] Add description about the app
+Just a website for the MS-Office-Electron App, nothing much

docs/assets/js/breakpoints.min.js

@@ -1,2 +1,150 @@
 /* breakpoints.js v1.0 | @ajlkn | MIT licensed */
-var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e<t.events.length;e++)n=t.events[e],t.active(n.query)?n.state||(n.state=!0,n.handler()):n.state&&(n.state=!1)}};return e._=t,e.on=function(e,n){t.on(e,n)},e.active=function(e){return t.active(e)},e}();!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.breakpoints=t()}(this,function(){return breakpoints});
+var breakpoints = (function () {
+  "use strict";
+  function e(e) {
+    t.init(e);
+  }
+  var t = {
+    list: null,
+    media: {},
+    events: [],
+    init: function (e) {
+      (t.list = e),
+        window.addEventListener("resize", t.poll),
+        window.addEventListener("orientationchange", t.poll),
+        window.addEventListener("load", t.poll),
+        window.addEventListener("fullscreenchange", t.poll);
+    },
+    active: function (e) {
+      var n, a, s, i, r, d, c;
+      if (!(e in t.media)) {
+        if (
+          (">=" == e.substr(0, 2)
+            ? ((a = "gte"), (n = e.substr(2)))
+            : "<=" == e.substr(0, 2)
+            ? ((a = "lte"), (n = e.substr(2)))
+            : ">" == e.substr(0, 1)
+            ? ((a = "gt"), (n = e.substr(1)))
+            : "<" == e.substr(0, 1)
+            ? ((a = "lt"), (n = e.substr(1)))
+            : "!" == e.substr(0, 1)
+            ? ((a = "not"), (n = e.substr(1)))
+            : ((a = "eq"), (n = e)),
+          n && n in t.list)
+        )
+          if (((i = t.list[n]), Array.isArray(i))) {
+            if (((r = parseInt(i[0])), (d = parseInt(i[1])), isNaN(r))) {
+              if (isNaN(d)) return;
+              c = i[1].substr(String(d).length);
+            } else c = i[0].substr(String(r).length);
+            if (isNaN(r))
+              switch (a) {
+                case "gte":
+                  s = "screen";
+                  break;
+                case "lte":
+                  s = "screen and (max-width: " + d + c + ")";
+                  break;
+                case "gt":
+                  s = "screen and (min-width: " + (d + 1) + c + ")";
+                  break;
+                case "lt":
+                  s = "screen and (max-width: -1px)";
+                  break;
+                case "not":
+                  s = "screen and (min-width: " + (d + 1) + c + ")";
+                  break;
+                default:
+                  s = "screen and (max-width: " + d + c + ")";
+              }
+            else if (isNaN(d))
+              switch (a) {
+                case "gte":
+                  s = "screen and (min-width: " + r + c + ")";
+                  break;
+                case "lte":
+                  s = "screen";
+                  break;
+                case "gt":
+                  s = "screen and (max-width: -1px)";
+                  break;
+                case "lt":
+                  s = "screen and (max-width: " + (r - 1) + c + ")";
+                  break;
+                case "not":
+                  s = "screen and (max-width: " + (r - 1) + c + ")";
+                  break;
+                default:
+                  s = "screen and (min-width: " + r + c + ")";
+              }
+            else
+              switch (a) {
+                case "gte":
+                  s = "screen and (min-width: " + r + c + ")";
+                  break;
+                case "lte":
+                  s = "screen and (max-width: " + d + c + ")";
+                  break;
+                case "gt":
+                  s = "screen and (min-width: " + (d + 1) + c + ")";
+                  break;
+                case "lt":
+                  s = "screen and (max-width: " + (r - 1) + c + ")";
+                  break;
+                case "not":
+                  s =
+                    "screen and (max-width: " +
+                    (r - 1) +
+                    c +
+                    "), screen and (min-width: " +
+                    (d + 1) +
+                    c +
+                    ")";
+                  break;
+                default:
+                  s =
+                    "screen and (min-width: " +
+                    r +
+                    c +
+                    ") and (max-width: " +
+                    d +
+                    c +
+                    ")";
+              }
+          } else s = "(" == i.charAt(0) ? "screen and " + i : i;
+        t.media[e] = !!s && s;
+      }
+      return t.media[e] !== !1 && window.matchMedia(t.media[e]).matches;
+    },
+    on: function (e, n) {
+      t.events.push({ query: e, handler: n, state: !1 }), t.active(e) && n();
+    },
+    poll: function () {
+      var e, n;
+      for (e = 0; e < t.events.length; e++)
+        (n = t.events[e]),
+          t.active(n.query)
+            ? n.state || ((n.state = !0), n.handler())
+            : n.state && (n.state = !1);
+    },
+  };
+  return (
+    (e._ = t),
+    (e.on = function (e, n) {
+      t.on(e, n);
+    }),
+    (e.active = function (e) {
+      return t.active(e);
+    }),
+    e
+  );
+})();
+!(function (e, t) {
+  "function" == typeof define && define.amd
+    ? define([], t)
+    : "object" == typeof exports
+    ? (module.exports = t())
+    : (e.breakpoints = t());
+})(this, function () {
+  return breakpoints;
+});

docs/assets/js/browser.min.js

@@ -1,2 +1,118 @@
 /* browser.js v1.0 | @ajlkn | MIT licensed */
-var browser=function(){"use strict";var e={name:null,version:null,os:null,osVersion:null,touch:null,mobile:null,_canUse:null,canUse:function(n){e._canUse||(e._canUse=document.createElement("div"));var o=e._canUse.style,r=n.charAt(0).toUpperCase()+n.slice(1);return n in o||"Moz"+r in o||"Webkit"+r in o||"O"+r in o||"ms"+r in o},init:function(){var n,o,r,i,t=navigator.userAgent;for(n="other",o=0,r=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],i=0;i<r.length;i++)if(t.match(r[i][1])){n=r[i][0],o=parseFloat(RegExp.$1);break}for(e.name=n,e.version=o,n="other",o=0,r=[["ios",/([0-9_]+) like Mac OS X/,function(e){return e.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(e){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(e){return e.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null],["linux",/Linux/,null],["bsd",/BSD/,null],["unix",/X11/,null]],i=0;i<r.length;i++)if(t.match(r[i][1])){n=r[i][0],o=parseFloat(r[i][2]?r[i][2](RegExp.$1):RegExp.$1);break}e.os=n,e.osVersion=o,e.touch="wp"==e.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),e.mobile="wp"==e.os||"android"==e.os||"ios"==e.os||"bb"==e.os}};return e.init(),e}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser});
+var browser = (function () {
+  "use strict";
+  var e = {
+    name: null,
+    version: null,
+    os: null,
+    osVersion: null,
+    touch: null,
+    mobile: null,
+    _canUse: null,
+    canUse: function (n) {
+      e._canUse || (e._canUse = document.createElement("div"));
+      var o = e._canUse.style,
+        r = n.charAt(0).toUpperCase() + n.slice(1);
+      return (
+        n in o ||
+        "Moz" + r in o ||
+        "Webkit" + r in o ||
+        "O" + r in o ||
+        "ms" + r in o
+      );
+    },
+    init: function () {
+      var n,
+        o,
+        r,
+        i,
+        t = navigator.userAgent;
+      for (
+        n = "other",
+          o = 0,
+          r = [
+            ["firefox", /Firefox\/([0-9\.]+)/],
+            ["bb", /BlackBerry.+Version\/([0-9\.]+)/],
+            ["bb", /BB[0-9]+.+Version\/([0-9\.]+)/],
+            ["opera", /OPR\/([0-9\.]+)/],
+            ["opera", /Opera\/([0-9\.]+)/],
+            ["edge", /Edge\/([0-9\.]+)/],
+            ["safari", /Version\/([0-9\.]+).+Safari/],
+            ["chrome", /Chrome\/([0-9\.]+)/],
+            ["ie", /MSIE ([0-9]+)/],
+            ["ie", /Trident\/.+rv:([0-9]+)/],
+          ],
+          i = 0;
+        i < r.length;
+        i++
+      )
+        if (t.match(r[i][1])) {
+          (n = r[i][0]), (o = parseFloat(RegExp.$1));
+          break;
+        }
+      for (
+        e.name = n,
+          e.version = o,
+          n = "other",
+          o = 0,
+          r = [
+            [
+              "ios",
+              /([0-9_]+) like Mac OS X/,
+              function (e) {
+                return e.replace("_", ".").replace("_", "");
+              },
+            ],
+            [
+              "ios",
+              /CPU like Mac OS X/,
+              function (e) {
+                return 0;
+              },
+            ],
+            ["wp", /Windows Phone ([0-9\.]+)/, null],
+            ["android", /Android ([0-9\.]+)/, null],
+            [
+              "mac",
+              /Macintosh.+Mac OS X ([0-9_]+)/,
+              function (e) {
+                return e.replace("_", ".").replace("_", "");
+              },
+            ],
+            ["windows", /Windows NT ([0-9\.]+)/, null],
+            ["bb", /BlackBerry.+Version\/([0-9\.]+)/, null],
+            ["bb", /BB[0-9]+.+Version\/([0-9\.]+)/, null],
+            ["linux", /Linux/, null],
+            ["bsd", /BSD/, null],
+            ["unix", /X11/, null],
+          ],
+          i = 0;
+        i < r.length;
+        i++
+      )
+        if (t.match(r[i][1])) {
+          (n = r[i][0]),
+            (o = parseFloat(r[i][2] ? r[i][2](RegExp.$1) : RegExp.$1));
+          break;
+        }
+      (e.os = n),
+        (e.osVersion = o),
+        (e.touch =
+          "wp" == e.os
+            ? navigator.msMaxTouchPoints > 0
+            : !!("ontouchstart" in window)),
+        (e.mobile =
+          "wp" == e.os || "android" == e.os || "ios" == e.os || "bb" == e.os);
+    },
+  };
+  return e.init(), e;
+})();
+!(function (e, n) {
+  "function" == typeof define && define.amd
+    ? define([], n)
+    : "object" == typeof exports
+    ? (module.exports = n())
+    : (e.browser = n());
+})(this, function () {
+  return browser;
+});

docs/assets/js/main.js

@@ -4,114 +4,105 @@
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
 
-(function($) {
+(function ($) {
+  var $window = $(window),
+    $body = $("body"),
+    $header = $("#header"),
+    $footer = $("#footer"),
+    $main = $("#main"),
+    settings = {
+      // Parallax background effect?
+      parallax: true,
 
-	var $window = $(window),
-		$body = $('body'),
-		$header = $('#header'),
-		$footer = $('#footer'),
-		$main = $('#main'),
-		settings = {
+      // Parallax factor (lower = more intense, higher = less intense).
+      parallaxFactor: 20,
+    };
 
-			// Parallax background effect?
-				parallax: true,
+  // Breakpoints.
+  breakpoints({
+    xlarge: ["1281px", "1800px"],
+    large: ["981px", "1280px"],
+    medium: ["737px", "980px"],
+    small: ["481px", "736px"],
+    xsmall: [null, "480px"],
+  });
 
-			// Parallax factor (lower = more intense, higher = less intense).
-				parallaxFactor: 20
+  // Play initial animations on page load.
+  $window.on("load", function () {
+    window.setTimeout(function () {
+      $body.removeClass("is-preload");
+    }, 100);
+  });
 
-		};
+  // Touch?
+  if (browser.mobile) {
+    // Turn on touch mode.
+    $body.addClass("is-touch");
 
-	// Breakpoints.
-		breakpoints({
-			xlarge:  [ '1281px',  '1800px' ],
-			large:   [ '981px',   '1280px' ],
-			medium:  [ '737px',   '980px'  ],
-			small:   [ '481px',   '736px'  ],
-			xsmall:  [ null,      '480px'  ],
-		});
+    // Height fix (mostly for iOS).
+    window.setTimeout(function () {
+      $window.scrollTop($window.scrollTop() + 1);
+    }, 0);
+  }
 
-	// Play initial animations on page load.
-		$window.on('load', function() {
-			window.setTimeout(function() {
-				$body.removeClass('is-preload');
-			}, 100);
-		});
+  // Footer.
+  breakpoints.on("<=medium", function () {
+    $footer.insertAfter($main);
+  });
 
-	// Touch?
-		if (browser.mobile) {
+  breakpoints.on(">medium", function () {
+    $footer.appendTo($header);
+  });
 
-			// Turn on touch mode.
-				$body.addClass('is-touch');
+  // Header.
 
-			// Height fix (mostly for iOS).
-				window.setTimeout(function() {
-					$window.scrollTop($window.scrollTop() + 1);
-				}, 0);
+  // Parallax background.
 
-		}
+  // Disable parallax on IE (smooth scrolling is jerky), and on mobile platforms (= better performance).
+  if (browser.name == "ie" || browser.mobile) settings.parallax = false;
 
-	// Footer.
-		breakpoints.on('<=medium', function() {
-			$footer.insertAfter($main);
-		});
+  if (settings.parallax) {
+    breakpoints.on("<=medium", function () {
+      $window.off("scroll.strata_parallax");
+      $header.css("background-position", "");
+    });
 
-		breakpoints.on('>medium', function() {
-			$footer.appendTo($header);
-		});
+    breakpoints.on(">medium", function () {
+      $header.css("background-position", "left 0px");
 
-	// Header.
+      $window.on("scroll.strata_parallax", function () {
+        $header.css(
+          "background-position",
+          "left " +
+            -1 * (parseInt($window.scrollTop()) / settings.parallaxFactor) +
+            "px"
+        );
+      });
+    });
 
-		// Parallax background.
+    $window.on("load", function () {
+      $window.triggerHandler("scroll");
+    });
+  }
 
-			// Disable parallax on IE (smooth scrolling is jerky), and on mobile platforms (= better performance).
-				if (browser.name == 'ie'
-				||	browser.mobile)
-					settings.parallax = false;
+  // Main Sections: Two.
 
-			if (settings.parallax) {
-
-				breakpoints.on('<=medium', function() {
-
-					$window.off('scroll.strata_parallax');
-					$header.css('background-position', '');
-
-				});
-
-				breakpoints.on('>medium', function() {
-
-					$header.css('background-position', 'left 0px');
-
-					$window.on('scroll.strata_parallax', function() {
-						$header.css('background-position', 'left ' + (-1 * (parseInt($window.scrollTop()) / settings.parallaxFactor)) + 'px');
-					});
-
-				});
-
-				$window.on('load', function() {
-					$window.triggerHandler('scroll');
-				});
-
-			}
-
-	// Main Sections: Two.
-
-		// Lightbox gallery.
-			$window.on('load', function() {
-
-				$('#two').poptrox({
-					caption: function($a) { return $a.next('h3').text(); },
-					overlayColor: '#2c2c2c',
-					overlayOpacity: 0.85,
-					popupCloserText: '',
-					popupLoaderText: '',
-					selector: '.work-item a.image',
-					usePopupCaption: true,
-					usePopupDefaultStyling: false,
-					usePopupEasyClose: false,
-					usePopupNav: true,
-					windowMargin: (breakpoints.active('<=small') ? 0 : 50)
-				});
-
-			});
-
-})(jQuery);
+  // Lightbox gallery.
+  $window.on("load", function () {
+    $("#two").poptrox({
+      caption: function ($a) {
+        return $a.next("h3").text();
+      },
+      overlayColor: "#2c2c2c",
+      overlayOpacity: 0.85,
+      popupCloserText: "",
+      popupLoaderText: "",
+      selector: ".work-item a.image",
+      usePopupCaption: true,
+      usePopupDefaultStyling: false,
+      usePopupEasyClose: false,
+      usePopupNav: true,
+      windowMargin: breakpoints.active("<=small") ? 0 : 50,
+    });
+  });
+})(jQuery);

docs/assets/sass/libs/_breakpoints.scss

@@ -2,222 +2,201 @@
 
 // Vars.
 
-	/// Breakpoints.
-	/// @var {list}
-	$breakpoints: () !global;
+/// Breakpoints.
+/// @var {list}
+$breakpoints: () !global;
 
 // Mixins.
 
-	/// Sets breakpoints.
-	/// @param {map} $x Breakpoints.
-	@mixin breakpoints($x: ()) {
-		$breakpoints: $x !global;
-	}
+/// Sets breakpoints.
+/// @param {map} $x Breakpoints.
+@mixin breakpoints($x: ()) {
+  $breakpoints: $x !global;
+}
 
-	/// Wraps @content in a @media block targeting a specific orientation.
-	/// @param {string} $orientation Orientation.
-	@mixin orientation($orientation) {
-		@media screen and (orientation: #{$orientation}) {
-			@content;
-		}
-	}
+/// Wraps @content in a @media block targeting a specific orientation.
+/// @param {string} $orientation Orientation.
+@mixin orientation($orientation) {
+  @media screen and (orientation: #{$orientation}) {
+    @content;
+  }
+}
 
-	/// Wraps @content in a @media block using a given query.
-	/// @param {string} $query Query.
-	@mixin breakpoint($query: null) {
+/// Wraps @content in a @media block using a given query.
+/// @param {string} $query Query.
+@mixin breakpoint($query: null) {
+  $breakpoint: null;
+  $op: null;
+  $media: null;
 
-		$breakpoint: null;
-		$op: null;
-		$media: null;
+  // Determine operator, breakpoint.
 
-		// Determine operator, breakpoint.
+  // Greater than or equal.
+  @if (str-slice($query, 0, 2) == ">=") {
+    $op: "gte";
+    $breakpoint: str-slice($query, 3);
+  }
 
-			// Greater than or equal.
-				@if (str-slice($query, 0, 2) == '>=') {
+  // Less than or equal.
+  @elseif (str-slice($query, 0, 2) == '<=') {
+    $op: "lte";
+    $breakpoint: str-slice($query, 3);
+  }
 
-					$op: 'gte';
-					$breakpoint: str-slice($query, 3);
+  // Greater than.
+  @elseif (str-slice($query, 0, 1) == '>') {
+    $op: "gt";
+    $breakpoint: str-slice($query, 2);
+  }
 
-				}
+  // Less than.
+  @elseif (str-slice($query, 0, 1) == '<') {
+    $op: "lt";
+    $breakpoint: str-slice($query, 2);
+  }
 
-			// Less than or equal.
-				@elseif (str-slice($query, 0, 2) == '<=') {
+  // Not.
+  @elseif (str-slice($query, 0, 1) == '!') {
+    $op: "not";
+    $breakpoint: str-slice($query, 2);
+  }
 
-					$op: 'lte';
-					$breakpoint: str-slice($query, 3);
+  // Equal.
+  @else {
+    $op: "eq";
+    $breakpoint: $query;
+  }
 
-				}
+  // Build media.
+  @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+    $a: map-get($breakpoints, $breakpoint);
 
-			// Greater than.
-				@elseif (str-slice($query, 0, 1) == '>') {
+    // Range.
+    @if (type-of($a) == "list") {
+      $x: nth($a, 1);
+      $y: nth($a, 2);
 
-					$op: 'gt';
-					$breakpoint: str-slice($query, 2);
+      // Max only.
+      @if ($x == null) {
+        // Greater than or equal (>= 0 / anything)
+        @if ($op == "gte") {
+          $media: "screen";
+        }
 
-				}
+        // Less than or equal (<= y)
+        @elseif ($op == 'lte') {
+          $media: "screen and (max-width: " + $y + ")";
+        }
 
-			// Less than.
-				@elseif (str-slice($query, 0, 1) == '<') {
+        // Greater than (> y)
+        @elseif ($op == 'gt') {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
 
-					$op: 'lt';
-					$breakpoint: str-slice($query, 2);
+        // Less than (< 0 / invalid)
+        @elseif ($op == 'lt') {
+          $media: "screen and (max-width: -1px)";
+        }
 
-				}
+        // Not (> y)
+        @elseif ($op == 'not') {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
 
-			// Not.
-				@elseif (str-slice($query, 0, 1) == '!') {
+        // Equal (<= y)
+        @else {
+          $media: "screen and (max-width: " + $y + ")";
+        }
+      }
 
-					$op: 'not';
-					$breakpoint: str-slice($query, 2);
+      // Min only.
+      @else if ($y == null) {
+        // Greater than or equal (>= x)
+        @if ($op == "gte") {
+          $media: "screen and (min-width: " + $x + ")";
+        }
 
-				}
+        // Less than or equal (<= inf / anything)
+        @elseif ($op == 'lte') {
+          $media: "screen";
+        }
 
-			// Equal.
-				@else {
+        // Greater than (> inf / invalid)
+        @elseif ($op == 'gt') {
+          $media: "screen and (max-width: -1px)";
+        }
 
-					$op: 'eq';
-					$breakpoint: $query;
+        // Less than (< x)
+        @elseif ($op == 'lt') {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
 
-				}
+        // Not (< x)
+        @elseif ($op == 'not') {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
 
-		// Build media.
-			@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+        // Equal (>= x)
+        @else {
+          $media: "screen and (min-width: " + $x + ")";
+        }
+      }
 
-				$a: map-get($breakpoints, $breakpoint);
+      // Min and max.
+      @else {
+        // Greater than or equal (>= x)
+        @if ($op == "gte") {
+          $media: "screen and (min-width: " + $x + ")";
+        }
 
-				// Range.
-					@if (type-of($a) == 'list') {
+        // Less than or equal (<= y)
+        @elseif ($op == 'lte') {
+          $media: "screen and (max-width: " + $y + ")";
+        }
 
-						$x: nth($a, 1);
-						$y: nth($a, 2);
+        // Greater than (> y)
+        @elseif ($op == 'gt') {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
 
-						// Max only.
-							@if ($x == null) {
+        // Less than (< x)
+        @elseif ($op == 'lt') {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
 
-								// Greater than or equal (>= 0 / anything)
-									@if ($op == 'gte') {
-										$media: 'screen';
-									}
+        // Not (< x and > y)
+        @elseif ($op == 'not') {
+          $media: "screen and (max-width: " + ($x - 1) +
+            "), screen and (min-width: " + ($y + 1) + ")";
+        }
 
-								// Less than or equal (<= y)
-									@elseif ($op == 'lte') {
-										$media: 'screen and (max-width: ' + $y + ')';
-									}
+        // Equal (>= x and <= y)
+        @else {
+          $media: "screen and (min-width: " +
+            $x +
+            ") and (max-width: " +
+            $y +
+            ")";
+        }
+      }
+    }
 
-								// Greater than (> y)
-									@elseif ($op == 'gt') {
-										$media: 'screen and (min-width: ' + ($y + 1) + ')';
-									}
+    // String.
+    @else {
+      // Missing a media type? Prefix with "screen".
+      @if (str-slice($a, 0, 1) == "(") {
+        $media: "screen and " + $a;
+      }
 
-								// Less than (< 0 / invalid)
-									@elseif ($op == 'lt') {
-										$media: 'screen and (max-width: -1px)';
-									}
+      // Otherwise, use as-is.
+      @else {
+        $media: $a;
+      }
+    }
+  }
 
-								// Not (> y)
-									@elseif ($op == 'not') {
-										$media: 'screen and (min-width: ' + ($y + 1) + ')';
-									}
-
-								// Equal (<= y)
-									@else {
-										$media: 'screen and (max-width: ' + $y + ')';
-									}
-
-							}
-
-						// Min only.
-							@else if ($y == null) {
-
-								// Greater than or equal (>= x)
-									@if ($op == 'gte') {
-										$media: 'screen and (min-width: ' + $x + ')';
-									}
-
-								// Less than or equal (<= inf / anything)
-									@elseif ($op == 'lte') {
-										$media: 'screen';
-									}
-
-								// Greater than (> inf / invalid)
-									@elseif ($op == 'gt') {
-										$media: 'screen and (max-width: -1px)';
-									}
-
-								// Less than (< x)
-									@elseif ($op == 'lt') {
-										$media: 'screen and (max-width: ' + ($x - 1) + ')';
-									}
-
-								// Not (< x)
-									@elseif ($op == 'not') {
-										$media: 'screen and (max-width: ' + ($x - 1) + ')';
-									}
-
-								// Equal (>= x)
-									@else {
-										$media: 'screen and (min-width: ' + $x + ')';
-									}
-
-							}
-
-						// Min and max.
-							@else {
-
-								// Greater than or equal (>= x)
-									@if ($op == 'gte') {
-										$media: 'screen and (min-width: ' + $x + ')';
-									}
-
-								// Less than or equal (<= y)
-									@elseif ($op == 'lte') {
-										$media: 'screen and (max-width: ' + $y + ')';
-									}
-
-								// Greater than (> y)
-									@elseif ($op == 'gt') {
-										$media: 'screen and (min-width: ' + ($y + 1) + ')';
-									}
-
-								// Less than (< x)
-									@elseif ($op == 'lt') {
-										$media: 'screen and (max-width: ' + ($x - 1) + ')';
-									}
-
-								// Not (< x and > y)
-									@elseif ($op == 'not') {
-										$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
-									}
-
-								// Equal (>= x and <= y)
-									@else {
-										$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
-									}
-
-							}
-
-					}
-
-				// String.
-					@else {
-
-						// Missing a media type? Prefix with "screen".
-							@if (str-slice($a, 0, 1) == '(') {
-								$media: 'screen and ' + $a;
-							}
-
-						// Otherwise, use as-is.
-							@else {
-								$media: $a;
-							}
-
-					}
-
-			}
-
-		// Output.
-	        @media #{$media} {
-				@content;
-			}
-
-	}
+  // Output.
+  @media #{$media} {
+    @content;
+  }
+}

docs/assets/sass/libs/_functions.scss

@@ -4,35 +4,26 @@
 /// @param {integer} $index Index.
 /// @return {list} Updated list.
 @function remove-nth($list, $index) {
+  $result: null;
 
-	$result: null;
+  @if type-of($index) != number {
+    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+  } @else if $index == 0 {
+    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+  } @else if abs($index) > length($list) {
+    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+  } @else {
+    $result: ();
+    $index: if($index < 0, length($list) + $index + 1, $index);
 
-	@if type-of($index) != number {
-		@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
-	}
-	@else if $index == 0 {
-		@warn "List index 0 must be a non-zero integer for `remove-nth`.";
-	}
-	@else if abs($index) > length($list) {
-		@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
-	}
-	@else {
-
-		$result: ();
-		$index: if($index < 0, length($list) + $index + 1, $index);
-
-		@for $i from 1 through length($list) {
-
-			@if $i != $index {
-				$result: append($result, nth($list, $i));
-			}
-
-		}
-
-	}
-
-	@return $result;
+    @for $i from 1 through length($list) {
+      @if $i != $index {
+        $result: append($result, nth($list, $i));
+      }
+    }
+  }
 
+  @return $result;
 }
 
 /// Gets a value from a map.
@@ -41,50 +32,48 @@
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function val($map, $keys...) {
+  @if nth($keys, 1) == null {
+    $keys: remove-nth($keys, 1);
+  }
 
-	@if nth($keys, 1) == null {
-		$keys: remove-nth($keys, 1);
-	}
-
-	@each $key in $keys {
-		$map: map-get($map, $key);
-	}
-
-	@return $map;
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
 
+  @return $map;
 }
 
 /// Gets a duration value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _duration($keys...) {
-	@return val($duration, $keys...);
+  @return val($duration, $keys...);
 }
 
 /// Gets a font value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _font($keys...) {
-	@return val($font, $keys...);
+  @return val($font, $keys...);
 }
 
 /// Gets a misc value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _misc($keys...) {
-	@return val($misc, $keys...);
+  @return val($misc, $keys...);
 }
 
 /// Gets a palette value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _palette($keys...) {
-	@return val($palette, $keys...);
+  @return val($palette, $keys...);
 }
 
 /// Gets a size value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _size($keys...) {
-	@return val($size, $keys...);
-}
+  @return val($size, $keys...);
+}

docs/assets/sass/libs/_html-grid.scss

@@ -2,148 +2,137 @@
 
 // Mixins.
 
-	/// Initializes the current element as an HTML grid.
-	/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
-	/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
-	@mixin html-grid($gutters: 1.5em, $suffix: '') {
+/// Initializes the current element as an HTML grid.
+/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
+/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
+@mixin html-grid($gutters: 1.5em, $suffix: "") {
+  // Initialize.
+  $cols: 12;
+  $multipliers: 0, 0.25, 0.5, 1, 1.5, 2;
+  $unit: 100% / $cols;
 
-		// Initialize.
-			$cols: 12;
-			$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
-			$unit: 100% / $cols;
+  // Suffixes.
+  $suffixes: null;
 
-			// Suffixes.
-				$suffixes: null;
+  @if (type-of($suffix) == "list") {
+    $suffixes: $suffix;
+  } @else {
+    $suffixes: ($suffix);
+  }
 
-				@if (type-of($suffix) == 'list') {
-					$suffixes: $suffix;
-				}
-				@else {
-					$suffixes: ($suffix);
-				}
+  // Gutters.
+  $guttersCols: null;
+  $guttersRows: null;
 
-			// Gutters.
-				$guttersCols: null;
-				$guttersRows: null;
+  @if (type-of($gutters) == "list") {
+    $guttersCols: nth($gutters, 1);
+    $guttersRows: nth($gutters, 2);
+  } @else {
+    $guttersCols: $gutters;
+    $guttersRows: 0;
+  }
 
-				@if (type-of($gutters) == 'list') {
+  // Row.
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  align-items: stretch;
 
-					$guttersCols: nth($gutters, 1);
-					$guttersRows: nth($gutters, 2);
+  // Columns.
+  > * {
+    box-sizing: border-box;
+  }
 
-				}
-				@else {
+  // Gutters.
+  &.gtr-uniform {
+    > * {
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 
-					$guttersCols: $gutters;
-					$guttersRows: 0;
+  // Alignment.
+  &.aln-left {
+    justify-content: flex-start;
+  }
 
-				}
+  &.aln-center {
+    justify-content: center;
+  }
 
-		// Row.
-			display: flex;
-			flex-wrap: wrap;
-			box-sizing: border-box;
-			align-items: stretch;
+  &.aln-right {
+    justify-content: flex-end;
+  }
 
-			// Columns.
-				> * {
-					box-sizing: border-box;
-				}
+  &.aln-top {
+    align-items: flex-start;
+  }
 
-			// Gutters.
-				&.gtr-uniform {
-					> * {
-						> :last-child {
-							margin-bottom: 0;
-						}
-					}
-				}
+  &.aln-middle {
+    align-items: center;
+  }
 
-			// Alignment.
-				&.aln-left {
-					justify-content: flex-start;
-				}
+  &.aln-bottom {
+    align-items: flex-end;
+  }
 
-				&.aln-center {
-					justify-content: center;
-				}
+  // Step through suffixes.
+  @each $suffix in $suffixes {
+    // Suffix.
+    @if ($suffix != "") {
+      $suffix: "-" + $suffix;
+    } @else {
+      $suffix: "";
+    }
 
-				&.aln-right {
-					justify-content: flex-end;
-				}
+    // Row.
 
-				&.aln-top {
-					align-items: flex-start;
-				}
+    // Important.
+    > .imp#{$suffix} {
+      order: -1;
+    }
 
-				&.aln-middle {
-					align-items: center;
-				}
+    // Columns, offsets.
+    @for $i from 1 through $cols {
+      > .col-#{$i}#{$suffix} {
+        width: $unit * $i;
+      }
 
-				&.aln-bottom {
-					align-items: flex-end;
-				}
+      > .off-#{$i}#{$suffix} {
+        margin-left: $unit * $i;
+      }
+    }
 
-		// Step through suffixes.
-			@each $suffix in $suffixes {
+    // Step through multipliers.
+    @each $multiplier in $multipliers {
+      // Gutters.
+      $class: null;
 
-				// Suffix.
-					@if ($suffix != '') {
-						$suffix: '-' + $suffix;
-					}
-					@else {
-						$suffix: '';
-					}
+      @if ($multiplier != 1) {
+        $class: ".gtr-" + ($multiplier * 100);
+      }
 
-				// Row.
+      &#{$class} {
+        margin-top: ($guttersRows * $multiplier * -1);
+        margin-left: ($guttersCols * $multiplier * -1);
 
-					// Important.
-						> .imp#{$suffix} {
-							order: -1;
-						}
+        > * {
+          padding: ($guttersRows * $multiplier)
+            0
+            0
+            ($guttersCols * $multiplier);
+        }
 
-					// Columns, offsets.
-						@for $i from 1 through $cols {
-							> .col-#{$i}#{$suffix} {
-								width: $unit * $i;
-							}
+        // Uniform.
+        &.gtr-uniform {
+          margin-top: $guttersCols * $multiplier * -1;
 
-							> .off-#{$i}#{$suffix} {
-								margin-left: $unit * $i;
-							}
-						}
-
-					// Step through multipliers.
-						@each $multiplier in $multipliers {
-
-							// Gutters.
-								$class: null;
-
-								@if ($multiplier != 1) {
-									$class: '.gtr-' + ($multiplier * 100);
-								}
-
-								&#{$class} {
-									margin-top: ($guttersRows * $multiplier * -1);
-									margin-left: ($guttersCols * $multiplier * -1);
-
-									> * {
-										padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
-									}
-
-									// Uniform.
-										&.gtr-uniform {
-											margin-top: $guttersCols * $multiplier * -1;
-
-											> * {
-												padding-top: $guttersCols * $multiplier;
-											}
-										}
-
-								}
-
-						}
-
-			}
-
-	}
+          > * {
+            padding-top: $guttersCols * $multiplier;
+          }
+        }
+      }
+    }
+  }
+}

docs/assets/sass/libs/_mixins.scss

@@ -3,38 +3,33 @@
 /// @param {string} $category Optional category to use.
 /// @param {string} $where Optional pseudoelement to target (before or after).
 @mixin icon($content: false, $category: regular, $where: before) {
+  text-decoration: none;
 
-	text-decoration: none;
+  &:#{$where} {
+    @if $content {
+      content: $content;
+    }
 
-	&:#{$where} {
-
-		@if $content {
-			content: $content;
-		}
-
-		-moz-osx-font-smoothing: grayscale;
-		-webkit-font-smoothing: antialiased;
-		display: inline-block;
-		font-style: normal;
-		font-variant: normal;
-		text-rendering: auto;
-		line-height: 1;
-		text-transform: none !important;
-
-		@if ($category == brands) {
-			font-family: 'Font Awesome 5 Brands';
-		}
-		@elseif ($category == solid) {
-			font-family: 'Font Awesome 5 Free';
-			font-weight: 900;
-		}
-		@else {
-			font-family: 'Font Awesome 5 Free';
-			font-weight: 400;
-		}
-
-	}
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    line-height: 1;
+    text-transform: none !important;
 
+    @if ($category == brands) {
+      font-family: "Font Awesome 5 Brands";
+    }
+    @elseif ($category == solid) {
+      font-family: "Font Awesome 5 Free";
+      font-weight: 900;
+    } @else {
+      font-family: "Font Awesome 5 Free";
+      font-weight: 400;
+    }
+  }
 }
 
 /// Applies padding to an element, taking the current element-margin value into account.
@@ -42,37 +37,34 @@
 /// @param {mixed} $lr Left/right padding.
 /// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
 /// @param {bool} $important If true, adds !important.
-@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
+@mixin padding($tb, $lr, $pad: (0, 0, 0, 0), $important: null) {
+  @if $important {
+    $important: "!important";
+  }
 
-	@if $important {
-		$important: '!important';
-	}
+  $x: 0.1em;
 
-	$x: 0.1em;
-
-	@if unit(_size(element-margin)) == 'rem' {
-		$x: 0.1rem;
-	}
-
-	padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
+  @if unit(_size(element-margin)) == "rem" {
+    $x: 0.1rem;
+  }
 
+  padding: ($tb + nth($pad, 1)) ($lr + nth($pad, 2))
+    max($x, $tb - _size(element-margin) + nth($pad, 3)) ($lr + nth($pad, 4)) #{$important};
 }
 
 /// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
 /// @param {string} $svg SVG data URL.
 /// @return {string} Encoded SVG data URL.
 @function svg-url($svg) {
+  $svg: str-replace($svg, '"', "'");
+  $svg: str-replace($svg, "%", "%25");
+  $svg: str-replace($svg, "<", "%3C");
+  $svg: str-replace($svg, ">", "%3E");
+  $svg: str-replace($svg, "&", "%26");
+  $svg: str-replace($svg, "#", "%23");
+  $svg: str-replace($svg, "{", "%7B");
+  $svg: str-replace($svg, "}", "%7D");
+  $svg: str-replace($svg, ";", "%3B");
 
-	$svg: str-replace($svg, '"', '\'');
-	$svg: str-replace($svg, '%', '%25');
-	$svg: str-replace($svg, '<', '%3C');
-	$svg: str-replace($svg, '>', '%3E');
-	$svg: str-replace($svg, '&', '%26');
-	$svg: str-replace($svg, '#', '%23');
-	$svg: str-replace($svg, '{', '%7B');
-	$svg: str-replace($svg, '}', '%7D');
-	$svg: str-replace($svg, ';', '%3B');
-
-	@return url("data:image/svg+xml;charset=utf8,#{$svg}");
-
-}
+  @return url("data:image/svg+xml;charset=utf8,#{$svg}");
+}

docs/assets/sass/libs/_vars.scss

@@ -1,59 +1,64 @@
 // Misc.
-	$misc: (
-		z-index-base:		10000
-	);
+$misc: (
+  z-index-base: 10000,
+);
 
 // Duration.
-	$duration: (
-		transition:			0.2s
-	);
+$duration: (
+  transition: 0.2s,
+);
 
 // Size.
-	$size: (
-		border-radius:		0.35em,
-		element-height:		2.75em,
-		element-margin:		2em,
-		container-width:	100%
-	);
+$size: (
+  border-radius: 0.35em,
+  element-height: 2.75em,
+  element-margin: 2em,
+  container-width: 100%,
+);
 
 // Font.
-	$font: (
-		family:				('Source Sans Pro', Helvetica, sans-serif),
-		family-fixed:		('Courier New', monospace),
-		weight:				400,
-		weight-bold:		400
-	);
+$font: (
+  family: (
+    "Source Sans Pro",
+    Helvetica,
+    sans-serif,
+  ),
+  family-fixed: (
+    "Courier New",
+    monospace,
+  ),
+  weight: 400,
+  weight-bold: 400,
+);
 
 // Palette.
-	$palette: (
-		bg:					#fff,
-		fg:					#a2a2a2,
-		fg-bold:			#787878,
-		fg-light:			#b2b2b2,
-		border:				#efefef,
-		border-bg:			#f7f7f7,
-		border2:			#dfdfdf,
-		border2-bg:			#e7e7e7,
-
-		accent1: (
-			bg:				#49bf9d,
-			fg:				mix(#49bf9d, #ffffff, 25%),
-			fg-bold:		#ffffff,
-			fg-light:		mix(#49bf9d, #ffffff, 40%),
-			border:			rgba(255,255,255,0.25),
-			border-bg:		rgba(255,255,255,0.075),
-			border2:		rgba(255,255,255,0.5),
-			border2-bg:		rgba(255,255,255,0.2)
-		),
-
-		accent2: (
-			bg:				#1f1815,
-			fg:				rgba(255,255,255,0.5),
-			fg-bold:		#ffffff,
-			fg-light:		rgba(255,255,255,0.4),
-			border:			rgba(255,255,255,0.25),
-			border-bg:		rgba(255,255,255,0.075),
-			border2:		rgba(255,255,255,0.5),
-			border2-bg:		rgba(255,255,255,0.2)
-		)
-	);
+$palette: (
+  bg: #fff,
+  fg: #a2a2a2,
+  fg-bold: #787878,
+  fg-light: #b2b2b2,
+  border: #efefef,
+  border-bg: #f7f7f7,
+  border2: #dfdfdf,
+  border2-bg: #e7e7e7,
+  accent1: (
+    bg: #49bf9d,
+    fg: mix(#49bf9d, #ffffff, 25%),
+    fg-bold: #ffffff,
+    fg-light: mix(#49bf9d, #ffffff, 40%),
+    border: rgba(255, 255, 255, 0.25),
+    border-bg: rgba(255, 255, 255, 0.075),
+    border2: rgba(255, 255, 255, 0.5),
+    border2-bg: rgba(255, 255, 255, 0.2),
+  ),
+  accent2: (
+    bg: #1f1815,
+    fg: rgba(255, 255, 255, 0.5),
+    fg-bold: #ffffff,
+    fg-light: rgba(255, 255, 255, 0.4),
+    border: rgba(255, 255, 255, 0.25),
+    border-bg: rgba(255, 255, 255, 0.075),
+    border2: rgba(255, 255, 255, 0.5),
+    border2-bg: rgba(255, 255, 255, 0.2),
+  ),
+);

docs/assets/sass/libs/_vendor.scss

@@ -2,375 +2,323 @@
 
 // Vars.
 
-	/// Vendor prefixes.
-	/// @var {list}
-	$vendor-prefixes: (
-		'-moz-',
-		'-webkit-',
-		'-ms-',
-		''
-	);
+/// Vendor prefixes.
+/// @var {list}
+$vendor-prefixes: ("-moz-", "-webkit-", "-ms-", "");
 
-	/// Properties that should be vendorized.
-	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
-	/// @var {list}
-	$vendor-properties: (
+/// Properties that should be vendorized.
+/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+/// @var {list}
+$vendor-properties: (
+  // Animation.
+  "animation",
+  "animation-delay",
+  "animation-direction",
+  "animation-duration",
+  "animation-fill-mode",
+  "animation-iteration-count",
+  "animation-name",
+  "animation-play-state",
+  "animation-timing-function",
+  // Appearance.
+  "appearance",
+  // Backdrop filter.
+  "backdrop-filter",
+  // Background image options.
+  "background-clip",
+  "background-origin",
+  "background-size",
+  // Box sizing.
+  "box-sizing",
+  // Clip path.
+  "clip-path",
+  // Filter effects.
+  "filter",
+  // Flexbox.
+  "align-content",
+  "align-items",
+  "align-self",
+  "flex",
+  "flex-basis",
+  "flex-direction",
+  "flex-flow",
+  "flex-grow",
+  "flex-shrink",
+  "flex-wrap",
+  "justify-content",
+  "order",
+  // Font feature.
+  "font-feature-settings",
+  "font-language-override",
+  "font-variant-ligatures",
+  // Font kerning.
+  "font-kerning",
+  // Fragmented borders and backgrounds.
+  "box-decoration-break",
+  // Grid layout.
+  "grid-column",
+  "grid-column-align",
+  "grid-column-end",
+  "grid-column-start",
+  "grid-row",
+  "grid-row-align",
+  "grid-row-end",
+  "grid-row-start",
+  "grid-template-columns",
+  "grid-template-rows",
+  // Hyphens.
+  "hyphens",
+  "word-break",
+  // Masks.
+  "mask",
+  "mask-border",
+  "mask-border-outset",
+  "mask-border-repeat",
+  "mask-border-slice",
+  "mask-border-source",
+  "mask-border-width",
+  "mask-clip",
+  "mask-composite",
+  "mask-image",
+  "mask-origin",
+  "mask-position",
+  "mask-repeat",
+  "mask-size",
+  // Multicolumn.
+  "break-after",
+  "break-before",
+  "break-inside",
+  "column-count",
+  "column-fill",
+  "column-gap",
+  "column-rule",
+  "column-rule-color",
+  "column-rule-style",
+  "column-rule-width",
+  "column-span",
+  "column-width",
+  "columns",
+  // Object fit.
+  "object-fit",
+  "object-position",
+  // Regions.
+  "flow-from",
+  "flow-into",
+  "region-fragment",
+  // Scroll snap points.
+  "scroll-snap-coordinate",
+  "scroll-snap-destination",
+  "scroll-snap-points-x",
+  "scroll-snap-points-y",
+  "scroll-snap-type",
+  // Shapes.
+  "shape-image-threshold",
+  "shape-margin",
+  "shape-outside",
+  // Tab size.
+  "tab-size",
+  // Text align last.
+  "text-align-last",
+  // Text decoration.
+  "text-decoration-color",
+  "text-decoration-line",
+  "text-decoration-skip",
+  "text-decoration-style",
+  // Text emphasis.
+  "text-emphasis",
+  "text-emphasis-color",
+  "text-emphasis-position",
+  "text-emphasis-style",
+  // Text size adjust.
+  "text-size-adjust",
+  // Text spacing.
+  "text-spacing",
+  // Transform.
+  "transform",
+  "transform-origin",
+  // Transform 3D.
+  "backface-visibility",
+  "perspective",
+  "perspective-origin",
+  "transform-style",
+  // Transition.
+  "transition",
+  "transition-delay",
+  "transition-duration",
+  "transition-property",
+  "transition-timing-function",
+  // Unicode bidi.
+  "unicode-bidi",
+  // User select.
+  "user-select",
+  // Writing mode.
+  "writing-mode"
+);
 
-		// Animation.
-			'animation',
-			'animation-delay',
-			'animation-direction',
-			'animation-duration',
-			'animation-fill-mode',
-			'animation-iteration-count',
-			'animation-name',
-			'animation-play-state',
-			'animation-timing-function',
-
-		// Appearance.
-			'appearance',
-
-		// Backdrop filter.
-			'backdrop-filter',
-
-		// Background image options.
-			'background-clip',
-			'background-origin',
-			'background-size',
-
-		// Box sizing.
-			'box-sizing',
-
-		// Clip path.
-			'clip-path',
-
-		// Filter effects.
-			'filter',
-
-		// Flexbox.
-			'align-content',
-			'align-items',
-			'align-self',
-			'flex',
-			'flex-basis',
-			'flex-direction',
-			'flex-flow',
-			'flex-grow',
-			'flex-shrink',
-			'flex-wrap',
-			'justify-content',
-			'order',
-
-		// Font feature.
-			'font-feature-settings',
-			'font-language-override',
-			'font-variant-ligatures',
-
-		// Font kerning.
-			'font-kerning',
-
-		// Fragmented borders and backgrounds.
-			'box-decoration-break',
-
-		// Grid layout.
-			'grid-column',
-			'grid-column-align',
-			'grid-column-end',
-			'grid-column-start',
-			'grid-row',
-			'grid-row-align',
-			'grid-row-end',
-			'grid-row-start',
-			'grid-template-columns',
-			'grid-template-rows',
-
-		// Hyphens.
-			'hyphens',
-			'word-break',
-
-		// Masks.
-			'mask',
-			'mask-border',
-			'mask-border-outset',
-			'mask-border-repeat',
-			'mask-border-slice',
-			'mask-border-source',
-			'mask-border-width',
-			'mask-clip',
-			'mask-composite',
-			'mask-image',
-			'mask-origin',
-			'mask-position',
-			'mask-repeat',
-			'mask-size',
-
-		// Multicolumn.
-			'break-after',
-			'break-before',
-			'break-inside',
-			'column-count',
-			'column-fill',
-			'column-gap',
-			'column-rule',
-			'column-rule-color',
-			'column-rule-style',
-			'column-rule-width',
-			'column-span',
-			'column-width',
-			'columns',
-
-		// Object fit.
-			'object-fit',
-			'object-position',
-
-		// Regions.
-			'flow-from',
-			'flow-into',
-			'region-fragment',
-
-		// Scroll snap points.
-			'scroll-snap-coordinate',
-			'scroll-snap-destination',
-			'scroll-snap-points-x',
-			'scroll-snap-points-y',
-			'scroll-snap-type',
-
-		// Shapes.
-			'shape-image-threshold',
-			'shape-margin',
-			'shape-outside',
-
-		// Tab size.
-			'tab-size',
-
-		// Text align last.
-			'text-align-last',
-
-		// Text decoration.
-			'text-decoration-color',
-			'text-decoration-line',
-			'text-decoration-skip',
-			'text-decoration-style',
-
-		// Text emphasis.
-			'text-emphasis',
-			'text-emphasis-color',
-			'text-emphasis-position',
-			'text-emphasis-style',
-
-		// Text size adjust.
-			'text-size-adjust',
-
-		// Text spacing.
-			'text-spacing',
-
-		// Transform.
-			'transform',
-			'transform-origin',
-
-		// Transform 3D.
-			'backface-visibility',
-			'perspective',
-			'perspective-origin',
-			'transform-style',
-
-		// Transition.
-			'transition',
-			'transition-delay',
-			'transition-duration',
-			'transition-property',
-			'transition-timing-function',
-
-		// Unicode bidi.
-			'unicode-bidi',
-
-		// User select.
-			'user-select',
-
-		// Writing mode.
-			'writing-mode',
-
-	);
-
-	/// Values that should be vendorized.
-	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
-	/// @var {list}
-	$vendor-values: (
-
-		// Cross fade.
-			'cross-fade',
-
-		// Element function.
-			'element',
-
-		// Filter function.
-			'filter',
-
-		// Flexbox.
-			'flex',
-			'inline-flex',
-
-		// Grab cursors.
-			'grab',
-			'grabbing',
-
-		// Gradients.
-			'linear-gradient',
-			'repeating-linear-gradient',
-			'radial-gradient',
-			'repeating-radial-gradient',
-
-		// Grid layout.
-			'grid',
-			'inline-grid',
-
-		// Image set.
-			'image-set',
-
-		// Intrinsic width.
-			'max-content',
-			'min-content',
-			'fit-content',
-			'fill',
-			'fill-available',
-			'stretch',
-
-		// Sticky position.
-			'sticky',
-
-		// Transform.
-			'transform',
-
-		// Zoom cursors.
-			'zoom-in',
-			'zoom-out',
-
-	);
+/// Values that should be vendorized.
+/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+/// @var {list}
+$vendor-values: (
+  // Cross fade.
+  "cross-fade",
+  // Element function.
+  "element",
+  // Filter function.
+  "filter",
+  // Flexbox.
+  "flex",
+  "inline-flex",
+  // Grab cursors.
+  "grab",
+  "grabbing",
+  // Gradients.
+  "linear-gradient",
+  "repeating-linear-gradient",
+  "radial-gradient",
+  "repeating-radial-gradient",
+  // Grid layout.
+  "grid",
+  "inline-grid",
+  // Image set.
+  "image-set",
+  // Intrinsic width.
+  "max-content",
+  "min-content",
+  "fit-content",
+  "fill",
+  "fill-available",
+  "stretch",
+  // Sticky position.
+  "sticky",
+  // Transform.
+  "transform",
+  // Zoom cursors.
+  "zoom-in",
+  "zoom-out"
+);
 
 // Functions.
 
-	/// Removes a specific item from a list.
-	/// @author Hugo Giraudel
-	/// @param {list} $list List.
-	/// @param {integer} $index Index.
-	/// @return {list} Updated list.
-	@function remove-nth($list, $index) {
+/// Removes a specific item from a list.
+/// @author Hugo Giraudel
+/// @param {list} $list List.
+/// @param {integer} $index Index.
+/// @return {list} Updated list.
+@function remove-nth($list, $index) {
+  $result: null;
 
-		$result: null;
+  @if type-of($index) != number {
+    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+  } @else if $index == 0 {
+    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+  } @else if abs($index) > length($list) {
+    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+  } @else {
+    $result: ();
+    $index: if($index < 0, length($list) + $index + 1, $index);
 
-		@if type-of($index) != number {
-			@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
-		}
-		@else if $index == 0 {
-			@warn "List index 0 must be a non-zero integer for `remove-nth`.";
-		}
-		@else if abs($index) > length($list) {
-			@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
-		}
-		@else {
+    @for $i from 1 through length($list) {
+      @if $i != $index {
+        $result: append($result, nth($list, $i));
+      }
+    }
+  }
 
-			$result: ();
-			$index: if($index < 0, length($list) + $index + 1, $index);
+  @return $result;
+}
 
-			@for $i from 1 through length($list) {
+/// Replaces a substring within another string.
+/// @author Hugo Giraudel
+/// @param {string} $string String.
+/// @param {string} $search Substring.
+/// @param {string} $replace Replacement.
+/// @return {string} Updated string.
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
 
-				@if $i != $index {
-					$result: append($result, nth($list, $i));
-				}
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
 
-			}
+  @return $string;
+}
 
-		}
+/// Replaces a substring within each string in a list.
+/// @param {list} $strings List of strings.
+/// @param {string} $search Substring.
+/// @param {string} $replace Replacement.
+/// @return {list} Updated list of strings.
+@function str-replace-all($strings, $search, $replace: "") {
+  @each $string in $strings {
+    $strings: set-nth(
+      $strings,
+      index($strings, $string),
+      str-replace($string, $search, $replace)
+    );
+  }
 
-		@return $result;
-
-	}
-
-	/// Replaces a substring within another string.
-	/// @author Hugo Giraudel
-	/// @param {string} $string String.
-	/// @param {string} $search Substring.
-	/// @param {string} $replace Replacement.
-	/// @return {string} Updated string.
-	@function str-replace($string, $search, $replace: '') {
-
-		$index: str-index($string, $search);
-
-		@if $index {
-			@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-		}
-
-		@return $string;
-
-	}
-
-	/// Replaces a substring within each string in a list.
-	/// @param {list} $strings List of strings.
-	/// @param {string} $search Substring.
-	/// @param {string} $replace Replacement.
-	/// @return {list} Updated list of strings.
-	@function str-replace-all($strings, $search, $replace: '') {
-
-		@each $string in $strings {
-			$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
-		}
-
-		@return $strings;
-
-	}
+  @return $strings;
+}
 
 // Mixins.
 
-	/// Wraps @content in vendorized keyframe blocks.
-	/// @param {string} $name Name.
-	@mixin keyframes($name) {
+/// Wraps @content in vendorized keyframe blocks.
+/// @param {string} $name Name.
+@mixin keyframes($name) {
+  @-moz-keyframes #{$name} {
+    @content;
+  }
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+  @-ms-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
+}
 
-		@-moz-keyframes #{$name} { @content; }
-		@-webkit-keyframes #{$name} { @content; }
-		@-ms-keyframes #{$name} { @content; }
-		@keyframes #{$name} { @content; }
+/// Vendorizes a declaration's property and/or value(s).
+/// @param {string} $property Property.
+/// @param {mixed} $value String/list of value(s).
+@mixin vendor($property, $value) {
+  // Determine if property should expand.
+  $expandProperty: index($vendor-properties, $property);
 
-	}
+  // Determine if value should expand (and if so, add '-prefix-' placeholder).
+  $expandValue: false;
 
-	/// Vendorizes a declaration's property and/or value(s).
-	/// @param {string} $property Property.
-	/// @param {mixed} $value String/list of value(s).
-	@mixin vendor($property, $value) {
+  @each $x in $value {
+    @each $y in $vendor-values {
+      @if $y == str-slice($x, 1, str-length($y)) {
+        $value: set-nth($value, index($value, $x), "-prefix-" + $x);
+        $expandValue: true;
+      }
+    }
+  }
 
-		// Determine if property should expand.
-			$expandProperty: index($vendor-properties, $property);
+  // Expand property?
+  @if $expandProperty {
+    @each $vendor in $vendor-prefixes {
+      #{$vendor}#{$property}: #{str-replace-all($value, "-prefix-", $vendor)};
+    }
+  }
 
-		// Determine if value should expand (and if so, add '-prefix-' placeholder).
-			$expandValue: false;
+  // Expand just the value?
+  @elseif $expandValue {
+    @each $vendor in $vendor-prefixes {
+      #{$property}: #{str-replace-all($value, "-prefix-", $vendor)};
+    }
+  }
 
-			@each $x in $value {
-				@each $y in $vendor-values {
-					@if $y == str-slice($x, 1, str-length($y)) {
-
-						$value: set-nth($value, index($value, $x), '-prefix-' + $x);
-						$expandValue: true;
-
-					}
-				}
-			}
-
-		// Expand property?
-			@if $expandProperty {
-			    @each $vendor in $vendor-prefixes {
-			        #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
-			    }
-			}
-
-		// Expand just the value?
-			@elseif $expandValue {
-			    @each $vendor in $vendor-prefixes {
-			        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
-			    }
-			}
-
-		// Neither? Treat them as a normal declaration.
-			@else {
-		        #{$property}: #{$value};
-			}
-
-	}
+  // Neither? Treat them as a normal declaration.
+  @else {
+    #{$property}: #{$value};
+  }
+}

docs/index.html

@@ -23,7 +23,7 @@
         /></a>
         <h1>
           <strong>MS Office - Electron</strong><br />
-		  Free Office Online Desktop Client
+          Free Office Online Desktop Client
         </h1>
       </div>
     </header>
@@ -34,37 +34,47 @@
       <section id="one">
         <header class="major">
           <h2>
-			An Unofficial Microsoft Office Online Desktop Client made with Electron. Free of Cost.
+            An Unofficial Microsoft Office Online Desktop Client made with
+            Electron. Free of Cost.
           </h2>
         </header>
         <p>
-			<img
-			src="images/Mac_Screenshot.png"
-			alt=""
-			width="500"
-			height="auto"
-			class="floatright"
-		  />
-          MS Office - Electron is an app in which the Web Version of
-          MS Office is wrapped into a Cross-Platform App with Electron.
-          And all the Services of Microsoft Office will work for free. It is available for Windows, Mac OS, and Linux!
-          If you like the project, do not forget to give a "<i
-            class="far fa-star"
-          ></i>
+          <img
+            src="images/Mac_Screenshot.png"
+            alt=""
+            width="500"
+            height="auto"
+            class="floatright"
+          />
+          MS Office - Electron is an app in which the Web Version of MS Office
+          is wrapped into a Cross-Platform App with Electron. And all the
+          Services of Microsoft Office will work for free. It is available for
+          Windows, Mac OS, and Linux! If you like the project, do not forget to
+          give a "<i class="far fa-star"></i>
           Star" to the project :D
         </p>
         <h2>Download Now:</h2>
         <ul class="actions">
           <li>
-            <a href="https://github.com/agam778/MS-Office-Electron#-windows-installation" class="button"
+            <a
+              href="https://github.com/agam778/MS-Office-Electron#-windows-installation"
+              class="button"
               ><i class="fab fa-windows"></i> Windows</a
             >
           </li>
           <li>
-            <a href="https://github.com/agam778/MS-Office-Electron#-macos-installation" class="button"><i class="fab fa-apple"></i> Mac OS</a>
+            <a
+              href="https://github.com/agam778/MS-Office-Electron#-macos-installation"
+              class="button"
+              ><i class="fab fa-apple"></i> Mac OS</a
+            >
           </li>
           <li>
-            <a href="https://github.com/agam778/MS-Office-Electron#-linux-installation" class="button"><i class="fab fa-linux"></i> Linux</a>
+            <a
+              href="https://github.com/agam778/MS-Office-Electron#-linux-installation"
+              class="button"
+              ><i class="fab fa-linux"></i> Linux</a
+            >
           </li>
         </ul>
       </section>
@@ -75,7 +85,9 @@
       <div class="inner">
         <ul class="icons">
           <li>
-            <a href="https://github.com/agam778/MS-Office-Electron" class="icon brands fa-github"
+            <a
+              href="https://github.com/agam778/MS-Office-Electron"
+              class="icon brands fa-github"
               ><span class="label">Github</span></a
             >
           </li>

docs/loading/index.html

@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>Loading MS Office - Electron</title>
-  <meta http-equiv="refresh" content="5; url=https://office.com/?auth=1">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-<link rel="stylesheet" href="./style.css">
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Loading MS Office - Electron</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
+    />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="loader"></div>
+    <div class="shadow"></div>
 
-</head>
-<body>
-<div class="loader"></div>
-<div class="shadow"></div>
-
-<div class="logo">
-	<a href="https://github.com/agam778/MS-Office-Electron" target="_blank"><img src="https://raw.githubusercontent.com/agam778/MS-Office-Electron/main/MSlogo.svg" alt="MS Office - Electron"></a>
-</div>
-  
-</body>
+    <div class="logo">
+      <a href="https://github.com/agam778/MS-Office-Electron" target="_blank"
+        ><img
+          src="https://raw.githubusercontent.com/agam778/MS-Office-Electron/main/MSlogo.svg"
+          alt="MS Office - Electron"
+      /></a>
+    </div>
+  </body>
 </html>

docs/loading/style.css

@@ -1,246 +1,248 @@
 @-webkit-keyframes mainAnimation {
-    0% {
-      width: 50px;
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    20% {
-      width: 50px;
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    40% {
-      width: 150px;
-      transform: translateX(-50px) translateY(0px) rotate(0deg);
-    }
-    60% {
-      width: 150px;
-      transform-origin: bottom right;
-      transform: translateX(-150px) translateY(0px) rotate(90deg);
-    }
-    80% {
-      width: 50px;
-      transform: translateX(-25px) translateY(0px) rotate(90deg);
-    }
-    100% {
-      width: 50px;
-      transform: translateX(-50px) translateY(0px) rotate(90deg);
-    }
-  }
-  @keyframes mainAnimation {
-    0% {
-      width: 50px;
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    20% {
-      width: 50px;
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    40% {
-      width: 150px;
-      transform: translateX(-50px) translateY(0px) rotate(0deg);
-    }
-    60% {
-      width: 150px;
-      transform-origin: bottom right;
-      transform: translateX(-150px) translateY(0px) rotate(90deg);
-    }
-    80% {
-      width: 50px;
-      transform: translateX(-25px) translateY(0px) rotate(90deg);
-    }
-    100% {
-      width: 50px;
-      transform: translateX(-50px) translateY(0px) rotate(90deg);
-    }
-  }
-  @-webkit-keyframes secundaryAnimation {
-    0% {
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    20% {
-      transform: translateX(0px) translateY(0px) rotate(180deg);
-    }
-    40% {
-      transform: translateX(0px) translateY(0px) rotate(180deg);
-    }
-    60% {
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    80% {
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    100% {
-      transform: translateX(0px) translateY(0px) rotate(180deg);
-    }
-  }
-  @keyframes secundaryAnimation {
-    0% {
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    20% {
-      transform: translateX(0px) translateY(0px) rotate(180deg);
-    }
-    40% {
-      transform: translateX(0px) translateY(0px) rotate(180deg);
-    }
-    60% {
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    80% {
-      transform: translateX(0px) translateY(0px) rotate(0deg);
-    }
-    100% {
-      transform: translateX(0px) translateY(0px) rotate(180deg);
-    }
-  }
-  @-webkit-keyframes shadowAnimation {
-    0% {
-      width: 150px;
-      transform: translateX(-25px) translateY(0px) rotate(0deg);
-    }
-    20% {
-      width: 75px;
-      transform: translateX(37.5px) translateY(0px) rotate(0deg);
-    }
-    40% {
-      width: 200px;
-      transform: translateX(-25px) translateY(0px) rotate(0deg);
-    }
-    60% {
-      width: 75px;
-      transform: translateX(37.5px) translateY(0px) rotate(0deg);
-    }
-    80% {
-      width: 75px;
-      transform: translateX(37.5px) translateY(0px) rotate(0deg);
-    }
-    100% {
-      width: 150px;
-      transform: translateX(-25px) translateY(0px) rotate(0deg);
-    }
-  }
-  @keyframes shadowAnimation {
-    0% {
-      width: 150px;
-      transform: translateX(-25px) translateY(0px) rotate(0deg);
-    }
-    20% {
-      width: 75px;
-      transform: translateX(37.5px) translateY(0px) rotate(0deg);
-    }
-    40% {
-      width: 200px;
-      transform: translateX(-25px) translateY(0px) rotate(0deg);
-    }
-    60% {
-      width: 75px;
-      transform: translateX(37.5px) translateY(0px) rotate(0deg);
-    }
-    80% {
-      width: 75px;
-      transform: translateX(37.5px) translateY(0px) rotate(0deg);
-    }
-    100% {
-      width: 150px;
-      transform: translateX(-25px) translateY(0px) rotate(0deg);
-    }
-  }
-  @-webkit-keyframes float {
-    0% {
-      top: 50%;
-    }
-    50% {
-      top: 51%;
-    }
-    100% {
-      top: 50%;
-    }
-  }
-  @keyframes float {
-    0% {
-      top: 50%;
-    }
-    50% {
-      top: 51%;
-    }
-    100% {
-      top: 50%;
-    }
-  }
-  html, body {
-    height: 100%;
-  }
-  
-  body {
-    position: relative;
-    background: #5684f0;
-    background: linear-gradient(135deg, #5684f0 0%, #fa7587 100%);
-  }
-  
-  .loader {
-    position: absolute;
+  0% {
     width: 50px;
-    height: 50px;
-    top: 50%;
-    left: 50%;
-    margin-top: -25px;
-    margin-left: -25px;
-    background-color: #FFF5A5;
     transform: translateX(0px) translateY(0px) rotate(0deg);
-    -webkit-animation: mainAnimation 2.6s ease 0s infinite forwards;
-            animation: mainAnimation 2.6s ease 0s infinite forwards;
-    z-index: 2;
   }
-  .loader:after {
-    content: "";
-    display: inline-block;
-    position: absolute;
+  20% {
     width: 50px;
-    height: 50px;
-    top: 0;
-    left: -50px;
-    background-color: #FFF5A5;
-    transform-origin: top right;
     transform: translateX(0px) translateY(0px) rotate(0deg);
-    -webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards;
-            animation: secundaryAnimation 2.6s ease 0s infinite forwards;
   }
-  
-  .shadow {
-    position: absolute;
-    width: 100px;
-    height: 10px;
+  40% {
+    width: 150px;
+    transform: translateX(-50px) translateY(0px) rotate(0deg);
+  }
+  60% {
+    width: 150px;
+    transform-origin: bottom right;
+    transform: translateX(-150px) translateY(0px) rotate(90deg);
+  }
+  80% {
+    width: 50px;
+    transform: translateX(-25px) translateY(0px) rotate(90deg);
+  }
+  100% {
+    width: 50px;
+    transform: translateX(-50px) translateY(0px) rotate(90deg);
+  }
+}
+@keyframes mainAnimation {
+  0% {
+    width: 50px;
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  20% {
+    width: 50px;
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  40% {
+    width: 150px;
+    transform: translateX(-50px) translateY(0px) rotate(0deg);
+  }
+  60% {
+    width: 150px;
+    transform-origin: bottom right;
+    transform: translateX(-150px) translateY(0px) rotate(90deg);
+  }
+  80% {
+    width: 50px;
+    transform: translateX(-25px) translateY(0px) rotate(90deg);
+  }
+  100% {
+    width: 50px;
+    transform: translateX(-50px) translateY(0px) rotate(90deg);
+  }
+}
+@-webkit-keyframes secundaryAnimation {
+  0% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  20% {
+    transform: translateX(0px) translateY(0px) rotate(180deg);
+  }
+  40% {
+    transform: translateX(0px) translateY(0px) rotate(180deg);
+  }
+  60% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  80% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  100% {
+    transform: translateX(0px) translateY(0px) rotate(180deg);
+  }
+}
+@keyframes secundaryAnimation {
+  0% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  20% {
+    transform: translateX(0px) translateY(0px) rotate(180deg);
+  }
+  40% {
+    transform: translateX(0px) translateY(0px) rotate(180deg);
+  }
+  60% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  80% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  100% {
+    transform: translateX(0px) translateY(0px) rotate(180deg);
+  }
+}
+@-webkit-keyframes shadowAnimation {
+  0% {
+    width: 150px;
+    transform: translateX(-25px) translateY(0px) rotate(0deg);
+  }
+  20% {
+    width: 75px;
+    transform: translateX(37.5px) translateY(0px) rotate(0deg);
+  }
+  40% {
+    width: 200px;
+    transform: translateX(-25px) translateY(0px) rotate(0deg);
+  }
+  60% {
+    width: 75px;
+    transform: translateX(37.5px) translateY(0px) rotate(0deg);
+  }
+  80% {
+    width: 75px;
+    transform: translateX(37.5px) translateY(0px) rotate(0deg);
+  }
+  100% {
+    width: 150px;
+    transform: translateX(-25px) translateY(0px) rotate(0deg);
+  }
+}
+@keyframes shadowAnimation {
+  0% {
+    width: 150px;
+    transform: translateX(-25px) translateY(0px) rotate(0deg);
+  }
+  20% {
+    width: 75px;
+    transform: translateX(37.5px) translateY(0px) rotate(0deg);
+  }
+  40% {
+    width: 200px;
+    transform: translateX(-25px) translateY(0px) rotate(0deg);
+  }
+  60% {
+    width: 75px;
+    transform: translateX(37.5px) translateY(0px) rotate(0deg);
+  }
+  80% {
+    width: 75px;
+    transform: translateX(37.5px) translateY(0px) rotate(0deg);
+  }
+  100% {
+    width: 150px;
+    transform: translateX(-25px) translateY(0px) rotate(0deg);
+  }
+}
+@-webkit-keyframes float {
+  0% {
     top: 50%;
-    left: 50%;
-    margin-top: 50px;
-    margin-left: -75px;
-    border-radius: 50%;
-    background-color: #95a5a6;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-    -webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;
-            animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;
-    filter: blur(5px);
-    z-index: 1;
   }
-  
-  .logo {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    width: 42px;
-    height: 42px;
-    padding: 12px 5px;
-    margin-left: -21px;
-    box-sizing: border-box;
-    background-color: white;
-    border-radius: 50%;
-    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  50% {
+    top: 51%;
   }
-  .logo:hover {
-    transform: scale(1.4);
+  100% {
+    top: 50%;
   }
-  .logo img {
-    width: 100%;
-    height: auto;
-    margin: 0 auto;
+}
+@keyframes float {
+  0% {
+    top: 50%;
   }
-  
+  50% {
+    top: 51%;
+  }
+  100% {
+    top: 50%;
+  }
+}
+html,
+body {
+  height: 100%;
+}
+
+body {
+  position: relative;
+  background: #5684f0;
+  background: linear-gradient(135deg, #5684f0 0%, #fa7587 100%);
+}
+
+.loader {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  top: 50%;
+  left: 50%;
+  margin-top: -25px;
+  margin-left: -25px;
+  background-color: #fff5a5;
+  transform: translateX(0px) translateY(0px) rotate(0deg);
+  -webkit-animation: mainAnimation 2.6s ease 0s infinite forwards;
+  animation: mainAnimation 2.6s ease 0s infinite forwards;
+  z-index: 2;
+}
+.loader:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  top: 0;
+  left: -50px;
+  background-color: #fff5a5;
+  transform-origin: top right;
+  transform: translateX(0px) translateY(0px) rotate(0deg);
+  -webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards;
+  animation: secundaryAnimation 2.6s ease 0s infinite forwards;
+}
+
+.shadow {
+  position: absolute;
+  width: 100px;
+  height: 10px;
+  top: 50%;
+  left: 50%;
+  margin-top: 50px;
+  margin-left: -75px;
+  border-radius: 50%;
+  background-color: #95a5a6;
+  transform: translateX(0px) translateY(0px) rotate(0deg);
+  -webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards,
+    float 5s ease-in-out 0s infinite forwards;
+  animation: shadowAnimation 2.6s ease 0s infinite forwards,
+    float 5s ease-in-out 0s infinite forwards;
+  filter: blur(5px);
+  z-index: 1;
+}
+
+.logo {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  width: 42px;
+  height: 42px;
+  padding: 12px 5px;
+  margin-left: -21px;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.logo:hover {
+  transform: scale(1.4);
+}
+.logo img {
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+}

main.js

@@ -1,237 +1,473 @@
-const { app, Menu, BrowserWindow, dialog, shell } = require("electron");
-const { autoUpdater } = require("electron-updater");
-const isMac = process.platform === "darwin";
-const openAboutWindow = require("about-window").default;
-const isOnline = require("is-online");
-
-const ElectronDl = require("electron-dl");
-const contextMenu = require("electron-context-menu");
-
-const log = require("electron-log");
-log.transports.file.level = "verbose";
-console.log = log.log;
-
-ElectronDl({
-  dlPath: "./downloads",
-  onStarted: (item) => {
-    dialog.showMessageBox({
-      type: "info",
-      title: "Downloading File",
-      message: `Downloading "${item.getFilename()}" to "${item.getSavePath()}"`,
-      buttons: ["OK"],
-    });
-  },
-  onCompleted: () => {
-    dialog.showMessageBox({
-      type: "info",
-      title: "Download Completed",
-      message: `Downloading Completed! Please check your "Downloads" folder.`,
-      buttons: ["OK"],
-    });
-  },
-  onError: (item) => {
-    dialog.showMessageBox({
-      type: "error",
-      title: "Download failed",
-      message: `Downloading "${item.getFilename()}" failed :(`,
-      buttons: ["OK"],
-    });
-  },
-});
-
-contextMenu({
-  showInspectElement: false,
-  showServices: false,
-});
-
-const template = [
-  ...(isMac
-    ? [
-        {
-          label: app.name,
-          submenu: [
-            { role: "about" },
-            { type: "separator" },
-            { role: "services" },
-            { type: "separator" },
-            { role: "hide" },
-            { role: "hideothers" },
-            { role: "unhide" },
-            { type: "separator" },
-            { role: "quit" },
-          ],
-        },
-      ]
-    : []),
-  {
-    label: "Application",
-    submenu: [
-      {
-        label: "About MS Office - Electron",
-        click: () =>
-          openAboutWindow({
-            icon_path:
-              "https://github.com/agam778/MS-Office-Electron/blob/main/icon2.png?raw=true",
-            product_name: "MS Office - Electron",
-            copyright: "Copyright (c) 2021 Agampreet Singh Bajaj",
-            package_json_dir: __dirname,
-            bug_report_url:
-              "https://github.com/agam778/Microsoft-Office-Electron/issues/",
-            bug_link_text: "Report an issue",
-            adjust_window_size: "2",
-            show_close_button: "Close",
-          }),
-      },
-      {
-        label: "Learn More",
-        click: async () => {
-          const { shell } = require("electron");
-          await shell.openExternal(
-            "https://github.com/agam778/MS-Office-Electron"
-          );
-        },
-      },
-      {
-        label: "Open Logs Folder",
-        click: async () => {
-          const { shell } = require("electron");
-          if (process.platform === "win32") {
-            await shell.openPath(
-              "C:\\Users\\" +
-                process.env.USERNAME +
-                "\\AppData\\Roaming\\ms-office-electron\\\\logs\\"
-            );
-          } else if (process.platform === "darwin") {
-            await shell.openPath(
-              "/Users/" +
-                process.env.USERNAME +
-                "/Library/Logs/ms-office-electron/"
-            );
-          } else if (process.platform === "linux") {
-            await shell.openPath(
-              "/home/" +
-                process.env.USERNAME +
-                "/.config/ms-office-electron/logs"
-            );
-          }
-        },
-      },
-      { type: "separator" },
-      {
-        role: "quit",
-        accelerator: process.platform === "darwin" ? "Ctrl+Q" : "Ctrl+Q",
-      },
-    ],
-  },
-  {
-    label: "Edit",
-    submenu: [
-      { role: "undo" },
-      { role: "redo" },
-      { type: "separator" },
-      { role: "cut" },
-      { role: "copy" },
-      { role: "paste" },
-      ...(isMac
-        ? [
-            { role: "pasteAndMatchStyle" },
-            { role: "delete" },
-            { role: "selectAll" },
-            { type: "separator" },
-            {
-              label: "Speech",
-              submenu: [{ role: "startSpeaking" }, { role: "stopSpeaking" }],
-            },
-          ]
-        : [{ role: "delete" }, { type: "separator" }, { role: "selectAll" }]),
-    ],
-  },
-  {
-    label: "View",
-    submenu: [
-      { role: "reload" },
-      { role: "forceReload" },
-      { type: "separator" },
-      { role: "resetZoom" },
-      {
-        role: "zoomIn",
-        accelerator: process.platform === "darwin" ? "Control+=" : "Control+=",
-      },
-      { role: "zoomOut" },
-      { type: "separator" },
-      { role: "togglefullscreen" },
-    ],
-  },
-  {
-    label: "Window",
-    submenu: [
-      { role: "minimize" },
-      { role: "zoom" },
-      ...(isMac
-        ? [
-            { type: "separator" },
-            { role: "front" },
-            { type: "separator" },
-            { role: "window" },
-          ]
-        : [{ role: "close" }]),
-    ],
-  },
-];
-
-const menu = Menu.buildFromTemplate(template);
-Menu.setApplicationMenu(menu);
-
-function createWindow() {
-  const win = new BrowserWindow({
-    width: 1181,
-    height: 670,
-    icon: "./icon.png",
-    webPreferences: {
-      nodeIntegration: true,
-      devTools: false,
-    },
-  });
-
-  win.loadURL("https://agam778.github.io/MS-Office-Electron/loading", {
-    userAgent:
-      "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36",
-  });
-}
-
-app.whenReady().then(createWindow);
-
-app.on("window-all-closed", () => {
-  if (process.platform !== "darwin") {
-    app.quit();
-  }
-});
-
-app.on("activate", () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
-  }
-});
-
-app.on("ready", function () {
-  isOnline().then((online) => {
-    if (online) {
-      console.log("You are connected to the internet!");
-    } else {
-      const options = {
-        type: "warning",
-        buttons: ["Ok"],
-        defaultId: 2,
-        title: "Warning",
-        message: "You appear to be offline!",
-        detail:
-          "Please check your Internet Connectivity. This app cannot run without an Internet Connection!",
-      };
-
-      dialog.showMessageBox(null, options, (response) => {
-        console.log(response);
-      });
-    }
-  });
-  autoUpdater.checkForUpdatesAndNotify();
-});
+const { app, Menu, BrowserWindow, dialog, shell } = require("electron");
+const { autoUpdater } = require("electron-updater");
+const isMac = process.platform === "darwin";
+const openAboutWindow = require("about-window").default;
+const isOnline = require("is-online");
+const axios = require("axios");
+const ElectronDl = require("electron-dl");
+const contextMenu = require("electron-context-menu");
+const path = require("path");
+const Store = require("electron-store");
+const store = new Store();
+
+const RPC = require("discord-rpc");
+const clientId = "942637872530460742";
+const rpc = new RPC.Client({ transport: "ipc" });
+
+const log = require("electron-log");
+log.transports.file.level = "verbose";
+console.log = log.log;
+
+ElectronDl({
+  dlPath: "./downloads",
+  onStarted: (item) => {
+    dialog.showMessageBox({
+      type: "info",
+      title: "Downloading File",
+      message: `Downloading "${item.getFilename()}" to "${item.getSavePath()}"`,
+      buttons: ["OK"],
+    });
+  },
+  onCompleted: () => {
+    dialog.showMessageBox({
+      type: "info",
+      title: "Download Completed",
+      message: `Downloading Completed! Please check your "Downloads" folder.`,
+      buttons: ["OK"],
+    });
+  },
+  onError: (item) => {
+    dialog.showMessageBox({
+      type: "error",
+      title: "Download failed",
+      message: `Downloading "${item.getFilename()}" failed :(`,
+      buttons: ["OK"],
+    });
+  },
+});
+
+contextMenu({
+  showInspectElement: false,
+  showServices: false,
+});
+
+const menulayout = [
+  ...(isMac
+    ? [
+        {
+          label: app.name,
+          submenu: [
+            { role: "about" },
+            { type: "separator" },
+            { role: "services" },
+            { type: "separator" },
+            { role: "hide" },
+            { role: "hideothers" },
+            { role: "unhide" },
+            { type: "separator" },
+            { role: "quit" },
+          ],
+        },
+      ]
+    : []),
+  {
+    label: "Application",
+    submenu: [
+      {
+        label: "About MS Office - Electron",
+        click: () =>
+          openAboutWindow({
+            icon_path:
+              "https://github.com/agam778/MS-Office-Electron/blob/main/icon2.png?raw=true",
+            product_name: "MS Office - Electron",
+            copyright: "Copyright (c) 2021 Agampreet Singh Bajaj",
+            package_json_dir: __dirname,
+            bug_report_url:
+              "https://github.com/agam778/Microsoft-Office-Electron/issues/",
+            bug_link_text: "Report an issue",
+            adjust_window_size: "2",
+            show_close_button: "Close",
+          }),
+      },
+      {
+        label: "Check for Updates",
+        click: async () => {
+          axios
+            .get(
+              "https://api.github.com/repos/agam778/MS-Office-Electron/releases/latest"
+            )
+            .then((res) => {
+              let data = res.data;
+              let currentVersion = "v" + app.getVersion();
+              let latestVersion = data.tag_name;
+              if (currentVersion !== latestVersion) {
+                const updatedialog = dialog.showMessageBoxSync({
+                  type: "info",
+                  title: "Update Available",
+                  message: `Your App's version: ${currentVersion}\nLatest version: ${latestVersion}\n\nPlease update to the latest version.`,
+                  buttons: ["Download", "Close"],
+                });
+                if (updatedialog === 0) {
+                  shell.openExternal(
+                    "https://github.com/agam778/MS-Office-Electron/releases/latest"
+                  );
+                }
+              } else {
+                dialog.showMessageBoxSync({
+                  type: "info",
+                  title: "No Update Available",
+                  message: `Your App's version: ${currentVersion}\nLatest version: ${latestVersion}\n\nYou are already using the latest version.`,
+                  buttons: ["OK"],
+                });
+              }
+            });
+        },
+      },
+      {
+        label: "Learn More",
+        click: async () => {
+          const { shell } = require("electron");
+          await shell.openExternal(
+            "https://github.com/agam778/MS-Office-Electron"
+          );
+        },
+      },
+      {
+        label: "Open Logs Folder",
+        click: async () => {
+          const { shell } = require("electron");
+          if (process.platform === "win32") {
+            await shell.openPath(
+              "C:\\Users\\" +
+                process.env.USERNAME +
+                "\\AppData\\Roaming\\ms-office-electron\\\\logs\\"
+            );
+          } else if (process.platform === "darwin") {
+            await shell.openPath(
+              "/Users/" +
+                process.env.USERNAME +
+                "/Library/Logs/ms-office-electron/"
+            );
+          } else if (process.platform === "linux") {
+            await shell.openPath(
+              "/home/" +
+                process.env.USERNAME +
+                "/.config/ms-office-electron/logs"
+            );
+          }
+        },
+      },
+      { type: "separator" },
+      {
+        label: "Open Websites in New Windows (Recommended)",
+        type: "radio",
+        click: () => {
+          store.set("websites-in-new-window", "true");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Websites in New Windows",
+            message:
+              "Websites which are targeted to open in new tabs will now open in new windows.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("websites-in-new-window")
+          ? store.get("websites-in-new-window") === "true"
+          : true,
+      },
+      {
+        label: "Open Websites in the Same Window",
+        type: "radio",
+        click: () => {
+          store.set("websites-in-new-window", "false");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Websites in New Windows",
+            message:
+              "Websites which are targeted to open in new tabs will now open in the same window.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("websites-in-new-window")
+          ? store.get("websites-in-new-window") === "false"
+          : false,
+      },
+      { type: "separator" },
+      {
+        label: "Enable Discord Rich Presence",
+        type: "radio",
+        click: () => {
+          store.set("discordrpcstatus", "true");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Discord Rich Presence",
+            message: "Discord Rich Presence is now enabled.",
+            buttons: ["OK"],
+          });
+          discordrpcupdate(
+            `On "${BrowserWindow.getFocusedWindow().webContents.getTitle()}"`
+          );
+        },
+        checked: store.get("discordrpcstatus")
+          ? store.get("discordrpcstatus") === "true"
+          : true,
+      },
+      {
+        label: "Disable Discord Rich Presence",
+        type: "radio",
+        click: () => {
+          store.set("discordrpcstatus", "false");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Discord Rich Presence",
+            message: "Discord Rich Presence is now disabled.",
+            buttons: ["OK"],
+          });
+          rpc.clearActivity();
+        },
+        checked: store.get("discordrpcstatus")
+          ? store.get("discordrpcstatus") === "false"
+          : false,
+      },
+      { type: "separator" },
+      {
+        role: "quit",
+        accelerator: process.platform === "darwin" ? "Ctrl+Q" : "Ctrl+Q",
+      },
+    ],
+  },
+  {
+    label: "Navigation",
+    submenu: [
+      {
+        label: "Back",
+        click: () => {
+          BrowserWindow.getFocusedWindow().webContents.goBack();
+        },
+      },
+      {
+        label: "Forward",
+        click: () => {
+          BrowserWindow.getFocusedWindow().webContents.goForward();
+        },
+      },
+      {
+        label: "Reload",
+        click: () => {
+          BrowserWindow.getFocusedWindow().webContents.reload();
+        },
+      },
+      {
+        label: "Home",
+        click: () => {
+          BrowserWindow.getFocusedWindow().loadURL(
+            "https://www.office.com/?auth=1"
+          );
+        },
+      },
+    ],
+  },
+  {
+    label: "Edit",
+    submenu: [
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+      ...(isMac
+        ? [
+            { role: "pasteAndMatchStyle" },
+            { role: "delete" },
+            { role: "selectAll" },
+            { type: "separator" },
+            {
+              label: "Speech",
+              submenu: [{ role: "startSpeaking" }, { role: "stopSpeaking" }],
+            },
+          ]
+        : [{ role: "delete" }, { type: "separator" }, { role: "selectAll" }]),
+    ],
+  },
+  {
+    label: "View",
+    submenu: [
+      { role: "reload" },
+      { role: "forceReload" },
+      { type: "separator" },
+      { role: "resetZoom" },
+      {
+        role: "zoomIn",
+        accelerator: process.platform === "darwin" ? "Control+=" : "Control+=",
+      },
+      { role: "zoomOut" },
+      { type: "separator" },
+      { role: "togglefullscreen" },
+    ],
+  },
+  {
+    label: "Window",
+    submenu: [
+      { role: "minimize" },
+      { role: "zoom" },
+      ...(isMac
+        ? [
+            { type: "separator" },
+            { role: "front" },
+            { type: "separator" },
+            { role: "window" },
+          ]
+        : [{ role: "close" }]),
+      {
+        label: "Show Menu Bar",
+        type: "radio",
+        click: () => {
+          store.set("autohide-menubar", "false");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Menu Bar Settings",
+            message:
+              "Menu will be visible now. Please restart the app for changes to take effect.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("autohide-menubar") === "false",
+      },
+      {
+        label: "Hide Menu Bar (Press ALT To show for some time)",
+        type: "radio",
+        click: () => {
+          store.set("autohide-menubar", "true");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Menu Bar Settings",
+            message:
+              "Menu bar will be automatically hidden now. Please restart the app for changes to take effect.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("autohide-menubar") === "true",
+      },
+    ],
+  },
+];
+
+const menu = Menu.buildFromTemplate(menulayout);
+Menu.setApplicationMenu(menu);
+
+function discordrpc(title) {
+  if (store.get("discordrpcstatus") === "true") {
+    rpc.setActivity({
+      details: `${title}`,
+      largeImageKey: "logo",
+      largeImageText: "MS-Office-Electron",
+      startTimestamp: Date.now(),
+      instance: false,
+    });
+  } else {
+    // don't do anything
+  }
+}
+
+function discordrpcupdate(title) {
+  rpc.clearActivity();
+  rpc.setActivity({
+    details: `${title}`,
+    largeImageKey: "logo",
+    largeImageText: "MS-Office-Electron",
+    startTimestamp: Date.now(),
+    instance: false,
+  });
+}
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 1181,
+    height: 670,
+    icon: path.join(__dirname, "/icon.png"),
+    show: false,
+    webPreferences: {
+      nodeIntegration: true,
+      devTools: false,
+    },
+  });
+
+  if (store.get("autohide-menubar") === "true") {
+    win.setAutoHideMenuBar(true);
+  } else {
+    win.setAutoHideMenuBar(false);
+  }
+
+  const splash = new BrowserWindow({
+    width: 810,
+    height: 610,
+    transparent: true,
+    frame: false,
+    alwaysOnTop: true,
+    icon: "./icon.png",
+  });
+
+  splash.loadURL(`https://agam778.github.io/MS-Office-Electron/loading`);
+  win.loadURL("https://office.com/?auth=1", {
+    userAgent:
+      "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36",
+  });
+
+  win.webContents.on("did-finish-load", () => {
+    splash.destroy();
+    win.show();
+    discordrpc(`On "${win.webContents.getTitle()}"`);
+  });
+}
+
+app.on("ready", () => {
+  createWindow();
+});
+
+app.on("web-contents-created", (event, contents) => {
+  contents.on("new-window", (event, url) => {
+    if (store.get("websites-in-new-window") === "false") {
+      event.preventDefault();
+      BrowserWindow.getFocusedWindow().loadURL(url);
+    } else {
+    }
+  });
+});
+
+app.on("window-all-closed", () => {
+  rpc.clearActivity();
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+
+app.on("ready", function () {
+  isOnline().then((online) => {
+    if (online) {
+      console.log("You are connected to the internet!");
+    } else {
+      const options = {
+        type: "warning",
+        buttons: ["Ok"],
+        defaultId: 2,
+        title: "Warning",
+        message: "You appear to be offline!",
+        detail:
+          "Please check your Internet Connectivity. This app cannot run without an Internet Connection!",
+      };
+
+      dialog.showMessageBox(null, options, (response) => {
+        console.log(response);
+      });
+    }
+  });
+  autoUpdater.checkForUpdatesAndNotify();
+  rpc.login({ clientId }).catch((err) => console.error(err));
+});

package.json

@@ -1,88 +1,90 @@
-{
-  "name": "ms-office-electron",
-  "version": "0.4.0",
-  "description": "An Unofficial Microsoft Office Online Desktop Client. Free of Cost.",
-  "main": "main.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/agam778/MS-Office-Electron.git"
-  },
-  "build": {
-    "extraFiles": [
-      "icon.png",
-      "license.txt",
-      "icon2.png"
-    ],
-    "appId": "com.agampreet.ms-office-electron",
-    "productName": "MS-Office-Electron",
-    "linux": {
-      "category": "Office",
-      "desktop": {
-        "Comment": "An Unofficial Microsoft Office Online Desktop Client. Free of Cost.",
-        "Name": "MS Office - Electron",
-        "StartupNotify": "true",
-        "Terminal": "false",
-        "Type": "Application",
-        "Categories": "Office;"
-      },
-      "icon": "icon.png",
-      "artifactName": "ms-office-electron-setup-${version}-${arch}.${ext}",
-      "executableName": "MS-Office-Electron",
-      "maintainer": "Agampreet Singh <agam778@zohomail.in>",
-      "target": [
-        "deb",
-        "rpm",
-        "AppImage"
-      ]
-    },
-    "deb": {
-      "compression": "bzip2"
-    },
-    "mac": {
-      "category": "public.app-category.office",
-      "target": [
-        "dmg"
-      ],
-      "icon": "icon.icns"
-    },
-    "nsis": {
-      "oneClick": false,
-      "perMachine": false,
-      "allowToChangeInstallationDirectory": false,
-      "license": "license.txt",
-      "artifactName": "ms-office-electron-setup-${version}-${arch}.${ext}"
-    },
-    "win": {
-      "target": [
-        "nsis"
-      ],
-      "icon": "icon.ico"
-    },
-    "directories": {
-      "output": "release"
-    }
-  },
-  "scripts": {
-    "start": "electron .",
-    "pack": "electron-builder --dir",
-    "dist": "electron-builder"
-  },
-  "author": {
-    "name": "Agampreet Singh",
-    "email": "agam778@zohomail.in",
-    "url": "https://agam778.is-a.dev/"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "electron": "^15.x.x",
-    "electron-builder": "^22.x.x"
-  },
-  "dependencies": {
-    "about-window": "^1.x.x",
-    "electron-context-menu": "^3.x.x",
-    "electron-dl": "^3.x.x",
-    "electron-log": "^4.4.1",
-    "electron-updater": "^4.x.x",
-    "is-online": "^9.x.x"
-  }
-}
+{
+  "name": "ms-office-electron",
+  "version": "0.5.1",
+  "description": "An Unofficial Microsoft Office Online Desktop Client. Free of Cost.",
+  "main": "main.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agam778/MS-Office-Electron.git"
+  },
+  "build": {
+    "extraFiles": [
+      "icon.png",
+      "LICENSE",
+      "icon2.png"
+    ],
+    "appId": "com.agampreet.ms-office-electron",
+    "productName": "MS-Office-Electron",
+    "artifactName": "MS-Office-Electron-Setup-v${version}-${os}-${arch}.${ext}",
+    "linux": {
+      "category": "Office",
+      "desktop": {
+        "Comment": "An Unofficial Microsoft Office Online Desktop Client. Free of Cost.",
+        "Name": "MS-Office-Electron",
+        "StartupNotify": "true",
+        "Terminal": "false",
+        "Type": "Application",
+        "Categories": "Office;"
+      },
+      "icon": "icon.png",
+      "executableName": "MS-Office-Electron",
+      "maintainer": "Agampreet Singh <agam778@zohomail.in>",
+      "target": [
+        "deb",
+        "rpm",
+        "AppImage"
+      ]
+    },
+    "deb": {
+      "compression": "bzip2"
+    },
+    "mac": {
+      "category": "public.app-category.office",
+      "target": [
+        "dmg"
+      ],
+      "icon": "icon.icns"
+    },
+    "nsis": {
+      "oneClick": false,
+      "perMachine": false,
+      "allowToChangeInstallationDirectory": false,
+      "license": "LICENSE"
+    },
+    "win": {
+      "target": [
+        "nsis"
+      ],
+      "icon": "icon.ico"
+    },
+    "directories": {
+      "output": "release"
+    }
+  },
+  "scripts": {
+    "start": "electron .",
+    "pack": "electron-builder --dir",
+    "dist": "electron-builder"
+  },
+  "author": {
+    "name": "Agampreet Singh",
+    "email": "agam778@zohomail.in",
+    "url": "https://agam778.is-a.dev/"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "electron": "^17.0.0",
+    "electron-builder": "^22.14.5"
+  },
+  "dependencies": {
+    "about-window": "^1.15.2",
+    "axios": "^0.25.0",
+    "discord-rpc": "^4.0.1",
+    "electron-context-menu": "^3.1.1",
+    "electron-dl": "^3.3.0",
+    "electron-log": "^4.4.5",
+    "electron-store": "^8.0.1",
+    "electron-updater": "^4.6.1",
+    "is-online": "^9.0.1"
+  }
+}