Forks Facelift (#118)

* Add special Fork Buttons

* Redesign forks

* Include forgotten J2K

* Extra additions to the forks info

* Fix minor typo

* Added Neko feature per request

* Added AZ feature per request

* Seperate Forks from /help/

Also small requested changes to each fork page.
Seperated the Extensions list while I was at it.

* Concatenation instead of template literal

Also capitalized the vue file

* Resolve review comments

* Changed fork navlink to root page

* Capitalize ForkButtons.vue

* Further enhancement

* Fix color for Dev button

src/.vuepress/components/ForkButtons.vue

@@ -0,0 +1,112 @@
+<template>
+	<div class="downloadContainer">
+		<button class="downloadForkButton" @click="downloadFork">
+			{{ downloadLabel }}
+		</button>
+		<button class="githubForkButton" :onclick="githubLink">
+			{{ githubLabel }}
+		</button>
+	</div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+	data() {
+		return {
+			tagName: "",
+			browserDownloadUrl: ""
+		};
+	},
+
+	props: {
+		forkName: {
+			type: String,
+			required: true
+		},
+		downloadLabel: {
+			type: String,
+			default: "Download"
+		},
+		downloadLink: {
+			type: String,
+			required: true
+		},
+		githubLabel: {
+			type: String,
+			default: "GitHub"
+		},
+		githubLink: {
+			type: String,
+			required: true
+		}
+	},
+
+	async mounted() {
+		const { data } = await axios.get(this.$props.downloadLink);
+		// Maybe eventually some release has more than the apk in assets.
+		const apkAsset = data.assets.find(a => a.name.includes(".apk"));
+		// Set the values.
+		this.$data.tagName = data.tag_name;
+		this.$data.browserDownloadUrl = apkAsset.browser_download_url;
+	},
+
+	methods: {
+		downloadFork() {
+			this.$swal({
+				title: "Downloading",
+				text: this.$props.forkName + " is being downloaded.",
+				icon: "success",
+				focusConfirm: false,
+				focusCancel: false,
+				timer: 5000,
+				timerProgressBar: true,
+				customClass: {
+					confirmButton: "download-confirm-button",
+					container: "download-container"
+				},
+				showClass: {
+					popup: "animated pulse faster"
+				},
+				hideClass: {
+					popup: "animated zoomOut faster"
+				}
+			});
+			window.location.assign(this.$data.browserDownloadUrl || this.$props.downloadLink);
+			window.ga("send", "event", "Button", "Click", this.$props.forkName + " download - Forks");
+		}
+	}
+};
+</script>
+
+<style lang="stylus">
+.downloadContainer
+	user-select none
+	text-align center
+	margin 0.3125rem
+	.downloadForkButton
+	.githubForkButton
+		border-radius $buttonBorderRadius
+		border-style none
+		color white
+		font-family $buttonFontFamily
+		font-size 1.125em
+		height 3rem
+		margin 0.3125rem
+		padding 0.625 2em
+		width 8.5rem
+		&:focus
+			outline none
+			outline-style solid
+		&:hover
+			cursor pointer
+			text-decoration none !important
+			background-image linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))
+	.downloadForkButton
+		background-color $accentColor
+	.githubForkButton
+		background-color #181818
+		&:hover
+			background-color lighten(#181818, 15)
+</style>

src/.vuepress/config.js

@@ -18,7 +18,8 @@ module.exports = {
 			'/help/guides/': require('./config/sidebar/guides'),
 			'/help/faq/': require('./config/sidebar/faq'),
 			'/help/contribution': require('./config/sidebar/contribution'),
-			'/extensions': require('./config/sidebar/extensions')
+			'/extensions': require('./config/sidebar/extensions'),
+			'/forks': require('./config/sidebar/forks')
 		},
 		lastUpdated: 'Last Updated'
 	},

src/.vuepress/config/nav.js

@@ -15,20 +15,17 @@ module.exports = [
 				items: [
 					{ text: "General", link: "/help/guides/getting-started" },
 					{ text: "Menus", link: "/help/guides/menus" },
-					{ text: "Settings", link: "/help/guides/settings" },
-					{ text: "Forks", link: "/help/guides/forks" }
+					{ text: "Settings", link: "/help/guides/settings" }
 				]
 			},
 			{
 				text: "Contribution",
 				items: [{ text: "How can I help?", link: "/help/contribution" }]
-			},
-			{
-				text: "Available extensions",
-				items: [{ text: "List", link: "/extensions/" }]
 			}
 		]
 	},
+	{ text: "Forks", link: "/forks/" },
+	{ text: "Extensions", link: "/extensions/" },
 	{ text: "Discord", link: "https://discord.gg/tachiyomi" },
 	{ text: "Reddit", link: "https://reddit.com/r/Tachiyomi" }
 ];

src/.vuepress/config/plugins.js

@@ -35,5 +35,12 @@ module.exports = [
 			type: "aside",
 			defaultTitle: ""
 		}
+	],
+	[
+		"vuepress-plugin-container",
+		{
+			type: "aside-guide",
+			defaultTitle: ""
+		}
 	]
 ];

src/.vuepress/config/sidebar/contribution.js

@@ -16,6 +16,10 @@ module.exports = [
 		title: 'Guides',
 		path: '/help/guides/getting-started',
 	},
+	{
+		title: 'Forks',
+		path: '/forks/'
+	},
 	{
 		title: 'Available extensions',
 		path: '/extensions/'

src/.vuepress/config/sidebar/extensions.js

@@ -12,6 +12,10 @@ module.exports = [
 		title: 'Guides',
 		path: '/help/guides/getting-started',
 	},
+	{
+		title: 'Forks',
+		path: '/forks/'
+	},
 	{
 		title: 'Contribution',
 		path: '/help/contribution'

src/.vuepress/config/sidebar/faq.js

@@ -13,6 +13,10 @@ module.exports = [
 		title: 'Guides',
 		path: '/help/guides/getting-started',
 	},
+	{
+		title: 'Forks',
+		path: '/forks/'
+	},
 	{
 		title: 'Contribution',
 		path: '/help/contribution'

src/.vuepress/config/sidebar/forks.js

@@ -0,0 +1,23 @@
+module.exports = [
+	'/',
+	{
+		title: 'Forks',
+		path: '/forks/'
+	},
+	{
+		title: 'Frequently Asked Questions',
+		path: '/help/faq/application',
+	},
+	{
+		title: 'Guides',
+		path: '/help/guides/getting-started',
+	},
+	{
+		title: 'Contribution',
+		path: '/help/contribution'
+	},
+	{
+		title: 'Available extensions',
+		path: '/extensions/'
+	}
+];

src/.vuepress/config/sidebar/guides.js

@@ -44,17 +44,6 @@ module.exports = [
 					'/help/guides/advanced',
 					'/help/guides/about'
 				]
-			},
-			{
-				title: 'Forks',
-				collapsable: false,
-				sidebarDepth: 2,
-				children: [
-					'/help/guides/tachiyomi-neko',
-					'/help/guides/tachiyomi-j2k',
-					'/help/guides/tachiyomi-eh',
-					'/help/guides/tachiyomi-az',
-				]
 			}
 		]
 	},
@@ -62,6 +51,10 @@ module.exports = [
 		title: 'Frequently Asked Questions',
 		path: '/help/faq/application',
 	},
+	{
+		title: 'Forks',
+		path: '/forks/'
+	},
 	{
 		title: 'Contribution',
 		path: '/help/contribution'

src/.vuepress/styles/index.styl

@@ -22,6 +22,13 @@ font-feature-settings()
 		color transparentify($textColor, 0.4)
 		font-size 0.9rem
 		text-align right
+	&.aside-guide
+		font-size 0.9rem
+		text-align left
+		p
+			margin-top: 0
+		a
+			color $accentColorSecondary
 
 // Guide container
 .guide
@@ -138,9 +145,11 @@ font-feature-settings()
 .download-container
 	button
 		user-select none
+	.download-actions
 		.download-stable-button
 		.download-dev-button
 		.download-confirm-button
+			border-bottom-width 0
 			border-radius $buttonBorderRadius
 			font-family $buttonFontFamily
 			font-size 1.125em
@@ -149,14 +158,13 @@ font-feature-settings()
 			&:focus
 				outline none
 				outline-style solid
-	.download-confirm-button
+		.download-dev-button
+			background-color $accentColorSecondary
 	.download-title
 		border-bottom-width 0
 	.download-footer
 		border-top-width 0
 		padding-top 0
-	.download-dev-button
-		background-color $accentColorSecondary
 
 // Navbar Changes
 .navbar
@@ -165,6 +173,12 @@ font-feature-settings()
 		@media (max-width: $MQMobile)
 			display inherit
 
+// Page Header Logo
+.headerLogo
+	vertical-align middle
+	height 3rem
+	margin-bottom .625rem
+
 // Center align class
 .centered
 	text-align center

src/forks/Neko.md

@@ -0,0 +1,35 @@
+---
+title: Neko
+lang: en-US
+sidebar: false
+---
+
+# <img class="headerLogo" :src="$withBase('/assets/media/fork-Neko-icon.png')"> Neko
+
+<ForkButtons forkName="Neko" downloadLink="https://api.github.com/repos/CarlosEsco/Neko/releases/latest" githubLink="window.open('https://github.com/CarlosEsco/Neko')"/>
+
+## Introduction
+**Neko** is maintained by **[CarlosEsco](https://github.com/CarlosEsco)**.
+
+This **MangaDex** focused fork enhances your reading with native integration and recommendations.
+
+<img :src="$withBase('/assets/media/fork-Neko-banner.png')"/>
+
+## Features
+::: aside-guide
+For a full list of features, visit the GitHub page.
+:::
+
+- **Features a recommendations tab** <Badge text="Alpha"/>
+- **Built-in login with 2FA support**
+- **Flags for source language in manga info page**
+- **All the MangaDex statuses**
+- **Sort library by date added**
+- **View MDList follows**
+- **Improved Download queue**
+  - This includes reordering and cancelling downloads.
+- **Ability to skip chapters that are hidden or read**
+- **Manga covers update when a manga info update is triggered**
+- **Tri-state filter when filtering in library**
+- **Range Select for Library and Chapters**
+  - *Long Press* on an item then long press on another to select everything in between.

src/forks/README.md

@@ -0,0 +1,32 @@
+---
+title: Forks
+lang: en-US
+sidebar: true
+sidebarDepth: 0
+---
+
+# Forks
+
+## <img class="headerLogo" :src="$withBase('/assets/media/fork-Neko-icon.png')"> [Neko](/forks/Neko)
+::: aside-guide
+Maintained by [CarlosEsco](https://github.com/CarlosEsco)
+:::
+This **MangaDex** focused fork enhances your reading with native integration and recommendations.
+
+## <img class="headerLogo" :src="$withBase('/assets/media/fork-J2K-icon.png')"> [TachiyomiJ2K](/forks/TachiyomiJ2K)
+::: aside-guide
+Maintained by [Jays2Kings](https://github.com/Jays2Kings)
+:::
+This fork adds certain enhancements that is not yet present in the base app.
+
+## <img class="headerLogo" :src="$withBase('/assets/media/fork-EH-icon.png')"> [TachiyomiEH](/forks/TachiyomiEH)
+::: aside-guide
+Maintained by [NerdNumber9](https://github.com/NerdNumber9)
+:::
+This fork adds features that enhances the hentai experience with integrations to popular sevices such as **E-Hentai**, **nHentai** and more.
+
+## <img class="headerLogo" :src="$withBase('/assets/media/fork-AZ-icon.png')"> [TachiyomiAZ](/forks/TachiyomiAZ)
+::: aside-guide
+Maintained by [az4521](https://github.com/az4521)
+:::
+This fork is based off of **TachiyomiEH**, it fixes bugs and adds features.

src/forks/TachiyomiAZ.md

@@ -0,0 +1,24 @@
+---
+title: TachiyomiAZ
+lang: en-US
+sidebar: false
+---
+
+# <img class="headerLogo" :src="$withBase('/assets/media/fork-AZ-icon.png')"> TachiyomiAZ
+
+<ForkButtons forkName="TachiyomiAZ" downloadLink="https://api.github.com/repos/az4521/TachiyomiAZ/releases/latest" githubLink="window.open('https://github.com/az4521/TachiyomiAZ')"/>
+
+## Introduction
+**TachiyomiAZ** is maintained by **[az4521](https://github.com/az4521)**.
+
+This fork is based off of **[TachiyomiEH](/forks/TachiyomiEH)**, it fixes bugs and adds features.
+
+## Features
+
+- **Restoring backups in the background**
+- **Fixed Tsumino and Hitomi**
+- **Language filtering search options for nHentai**
+- **Tri-state filter when filtering in library**
+- **Random bugfixes**
+
+<img :src="$withBase('/assets/media/fork-AZ-symbol.png')">

src/forks/TachiyomiEH.md

@@ -0,0 +1,31 @@
+---
+title: TachiyomiEH
+lang: en-US
+sidebar: false
+---
+
+# <img class="headerLogo" :src="$withBase('/assets/media/fork-EH-icon.png')"> TachiyomiEH
+
+<ForkButtons forkName="TachiyomiEH" downloadLink="https://api.github.com/repos/NerdNumber9/TachiyomiEH/releases/latest" githubLink="window.open('https://github.com/NerdNumber9/TachiyomiEH')"/>
+
+## Introduction
+**TachiyomiEH** is maintained by **[NerdNumber9](https://github.com/NerdNumber9)**.
+
+This fork adds features that enhances the hentai experience with integrations to popular sevices such as **E-Hentai**, **nHentai** and more.
+
+<img :src="$withBase('/assets/media/fork-EH-banner.png')"/>
+
+## Features
+::: aside-guide
+For a full list of features, visit the GitHub page.
+:::
+
+- **Sync your favorites with your EHentai/ExHentai account**
+- **Search through your favorites by tag/language/artist**
+- **Open galleries in an incognito browser window**
+- **Faster download engine in the reader**
+- **Fingerprint/PIN app lock**
+- **Batch import gallery URLs**
+  - Import single URLs by pasting them into the catalogue search box
+- **Automatic captcha solving**
+- **Open gallery URLs directly in Tachiyomi**

src/forks/TachiyomiJ2K.md

@@ -0,0 +1,51 @@
+---
+title: TachiyomiJ2K
+lang: en-US
+sidebar: false
+---
+
+# <img class="headerLogo" :src="$withBase('/assets/media/fork-J2K-icon.png')"> TachiyomiJ2K
+
+<ForkButtons forkName="TachiyomiJ2K" downloadLink="https://api.github.com/repos/Jays2Kings/tachiyomiJ2K/releases/latest" githubLink="window.open('https://github.com/Jays2Kings/tachiyomiJ2K')"/>
+
+## Introduction
+**TachiyomiJ2K** is maintained by **[Jays2Kings](https://github.com/Jays2Kings)**.
+
+This fork adds certain enhancements that is not yet present in the base app.
+
+<img :src="$withBase('/assets/media/fork-J2K-banner.gif')"/>
+
+## Features
+::: aside-guide
+For a full list of features, visit the GitHub page.
+:::
+
+- **Android 10 Edge to Edge support**
+  -  No more small ugly bar for the gesture navigation.
+  -  Older versions get a translucent nav bar instead.
+- **Automatic background based on manga page**
+  - For those that like having a white background to match the content, this will automatically set the background to match for moments such as a flashback section of a manga.
+- **Notification separation of updating library and new chapters**
+- **Automatically checks for extension updates**
+- **Reader seekbar overrides switch app gesture in Android 10, so no more accidents for that**
+- **[New material snackbar](https://raw.githubusercontent.com/Jays2Kings/tachiyomi/master/.github/readme-images/material%20snackbar.png)**
+  - Removing manga now auto deletes chapters and has an undo button in case you change your mind.
+- **Option to hide manga titles in grid view**
+- **Library specific enhancements**
+  - Per-category/Drag & drop sorting
+  - Tri-state/Negative filters
+  - Multi-source migration
+- **[Share sheets upgrade for Android 10](https://raw.githubusercontent.com/Jays2Kings/tachiyomi/master/.github/readme-images/share%20menu.png)**
+- **Range Select for Library and Chapters**
+  - *Long Press* on an item then long press on another to select everything in between.
+- **Batch Auto-Source Migration**
+  - *Taken from [TachiyomiEH](/help/guides/tachiyomi-eh).*
+- **Improved Download queue**
+  - This includes reordering and cancelling downloads.
+- **Recently Read goes all the way back to the beginning of time**
+- **Restoring backups in the background**
+  - *Taken from [Neko](/help/guides/tachiyomi-neko).*
+- **Expanding manga thumbnails**
+- **Edit manga info to beautify your library**
+  - *Title*, *Tags*, *Description*, *Cover image* and more can be manually edited when viewing the **INFO** tab.
+- **More Material Stuff**

src/help/guides/forks.md

@@ -1,18 +0,0 @@
----
-title: Forks
-lang: en-US
----
-
-# Forks
-
-### [<MaterialIcon icon-name="chrome_reader_mode"/> Neko](/help/guides/tachiyomi-neko)
-A Free, Open source unofficial manga reader for MangaDex and a fork of Tachiyomi
-
-### [<MaterialIcon icon-name="chrome_reader_mode"/> TachiyomiJ2K](/help/guides/tachiyomi-j2k)
-TachiyomiJ2K is a based off of the original Tachiyomi app and adds certain enhancements.
-
-### [<MaterialIcon icon-name="chrome_reader_mode"/> TachiyomiEH](/help/guides/tachiyomi-eh)
-TachiyomiEH is a free and open source manga and hentai reader for Android and is based off of the original Tachiyomi app.
-
-### [<MaterialIcon icon-name="chrome_reader_mode"/> TachiyomiAZ](/help/guides/tachiyomi-az)
-TachiyomiAZ is a fork of TachiyomiEH, with bugfixes and added features. It is more actively maintained than TachiyomiEH at the moment.

src/help/guides/tachiyomi-az.md

@@ -1,8 +0,0 @@
----
-title: TachiyomiAZ
-lang: en-US
----
-
-# TachiyomiAZ
-
-#### GitHub: [https://github.com/az4521/TachiyomiAZ](https://github.com/az4521/TachiyomiAZ)

src/help/guides/tachiyomi-eh.md

@@ -1,8 +0,0 @@
----
-title: TachiyomiEH
-lang: en-US
----
-
-# TachiyomiEH
-
-#### GitHub: [https://github.com/NerdNumber9/TachiyomiEH](https://github.com/NerdNumber9/TachiyomiEH)

src/help/guides/tachiyomi-j2k.md

@@ -1,40 +0,0 @@
----
-title: TachiyomiJ2K
-lang: en-US
----
-
-# TachiyomiJ2K
-
-#### GitHub: [https://github.com/Jays2Kings/tachiyomiJ2K](https://github.com/Jays2Kings/tachiyomiJ2K)
-#### Download: [https://github.com/Jays2Kings/tachiyomiJ2K/releases](https://github.com/Jays2Kings/tachiyomiJ2K/releases)
-
-### Feature list:
-Here are the exclusive features on J2K fork that is not found on the Stable version. 
-- Improved notifications: 
-  - New chapter notifications: Notifications for new chapters are grouped together, expanding it shows information about the new chapters (chapter name and manga  cover). Tapping on it will open the chapter, or expand it to mark it as read or view all chapters.
-  - Notification for extension updates: Checks every hour while using the app, and every 12 hour in the background.
-  - Notification separation of library updates and new chapters.
-- Batch Auto-Source Migration: Can migrate all manga from a single source to another source.
-- Improved backup: Backup restore no longer starts over from the beginning if it's stopped, all manga that's shown on the progress bar are restored.
-- Removing favorites auto deletes downloaded chapters, and can be reversed with `Undo` button if removed by accident.
-- Library tag search: Filter manga in `My library` by searching for tags (ex. "Comedy", "Slice of Life") or exclude mangas by a tag (ex. "-Shounen"). Tapping on these tags also performs a local search. You can also sort manga by source by searching for the source name (ex. Mangakakalot).
-- Negative filters in `My library`.
-- Range Select (for `My library` and `Chapter list`): Long press an item then long press on another to select everything in between.
-- Drag & Drop sorting: Long press a manga and drag the thumbnail around to manually sort manga in `My library`. This also works alongside other sorting (such as `Last read`).
-- Improved downloads: Manga in `Downloads queue` can now be reordered or cancelled.
-- Edit manga info: Title, tags, description, cover image etc can be manually edited for manga in `My library` (click the Pencil icon on `INFO` tab to edit).
-- Filter extension by locale: Only extensions matching the sytem language will appear on `Extensions` menu by default (ie. if English is the system language, only All and English language extensions would appear by default).
-- Unlimited reading history for `Recently read`.
-- Search/sorting/mass enable/disable options for `Sources` menu in `Catalogues`.
-- Webview Navigation
-- Clicking on manga thumbnail on `INFO` page now shows an enlarged preview.
-- Changelog for app update can be found by going to `Settings` > `About` and clicking on `Build time`.
-- Automatic background based on manga page: For those that like having a white background to match the content, this will automatically set the background to match for moments such as a flashback section of a manga.
-- Fingerprint/Biometrics lock.
-- Option to hide manga titles in grid view.
-- Android 10 features:
-  - System dark Theme support: You can have Tachiyomi follow the system theme as well as custom dark themes.
-  - Edge to edge support (and a translucent nav bar for older versions): no more small ugly bar for the gesture navigation
-  - Share sheets upgrade 
-  - Reader seekbar overrides switch app gesture, so no more accidents for that.
-

src/help/guides/tachiyomi-neko.md

@@ -1,8 +0,0 @@
----
-title: Neko
-lang: en-US
----
-
-# Neko
-
-#### GitHub: [https://github.com/CarlosEsco/Neko](https://github.com/CarlosEsco/Neko)