Update source migration page and updated videos (#320)

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

src/.vuepress/components/Navigation.vue

@@ -80,6 +80,7 @@ export default {
 				/* Misc */
 				install: { text: "INSTALL", class:"ext-installation" },
 				reorder: { text: "Reorder", icon:"reorder" },
+				overflow: { text: "Overflow", icon:"more_vert" },
 			}[this.item];
 		},
 	},
@@ -88,12 +89,13 @@ export default {
 
 <style lang="stylus">
 .app-navigation
-	white-space nowrap
+	white-space pre
+	font-size 0
 	.app-icon,
 	.app-label
 		color $accentColorSecondary
 		font-weight 500
-		font-size 1em
+		font-size 1rem
 	.app-icon
 		vertical-align top
 	.app-link
@@ -106,11 +108,12 @@ 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
+
+blockquote
+	.app-navigation
+		.app-icon,
+		.app-label
+			color inherit
 </style>

src/.vuepress/styles/index.styl

@@ -44,6 +44,8 @@ body,
 	padding 0.1rem 1.5rem
 	.title
 		font-weight bold
+	.aside-guide
+		margin-top -1rem
 
 // Expander container
 .expander
@@ -212,3 +214,33 @@ body,
 
 .el-collapse-item__content
 	padding-left 10px
+
+// Fix Links in Alerts
+.el-alert
+	.el-link
+		flex-direction inherit
+		align-items inherit
+		justify-content inherit
+		vertical-align inherit
+		position inherit
+		text-decoration inherit
+		font-size inherit
+		outline inherit
+		padding inherit
+		&:hover
+			color inherit !important
+
+.el-alert
+	&--warning
+		.el-link--inner
+			color #845a1b
+			font-size inherit
+
+// Tweak Element-UI Colors
+.el-alert--warning
+	&.is-light
+		.el-alert
+			&__icon
+			&__title
+			&__description
+				color #ce8b27

src/help/faq/README.md

@@ -163,7 +163,7 @@ To install just download the file for the extension you want and then install it
 ::::: el-tabs
 :::: el-tab-pane label="Android 8.0 and higher"
 ::: aside-guide
-[<MaterialIcon icon-name="videocam"/> Click for Android 8.0 and newer video guide](/help/faq/assets/UnknownSources-Android10.webm)
+[<MaterialIcon icon="videocam"/> Click for Android 8.0 and newer video guide](/help/faq/assets/UnknownSources-Android10.webm)
 :::
 When installing your first extension and are prompted that your phone *isn't allowed* to install unknown apps from that source, simply follow the prompt to allow it.
 
@@ -171,7 +171,7 @@ In *newer* versions of **Android** you need to enable **Install unknown apps** b
 ::::
 :::: el-tab-pane label="Android 7.1 and lower"
 ::: aside-guide
-[<MaterialIcon icon-name="videocam"/> Click for Android 7.1 and older video guide](/help/faq/assets/UnknownSources-Android7.webm)
+[<MaterialIcon icon="videocam"/> Click for Android 7.1 and older video guide](/help/faq/assets/UnknownSources-Android7.webm)
 :::
 When installing your first extension and are prompted that your phone *isn't allowed* to install unknown apps from that source, simply follow the prompt to allow it.
 
@@ -252,7 +252,7 @@ This error can be caused by a variety of reasons, all to do with storage.
 
 #### Why are there no results when searching?
 ::: aside-guide
-[<MaterialIcon icon="videocam"/> Click for video guide](/help/faq/assets/MangaDex-NoResults.webm)
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/faq/assets/MangaDex-NoResults.mp4)
 :::
 
 If you're not getting any results when searching **MangaDex** then you need to log in. To do so enter the <Navigation item="webview"/> for **MangaDex** then press the **Manga** drop-down and choose either **Sign up** or **Log in** to proceed with the login.

src/help/guides/getting-started.md

@@ -14,7 +14,7 @@ When you've completed the download, open the <VersionTag fileName/> file and pro
 ## Installing an extension
 
 ::: aside-guide
-[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/getting-started/assets/Extension-Install.webm)
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/getting-started/assets/Extension-Install.mp4)
 :::
 
 Now that **Tachiyomi** is installed, open the app and navigate to <Navigation item="browse"/> and then switch to the **Extensions** tab.
@@ -30,7 +30,7 @@ Learn how you can do so [here](/help/faq/#how-do-i-allow-third-party-installatio
 ## Adding manga to your library
 
 ::: aside-guide
-[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/getting-started/assets/Library-AddTo.webm)
+[<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.

src/help/guides/source-migration.md

@@ -6,16 +6,114 @@ lang: en-US
 
 # Source migration
 
-Migration is the process of moving manga from one source to another while keeping your current progress and data. This is used often when a source is no longer accessible or you want to move it off one source to another for a myriad of reasons.
+Migration is the process of moving manga between sources without losing progress. This is most often used when a source is no longer accessible or another source is more up-to-date.
 
-::: guide
-1. Go to <Navigation item="more"/> and tap <Navigation item="source_migration"/>.
-1. Select the **Source** you're migrating from.
-1. Find and select the title that you want to migrate.
-	> **Tachiyomi** will do a global search of all the sources you have installed and enabled. If you don't find the manga you want, try searching for other titles it might go under.
-1. Once you find the manga you want to migrate, select it and then choose which data you want to transfer over, and you're done.
+<el-alert type="warning" title="Warning!" show-icon :closable="false">Always make sure to have a <el-link href="/help/guides/creating-backups/" :underline="false">backup</el-link> in case anything unexpected occurs.</el-alert>
+
+## Migrating on Stable/Preview
+
+:::: guide Migrating from Manga
+::: aside-guide
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/source-migration/assets/Migrate-Preview-Manga.mp4)
 :::
 
-::: warning
-Make sure you have a **[backup](/help/guides/creating-backups/)**, if anything goes wrong.
+1. Tap into a **Manga** you would like to migrate.
+2. Go to <Navigation item="overflow"/> and tap <Navigation item="migrate" />.
+	> **Tachiyomi** will do a global search of all the sources you have installed and enabled.
+1. Select the **Source** that you'd like to migrate *to* by tapping the **Manga** thumbnail.
+1. Choose which data you want to transfer over, and you're done.
+::::
+
+:::: guide Migrating from Source
+::: aside-guide
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/source-migration/assets/Migrate-Preview-Source.mp4)
 :::
+
+1. Tap into <Navigation item="browse"/> on the bottom navbar.
+2. Press the <Navigation item="migrate" /> tab at the top next to <Navigation item="extensions" />.
+3. Select the **Source** that you'd like to migrate *from*.
+4. Tap the **Manga** you'd like to migrate *from* the **Source**.
+	> **Tachiyomi** will do a global search of all the sources you have installed and enabled.
+1. Select the **Source** you'd like to migrate *to* by tapping the **Manga** thumbnail.
+1. Choose which data you want to transfer over, and you're done.
+::::
+
+::: tip Searching only pinned sources
+You can restrict global searching to pinned sources if you wish to declutter your search.</br>To do this, go to <Navigation item="more"/> → <Navigation item="settings"/> →  <Navigation item="browse"/> then toggle the **Only include pinned sources** setting.
+
+Pin sources in <Navigation item="browse"/> using the <MaterialIcon icon="push_pin" /> pin icon next to the source name.
+:::
+
+## Migrating on TachiyomiJ2K
+
+:::: guide Migrating multiple manga
+::: aside-guide
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/source-migration/assets/Migrate-J2K.mp4)
+:::
+
+1. Tap <MaterialIcon icon="settings"/> **Settings** → <MaterialIcon icon="explore"/> **Sources** → **Source migration**.
+1. Select the **Source** you'd like to migrate *from* and select **All**.
+1. Select the **Sources** that you'd like to migrate *to* and search by and tap the arrow at the bottom right.
+1. Choose which data you want to transfer over.
+1. Wait until all your **Manga** is found and hit the <MaterialIcon icon="done_all"/> at the top and you're done.
+	> If a manga is not found, or is wrong you can manually search it by pressing <Navigation item="overflow"/> → **Search manually**.
+::::
+
+:::: guide Migrating a single manga
+::: aside-guide
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/source-migration/assets/Migrate-J2K-Single.mp4)
+:::
+
+1. Tap into a **Manga** in your Library.
+1. Tap <Navigation item="overflow"/> → **Migrate manga**.
+1. Select the **Sources** you'd like to search and migrate *to* and hit the arrow at the bottom right.
+1. Wait until it is found and select <MaterialIcon icon="done"/> in the top right and you're done.
+	> If a manga is not found, or is wrong you can manually search it by pressing <Navigation item="overflow"/> → **Search manually**
+::::
+
+## Migrating on TachiyomiAZ
+
+:::: guide Instructions
+::: aside-guide
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/source-migration/assets/Migrate-AZ.mp4)
+:::
+
+1. Tap into <Navigation item="library"/>.
+1. Tap <Navigation item="overflow"/>  → **Source migration**.
+1. Select the **Source** you'd like to migrate *from* and select **All**.
+1. Select the **Sources** that you'd like to migrate *to* and search by and tap the arrow at the bottom right.
+1. Choose which data you want to transfer over.
+1. Wait until all your **Manga** is found and hit the <MaterialIcon icon="done_all"/> at the top and you're done.
+	> If a manga is not found, or is wrong you can manually search it by pressing <Navigation item="overflow"/> → **Search manually**.
+::::
+
+## Migrating on TachiyomiSY
+
+:::: guide Migrating from Library
+::: aside-guide
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/source-migration/assets/Migrate-SY-Library.mp4)
+:::
+
+1. Tap into <Navigation item="library"/>.
+2. Tap <Navigation item="overflow"/> → **Source migration**.
+3. Select the **Source** you'd like to migrate *from* and select **All**.
+4. Select the **Sources** that you'd like to migrate *to* and search by and tap the arrow labeled <Navigation item="migrate" />. at the bottom right.
+5. Choose which data you want to transfer over.
+6. Wait until all your **Manga** is found and hit the <MaterialIcon icon="done_all"/> at the top and you're done.
+	> If a manga is not found, or is wrong you can manually search it by pressing <Navigation item="overflow"/>  → **Search manually**.
+::::
+
+:::: guide Migrating from Source
+::: aside-guide
+[<MaterialIcon icon="videocam"/> Click for video guide](/help/guides/source-migration/assets/Migrate-SY-Source.mp4)
+:::
+
+1. Tap into <Navigation item="browse"/> on the bottom navbar.
+2. Press the <Navigation item="migrate" /> tab at the top next to <Navigation item="extensions" />.
+3. Select the **Source** that you'd like to migrate *from*.
+4. Select the **Source** you'd like to migrate *from* and select **All**.
+5. Select the **Sources** that you'd like to migrate *to* and search by and tap the arrow labeled <Navigation item="migrate" />. at the bottom right.
+6. Choose which data you want to transfer over.
+7. Wait until all your **Manga** is found and hit the <MaterialIcon icon="done_all"/> at the top and you're done.
+	> If a manga is not found, or is wrong you can manually search it by pressing <Navigation item="overflow"/>  → **Search manually**.
+::::

src/sandbox/style-guide.md

@@ -37,7 +37,7 @@ Some **DO**s and **DO NOT**s for [FAQ](../help/faq/README.md).
 
 - **DO** include video guides as a text under the header:
 > ::: aside-guide
-> [<MaterialIcon icon-name="videocam"/> Click for video guide](/help/faq/assets/MangaDex-NoResults.webm)
+> [<MaterialIcon icon-name="videocam"/> Click for video guide](/help/faq/assets/MangaDex-NoResults.mp4)
 > :::
 
 - **DO** try to be consistent with video recording by following these guidelines: