Move social links to footer

src/.vuepress/components/ExtensionFilters.vue

@@ -59,6 +59,7 @@ export default {
 		</div>
 	</span>
 </template>
+
 <style lang="stylus">
 .filters-list
 	display flex

src/.vuepress/components/HelpPage.vue

@@ -1,28 +1,20 @@
 <script>
 import AlgoliaSearchBox from "@theme/components/AlgoliaSearchBox.vue";
 import NavBar from "@theme/components/NavBar.vue";
+import PageFooter from "@theme/components/PageFooter.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: {
 		NavBar,
+		PageFooter,
 		AlgoliaSearchBox,
 		ClipboardListIcon,
 		SourceForkIcon,
-		DiscordIcon,
-		TwitterIcon,
-		FacebookIcon,
-		RedditIcon,
-		GithubIcon,
 		LifebuoyIcon,
 		ClipboardSearchIcon,
 		FaqIcon,
@@ -88,62 +80,13 @@ export default {
 								<p>{{ helpItem.description }}</p>
 							</div>
 						</a>
-						<a
-							v-else-if="helpItem.linkExt"
-							:href="helpItem.linkExt"
-							target="_blank"
-							rel="noreferrer"
-							tabindex="1"
-						>
-							<div class="card" :class="'card__' + helpItem.title">
-								<header v-if="helpItem.discord">
-									<DiscordIcon />
-									<span>
-										<h3>{{ helpItem.title }}</h3>
-										<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>
-										<h3>{{ helpItem.title }}</h3>
-										<OutboundLink />
-									</span>
-								</header>
-								<header v-else-if="helpItem.github">
-									<GithubIcon />
-									<span>
-										<h3>{{ helpItem.title }}</h3>
-										<OutboundLink />
-									</span>
-								</header>
-								<header v-else-if="helpItem.icon">
-									<MaterialIcon :icon="helpItem.icon" icon-only />
-									<h3>{{ helpItem.title }}</h3>
-								</header>
-								<p>{{ helpItem.description }}</p>
-							</div>
-						</a>
 					</div>
 				</div>
 
 				<slot name="bottom" />
 			</div>
 		</main>
+		<PageFooter />
 	</div>
 </template>
 
@@ -208,11 +151,6 @@ export default {
 					> span
 						display block
 					span
-						.icon.outbound
-							display inline-block
-							visibility hidden
-							vertical-align baseline
-							right 10px
 						h3
 							display inline-block
 							margin-left 1.8rem
@@ -230,38 +168,6 @@ export default {
 					position relative
 					.material-design-icon
 						color $accentColor
-						&.discord-icon
-							color $discordAccentColor
-						&.twitter-icon
-							color $twitterAccentColor
-						&.facebook-icon
-							color $facebookAccentColor
-						&.reddit-icon
-							color $redditAccentColor
-						&.github-icon
-							color $githubAccentColor
-					.icon.outbound
-						visibility visible
-				&__Discord:hover
-					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
-						color $redditAccentColor
-				&__GitHub:hover
-					border-bottom 2px solid $githubAccentColor
-					h3
-						color $githubAccentColor
 			.column
 				border 1px solid #cfd4db
 				border-radius 6px
@@ -313,18 +219,8 @@ export default {
 						.material-icons,
 						.material-design-icon
 							font-size 1.6em
-							&.discord-icon
-								color $discordAccentColor
-							&.reddit-icon
-								color $redditAccentColor
-							&.github-icon
-								color $githubAccentColor
 						span
 							display inline-block
-							.icon.outbound
-								visibility visible
-								right 0
-								top -4px
 							h3
 								margin-left 0
 								margin-bottom 0
@@ -342,15 +238,6 @@ export default {
 						top unset
 						.material-design-icon
 							color $accentColorSecondary
-					&__Discord
-						h3
-							color $discordAccentColor
-					&__Reddit
-						h3
-							color $redditAccentColor
-					&__GitHub
-						h3
-							color $githubAccentColor
 				.row
 					grid-template-columns repeat(1, 1fr)
 		.navbar

src/.vuepress/theme/components/Home.vue

@@ -1,4 +1,5 @@
 <script>
+import PageFooter from "@theme/components/PageFooter.vue";
 import BookOpenVariantIcon from "vue-material-design-icons/BookOpenVariant.vue";
 import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
 
@@ -8,6 +9,7 @@ export default {
 	components: {
 		CloudDownloadIcon,
 		BookOpenVariantIcon,
+		PageFooter,
 	},
 
 	computed: {
@@ -92,19 +94,7 @@ export default {
 
 		<Content class="theme-default-content custom" />
 
-		<footer>
-			<div class="footer">
-				<div class="copyright">
-					<a href="https://www.apache.org/licenses/LICENSE-2.0">Open-source Apache Licensed</a>
-					| Copyright &copy; 2015{{ " - " + new Date().getFullYear() }} Javier Tomás |
-					<a href="/privacy">Privacy policy</a>
-				</div>
-				<div class="netlify">
-					<a target="_blank" href="https://www.netlify.com/">This site is powered by Netlify</a>
-					<img src="../../public/assets/netlify.svg" />
-				</div>
-			</div>
-		</footer>
+		<PageFooter />
 	</main>
 </template>
 
@@ -205,33 +195,6 @@ export default {
 			&--dark
 				position absolute
 				box-shadow 0 10px 50px 0px #ddd
-	footer
-		position relative
-		.footer
-			padding 2.5rem
-			border-top 1px solid $borderColor
-			text-align center
-			.copyright
-				font-size 0.9rem
-				a
-					color $textColor
-					font-weight normal
-					&:hover
-						text-decoration underline
-			.netlify
-				margin-top 1rem
-				font-size 0.8rem
-				a
-					color $accentColorSecondary
-					&:hover
-						color #24827a
-				img
-					-ms-transform rotate(360deg)
-					-webkit-transform rotate(360deg)
-					transform rotate(360deg)
-					margin-bottom -2px
-					width 1em
-					height 1em
 
 @keyframes fade
 	0%

src/.vuepress/theme/components/PageFooter.vue

@@ -0,0 +1,120 @@
+<script>
+import DiscordIcon from "vue-material-design-icons/Discord.vue";
+import FacebookIcon from "vue-material-design-icons/Facebook.vue";
+import GithubIcon from "vue-material-design-icons/Github.vue";
+import RedditIcon from "vue-material-design-icons/Reddit.vue";
+import TwitterIcon from "vue-material-design-icons/Twitter.vue";
+
+export default {
+	name: "PageFooter",
+
+	components: {
+		DiscordIcon,
+		TwitterIcon,
+		FacebookIcon,
+		RedditIcon,
+		GithubIcon,
+	},
+};
+</script>
+
+<template>
+	<footer>
+		<div class="footer">
+			<div class="copyright">
+				Copyright &copy; 2015{{ " - " + new Date().getFullYear() }} Javier Tomás |
+				<a href="https://www.apache.org/licenses/LICENSE-2.0">Open-source Apache Licensed</a>
+				|
+				<a href="/privacy">Privacy policy</a>
+			</div>
+			<div class="social">
+				<a target="_blank" rel="noopener noreferrer" href="https://discord.gg/tachiyomi">
+					<DiscordIcon />
+					Discord
+					<OutboundLink />
+				</a>
+				<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/tachiyomiorg">
+					<TwitterIcon />
+					Twitter
+					<OutboundLink />
+				</a>
+				<a target="_blank" rel="noopener noreferrer" href="https://facebook.com/tachiyomiorg">
+					<FacebookIcon />
+					Facebook
+					<OutboundLink />
+				</a>
+				<a target="_blank" rel="noopener noreferrer" href="https://reddit.com/r/Tachiyomi">
+					<RedditIcon />
+					Reddit
+					<OutboundLink />
+				</a>
+				<a target="_blank" rel="noopener noreferrer" href="https://github.com/tachiyomiorg">
+					<GithubIcon />
+					GitHub
+					<OutboundLink />
+				</a>
+			</div>
+			<div class="netlify">
+				<a target="_blank" href="https://www.netlify.com/">This site is powered by Netlify</a>
+				<img src="../../public/assets/netlify.svg" />
+			</div>
+		</div>
+	</footer>
+</template>
+
+<style lang="stylus">
+.footer
+	padding 2.5rem
+	border-top 1px solid $borderColor
+	text-align center
+	.copyright
+		font-size 0.9rem
+		a
+			color $textColor
+			font-weight normal
+			&:hover
+				text-decoration underline
+	.social
+		margin 1rem 0
+		a
+			display inline-block
+			margin 0 0.5rem
+			white-space no-wrap
+		.icon.outbound
+			visibility hidden
+		&:hover
+			.material-design-icon
+				color $accentColor
+				&.discord-icon
+					color $discordAccentColor
+				&.twitter-icon
+					color $twitterAccentColor
+				&.facebook-icon
+					color $facebookAccentColor
+				&.reddit-icon
+					color $redditAccentColor
+				&.github-icon
+					color $githubAccentColor
+			.icon.outbound
+				visibility visible
+	.netlify
+		margin-top 1rem
+		font-size 0.8rem
+		a
+			color $accentColorSecondary
+			&:hover
+				color #24827a
+		img
+			-ms-transform rotate(360deg)
+			-webkit-transform rotate(360deg)
+			transform rotate(360deg)
+			margin-bottom -2px
+			width 1em
+			height 1em
+
+@media screen and (max-width $MQMobile)
+	.footer
+		.social
+			.icon.outbound
+				visibility visible
+</style>

src/help/README.md

@@ -26,26 +26,6 @@ help:
     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: 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: Official subreddit
-    linkExt: https://reddit.com/r/Tachiyomi
-    reddit: true
-  - title: GitHub
-    description: Code organization
-    linkExt: https://github.com/tachiyomiorg
-    github: true
 ---
 
 # Help Center