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>

website/src/.vitepress/theme/components/AddRepoButton.vue

@@ -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>

website/src/.vitepress/theme/components/Extensions/ExtensionGroup.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
+import { toRefs } from 'vue'
-import { langName, simpleLangName } from '../../../config/scripts/languages'
 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"
     />

website/src/.vitepress/theme/components/Extensions/ExtensionsWrapper.vue

@@ -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>

website/src/docs/guides/getting-started.md

@@ -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.
+2. After the download is complete, open the `.apk` file.
-1. Proceed with the installation process.
+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.
+:::: tabs
-1. Navigate to the "**Browse**" section.
+== Local source
-1. Tap on the "**Extensions**" tab.
+Read content stored locally on your device.
-1. Look for the extension you want to use and press the "**INSTALL**" button next to it.
-1. Proceed with the installation process.
 
-![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
+::: danger Caution
-Depending on your device settings, you might need to grant **Tachiyomi** permission to install unknown apps.
+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.
-
-![Security warning](/docs/guides/getting-started/security-warning.webp =546x165)
-
-> Relevant guide: [Enabling Third-Party Installations](/docs/faq/browse/extensions#enabling-third-party-installations)
 :::
 
-### 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.
 

website/src/extensions/index.md

@@ -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>