From 65c2599c1bbc13d83cd4f70d87cf812f067ab827 Mon Sep 17 00:00:00 2001
From: Soitora <simon.mattila@protonmail.com>
Date: Fri, 1 May 2020 17:09:45 +0200
Subject: [PATCH] [0.9.0] Rework Getting started (#153)

* Update Navigation.vue

* Create VersionTag.vue

* Update "Getting started" for 0.9.0

* Update missing resources

* Pass DownloadUrl as undefined by default

* Remove unused constant

* Fix old extensions reference
---
 src/.vuepress/components/DownloadButtons.vue |  6 ++-
 src/.vuepress/components/Navigation.vue      | 28 +++++++---
 src/.vuepress/components/VersionTag.vue      | 51 ++++++++++++++++++
 src/help/faq/README.md                       |  4 +-
 src/help/guides/creating-backups.md          |  2 +-
 src/help/guides/getting-started.md           | 57 ++++++++------------
 src/help/guides/source-problems.md           |  2 +-
 7 files changed, 103 insertions(+), 47 deletions(-)
 create mode 100644 src/.vuepress/components/VersionTag.vue

diff --git a/src/.vuepress/components/DownloadButtons.vue b/src/.vuepress/components/DownloadButtons.vue
index 58608ff5..5c99e3ef 100644
--- a/src/.vuepress/components/DownloadButtons.vue
+++ b/src/.vuepress/components/DownloadButtons.vue
@@ -37,10 +37,12 @@ export default {
 			default: "Preview"
 		},
 		downloadStableUrl: {
-			type: String
+			type: String,
+			default: undefined
 		},
 		downloadPreviewUrl: {
-			type: String
+			type: String,
+			default: undefined
 		}
 	},
 
diff --git a/src/.vuepress/components/Navigation.vue b/src/.vuepress/components/Navigation.vue
index df6b58da..85e7fcca 100644
--- a/src/.vuepress/components/Navigation.vue
+++ b/src/.vuepress/components/Navigation.vue
@@ -1,12 +1,12 @@
 <template>
-	<span v-if="nav.link" class="app-navigation" title="App navigation">
+	<span v-if="nav.link" class="app-navigation" :class="nav.class" title="App navigation">
 		<a class="app-link" :href="nav.link + entry">
 			<MaterialIcon v-if="nav.icon" class="app-icon" :iconName="nav.icon" />
 			<span class="app-label">{{ nav.text }}</span>
 			<slot />
 		</a>
 	</span>
-	<span v-else class="app-navigation" title="App navigation">
+	<span v-else class="app-navigation" :class="nav.class" title="App navigation">
 		<MaterialIcon v-if="nav.icon" class="app-icon" :iconName="nav.icon" />
 		<span class="app-label">{{ nav.text }}</span>
 		<slot />
@@ -36,7 +36,7 @@ export default {
 				library: { text: "Library", icon: "collections_bookmark" },
 				updates: { text: "Updates", icon: "new_releases" },
 				history: { text: "History", icon: "history" },
-				sources: { text: "Sources", icon: "explore" },
+				browse: { text: "Browse", icon: "explore" },
 				more: { text: "More", icon: "more_horiz" },
 				/* Actions */
 				search: { text: "Search", icon: "search" },
@@ -44,7 +44,6 @@ export default {
 				update_library: { text: "Update library", icon: "refresh" },
 				/* More */
 				downloaded_only: { text: "Downloaded only", icon: "cloud_off" },
-				extensions: { text: "Extensions", icon: "extension" },
 				download_queue: { text: "Download queue", icon: "get_app" },
 				source_migration: { text: "Source migration", icon: "compare_arrows" },
 				settings: { text: "Settings", icon: "settings", link: "/help/guides/settings/" },
@@ -65,9 +64,16 @@ export default {
 				set_categories: { text: "Set categories", icon: "label" },
 				share: { text: "Share", icon: "share" },
 				webview: { text: "WebView", icon: "public" },
-				/* Sources */
-				latest: { text: "LATEST" },
-				browse: { text: "BROWSE" },
+				/* Browse */
+				button_latest: { text: "LATEST" },
+				button_browse: { text: "BROWSE" },
+				tab_sources: { text: "SOURCES" },
+				tab_extensions: { text: "EXTENSIONS" },
+				/* Sites */
+				tachiyomi: { text: "Tachiyomi" },
+				mangadex: { text: "MangaDex" },
+				/* Misc */
+				install: { text: "INSTALL", class:"ext-installation" },
 				/* Legacy */
 				old_library: { text: "My library", icon: "class" },
 				old_about: { text: "About", icon: "help", link: "/help/guides/settings/about" },
@@ -98,6 +104,14 @@ export default {
 			.app-icon,
 			.app-label
 				color $accentColor
+	.app-image
+		max-height 1.5em
+		vertical-align sub
+	&.ext-installation
+		border 1px solid $accentColorSecondary
+		padding 0px 0px 2px 4px
+		margin-right 5px
+		border-radius 4px
 	&:hover
 		cursor default
 </style>
diff --git a/src/.vuepress/components/VersionTag.vue b/src/.vuepress/components/VersionTag.vue
new file mode 100644
index 00000000..626f83bf
--- /dev/null
+++ b/src/.vuepress/components/VersionTag.vue
@@ -0,0 +1,51 @@
+<template>
+	<span v-if="fileName" class="fileNameContainer" title="File name">
+		<MaterialIcon class="fileNameIcon" iconName="get_app" />
+		<span class="fileName">tachiyomi-{{ this.$data.tagName }}.apk</span>
+		<slot />
+	</span>
+	<span v-else class="downloadTag">
+		{{ this.$data.tagName }}
+	</span>
+</template>
+
+<script>
+import axios from "axios";
+
+const RELEASE_URL =
+	"https://api.github.com/repos/inorichi/tachiyomi/releases/latest";
+
+export default {
+	props: {
+		fileName: {
+			type: Boolean
+		}
+	},
+
+	data() {
+		return {
+			tagName: "",
+		};
+	},
+
+	async mounted() {
+		const { data } = await axios.get(RELEASE_URL);
+		// Set the values.
+		this.$data.tagName = data.tag_name;
+	},
+};
+</script>
+
+<style lang="stylus" scoped>
+.fileNameContainer
+	white-space nowrap
+	.fileNameIcon,
+	.fileName
+		color $accentColorSecondary
+		font-weight 500
+		font-size 1em
+	.fileNameIcon
+		vertical-align top
+	&:hover
+		cursor default
+</style>
diff --git a/src/help/faq/README.md b/src/help/faq/README.md
index f6c119a0..6f16ea14 100644
--- a/src/help/faq/README.md
+++ b/src/help/faq/README.md
@@ -230,7 +230,7 @@ It might be because the title is worded differently. Follow any of the steps bel
 - Look up the title on a search engine like **Google** or a manga tracking service such as [AniList](https://anilist.co/home).
 - See which site has the series, often a single site will not satisfy all your needs.
 - Download the extension for that source from <Navigation item="old_extensions"/> if it exists, read [this](/help/faq/#which-sources-are-in-the-multi-source-extensions) for a list of which extensions contains what sources.
-- Go to <Navigation item="old_catalogues"/> → <Navigation item="browse"/> on a source then search for the manga again.
+- Go to <Navigation item="old_catalogues"/> → <Navigation item="button_browse"/> on a source then search for the manga again.
 
 
 #### Some common errors you might encounter
@@ -259,7 +259,7 @@ The source you selected may have Cloudflare protection on and is enforcing CAPTC
 If you're not getting any results when searching MangaDex then you need to log in. To do so enter the **WebView** for **MangaDex** then press the **Manga** drop-down and choose either **Sign up** or **Log in** to proceed with the log in.
 
 ::: guide
-To enter the **WebView** go to <Navigation item="old_catalogues"/> → <Navigation item="browse"/>/<Navigation item="latest"/> next to **MangaDex**, open any manga from the list and then press the <Navigation item="old_overflow"/> in the top-right corner and then press **Open in web view**.
+To enter the **WebView** go to <Navigation item="old_catalogues"/> → <Navigation item="button_browse"/>/<Navigation item="button_latest"/> next to **MangaDex**, open any manga from the list and then press the <Navigation item="old_overflow"/> in the top-right corner and then press **Open in web view**.
 :::
 
 ::: expander <strong>Click to reveal video guide!</strong>
diff --git a/src/help/guides/creating-backups.md b/src/help/guides/creating-backups.md
index cc183b26..d5ddc4b0 100644
--- a/src/help/guides/creating-backups.md
+++ b/src/help/guides/creating-backups.md
@@ -18,7 +18,7 @@ Backups can hold the following information:
 
 Restoring is done from the <Navigation item="old_backup"/> settings. To restore without issues be sure to:
 
-* Install all the <Navigation item="extensions"/> Extensions that were installed at the time of the backup.
+* Install all the <Navigation item="tab_extensions"/> that were installed at the time of the backup.
 * Log into the <Navigation item="settings_tracking"/> services that you use.
 * Log into **MangaDex** using **WebView** [as explained here](/help/faq/#no-results-when-searching).
 * You're able to access all the sources through the **WebView**.
diff --git a/src/help/guides/getting-started.md b/src/help/guides/getting-started.md
index 25c8748b..f1a3a910 100644
--- a/src/help/guides/getting-started.md
+++ b/src/help/guides/getting-started.md
@@ -9,48 +9,37 @@ lang: en-US
 
 <DownloadButtons downloadStableTag="Tachiyomi" downloadPreviewTag="Tachiyomi Preview"/>
 
-You can download the latest version of **Tachiyomi** from any of the above buttons.
-
-If you want to try new features before they get to the stable release, you can download the preview version.
-
-Open and install the **`.apk`** file you just downloaded.
-
-<figure class="centered">
-	<img height="128"
-	  :src="$withBase('/assets/media/installprompt.png')">
-</figure>
+You can download the latest version of <Navigation item="tachiyomi"/> by clicking either of the above buttons.
+When you've completed the download, open the <VersionTag fileName/> file and proceed with installing it.
 
 ## Installing an extension
 
-Now that Tachiyomi is installed, open the app and navigate to the <Navigation item="old_extensions"/> tab.
+::: aside-guide
+[<MaterialIcon icon-name="videocam"/> Click for video guide](/assets/media/video-guide-extension-install.webm)
+:::
 
-In this guide we will use MangaDex, our most popular extension.
-Press the **Install** button and accept the installation prompt that will be shown.
+Now that <Navigation item="tachiyomi"/> is installed, open the app and navigate to <Navigation item="browse"/> and then switch to the <Navigation item="tab_extensions"/> tab.
 
-If you're getting stopped by a security prompt and don't know what to do you can read this FAQ section: ["How do I allow third-party installations?"](/help/faq/#how-do-i-allow-third-party-installations).
+Find the extension that you'd like to use then press the <Navigation item="install"/> button next to your desired extension and then accept the installation prompt.
 
-::: expander <strong>Click to reveal video guide!</strong>
-<figure class="centered">
-	<video muted loop controls :poster="$withBase('/assets/media/video-guide-extension-install.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
-		<source :src="$withBase('/assets/media/video-guide-extension-install.webm')" type="video/webm"/>
-	</video>
-</figure>
+::: guide Security prompt
+You *might* be stopped by a security prompt while attempting to install an extension. If that were to happen then you need to allow <Navigation item="tachiyomi"/> the permission to *install unknown apps*.
+::: aside
+Learn how you can do so [here](/help/faq/#how-do-i-allow-third-party-installations)
 :::
 
 ## Adding manga to your library
 
-Now that you've installed the MangaDex extension it should show up in the <Navigation item="old_catalogues"/> tab. The items appearing here are called **Sources** (can also be called **Catalogues**), an extension can contains *multiple* sources.
-
-To find and add manga, you can now either use the <Navigation item="latest"/> button on your source, or you can use <Navigation item="browse"/> and search for it.
-
-Now that you've found manga that you want to add to your library, click on it and then press the blue bookmark button.
-
-It should now appear in your <Navigation item="old_library"/> tab, ready to be read!
-
-::: expander <strong>Click to reveal video guide!</strong>
-<figure class="centered">
-	<video muted loop controls :poster="$withBase('/assets/media/video-guide-library-add-to.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
-		<source :src="$withBase('/assets/media/video-guide-library-add-to.webm')" type="video/webm"/>
-	</video>
-</figure>
+::: aside-guide
+[<MaterialIcon icon-name="videocam"/> Click for video guide](/assets/media/video-guide-library-add-to.webm)
+:::
+
+Now that you've installed the desired extension it will show in the <Navigation item="tab_sources"/> tab. This page contains all of your sources, which is obtained through extensions, some extensions contain *multiple* sources.
+
+To find and add manga, you can now use either the <Navigation item="button_latest"/> button and explore recently updated manga from that source or you can use the <Navigation item="button_browse"/> button and search for it.
+
+Now that you've presumably found manga that you want to add, click on it and then press the <Navigation item="bookmark"/> button, it should now appear in your <Navigation item="library"/> ready to be read!
+
+::: guide Global search
+You can search for manga globally across all your sources by using <Navigation item="search"/> located in the top-right of <Navigation item="browse"/> → <Navigation item="tab_sources"/>.
 :::
diff --git a/src/help/guides/source-problems.md b/src/help/guides/source-problems.md
index 5a72d969..1706f060 100644
--- a/src/help/guides/source-problems.md
+++ b/src/help/guides/source-problems.md
@@ -52,7 +52,7 @@ Please note that WebView is not the same as using your browser.
 WebView is a new feature introduced in stable version `0.8.4` to allow
 for log-in only features and solving CAPTCHA.
 
-You can find the web view option by opening a manga, then tapping the 3 dots in the top right while in the **Info** tab. If you have no existing manga from the source, go to <Navigation item="old_catalogues"/>, press <Navigation item="browse"/> beside the source, and open a manga, following the above instructions.
+You can find the web view option by opening a manga, then tapping the 3 dots in the top right while in the **Info** tab. If you have no existing manga from the source, go to <Navigation item="old_catalogues"/>, press <Navigation item="button_browse"/> beside the source, and open a manga, following the above instructions.
 
 Once you are in WebView, you will see a webpage and a bar on top with an arrow at the left side, pointing to the left edge of your screen.
 If there is no CAPTCHA on the webpage, initiate one by tapping a manga title, if possible. Once a CAPTCHA is shown, solve it. After that, use the aforementioned back arrow on the bar at the top of your screen to go back to your manga. Please do not use the back button on your phone as it does not work as expected.