Updated the Guide Section. (#322)

Co-authored-by: Soitora <simon.mattila@protonmail.com>

src/.vuepress/components/Navigation.vue

@@ -1,14 +1,14 @@
 <template>
-	<span v-if="nav.link" class="app-navigation" :class="nav.class" title="App navigation">
+	<span v-if="nav.link" id="NavigationVue" 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" :icon="nav.icon" />
-			<span class="app-label">{{ nav.text }}</span>
+			<span class="app-label" :class="nav.internalClass">{{ nav.text }}</span>
 			<slot />
 		</a>
 	</span>
-	<span v-else class="app-navigation" :class="nav.class" title="App navigation">
+	<span v-else id="NavigationVue" class="app-navigation" :class="nav.class" title="App navigation">
 		<MaterialIcon v-if="nav.icon" class="app-icon" :icon="nav.icon" />
-		<span class="app-label">{{ nav.text }}</span>
+		<span class="app-label" :class="nav.internalClass">{{ nav.text }}</span>
 		<slot />
 	</span>
 </template>
@@ -81,6 +81,12 @@ export default {
 				install: { text: "INSTALL", class:"ext-installation" },
 				reorder: { text: "Reorder", icon:"reorder" },
 				overflow: { text: "Overflow", icon:"more_vert" },
+				/* Forks */
+				neko: { text: "Neko", internalClass:"nav-tachiyomi_neko"},
+				tachiyomij2k: { text: "TachiyomiJ2K", link:"/forks/Neko"},
+				tachiyomiaz: { text: "TachiyomiAZ", link:"/forks/TachiyomiAZ"},
+				tachiyomisy: { text: "TachiyomiSY", link:"/forks/TachiyomiSY"},
+				tachiyomieh: { text: "TachiyomiEH", link:"/forks/TachiyomiEH"},
 			}[this.item];
 		},
 	},
@@ -88,7 +94,8 @@ export default {
 </script>
 
 <style lang="stylus">
-.app-navigation
+#NavigationVue
+	&.app-navigation
 		white-space pre
 		font-size 0
 		.app-icon,
@@ -98,6 +105,7 @@ export default {
 			font-size 1rem
 		.app-icon
 			vertical-align top
+			padding-right 0.25rem
 		.app-link
 			&:hover
 				cursor pointer
@@ -108,6 +116,11 @@ export default {
 		.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
 

src/.vuepress/config/plugins.js

@@ -76,6 +76,14 @@ module.exports = [
 			after: "</div>",
 		},
 	],
+	[
+		"vuepress-plugin-container",
+		{
+			type: "guide-empty",
+			before: "<div class='guide'>",
+			after: "</div>",
+		},
+	],
 	[
 		"vuepress-plugin-container",
 		{

src/.vuepress/styles/index.styl

@@ -170,6 +170,9 @@ body,
 		.nav-item > a:not(.external).router-link-active
 			border-bottom 2px solid $azAccentColor
 
+// Fork Icons Before
+.forkIconBefore
+	vertical-align bottom
 // Center align class
 .centered
 	text-align center

src/help/faq/README.md

@@ -32,6 +32,22 @@ Every now and then you find a manga that is translated by more than one group. B
 Change library sorting by going to <Navigation item="library"/> → <Navigation item="filter"/> → **Sort** section then in this case selecting **Total chapters**.
 :::
 
+### Browse
+
+#### Why can't I find X manga?
+Sometimes you can struggle to find a source hosting the manga you're looking for, look here for some tips to help you find it.
+::: guide Tips to find your manga
+1. Look up the title on [Google](https://google.com/) or a manga database such as [MangaUpdates](https://www.mangaupdates.com/).
+1. See if a website or scanlator has the series, then check the [Extensions](/extensions/) list.
+
+#### If you found the website/scanlator in the list
+Download the corresponding extension, go to the source, then search for the manga there.
+#### If you didn't find the website/scanlator in the list
+If you found a website or scanlator that hosts your manga but doesn't exist as a source or extension, then you can see if its [already been requested](https://github.com/inorichi/tachiyomi-extensions/issues) or you can [request it yourself](https://github.com/inorichi/tachiyomi-extensions/issues/new/choose).
+
+If the website/scanlator group doesn't have an online manga reader, you can download the manga manually and set up [local manga](/help/guides/reading-local-manga).
+:::
+
 ### Reader
 #### Why are some images not displayed?
 Aside from network issues, it could be because the images are too big or that the decoder doesn't support that image type.

src/help/guides/creating-backups.md

@@ -47,12 +47,13 @@ You can do this by going to <Navigation item="more"/> → <Navigation item="sett
 
 ## Forks information
 
-#### [Neko](/forks/Neko)
+### <img class="forkIconBefore" src="/forks/Neko/assets/logo.png" width="24" height="24" /> [Neko](/forks/Neko)
 
 This fork can only restore **MangaDex** entries in a backup. If there are entries from other sources that are a part of that backup then they will not transfer.
 
-#### [TachiyomiAZ](/forks/TachiyomiAZ), [TachiyomiSY](/forks/TachiyomiSY), and [TachiyomiEH](/forks/TachiyomiEH)
+### <img class="forkIconBefore" src="/forks/TachiyomiAZ/assets/logo.png" width="24" height="24" /> [TachiyomiAZ](/forks/TachiyomiAZ), <img class="forkIconBefore" src="/forks/TachiyomiSY/assets/logo.png" width="24" height="24" />  [TachiyomiSY](/forks/TachiyomiSY) and <img class="forkIconBefore" src="/forks/TachiyomiEH/assets/logo.png" width="24" height="24" />  [TachiyomiEH](/forks/TachiyomiEH)
+
+These forks have some built-in extensions, namely: **E-Hentai**, **Hitomi.la**, and **nHentai** for <Navigation item="tachiyomiaz" /> and <Navigation item="tachiyomieh" /> while <Navigation item="tachiyomisy" /> only has **E-Hentai**.
 
-These forks have some built-in extensions, namely: **E-Hentai**, **Hitomi.la**, and **nHentai**.
 
 Titles from said extensions will not be restored when restoring a backup made by these forks to standard Tachiyomi. It is possible to restore titles to these forks, but it is not possible to back them up out of these forks.

src/help/guides/getting-started.md

@@ -33,12 +33,24 @@ Learn how you can do so [here](/help/faq/#how-do-i-allow-third-party-installatio
 [<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/getting-started/assets/Library-Add.mp4)
 :::
 
-Now that you've installed the desired extension it will show in the **Sources** tab. This page contains all of your sources, which is obtained through extensions, some extensions contain *multiple* sources.
+Now that you've installed the desired extension, it will show in the **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 **Latest** button and explore recently updated manga from that source or you can tap on the source icon and search for it.
+To find and add manga to your library, tap **Latest** for a source's most recently updated manga, or tap on the source itself to browse and search their catalog.
 
 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
+::: guide Other ways to search for manga
-You can search for manga globally across all your sources by using <Navigation item="search"/> located in the top-right of <Navigation item="browse"/> → **Sources**.
+You can also search for manga globally across all your sources by using <Navigation item="search"/> located in the top-right of <Navigation item="browse"/> → **Sources**.
 :::
+:::: guide Trouble finding a specific manga
+Check your spelling and try again, there's also the chance that your used source may not host the manga you're looking for.
+* Some sources use **Japanese romanized** titles instead of **English** ones.
+  > For example **Boku no Hero Academia** instead of **My Hero Academia**.
+* Some sources use different spellings.
+  > For example **Bungo Stray Dogs** instead of **Bungou Stray Dogs**.
+* Some sources use different wordings
+ > For example **3-gatsu no Lion** instead of **Sangatsu no Lion**.
+::: aside
+Find more potential answers to your questions [here](/help/faq/#why-can-t-i-find-x-manga).
+:::
+::::

src/help/guides/reading-local-manga.md

@@ -8,17 +8,14 @@ lang: en-US
 
 Follow the steps below to create local manga.
 
-1. Create a folder named `local` in Tachiyomi folder, which is located in the phone's **Internal storage** or external SD card.
+1. Create a folder named `local` in Tachiyomi folder, which is located in the phone's **internal storage** or **external SD card**.
 1. Place manga inside `Tachiyomi/local` folder.
 1. You can then access the manga in <Navigation item="browse"/> → **Local source**.
 
 If you add more chapters then you'll have to manually refresh the chapter list (by pulling down the list).
 
-Supported chapter formats are folder with pictures inside (such as `.jpg`, `.png` etc), `ZIP`/`CBZ`, `RAR`/`CBR` and `EPUB`. But expect better performance with directories and `ZIP`/`CBZ`.
+Supported chapter formats are folder with pictures inside (such as `.jpg`, `.png`, etc), `ZIP`/`CBZ`, `RAR`/`CBR` and `EPUB`. But expect better performance with directories and `ZIP`/`CBZ`.
-
+<el-alert type="warning" title="Warning!" show-icon :closable="false">Remember to give the app storage permissions on <strong>Android 6</strong> and newer.</el-alert>
-::: warning IMPORTANT
-Remember to give the app disk permissions on Android 6 and newer.
-:::
 
 ## Folder Structure
 
@@ -31,18 +28,18 @@ Tachiyomi requires a specific folder structure for local manga to be correctly p
 			/sdcard/Tachiyomi/local
 			<ul>
 				<li>
-					My manga
+					Manga Name
 					<ul>
 						<li>
 							ch1
 							<ul>
-								<li class="file">files</li>
+								<li class="file">images</li>
 							</ul>
 						</li>
 						<li>
 							ch2
 							<ul>
-								<li class="file">files</li>
+								<li class="file">images</li>
 							</ul>
 						</li>
 						<li class="file">cover.jpg</li>
@@ -57,18 +54,18 @@ Tachiyomi requires a specific folder structure for local manga to be correctly p
 			/storage/18F5-2C11/Tachiyomi/local
 			<ul>
 				<li>
-					My manga
+					Manga Name
 					<ul>
 						<li>
 							ch3
 							<ul>
-								<li class="file">files</li>
+								<li class="file">images</li>
 							</ul>
 						</li>
 						<li>
 							ch4
 							<ul>
-								<li class="file">files</li>
+								<li class="file">images</li>
 							</ul>
 						</li>
 					</ul>
@@ -81,9 +78,16 @@ Tachiyomi requires a specific folder structure for local manga to be correctly p
 :::
 
 Tachiyomi will see four chapters in a single manga.
-
 The path to the folder with images must contain both the manga title and the chapter name (as seen above).
 
+::: guide-empty
+<figure class="centered">
+	<h4>Example structure using the file manager</h4>
+	<p>Here, the manga name is <strong>test</strong> so the file structure is <code>/Tachiyomi/local/test/ch1/images</code>.</p>
+	<img height="300" :src="$withBase('/help/guides/reading-local-manga/assets/LocalManga.jpg')">
+</figure>
+:::
+
 ## Archive Files
 
 Archive files such as `ZIP`/`CBZ` are supported but the folder structure inside is not. Any folders inside the archive file are ignored. You must place the archive inside the `Manga` folder where the name will become the `Chapter` title. All images inside the archive regardless of folder structure will become pages for that chapter.
@@ -94,12 +98,12 @@ Archive files such as `ZIP`/`CBZ` are supported but the folder structure inside
 			/sdcard/Tachiyomi/local
 			<ul>
 				<li>
-					My manga
+					Manga Name
 					<ul>
 						<li>
 							ch1.zip
 							<ul>
-								<li class="file">img files</li>
+								<li class="file">images</li>
 							</ul>
 						</li>
 						<li>
@@ -108,7 +112,7 @@ Archive files such as `ZIP`/`CBZ` are supported but the folder structure inside
 								<li>
 									ch2
 									<ul>
-										<li class="file">img files</li>
+										<li class="file">images</li>
 									</ul>
 								</li>
 							</ul>
@@ -129,7 +133,7 @@ Archive files such as `ZIP`/`CBZ` are supported but the folder structure inside
 
 It is possible to add details to local manga. Like manga from other catalogs, you add information about the manga such as the author, artist, description, and genre tags.
 
-To import details along with your local manga, you have to create a file called `details.json` and place it within the manga folder. This file will contain the extended details about the manga in the `JSON` format. You can see the example below on how to build the file. Once the file is there, the app should load the data when you first open the manga or you can pull down to refresh the details.
+To import details along with your local manga, you have to create a json file. It can be named anything but it must be placed within the **Manga** folder. A standard file name is `details.json`. This file will contain the extended details about the manga in the `JSON` format. You can see the example below on how to build the file. Once the file is there, the app should load the data when you first open the manga or you can pull down to refresh the details.
 
 You can copy the following example and edit the details as needed:
 ``` json