Skip to content

Commit

Permalink
Add Repo button and rewrite Getting started (tachiyomiorg#1114)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@Soitora @arkon
Soitora and arkon authored Jan 9, 2024
1 parent 927a95c commit 8714179
Show file tree
Hide file tree
Showing 5 changed files with 198 additions and 27 deletions.
149 changes: 149 additions & 0 deletions website/src/.vitepress/theme/components/AddRepoButton.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 5 additions & 6 deletions website/src/.vitepress/theme/components/Extensions/ExtensionGroup.vue
View file
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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"
/>
Expand Down
5 changes: 2 additions & 3 deletions website/src/.vitepress/theme/components/Extensions/ExtensionsWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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>
Expand Down
52 changes: 35 additions & 17 deletions website/src/docs/guides/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

![Installing extensions](/docs/guides/getting-started/installing-extensions.light.webp#light =414x245)
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**.

![Installing extensions](/docs/guides/getting-started/installing-extensions.dark.webp#dark =414x245)
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.
::: 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.
:::

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).
![Security warning](/docs/guides/getting-started/security-warning.webp =546x165)
::: 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.

> Relevant guide: [Enabling Third-Party Installations](/docs/faq/browse/extensions#enabling-third-party-installations)
::: 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.
:::
::::

### 3. Adding series to your library
### Adding series to your library

After installing the desired extension, you'll find it in the **Sources** tab.

Expand Down
8 changes: 7 additions & 1 deletion website/src/extensions/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit 8714179

Please sign in to comment.