Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 15:41:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Vuex, and store data (#287)

Browse Source
This commit is contained in:
Andreas E 2020-08-04 20:13:58 +02:00 committed by GitHub
parent 79e66963ea
commit e3eb6eda10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 247 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -13760,8 +13760,7 @@
"vue": { "vue": {
"version": "2.6.11", "version": "2.6.11",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==", "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
"dev": true
}, },
"vue-agile": { "vue-agile": {
"version": "1.1.3", "version": "1.1.3",
@ -14042,6 +14041,11 @@
"smoothscroll-polyfill": "^0.4.3" "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": { "watchpack": {
"version": "1.7.2", "version": "1.7.2",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",

4
package.json
View File

@ -39,10 +39,12 @@
"marked": "^1.1.1", "marked": "^1.1.1",
"material-design-icons": "^3.0.1", "material-design-icons": "^3.0.1",
"sweetalert2": "^9.17.1", "sweetalert2": "^9.17.1",
"vue": "^2.6.11",
"vue-agile": "^1.1.3", "vue-agile": "^1.1.3",
"vue-material-design-icons": "^4.8.0", "vue-material-design-icons": "^4.8.0",
"vue-moment": "^4.1.0", "vue-moment": "^4.1.0",
"vue-sweetalert2": "^3.0.6", "vue-sweetalert2": "^3.0.6",
"vuepress-plugin-sitemap": "^2.3.1" "vuepress-plugin-sitemap": "^2.3.1",
"vuex": "^3.5.1"
} }
} }

289
src/.vuepress/components/DownloadButtons.vue
View File

@ -1,143 +1,146 @@
<template> <template>
<div id="DownloadButtons"> <div id="DownloadButtons">
<div class="downloadContainer"> <div class="downloadContainer">
<button id="downloadStable" @click="downloadStable" @keyup.enter="downloadStable"> <button id="downloadStable" @click="downloadStable" @keyup.enter="downloadStable">
<CloudDownloadIcon /> Stable <CloudDownloadIcon /> Stable
</button> </button>
<button id="downloadPreview" @click="downloadPreview" @keyup.enter="downloadPreview"> <button id="downloadPreview" @click="downloadPreview" @keyup.enter="downloadPreview">
<BugIcon /> Preview <BugIcon /> Preview
</button> </button>
</div> </div>
<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span> <span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios"; import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue"; import BugIcon from "vue-material-design-icons/Bug.vue";
import BugIcon from "vue-material-design-icons/Bug.vue"; import { GITHUB_LATEST_RELEASE, KANADE_LATEST } from "../constants";
import { GITHUB_LATEST_API, GITHUB_LATEST_RELEASE, KANADE_LATEST } from "../constants";
export default {
export default { components: {
components: { CloudDownloadIcon,
CloudDownloadIcon, BugIcon,
BugIcon, },
},
data() {
data() { return {
return { tagName: "",
tagName: "", browserDownloadUrl: "",
browserDownloadUrl: "", };
}; },
},
async mounted() {
async mounted() { try {
const { data } = await axios.get(GITHUB_LATEST_API); const { data } = await this.$store.dispatch("getStableReleaseData");
const apkAsset = data.assets.find((a) => a.name.includes(".apk")); const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
this.$data.tagName = data.tag_name.slice(1); this.$data.tagName = data.tag_name.slice(1);
this.$data.browserDownloadUrl = apkAsset.browser_download_url; this.$data.browserDownloadUrl = apkAsset.browser_download_url;
}, } catch (e) {
console.error(e);
methods: { }
downloadStable() { },
this.$swal({
title: "Downloading", methods: {
html: `Started downloading <strong>Tachiyomi Stable</strong>`, downloadStable() {
icon: "success", this.$swal({
focusConfirm: false, title: "Downloading",
focusCancel: false, html: `Started downloading <strong>Tachiyomi Stable</strong>`,
timer: 3000, icon: "success",
timerProgressBar: true, focusConfirm: false,
showClass: { focusCancel: false,
popup: "animate__animated animate__faster animate__pulse", timer: 3000,
}, timerProgressBar: true,
hideClass: { showClass: {
popup: "animate__animated animate__faster animate__zoomOut", popup: "animate__animated animate__faster animate__pulse",
}, },
}); hideClass: {
window.location.assign(this.$data.browserDownloadUrl || GITHUB_LATEST_RELEASE); popup: "animate__animated animate__faster animate__zoomOut",
window.ga("send", "event", "Action", "Download", "Tachiyomi"); },
}, });
downloadPreview() { window.location.assign(this.$data.browserDownloadUrl || GITHUB_LATEST_RELEASE);
this.$swal({ window.ga("send", "event", "Action", "Download", "Tachiyomi");
icon: "warning", },
title: "Are you sure?", downloadPreview() {
html: this.$swal({
"<strong>Tachiyomi Preview</strong> is not recommended if you're not willing to test for – and endure – issues.", icon: "warning",
confirmButtonText: "I am sure.", title: "Are you sure?",
showCloseButton: true, html:
showCancelButton: false, "<strong>Tachiyomi Preview</strong> is not recommended if you're not willing to test for – and endure – issues.",
showClass: { confirmButtonText: "I am sure.",
popup: "animate__animated animate__headShake", showCloseButton: true,
}, showCancelButton: false,
hideClass: { showClass: {
popup: "animate__animated animate__faster animate__zoomOut", popup: "animate__animated animate__headShake",
}, },
// eslint-disable-next-line no-shadow hideClass: {
}).then((result) => { popup: "animate__animated animate__faster animate__zoomOut",
if (result.value) { },
this.$swal({ // eslint-disable-next-line no-shadow
icon: "success", }).then((result) => {
title: "Downloading", if (result.value) {
html: `Started downloading <strong>Tachiyomi Preview</strong>`, this.$swal({
confirmButtonText: "Dismiss", icon: "success",
showCloseButton: false, title: "Downloading",
showCancelButton: false, html: `Started downloading <strong>Tachiyomi Preview</strong>`,
timer: 3000, confirmButtonText: "Dismiss",
timerProgressBar: true, showCloseButton: false,
showClass: { showCancelButton: false,
popup: "animate__animated animate__faster animate__pulse", timer: 3000,
}, timerProgressBar: true,
hideClass: { showClass: {
popup: "animate__animated animate__faster animate__zoomOut", popup: "animate__animated animate__faster animate__pulse",
}, },
}); hideClass: {
window.location.assign(KANADE_LATEST); popup: "animate__animated animate__faster animate__zoomOut",
window.ga("send", "event", "Action", "Download", "Tachiyomi Preview"); },
} });
}); window.location.assign(KANADE_LATEST);
}, window.ga("send", "event", "Action", "Download", "Tachiyomi Preview");
}, }
}; });
</script> },
},
<style lang="stylus"> };
#DownloadButtons </script>
text-align center
button <style lang="stylus">
display inline-block #DownloadButtons
margin 0.5em 0 text-align center
padding 1em 1em button
width 9em display inline-block
background $accentColor margin 0.5em 0
border none padding 1em 1em
border-radius 4px width 9em
color #fff background $accentColor
font-family inherit border none
font-size 1em border-radius 4px
font-weight 400 color #fff
letter-spacing 0.02em font-family inherit
line-height 1 font-size 1em
transition background-color .1s ease font-weight 400
text-decoration none letter-spacing 0.02em
text-transform uppercase line-height 1
cursor pointer transition background-color .1s ease
&:hover text-decoration none
background darken($accentColor, 10%) text-transform uppercase
&:focus cursor pointer
box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4) &:hover
outline none background darken($accentColor, 10%)
.downloadContainer &:focus
user-select none box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
#download outline none
&Stable .downloadContainer
background-color $accentColor user-select none
&:hover #download
background-color lighten($accentColor, 10%) &Stable
&Preview background-color $accentColor
background-color $accentColorSecondary &:hover
&:hover background-color lighten($accentColor, 10%)
background-color lighten($accentColorSecondary, 10%) &Preview
.versionNotice background-color $accentColorSecondary
font-size 0.9rem &:hover
</style> background-color lighten($accentColorSecondary, 10%)
.versionNotice
font-size 0.9rem
</style>

13
src/.vuepress/components/ReleaseDate.vue
View File

@ -5,9 +5,6 @@
</template> </template>
<script> <script>
import axios from "axios";
import { GITHUB_LATEST_API } from "../constants";
export default { export default {
data() { data() {
return { return {
@ -17,9 +14,13 @@ export default {
}, },
async mounted() { async mounted() {
const { data } = await axios.get(GITHUB_LATEST_API); try {
this.$data.releasePublishRelative = this.$moment(data.published_at).fromNow(); const { data } = await this.$store.dispatch("getStableReleaseData");
this.$data.releasePublishExact = this.$moment(data.published_at).toString(); this.$data.releasePublishRelative = this.$moment(data.published_at).fromNow();
this.$data.releasePublishExact = this.$moment(data.published_at).toString();
} catch (e) {
console.error(e);
}
}, },
}; };
</script> </script>

11
src/.vuepress/components/VersionTag.vue
View File

@ -8,9 +8,6 @@
</template> </template>
<script> <script>
import axios from "axios";
import { GITHUB_LATEST_API } from "../constants";
export default { export default {
props: { props: {
fileName: { fileName: {
@ -25,8 +22,12 @@ export default {
}, },
async mounted() { async mounted() {
const { data } = await axios.get(GITHUB_LATEST_API); try {
this.$data.tagName = data.tag_name.slice(1); const { data } = await this.$store.dispatch("getStableReleaseData");
this.$data.tagName = data.tag_name.slice(1);
} catch (e) {
console.error(e);
}
}, },
}; };
</script> </script>

10
src/.vuepress/components/WhatsNew.vue
View File

@ -12,9 +12,7 @@
</template> </template>
<script> <script>
import axios from "axios";
import marked from "marked"; import marked from "marked";
import { GITHUB_LATEST_API } from "../constants";
export default { export default {
data() { data() {
@ -24,8 +22,12 @@ export default {
}, },
async mounted() { async mounted() {
const { data } = await axios.get(GITHUB_LATEST_API); try {
this.$data.whatsNew = marked(data.body); const { data } = await this.$store.dispatch("getStableReleaseData");
this.$data.whatsNew = marked(data.body);
} catch (e) {
console.error(e);
}
}, },
}; };
</script> </script>

3
src/.vuepress/enhanceApp.js
View File

@ -7,6 +7,8 @@ import { VueAgile } from "vue-agile";
import VueSweetalert2 from "vue-sweetalert2"; import VueSweetalert2 from "vue-sweetalert2";
import VueMoment from "vue-moment"; import VueMoment from "vue-moment";
import store from "./store";
export default ({ export default ({
Vue, // the version of Vue being used in the VuePress app Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance options, // the options for the root Vue instance
@ -17,4 +19,5 @@ export default ({
Vue.component("Agile", VueAgile); Vue.component("Agile", VueAgile);
Vue.use(VueSweetalert2); Vue.use(VueSweetalert2);
Vue.use(VueMoment); Vue.use(VueMoment);
Vue.mixin({ store });
}; };

63
src/.vuepress/store/index.js Normal file
View 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);
});
});
},
},
});

12
src/.vuepress/theme/components/Home.vue
View File

@ -60,10 +60,8 @@
</template> </template>
<script> <script>
import axios from "axios";
import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue"; import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
import BookOpenVariantIcon from "vue-material-design-icons/BookOpenVariant.vue"; import BookOpenVariantIcon from "vue-material-design-icons/BookOpenVariant.vue";
import { GITHUB_LATEST_API } from "../../constants";
export default { export default {
name: "Home", name: "Home",
@ -101,9 +99,13 @@ export default {
}, },
async mounted() { async mounted() {
const { data } = await axios.get(GITHUB_LATEST_API); try {
const apkAsset = data.assets.find((a) => a.name.includes(".apk")); const { data } = await this.$store.dispatch("getStableReleaseData");
this.$data.browserDownloadUrl = apkAsset.browser_download_url; const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
this.$data.browserDownloadUrl = apkAsset.browser_download_url;
} catch (e) {
console.error(e);
}
}, },
}; };
</script> </script>