[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

@@ -37,10 +37,12 @@ export default {
 			default: "Preview"
 		},
 		downloadStableUrl: {
-			type: String
+			type: String,
+			default: undefined
 		},
 		downloadPreviewUrl: {
-			type: String
+			type: String,
+			default: undefined
 		}
 	},
 

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 */
+				/* Browse */
-				latest: { text: "LATEST" },
+				button_latest: { text: "LATEST" },
-				browse: { text: "BROWSE" },
+				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>

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>

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>

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**.

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.
+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.
-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>
 
 ## 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.
+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.
-Press the **Install** button and accept the installation prompt that will be shown.
 
-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>
+::: guide Security prompt
-<figure class="centered">
+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*.
-	<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">
+::: aside
-		<source :src="$withBase('/assets/media/video-guide-extension-install.webm')" type="video/webm"/>
+Learn how you can do so [here](/help/faq/#how-do-i-allow-third-party-installations)
-	</video>
-</figure>
 :::
 
 ## 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.
+::: aside-guide
-
+[<MaterialIcon icon-name="videocam"/> Click for video guide](/assets/media/video-guide-library-add-to.webm)
-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.
+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.
-
+
-It should now appear in your <Navigation item="old_library"/> tab, ready to be read!
+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.
-
+
-::: expander <strong>Click to reveal video guide!</strong>
+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!
-<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">
+::: guide Global search
-		<source :src="$withBase('/assets/media/video-guide-library-add-to.webm')" type="video/webm"/>
+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"/>.
-	</video>
-</figure>
 :::

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.