Refactored various modules for entities. Updated and refactored Kink scraper.

assets/components/tile/entity.vue

@@ -0,0 +1,74 @@
+<template>
+	<a
+		:href="`/${entity.type}/${entity.slug}`"
+		:title="entity.name"
+		class="tile"
+	>
+		<img
+			v-if="entity.type === 'channel'"
+			:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
+			:alt="entity.name"
+			class="logo"
+		>
+
+		<img
+			v-else
+			:src="`/img/logos/${entity.slug}/thumbs/network.png`"
+			:alt="entity.name"
+			class="logo"
+		>
+	</a>
+</template>
+
+<script>
+export default {
+	props: {
+		entity: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    height: 6rem;
+    background: $tile;
+    display: flex;
+    flex-shrink: 0;
+	justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    padding: .5rem 1rem;
+    border-radius: .25rem;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    text-align: center;
+}
+
+.link {
+    text-decoration: none;
+}
+
+.logo {
+    max-width: 100%;
+    max-height: 100%;
+    color: $text-contrast;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: bold;
+    filter: $logo-highlight;
+}
+
+.title {
+    color: $text;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+</style>

assets/components/tile/network.vue

@@ -1,33 +1,33 @@
 <template>
-    <a
-        :href="`/network/${network.slug}`"
-        :title="network.name"
-        class="tile"
-        :class="{ sfw }"
-    >
-        <img
-            :src="`/img/logos/${network.slug}/thumbs/network.png`"
-            :alt="network.name"
-            class="logo"
-        >
-    </a>
+	<a
+		:href="`/network/${network.slug}`"
+		:title="network.name"
+		class="tile"
+		:class="{ sfw }"
+	>
+		<img
+			:src="`/img/logos/${network.slug}/thumbs/network.png`"
+			:alt="network.name"
+			class="logo lazy"
+		>
+	</a>
 </template>
 
 <script>
 function sfw() {
-    return this.$store.state.ui.sfw;
+	return this.$store.state.ui.sfw;
 }
 
 export default {
-    props: {
-        network: {
-            type: Object,
-            default: null,
-        },
-    },
-    computed: {
-        sfw,
-    },
+	props: {
+		network: {
+			type: Object,
+			default: null,
+		},
+	},
+	computed: {
+		sfw,
+	},
 };
 </script>
 
@@ -39,7 +39,7 @@ export default {
     background: var(--profile);
     display: flex;
     flex-shrink: 0;
-    flex-direction: column;
+	justify-content: center;
     align-items: center;
     box-sizing: border-box;
     padding: .5rem 1rem;
@@ -52,16 +52,9 @@ export default {
 }
 
 .logo {
-    width: 100%;
-    height: 100%;
-    color: $text;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
     font-size: 1rem;
-    font-weight: bold;
-    /* filter: $logo-highlight; */
 }
 
 .title {