offline: false,
filter: '',
vlayout: true,
- overrideDark: null
+ isDark: null
},
- created: function () {
+ created: async function () {
let that = this;
+ this.isDark = 'overrideDark' in localStorage ?
+ JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
+
+ if ('vlayout' in localStorage) {
+ this.vlayout = JSON.parse(localStorage.vlayout)
+ }
+
this.checkOffline();
- that.getConfig().then(function (config) {
- that.config = config;
- }).catch(function () {
- that.offline = true;
- });
+ try {
+ this.config = await this.getConfig();
+ } catch (error) {
+ this.offline = true;
+ }
+
+ // Look for a new message if an endpoint is provided.
+ if (this.config.message.url) {
+ this.getMessage(this.config.message.url).then(function(message){
+ // keep the original config value if no value is provided by the endpoint
+ for (const prop of ['title','style','content']) {
+ if (prop in message && message[prop] !== null) {
+ that.config.message[prop] = message[prop];
+ }
+ }
+ });
+ }
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == "visible") {
}
}, false);
},
- computed: {
- isDark: function() {
- return this.overrideDark !== null
- ? this.overrideDark
- : matchMedia("(prefers-color-scheme: dark)").matches;
- }
- },
methods: {
checkOffline: function () {
let that = this;
});
});
},
+ getMessage: function (url) {
+ return fetch(url).then(function (response) {
+ if (response.status != 200) {
+ return;
+ }
+ return response.json();
+ });
+ },
toggleTheme: function() {
- this.overrideDark = !this.isDark;
- }
+ this.isDark = !this.isDark;
+ localStorage.overrideDark = this.isDark;
+ },
+ toggleLayout: function() {
+ this.vlayout = !this.vlayout;
+ localStorage.vlayout = this.vlayout;
+ },
}
});
<p class="subtitle is-6">{{ item.subtitle }}</p>
</div>
</div>
- <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong>
+ <div class="tag" :class="item.tagstyle" v-if="item.tag">
+ <strong class="tag-text">#{{ item.tag }}</strong>
+ </div>
</div>
</a>
</div></div>`
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
- navigator.serviceWorker.register('/worker.js');
+ navigator.serviceWorker.register('worker.js');
});
}