app.js

   1 const app = new Vue({
   2     el: '#app',
   3     data: {
   4         config: null,
   5         offline: false,
   6         filter: '',
   7         vlayout: true,
   8         isDark: null
   9     },
  10     created: function () {
  11         let that = this;
  12
  13         this.isDark = 'overrideDark' in localStorage ?
  14             JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
  15
  16         if ('vlayout' in localStorage) {
  17             this.vlayout = JSON.parse(localStorage.vlayout)
  18         }
  19
  20         this.checkOffline();
  21         that.getConfig().then(function (config) {
  22             that.config = config;
  23         }).catch(function () {
  24             that.offline = true;
  25         });
  26
  27         document.addEventListener('visibilitychange', function () {
  28             if (document.visibilityState == "visible") {
  29                 that.checkOffline();
  30             }
  31         }, false);
  32     },
  33     methods: {
  34         checkOffline: function () {
  35             let that = this;
  36             return fetch(window.location.href + "?alive", {
  37                 method: 'HEAD',
  38                 cache: 'no-store'
  39             }).then(function () {
  40                 that.offline = false;
  41             }).catch(function () {
  42                 that.offline = true;
  43             });
  44         },
  45         getConfig: function (event) {
  46             return fetch('config.yml').then(function (response) {
  47                 if (response.status != 200) {
  48                     return
  49                 }
  50                 return response.text().then(function (body) {
  51                     return jsyaml.load(body);
  52                 });
  53             });
  54         },
  55         toggleTheme: function() {
  56             this.isDark = !this.isDark;
  57             localStorage.overrideDark = this.isDark;
  58         },
  59         toggleLayout: function() {
  60             this.vlayout = !this.vlayout;
  61             localStorage.vlayout = this.vlayout;
  62         },
  63     }
  64 });
  65
  66 Vue.component('service', {
  67     props: ['item'],
  68     template: `<div>
  69     <div class="card">
  70         <a :href="item.url">
  71             <div class="card-content">
  72                 <div class="media">
  73                     <div v-if="item.logo" class="media-left">
  74                         <figure class="image is-48x48">
  75                             <img :src="item.logo" />
  76                         </figure>
  77                     </div>
  78                     <div v-if="item.icon" class="media-left">
  79                         <figure class="image is-48x48">
  80                             <i style="font-size: 35px" :class="item.icon"></i>
  81                         </figure>
  82                     </div>
  83                     <div class="media-content">
  84                         <p class="title is-4">{{ item.name }}</p>
  85                         <p class="subtitle is-6">{{ item.subtitle }}</p>
  86                     </div>
  87                 </div>
  88                 <div class="tag" :class="item.tagstyle" v-if="item.tag">
  89                     <strong class="tag-text">#{{ item.tag }}</strong>
  90                 </div>
  91             </div>
  92         </a>
  93     </div></div>`
  94 });
  95
  96 if ('serviceWorker' in navigator) {
  97     window.addEventListener('load', function () {
  98         navigator.serviceWorker.register('worker.js');
  99     });
 100 }