mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-10-31 23:15:05 +01:00
Add Repo button and rewrite Getting started (#1114)
* Add repo button to Extensions * Remove replace prefix * Some more extension changes * Changes to Getting started guide * Encode url * Update website/src/docs/guides/getting-started.md Co-authored-by: arkon <4098258+arkon@users.noreply.github.com> * Update website/src/docs/guides/getting-started.md Co-authored-by: arkon <4098258+arkon@users.noreply.github.com> * Update website/src/docs/guides/getting-started.md Co-authored-by: arkon <4098258+arkon@users.noreply.github.com> * Update website/src/docs/guides/getting-started.md Co-authored-by: arkon <4098258+arkon@users.noreply.github.com> * Update website/src/docs/guides/getting-started.md Co-authored-by: arkon <4098258+arkon@users.noreply.github.com> * Address PR comments * Tweak Google Analytics tag --------- Co-authored-by: arkon <4098258+arkon@users.noreply.github.com>
This commit is contained in:
Soitora
GitHub
parent
927a95cdf5
commit
8714179973
149
website/src/.vitepress/theme/components/AddRepoButton.vue
Normal file
149
website/src/.vitepress/theme/components/AddRepoButton.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
/// <reference types="@types/gtag.js" />
|
||||
|
||||
function handleAnalytics() {
|
||||
window.gtag?.('event', 'Add', {
|
||||
event_category: 'Extension',
|
||||
event_label: 'Repository',
|
||||
})
|
||||
}
|
||||
|
||||
const url = new URL('tachiyomi://add-repo')
|
||||
url.searchParams.append('url', 'https://raw.githubusercontent.com/tachiyomiorg/extensions/repo/index.min.json')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!isAndroid">
|
||||
<div class="action-buttons">
|
||||
<a
|
||||
class="action-button primary"
|
||||
href="/docs/guides/getting-started"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<span class="version-disclaimer">
|
||||
Requires <strong>Android 6.0</strong> or higher.
|
||||
</span>
|
||||
<div class="custom-block warning">
|
||||
<p class="custom-block-title">
|
||||
Unsupported operating system
|
||||
</p>
|
||||
<p>
|
||||
<strong>Tachiyomi</strong> is an <strong>Android app</strong> only.
|
||||
Use an <strong>Android device</strong> to download and install the app.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isAndroid">
|
||||
<div class="action-buttons">
|
||||
<a
|
||||
class="action-button primary"
|
||||
:href="url"
|
||||
@click="handleAnalytics()"
|
||||
>
|
||||
<IconDownload />
|
||||
<span class="text">Add repository</span>
|
||||
<span class="version">Official</span>
|
||||
</a>
|
||||
</div>
|
||||
<span class="version-disclaimer">
|
||||
Requires <strong>Tachiyomi 0.15.2</strong> or higher.
|
||||
</span>
|
||||
<div class="custom-block danger">
|
||||
<p class="custom-block-title">
|
||||
Caution
|
||||
</p>
|
||||
<p>
|
||||
Beware that any third-party repository or extension can contain malware.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.action-buttons {
|
||||
display: flex
|
||||
gap: 0.75em
|
||||
justify-content: center
|
||||
align-items: center
|
||||
margin: 0.75em auto
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: inline-block
|
||||
border: 1px solid transparent
|
||||
text-align: center
|
||||
font-weight: 600
|
||||
white-space: nowrap
|
||||
transition: color 0.25s, border-color 0.25s, background-color 0.25s
|
||||
cursor: pointer
|
||||
transition: all 0.3s ease
|
||||
border-radius: 20px
|
||||
padding: 0 20px
|
||||
line-height: 38px
|
||||
font-size: 14px
|
||||
|
||||
&:hover {
|
||||
text-decoration: none !important
|
||||
}
|
||||
|
||||
&.primary {
|
||||
border-color: var(--vp-button-brand-border)
|
||||
color: var(--vp-button-brand-text)
|
||||
background-color: var(--vp-button-brand-bg)
|
||||
|
||||
&:hover {
|
||||
border-color: var(--vp-button-brand-hover-border)
|
||||
color: var(--vp-button-brand-hover-text)
|
||||
background-color: var(--vp-button-brand-hover-bg)
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--vp-button-brand-active-border)
|
||||
color: var(--vp-button-brand-active-text)
|
||||
background-color: var(--vp-button-brand-active-bg)
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
border-color: var(--vp-button-alt-border)
|
||||
color: var(--vp-button-alt-text)
|
||||
background-color: var(--vp-button-alt-bg)
|
||||
|
||||
&:hover {
|
||||
border-color: var(--vp-button-alt-hover-border)
|
||||
color: var(--vp-button-alt-hover-text)
|
||||
background-color: var(--vp-button-alt-hover-bg)
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--vp-button-alt-active-border)
|
||||
color: var(--vp-button-alt-active-text)
|
||||
background-color: var(--vp-button-alt-active-bg)
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
margin-right: 0.5em
|
||||
font-size: 1.25em
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 0.8em
|
||||
}
|
||||
}
|
||||
|
||||
.version-disclaimer {
|
||||
display: block
|
||||
text-align: center
|
||||
margin: 0.75em auto
|
||||
font-size: 0.75rem
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, toRefs } from 'vue'
|
||||
import { langName, simpleLangName } from '../../../config/scripts/languages'
|
||||
import { toRefs } from 'vue'
|
||||
import type { Extension } from '../../queries/useExtensionsRepositoryQuery'
|
||||
import ExtensionItem from './ExtensionItem.vue'
|
||||
|
||||
const props = defineProps<{ list: Extension[], totalCount: number }>()
|
||||
const { list } = toRefs(props)
|
||||
|
||||
const groupName = computed(() => {
|
||||
/* const groupName = computed(() => {
|
||||
const firstItem = list.value[0]
|
||||
|
||||
return firstItem.lang === 'en'
|
||||
? simpleLangName(firstItem.lang)
|
||||
: langName(firstItem.lang)
|
||||
})
|
||||
}) */
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="extension-group">
|
||||
<h2>
|
||||
<span>{{ groupName }}</span>
|
||||
<span>Official extensions</span>
|
||||
|
||||
<span class="extensions-total">
|
||||
Total:
|
||||
@ -31,7 +30,7 @@ const groupName = computed(() => {
|
||||
|
||||
<ExtensionItem
|
||||
v-for="extension in list"
|
||||
:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
|
||||
:id="extension.pkg"
|
||||
:key="extension.apk"
|
||||
:item="extension"
|
||||
/>
|
||||
|
||||
@ -6,7 +6,6 @@ import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { simpleLangName } from '../../../config/scripts/languages'
|
||||
import useExtensionsRepositoryQuery from '../../queries/useExtensionsRepositoryQuery'
|
||||
import type { Extension } from '../../queries/useExtensionsRepositoryQuery'
|
||||
import ExtensionFilters from './ExtensionFilters.vue'
|
||||
import ExtensionList from './ExtensionList.vue'
|
||||
import type { Sort } from './ExtensionFilters.vue'
|
||||
|
||||
@ -102,12 +101,12 @@ watch([isLoading, loadingInstance], async ([newIsLoading]) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ExtensionFilters
|
||||
<!-- <ExtensionFilters
|
||||
v-model:search="filters.search"
|
||||
v-model:lang="filters.lang"
|
||||
v-model:sort="filters.sort"
|
||||
:extensions="extensions ?? []"
|
||||
/>
|
||||
/> -->
|
||||
<div class="extensions">
|
||||
<ExtensionList v-if="!isLoading" :extensions="filteredExtensions" />
|
||||
</div>
|
||||
|
||||
@ -14,35 +14,53 @@ Essential information to help you get set up with Tachiyomi.
|
||||
|
||||
## Installation guide
|
||||
|
||||
### 1. Downloading Tachiyomi
|
||||
### Downloading Tachiyomi
|
||||
|
||||
1. Visit our [download](/download/) page to get the latest version of **Tachiyomi**.
|
||||
1. After the download is complete, open the `tachiyomi-{{ release.stable.tag_name }}.apk` file.
|
||||
1. Proceed with the installation process.
|
||||
2. After the download is complete, open the `.apk` file.
|
||||
3. Proceed with the installation process.
|
||||
|
||||
### 2. Adding sources
|
||||
### Adding sources
|
||||
|
||||
Once **Tachiyomi** is installed on your device, you can install extensions to access a wide range of sources.
|
||||
Once **Tachiyomi** is installed on your device, you can bring your own content to read from various sources:
|
||||
|
||||
1. Open the **Tachiyomi** app.
|
||||
1. Navigate to the "**Browse**" section.
|
||||
1. Tap on the "**Extensions**" tab.
|
||||
1. Look for the extension you want to use and press the "**INSTALL**" button next to it.
|
||||
1. Proceed with the installation process.
|
||||
:::: tabs
|
||||
== Local source
|
||||
Read content stored locally on your device.
|
||||
|
||||
|
||||
See the [Local source guide](/docs/guides/local-source/) for instructions.
|
||||
== External repositories
|
||||
External repositories add additional sources to **Tachiyomi**. You can add external repositories by going to <nav to="browse"> and tapping **Extension repos**.
|
||||
|
||||
|
||||
Once there, you can add repositories by inputing URLs ending with `index.min.json`. A small set of extensions are available [here](/extensions/).
|
||||
|
||||
::: tip INSTALL PERMISSION
|
||||
Depending on your device settings, you might need to grant **Tachiyomi** permission to install unknown apps.
|
||||
|
||||
|
||||
|
||||
> Relevant guide: [Enabling Third-Party Installations](/docs/faq/browse/extensions#enabling-third-party-installations)
|
||||
::: danger Caution
|
||||
Tachiyomi will not provide resources for any unofficial repositories. Beware that any third-party repositories or extensions will have full access to the app and may contain malware.
|
||||
:::
|
||||
|
||||
### 3. Adding series to your library
|
||||
Once you've added a repository, go to <nav to="extensions"> and refresh the extensions list.
|
||||
|
||||
You can now tap the download button next to extensions to install them.
|
||||
|
||||
> You may need to [enable third-party installations](/docs/faq/browse/extensions#enabling-third-party-installations).
|
||||
|
||||
::: tip Official repository
|
||||
Tachiyomi has an official extension repository, you can use the **Add repository** button on the [Extensions](/extensions/) page, or copy the url manually below.
|
||||
> `https://raw.githubusercontent.com/tachiyomiorg/extensions/repo/index.min.json`
|
||||
:::
|
||||
|
||||
::: danger Caution
|
||||
Beware that any third-party repository or extension can contain malware.
|
||||
:::
|
||||
== Manual extensions
|
||||
Extensions can be manually installed through `.apk` files.
|
||||
|
||||
::: danger Caution
|
||||
Tachiyomi will not provide resources for any unofficial extensions. Beware that any third-party repositories or extensions will have full access to the app and may contain malware.
|
||||
:::
|
||||
::::
|
||||
|
||||
### Adding series to your library
|
||||
|
||||
After installing the desired extension, you'll find it in the **Sources** tab.
|
||||
|
||||
|
||||
@ -9,10 +9,16 @@ next: false
|
||||
|
||||
# Extensions
|
||||
|
||||
Extensions can also be installed directly from the app.
|
||||
By default, **Tachiyomi** comes without any extensions.
|
||||
You can choose to read local content, manually add extensions, or include an external repository.
|
||||
|
||||
**Tachiyomi** maintains only one official repository; any other repositories are unofficial and have no affiliation with us.
|
||||
|
||||
<AddRepoButton/>
|
||||
|
||||
<ExtensionsWrapper/>
|
||||
|
||||
<script setup>
|
||||
import AddRepoButton from '@theme/components/AddRepoButton.vue'
|
||||
import ExtensionsWrapper from '@theme/components/Extensions/ExtensionsWrapper.vue'
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user