mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 15:41:59 +01:00
Add Vuex, and store data (#287)
This commit is contained in:
Andreas E
GitHub
parent
79e66963ea
commit
e3eb6eda10
8
package-lock.json
generated
8
package-lock.json
generated
@ -13760,8 +13760,7 @@
|
||||
"vue": {
|
||||
"version": "2.6.11",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
||||
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
||||
},
|
||||
"vue-agile": {
|
||||
"version": "1.1.3",
|
||||
@ -14042,6 +14041,11 @@
|
||||
"smoothscroll-polyfill": "^0.4.3"
|
||||
}
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
|
||||
"integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
|
||||
|
||||
@ -39,10 +39,12 @@
|
||||
"marked": "^1.1.1",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"sweetalert2": "^9.17.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-agile": "^1.1.3",
|
||||
"vue-material-design-icons": "^4.8.0",
|
||||
"vue-moment": "^4.1.0",
|
||||
"vue-sweetalert2": "^3.0.6",
|
||||
"vuepress-plugin-sitemap": "^2.3.1"
|
||||
"vuepress-plugin-sitemap": "^2.3.1",
|
||||
"vuex": "^3.5.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,143 +1,146 @@
|
||||
<template>
|
||||
<div id="DownloadButtons">
|
||||
<div class="downloadContainer">
|
||||
<button id="downloadStable" @click="downloadStable" @keyup.enter="downloadStable">
|
||||
<CloudDownloadIcon /> Stable
|
||||
</button>
|
||||
<button id="downloadPreview" @click="downloadPreview" @keyup.enter="downloadPreview">
|
||||
<BugIcon /> Preview
|
||||
</button>
|
||||
</div>
|
||||
<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
|
||||
import BugIcon from "vue-material-design-icons/Bug.vue";
|
||||
import { GITHUB_LATEST_API, GITHUB_LATEST_RELEASE, KANADE_LATEST } from "../constants";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CloudDownloadIcon,
|
||||
BugIcon,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tagName: "",
|
||||
browserDownloadUrl: "",
|
||||
};
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const { data } = await axios.get(GITHUB_LATEST_API);
|
||||
const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
|
||||
this.$data.tagName = data.tag_name.slice(1);
|
||||
this.$data.browserDownloadUrl = apkAsset.browser_download_url;
|
||||
},
|
||||
|
||||
methods: {
|
||||
downloadStable() {
|
||||
this.$swal({
|
||||
title: "Downloading",
|
||||
html: `Started downloading <strong>Tachiyomi Stable</strong>`,
|
||||
icon: "success",
|
||||
focusConfirm: false,
|
||||
focusCancel: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
showClass: {
|
||||
popup: "animate__animated animate__faster animate__pulse",
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animate__animated animate__faster animate__zoomOut",
|
||||
},
|
||||
});
|
||||
window.location.assign(this.$data.browserDownloadUrl || GITHUB_LATEST_RELEASE);
|
||||
window.ga("send", "event", "Action", "Download", "Tachiyomi");
|
||||
},
|
||||
downloadPreview() {
|
||||
this.$swal({
|
||||
icon: "warning",
|
||||
title: "Are you sure?",
|
||||
html:
|
||||
"<strong>Tachiyomi Preview</strong> is not recommended if you're not willing to test for – and endure – issues.",
|
||||
confirmButtonText: "I am sure.",
|
||||
showCloseButton: true,
|
||||
showCancelButton: false,
|
||||
showClass: {
|
||||
popup: "animate__animated animate__headShake",
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animate__animated animate__faster animate__zoomOut",
|
||||
},
|
||||
// eslint-disable-next-line no-shadow
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.$swal({
|
||||
icon: "success",
|
||||
title: "Downloading",
|
||||
html: `Started downloading <strong>Tachiyomi Preview</strong>`,
|
||||
confirmButtonText: "Dismiss",
|
||||
showCloseButton: false,
|
||||
showCancelButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
showClass: {
|
||||
popup: "animate__animated animate__faster animate__pulse",
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animate__animated animate__faster animate__zoomOut",
|
||||
},
|
||||
});
|
||||
window.location.assign(KANADE_LATEST);
|
||||
window.ga("send", "event", "Action", "Download", "Tachiyomi Preview");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
#DownloadButtons
|
||||
text-align center
|
||||
button
|
||||
display inline-block
|
||||
margin 0.5em 0
|
||||
padding 1em 1em
|
||||
width 9em
|
||||
background $accentColor
|
||||
border none
|
||||
border-radius 4px
|
||||
color #fff
|
||||
font-family inherit
|
||||
font-size 1em
|
||||
font-weight 400
|
||||
letter-spacing 0.02em
|
||||
line-height 1
|
||||
transition background-color .1s ease
|
||||
text-decoration none
|
||||
text-transform uppercase
|
||||
cursor pointer
|
||||
&:hover
|
||||
background darken($accentColor, 10%)
|
||||
&:focus
|
||||
box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
|
||||
outline none
|
||||
.downloadContainer
|
||||
user-select none
|
||||
#download
|
||||
&Stable
|
||||
background-color $accentColor
|
||||
&:hover
|
||||
background-color lighten($accentColor, 10%)
|
||||
&Preview
|
||||
background-color $accentColorSecondary
|
||||
&:hover
|
||||
background-color lighten($accentColorSecondary, 10%)
|
||||
.versionNotice
|
||||
font-size 0.9rem
|
||||
</style>
|
||||
<template>
|
||||
<div id="DownloadButtons">
|
||||
<div class="downloadContainer">
|
||||
<button id="downloadStable" @click="downloadStable" @keyup.enter="downloadStable">
|
||||
<CloudDownloadIcon /> Stable
|
||||
</button>
|
||||
<button id="downloadPreview" @click="downloadPreview" @keyup.enter="downloadPreview">
|
||||
<BugIcon /> Preview
|
||||
</button>
|
||||
</div>
|
||||
<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
|
||||
import BugIcon from "vue-material-design-icons/Bug.vue";
|
||||
import { GITHUB_LATEST_RELEASE, KANADE_LATEST } from "../constants";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CloudDownloadIcon,
|
||||
BugIcon,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tagName: "",
|
||||
browserDownloadUrl: "",
|
||||
};
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
try {
|
||||
const { data } = await this.$store.dispatch("getStableReleaseData");
|
||||
const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
|
||||
this.$data.tagName = data.tag_name.slice(1);
|
||||
this.$data.browserDownloadUrl = apkAsset.browser_download_url;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
downloadStable() {
|
||||
this.$swal({
|
||||
title: "Downloading",
|
||||
html: `Started downloading <strong>Tachiyomi Stable</strong>`,
|
||||
icon: "success",
|
||||
focusConfirm: false,
|
||||
focusCancel: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
showClass: {
|
||||
popup: "animate__animated animate__faster animate__pulse",
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animate__animated animate__faster animate__zoomOut",
|
||||
},
|
||||
});
|
||||
window.location.assign(this.$data.browserDownloadUrl || GITHUB_LATEST_RELEASE);
|
||||
window.ga("send", "event", "Action", "Download", "Tachiyomi");
|
||||
},
|
||||
downloadPreview() {
|
||||
this.$swal({
|
||||
icon: "warning",
|
||||
title: "Are you sure?",
|
||||
html:
|
||||
"<strong>Tachiyomi Preview</strong> is not recommended if you're not willing to test for – and endure – issues.",
|
||||
confirmButtonText: "I am sure.",
|
||||
showCloseButton: true,
|
||||
showCancelButton: false,
|
||||
showClass: {
|
||||
popup: "animate__animated animate__headShake",
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animate__animated animate__faster animate__zoomOut",
|
||||
},
|
||||
// eslint-disable-next-line no-shadow
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.$swal({
|
||||
icon: "success",
|
||||
title: "Downloading",
|
||||
html: `Started downloading <strong>Tachiyomi Preview</strong>`,
|
||||
confirmButtonText: "Dismiss",
|
||||
showCloseButton: false,
|
||||
showCancelButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
showClass: {
|
||||
popup: "animate__animated animate__faster animate__pulse",
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animate__animated animate__faster animate__zoomOut",
|
||||
},
|
||||
});
|
||||
window.location.assign(KANADE_LATEST);
|
||||
window.ga("send", "event", "Action", "Download", "Tachiyomi Preview");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
#DownloadButtons
|
||||
text-align center
|
||||
button
|
||||
display inline-block
|
||||
margin 0.5em 0
|
||||
padding 1em 1em
|
||||
width 9em
|
||||
background $accentColor
|
||||
border none
|
||||
border-radius 4px
|
||||
color #fff
|
||||
font-family inherit
|
||||
font-size 1em
|
||||
font-weight 400
|
||||
letter-spacing 0.02em
|
||||
line-height 1
|
||||
transition background-color .1s ease
|
||||
text-decoration none
|
||||
text-transform uppercase
|
||||
cursor pointer
|
||||
&:hover
|
||||
background darken($accentColor, 10%)
|
||||
&:focus
|
||||
box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
|
||||
outline none
|
||||
.downloadContainer
|
||||
user-select none
|
||||
#download
|
||||
&Stable
|
||||
background-color $accentColor
|
||||
&:hover
|
||||
background-color lighten($accentColor, 10%)
|
||||
&Preview
|
||||
background-color $accentColorSecondary
|
||||
&:hover
|
||||
background-color lighten($accentColorSecondary, 10%)
|
||||
.versionNotice
|
||||
font-size 0.9rem
|
||||
</style>
|
||||
|
||||
@ -5,9 +5,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import { GITHUB_LATEST_API } from "../constants";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -17,9 +14,13 @@ export default {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const { data } = await axios.get(GITHUB_LATEST_API);
|
||||
this.$data.releasePublishRelative = this.$moment(data.published_at).fromNow();
|
||||
this.$data.releasePublishExact = this.$moment(data.published_at).toString();
|
||||
try {
|
||||
const { data } = await this.$store.dispatch("getStableReleaseData");
|
||||
this.$data.releasePublishRelative = this.$moment(data.published_at).fromNow();
|
||||
this.$data.releasePublishExact = this.$moment(data.published_at).toString();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -8,9 +8,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import { GITHUB_LATEST_API } from "../constants";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
fileName: {
|
||||
@ -25,8 +22,12 @@ export default {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const { data } = await axios.get(GITHUB_LATEST_API);
|
||||
this.$data.tagName = data.tag_name.slice(1);
|
||||
try {
|
||||
const { data } = await this.$store.dispatch("getStableReleaseData");
|
||||
this.$data.tagName = data.tag_name.slice(1);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -12,9 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import marked from "marked";
|
||||
import { GITHUB_LATEST_API } from "../constants";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -24,8 +22,12 @@ export default {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const { data } = await axios.get(GITHUB_LATEST_API);
|
||||
this.$data.whatsNew = marked(data.body);
|
||||
try {
|
||||
const { data } = await this.$store.dispatch("getStableReleaseData");
|
||||
this.$data.whatsNew = marked(data.body);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -7,6 +7,8 @@ import { VueAgile } from "vue-agile";
|
||||
import VueSweetalert2 from "vue-sweetalert2";
|
||||
import VueMoment from "vue-moment";
|
||||
|
||||
import store from "./store";
|
||||
|
||||
export default ({
|
||||
Vue, // the version of Vue being used in the VuePress app
|
||||
options, // the options for the root Vue instance
|
||||
@ -17,4 +19,5 @@ export default ({
|
||||
Vue.component("Agile", VueAgile);
|
||||
Vue.use(VueSweetalert2);
|
||||
Vue.use(VueMoment);
|
||||
Vue.mixin({ store });
|
||||
};
|
||||
|
||||
63
src/.vuepress/store/index.js
Normal file
63
src/.vuepress/store/index.js
Normal file
@ -0,0 +1,63 @@
|
||||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
import axios from "axios";
|
||||
|
||||
import { GITHUB_LATEST_API } from "../constants";
|
||||
|
||||
let call = null;
|
||||
|
||||
Vue.use(Vuex);
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
stable: {
|
||||
updated: null,
|
||||
data: null,
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
setStableReleaseData(state, stable) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
state.stable = stable;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
getStableReleaseData({ commit }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const { updated } = this.state.stable;
|
||||
const now = new Date().getTime();
|
||||
|
||||
if (updated != null && now - updated <= 60 * 60 * 24 * 1000) {
|
||||
return resolve(this.state.stable);
|
||||
}
|
||||
|
||||
// Makes sure only one network call and one mutation happens
|
||||
if (call == null) {
|
||||
call = axios.get(GITHUB_LATEST_API).then(({ data }) => {
|
||||
const object = {
|
||||
updated: now,
|
||||
data,
|
||||
};
|
||||
commit("setStableReleaseData", object);
|
||||
call = null;
|
||||
return Promise.resolve(this.state.stable)
|
||||
}).catch((reason) => {
|
||||
const object = {
|
||||
updated: null,
|
||||
data: null,
|
||||
};
|
||||
commit("setStableReleaseData", object);
|
||||
call = null
|
||||
return Promise.reject(reason)
|
||||
});;
|
||||
}
|
||||
|
||||
// Waits for network call and mutation to be done
|
||||
return call.then((value) => {
|
||||
return resolve(value);
|
||||
}).catch((reason) => {
|
||||
return reject(reason);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -60,10 +60,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
|
||||
import BookOpenVariantIcon from "vue-material-design-icons/BookOpenVariant.vue";
|
||||
import { GITHUB_LATEST_API } from "../../constants";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
@ -101,9 +99,13 @@ export default {
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const { data } = await axios.get(GITHUB_LATEST_API);
|
||||
const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
|
||||
this.$data.browserDownloadUrl = apkAsset.browser_download_url;
|
||||
try {
|
||||
const { data } = await this.$store.dispatch("getStableReleaseData");
|
||||
const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
|
||||
this.$data.browserDownloadUrl = apkAsset.browser_download_url;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user