Fix extensions page (#571)

* Fix extensions page

* Tweaks to Extensions code

Replaced "English (English)" with "English"
Made a separate function for the language name (?).

* Use a real function to change English string instead of JS replace

Co-authored-by: Andreas <andreas.everos@gmail.com>

Co-authored-by: Andreas <andreas.everos@gmail.com>

src/.vuepress/components/ExtensionList.vue

@@ -1,26 +1,41 @@
 <template>
-	<div>
+	<div class="extension-list">
 		<div v-for="extensionGroup in extensions" :key="extensionGroup[0].lang">
-			<h3>{{ langName(extensionGroup[0].lang) }}</h3>
+			<h3>
+				{{ extensionGroup[0].lang === "en" ? simpleLangName(extensionGroup[0].lang) : langName(extensionGroup[0].lang) }}
+				<span class="extensions-total">
+					Total:
+					<span class="extensions-total-sum">
+						{{ extensions.reduce((sum, item) => sum + item.length, 0) }}
+					</span>
+				</span>
+			</h3>
 			<div
 				v-for="extension in extensionGroup"
-				:id="extension.name.split(': ')[1]"
+				:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
 				:key="extension.apk"
 				class="anchor"
 			>
 				<div class="extension">
-					<a :href="`#${extension.name.split(': ')[1]}`" aria-hidden="true" class="header-anchor">#</a>
+					<a
-					<img :src="iconUrl(extension.apk)" width="42" height="42" />
+						:href="`#${extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')}`"
+						class="header-anchor"
+						aria-hidden="true"
+						@click.stop
+					>
+						#
+					</a>
+					<img class="extension-icon" :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="font-semibold">{{ extension.name.split(": ")[1] }}</span>
 							<Badge :text="'v' + extension.version" />
 						</div>
 						<div class="down">
 							{{ extension.pkg.replace("eu.kanade.tachiyomi.extension.", "") }}
 						</div>
 					</div>
-					<a :href="apkUrl(extension.apk)" class="button" title="Download APK" download>
+					<a :href="apkUrl(extension.apk)" class="extension-download" title="Download APK" download>
 						<MaterialIcon icon="cloud_download" />
 						<span>Download</span>
 					</a>
@@ -33,7 +48,6 @@
 <script>
 import axios from "axios";
 import groupBy from "lodash.groupby";
-import sortBy from "lodash.sortby";
 import ISO6391 from "iso-639-1";
 import { GITHUB_EXTENSION_JSON } from "../constants";
 
@@ -47,7 +61,30 @@ export default {
 	async beforeMount() {
 		const { data } = await axios.get(GITHUB_EXTENSION_JSON);
 		const values = Object.values(groupBy(data, "lang"));
-		this.$data.extensions = sortBy(values, [(g) => this.langName(g[0].lang)]);
+		values.sort((a, b) => {
+			const langA = this.simpleLangName(a[0].lang);
+			const langB = this.simpleLangName(b[0].lang);
+			if (langA === "All" && langB === "English") {
+				return -1;
+			}
+			if (langA === "English" && langB === "All") {
+				return 1;
+			}
+			if (langA === "English") {
+				return -1;
+			}
+			if (langB === "English") {
+				return 1;
+			}
+			if (langA < langB) {
+				return -1;
+			}
+			if (langA > langB) {
+				return 1;
+			}
+			return 0;
+		});
+		this.$data.extensions = values;
 	},
 
 	updated() {
@@ -57,6 +94,7 @@ export default {
 	},
 
 	methods: {
+		simpleLangName: (code) => (code === "all" ? "All" : ISO6391.getName(code)),
 		langName: (code) => (code === "all" ? "All" : `${ISO6391.getName(code)} (${ISO6391.getNativeName(code)})`),
 		iconUrl(pkg) {
 			const pkgName = pkg.substring(0, pkg.lastIndexOf("."));
@@ -68,50 +106,83 @@ export default {
 </script>
 
 <style lang="stylus">
+.extension-list
+	h3
+		padding-bottom 0.75em
+		border-bottom 1px solid $borderColor
+	> div
+		&:not(:first-of-type)
+			.extensions-total
+				display none
+
+.extensions-total
+	float right
+	&-sum
+		color $accentColor
+
 .anchor
 	margin-top -3.9em
-	padding-top 3.9em
+	padding-bottom 0.2em
+	padding-top 4.5em
 	.extension
 		align-items center
 		display flex
-		padding 0.4em 0.2em
+		padding 0.4em 1.5em
 		.header-anchor
-			font-size 1.2em
+			padding-left 0.2em
+			padding-right 0.2em
+			font-size 1.4em
+			opacity 0
 		&:hover .header-anchor
 			opacity 1
-		img
+		.extension-icon
 			margin-right 0.5em
 		.extension-text
 			flex 1
+			.upper
+				.badge
+					margin-left 8px
 			.down
 				color #6c757d
 				font-family monospace
-				font-size 0.8rem
+				font-size 0.9rem
-		.button
+		.extension-download
-			background-color #2e84bf
+			margin-right 0.5em
-			border-bottom 1px solid #2977ac
+			padding-left 1rem
+			padding-right 1rem
+			padding-top .5rem
+			padding-bottom .5rem
+			font-weight 700
 			border-radius 4px
-			box-sizing border-box
+			color white
-			color #fff
+			background-color $accentColor
-			display inline-block
+			border 1px solid $accentColor
-			font-size 0.8em
+			.material-icons
-			padding 0.5rem
+				color white
-			text-transform uppercase
+				max-width 18px
-			transition background-color 0.1s ease
 			&:hover
-				background-color #3992cf
+				background-color white
-				text-decoration none !important
+				color $accentColor
-			.material-holder
+				text-decoration none
-				color #fff
+				.material-icons
-				+ span
+					color $accentColor
-					margin-left 0.25rem
+		@media (max-width 767px)
-		&:not(:last-child)
+			padding 0.4em 0em
-			border-bottom 1px solid #eaecef
+			.extension-text .down,
+			.extension-download span
+				display none
+	@media (max-width 767px)
+		.extension
+			border 1px solid $borderColor
+			border-radius 8px
+
+			.extension-download
+				background-color $accentColor
 	&:target
 		.extension
-				background #f1f8ff
+			background-color $containerBackground
-		@media (max-width: 767px)
+			border-radius 8px
-			.extension-text .down
+			transition 500ms background-color
-			.button span
+	&:first-child
-				display none
+		border-top 1px solid $borderColor
 </style>

src/extensions/README.md

@@ -1,6 +1,6 @@
 ---
 title: Extensions
-description: Here is a list of all available extensions to download inside the app.
+description: List of available extensions to use with Tachiyomi, you can download them from here or from the app.
 lang: en-US
 ---
 
@@ -8,7 +8,7 @@ lang: en-US
 
 :::: el-tabs
 ::: el-tab-pane label="Available extensions"
-Here is a list of all available extensions to download inside the app.
+List of available extensions to use with Tachiyomi, you can download them from here or from the app.
 <ExtensionList/>
 :::
 ::: el-tab-pane label="Spreadsheet"