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         showMenu: false
  10     },
  11     created: async function () {
  12         let that = this;
  13
  14         this.isDark = 'overrideDark' in localStorage ?
  15             JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
  16
  17         if ('vlayout' in localStorage) {
  18             this.vlayout = JSON.parse(localStorage.vlayout)
  19         }
  20
  21         this.checkOffline();
  22         try {
  23             this.config =  await this.getConfig();
  24             document.title = this.config.title + ' | Homer';
  25         } catch (error) {
  26             this.offline = true;
  27         }
  28
  29         // Look for a new message if an endpoint is provided.
  30         if (this.config.message && this.config.message.url) {
  31             this.getMessage(this.config.message.url).then(function(message){
  32                 // keep the original config value if no value is provided by the endpoint
  33                 for (const prop of ['title','style','content']) {
  34                     if (prop in message && message[prop] !== null) {
  35                         that.config.message[prop] = message[prop];
  36                     }
  37                 }
  38             });
  39         }
  40
  41         document.addEventListener('visibilitychange', function () {
  42             if (document.visibilityState == "visible") {
  43                 that.checkOffline();
  44             }
  45         }, false);
  46     },
  47     methods: {
  48         checkOffline: function () {
  49             let that = this;
  50             return fetch(window.location.href + "?alive", {
  51                 method: 'HEAD',
  52                 cache: 'no-store'
  53             }).then(function () {
  54                 that.offline = false;
  55             }).catch(function () {
  56                 that.offline = true;
  57             });
  58         },
  59         getConfig: function (event) {
  60             return fetch('config.yml').then(function (response) {
  61                 if (response.status != 200) {
  62                     return
  63                 }
  64                 return response.text().then(function (body) {
  65                     return jsyaml.load(body);
  66                 });
  67             });
  68         },
  69         getMessage: function (url) {
  70             return fetch(url).then(function (response) {
  71                 if (response.status != 200) {
  72                     return;
  73                 }
  74                 return response.json();
  75             });
  76         },
  77         toggleTheme: function() {
  78             this.isDark = !this.isDark;
  79             localStorage.overrideDark = this.isDark;
  80         },
  81         toggleLayout: function() {
  82             this.vlayout = !this.vlayout;
  83             localStorage.vlayout = this.vlayout;
  84         },
  85         toggleMenu: function() {
  86             this.showMenu = !this.showMenu;
  87         }
  88     }
  89 });
  90
  91 Vue.component('service', {
  92     props: ['item'],
  93     template: `<div>
  94     <div class="card">
  95         <a :href="item.url" :target="item.target">
  96             <div class="card-content">
  97                 <div class="media">
  98                     <div v-if="item.logo" class="media-left">
  99                         <figure class="image is-48x48">
 100                             <img :src="item.logo" />
 101                         </figure>
 102                     </div>
 103                     <div v-if="item.icon" class="media-left">
 104                         <figure class="image is-48x48">
 105                             <i style="font-size: 35px" :class="item.icon"></i>
 106                         </figure>
 107                     </div>
 108                     <div class="media-content">
 109                         <p class="title is-4">{{ item.name }}</p>
 110                         <p class="subtitle is-6">{{ item.subtitle }}</p>
 111                     </div>
 112                 </div>
 113                 <div class="tag" :class="item.tagstyle" v-if="item.tag">
 114                     <strong class="tag-text">#{{ item.tag }}</strong>
 115                 </div>
 116             </div>
 117         </a>
 118     </div></div>`
 119 });
 120
 121 if ('serviceWorker' in navigator) {
 122     window.addEventListener('load', function () {
 123         navigator.serviceWorker.register('worker.js');
 124     });
 125 }