Add spreadsheet to the extension page (#462)

* Initial commit

* Further tweaking

* Remake the table with "vue-good-table"

* Trim app ID from extensions

* Redesign table and add features

- Added back extension IDs.
- Highlighted "Note"s which starts with `w-` on Sheets.
- Restyled.

* Switch to Riz's maintained spreadsheet

* Upgrade slot syntax

Should fix build errors

* Re-enable search for Notes

* Install "vue-good-table" globally

Fix that worked for @ghostbear

package.json

@@ -52,6 +52,8 @@
 		"material-design-icons-iconfont": "^6.1.0",
 		"vue": "^2.6.12",
 		"vue-agile": "^1.1.3",
+		"vue-good-table": "^2.21.1",
+		"vue-gsheets": "^4.0.3",
 		"vue-material-design-icons": "^4.11.0",
 		"vue-moment": "^4.1.0",
 		"vue-sweetalert2": "^4.1.1",

src/.vuepress/components/ExtensionList.vue

@@ -17,7 +17,7 @@
 							<Badge :text="'v' + extension.version" />
 						</div>
 						<div class="down">
-							{{ extension.pkg }}
+							{{ extension.pkg.replace("eu.kanade.tachiyomi.extension.", "") }}
 						</div>
 					</div>
 					<a :href="apkUrl(extension.apk)" class="button" title="Download APK" download>

src/.vuepress/components/SourceSheet.vue

@@ -0,0 +1,182 @@
+<template>
+	<div id="SourceSheet">
+		<VueGoodTable
+			:columns="columns"
+			:rows="items"
+			:sort-options="{ enabled: true }"
+			:search-options="{ enabled: true, placeholder: 'Search for extensions or sources' }"
+		>
+			<template #table-row="props">
+				<div v-if="props.column.field == 'Extension Name'" class="container">
+					<img :src="props.row['Extension Icon']" width="42" height="42" />
+					<div class="extension-text">
+						<div class="upper">
+							<span class="bold">{{ props.row["Extension Name"] }}</span>
+						</div>
+						<div class="down">
+							{{ props.row["Extension ID"] }}
+						</div>
+					</div>
+				</div>
+				<span v-else-if="props.column.field == 'Source Name'">
+					<a :href="props.row['Source Website'].replace('N/A', 'javascript:void(0);')">
+						{{ props.row["Source Name"] }}
+					</a>
+				</span>
+				<template v-else-if="props.column.field == 'Notes'">
+					<span v-if="props.row.Notes == 'N/A'"></span>
+					<strong v-else-if="props.row.Notes.startsWith('w-')" style="color: red">
+						{{ props.row.Notes.replace("w-", "") }}
+					</strong>
+					<span v-else>{{ props.row.Notes }}</span>
+				</template>
+				<span v-else>
+					{{ props.formattedRow[props.column.field] }}
+				</span>
+			</template>
+		</VueGoodTable>
+	</div>
+</template>
+
+<script>
+import { vueGsheets } from "vue-gsheets";
+
+export default {
+	mixins: [vueGsheets],
+	data: () => ({
+		COLUMNS: 9,
+		sheetPageNumber: 1,
+		SHEETID: "1Kh_O8VyPKTdrcIsso0zz5gD3A9aw_9v2Ygnmr13RuOU",
+		columns: [
+			{
+				label: "ID",
+				field: "ID",
+				type: "number",
+				hidden: true,
+				globalSearchDisabled: true,
+			},
+			{
+				label: "Extension ID",
+				field: "Extension ID",
+				hidden: true,
+			},
+			{
+				label: "Extension",
+				field: "Extension Name",
+				tdClass: "extension",
+			},
+			{
+				label: "Icon",
+				field: "Extension Icon",
+				sortable: false,
+				hidden: true,
+				globalSearchDisabled: true,
+			},
+			{
+				label: "Source",
+				field: "Source Name",
+			},
+			{
+				label: "Website",
+				field: "Source Website",
+				sortable: false,
+				hidden: true,
+				globalSearchDisabled: true,
+			},
+			{
+				label: "Languages",
+				field: "Languages",
+				width: "4rem",
+				sortable: false,
+			},
+			{
+				label: "Notes",
+				field: "Notes",
+				width: "6rem",
+				tdClass: "notes",
+				sortable: false,
+			},
+		],
+	}),
+};
+</script>
+
+<style lang="stylus">
+#SourceSheet
+	.vgt-global-search
+		padding-top 2rem
+		background transparent
+		border none
+		.magnifying-glass
+			border-color #adb5bf
+			&::before
+				background #adb5bf
+		.vgt-input
+			border 1px solid #cfd4db
+			&:focus
+				border-color $accentColor
+			&::placeholder
+				opacity 0.75
+	.vgt-table
+		background-color transparent
+		border-collapse separate
+		border-spacing 0px
+		border none
+		thead
+			tr
+				border none
+				th
+					background transparent !important
+					border none
+					color $textColor
+					&.sortable:hover
+						color $accentColor
+		tbody
+			tr
+				background-color $backgroundColorSecondary
+				td
+					border none
+					border-bottom 1px solid $borderColor !important
+					&:first-child
+						border-left 1px solid $borderColor !important
+					&:last-child
+						border-right 1px solid $borderColor !important
+					&.extension
+						.container
+							align-items center
+							display flex
+							img
+								margin-right 0.5em
+							.extension-text
+								flex 1
+								.upper
+									.bold
+										color $textColor
+								.down
+									color #6c757d
+									font-family monospace
+									font-size 0.8rem
+							&:target
+								.extension
+									background #f1f8ff
+							@media (max-width: 767px)
+								.extension-text .down
+									display none
+					&.notes
+						color $textColor
+					.vgt-text-disabled
+						color $textColor
+				&:first-child
+					td
+						border-top 1px solid $borderColor !important
+						&:first-child
+							border-top-left-radius 0.6rem
+						&:last-child
+							border-top-right-radius 0.6rem
+				&:last-child
+					td
+						&:first-child
+							border-bottom-left-radius 0.6rem
+						&:last-child
+							border-bottom-right-radius 0.6rem
+</style>

src/.vuepress/enhanceApp.js

@@ -1,8 +1,10 @@
 import "./styles/animate.css";
 import "./styles/sweetalert2.css";
 import "vue-material-design-icons/styles.css";
+import "vue-good-table/dist/vue-good-table.css";
 
 import { VueAgile } from "vue-agile";
+import { VueGoodTable } from "vue-good-table";
 import VueSweetalert2 from "vue-sweetalert2";
 import VueMoment from "vue-moment";
 import Element from "element-ui";
@@ -17,6 +19,8 @@ export default ({
 }) => {
 	// eslint-disable-next-line vue/match-component-file-name
 	Vue.component("Agile", VueAgile);
+	// eslint-disable-next-line vue/match-component-file-name
+	Vue.component("VueGoodTable", VueGoodTable);
 	Vue.use(VueSweetalert2);
 	Vue.use(VueMoment);
 	Vue.use(Element);

src/extensions/README.md

@@ -6,12 +6,14 @@ lang: en-US
 
 # Extensions
 
+:::: el-tabs
+::: el-tab-pane label="Available extensions"
 Here is a list of all available extensions to download inside the app.
-
-::: guide
-User [SnakeDoc83](https://github.com/snakedoc83) has made a handy spreadsheet showing the different multi-source extensions and their sources.
-::: note
-[Click here to access the spreadsheet](https://tachiyomi.org/extensions-spreadsheet)
-:::
-
 <ExtensionList/>
+:::
+::: el-tab-pane label="Spreadsheet"
+Spreadsheet to help you find sources bundled in multi-source extensions, courtesy of [SnakeDoc83](https://github.com/snakedoc83).
+Now maintained by [Riztard](https://github.com/Riztard) and other volunteers.
+<SourceSheet/>
+:::
+::::