Merge pull request #311 from Aryess/main

Fix #121 - Change default theme and layout from config

diff --combined docs/configuration.md
index 552b22a9b4993722bd10ab5eb3f42f7ed81f2311,65fd018d0f0be53e25af0bff9b13841ae60f8df3..2083be3056a74cd9b2e3f87dd79f059c8d99b262
--- 1/docs/configuration.md
--- 2/docs/configuration.md
+++ b/docs/configuration.md
@@@ -19,9 -19,6 +19,9 @@@ logo: "assets/logo.png
  # icon: "fas fa-skull-crossbones"
  
  header: true # Set to false to hide the header
 +# Optional: Different hotkey for search, defaults to "/"
 +# hotkey:
 +#   search: "Shift"
  footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
  
  columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
@@@ -29,8 -26,14 +29,13 @@@ connectivityCheck: true # whether you w
  
  # Optional: Proxy / hosting option
  proxy:
 -  # NOT All custom services implements this new option YET. Support will be extended very soon.
    useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level. 
  
+ # Set the default layout and color scheme
+ defaults:
+   layout: columns # Either 'columns', or 'list'
+   colorTheme: auto # One of 'auto', 'light', or 'dark'
+ 
  # Optional theming
  theme: default # 'default' or one of the themes available in 'src/assets/themes'.
  

diff --combined src/App.vue
index d2cb3adfb115d7ff2d0898c58b683e77bc600077,1f1791ca616c0786236dc9901b7a131575e8f861..fda13c31e07ef4cb7bcf5f1e50365d29f8fe4e65
--- 1/src/App.vue
--- 2/src/App.vue
+++ b/src/App.vue
@@@ -30,18 -30,21 +30,22 @@@
          :links="config.links"
          @navbar-toggle="showMenu = !showMenu"
        >
-         <DarkMode @updated="isDark = $event" />
+         <DarkMode
+           @updated="isDark = $event"
+           :defaultValue="this.config.defaults.colorTheme"
+         />
  
          <SettingToggle
            @updated="vlayout = $event"
            name="vlayout"
            icon="fa-list"
            iconAlt="fa-columns"
+           :defaultValue="this.config.defaults.layout == 'columns'"
          />
  
          <SearchInput
            class="navbar-item is-inline-block-mobile"
 +          :hotkey="searchHotkey()"
            @input="filterServices"
            @search-focus="showMenu = true"
            @search-open="navigateToFirstService"
@@@ -56,9 -59,6 +60,9 @@@
            v-if="config.connectivityCheck"
            @network-status-update="offline = $event"
          />
 +
 +        <GetStarted v-if="loaded && !services" />
 +
          <div v-if="!offline">
            <!-- Optional messages -->
            <Message :item="config.message" />
@@@ -133,7 -133,6 +137,7 @@@ const jsyaml = require("js-yaml")
  const merge = require("lodash.merge");
  
  import Navbar from "./components/Navbar.vue";
 +import GetStarted from "./components/GetStarted.vue";
  import ConnectivityChecker from "./components/ConnectivityChecker.vue";
  import Service from "./components/Service.vue";
  import Message from "./components/Message.vue";
@@@ -148,7 -147,6 +152,7 @@@ export default 
    name: "App",
    components: {
      Navbar,
 +    GetStarted,
      ConnectivityChecker,
      Service,
      Message,
@@@ -159,7 -157,6 +163,7 @@@
    },
    data: function () {
      return {
 +      loaded: false,
        config: null,
        services: null,
        offline: false,
@@@ -172,14 -169,8 +176,14 @@@
    created: async function () {
      this.buildDashboard();
      window.onhashchange = this.buildDashboard;
 +    this.loaded = true;
    },
    methods: {
 +    searchHotkey() {
 +      if (this.config.hotkey && this.config.hotkey.search) {
 +        return this.config.hotkey.search;
 +      }
 +    },
      buildDashboard: async function () {
        const defaults = jsyaml.load(defaultConfig);
        let config;
@@@ -200,7 -191,6 +204,7 @@@
        }
        this.config = merge(defaults, config);
        this.services = this.config.services;
 +
        document.title =
          this.config.documentTitle ||
          `${this.config.title} | ${this.config.subtitle}`;
@@@ -219,7 -209,6 +223,7 @@@
            window.location.href = response.url;
            return;
          }
 +
          if (!response.ok) {
            throw Error(`${response.statusText}: ${response.body}`);
          }