Added anchors to extensions page. (#91)

src/.vuepress/components/ExtensionList.vue

@@ -2,7 +2,13 @@
 	<div>
 		<div v-for="extensionGroup in extensions" :key="extensionGroup[0].lang">
 			<h3>{{ langName(extensionGroup[0].lang) }}</h3>
-			<div class="extension" v-for="extension in extensionGroup" :key="extension.apk">
+			<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">
@@ -24,6 +30,7 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script>
@@ -54,6 +61,12 @@ export default {
 		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>
@@ -64,8 +77,14 @@ export default {
 	align-items: center;
 	padding: 0.4em 0.2em;
 
-	&:not(:last-child) {
-		border-bottom: 1px solid #eaecef;
+	&:hover {
+		.header-anchor {
+			opacity: 1;
+		}
+	}
+
+	.header-anchor {
+		font-size: 1.2em;
 	}
 
 	img {
@@ -105,6 +124,21 @@ export default {
 	}
 }
 
+.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 {