Commiting in order to switch computers

src/views/About.vue

@@ -9,15 +9,6 @@
         highly customizable and functianl dashboard, in order to improvde productivity
         and enable easy organisation of running services or web links.
       </p>
-      <p>
-        Dashy is a web-based project with PWA mobile support. It's written in TypeScript,
-        and using the Vue.js framework, with a simple Node.js backend.
-        It can be run in a light-weight Alpine Docker container, with support for
-        healthcheck monitoring, self-updating and automatic restarting. Configuration
-        is done with a single YAML file, that is merged with the application when it
-        is built / compiled. The configuration can me modified using the UI, and then
-        exported back into the main config file.
-      </p>
     </section>
 
     <section>
@@ -51,7 +42,7 @@
         <img class="aht-pic" src="https://i.ibb.co/FnxqTfx/aht-bot-round.png" alt="Alicia Sykes">
       </a>
       Dashy is developed an maintained by <a href="https://aliciasykes.com">Alicia Sykes</a>
-      (<a href="https://github.com/lissy93">@Lissy93</a>).
+      (<a href="https://github.com/lissy93">@Lissy93</a>), with support from the community.
       <ul>
         <li><b>PGP Key</b> - <a href="https://keybase.io/aliciasykes/pgp_keys.asc?fingerprint=0688f8d34587d954e9e51fb8fedb68f55c0283a7"><code>0688 F8D3 4587 D954 E9E5  1FB8 FEDB 68F5 5C02 83A7</code></a></li>
         <li><b>BTC Address</b> - <code>3853bSxupMjvxEYfwGDGAaLZhTKxB2vEVC</code></li>
@@ -101,8 +92,8 @@ article.about {
   background: var(--about-page-background);
   color: var(--about-page-color);
   width: 80%;
-  max-width: 800px;
-  margin: 1rem auto;
+  max-width: 1000px;
+  margin: 1rem auto 2.5rem auto;
   padding: 1rem;
   border: 1px solid var(--about-page-accent);
   border-radius: var(--curve-factor);

src/views/Workspace.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="work-space">
-    <SideBar :sections="sections" />
+    <SideBar :sections="sections" @launch="launchService" />
     <WebContent :url="url" />
   </div>
 </template>
@@ -9,11 +9,13 @@
 
 import SideBar from '@/components/Workspace/SideBar';
 import WebContent from '@/components/Workspace/WebContent';
+import Defaults, { localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'Workspace',
   props: {
     sections: Array,
+    appConfig: Object,
   },
   data: () => ({
     url: '',
@@ -22,6 +24,27 @@ export default {
     SideBar,
     WebContent,
   },
+  methods: {
+    launchService(url) {
+      this.url = url;
+    },
+    setTheme() {
+      const theme = localStorage[localStorageKeys.THEME] || this.confTheme || Defaults.theme;
+      const htmlTag = document.getElementsByTagName('html')[0];
+      if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');
+      htmlTag.setAttribute('data-theme', theme);
+    },
+    initiateFontAwesome() {
+      const fontAwesomeScript = document.createElement('script');
+      const faKey = this.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
+      fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
+      document.head.appendChild(fontAwesomeScript);
+    },
+  },
+  mounted() {
+    this.setTheme();
+    this.initiateFontAwesome();
+  },
 };
 
 </script>