Update dependencies and lint for errors (tachiyomiorg#426)

* Update dependencies

* Update eslint-config-vuepress and fix warnings

* Linting

* Save webpack locally

Netlify gave an error for not having it but it wasn't needed before.

* Downgrade webpack

Some users have experienced the Netlify error when upgrading to recently released version 5, so downgrading to latest 4 release.

* Set 'htmlWhitespaceSensitivity' to 'ignore'

.prettierrc

@@ -4,5 +4,6 @@
 	"printWidth": 120,
 	"trailingComma": "es5",
 	"bracketSpacing": true,
+	"htmlWhitespaceSensitivity": "ignore",
 	"endOfLine": "auto"
 }

package.json

@@ -21,27 +21,28 @@
 	},
 	"homepage": "https://github.com/tachiyomiorg/website#readme",
 	"devDependencies": {
-		"@vuepress/plugin-active-header-links": "^1.6.0",
-		"@vuepress/plugin-back-to-top": "^1.6.0",
-		"@vuepress/plugin-google-analytics": "^1.6.0",
-		"@vuepress/plugin-pwa": "^1.6.0",
-		"eslint": "^7.11.0",
-		"eslint-config-vuepress": "^2.2.0",
+		"@vuepress/plugin-active-header-links": "^1.7.1",
+		"@vuepress/plugin-back-to-top": "^1.7.1",
+		"@vuepress/plugin-google-analytics": "^1.7.1",
+		"@vuepress/plugin-pwa": "^1.7.1",
+		"eslint": "^7.12.0",
+		"eslint-config-vuepress": "^3.0.1",
 		"eslint-plugin-markdown": "^1.0.2",
-		"eslint-plugin-vue": "^7.0.1",
+		"eslint-plugin-vue": "^7.1.0",
 		"node-sass": "^4.14.1",
 		"prettier": "^2.1.2",
-		"sass-loader": "^10.0.3",
-		"vuepress": "^1.6.0",
+		"sass-loader": "^10.0.4",
+		"vuepress": "^1.7.1",
 		"vuepress-plugin-clean-urls": "^1.1.2",
 		"vuepress-plugin-container": "^2.1.5",
 		"vuepress-plugin-element-ui": "^1.1.0",
-		"vuepress-plugin-zooming": "^1.1.8"
+		"vuepress-plugin-zooming": "^1.1.8",
+		"webpack": "^4.44.2"
 	},
 	"dependencies": {
-		"@mr-hope/vuepress-plugin-last-update": "^1.0.1",
-		"@mr-hope/vuepress-plugin-sitemap": "^1.0.1",
-		"axios": "^0.20.0",
+		"@mr-hope/vuepress-plugin-last-update": "^1.4.7",
+		"@mr-hope/vuepress-plugin-sitemap": "^1.4.7",
+		"axios": "^0.21.0",
 		"core-js": "2.6.4",
 		"element-ui": "^2.13.2",
 		"iso-639-1": "^2.1.4",

src/.vuepress/components/Carousel.vue

@@ -1,10 +1,10 @@
 <template>
 	<Agile :id="name" :options="config">
 		<slot />
-		<template slot="prevButton">
+		<template #prevButton>
 			<MaterialIcon icon="navigate_next" />
 		</template>
-		<template slot="nextButton">
+		<template #nextButton>
 			<MaterialIcon icon="navigate_next" />
 		</template>
 	</Agile>

src/.vuepress/components/DownloadButtons.vue

@@ -1,16 +1,20 @@
 <template>
 	<div id="DownloadButtons">
-		<el-button type="success" icon="el-icon-download" @click="downloadStable" @keyup.enter="downloadStable"
-			><span class="spacing">Stable</span><br /><span class="downloadTag">{{
-				this.$data.tagName
-			}}</span></el-button
-		>
-		<el-button type="warning" icon="el-icon-cpu" @click="downloadPreview" @keyup.enter="downloadPreview"
-			><span class="spacing">Preview</span><br /><span class="downloadTag">{{
-				this.$data.previewTagName
-			}}</span></el-button
-		>
-		<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span>
+		<ElButton type="success" icon="el-icon-download" @click="downloadStable" @keyup.enter="downloadStable">
+			<span class="spacing">Stable</span>
+			<br />
+			<span class="downloadTag">{{ this.$data.tagName }}</span>
+		</ElButton>
+		<ElButton type="warning" icon="el-icon-cpu" @click="downloadPreview" @keyup.enter="downloadPreview">
+			<span class="spacing">Preview</span>
+			<br />
+			<span class="downloadTag">{{ this.$data.previewTagName }}</span>
+		</ElButton>
+		<span class="versionNotice">
+			Requires
+			<strong>Android 5.0</strong>
+			or higher.
+		</span>
 	</div>
 </template>
 

src/.vuepress/components/ExtensionList.vue

@@ -9,7 +9,7 @@
 				class="anchor"
 			>
 				<div class="extension">
-					<a :href="`#${extension.name.split(': ')[1]}`" aria-hidden="true" class="header-anchor"># </a>
+					<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">

src/.vuepress/components/ForkButtons.vue

@@ -6,9 +6,13 @@
 		<button class="githubForkButton" :style="githubForkStyle" :onclick="githubForkLink">
 			{{ githubForkLabel }}
 		</button>
-		<br>
-		<span class="versionNotice">Requires <strong>Android {{androidVersion}}</strong> or higher.</span>
-	</div>	
+		<br />
+		<span class="versionNotice">
+			Requires
+			<strong>Android {{ androidVersion }}</strong>
+			or higher.
+		</span>
+	</div>
 </template>
 
 <script>
@@ -44,7 +48,7 @@ export default {
 			type: String,
 			default: "",
 		},
-		androidVersion:  {
+		androidVersion: {
 			type: String,
 			default: "5.0",
 		},

src/.vuepress/components/MaterialIcon.vue

@@ -22,7 +22,7 @@ export default {
 		},
 		icon: {
 			type: String,
-			required: true,
+			default: "",
 		},
 	},
 };

src/.vuepress/components/ReleaseDate.vue

@@ -1,19 +1,13 @@
 <template>
 	<div v-if="stable" class="buildTime">
-		<el-tooltip placement="top" open-delay="250">
-			<div slot="content">
-				<strong>{{ stablePublishExact }}</strong>
-			</div>
+		<ElTooltip :content="stablePublishExact" placement="top" :open-delay="250">
 			<span>{{ stablePublishRelative }}</span>
-		</el-tooltip>
+		</ElTooltip>
 	</div>
 	<div v-else-if="preview" class="buildTime">
-		<el-tooltip placement="bottom-end" open-delay="250">
-			<div slot="content">
-				<strong>{{ previewPublishExact }}</strong>
-			</div>
+		<ElTooltip :content="previewPublishExact" placement="bottom-end" :open-delay="250">
 			<span>{{ previewPublishRelative }}</span>
-		</el-tooltip>
+		</ElTooltip>
 	</div>
 	<span v-else>You need to specify props.</span>
 </template>

src/.vuepress/components/WhatsNew.vue

@@ -1,6 +1,10 @@
 <template>
 	<div class="guide whatsNew">
-		<p class="title"><MaterialIcon icon="new_releases" /> What's new</p>
+		<p class="title">
+			<MaterialIcon icon="new_releases" />
+			What's new
+		</p>
+		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-html="whatsNew"></div>
 		<div class="note">
 			<p>

src/.vuepress/config.js

@@ -47,9 +47,5 @@ module.exports = {
 		},
 	},
 	plugins: pluginsConfig,
-	extraWatchFiles: [
-		".vuepress/config/plugins.js",
-		".vuepress/config/navBar.js",
-		".vuepress/config/sideBar.js",
-	],
+	extraWatchFiles: [".vuepress/config/plugins.js", ".vuepress/config/navBar.js", ".vuepress/config/sideBar.js"],
 };

src/.vuepress/theme/components/AlgoliaSearchBox.vue

@@ -1,14 +1,6 @@
 <template>
-	<form
-		id="search-form"
-		class="algolia-search-wrapper search-box"
-		role="search"
-	>
-		<input
-			id="algolia-search-input"
-			class="search-query"
-			:placeholder="placeholder"
-		/>
+	<form id="search-form" class="algolia-search-wrapper search-box" role="search">
+		<input id="algolia-search-input" class="search-query" :placeholder="placeholder" />
 	</form>
 </template>
 
@@ -47,12 +39,8 @@ export default {
 	methods: {
 		initialize(userOptions, lang) {
 			Promise.all([
-				import(
-					/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"
-				),
-				import(
-					/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"
-				),
+				import(/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"),
+				import(/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"),
 			]).then(([docsearch]) => {
 				// eslint-disable-next-line no-param-reassign
 				docsearch = docsearch.default;
@@ -62,26 +50,20 @@ export default {
 					inputSelector: "#algolia-search-input",
 					// #697 Make docsearch work well at i18n mode.
 					algoliaOptions: {
-						facetFilters: [`lang:${lang}`].concat(
-							algoliaOptions.facetFilters || []
-						),
+						facetFilters: [`lang:${lang}`].concat(algoliaOptions.facetFilters || []),
 						...algoliaOptions,
 					},
 					handleSelected: (input, event, suggestion) => {
 						const { pathname, hash } = new URL(suggestion.url);
-						const routepath = pathname.replace(
-							this.$site.base,
-							"/"
-						);
+						const routepath = pathname.replace(this.$site.base, "/");
 						this.$router.push(`${routepath}${hash}`);
 					},
 				});
 			});
 		},
 
 		update(options, lang) {
-			this.$el.innerHTML =
-				'<input id="algolia-search-input" class="search-query">';
+			this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">';
 			this.initialize(options, lang);
 		},
 	},

src/.vuepress/theme/components/Navbar.vue

@@ -1,5 +1,6 @@
 <template>
 	<header class="navbar">
+		<!-- eslint-disable-next-line vue/require-explicit-emits -->
 		<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
 
 		<RouterLink :to="$localePath" class="home-link">
@@ -9,13 +10,9 @@
 				:src="$withBase($site.themeConfig.logo)"
 				:alt="$siteTitle"
 			/>
-			<span
-				v-if="$siteTitle"
-				ref="siteName"
-				class="site-name"
-				:class="{ 'can-hide': $site.themeConfig.logo }"
-				>{{ $siteTitle }}</span
-			>
+			<span v-if="$siteTitle" ref="siteName" class="site-name" :class="{ 'can-hide': $site.themeConfig.logo }">
+				{{ $siteTitle }}
+			</span>
 		</RouterLink>
 
 		<div
@@ -30,12 +27,7 @@
 		>
 			<div v-if="$page.frontmatter.hideSearch" />
 			<AlgoliaSearchBox v-else-if="isAlgoliaSearch" :options="algolia" />
-			<SearchBox
-				v-else-if="
-					$site.themeConfig.search !== false &&
-					$page.frontmatter.search !== false
-				"
-			/>
+			<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
 			<NavLinks class="can-hide" />
 		</div>
 	</header>
@@ -65,17 +57,11 @@ export default {
 
 	computed: {
 		algolia() {
-			return (
-				this.$themeLocaleConfig.algolia ||
-				this.$site.themeConfig.algolia ||
-				{}
-			);
+			return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {};
 		},
 
 		isAlgoliaSearch() {
-			return (
-				this.algolia && this.algolia.apiKey && this.algolia.indexName
-			);
+			return this.algolia && this.algolia.apiKey && this.algolia.indexName;
 		},
 	},
 
@@ -87,16 +73,13 @@ export default {
 			// eslint-disable-next-line radix
 			parseInt(css(this.$el, "paddingRight"));
 		const handleLinksWrapWidth = () => {
-			if (
-				document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT
-			) {
+			if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
 				this.linksWrapMaxWidth = null;
 			} else {
 				this.linksWrapMaxWidth =
 					this.$el.offsetWidth -
 					NAVBAR_VERTICAL_PADDING -
-					((this.$refs.siteName && this.$refs.siteName.offsetWidth) ||
-						0);
+					((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
 			}
 		};
 		handleLinksWrapWidth();

src/help/faq/README.md

@@ -145,7 +145,7 @@ Learn how to create automatic backups [here](/help/guides/creating-backups/#turn
 #### What are some recommended extensions?
 Tachiyomi does not endorse or recommend any manga source, and there is no best extension. Rather, we encourage users to spend some time to try out a few sources themselves, and discover what sources work best for them. It's because what works well for somebody else, might not work well for you.
 
-<el-alert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></el-alert>
+<ElAlert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></ElAlert>
 
 #### What are scanlator sources?
 Manga that are not officially licensed are translated by scanlators, who either publish manga on their own website or **MangaDex**. Scanlator sources always provide the fastest manga updates and have the highest scan quality.
@@ -250,7 +250,7 @@ If pages are loading slowly or not at all, try:
 - Trying to **Clear chapter cache** under <Navigation item="more"/> → <Navigation item="settings"/> → <Navigation item="settings_advanced"/>.
 - Going to <Navigation item="browse"/> → <Navigation item="extensions"/> → **MangaDex** → **Image Server** and then selecting a *different* server location.
 
-<el-alert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></el-alert>
+<ElAlert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></ElAlert>
 
 #### Is there an alternate searching method?
 **MangaDex** allows you to search using the ID number to find manga. The easiest way to get the ID is by opening the manga in your browser and looking at the URL.