mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-30 12:01:50 +01:00
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
This commit is contained in:
Soitora
GitHub
parent
2d84b9324c
commit
f99262f3ef
5
package-lock.json
generated
5
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
261
src/.vuepress/components/Help.vue
Normal file
261
src/.vuepress/components/Help.vue
Normal file
@ -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>
|
||||
@ -28,6 +28,7 @@ module.exports = {
|
||||
repo: 'inorichi/tachiyomi',
|
||||
docsRepo: 'tachiyomiorg/website',
|
||||
docsDir: 'src',
|
||||
smoothScroll: true,
|
||||
algolia: {
|
||||
apiKey: 'fc1c45b5a3835e1882cbbf0751dfe705',
|
||||
indexName: 'tachiyomi'
|
||||
|
||||
@ -1,40 +1,5 @@
|
||||
module.exports = [
|
||||
{ text: "FAQ", link: "/help/faq/" },
|
||||
{
|
||||
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: "Home", link: "/" },
|
||||
{ text: "Help", link: "/help/" },
|
||||
{ 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" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -1,10 +1,48 @@
|
||||
---
|
||||
title: Help
|
||||
description: An overview of help pages you can access quickly.
|
||||
layout: Help
|
||||
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.
|
||||
:::
|
||||
Loading…
Reference in New Issue
Block a user