Change CSS pre-processor to SASS, add semicolon and corrects the other suggestions.

package.json

@@ -11,12 +11,14 @@
 	},
 	"private": true,
 	"devDependencies": {
-		"http-server": "^0.11.1",
+		"node-sass": "^4.12.0",
+		"sass-loader": "^8.0.0",
 		"vuepress": "^1.1.0"
 	},
 	"dependencies": {
 		"axios": "^0.19.0",
 		"iso-639-1": "^2.1.0",
-		"lodash": "^4.17.15"
+		"lodash.groupby": "^4.6.0",
+		"lodash.sortby": "^4.7.0"
 	}
 }

src/.vuepress/components/ExtensionList.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script>
-const axios = require('axios')
-const groupBy = require('lodash/groupBy')
-const sortBy = require('lodash/sortBy')
-const ISO6391 = require('iso-639-1').default
+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: function () {
@@ -36,45 +36,44 @@ export default {
 	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`
+			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'))
-		this.$data.extensions = sortBy(values, [g => this.langName(g[0].lang)])
+		const { data } = await axios.get(EXTENSION_JSON);
+		const values = Object.values(groupBy(data, 'lang'));
+		this.$data.extensions = sortBy(values, [g => this.langName(g[0].lang)]);
 	}
 }
 </script>
 
-<style>
+<style lang="scss">
 .extension {
 	display: flex;
 	align-items: center;
 	padding: 0.4em 0.2em;
-}
 
-.extension:not(:last-child) {
+	&:not(:last-child) {
 		border-bottom: 1px solid #eaecef;
 	}
 
-.extension img {
+	img {
 		margin-right: 0.5em;
 	}
 
-.extension .extension-text {
+	.extension-text {
 		flex: 1;
-}
 
-.extension .extension-text .down {
+		.down {
 			font-size: 0.8rem;
 			font-family: monospace;
 			color: #6c757d;
 		}
+	}
 
-.extension .button {
+	.button {
 		display: inline-block;
 		font-size: 0.8em;
 		color: #fff;
@@ -85,12 +84,13 @@ export default {
 		box-sizing: border-box;
 		border-bottom: 1px solid #2977ac;
 		text-transform: uppercase;
-}
 
-.extension .button:hover {
+		&:hover {
 			background-color: #3992cf;
 			text-decoration: none !important;
 		}
+	}
+}
 
 .bold {
 	font-weight: bold;

src/.vuepress/enhanceApp.js

@@ -0,0 +1,8 @@
+import './styles/index.scss'
+
+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
+}) => {}

src/.vuepress/styles/index.scss

@@ -0,0 +1,7 @@
+.centered {
+	text-align: center;
+}
+
+.custom-block.tip {
+	border-color: #2E84BF !important;
+}

src/.vuepress/styles/index.styl

@@ -1,5 +0,0 @@
-.centered
-	text-align center
-
-.custom-block.tip
-	border-color $accentColor

src/faq/README.md

@@ -6,9 +6,8 @@ sidebarDepth: 2
 
 # FAQ
 
-You can find more frequently asked questions [here].
-
-[here]: https://github.com/inorichi/tachiyomi/wiki/FAQ#frequently-asked-questions
+You can find more frequently asked questions
+[here](https://github.com/inorichi/tachiyomi/wiki/FAQ#frequently-asked-questions).
 
 ## App questions
 
@@ -19,10 +18,8 @@ sites which host content from scanlators, there's also extensions like
 Genkan, Madara, FoolSlide and ComiCake which contain sources which
 host directly from the scanlators own websites.
 
-[Here] is a good spreadsheet showing the different extensions and
-their sources.
-
-[Here]: https://docs.google.com/spreadsheets/d/1TyJEUg78WWH4zgnf3g6M2lkbWpBWbd40FYiPVQhW8IU/edit#gid=0
+[Here](https://docs.google.com/spreadsheets/d/1TyJEUg78WWH4zgnf3g6M2lkbWpBWbd40FYiPVQhW8IU/edit#gid=0)
+is a good spreadsheet showing the different extensions and their sources.
 
 ### How do I allow third-party installations?
 
@@ -85,7 +82,7 @@ the language of the source selected (i.e. English for KissManga
 source, Some sources have multiple Language too).
 :::
 
-If you want to help translate Tachiyomi, read [this].
+If you want to help translate Tachiyomi, read [this](https://github.com/inorichi/tachiyomi/wiki/Translation).
 
 <figure>
 	<a href="https://hosted.weblate.org/engage/tachiyomi/?utm_source=widget" target="_blank">
@@ -93,8 +90,6 @@ If you want to help translate Tachiyomi, read [this].
 	</a>
 </figure>
 
-[this]: https://github.com/inorichi/tachiyomi/wiki/Translation
-
 ## MangaDex
 
 ### No results when searching

src/guide/README.md

@@ -5,12 +5,13 @@ lang: en-US
 
 ## Installation
 
-Download the latest stable release of Tachiyomi from [GitHub].
+Download the latest stable release of Tachiyomi from
+[GitHub](https://github.com/inorichi/tachiyomi/releases/latest).
 
 `tachiyomi-vX.Y.Z.apk`
 
 If you want to try new features before they get to the stable release,
-you can download the dev version [here].
+you can download the dev version [here](http://tachiyomi.kanade.eu/latest).
 
 Open and install the `.apk` file you just downloaded from GitHub.
 
@@ -19,9 +20,6 @@ Open and install the `.apk` file you just downloaded from GitHub.
 	  :src="$withBase('/assets/media/installprompt.png')">
 </figure>
 
-[GitHub]: https://github.com/inorichi/tachiyomi/releases/latest
-[here]: http://tachiyomi.kanade.eu/latest
-
 ## Installing an extension
 
 Now that Tachiyomi is installed, open the app and navigate to the
@@ -68,5 +66,3 @@ It should now appear in your `My Library` tab, ready to be read!
 		<source :src="$withBase('/assets/media/addtolibrary.mp4')" type="video/mp4" />
 	</video>
 </figure>
-
-