6 `theme-${config.theme}`,
8 isDark ? 'is-dark' : 'is-light',
9 !config.footer ? 'no-footer' : '',
12 <DynamicTheme :themes="config.colors" />
14 <section v-if="config.header" class="first-line">
15 <div v-cloak class="container">
18 <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
20 <i v-if="config.icon" :class="config.icon"></i>
23 class="dashboard-title"
24 :class="{ 'no-logo': !config.icon || !config.logo }"
26 <span class="headline">{{ config.subtitle }}</span>
27 <h1>{{ config.title }}</h1>
35 @navbar-toggle="showMenu = !showMenu"
38 @updated="isDark = $event"
39 :defaultValue="this.config.defaults.colorTheme"
43 @updated="vlayout = $event"
47 :defaultValue="this.config.defaults.layout == 'columns'"
51 class="navbar-item is-inline-block-mobile"
52 :hotkey="searchHotkey()"
53 @input="filterServices($event.target?.value)"
54 @search-focus="showMenu = true"
55 @search-open="navigateToFirstService($event?.target?.value)"
56 @search-cancel="filterServices()"
61 <section id="main-section" class="section">
62 <div v-cloak class="container">
64 v-if="config.connectivityCheck"
65 @network-status-update="offline = $event"
68 <GetStarted v-if="configurationNeeded" />
71 <!-- Optional messages -->
72 <Message :item="config.message" />
74 <!-- Horizontal layout -->
75 <div v-if="!vlayout || filter" class="columns is-multiline">
76 <template v-for="(group, groupIndex) in services">
79 class="column is-full group-title"
80 :key="`header-${groupIndex}`"
82 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
83 <div v-else-if="group.logo" class="group-logo media-left">
84 <figure class="image is-48x48">
85 <img :src="group.logo" :alt="`${group.name} logo`" />
91 v-for="(item, index) in group.items"
92 :key="`service-${groupIndex}-${index}`"
95 :class="['column', `is-${12 / config.columns}`]"
100 <!-- Vertical layout -->
102 v-if="!filter && vlayout"
103 class="columns is-multiline layout-vertical"
106 :class="['column', `is-${12 / config.columns}`]"
107 v-for="(group, groupIndex) in services"
110 <h2 v-if="group.name" class="group-title">
111 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
112 <div v-else-if="group.logo" class="group-logo media-left">
113 <figure class="image is-48x48">
114 <img :src="group.logo" :alt="`${group.name} logo`" />
120 v-for="(item, index) in group.items"
123 :proxy="config.proxy"
131 <footer class="footer">
132 <div class="container">
134 class="content has-text-centered"
136 v-html="config.footer"
144 import jsyaml from "js-yaml";
145 import merge from "lodash.merge";
147 import Navbar from "./components/Navbar.vue";
148 import GetStarted from "./components/GetStarted.vue";
149 import ConnectivityChecker from "./components/ConnectivityChecker.vue";
150 import Service from "./components/Service.vue";
151 import Message from "./components/Message.vue";
152 import SearchInput from "./components/SearchInput.vue";
153 import SettingToggle from "./components/SettingToggle.vue";
154 import DarkMode from "./components/DarkMode.vue";
155 import DynamicTheme from "./components/DynamicTheme.vue";
157 import defaultConfig from "./assets/defaults.yml?raw";
176 configNotFound: false,
187 configurationNeeded: function () {
188 return (this.loaded && !this.services) || this.configNotFound;
191 created: async function () {
192 this.buildDashboard();
193 window.onhashchange = this.buildDashboard;
198 if (this.config.hotkey && this.config.hotkey.search) {
199 return this.config.hotkey.search;
202 buildDashboard: async function () {
203 const defaults = jsyaml.load(defaultConfig);
206 config = await this.getConfig();
207 this.currentPage = window.location.hash.substring(1) || "default";
209 if (this.currentPage !== "default") {
210 let pageConfig = await this.getConfig(
211 `assets/${this.currentPage}.yml`
213 config = Object.assign(config, pageConfig);
217 config = this.handleErrors("⚠️ Error loading configuration", error);
219 this.config = merge(defaults, config);
220 this.services = this.config.services;
223 this.config.documentTitle ||
224 `${this.config.title} | ${this.config.subtitle}`;
225 if (this.config.stylesheet) {
227 for (const file of this.config.stylesheet) {
228 stylesheet += `@import "${file}";`;
230 this.createStylesheet(stylesheet);
233 getConfig: function (path = "assets/config.yml") {
234 return fetch(path).then((response) => {
235 if (response.status == 404 || response.redirected) {
236 this.configNotFound = true;
241 throw Error(`${response.statusText}: ${response.body}`);
248 return jsyaml.load(body);
250 .then(function (config) {
251 if (config.externalConfig) {
252 return that.getConfig(config.externalConfig);
258 matchesFilter: function (item) {
259 const needle = this.filter?.toLowerCase();
261 item.name.toLowerCase().includes(needle) ||
262 (item.subtitle && item.subtitle.toLowerCase().includes(needle)) ||
263 (item.tag && item.tag.toLowerCase().includes(needle)) ||
264 (item.keywords && item.keywords.toLowerCase().includes(needle))
267 navigateToFirstService: function (target) {
269 const service = this.services[0].items[0];
270 window.open(service.url, target || service.target || "_self");
272 console.warning("fail to open service");
275 filterServices: function (filter) {
277 this.filter = filter;
280 this.services = this.config.services;
284 const searchResultItems = [];
285 for (const group of this.config.services) {
286 for (const item of group.items) {
287 if (this.matchesFilter(item)) {
288 searchResultItems.push(item);
296 icon: "fas fa-search",
297 items: searchResultItems,
301 handleErrors: function (title, content) {
310 createStylesheet: function (css) {
311 let style = document.createElement("style");
312 style.appendChild(document.createTextNode(css));
313 document.head.appendChild(style);