Some visual tweaks to Extensions

Also some fixes
Also groups the Extensions components into a folder of their own
Linking to anchor still does not work good

website/src/.vitepress/theme/components/ExtensionFilters.vue

@@ -1,69 +0,0 @@
-<script>
-import { langName, simpleLangName } from "../../config/scripts/languages";
-
-export default {
-	props: ["extensions"],
-	emits: ["filters"],
-	data() {
-		return {
-			filters: {
-				search: "",
-				lang: [],
-				nsfw: "Show all",
-				sort: "Ascending",
-			},
-		};
-	},
-	watch: {
-		filters: {
-			handler(value) {
-				this.$emit("filters", this.filters);
-			},
-			deep: true,
-		},
-	},
-	methods: {
-		simpleLangName,
-		langName,
-	},
-};
-</script>
-<template>
-	<span class="filters-list">
-		<el-input v-model="filters.search" placeholder="Search extensions by name or ID..." clearable />
-
-		<el-select v-model="filters.lang" placeholder="Show specific languages..." multiple clearable>
-			<el-option
-				v-for="[group] in extensions"
-				:key="group.lang"
-				:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
-				:value="group.lang"
-			/>
-		</el-select>
-
-		<div>
-			Sort by<br>
-			<el-radio-group v-model="filters.sort">
-				<el-radio label="Ascending"></el-radio>
-				<el-radio label="Descending"></el-radio>
-			</el-radio-group>
-		</div>
-
-		<div>
-			Display mode<br>
-			<el-radio-group v-model="filters.nsfw">
-				<el-radio label="NSFW"></el-radio>
-				<el-radio label="SFW"></el-radio>
-				<el-radio label="Show all"></el-radio>
-			</el-radio-group>
-		</div>
-	</span>
-</template>
-
-<style lang="stylus">
-.filters-list {
-	display: flex
-	flex-direction: column
-	row-gap: 1rem
-}
-</style>

website/src/.vitepress/theme/components/ExtensionGroup.vue

@@ -1,5 +1,5 @@
 <script>
-import { langName, simpleLangName } from "../../config/scripts/languages";
+import { langName, simpleLangName } from "../../../config/scripts/languages";
 import ExtensionItem from "./ExtensionItem.vue";
 
 export default {

website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue

@@ -0,0 +1,70 @@
+<script>
+import { langName, simpleLangName } from "../../../config/scripts/languages";
+
+export default {
+	props: ["extensions"],
+	emits: ["filters"],
+	data() {
+		return {
+			filters: {
+				search: "",
+				lang: [],
+				nsfw: "Show all",
+				sort: "Ascending",
+			},
+		};
+	},
+	watch: {
+		filters: {
+			handler(value) {
+				this.$emit("filters", this.filters);
+			},
+			deep: true,
+		},
+	},
+	methods: {
+		simpleLangName,
+		langName,
+	},
+};
+</script>
+<template>
+	<div class="filters-list">
+		<el-form :model="filters" label-width="120px">
+			<el-form-item label="Search:">
+				<el-input v-model="filters.search" placeholder="Search extensions by name or ID..." clearable />
+			</el-form-item>
+			<el-form-item label="Languages:">
+				<el-select v-model="filters.lang" placeholder="Show specific languages..." multiple clearable>
+				<el-option
+					v-for="[group] in extensions"
+					:key="group.lang"
+					:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
+					:value="group.lang"
+				/>
+			</el-select>
+			</el-form-item>
+			<el-form-item label="Sort by:">
+				<el-radio-group v-model="filters.sort">
+					<el-radio label="Ascending"></el-radio>
+					<el-radio label="Descending"></el-radio>
+				</el-radio-group>
+			</el-form-item>
+			<el-form-item label="Display mode:">
+				<el-radio-group v-model="filters.nsfw">
+					<el-radio label="NSFW"></el-radio>
+					<el-radio label="SFW"></el-radio>
+					<el-radio label="Show all"></el-radio>
+				</el-radio-group>
+			</el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<style lang="stylus">
+.filters-list {
+	display: flex
+	flex-direction: column
+	row-gap: 1rem
+}
+</style>

website/src/.vitepress/theme/components/Extensions/ExtensionGroup.vue

@@ -0,0 +1,52 @@
+<script>
+import { langName, simpleLangName } from "../../../config/scripts/languages";
+import ExtensionItem from "./ExtensionItem.vue";
+
+export default {
+	components: { ExtensionItem },
+	props: ["list", "totalCount"],
+	computed: {
+		groupName: function () {
+			const firstItem = this.list[0];
+			return firstItem.lang === "en" ? simpleLangName(firstItem.lang) : langName(firstItem.lang);
+		},
+	},
+	methods: {
+		simpleLangName,
+		langName,
+	},
+};
+</script>
+
+<template>
+	<div class="extension-group">
+		<h2>
+			{{ groupName }}
+
+			<span class="extensions-total">
+				Total:
+				<span class="extensions-total-sum">
+					{{ totalCount }}
+				</span>
+			</span>
+		</h2>
+		<div
+			v-for="extension in list"
+			:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
+			:key="extension.apk"
+			class="extension"
+		>
+			<ExtensionItem :item="extension" />
+		</div>
+	</div>
+</template>
+
+<style lang="stylus">
+.extensions-total {
+	float: right
+
+	&-sum {
+		color: var(--vp-c-brand)
+	}
+}
+</style>

website/src/.vitepress/theme/components/Extensions/ExtensionItem.vue

@@ -9,7 +9,16 @@ export default {
 			return this.item.name.split(": ")[1];
 		},
 		pkgVersion: function () {
-			return "v" + this.item.version;
+			return this.item.version;
+		},
+		pkgIsNsfw: function () {
+			return !!parseInt(this.item.nsfw);
+		},
+		pkgHasReadme: function () {
+			return !!parseInt(this.item.hasReadme);
+		},
+		pkgHasChangelog: function () {
+			return !!parseInt(this.item.hasChangelog);
 		},
 		iconUrl: function () {
 			return `https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/icon/${this.item.pkg}.png`;
@@ -27,15 +36,14 @@ export default {
 	<div class="extension-text">
 		<div class="upper">
 			{{ pkgName }}
-			<Badge :text="pkgVersion" />
 		</div>
 		<div class="lower">
 			{{ pkgId }}
 		</div>
 	</div>
-	<a :href="apkUrl" class="extension-download" title="Download APK" download>
+	<Badge v-if="pkgIsNsfw" type="danger" :text="pkgVersion" title="This extension contains NSFW entries." />
-		<span>↓ Download</span>
+	<Badge v-else type="info" :text="pkgVersion" title="This extension is free from NSFW entries." />
-	</a>
+	<a :href="apkUrl" class="extension-download" title="Download APK" download>↓</a>
 </template>
 
 <style lang="stylus">
@@ -43,6 +51,7 @@ export default {
 	align-items: center
 	display: flex
 	padding: 0.5em 1.5em
+	margin: 0.8em 0.2em
 	border-radius: 8px
 
 	&:hover {
@@ -61,7 +70,7 @@ export default {
 	}
 
 	.extension-icon {
-		margin-right: 0.5em
+		margin: 0.2em 0.5em
 	}
 
 	.extension-text {
@@ -84,16 +93,10 @@ export default {
 	}
 
 	.extension-download {
-		margin-right: 0.5em
+		padding: 0.4em
-		padding-left: 1rem
-		padding-right: 1rem
-		padding-top: 0.5rem
-		padding-bottom: 0.5rem
 		font-weight: 700
+		font-size: 1.4em
 		border-radius: 4px
-		color: var(--vp-c-brand)
-		background-color: transparent
-		border: 1px solid var(--vp-c-brand-darker)
 
 		.material-icons {
 			color: white
@@ -101,33 +104,26 @@ export default {
 		}
 
 		&:hover {
+			.VPBadge {
 				background-color: var(--vp-c-brand-darker)
 				text-decoration: none
-
-			.material-icons {
-				color: var(--vp-c-brand)
 			}
 		}
 	}
 
 	@media (max-width 767px) {
 		padding: 0.4em 0em
-
-		.extension-text .lower,
-		.extension-download span {
-			display: none
-		}
 	}
 }
 
 @media (max-width 767px) {
-	.extension {
+	.anchor {
-		border: 1px solid var(--vp-c-gutter)
+		display: none
-		border-radius: 8px
-
-		.extension-download {
-			background-color: var(--vp-c-brand)
 	}
+
+	.extension {
+		border: 1px solid var(--vp-c-divider)
+		border-radius: 8px
 	}
 }
 

website/src/.vitepress/theme/components/Extensions/ExtensionsWrapper.vue

@@ -1,8 +1,8 @@
 <script>
 import axios from "axios";
 import groupBy from "lodash.groupby";
-import { GITHUB_EXTENSION_JSON } from "../../config/constants";
+import { GITHUB_EXTENSION_JSON } from "../../../config/constants";
-import { simpleLangName } from "../../config/scripts/languages";
+import { simpleLangName } from "../../../config/scripts/languages";
 import ExtensionFilters from "./ExtensionFilters.vue";
 import ExtensionList from "./ExtensionList.vue";
 
@@ -96,9 +96,7 @@ export default {
 </script>
 
 <template>
-	<div v-if="loading" v-loading.lock="loading" style="min-height: 200px"></div>
-	<div v-else>
 	<ExtensionFilters :extensions="extensions" @filters="filters = $event" />
-		<ExtensionList :extensions="filteredExtensions" />
+	<div class="loading" v-if="loading" v-loading.lock="loading" style="min-height: 200px"></div>
-	</div>
+	<ExtensionList v-else :extensions="filteredExtensions" />
 </template>

website/src/extensions/index.md

@@ -10,5 +10,5 @@ Web-based extensions page that enables users to browse and install additional so
 <ExtensionsWrapper/>
 
 <script setup>
-import ExtensionsWrapper from '../.vitepress/theme/components/ExtensionsWrapper.vue'
+import ExtensionsWrapper from '../.vitepress/theme/components/Extensions/ExtensionsWrapper.vue'
 </script>