tachiyomi-website/src/.vuepress/components/ExtensionList.vue

<template>
	<div>
		<div v-for="extensionGroup in extensions" :key="extensionGroup[0].lang">
			<h3>{{ langName(extensionGroup[0].lang) }}</h3>
			<div 
				class="anchor" 
				v-for="extension in extensionGroup" 
				:key="extension.apk" 
				:id="extension.name.split(': ')[1]">
				<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">
					<div class="extension-text">
						<div class="upper">
							<span class="bold">{{ extension.name.split(': ')[1] }}</span>
							<Badge :text="'v' + extension.version"/>
						</div>
						<div class="down">
							{{ extension.pkg }}
						</div>
					</div>
					<a
						:href="apkUrl(extension.apk)"
						class="button"
						title="Download APK"
						download>
						<font-awesome-icon icon="download" />
						<span>Download</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
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';

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'));
		this.$data.extensions = sortBy(values, [g => this.langName(g[0].lang)]);
	},

	updated () {
		if (location.hash) {
			location.replace(location.hash);
		}
	}
}
</script>

<style lang="scss">
.extension {
	display: flex;
	align-items: center;
	padding: 0.4em 0.2em;

	&:hover {
		.header-anchor {
			opacity: 1;
		}
	}

	.header-anchor {
		font-size: 1.2em;
	}

	img {
		margin-right: 0.5em;
	}

	.extension-text {
		flex: 1;

		.down {
			font-size: 0.8rem;
			font-family: monospace;
			color: #6c757d;
		}
	}

	.button {
		display: inline-block;
		font-size: 0.8em;
		color: #fff;
		background-color: #2e84bf;
		padding: 0.5rem;
		border-radius: 4px;
		transition: background-color 0.1s ease;
		box-sizing: border-box;
		border-bottom: 1px solid #2977ac;
		text-transform: uppercase;

		&:hover {
			background-color: #3992cf;
			text-decoration: none !important;
		}

		svg + span {
			margin-left: 0.25rem;
		}
	}
}

.anchor {
	margin-top: -3.9em;
	padding-top: 3.9em;
	
	&:not(:last-child) {
		border-bottom: 1px solid #eaecef;
	}

	&:target {
		.extension {
			background: #f1f8ff;
		}
	}
}

@media (max-width: 767px) {
	.extension {
		.extension-text .down, .button span {
			display: none;
		}
	}
}
</style>