Add links to official Twitter and Facebook accounts

src/.vuepress/components/HelpPage.vue

@@ -4,11 +4,13 @@ import NavBar from "@theme/components/NavBar.vue";
 import ClipboardListIcon from "vue-material-design-icons/ClipboardList.vue";
 import ClipboardSearchIcon from "vue-material-design-icons/ClipboardSearch.vue";
 import DiscordIcon from "vue-material-design-icons/Discord.vue";
+import FacebookIcon from "vue-material-design-icons/Facebook.vue";
 import FaqIcon from "vue-material-design-icons/FrequentlyAskedQuestions.vue";
 import GithubIcon from "vue-material-design-icons/Github.vue";
 import LifebuoyIcon from "vue-material-design-icons/Lifebuoy.vue";
 import RedditIcon from "vue-material-design-icons/Reddit.vue";
 import SourceForkIcon from "vue-material-design-icons/SourceFork.vue";
+import TwitterIcon from "vue-material-design-icons/Twitter.vue";
 
 export default {
 	components: {
@@ -17,6 +19,8 @@ export default {
 		ClipboardListIcon,
 		SourceForkIcon,
 		DiscordIcon,
+		TwitterIcon,
+		FacebookIcon,
 		RedditIcon,
 		GithubIcon,
 		LifebuoyIcon,
@@ -99,6 +103,20 @@ export default {
 										<OutboundLink />
 									</span>
 								</header>
+								<header v-if="helpItem.twitter">
+									<TwitterIcon />
+									<span>
+										<h3>{{ helpItem.title }}</h3>
+										<OutboundLink />
+									</span>
+								</header>
+								<header v-if="helpItem.facebook">
+									<FacebookIcon />
+									<span>
+										<h3>{{ helpItem.title }}</h3>
+										<OutboundLink />
+									</span>
+								</header>
 								<header v-else-if="helpItem.reddit">
 									<RedditIcon />
 									<span>
@@ -214,6 +232,10 @@ export default {
 						color $accentColor
 						&.discord-icon
 							color $discordAccentColor
+						&.twitter-icon
+							color $twitterAccentColor
+						&.facebook-icon
+							color $facebookAccentColor
 						&.reddit-icon
 							color $redditAccentColor
 						&.github-icon
@@ -224,6 +246,14 @@ export default {
 					border-bottom 2px solid $discordAccentColor
 					h3
 						color $discordAccentColor
+				&__Twitter:hover
+					border-bottom 2px solid $twitterAccentColor
+					h3
+						color $discordAccentColor
+				&__Facebook:hover
+					border-bottom 2px solid $facebookAccentColor
+					h3
+						color $discordAccentColor
 				&__Reddit:hover
 					border-bottom 2px solid $redditAccentColor
 					h3
@@ -245,7 +275,7 @@ export default {
 						outline none
 			.row
 				display grid
-				grid-template-columns repeat(4, 1fr)
+				grid-template-columns repeat(5, 1fr)
 				grid-auto-rows 1fr
 				grid-gap 1rem
 				&:after

src/.vuepress/styles/palette.styl

@@ -39,6 +39,8 @@ $ehAccentColor = $accentColor
 $syAccentColor = #BE0F6E
 // Links
 $discordAccentColor = #7289DA
+$twitterAccentColor = #199BEE
+$facebookAccentColor = #4166B2
 $redditAccentColor = #FF5700
 $githubAccentColor = #333333
 // Element-UI

src/help/README.md

@@ -14,7 +14,7 @@ help:
     link: /help/guides/troubleshooting/
     fixProblems: true
   - title: Guides
-    description: Extensive guides written for you
+    description: How to use the app
     link: /help/guides/getting-started/
     guides: true
     extensions: true
@@ -30,13 +30,21 @@ help:
     description: Primary communication platform
     linkExt: https://discord.gg/tachiyomi
     discord: true
+  - title: Twitter
+    description: Official Twitter account
+    linkExt: https://twitter.com/tachiyomiorg
+    twitter: true
+  - title: Facebook
+    description: Official Facebook account
+    linkExt: https://facebook.com/tachiyomiorg
+    facebook: true
   - title: Reddit
-    description: Community forums
+    description: Official subreddit
     linkExt: https://reddit.com/r/Tachiyomi
     reddit: true
   - title: GitHub
-    description: Repository for the app
-    linkExt: https://github.com/tachiyomiorg/tachiyomi
+    description: Code organization
+    linkExt: https://github.com/tachiyomiorg
     github: true
 ---