Configure automatic linting (#83)

* Configure automatic linting

* Remove FontAwesome icons

* Ignore mismatching component name
This commit is contained in:
arkon 2020-01-08 23:15:44 -05:00 committed by Simon M
parent cf40ac73ad
commit f3f186cef0
12 changed files with 1325 additions and 181 deletions

22
.eslintrc.json Normal file
View File

@ -0,0 +1,22 @@
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"plugin:vue/essential",
"vuepress",
"prettier"
],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"vue",
"prettier"
],
"rules": {
"prettier/prettier": ["error"]
}
}

1134
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -2,7 +2,8 @@
"name": "tachiyomi-website",
"version": "0.0.0",
"scripts": {
"build": "vuepress build src",
"build": "npm run lint && vuepress build src",
"lint": "eslint --fix src/.vuepress/**/*.{js,vue} --no-ignore",
"serve": "vuepress dev src"
},
"repository": {
@ -13,7 +14,13 @@
"devDependencies": {
"@vuepress/plugin-back-to-top": "^1.2.0",
"@vuepress/plugin-google-analytics": "^1.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.9.0",
"eslint-config-vuepress": "^2.1.0",
"eslint-plugin-prettier": "^3.1.2",
"node-sass": "^4.13.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.0",
"vue-agile": "^1.0.11",
"vuepress": "^1.2.0",
@ -21,11 +28,8 @@
"vuepress-plugin-container": "^2.1.2"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-solid-svg-icons": "^5.12.0",
"@fortawesome/vue-fontawesome": "^0.1.9",
"@mdi/font": "^4.7.95",
"axios": "^0.19.0",
"axios": "^0.19.1",
"iso-639-1": "^2.1.0",
"lodash.groupby": "^4.6.0",
"lodash.sortby": "^4.7.0",

View File

@ -1,18 +1,18 @@
<template>
<agile :options="config" :id="name">
<Agile :id="name" :options="config">
<slot />
<template slot="prevButton">
<MaterialIcon iconName="navigate_next" />
<MaterialIcon icon-name="navigate_next" />
</template>
<template slot="nextButton">
<MaterialIcon iconName="navigate_next" />
<MaterialIcon icon-name="navigate_next" />
</template>
</agile>
</Agile>
</template>
<script>
export default {
name: "carousel",
name: "Carousel",
props: {
name: {
type: String,
@ -24,21 +24,21 @@ export default {
return {
navButtons: true,
centerMode: true
};
}
}
}
}
}
};
</script>
<style>
.agile {
background: #F0F4F8;
background: #f0f4f8;
border-radius: 1em;
}
.agile__nav-button {
background: hsla(0,0%,100%,.75);
background: hsla(0, 0%, 100%, 0.75);
border: none;
color: rgba(44, 62, 80);
cursor: pointer;
@ -47,13 +47,13 @@ export default {
top: 50%;
transform: translateY(-50%);
position: absolute;
transition-duration: .3s;
transition-duration: 0.3s;
width: 50px;
border-radius: 99em;
}
.agile__nav-button:hover {
background-color: rgba(0,0,0, .5);
background-color: rgba(0, 0, 0, 0.5);
opacity: 1;
}
@ -62,7 +62,7 @@ export default {
}
.agile__nav-button--prev i {
transform: rotateZ(180deg)
transform: rotateZ(180deg);
}
.agile__nav-button--next {
@ -81,8 +81,8 @@ export default {
}
.agile__dot button {
background-color: hsla(0,0%,100%,.75);
border: 1px solid hsla(0,0%,100%,.75);
background-color: hsla(0, 0%, 100%, 0.75);
border: 1px solid hsla(0, 0%, 100%, 0.75);
border-radius: 50%;
cursor: pointer;
display: block;
@ -91,7 +91,7 @@ export default {
line-height: 0;
margin: 0;
padding: 0;
transition-duration: .3s;
transition-duration: 0.3s;
width: 10px;
}

View File

@ -1,19 +1,19 @@
<template>
<div class="slide" :id="name">
<div :id="name" class="slide">
<slot />
</div>
</template>
<script>
export default {
name: "carousel-item",
name: "CarouselItem",
props: {
name: {
type: String,
default: "carousel-cell"
}
}
}
};
</script>
<style>

View File

@ -1,21 +1,40 @@
<template>
<ul class="no-select download-list">
<li>
<a class="download-link" rel="noopener noreferrer" :href="browserDownloadUrl || 'https://github.com/inorichi/tachiyomi/releases/latest'" :title="tagName" download>
<a
class="download-link"
rel="noopener noreferrer"
:href="
browserDownloadUrl ||
'https://github.com/inorichi/tachiyomi/releases/latest'
"
:title="tagName"
download
>
<div class="download-button stable">
<span class="download-area">
<MaterialIcon name="download-get_app download-icons" icon-name="get_app"/>
<span class="download-text-stable download-text">Stable release</span>
<MaterialIcon
name="download-get_app download-icons"
icon-name="get_app"
/>
<span class="download-text-stable download-text"
>Stable release</span
>
</span>
</div>
</a>
</lI>
</li>
<li>
<a class="download-link" href="http://tachiyomi.kanade.eu/latest">
<div class="download-button dev">
<div class="download-area">
<MaterialIcon name="download-bug_report download-icons" icon-name="bug_report"/>
<span class="download-text-dev download-text">Dev release</span>
<MaterialIcon
name="download-bug_report download-icons"
icon-name="bug_report"
/>
<span class="download-text-dev download-text"
>Dev release</span
>
</div>
</div>
</a>
@ -25,19 +44,21 @@
<style scoped lang="scss">
* {
font-family: "Open Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: "Open Sans", Roboto, -apple-system, BlinkMacSystemFont,
"Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
}
ul {
width: 100%;
text-align: center;
margin: .625em 0 0 0;
margin: 0.625em 0 0 0;
padding: 0;
}
li {
display: inline-block;
margin: .3125em .625em .3125em .625em;
margin: 0.3125em 0.625em 0.3125em 0.625em;
}
a.download-link {
@ -49,13 +70,13 @@ a.download-link {
cursor: pointer;
justify-content: center;
align-items: center;
background-color: #2E84BF;
background-color: #2e84bf;
width: 11.25em;
height: 3.75em;
border-radius: .3125em;
border-radius: 0.3125em;
padding: 0 1em 0 1em;
&.stable {
background-color: #2E84BF;
background-color: #2e84bf;
&:hover {
filter: brightness(110%);
}
@ -68,26 +89,26 @@ a.download-link {
}
.download-area {
font-size: 1.125em;
color: #FFFFFF;
color: #ffffff;
display: flex;
align-items: center;
.download-icons {
color: #FFFFFF;
color: #ffffff;
max-width: 2em;
font-size: .875em;
font-size: 0.875em;
}
.download-get_app {
margin-left: .188em;
margin-right: .250em;
margin-left: 0.188em;
margin-right: 0.25em;
}
.download-bug_report {
margin-right: .250em;
margin-right: 0.25em;
}
.download-text-stable {
margin-right: .375em;
margin-right: 0.375em;
}
.download-text-dev {
margin-right: .063em;
margin-right: 0.063em;
}
}
}
@ -95,26 +116,26 @@ a.download-link {
</style>
<script>
import axios from 'axios';
import axios from "axios";
const RELEASE_URL = 'https://api.github.com/repos/inorichi/tachiyomi/releases/latest';
const RELEASE_URL =
"https://api.github.com/repos/inorichi/tachiyomi/releases/latest";
export default {
data() {
return {
tagName: '',
browserDownloadUrl: '',
}
tagName: "",
browserDownloadUrl: ""
};
},
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'));
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>

View File

@ -3,16 +3,24 @@
<div v-for="extensionGroup in extensions" :key="extensionGroup[0].lang">
<h3>{{ langName(extensionGroup[0].lang) }}</h3>
<div
class="anchor"
v-for="extension in extensionGroup"
:id="extension.name.split(': ')[1]"
:key="extension.apk"
:id="extension.name.split(': ')[1]">
class="anchor"
>
<div class="extension">
<a :href="`#${extension.name.split(': ')[1]}`" aria-hidden="true" class="header-anchor"># </a>
<img :src="iconUrl(extension.apk)" width="42" height="42">
<a
:href="`#${extension.name.split(': ')[1]}`"
aria-hidden="true"
class="header-anchor"
>#
</a>
<img :src="iconUrl(extension.apk)" width="42" height="42" />
<div class="extension-text">
<div class="upper">
<span class="bold">{{ extension.name.split(': ')[1] }}</span>
<span class="bold">{{
extension.name.split(": ")[1]
}}</span>
<Badge :text="'v' + extension.version" />
</div>
<div class="down">
@ -23,8 +31,9 @@
:href="apkUrl(extension.apk)"
class="button"
title="Download APK"
download>
<font-awesome-icon icon="download" />
download
>
<MaterialIcon icon-name="cloud_download" />
<span>Download</span>
</a>
</div>
@ -34,32 +43,24 @@
</template>
<script>
import axios from 'axios';
import groupBy from 'lodash.groupby';
import sortBy from 'lodash.sortby';
import ISO6391 from 'iso-639-1';
import axios from "axios";
import groupBy from "lodash.groupby";
import sortBy from "lodash.sortby";
import ISO6391 from "iso-639-1";
const EXTENSION_JSON = 'https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/index.json';
const EXTENSION_JSON =
"https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/index.json";
export default {
data() {
return {
extensions: []
}
},
methods: {
langName: code => code === 'all' ? 'All' : `${ISO6391.getName(code)} (${ISO6391.getNativeName(code)})`,
iconUrl (pkg) {
const pkgName = pkg.substring(0, pkg.lastIndexOf('.'));
return `https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/icon/${pkgName}.png`;
},
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'));
const values = Object.values(groupBy(data, "lang"));
this.$data.extensions = sortBy(values, [g => this.langName(g[0].lang)]);
},
@ -67,8 +68,21 @@ export default {
if (location.hash) {
location.replace(location.hash);
}
},
methods: {
langName: code =>
code === "all"
? "All"
: `${ISO6391.getName(code)} (${ISO6391.getNativeName(code)})`,
iconUrl(pkg) {
const pkgName = pkg.substring(0, pkg.lastIndexOf("."));
return `https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/icon/${pkgName}.png`;
},
apkUrl: apk =>
`https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/apk/${apk}`
}
}
};
</script>
<style lang="scss">
@ -118,11 +132,15 @@ export default {
text-decoration: none !important;
}
svg + span {
.material-holder {
color: #fff;
+ span {
margin-left: 0.25rem;
}
}
}
}
.anchor {
margin-top: -3.9em;
@ -141,7 +159,8 @@ export default {
@media (max-width: 767px) {
.extension {
.extension-text .down, .button span {
.extension-text .down,
.button span {
display: none;
}
}

View File

@ -1,6 +1,10 @@
<template>
<div :class="name" class="material-holder">
<i v-if="legacy" :class="iconName" class="material-legacy-icons mdi"></i>
<i
v-if="legacy"
:class="iconName"
class="material-legacy-icons mdi"
></i>
<i v-else class="material-icons">{{ iconName }}</i>
</div>
</template>
@ -28,7 +32,7 @@ export default {
required: true
}
}
}
};
</script>
<style scoped>
@ -41,7 +45,7 @@ export default {
}
.material-icons {
font-family: 'Material Icons';
font-family: "Material Icons";
font-size: 1.35em;
font-style: normal;
position: relative;
@ -54,12 +58,12 @@ export default {
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
.material-legacy-icons {
font-family: 'Material Design Icons';
font-family: "Material Design Icons";
font-size: 1.35em;
font-style: normal;
}

View File

@ -1,38 +1,34 @@
module.exports = [
{
text: 'Need help?',
link: '/help/',
text: "Need help?",
link: "/help/",
items: [
{
text: 'Frequently Asked Questions',
text: "Frequently Asked Questions",
items: [
{ text: 'Application', link: '/help/faq/application' },
{ text: 'Extensions', link: '/help/faq/extensions' }
{ text: "Application", link: "/help/faq/application" },
{ text: "Extensions", link: "/help/faq/extensions" }
]
},
{
text: 'Guides',
text: "Guides",
items: [
{ text: 'General', link: '/help/guides/getting-started' },
{ text: 'Menus', link: '/help/guides/menus' },
{ text: 'Settings', link: '/help/guides/settings' },
{ text: 'Forks', link: '/help/guides/forks' }
{ text: "General", link: "/help/guides/getting-started" },
{ text: "Menus", link: "/help/guides/menus" },
{ text: "Settings", link: "/help/guides/settings" },
{ text: "Forks", link: "/help/guides/forks" }
]
},
{
text: 'Contribution',
items: [
{ text: 'How can I help?', link: '/help/contribution' }
]
text: "Contribution",
items: [{ text: "How can I help?", link: "/help/contribution" }]
},
{
text: 'Available extensions',
items: [
{ text: 'List', link: '/extensions/' }
]
text: "Available extensions",
items: [{ text: "List", link: "/extensions/" }]
}
]
},
{ text: 'Discord', link: 'https://discord.gg/tachiyomi' },
{ text: 'Reddit', link: 'https://reddit.com/r/Tachiyomi' }
{ text: "Discord", link: "https://discord.gg/tachiyomi" },
{ text: "Reddit", link: "https://reddit.com/r/Tachiyomi" }
];

View File

@ -1,18 +1,39 @@
module.exports = [
['clean-urls', {
normalSuffix: '/' }],
['@vuepress/back-to-top'],
['@vuepress/google-analytics', {
'ga': 'UA-148212082-1' }],
['vuepress-plugin-container', {
type: 'expander',
before: info => `<details class="expander content"><summary class="expander expansion">${info}</summary>`,
after: '</details>'}],
['vuepress-plugin-container', {
type: 'guide',
[
"clean-urls",
{
normalSuffix: "/"
}
],
["@vuepress/back-to-top"],
[
"@vuepress/google-analytics",
{
ga: "UA-148212082-1"
}
],
[
"vuepress-plugin-container",
{
type: "expander",
before: info =>
`<details class="expander content"><summary class="expander expansion">${info}</summary>`,
after: "</details>"
}
],
[
"vuepress-plugin-container",
{
type: "guide",
before: info => `<div class="guide"><p class="title">${info}</p>`,
after: '</div>'}],
['vuepress-plugin-container', {
type: 'aside',
defaultTitle: ''}]
after: "</div>"
}
],
[
"vuepress-plugin-container",
{
type: "aside",
defaultTitle: ""
}
]
];

View File

@ -1,19 +1,14 @@
import './styles/index.scss';
import './styles/fonts.scss'
import { library } from '@fortawesome/fontawesome-svg-core';
import { faDownload } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { VueAgile } from 'vue-agile'
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);
Vue.component('agile', VueAgile)
// eslint-disable-next-line vue/match-component-file-name
Vue.component('Agile', VueAgile)
};

View File

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