Add a Help entry point (#183)

* Initial work

* Add community md icons

* Allow search to be hidden from frontmatter

* Update Help.vue

* Adjust README to fit new Help.vue

* More stuffs

* Linting

* Try fixing valid v-else

* Missed the actual error

* Can't resolve "vue-material-design-icons/GitHub.vue" fix?

* Force the page to ignore sidebar padding

package-lock.json

@@ -14567,6 +14567,11 @@
 				"vue-style-loader": "^4.1.0"
 			}
 		},
+		"vue-material-design-icons": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.6.0.tgz",
+			"integrity": "sha512-b0Js/C4WHFnpcuH8goxl0bM7mjuSNClAYvsijUwfMfWXjW663ZvcQj3Int5H9rgRwZjPXPTJVxbFn+4sWJKMVA=="
+		},
 		"vue-router": {
 			"version": "3.1.6",
 			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",

package.json

@@ -34,6 +34,7 @@
 		"lodash.groupby": "^4.6.0",
 		"lodash.sortby": "^4.7.0",
 		"material-design-icons": "^3.0.1",
+		"vue-material-design-icons": "^4.6.0",
 		"vue-sweetalert2": "^3.0.5",
 		"vuepress-plugin-sitemap": "^2.3.1"
 	}

src/.vuepress/components/Help.vue

@@ -0,0 +1,261 @@
+<template>
+	<div class="theme-container">
+		<Navbar />
+		<main class="page">
+			<div class="theme-custom-content content__default">
+				<slot name="top" />
+
+				<Content class="theme-custom-content" />
+
+				<Content slot-key="center" />
+
+				<AlgoliaSearchBox :options="algolia" />
+
+				<div v-if="data.help && data.help.length" class="row help">
+					<div
+						v-for="(helpItem, index) in data.help"
+						:key="index"
+						class="column helpItem"
+					>
+						<a
+							v-if="helpItem.link"
+							:href="helpItem.link"
+							tabindex="1"
+						>
+							<div class="card">
+								<header v-if="helpItem.faqApp">
+									<CellphoneAndroidIcon />
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<header v-else-if="helpItem.faqExt">
+									<PuzzleIcon />
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<header v-else-if="helpItem.guides">
+									<ClipboardListIcon />
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<header v-else-if="helpItem.forks">
+									<SourceForkIcon />
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<header v-else-if="helpItem.contribution">
+									<LifebuoyIcon />
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<header v-else-if="helpItem.icon">
+									<MaterialIcon
+										:icon-name="helpItem.icon"
+										icon-only
+									/>
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<p>{{ helpItem.description }}</p>
+							</div>
+						</a>
+						<a
+							v-else-if="helpItem.linkExt"
+							:href="helpItem.linkExt"
+							target="_blank"
+							rel="noreferrer"
+							tabindex="1"
+						>
+							<div class="card">
+								<header v-if="helpItem.discord">
+									<DiscordIcon />
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<header v-else-if="helpItem.reddit">
+									<RedditIcon />
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<header v-else-if="helpItem.github">
+									<GithubIcon />
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<header v-else-if="helpItem.icon">
+									<MaterialIcon
+										:icon-name="helpItem.icon"
+										icon-only
+									/>
+									<h3>{{ helpItem.title }}</h3>
+								</header>
+								<p>{{ helpItem.description }}</p>
+							</div>
+						</a>
+					</div>
+				</div>
+
+				<slot name="bottom" />
+			</div>
+		</main>
+	</div>
+</template>
+
+<script>
+import Navbar from "@theme/components/Navbar.vue";
+import AlgoliaSearchBox from "../theme/components/AlgoliaSearchBox.vue";
+
+import CellphoneAndroidIcon from "vue-material-design-icons/CellphoneAndroid.vue";
+import ClipboardListIcon from "vue-material-design-icons/ClipboardList.vue";
+import SourceForkIcon from "vue-material-design-icons/SourceFork.vue";
+import PuzzleIcon from "vue-material-design-icons/Puzzle.vue";
+import DiscordIcon from "vue-material-design-icons/Discord.vue";
+import RedditIcon from "vue-material-design-icons/Reddit.vue";
+import GithubIcon from "vue-material-design-icons/Github.vue";
+import LifebuoyIcon from "vue-material-design-icons/Lifebuoy.vue";
+
+export default {
+	components: {
+		Navbar,
+		AlgoliaSearchBox,
+		CellphoneAndroidIcon,
+		ClipboardListIcon,
+		SourceForkIcon,
+		PuzzleIcon,
+		DiscordIcon,
+		RedditIcon,
+		GithubIcon,
+		LifebuoyIcon
+	},
+
+	computed: {
+		data() {
+			return this.$page.frontmatter;
+		},
+
+		algolia() {
+			return (
+				this.$themeLocaleConfig.algolia ||
+				this.$site.themeConfig.algolia ||
+				{}
+			);
+		},
+
+		isAlgoliaSearch() {
+			return (
+				this.algolia && this.algolia.apiKey && this.algolia.indexName
+			);
+		}
+	}
+};
+</script>
+
+<style lang="stylus">
+.page
+	padding-left 0 !important
+	padding-bottom 2rem
+	display block
+
+.theme-custom-content
+	max-width 75rem
+	margin 0 auto
+	padding 2rem 2.5rem
+	*
+		box-sizing border-box
+	.content__center
+		text-align center
+		margin-bottom 2rem
+	.algolia-search-wrapper
+		width 100%
+		text-align center
+		margin-bottom 5rem
+		.algolia-autocomplete
+			width 50%
+			input
+				background #ffffff url('/assets/img/search.83621669.svg') 0.6rem 0.9rem no-repeat
+				background-size 1rem
+				box-shadow 0 0 30px rgba(177,174,174,0.322)
+				border 1px solid #cfd4db
+				font-size 1.2rem
+				height 3rem
+				width 100%
+	.card
+		background-color white
+		border 1px solid #cfd4db
+		border-radius 6px
+		box-shadow 0 0 30px #b1aeae52
+		color $accentColor
+		height 12rem
+		overflow hidden
+		padding 0.5rem
+		text-align center
+		user-select none
+		width auto
+		header
+			margin-top 1.25rem
+			white-space nowrap
+			.material-icons,
+			.material-design-icon
+				font-size 2.5em
+				color $accentColorSecondary
+			.material-design-icon > .material-design-icon__svg
+				position relative
+			h3
+				margin 10px
+		p
+			color #566573
+			font-weight 400
+			font-size 0.95rem
+		&:hover
+			position relative
+			top -5px
+	.column
+		float left
+		padding 0.5rem
+		width 25%
+		a:focus
+			box-shadow none
+			outline none
+			.card
+				box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
+				outline none
+	.row
+		margin 0 -5px
+		&:after
+			content ''
+			display table
+			clear both
+
+@media screen and (max-width $MQMobile)
+	.theme-custom-content
+		padding 2rem 0.75rem
+		padding-bottom 0
+		h1
+			margin-bottom 0.5rem
+		.content__center
+			margin-top 0
+			padding-top 0
+		.algolia-search-wrapper
+			width 100%
+			margin-bottom 1rem
+			.algolia-autocomplete
+				width 100%
+				padding 0.4rem 0.65rem
+				input
+					width 100%
+					left 0
+		.column
+			width 100%
+			display block
+			margin-bottom 0
+			margin-top 0
+			padding 0.4rem 1rem
+		.card
+			height auto
+			width auto
+			header
+				margin-top 1rem
+				.material-icons,
+				.material-design-icon
+					font-size 1.6em
+				h3
+					font-size 1.5rem
+					display inline-block
+					margin 0
+			p
+				font-size 1rem
+			&:hover
+				position inherit
+				top unset
+</style>

src/.vuepress/config.js

@@ -28,6 +28,7 @@ module.exports = {
 		repo: 'inorichi/tachiyomi',
 		docsRepo: 'tachiyomiorg/website',
 		docsDir: 'src',
+		smoothScroll: true,
 		algolia: {
 			apiKey: 'fc1c45b5a3835e1882cbbf0751dfe705',
 			indexName: 'tachiyomi'

src/.vuepress/config/nav.js

@@ -1,40 +1,5 @@
 module.exports = [
-	{ text: "FAQ", link: "/help/faq/" },
+	{ text: "Home", link: "/" },
-	{
+	{ text: "Help", link: "/help/" },
-		text: "Guides",
-		items: [
-			{
-				text: "Guides",
-				items: [
-					{ text: "Getting started", link: "/help/guides/getting-started/" },
-					{ text: "Source problems", link: "/help/guides/source-problems/" },
-					{ text: "Source migration", link: "/help/guides/source-migration/" },
-					{ text: "Creating backups", link: "/help/guides/creating-backups/" },
-					{ text: "Reading local manga", link: "/help/guides/reading-local-manga/" },
-					{ text: "Categories", link: "/help/guides/categories/" },
-					{ text: "Settings", link: "/help/guides/settings/" },
-				]
-			}
-		],
-	},
-	{ text: "Forks", link: "/forks/" },
 	{ text: "Extensions", link: "/extensions/" },
-	{
-		text: "Links",
-		items: [
-			{
-				text: "Community",
-				items: [
-					{ text: "Discord", link: "https://discord.gg/tachiyomi" },
-					{ text: "Reddit", link: "https://reddit.com/r/Tachiyomi" },
-				]
-			},
-			{
-				text: "Sponsor",
-				items: [
-					{ text: "Ko-fi", link: "https://ko-fi.com/inorichi" },
-				]
-			},
-		]
-	},
 ];

src/.vuepress/enhanceApp.js

@@ -1,6 +1,7 @@
 import './styles/fonts.styl'
 import './styles/animations.styl'
 import 'sweetalert2/dist/sweetalert2.min.css';
+import 'vue-material-design-icons/styles.css';
 
 import { VueAgile } from 'vue-agile';
 import VueSweetalert2 from 'vue-sweetalert2';

src/.vuepress/theme/components/Navbar.vue

@@ -26,8 +26,9 @@
         'max-width': linksWrapMaxWidth + 'px'
       } : {}"
     >
+      <div v-if="$page.frontmatter.hideSearch"/>
       <AlgoliaSearchBox
-        v-if="isAlgoliaSearch"
+        v-else-if="isAlgoliaSearch"
         :options="algolia"
       />
       <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />

src/help/README.md

@@ -1,10 +1,48 @@
 ---
-title: Help
+layout: Help
-description: An overview of help pages you can access quickly.
+title: Help center
+description: From common questions to guides, find help for everything Tachiyomi.
 lang: en-US
-sidebar: false
+hideSearch: true
+help:
+  - title: Application
+    description: Frequently asked questions
+    link: /help/faq/#application
+    faqApp: true
+  - title: Extensions
+    description: Frequently asked questions
+    link: /help/faq/#extensions
+    faqExt: true
+  - title: Guides
+    description: Extensive guides written for you
+    link: /help/guides/getting-started/
+    guides: true
+    extensions: true
+  - title: Forks
+    description: Alternative versions
+    link: /forks/
+    forks: true
+  - title: Contribution
+    description: Help contribute to the app
+    link: /help/contribution/
+    contribution: true
+  - title: Discord
+    description: Primary communication platform
+    linkExt: https://discord.gg/tachiyomi
+    discord: true
+  - title: Reddit
+    description: Community forums
+    linkExt: https://reddit.com/r/Tachiyomi
+    reddit: true
+  - title: GitHub
+    description: Repository for the app
+    linkExt: https://github.com/inorichi/tachiyomi
+    github: true
 ---
 
-# Help
+# Help center
 
-Choose between [guides](guides/getting-started/) and [frequently asked questions](faq/).
+::: slot center
+### Need help? We've got your back.
+From common questions to guides, find help for everything Tachiyomi.
+:::