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     mounted() {
  90         function isSmallScreen() {
  91             return window.matchMedia('screen and (max-width: 1023px)').matches;
  92         }
  93         this._keyListener = function(e) {
  94             if (e.key === '/') {
  95                 if (isSmallScreen()) {
  96                     this.showMenu = true;
  97                 }
  98                 Vue.nextTick(() => {
  99                     this.$refs.search.focus();
 100                 });
 101
 102                 e.preventDefault();
 103             }
 104             if (e.key === 'Escape') {
 105                 this.filter = '';
 106                 this.$refs.search.blur();
 107                 if (isSmallScreen()) {
 108                     this.showMenu = false;
 109                 }
 110             }
 111         }
 112
 113         document.addEventListener('keydown', this._keyListener.bind(this));
 114     },
 115     beforeDestroy() {
 116         document.removeEventListener('keydown', this._keyListener);
 117     }
 118 });
 119
 120 Vue.component('service', {
 121     props: ['item'],
 122     template: `<div>
 123     <div class="card">
 124         <a :href="item.url" :target="item.target">
 125             <div class="card-content">
 126                 <div class="media">
 127                     <div v-if="item.logo" class="media-left">
 128                         <figure class="image is-48x48">
 129                             <img :src="item.logo" />
 130                         </figure>
 131                     </div>
 132                     <div v-if="item.icon" class="media-left">
 133                         <figure class="image is-48x48">
 134                             <i style="font-size: 35px" :class="item.icon"></i>
 135                         </figure>
 136                     </div>
 137                     <div class="media-content">
 138                         <p class="title is-4">{{ item.name }}</p>
 139                         <p class="subtitle is-6">{{ item.subtitle }}</p>
 140                     </div>
 141                 </div>
 142                 <div class="tag" :class="item.tagstyle" v-if="item.tag">
 143                     <strong class="tag-text">#{{ item.tag }}</strong>
 144                 </div>
 145             </div>
 146         </a>
 147     </div></div>`
 148 });
 149
 150 if ('serviceWorker' in navigator) {
 151     window.addEventListener('load', function () {
 152         navigator.serviceWorker.register('worker.js');
 153     });
 154 }