Add download link at index page (#46)

Add download link at index page
This commit is contained in:
arkon 2019-09-24 22:11:35 -04:00 committed by GitHub
commit d4b02ef73a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 355 additions and 18 deletions

67
package-lock.json generated
View File

@ -842,6 +842,32 @@
"to-fast-properties": "^2.0.0"
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.25",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz",
"integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.25",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz",
"integrity": "sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.25"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.11.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
"integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.25"
}
},
"@fortawesome/vue-fontawesome": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.7.tgz",
"integrity": "sha512-YCw2Q2m4fxzyFsPOH3uDYMoJztTD+pT+AAyse4LFpbdrBg+r8ueaVT8BFnXEjrGwMDJJeXrwJ5AOC6q/JWBI4w=="
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -4263,7 +4289,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -4284,12 +4311,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -4304,17 +4333,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -4431,7 +4463,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -4443,6 +4476,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -4457,6 +4491,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -4464,12 +4499,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -4488,6 +4525,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -4568,7 +4606,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -4580,6 +4619,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -4665,7 +4705,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -4701,6 +4742,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -4720,6 +4762,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -4763,12 +4806,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},

View File

@ -18,6 +18,9 @@
"vuepress": "^1.1.0"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/vue-fontawesome": "^0.1.7",
"axios": "^0.19.0",
"iso-639-1": "^2.1.0",
"lodash.groupby": "^4.6.0",

View File

@ -13,7 +13,14 @@
{{ extension.pkg }}
</div>
</div>
<a :href="apkUrl(extension.apk)" class="button" download>Download</a>
<a
:href="apkUrl(extension.apk)"
class="button"
title="Download APK"
download>
<font-awesome-icon icon="download" />
<span>Download</span>
</a>
</div>
</div>
</div>
@ -28,11 +35,12 @@ import ISO6391 from 'iso-639-1';
const EXTENSION_JSON = 'https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/index.json';
export default {
data: function () {
data () {
return {
extensions: []
}
},
methods: {
langName: code => code === 'all' ? 'All' : `${ISO6391.getName(code)} (${ISO6391.getNativeName(code)})`,
iconUrl (pkg) {
@ -41,6 +49,7 @@ export default {
},
apkUrl: apk => `https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/apk/${apk}`
},
async beforeMount () {
const { data } = await axios.get(EXTENSION_JSON);
const values = Object.values(groupBy(data, 'lang'));
@ -78,7 +87,7 @@ export default {
font-size: 0.8em;
color: #fff;
background-color: #2e84bf;
padding: 0.3rem;
padding: 0.5rem;
border-radius: 4px;
transition: background-color 0.1s ease;
box-sizing: border-box;
@ -89,12 +98,18 @@ export default {
background-color: #3992cf;
text-decoration: none !important;
}
svg + span {
margin-left: 0.25rem;
}
}
}
@media (max-width: 767px) {
.extension .extension-text .down {
display: none;
.extension {
.extension-text .down, .button span {
display: none;
}
}
}
</style>

View File

@ -1,8 +1,16 @@
import './styles/index.scss'
import './styles/index.scss';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faDownload } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faDownload);
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {}
}) => {
Vue.component('font-awesome-icon', FontAwesomeIcon);
};

View File

@ -0,0 +1,263 @@
<template>
<main class="home" aria-labelledby="main-title">
<header class="hero">
<img
v-if="data.heroImage"
:src="$withBase(data.heroImage)"
:alt="data.heroAlt || 'hero'"
>
<h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
<p class="description">
{{ data.tagline || $description || 'Welcome to your VuePress site' }}
</p>
<p
class="action"
v-if="data.actionText && data.actionLink"
>
<a
class="action-button"
rel="noopener noreferrer"
:href="browserDownloadUrl || null"
title="Download latest release"
download
>
<font-awesome-icon icon="download" />
<span>Download {{ tagName || 'vX.X.X' }}</span>
</a>
<NavLink
class="action-button secundary"
:item="actionLink"
/>
</p>
</header>
<div
class="features"
v-if="data.features && data.features.length"
>
<div
class="feature"
v-for="(feature, index) in data.features"
:key="index"
>
<h2>{{ feature.title }}</h2>
<p>{{ feature.details }}</p>
</div>
</div>
<Content class="theme-default-content custom"/>
<footer
class="footer"
v-if="data.footer"
>
{{ data.footer }}
</footer>
</main>
</template>
<script>
import NavLink from '@parent-theme/components/NavLink.vue';
import axios from 'axios';
const RELEASE_URL = 'https://api.github.com/repos/inorichi/tachiyomi/releases/latest';
export default {
components: { NavLink },
data () {
return {
tagName: '',
browserDownloadUrl: '',
}
},
computed: {
data () {
return this.$page.frontmatter;
},
actionLink () {
return {
link: this.data.actionLink,
text: this.data.actionText
};
}
},
async mounted () {
const { data } = await axios.get(RELEASE_URL);
// Maybe eventually some release has more than the apk in assets.
const apkAsset = data.assets.find(a => a.name.includes('.apk'));
// Set the values.
this.$data.tagName = data.tag_name;
this.$data.browserDownloadUrl = apkAsset.browser_download_url;
}
}
</script>
<style lang="stylus">
// Use Stylus to use the layout variables.
.home {
padding: $navbarHeight 2rem 0;
max-width: 960px;
margin: 0px auto;
display: block;
.hero {
text-align: center;
img {
max-width: 100%;
max-height: 280px;
display: block;
margin: 3rem auto 1.5rem;
}
h1 {
font-size: 3rem;
}
h1, .description, .action {
margin: 1.8rem auto;
}
.description {
max-width: 35rem;
font-size: 1.6rem;
line-height: 1.3;
color: lighten($textColor, 40%);
}
.action-button {
display: inline-block;
font-size: 1.2rem;
color: #fff;
background-color: $accentColor;
padding: 0.8rem 1.6rem;
border-radius: 4px;
transition: background-color .1s ease;
box-sizing: border-box;
border-bottom: 1px solid darken($accentColor, 10%);
&:hover {
background-color: lighten($accentColor, 10%);
}
&.secundary {
background-color: darken($borderColor, 5%);
color: lighten($textColor, 25%);
border-bottom-color: darken($borderColor, 15%);
&:hover {
background-color: lighten($borderColor, 5%);
}
}
svg + span {
margin-left: 0.5rem;
}
& + .action-button {
margin-left: 0.5rem;
}
}
}
.features {
border-top: 1px solid $borderColor;
padding: 1.2rem 0;
margin-top: 2.5rem;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: stretch;
justify-content: space-between;
}
.feature {
flex-grow: 1;
flex-basis: 30%;
max-width: 30%;
h2 {
font-size: 1.4rem;
font-weight: 500;
border-bottom: none;
padding-bottom: 0;
color: lighten($textColor, 10%);
}
p {
color: lighten($textColor, 25%);
}
}
.footer {
padding: 2.5rem;
border-top: 1px solid $borderColor;
text-align: center;
color: lighten($textColor, 25%);
}
}
@media (max-width: $MQMobile) {
.home {
.features {
flex-direction: column;
}
.feature {
max-width: 100%;
padding: 0 2.5rem;
}
.hero {
.action-button + .action-button {
margin-left: 0;
margin-top: 0.5rem;
}
}
}
}
@media (max-width: $MQMobileNarrow) {
.home {
padding-left: 1.5rem;
padding-right: 1.5rem;
.hero {
img {
max-height: 210px;
margin: 2rem auto 1.2rem;
}
h1 {
font-size: 2rem;
}
h1, .description, .action {
margin: 1.2rem auto;
}
.description {
font-size: 1.2rem;
}
.action-button {
font-size: 1rem;
padding: 0.6rem 1.2rem;
}
.feature h2 {
font-size: 1.25rem;
}
}
}
}
</style>

View File

@ -0,0 +1,3 @@
module.exports = {
extend: '@vuepress/theme-default'
};