2018-02-17 22:49:16 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
|
<link rel="stylesheet" href="/css/fontawesome.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/source-sans-pro.css">
|
2018-05-22 21:13:28 +08:00
|
|
|
<link rel="stylesheet" href="/css/source-serif-pro.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/yla-dialog.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/yla-tooltip.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/stylesheet.css">
|
|
|
|
|
<script src="/js/vue.js"></script>
|
|
|
|
|
<script src="/js/component/yla-tooltip.js"></script>
|
|
|
|
|
<script src="/js/component/yla-dialog.js"></script>
|
|
|
|
|
<script src="/js/page/base.js"></script>
|
2018-02-26 14:43:17 +08:00
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/res/apple-touch-icon-144x144.png" />
|
|
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/res/apple-touch-icon-152x152.png" />
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-32x32.png" sizes="32x32" />
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-16x16.png" sizes="16x16" />
|
2018-05-22 21:13:28 +08:00
|
|
|
<title>Shiori - Bookmarks Manager</title>
|
2018-02-17 22:49:16 +08:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-05-22 21:13:28 +08:00
|
|
|
<div id="cache-page" class="page" :class="{night: nightMode}">
|
|
|
|
|
<div id="sidebar">
|
|
|
|
|
<yla-tooltip placement="right" content="Toggle night mode">
|
|
|
|
|
<a @click="toggleNightMode">
|
|
|
|
|
<i class="fas fa-fw" :class="nightMode ? 'fa-sun' : 'fa-moon'"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</yla-tooltip>
|
|
|
|
|
<yla-tooltip placement="right" content="Toggle font type">
|
|
|
|
|
<a @click="toggleSerifMode" id="toggle-font" :class="{serif: !serifMode}">Aa</a>
|
|
|
|
|
</yla-tooltip>
|
2018-02-17 22:49:16 +08:00
|
|
|
</div>
|
2018-05-22 21:13:28 +08:00
|
|
|
<div id="body" :class="{serif: serifMode}">
|
|
|
|
|
<div id="header">
|
|
|
|
|
<p id="title">{{title}}</p>
|
|
|
|
|
<p id="time">Added
|
2018-05-22 23:39:36 +08:00
|
|
|
<b>{{modified}} UTC</b>
|
|
|
|
|
</p>
|
|
|
|
|
<a id="url" :href="url" target="_blank">{{getHostname(url)}}</a>
|
2018-05-22 21:13:28 +08:00
|
|
|
</div>
|
|
|
|
|
<div id="content" v-html="html"></div>
|
|
|
|
|
<div id="body-padding"></div>
|
2018-02-17 22:49:16 +08:00
|
|
|
</div>
|
2018-05-22 21:13:28 +08:00
|
|
|
<yla-dialog v-bind="dialog"></yla-dialog>
|
2018-02-17 22:49:16 +08:00
|
|
|
</div>
|
|
|
|
|
<script>
|
2018-05-22 21:13:28 +08:00
|
|
|
// Create initial variable
|
|
|
|
|
var init = JSON.parse('$|.|$');
|
2018-02-17 22:49:16 +08:00
|
|
|
|
2018-05-22 21:13:28 +08:00
|
|
|
// Register Vue component
|
|
|
|
|
Vue.component('yla-dialog', new YlaDialog());
|
|
|
|
|
Vue.component('yla-tooltip', new YlaTooltip());
|
|
|
|
|
|
|
|
|
|
new Vue({
|
|
|
|
|
el: '#cache-page',
|
|
|
|
|
mixins: [new Base()],
|
|
|
|
|
data: {
|
|
|
|
|
id: init.id,
|
|
|
|
|
url: init.url,
|
|
|
|
|
title: init.title,
|
|
|
|
|
author: init.author,
|
|
|
|
|
minReadTime: init.minReadTime,
|
|
|
|
|
maxReadTime: init.maxReadTime,
|
|
|
|
|
modified: init.modified,
|
|
|
|
|
html: init.html,
|
|
|
|
|
tags: init.tags,
|
|
|
|
|
nightMode: false,
|
|
|
|
|
serifMode: false,
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
toggleNightMode() {
|
|
|
|
|
this.nightMode = !this.nightMode;
|
|
|
|
|
localStorage.setItem('shiori-night-mode', this.nightMode ? '1' : '0');
|
|
|
|
|
},
|
|
|
|
|
toggleSerifMode() {
|
|
|
|
|
this.serifMode = !this.serifMode;
|
|
|
|
|
localStorage.setItem('shiori-serif-mode', this.serifMode ? '1' : '0');
|
|
|
|
|
},
|
|
|
|
|
getHostname(url) {
|
|
|
|
|
parser = document.createElement('a');
|
|
|
|
|
parser.href = url;
|
|
|
|
|
return parser.hostname.replace(/^www\./g, '');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// Set title
|
|
|
|
|
document.title = this.title + ' - Shiori - Bookmarks Manager';
|
2018-02-17 22:49:16 +08:00
|
|
|
|
2018-05-22 21:13:28 +08:00
|
|
|
// Set night and serif mode
|
|
|
|
|
var nightMode = localStorage.getItem('shiori-night-mode'),
|
|
|
|
|
serifMode = localStorage.getItem('shiori-serif-mode');
|
2018-02-17 22:49:16 +08:00
|
|
|
|
2018-05-22 21:13:28 +08:00
|
|
|
this.nightMode = nightMode === '1';
|
|
|
|
|
this.serifMode = serifMode === '1';
|
|
|
|
|
}
|
|
|
|
|
});
|
2018-02-17 22:49:16 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
