Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-10-31 23:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix remaining eslint errors

Browse Source
This commit is contained in:
arkon 2023-11-11 10:22:07 -05:00
parent e0da86ca0c
commit bbac199151
46 changed files with 2243 additions and 2252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/.editorconfig
View File

@ -2,12 +2,8 @@ root = true
[*]
end_of_line = lf
indent_style = tab
indent_size = 4
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.yml]
indent_style = space
indent_size = 2

2
website/.stylelintrc.cjs
View File

@ -9,7 +9,7 @@ module.exports = {
'stylus/selector-type-no-unknown': null,
'stylus/selector-list-comma': 'always',
'stylus/indentation': [
'tab',
2,
{
indentInsideParens: 'twice',
},

3
website/eslint.config.js
View File

@ -19,6 +19,9 @@ export default antfu({
'docs/.vitepress/cache/**',
],
typescript: true,
vue: true,
...compat.config({
rules: {
'comma-dangle': ['error', 'only-multiline'],

122
website/src/.vitepress/config.ts
View File

@ -1,72 +1,76 @@
import process from "node:process"
import { URL, fileURLToPath } from "node:url"
import { defineConfig, loadEnv } from "vitepress"
import ElementPlus from "unplugin-element-plus/vite"
import process from 'node:process'
import { URL, fileURLToPath } from 'node:url'
import { defineConfig, loadEnv } from 'vitepress'
import ElementPlus from 'unplugin-element-plus/vite'
import markdownConfig from "./config/markdownConfig"
import markdownConfig from './config/markdownConfig'
// For use with loading Markdown plugins
import themeConfig from "./config/themeConfig"
import themeConfig from './config/themeConfig'
// Theme related config
import headConfig from "./config/headConfig" // Provides how to generate Meta head tags
import headConfig from './config/headConfig'
import generateMeta from "./config/hooks/generateMeta"
// Provides how to generate Meta head tags
import generateMeta from './config/hooks/generateMeta'
// Enhanced meta generation
import generateFeed from "./config/hooks/generateFeed" // Allows generation of RSS feed
import generateOgImages from "./config/hooks/generateOgImages"
import generateFeed from './config/hooks/generateFeed'
const title = "Tachiyomi"
const description = "Discover and read manga, webtoons, comics, and more – easier than ever on your Android device."
// Allows generation of RSS feed
import generateOgImages from './config/hooks/generateOgImages'
const env = loadEnv("", process.cwd())
const hostname: string = env.VITE_HOSTNAME || "http://localhost:4173"
const title = 'Tachiyomi'
const description = 'Discover and read manga, webtoons, comics, and more – easier than ever on your Android device.'
const env = loadEnv('', process.cwd())
const hostname: string = env.VITE_HOSTNAME || 'http://localhost:4173'
export default defineConfig({
outDir: "../dist",
lastUpdated: true,
cleanUrls: true,
title,
description,
sitemap: {
hostname,
},
head: headConfig,
markdown: markdownConfig,
themeConfig,
transformHead: async (context) => generateMeta(context, hostname),
buildEnd: async (context) => {
generateFeed(context, hostname)
generateOgImages(context)
},
vite: {
resolve: {
alias: [
{
// Used to show the release version on navbar.
find: /^.*\/VPNavBarMenu\.vue$/,
replacement: fileURLToPath(
new URL("./theme/components/CustomNavBarMenu.vue", import.meta.url),
),
},
{
find: /^.*VPNavScreenMenu\.vue$/,
replacement: fileURLToPath(
new URL("./theme/components/CustomNavScreenMenu.vue", import.meta.url),
),
},
{
find: /^.*VPSwitchAppearance\.vue$/,
replacement: fileURLToPath(
new URL("./theme/components/CustomSwitchAppearance.vue", import.meta.url),
),
},
],
},
plugins: [ElementPlus({})],
ssr: {
noExternal: ["element-plus"],
},
},
outDir: '../dist',
lastUpdated: true,
cleanUrls: true,
title,
description,
sitemap: {
hostname,
},
head: headConfig,
markdown: markdownConfig,
themeConfig,
transformHead: async context => generateMeta(context, hostname),
buildEnd: async (context) => {
generateFeed(context, hostname)
generateOgImages(context)
},
vite: {
resolve: {
alias: [
{
// Used to show the release version on navbar.
find: /^.*\/VPNavBarMenu\.vue$/,
replacement: fileURLToPath(
new URL('./theme/components/CustomNavBarMenu.vue', import.meta.url),
),
},
{
find: /^.*VPNavScreenMenu\.vue$/,
replacement: fileURLToPath(
new URL('./theme/components/CustomNavScreenMenu.vue', import.meta.url),
),
},
{
find: /^.*VPSwitchAppearance\.vue$/,
replacement: fileURLToPath(
new URL('./theme/components/CustomSwitchAppearance.vue', import.meta.url),
),
},
],
},
plugins: [ElementPlus({})],
ssr: {
noExternal: ['element-plus'],
},
},
})

10
website/src/.vitepress/config/constants.ts
View File

@ -1,6 +1,6 @@
export const GITHUB_EXTENSION_JSON
= "https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/index.json"
export const GITHUB_STABLE_API = "https://api.github.com/repos/tachiyomiorg/tachiyomi/releases/latest"
export const GITHUB_STABLE_RELEASE = "https://github.com/tachiyomiorg/tachiyomi/releases/latest"
export const GITHUB_PREVIEW_API = "https://api.github.com/repos/tachiyomiorg/android-app-preview/releases/latest"
export const GITHUB_PREVIEW_RELEASE = "https://github.com/tachiyomiorg/android-app-preview/releases/latest"
= 'https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/index.json'
export const GITHUB_STABLE_API = 'https://api.github.com/repos/tachiyomiorg/tachiyomi/releases/latest'
export const GITHUB_STABLE_RELEASE = 'https://github.com/tachiyomiorg/tachiyomi/releases/latest'
export const GITHUB_PREVIEW_API = 'https://api.github.com/repos/tachiyomiorg/android-app-preview/releases/latest'
export const GITHUB_PREVIEW_RELEASE = 'https://github.com/tachiyomiorg/android-app-preview/releases/latest'

98
website/src/.vitepress/config/headConfig.ts
View File

@ -1,59 +1,59 @@
import type { HeadConfig } from "vitepress"
import type { HeadConfig } from 'vitepress'
const headConfig: HeadConfig[] = [
["meta", { name: "darkreader-lock" }],
['meta', { name: 'darkreader-lock' }],
["meta", { name: "theme-color", content: "#818CF8" }],
["meta", { name: "msapplication-TileColor", content: "#818CF8" }],
['meta', { name: 'theme-color', content: '#818CF8' }],
['meta', { name: 'msapplication-TileColor', content: '#818CF8' }],
["meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }],
["meta", { name: "referrer", content: "no-referrer-when-downgrade" }],
['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }],
['meta', { name: 'referrer', content: 'no-referrer-when-downgrade' }],
["link", { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
[
"link",
{
rel: "icon",
type: "image/png",
sizes: "32x32",
href: "/favicon-32x32.png",
},
],
[
"link",
{
rel: "icon",
type: "image/png",
sizes: "16x16",
href: "/favicon-16x16.png",
},
],
["link", { rel: "manifest", href: "/site.webmanifest" }],
["link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#818CF8" }],
[
"link",
{
rel: "apple-touch-icon",
type: "image/x-icon",
sizes: "180x180",
href: "/favicon.ico",
},
],
['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
[
'link',
{
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: '/favicon-32x32.png',
},
],
[
'link',
{
rel: 'icon',
type: 'image/png',
sizes: '16x16',
href: '/favicon-16x16.png',
},
],
['link', { rel: 'manifest', href: '/site.webmanifest' }],
['link', { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#818CF8' }],
[
'link',
{
rel: 'apple-touch-icon',
type: 'image/x-icon',
sizes: '180x180',
href: '/favicon.ico',
},
],
["meta", { name: "twitter:card", content: "summary" }],
["meta", { name: "twitter:site", content: "@tachiyomiorg" }],
["meta", { name: "twitter:creator", content: "@tachiyomiorg" }],
['meta', { name: 'twitter:card', content: 'summary' }],
['meta', { name: 'twitter:site', content: '@tachiyomiorg' }],
['meta', { name: 'twitter:creator', content: '@tachiyomiorg' }],
["meta", { property: "og:site_name", content: "Tachiyomi" }],
[
"meta",
{
property: "og:description",
content: "Discover and read manga, webtoons, comics, and more – easier than ever on your Android device.",
},
],
["meta", { property: "og:locale", content: "en_US" }],
["meta", { property: "og:type", content: "website" }],
['meta', { property: 'og:site_name', content: 'Tachiyomi' }],
[
'meta',
{
property: 'og:description',
content: 'Discover and read manga, webtoons, comics, and more – easier than ever on your Android device.',
},
],
['meta', { property: 'og:locale', content: 'en_US' }],
['meta', { property: 'og:type', content: 'website' }],
]
export default headConfig

94
website/src/.vitepress/config/hooks/generateFeed.ts
View File

@ -1,61 +1,61 @@
import path from "node:path"
import { writeFileSync } from "node:fs"
import { Feed, type Item } from "feed"
import { type SiteConfig, createContentLoader } from "vitepress"
import path from 'node:path'
import { writeFileSync } from 'node:fs'
import { Feed, type Item } from 'feed'
import { type SiteConfig, createContentLoader } from 'vitepress'
async function generateFeed(config: SiteConfig, hostname: string) {
const feed = new Feed({
title: config.site.title,
description: config.site.description,
id: hostname,
link: hostname,
language: "en",
image: `${hostname}/img/logo.png`,
favicon: `${hostname}/favicon.ico`,
copyright: `Copyright © 2015 - ${new Date().getFullYear()} Javier Tomás`,
})
const json: Item[] = []
const feed = new Feed({
title: config.site.title,
description: config.site.description,
id: hostname,
link: hostname,
language: 'en',
image: `${hostname}/img/logo.png`,
favicon: `${hostname}/favicon.ico`,
copyright: `Copyright © 2015 - ${new Date().getFullYear()} Javier Tomás`,
})
const json: Item[] = []
const posts = await createContentLoader("news/*.md", {
excerpt: true,
render: true,
includeSrc: true,
}).load()
const posts = await createContentLoader('news/*.md', {
excerpt: true,
render: true,
includeSrc: true,
}).load()
// Filter everything that"s not of type `article` (e.g. index.md)
const filteredPosts = posts.filter((post) => post.frontmatter.type === "article")
// Filter everything that"s not of type `article` (e.g. index.md)
const filteredPosts = posts.filter(post => post.frontmatter.type === 'article')
filteredPosts.sort((a, b) => +new Date(b.frontmatter.date as string) - +new Date(a.frontmatter.date as string))
filteredPosts.sort((a, b) => +new Date(b.frontmatter.date as string) - +new Date(a.frontmatter.date as string))
for (const { url, frontmatter, html, src } of filteredPosts) {
const fullUrl = `${hostname}${url}`
for (const { url, frontmatter, html, src } of filteredPosts) {
const fullUrl = `${hostname}${url}`
// Strip `​` from `html` string
const content = (html ?? "")
.replace(/​/g, "")
.replace(/<a href="(\/.*?)">/g, `<a href="${hostname}$1">`)
// Strip `&ZeroWidthSpace;` from `html` string
const content = (html ?? '')
.replace(/&ZeroWidthSpace;/g, '')
.replace(/<a href="(\/.*?)">/g, `<a href="${hostname}$1">`)
const markdown = (src ?? "")
.replace(/^---.*---/s, "")
.replace(/]\((\/.*?)\)/g, `](${hostname}$1)`)
.replace(/^# .*$/m, "")
.trim()
const markdown = (src ?? '')
.replace(/^---.*---/s, '')
.replace(/]\((\/.*?)\)/g, `](${hostname}$1)`)
.replace(/^# .*$/m, '')
.trim()
const post = {
title: frontmatter.title,
id: fullUrl,
link: fullUrl,
description: frontmatter.description,
content,
date: frontmatter.date,
} satisfies Item
const post = {
title: frontmatter.title,
id: fullUrl,
link: fullUrl,
description: frontmatter.description,
content,
date: frontmatter.date,
} satisfies Item
feed.addItem(post)
json.push({ ...post, content: markdown })
}
feed.addItem(post)
json.push({ ...post, content: markdown })
}
writeFileSync(path.join(config.outDir, "feed.rss"), feed.rss2())
writeFileSync(path.join(config.outDir, "news.json"), JSON.stringify(json))
writeFileSync(path.join(config.outDir, 'feed.rss'), feed.rss2())
writeFileSync(path.join(config.outDir, 'news.json'), JSON.stringify(json))
}
export default generateFeed

242
website/src/.vitepress/config/hooks/generateMeta.ts
View File

@ -1,131 +1,133 @@
import type { HeadConfig, TransformContext } from "vitepress"
import type { HeadConfig, TransformContext } from 'vitepress'
function generateMeta(context: TransformContext, hostname: string) {
const head: HeadConfig[] = []
const { pageData } = context
const head: HeadConfig[] = []
const { pageData } = context
const url = `${hostname}/${pageData.relativePath.replace(/((^|\/)index)?\.md$/, "$2")}`
const url = `${hostname}/${pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2')}`
head.push(["link", { rel: "canonical", href: url }])
head.push(["meta", { property: "og:url", content: url }])
head.push(["meta", { name: "twitter:url", content: url }])
head.push(["meta", { name: "twitter:card", content: "summary_large_image" }])
head.push(['link', { rel: 'canonical', href: url }])
head.push(['meta', { property: 'og:url', content: url }])
head.push(['meta', { name: 'twitter:url', content: url }])
head.push(['meta', { name: 'twitter:card', content: 'summary_large_image' }])
if (pageData.frontmatter.theme) {
head.push(["meta", { name: "theme-color", content: pageData.frontmatter.theme }])
}
if (pageData.frontmatter.type) {
head.push(["meta", { property: "og:type", content: pageData.frontmatter.type }])
}
if (pageData.frontmatter.customMetaTitle) {
head.push([
"meta",
{
property: "og:title",
content: pageData.frontmatter.customMetaTitle,
},
])
head.push([
"meta",
{
name: "twitter:title",
content: pageData.frontmatter.customMetaTitle,
},
])
head.push(["meta", { property: "og:site_name", content: "" }])
} else {
head.push(["meta", { property: "og:title", content: pageData.frontmatter.title }])
head.push(["meta", { name: "twitter:title", content: pageData.frontmatter.title }])
}
if (pageData.frontmatter.description) {
head.push([
"meta",
{
property: "og:description",
content: pageData.frontmatter.description,
},
])
head.push([
"meta",
{
name: "twitter:description",
content: pageData.frontmatter.description,
},
])
}
if (pageData.frontmatter.image) {
head.push([
"meta",
{
property: "og:image",
content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}`,
},
])
head.push([
"meta",
{
name: "twitter:image",
content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}`,
},
])
} else {
const url = pageData.filePath.replace("index.md", "").replace(".md", "")
const imageUrl = `${url}/__og_image__/og.png`.replace(/\/\//g, "/").replace(/^\//, "")
if (pageData.frontmatter.theme)
head.push(['meta', { name: 'theme-color', content: pageData.frontmatter.theme }])
head.push(["meta", { property: "og:image", content: `${hostname}/${imageUrl}` }])
head.push(["meta", { property: "og:image:width", content: "1200" }])
head.push(["meta", { property: "og:image:height", content: "628" }])
head.push(["meta", { property: "og:image:type", content: "image/png" }])
head.push(["meta", { property: "og:image:alt", content: pageData.frontmatter.title }])
head.push(["meta", { name: "twitter:image", content: `${hostname}/${imageUrl}` }])
head.push(["meta", { name: "twitter:image:width", content: "1200" }])
head.push(["meta", { name: "twitter:image:height", content: "628" }])
head.push(["meta", { name: "twitter:image:alt", content: pageData.frontmatter.title }])
}
if (pageData.frontmatter.tag) {
head.push(["meta", { property: "article:tag", content: pageData.frontmatter.tag }])
}
if (pageData.frontmatter.date) {
head.push([
"meta",
{
property: "article:published_time",
content: pageData.frontmatter.date,
},
])
}
if (pageData.lastUpdated && pageData.frontmatter.lastUpdated !== false) {
head.push([
"meta",
{
property: "article:modified_time",
content: new Date(pageData.lastUpdated).toISOString(),
},
])
}
if (pageData.frontmatter.type)
head.push(['meta', { property: 'og:type', content: pageData.frontmatter.type }])
if (pageData.filePath === "news/index.md") {
head.push([
"link",
{
rel: "alternate",
type: "application/rss+xml",
title: "RSS feed for the news archive",
href: `${hostname}/feed.rss`,
},
])
head.push([
"link",
{
rel: "alternate",
type: "application/json",
title: "JSON of the news archive",
href: `${hostname}/news.json`,
},
])
}
if (pageData.frontmatter.customMetaTitle) {
head.push([
'meta',
{
property: 'og:title',
content: pageData.frontmatter.customMetaTitle,
},
])
head.push([
'meta',
{
name: 'twitter:title',
content: pageData.frontmatter.customMetaTitle,
},
])
head.push(['meta', { property: 'og:site_name', content: '' }])
}
else {
head.push(['meta', { property: 'og:title', content: pageData.frontmatter.title }])
head.push(['meta', { name: 'twitter:title', content: pageData.frontmatter.title }])
}
if (pageData.frontmatter.description) {
head.push([
'meta',
{
property: 'og:description',
content: pageData.frontmatter.description,
},
])
head.push([
'meta',
{
name: 'twitter:description',
content: pageData.frontmatter.description,
},
])
}
if (pageData.frontmatter.image) {
head.push([
'meta',
{
property: 'og:image',
content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, '')}`,
},
])
head.push([
'meta',
{
name: 'twitter:image',
content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, '')}`,
},
])
}
else {
const url = pageData.filePath.replace('index.md', '').replace('.md', '')
const imageUrl = `${url}/__og_image__/og.png`.replace(/\/\//g, '/').replace(/^\//, '')
return head
head.push(['meta', { property: 'og:image', content: `${hostname}/${imageUrl}` }])
head.push(['meta', { property: 'og:image:width', content: '1200' }])
head.push(['meta', { property: 'og:image:height', content: '628' }])
head.push(['meta', { property: 'og:image:type', content: 'image/png' }])
head.push(['meta', { property: 'og:image:alt', content: pageData.frontmatter.title }])
head.push(['meta', { name: 'twitter:image', content: `${hostname}/${imageUrl}` }])
head.push(['meta', { name: 'twitter:image:width', content: '1200' }])
head.push(['meta', { name: 'twitter:image:height', content: '628' }])
head.push(['meta', { name: 'twitter:image:alt', content: pageData.frontmatter.title }])
}
if (pageData.frontmatter.tag)
head.push(['meta', { property: 'article:tag', content: pageData.frontmatter.tag }])
if (pageData.frontmatter.date) {
head.push([
'meta',
{
property: 'article:published_time',
content: pageData.frontmatter.date,
},
])
}
if (pageData.lastUpdated && pageData.frontmatter.lastUpdated !== false) {
head.push([
'meta',
{
property: 'article:modified_time',
content: new Date(pageData.lastUpdated).toISOString(),
},
])
}
if (pageData.filePath === 'news/index.md') {
head.push([
'link',
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'RSS feed for the news archive',
href: `${hostname}/feed.rss`,
},
])
head.push([
'link',
{
rel: 'alternate',
type: 'application/json',
title: 'JSON of the news archive',
href: `${hostname}/news.json`,
},
])
}
return head
}
export default generateMeta

169
website/src/.vitepress/config/hooks/generateOgImages.ts
View File

@ -1,111 +1,110 @@
import { mkdir, readFile, writeFile } from "node:fs/promises"
import { dirname, resolve } from "node:path"
import { fileURLToPath } from "node:url"
import { createContentLoader } from "vitepress"
import type { ContentData, SiteConfig } from "vitepress"
import { type SatoriOptions, satoriVue } from "x-satori/vue"
import { renderAsync } from "@resvg/resvg-js"
import { mkdir, readFile, writeFile } from 'node:fs/promises'
import { dirname, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { createContentLoader } from 'vitepress'
import type { ContentData, SiteConfig } from 'vitepress'
import { type SatoriOptions, satoriVue } from 'x-satori/vue'
import { renderAsync } from '@resvg/resvg-js'
const __dirname = dirname(fileURLToPath(import.meta.url))
const __fonts = resolve(__dirname, "../../fonts")
const __fonts = resolve(__dirname, '../../fonts')
async function generateOgImages(config: SiteConfig) {
const pages = await createContentLoader("**/*.md", { excerpt: true }).load()
const template = await readFile(resolve(__dirname, "../../theme/components/OgImageTemplate.vue"), "utf-8")
const pages = await createContentLoader('**/*.md', { excerpt: true }).load()
const template = await readFile(resolve(__dirname, '../../theme/components/OgImageTemplate.vue'), 'utf-8')
const fonts: SatoriOptions["fonts"] = [
{
name: "Inter",
data: await readFile(resolve(__fonts, "Inter-Regular.otf")),
weight: 400,
style: "normal",
},
{
name: "Inter",
data: await readFile(resolve(__fonts, "Inter-Medium.otf")),
weight: 500,
style: "normal",
},
{
name: "Inter",
data: await readFile(resolve(__fonts, "Inter-SemiBold.otf")),
weight: 600,
style: "normal",
},
{
name: "Inter",
data: await readFile(resolve(__fonts, "Inter-Bold.otf")),
weight: 700,
style: "normal",
},
]
const fonts: SatoriOptions['fonts'] = [
{
name: 'Inter',
data: await readFile(resolve(__fonts, 'Inter-Regular.otf')),
weight: 400,
style: 'normal',
},
{
name: 'Inter',
data: await readFile(resolve(__fonts, 'Inter-Medium.otf')),
weight: 500,
style: 'normal',
},
{
name: 'Inter',
data: await readFile(resolve(__fonts, 'Inter-SemiBold.otf')),
weight: 600,
style: 'normal',
},
{
name: 'Inter',
data: await readFile(resolve(__fonts, 'Inter-Bold.otf')),
weight: 700,
style: 'normal',
},
]
const filteredPages = pages.filter((p) => p.frontmatter.image === undefined)
const filteredPages = pages.filter(p => p.frontmatter.image === undefined)
for (const page of filteredPages) {
await generateImage({
page,
template,
outDir: config.outDir,
fonts,
})
}
for (const page of filteredPages) {
await generateImage({
page,
template,
outDir: config.outDir,
fonts,
})
}
}
export default generateOgImages
interface GenerateImagesOptions {
page: ContentData
template: string
outDir: string
fonts: SatoriOptions["fonts"]
page: ContentData
template: string
outDir: string
fonts: SatoriOptions['fonts']
}
function getDir(url: string) {
if (url.startsWith("/docs/faq/")) {
return "FAQ"
} else if (url.startsWith("/docs/guides/")) {
return "Guide"
} else if (url.startsWith("/news/") && url !== "/news/") {
return "News"
}
if (url.startsWith('/docs/faq/'))
return 'FAQ'
else if (url.startsWith('/docs/guides/'))
return 'Guide'
else if (url.startsWith('/news/') && url !== '/news/')
return 'News'
return undefined
return undefined
}
async function generateImage({ page, template, outDir, fonts }: GenerateImagesOptions) {
const { frontmatter, url } = page
const { frontmatter, url } = page
const options: SatoriOptions = {
width: 1200,
height: 628,
fonts,
props: {
title:
frontmatter.layout === "home"
? frontmatter.hero.name ?? frontmatter.title
: frontmatter.customMetaTitle ?? frontmatter.title,
description:
frontmatter.layout === "home"
? frontmatter.hero.tagline ?? frontmatter.description
: frontmatter.description,
dir: getDir(url),
},
}
const options: SatoriOptions = {
width: 1200,
height: 628,
fonts,
props: {
title:
frontmatter.layout === 'home'
? frontmatter.hero.name ?? frontmatter.title
: frontmatter.customMetaTitle ?? frontmatter.title,
description:
frontmatter.layout === 'home'
? frontmatter.hero.tagline ?? frontmatter.description
: frontmatter.description,
dir: getDir(url),
},
}
const svg = await satoriVue(options, template)
const svg = await satoriVue(options, template)
const render = await renderAsync(svg, {
fitTo: {
mode: "width",
value: 1200,
},
})
const render = await renderAsync(svg, {
fitTo: {
mode: 'width',
value: 1200,
},
})
const outputFolder = resolve(outDir, url.substring(1), "__og_image__")
const outputFile = resolve(outputFolder, "og.png")
const outputFolder = resolve(outDir, url.substring(1), '__og_image__')
const outputFile = resolve(outputFolder, 'og.png')
await mkdir(outputFolder, { recursive: true })
await mkdir(outputFolder, { recursive: true })
return await writeFile(outputFile, render.asPng())
return await writeFile(outputFile, render.asPng())
}

46
website/src/.vitepress/config/markdownConfig.ts
View File

@ -1,29 +1,29 @@
import type { MarkdownOptions } from "vitepress"
import type { MarkdownOptions } from 'vitepress'
import { attrs } from "@mdit/plugin-attrs"
import { figure } from "@mdit/plugin-figure"
import { imgLazyload } from "@mdit/plugin-img-lazyload"
import { imgMark } from "@mdit/plugin-img-mark"
import { imgSize } from "@mdit/plugin-img-size"
import { include } from "@mdit/plugin-include"
import { tabsMarkdownPlugin } from "vitepress-plugin-tabs"
import shortcode_plugin from "markdown-it-shortcode-tag"
import shortcodes from "./shortcodes"
import { attrs } from '@mdit/plugin-attrs'
import { figure } from '@mdit/plugin-figure'
import { imgLazyload } from '@mdit/plugin-img-lazyload'
import { imgMark } from '@mdit/plugin-img-mark'
import { imgSize } from '@mdit/plugin-img-size'
import { include } from '@mdit/plugin-include'
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
import shortcode_plugin from 'markdown-it-shortcode-tag'
import shortcodes from './shortcodes'
const markdownConfig: MarkdownOptions = {
config: (md) => {
md
.use(attrs)
.use(figure)
.use(imgLazyload)
.use(imgMark)
.use(imgSize)
.use(include, {
currentPath: (env) => env.filePath,
})
.use(tabsMarkdownPlugin)
.use(shortcode_plugin, shortcodes)
},
config: (md) => {
md
.use(attrs)
.use(figure)
.use(imgLazyload)
.use(imgMark)
.use(imgSize)
.use(include, {
currentPath: env => env.filePath,
})
.use(tabsMarkdownPlugin)
.use(shortcode_plugin, shortcodes)
},
}
export default markdownConfig

50
website/src/.vitepress/config/navigation/navbar.ts
View File

@ -1,30 +1,30 @@
import type { DefaultTheme } from "vitepress"
import type { DefaultTheme } from 'vitepress'
const nav: DefaultTheme.NavItem[] = [
{
text: "Get v{app_version}",
activeMatch: "^/*?(download|changelogs)/*?$",
items: [
{
text: "Download",
link: "/download/",
},
{
text: "Changelogs",
link: "/changelogs/",
},
],
},
{
text: "Docs",
link: "/docs/guides/getting-started",
activeMatch: "/docs/",
},
{
text: "News",
link: "/news/",
activeMatch: "/news/",
},
{
text: 'Get v{app_version}',
activeMatch: '^/*?(download|changelogs)/*?$',
items: [
{
text: 'Download',
link: '/download/',
},
{
text: 'Changelogs',
link: '/changelogs/',
},
],
},
{
text: 'Docs',
link: '/docs/guides/getting-started',
activeMatch: '/docs/',
},
{
text: 'News',
link: '/news/',
activeMatch: '/news/',
},
]
export default nav

244
website/src/.vitepress/config/navigation/sidebar.ts
View File

@ -1,130 +1,130 @@
import type { DefaultTheme } from "vitepress"
import type { DefaultTheme } from 'vitepress'
const sidebar: DefaultTheme.SidebarMulti = {
"/download/": defaultSidebar(),
"/extensions/": defaultSidebar(),
"/docs/": defaultSidebar(),
"/forks/": defaultSidebar(),
"/changelogs/": defaultSidebar(),
"/news/": defaultSidebar(),
"/sandbox/": defaultSidebar(),
'/download/': defaultSidebar(),
'/extensions/': defaultSidebar(),
'/docs/': defaultSidebar(),
'/forks/': defaultSidebar(),
'/changelogs/': defaultSidebar(),
'/news/': defaultSidebar(),
'/sandbox/': defaultSidebar(),
}
function defaultSidebar(): DefaultTheme.SidebarItem[] {
return [
{
items: [
{
text: "Download",
link: "/download/",
},
{
text: "Extensions",
link: "/extensions/",
},
{
text: "Changelogs",
link: "/changelogs/",
},
{
text: "Forks",
link: "/forks/",
},
{
text: "Contribute",
link: "/docs/contribute",
},
],
},
{
text: "Frequently Asked Questions",
items: [
{ text: "General", link: "/docs/faq/general" },
{
text: "Library",
link: "/docs/faq/library",
},
{
text: "Browse",
link: "/docs/faq/browse/",
collapsed: true,
items: [
{ text: "Extensions", link: "/docs/faq/browse/extensions" },
{
text: "Local source",
link: "/docs/faq/browse/local-source",
},
],
},
{
text: "Downloads",
link: "/docs/faq/downloads",
},
{
text: "Reader",
link: "/docs/faq/reader",
},
{
text: "Settings",
link: "/docs/faq/settings",
},
{
text: "Android 11+",
link: "/docs/faq/android-11+",
},
],
},
{
text: "Guides",
items: [
{
text: "Getting started",
link: "/docs/guides/getting-started",
},
{
text: "Troubleshooting",
link: "/docs/guides/troubleshooting/",
collapsed: true,
items: [
{
text: "Common issues",
link: "/docs/guides/troubleshooting/common-issues",
},
{
text: "Diagnosis",
link: "/docs/guides/troubleshooting/diagnosis",
},
],
},
{
text: "Source migration",
link: "/docs/guides/source-migration",
},
{ text: "Backups", link: "/docs/guides/backups" },
{ text: "Tracking", link: "/docs/guides/tracking" },
{ text: "Categories", link: "/docs/guides/categories" },
{
text: "Local source",
link: "/docs/guides/local-source/",
collapsed: true,
items: [
{
text: "Advanced editing",
link: "/docs/guides/local-source/advanced",
},
],
},
{
text: "Reader settings",
link: "/docs/guides/reader-settings",
},
{
text: "Shizuku",
link: "/docs/guides/shizuku",
},
],
},
]
return [
{
items: [
{
text: 'Download',
link: '/download/',
},
{
text: 'Extensions',
link: '/extensions/',
},
{
text: 'Changelogs',
link: '/changelogs/',
},
{
text: 'Forks',
link: '/forks/',
},
{
text: 'Contribute',
link: '/docs/contribute',
},
],
},
{
text: 'Frequently Asked Questions',
items: [
{ text: 'General', link: '/docs/faq/general' },
{
text: 'Library',
link: '/docs/faq/library',
},
{
text: 'Browse',
link: '/docs/faq/browse/',
collapsed: true,
items: [
{ text: 'Extensions', link: '/docs/faq/browse/extensions' },
{
text: 'Local source',
link: '/docs/faq/browse/local-source',
},
],
},
{
text: 'Downloads',
link: '/docs/faq/downloads',
},
{
text: 'Reader',
link: '/docs/faq/reader',
},
{
text: 'Settings',
link: '/docs/faq/settings',
},
{
text: 'Android 11+',
link: '/docs/faq/android-11+',
},
],
},
{
text: 'Guides',
items: [
{
text: 'Getting started',
link: '/docs/guides/getting-started',
},
{
text: 'Troubleshooting',
link: '/docs/guides/troubleshooting/',
collapsed: true,
items: [
{
text: 'Common issues',
link: '/docs/guides/troubleshooting/common-issues',
},
{
text: 'Diagnosis',
link: '/docs/guides/troubleshooting/diagnosis',
},
],
},
{
text: 'Source migration',
link: '/docs/guides/source-migration',
},
{ text: 'Backups', link: '/docs/guides/backups' },
{ text: 'Tracking', link: '/docs/guides/tracking' },
{ text: 'Categories', link: '/docs/guides/categories' },
{
text: 'Local source',
link: '/docs/guides/local-source/',
collapsed: true,
items: [
{
text: 'Advanced editing',
link: '/docs/guides/local-source/advanced',
},
],
},
{
text: 'Reader settings',
link: '/docs/guides/reader-settings',
},
{
text: 'Shizuku',
link: '/docs/guides/shizuku',
},
],
},
]
}
export default sidebar

23
website/src/.vitepress/config/scripts/languages.ts
View File

@ -1,21 +1,20 @@
export function simpleLangName(code: string) {
if (code === "all") {
return "All"
}
const namesInEnglish = new Intl.DisplayNames(["en"], { type: "language" })
return capitalize(namesInEnglish.of(code)!, "en")
if (code === 'all')
return 'All'
const namesInEnglish = new Intl.DisplayNames(['en'], { type: 'language' })
return capitalize(namesInEnglish.of(code)!, 'en')
}
export function langName(code: string) {
if (code === "all") {
return "All"
}
if (code === 'all')
return 'All'
const namesInEnglish = new Intl.DisplayNames(["en"], { type: "language" })
const namesInNative = new Intl.DisplayNames([code], { type: "language" })
return `${capitalize(namesInEnglish.of(code)!, "en")} - ${capitalize(namesInNative.of(code)!, code)}`
const namesInEnglish = new Intl.DisplayNames(['en'], { type: 'language' })
const namesInNative = new Intl.DisplayNames([code], { type: 'language' })
return `${capitalize(namesInEnglish.of(code)!, 'en')} - ${capitalize(namesInNative.of(code)!, code)}`
}
function capitalize(string: string, locale: string) {
return string.charAt(0).toLocaleUpperCase(locale) + string.substring(1)
return string.charAt(0).toLocaleUpperCase(locale) + string.substring(1)
}

132
website/src/.vitepress/config/shortcodes.ts
View File

@ -1,91 +1,89 @@
const iconMappings = {
alertDecagramOutline: '<svg originalIcon="alertDecagramOutline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23,12L20.56,14.78L20.9,18.46L17.29,19.28L15.4,22.46L12,21L8.6,22.47L6.71,19.29L3.1,18.47L3.44,14.78L1,12L3.44,9.21L3.1,5.53L6.71,4.72L8.6,1.54L12,3L15.4,1.54L17.29,4.72L20.9,5.54L20.56,9.22L23,12M20.33,12L18.5,9.89L18.74,7.1L16,6.5L14.58,4.07L12,5.18L9.42,4.07L8,6.5L5.26,7.09L5.5,9.88L3.67,12L5.5,14.1L5.26,16.9L8,17.5L9.42,19.93L12,18.81L14.58,19.92L16,17.5L18.74,16.89L18.5,14.1L20.33,12M11,15H13V17H11V15M11,7H13V13H11V7" /></svg>',
backupRestore: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,3A9,9 0 0,0 3,12H0L4,16L8,12H5A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19C10.5,19 9.09,18.5 7.94,17.7L6.5,19.14C8.04,20.3 9.94,21 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12Z" /></svg>',
bookmarkBoxOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 20H18V22H4C2.9 22 2 21.1 2 20V6H4V20M22 4V16C22 17.1 21.1 18 20 18H8C6.9 18 6 17.1 6 16V4C6 2.9 6.9 2 8 2H20C21.1 2 22 2.9 22 4M20 4H8V16H20V4M18 6H13V13L15.5 11.5L18 13V6Z" /></svg>',
bookOpenOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,4H3A2,2 0 0,0 1,6V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V6A2,2 0 0,0 21,4M3,19V6H11V19H3M21,19H13V6H21V19M14,9.5H20V11H14V9.5M14,12H20V13.5H14V12M14,14.5H20V16H14V14.5Z" /></svg>',
cloudOffOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z" /></svg>',
codeTags: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" /></svg>',
cog: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>',
compassOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,17L10.2,10.2L17,7L13.8,13.8L7,17M12,11.1A0.9,0.9 0 0,0 11.1,12A0.9,0.9 0 0,0 12,12.9A0.9,0.9 0 0,0 12.9,12A0.9,0.9 0 0,0 12,11.1M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>',
dotsHorizontal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" /></svg>',
downloadOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13,5V11H14.17L12,13.17L9.83,11H11V5H13M15,3H9V9H5L12,16L19,9H15V3M19,18H5V20H19V18Z" /></svg>',
glasses: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,10C2.76,10 2.55,10.09 2.41,10.25C2.27,10.4 2.21,10.62 2.24,10.86L2.74,13.85C2.82,14.5 3.4,15 4,15H7C7.64,15 8.36,14.44 8.5,13.82L9.56,10.63C9.6,10.5 9.57,10.31 9.5,10.19C9.39,10.07 9.22,10 9,10H3M7,17H4C2.38,17 0.96,15.74 0.76,14.14L0.26,11.15C0.15,10.3 0.39,9.5 0.91,8.92C1.43,8.34 2.19,8 3,8H9C9.83,8 10.58,8.35 11.06,8.96C11.17,9.11 11.27,9.27 11.35,9.45C11.78,9.36 12.22,9.36 12.64,9.45C12.72,9.27 12.82,9.11 12.94,8.96C13.41,8.35 14.16,8 15,8H21C21.81,8 22.57,8.34 23.09,8.92C23.6,9.5 23.84,10.3 23.74,11.11L23.23,14.18C23.04,15.74 21.61,17 20,17H17C15.44,17 13.92,15.81 13.54,14.3L12.64,11.59C12.26,11.31 11.73,11.31 11.35,11.59L10.43,14.37C10.07,15.82 8.56,17 7,17M15,10C14.78,10 14.61,10.07 14.5,10.19C14.42,10.31 14.4,10.5 14.45,10.7L15.46,13.75C15.64,14.44 16.36,15 17,15H20C20.59,15 21.18,14.5 21.25,13.89L21.76,10.82C21.79,10.62 21.73,10.4 21.59,10.25C21.45,10.09 21.24,10 21,10H15Z" /></svg>',
helpCircleOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" /></svg>',
history: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" /></svg>',
informationOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>',
labelOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,17H5V7H16L19.55,12M17.63,5.84C17.27,5.33 16.67,5 16,5H5A2,2 0 0,0 3,7V17A2,2 0 0,0 5,19H16C16.67,19 17.27,18.66 17.63,18.15L22,12L17.63,5.84Z" /></svg>',
paletteOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2C17.5,2 22,6 22,11A6,6 0 0,1 16,17H14.2C13.9,17 13.7,17.2 13.7,17.5C13.7,17.6 13.8,17.7 13.8,17.8C14.2,18.3 14.4,18.9 14.4,19.5C14.5,20.9 13.4,22 12,22M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C12.3,20 12.5,19.8 12.5,19.5C12.5,19.3 12.4,19.2 12.4,19.1C12,18.6 11.8,18.1 11.8,17.5C11.8,16.1 12.9,15 14.3,15H16A4,4 0 0,0 20,11C20,7.1 16.4,4 12,4M6.5,10C7.3,10 8,10.7 8,11.5C8,12.3 7.3,13 6.5,13C5.7,13 5,12.3 5,11.5C5,10.7 5.7,10 6.5,10M9.5,6C10.3,6 11,6.7 11,7.5C11,8.3 10.3,9 9.5,9C8.7,9 8,8.3 8,7.5C8,6.7 8.7,6 9.5,6M14.5,6C15.3,6 16,6.7 16,7.5C16,8.3 15.3,9 14.5,9C13.7,9 13,8.3 13,7.5C13,6.7 13.7,6 14.5,6M17.5,10C18.3,10 19,10.7 19,11.5C19,12.3 18.3,13 17.5,13C16.7,13 16,12.3 16,11.5C16,10.7 16.7,10 17.5,10Z" /></svg>',
queryStats: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m105-233-65-47 200-320 120 140 160-260 109 163q-23 1-43.5 5.5T545-539l-22-33-152 247-121-141-145 233ZM863-40 738-165q-20 14-44.5 21t-50.5 7q-75 0-127.5-52.5T463-317q0-75 52.5-127.5T643-497q75 0 127.5 52.5T823-317q0 26-7 50.5T795-221L920-97l-57 57ZM643-217q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29Zm89-320q-19-8-39.5-13t-42.5-6l205-324 65 47-188 296Z"/></svg>',
security: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,12H19C18.47,16.11 15.72,19.78 12,20.92V12H5V6.3L12,3.19M12,1L3,5V11C3,16.55 6.84,21.73 12,23C17.16,21.73 21,16.55 21,11V5L12,1Z" /></svg>',
sync: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" /></svg>',
alertDecagramOutline: '<svg originalIcon="alertDecagramOutline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23,12L20.56,14.78L20.9,18.46L17.29,19.28L15.4,22.46L12,21L8.6,22.47L6.71,19.29L3.1,18.47L3.44,14.78L1,12L3.44,9.21L3.1,5.53L6.71,4.72L8.6,1.54L12,3L15.4,1.54L17.29,4.72L20.9,5.54L20.56,9.22L23,12M20.33,12L18.5,9.89L18.74,7.1L16,6.5L14.58,4.07L12,5.18L9.42,4.07L8,6.5L5.26,7.09L5.5,9.88L3.67,12L5.5,14.1L5.26,16.9L8,17.5L9.42,19.93L12,18.81L14.58,19.92L16,17.5L18.74,16.89L18.5,14.1L20.33,12M11,15H13V17H11V15M11,7H13V13H11V7" /></svg>',
backupRestore: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,3A9,9 0 0,0 3,12H0L4,16L8,12H5A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19C10.5,19 9.09,18.5 7.94,17.7L6.5,19.14C8.04,20.3 9.94,21 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12Z" /></svg>',
bookmarkBoxOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 20H18V22H4C2.9 22 2 21.1 2 20V6H4V20M22 4V16C22 17.1 21.1 18 20 18H8C6.9 18 6 17.1 6 16V4C6 2.9 6.9 2 8 2H20C21.1 2 22 2.9 22 4M20 4H8V16H20V4M18 6H13V13L15.5 11.5L18 13V6Z" /></svg>',
bookOpenOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,4H3A2,2 0 0,0 1,6V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V6A2,2 0 0,0 21,4M3,19V6H11V19H3M21,19H13V6H21V19M14,9.5H20V11H14V9.5M14,12H20V13.5H14V12M14,14.5H20V16H14V14.5Z" /></svg>',
cloudOffOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z" /></svg>',
codeTags: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" /></svg>',
cog: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>',
compassOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,17L10.2,10.2L17,7L13.8,13.8L7,17M12,11.1A0.9,0.9 0 0,0 11.1,12A0.9,0.9 0 0,0 12,12.9A0.9,0.9 0 0,0 12.9,12A0.9,0.9 0 0,0 12,11.1M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>',
dotsHorizontal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" /></svg>',
downloadOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13,5V11H14.17L12,13.17L9.83,11H11V5H13M15,3H9V9H5L12,16L19,9H15V3M19,18H5V20H19V18Z" /></svg>',
glasses: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,10C2.76,10 2.55,10.09 2.41,10.25C2.27,10.4 2.21,10.62 2.24,10.86L2.74,13.85C2.82,14.5 3.4,15 4,15H7C7.64,15 8.36,14.44 8.5,13.82L9.56,10.63C9.6,10.5 9.57,10.31 9.5,10.19C9.39,10.07 9.22,10 9,10H3M7,17H4C2.38,17 0.96,15.74 0.76,14.14L0.26,11.15C0.15,10.3 0.39,9.5 0.91,8.92C1.43,8.34 2.19,8 3,8H9C9.83,8 10.58,8.35 11.06,8.96C11.17,9.11 11.27,9.27 11.35,9.45C11.78,9.36 12.22,9.36 12.64,9.45C12.72,9.27 12.82,9.11 12.94,8.96C13.41,8.35 14.16,8 15,8H21C21.81,8 22.57,8.34 23.09,8.92C23.6,9.5 23.84,10.3 23.74,11.11L23.23,14.18C23.04,15.74 21.61,17 20,17H17C15.44,17 13.92,15.81 13.54,14.3L12.64,11.59C12.26,11.31 11.73,11.31 11.35,11.59L10.43,14.37C10.07,15.82 8.56,17 7,17M15,10C14.78,10 14.61,10.07 14.5,10.19C14.42,10.31 14.4,10.5 14.45,10.7L15.46,13.75C15.64,14.44 16.36,15 17,15H20C20.59,15 21.18,14.5 21.25,13.89L21.76,10.82C21.79,10.62 21.73,10.4 21.59,10.25C21.45,10.09 21.24,10 21,10H15Z" /></svg>',
helpCircleOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" /></svg>',
history: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" /></svg>',
informationOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>',
labelOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,17H5V7H16L19.55,12M17.63,5.84C17.27,5.33 16.67,5 16,5H5A2,2 0 0,0 3,7V17A2,2 0 0,0 5,19H16C16.67,19 17.27,18.66 17.63,18.15L22,12L17.63,5.84Z" /></svg>',
paletteOutline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2C17.5,2 22,6 22,11A6,6 0 0,1 16,17H14.2C13.9,17 13.7,17.2 13.7,17.5C13.7,17.6 13.8,17.7 13.8,17.8C14.2,18.3 14.4,18.9 14.4,19.5C14.5,20.9 13.4,22 12,22M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C12.3,20 12.5,19.8 12.5,19.5C12.5,19.3 12.4,19.2 12.4,19.1C12,18.6 11.8,18.1 11.8,17.5C11.8,16.1 12.9,15 14.3,15H16A4,4 0 0,0 20,11C20,7.1 16.4,4 12,4M6.5,10C7.3,10 8,10.7 8,11.5C8,12.3 7.3,13 6.5,13C5.7,13 5,12.3 5,11.5C5,10.7 5.7,10 6.5,10M9.5,6C10.3,6 11,6.7 11,7.5C11,8.3 10.3,9 9.5,9C8.7,9 8,8.3 8,7.5C8,6.7 8.7,6 9.5,6M14.5,6C15.3,6 16,6.7 16,7.5C16,8.3 15.3,9 14.5,9C13.7,9 13,8.3 13,7.5C13,6.7 13.7,6 14.5,6M17.5,10C18.3,10 19,10.7 19,11.5C19,12.3 18.3,13 17.5,13C16.7,13 16,12.3 16,11.5C16,10.7 16.7,10 17.5,10Z" /></svg>',
queryStats: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m105-233-65-47 200-320 120 140 160-260 109 163q-23 1-43.5 5.5T545-539l-22-33-152 247-121-141-145 233ZM863-40 738-165q-20 14-44.5 21t-50.5 7q-75 0-127.5-52.5T463-317q0-75 52.5-127.5T643-497q75 0 127.5 52.5T823-317q0 26-7 50.5T795-221L920-97l-57 57ZM643-217q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29Zm89-320q-19-8-39.5-13t-42.5-6l205-324 65 47-188 296Z"/></svg>',
security: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,12H19C18.47,16.11 15.72,19.78 12,20.92V12H5V6.3L12,3.19M12,1L3,5V11C3,16.55 6.84,21.73 12,23C17.16,21.73 21,16.55 21,11V5L12,1Z" /></svg>',
sync: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" /></svg>',
}
interface Navigation {
name: string
icon?: string
dependsOn?: string
name: string
icon?: string
dependsOn?: string
}
const navigationMappings: Record<string, Navigation> = {
// Main menus
"main_library": { name: "Library", icon: iconMappings.bookmarkBoxOutline },
"main_updates": { name: "Updates", icon: iconMappings.alertDecagramOutline },
"main_history": { name: "History", icon: iconMappings.history },
"main_browse": { name: "Browse", icon: iconMappings.compassOutline },
"main_more": { name: "More", icon: iconMappings.dotsHorizontal },
// Main menus
'main_library': { name: 'Library', icon: iconMappings.bookmarkBoxOutline },
'main_updates': { name: 'Updates', icon: iconMappings.alertDecagramOutline },
'main_history': { name: 'History', icon: iconMappings.history },
'main_browse': { name: 'Browse', icon: iconMappings.compassOutline },
'main_more': { name: 'More', icon: iconMappings.dotsHorizontal },
// Browse menu
"sources": { name: "Sources", dependsOn: "main_browse" },
"extensions": { name: "Extensions", dependsOn: "main_browse" },
"migrate": { name: "Migrate", dependsOn: "main_browse" },
// Browse menu
'sources': { name: 'Sources', dependsOn: 'main_browse' },
'extensions': { name: 'Extensions', dependsOn: 'main_browse' },
'migrate': { name: 'Migrate', dependsOn: 'main_browse' },
// More menu
"downloaded-only": { name: "Downloaded only", icon: iconMappings.cloudOffOutline, dependsOn: "main_more" },
"incognito-mode": { name: "Incognito mode", icon: iconMappings.glasses, dependsOn: "main_more" },
"download-queue": { name: "Download queue", icon: iconMappings.downloadOutline, dependsOn: "main_more" },
"categories": { name: "Categories", icon: iconMappings.labelOutline, dependsOn: "main_more" },
"statistics": { name: "Statistics", icon: iconMappings.queryStats, dependsOn: "main_more" },
"backup-and-restore": { name: "Backup and restore", icon: iconMappings.backupRestore, dependsOn: "main_more" },
"settings": { name: "Settings", icon: iconMappings.cog, dependsOn: "main_more" },
"about": { name: "About", icon: iconMappings.informationOutline, dependsOn: "main_more" },
"help": { name: "Help", icon: iconMappings.helpCircleOutline, dependsOn: "main_more" },
// More menu
'downloaded-only': { name: 'Downloaded only', icon: iconMappings.cloudOffOutline, dependsOn: 'main_more' },
'incognito-mode': { name: 'Incognito mode', icon: iconMappings.glasses, dependsOn: 'main_more' },
'download-queue': { name: 'Download queue', icon: iconMappings.downloadOutline, dependsOn: 'main_more' },
'categories': { name: 'Categories', icon: iconMappings.labelOutline, dependsOn: 'main_more' },
'statistics': { name: 'Statistics', icon: iconMappings.queryStats, dependsOn: 'main_more' },
'backup-and-restore': { name: 'Backup and restore', icon: iconMappings.backupRestore, dependsOn: 'main_more' },
'settings': { name: 'Settings', icon: iconMappings.cog, dependsOn: 'main_more' },
'about': { name: 'About', icon: iconMappings.informationOutline, dependsOn: 'main_more' },
'help': { name: 'Help', icon: iconMappings.helpCircleOutline, dependsOn: 'main_more' },
// Settings submenu
"appearance": { name: "Appearance", icon: iconMappings.paletteOutline, dependsOn: "settings" },
"library": { name: "Library", icon: iconMappings.bookmarkBoxOutline, dependsOn: "settings" },
"downloads": { name: "Downloads", icon: iconMappings.downloadOutline, dependsOn: "settings" },
"tracking": { name: "Tracking", icon: iconMappings.sync, dependsOn: "settings" },
"browse": { name: "Browse", icon: iconMappings.compassOutline, dependsOn: "settings" },
"security-and-privacy": { name: "Security and privacy", icon: iconMappings.security, dependsOn: "settings" },
"reader": { name: "Reader", icon: iconMappings.bookOpenOutline, dependsOn: "settings" },
"advanced": { name: "Advanced", icon: iconMappings.codeTags, dependsOn: "settings" },
// Settings submenu
'appearance': { name: 'Appearance', icon: iconMappings.paletteOutline, dependsOn: 'settings' },
'library': { name: 'Library', icon: iconMappings.bookmarkBoxOutline, dependsOn: 'settings' },
'downloads': { name: 'Downloads', icon: iconMappings.downloadOutline, dependsOn: 'settings' },
'tracking': { name: 'Tracking', icon: iconMappings.sync, dependsOn: 'settings' },
'browse': { name: 'Browse', icon: iconMappings.compassOutline, dependsOn: 'settings' },
'security-and-privacy': { name: 'Security and privacy', icon: iconMappings.security, dependsOn: 'settings' },
'reader': { name: 'Reader', icon: iconMappings.bookOpenOutline, dependsOn: 'settings' },
'advanced': { name: 'Advanced', icon: iconMappings.codeTags, dependsOn: 'settings' },
}
function generateNavigationHtml(navKey: string) {
const navData = navigationMappings[navKey]
const navData = navigationMappings[navKey]
if (!navData) {
return "<strong style='color:var(--vp-c-danger-1)'>Unsupported Navigation!</strong>"
}
if (!navData)
return '<strong style=\'color:var(--vp-c-danger-1)\'>Unsupported Navigation!</strong>'
const { name, icon, dependsOn } = navData
const { name, icon, dependsOn } = navData
const iconHtml = icon ?? ""
let html = `<span class='shortcode navigation ${navKey}'>${iconHtml}<span class="name">${name}</span></span>`
const iconHtml = icon ?? ''
let html = `<span class='shortcode navigation ${navKey}'>${iconHtml}<span class="name">${name}</span></span>`
if (dependsOn) {
html = `${generateNavigationHtml(dependsOn)} -> ${html}`
}
if (dependsOn)
html = `${generateNavigationHtml(dependsOn)} -> ${html}`
return html
return html
}
const shortcodes = {
nav: {
render({ to }) {
return generateNavigationHtml(to)
},
},
nav: {
render({ to }) {
return generateNavigationHtml(to)
},
},
}
export default shortcodes

130
website/src/.vitepress/config/themeConfig.ts
View File

@ -1,78 +1,78 @@
import type { DefaultTheme } from "vitepress"
import type { DefaultTheme } from 'vitepress'
import nav from "./navigation/navbar"
import sidebar from "./navigation/sidebar"
import nav from './navigation/navbar'
import sidebar from './navigation/sidebar'
const themeConfig: DefaultTheme.Config = {
logo: {
src: "/img/logo-128px.png",
width: 24,
height: 24,
},
logo: {
src: '/img/logo-128px.png',
width: 24,
height: 24,
},
nav,
sidebar,
nav,
sidebar,
outline: [2, 3],
outline: [2, 3],
socialLinks: [
{
icon: "github",
link: "https://github.com/tachiyomiorg/tachiyomi",
ariaLabel: "Project GitHub",
},
{
icon: "discord",
link: "https://discord.gg/tachiyomi",
ariaLabel: "Discord Server",
},
{
icon: "x",
link: "https://twitter.com/tachiyomiorg",
ariaLabel: "X Page",
},
{
icon: "facebook",
link: "https://facebook.com/tachiyomiorg",
ariaLabel: "Facebook Page",
},
{
icon: {
svg: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>',
},
link: "https://reddit.com/r/Tachiyomi",
ariaLabel: "Support subreddit",
},
// { icon: "instagram", link: "https://instagram.com/tachiyomiorg", ariaLabel: "Instagram Page" },
],
socialLinks: [
{
icon: 'github',
link: 'https://github.com/tachiyomiorg/tachiyomi',
ariaLabel: 'Project GitHub',
},
{
icon: 'discord',
link: 'https://discord.gg/tachiyomi',
ariaLabel: 'Discord Server',
},
{
icon: 'x',
link: 'https://twitter.com/tachiyomiorg',
ariaLabel: 'X Page',
},
{
icon: 'facebook',
link: 'https://facebook.com/tachiyomiorg',
ariaLabel: 'Facebook Page',
},
{
icon: {
svg: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>',
},
link: 'https://reddit.com/r/Tachiyomi',
ariaLabel: 'Support subreddit',
},
// { icon: "instagram", link: "https://instagram.com/tachiyomiorg", ariaLabel: "Instagram Page" },
],
footer: {
message: "<a href=\"https://www.apache.org/licenses/LICENSE-2.0\" target=\"_blank\">Open-source Apache Licensed</a> <span class=\"divider\">|</span> <a href=\"/privacy/\">Privacy policy</a> <span class=\"divider\">|</span> Powered by <a target=\"_blank\" href=\"https://www.netlify.com/\">Netlify <img src=\"/img/logo-netlify.svg\" alt=\"Netlify Logo\" height=\"12px\" width=\"12px\" style=\"display: inline-block\"></a>",
copyright: `Copyright © 2015 - ${new Date().getFullYear()} Javier Tomás`,
},
footer: {
message: '<a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Open-source Apache Licensed</a> <span class="divider">|</span> <a href="/privacy/">Privacy policy</a> <span class="divider">|</span> Powered by <a target="_blank" href="https://www.netlify.com/">Netlify <img src="/img/logo-netlify.svg" alt="Netlify Logo" height="12px" width="12px" style="display: inline-block"></a>',
copyright: `Copyright © 2015 - ${new Date().getFullYear()} Javier Tomás`,
},
editLink: {
pattern: "https://github.com/tachiyomiorg/website/edit/main/website/src/:path",
text: "Help us improve this page",
},
editLink: {
pattern: 'https://github.com/tachiyomiorg/website/edit/main/website/src/:path',
text: 'Help us improve this page',
},
lastUpdated: {
text: "Last updated",
formatOptions: {
forceLocale: true,
dateStyle: "long",
timeStyle: "short",
},
},
lastUpdated: {
text: 'Last updated',
formatOptions: {
forceLocale: true,
dateStyle: 'long',
timeStyle: 'short',
},
},
search: {
provider: "algolia",
options: {
appId: "2C8EHFTRW7",
apiKey: "ee38c6e04295e4d206399ab59a58ea9a",
indexName: "tachiyomi",
},
},
search: {
provider: 'algolia',
options: {
appId: '2C8EHFTRW7',
apiKey: 'ee38c6e04295e4d206399ab59a58ea9a',
indexName: 'tachiyomi',
},
},
}
export default themeConfig

70
website/src/.vitepress/theme/Layout.vue
View File

@ -1,64 +1,64 @@
<script setup lang="ts">
import { useData } from "vitepress"
import DefaultTheme from "vitepress/theme"
import { nextTick, provide } from "vue"
import { useData } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { nextTick, provide } from 'vue'
const { isDark } = useData()
function shouldEnableTransitions() {
return "startViewTransition" in document
&& window.matchMedia("(prefers-reduced-motion: no-preference)").matches
return 'startViewTransition' in document
&& window.matchMedia('(prefers-reduced-motion: no-preference)').matches
}
provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
if (!shouldEnableTransitions()) {
isDark.value = !isDark.value
return
}
provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
if (!shouldEnableTransitions()) {
isDark.value = !isDark.value
return
}
const clipPath = [
`circle(0px at ${x}px ${y}px)`,
`circle(${Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
)}px at ${x}px ${y}px)`,
]
const clipPath = [
`circle(0px at ${x}px ${y}px)`,
`circle(${Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
)}px at ${x}px ${y}px)`,
]
// @ts-expect-error Missing types as its experimental
await document.startViewTransition(async () => {
isDark.value = !isDark.value
await nextTick()
}).ready
// @ts-expect-error Missing types as its experimental
await document.startViewTransition(async () => {
isDark.value = !isDark.value
await nextTick()
}).ready
document.documentElement.animate(
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
{
duration: 300,
easing: "ease-in",
pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
},
)
document.documentElement.animate(
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
{
duration: 300,
easing: 'ease-in',
pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
},
)
})
</script>
<template>
<DefaultTheme.Layout />
<DefaultTheme.Layout />
</template>
<style lang="stylus">
::view-transition-old(root),
::view-transition-new(root) {
animation: none
mix-blend-mode: normal
animation: none
mix-blend-mode: normal
}
::view-transition-old(root),
.dark::view-transition-new(root) {
z-index: 1
z-index: 1
}
::view-transition-new(root),
.dark::view-transition-old(root) {
z-index: 9999
z-index: 9999
}
</style>

170
website/src/.vitepress/theme/components/Changelog.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed, toRefs } from "vue"
import MarkdownIt from "markdown-it"
import { type AppRelease, data as release } from "../data/release.data"
import Contributors from "./Contributors.vue"
import { computed, toRefs } from 'vue'
import MarkdownIt from 'markdown-it'
import { type AppRelease, data as release } from '../data/release.data'
import Contributors from './Contributors.vue'
const props = defineProps<{ type: keyof AppRelease }>()
const { type } = toRefs(props)
@ -10,107 +10,107 @@ const { type } = toRefs(props)
const md = new MarkdownIt()
const changelog = computed(() => {
const flavoredString = (release[type.value].body ?? "")
.replace(/(?<=\(|(, ))@(.*?)(?=\)|(, ))/g, "[@$2](https://github.com/$2)")
.replace("https://github.com/tachiyomiorg/tachiyomi/releases", "/changelogs/")
const flavoredString = (release[type.value].body ?? '')
.replace(/(?<=\(|(, ))@(.*?)(?=\)|(, ))/g, '[@$2](https://github.com/$2)')
.replace('https://github.com/tachiyomiorg/tachiyomi/releases', '/changelogs/')
return md.render(flavoredString)
return md.render(flavoredString)
})
</script>
<template>
<div class="changelog">
<header>
<IconNewspaperVariant />
<h2>Changelog</h2>
</header>
<div v-html="changelog" />
<Contributors
:body="release[type].body!"
:author="release[type].author.login"
:tag="release[type].tag_name"
/>
</div>
<div class="fullChangelog">
<p>
View the full release
<a href="https://github.com/tachiyomiorg/tachiyomi/releases/latest" target="_blank" rel="noopener">
here
</a>
</p>
</div>
<div class="changelog">
<header>
<IconNewspaperVariant />
<h2>Changelog</h2>
</header>
<div v-html="changelog" />
<Contributors
:body="release[type].body!"
:author="release[type].author.login"
:tag="release[type].tag_name"
/>
</div>
<div class="fullChangelog">
<p>
View the full release
<a href="https://github.com/tachiyomiorg/tachiyomi/releases/latest" target="_blank" rel="noopener">
here
</a>
</p>
</div>
</template>
<style lang="stylus">
.changelog {
display: block
border: 1px solid var(--vp-c-bg-soft)
border-radius: 12px
background-color: var(--vp-c-bg-soft)
transition: border-color 0.25s, background-color 0.25s
padding: 24px
height: 100%
margin: 1.5em auto 0.5em
display: block
border: 1px solid var(--vp-c-bg-soft)
border-radius: 12px
background-color: var(--vp-c-bg-soft)
transition: border-color 0.25s, background-color 0.25s
padding: 24px
height: 100%
margin: 1.5em auto 0.5em
header {
display: flex
justify-content: center
align-items: baseline
margin: 0 0 1rem
}
header {
display: flex
justify-content: center
align-items: baseline
margin: 0 0 1rem
}
svg {
font-size: 1.2em
margin-right: 0.5rem
vertical-align: middle
}
svg {
font-size: 1.2em
margin-right: 0.5rem
vertical-align: middle
}
h2 {
font-size: 1.5rem
margin: 0
padding: 0
color: var(--vp-c-text-1)
border: none
}
h2 {
font-size: 1.5rem
margin: 0
padding: 0
color: var(--vp-c-text-1)
border: none
}
div > p {
margin: 0 0 1rem
color: var(--vp-c-text-2)
font-size: 0.9rem
}
div > p {
margin: 0 0 1rem
color: var(--vp-c-text-2)
font-size: 0.9rem
}
table {
border-radius: 8px
border-collapse: collapse
border: 1px solid var(--vp-c-divider)
table {
border-radius: 8px
border-collapse: collapse
border: 1px solid var(--vp-c-divider)
tr,
th,
td {
border: none
width: 100%
}
tr,
th,
td {
border: none
width: 100%
}
tbody tr {
border-top: 1px solid var(--vp-c-divider)
}
tbody tr {
border-top: 1px solid var(--vp-c-divider)
}
tr > td {
&:first-child {
color: var(--vp-c-text-2)
}
tr > td {
&:first-child {
color: var(--vp-c-text-2)
}
&:last-child {
font-family: var(--vp-font-family-mono)
font-size: var(--vp-code-font-size)
}
}
}
&:last-child {
font-family: var(--vp-font-family-mono)
font-size: var(--vp-code-font-size)
}
}
}
}
.fullChangelog {
margin: 0 0 1rem
color: var(--vp-c-text-2)
font-size: 0.9rem
margin: 0 0 1rem
color: var(--vp-c-text-2)
font-size: 0.9rem
}
</style>

96
website/src/.vitepress/theme/components/ChangelogsList.vue
View File

@ -1,69 +1,69 @@
<script setup lang="ts">
import MarkdownIt from "markdown-it"
import { data as changelogs } from "../data/changelogs.data"
import Contributors from "./Contributors.vue"
import MarkdownIt from 'markdown-it'
import { data as changelogs } from '../data/changelogs.data'
import Contributors from './Contributors.vue'
const md = new MarkdownIt()
function renderMarkdown(string: string | null | undefined) {
const body = string ?? "No changelog provided."
const flavoredString = body
.split(/---\r\n\r\n### Checksums|---\r\n\r\nMD5/)[0]
.replace(/(?<=\(|(, ))@(.*?)(?=\)|(, ))/g, "[@$2](https://github.com/$2)")
.replace(/#(\d+)/g, "[#$1](https://github.com/tachiyomiorg/tachiyomi/issues/$1)")
.replace(/^Check out the .*past release notes.* if you're.*$/m, "")
.replace(/https\:\/\/github.com\/tachiyomiorg\/tachiyomi\/releases\/tag\/(.*?)/g, "#$1")
.trim()
const body = string ?? 'No changelog provided.'
const flavoredString = body
.split(/---\r\n\r\n### Checksums|---\r\n\r\nMD5/)[0]
.replace(/(?<=\(|(, ))@(.*?)(?=\)|(, ))/g, '[@$2](https://github.com/$2)')
.replace(/#(\d+)/g, '[#$1](https://github.com/tachiyomiorg/tachiyomi/issues/$1)')
.replace(/^Check out the .*past release notes.* if you're.*$/m, '')
.replace(/https\:\/\/github.com\/tachiyomiorg\/tachiyomi\/releases\/tag\/(.*?)/g, '#$1')
.trim()
return md.render(flavoredString)
return md.render(flavoredString)
}
const dateFormatter = new Intl.DateTimeFormat("en", {
dateStyle: "medium",
const dateFormatter = new Intl.DateTimeFormat('en', {
dateStyle: 'medium',
})
</script>
<template>
<div
v-for="(release, index) of changelogs"
:key="release.tag_name"
>
<h2 :id="index === 0 ? 'latest' : release.tag_name">
<a
:href="release.html_url"
target="_blank"
>
{{ release.tag_name.substring(1) }}
</a>
<Badge v-if="index === 0" type="tip" text="Latest" />
<a
class="header-anchor"
:href="index === 0 ? '#latest' : `#${release.tag_name}`"
:aria-label="`Permalink to &quot;${release.tag_name}&quot;`"
/>
</h2>
<time :datetime="release.published_at!">
{{ dateFormatter.format(new Date(release.published_at!)) }}
</time>
<div v-html="renderMarkdown(release.body)" />
<Contributors
:body="release.body!"
:author="release.author.login"
:tag="release.tag_name"
/>
</div>
<div
v-for="(release, index) of changelogs"
:key="release.tag_name"
>
<h2 :id="index === 0 ? 'latest' : release.tag_name">
<a
:href="release.html_url"
target="_blank"
>
{{ release.tag_name.substring(1) }}
</a>
<Badge v-if="index === 0" type="tip" text="Latest" />
<a
class="header-anchor"
:href="index === 0 ? '#latest' : `#${release.tag_name}`"
:aria-label="`Permalink to &quot;${release.tag_name}&quot;`"
/>
</h2>
<time :datetime="release.published_at!">
{{ dateFormatter.format(new Date(release.published_at!)) }}
</time>
<div v-html="renderMarkdown(release.body)" />
<Contributors
:body="release.body!"
:author="release.author.login"
:tag="release.tag_name"
/>
</div>
</template>
<style lang="stylus" scoped>
h2 {
margin-bottom: 0
display: flex
align-items: center
gap: 0.5rem
margin-bottom: 0
display: flex
align-items: center
gap: 0.5rem
}
time {
font-size: 0.875rem
color: var(--vp-c-text-2)
font-size: 0.875rem
color: var(--vp-c-text-2)
}
</style>

140
website/src/.vitepress/theme/components/Contributors.vue
View File

@ -1,108 +1,106 @@
<script setup lang="ts">
import { computed, ref, toRefs } from "vue"
import { computed, ref, toRefs } from 'vue'
const props = defineProps<{ body: string; author: string; tag: string }>()
const { body, author, tag } = toRefs(props)
function isHigherThan(tagName: string, reference: string) {
return reference.localeCompare(tagName, undefined, { numeric: true, sensitivity: "base" }) >= 0
return reference.localeCompare(tagName, undefined, { numeric: true, sensitivity: 'base' }) >= 0
}
const notMentioned = computed(() => {
return isHigherThan("v0.8.5", tag.value) ? ["arkon"] : []
return isHigherThan('v0.8.5', tag.value) ? ['arkon'] : []
})
const nonExistent = ref<string[]>([])
const contributors = computed(() => {
const list = [...body.value.matchAll(/(?<=\(|(, ))@(.*?)(?=\)|(, ))/g)]
.map((match) => match[2])
const uncredited = author.value.includes("[bot]")
? notMentioned.value
: [author.value, ...notMentioned.value]
const list = [...body.value.matchAll(/(?<=\(|(, ))@(.*?)(?=\)|(, ))/g)]
.map(match => match[2])
const uncredited = author.value.includes('[bot]')
? notMentioned.value
: [author.value, ...notMentioned.value]
return [...new Set([...uncredited, ...list])].filter((user) => !nonExistent.value.includes(user))
return [...new Set([...uncredited, ...list])].filter(user => !nonExistent.value.includes(user))
})
const listFormatter = new Intl.ListFormat("en", {
style: "long",
type: "conjunction",
const listFormatter = new Intl.ListFormat('en', {
style: 'long',
type: 'conjunction',
})
const contributorsText = computed(() => {
if (contributors.value.length <= 3) {
return listFormatter.format(contributors.value)
}
if (contributors.value.length <= 3)
return listFormatter.format(contributors.value)
return listFormatter.format([
...contributors.value.slice(0, 2),
`${contributors.value.length - 2} other contributors`,
])
return listFormatter.format([
...contributors.value.slice(0, 2),
`${contributors.value.length - 2} other contributors`,
])
})
function addToNonExistent(user: string) {
if (!nonExistent.value.includes(user)) {
nonExistent.value.push(user)
}
if (!nonExistent.value.includes(user))
nonExistent.value.push(user)
}
</script>
<template>
<div v-if="contributors.length > 0" class="contributors">
<h3>Contributors</h3>
<ul>
<li
v-for="contributor of contributors"
:key="contributor"
>
<a
:href="`https://github.com/${contributor}`"
target="_blank"
:title="`${contributor} profile on GitHub`"
:aria-label="`${contributor} profile on GitHub`"
>
<img
:src="`https://github.com/${contributor}.png?size=32`"
:alt="`@${contributor} profile picture`"
loading="lazy"
class="avatar"
@error="addToNonExistent(contributor)"
>
</a>
</li>
</ul>
<div class="names">
{{ contributorsText }}
</div>
</div>
<div v-if="contributors.length > 0" class="contributors">
<h3>Contributors</h3>
<ul>
<li
v-for="contributor of contributors"
:key="contributor"
>
<a
:href="`https://github.com/${contributor}`"
target="_blank"
:title="`${contributor} profile on GitHub`"
:aria-label="`${contributor} profile on GitHub`"
>
<img
:src="`https://github.com/${contributor}.png?size=32`"
:alt="`@${contributor} profile picture`"
loading="lazy"
class="avatar"
@error="addToNonExistent(contributor)"
>
</a>
</li>
</ul>
<div class="names">
{{ contributorsText }}
</div>
</div>
</template>
<style lang="stylus" scoped>
.contributors {
ul {
display: flex
align-items: center
flex-wrap: wrap
gap: 0.5rem
list-style-type: none
padding-left: 0
ul {
display: flex
align-items: center
flex-wrap: wrap
gap: 0.5rem
list-style-type: none
padding-left: 0
li + li {
margin-top: 0
}
}
li + li {
margin-top: 0
}
}
.avatar {
width: 32px
height: 32px
border-radius: 50%
box-shadow: var(--vp-shadow-1)
border: 1px solid var(--vp-c-divider)
}
.avatar {
width: 32px
height: 32px
border-radius: 50%
box-shadow: var(--vp-shadow-1)
border: 1px solid var(--vp-c-divider)
}
.names {
font-size: 0.875rem
color: var(--vp-c-text-2)
}
.names {
font-size: 0.875rem
color: var(--vp-c-text-2)
}
}
</style>

60
website/src/.vitepress/theme/components/CustomNavBarMenu.vue
View File

@ -1,12 +1,12 @@
<script setup lang="ts">
import { computed, onMounted, ref } from "vue"
import { useData } from "vitepress"
import type { DefaultTheme } from "vitepress/theme"
import { computed, onMounted, ref } from 'vue'
import { useData } from 'vitepress'
import type { DefaultTheme } from 'vitepress/theme'
import VPNavBarMenuLink from "vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue"
import VPNavBarMenuGroup from "vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue"
import VPNavBarMenuLink from 'vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue'
import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'
import { data as release } from "../data/release.data"
import { data as release } from '../data/release.data'
const { theme } = useData<DefaultTheme.Config>()
@ -14,7 +14,7 @@ const { theme } = useData<DefaultTheme.Config>()
const replace = ref(false)
onMounted(() => {
replace.value = true
replace.value = true
})
/**
@ -22,43 +22,41 @@ onMounted(() => {
* and navbar doesn't support using the VitePress data loading.
*/
const nav = computed(() => {
if (!replace.value) {
return theme.value.nav
}
if (!replace.value)
return theme.value.nav
return theme.value.nav?.map((item) => {
if (!item.text.includes("{app_version}")) {
return item
}
return theme.value.nav?.map((item) => {
if (!item.text.includes('{app_version}'))
return item
const appVersion = release.stable.tag_name.substring(1)
const appVersion = release.stable.tag_name.substring(1)
return {
...item,
text: item.text.replace("{app_version}", appVersion),
} satisfies DefaultTheme.NavItem
})
return {
...item,
text: item.text.replace('{app_version}', appVersion),
} satisfies DefaultTheme.NavItem
})
})
</script>
<template>
<nav v-if="nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
<span id="main-nav-aria-label" class="visually-hidden">Main navigation</span>
<template v-for="item in nav" :key="item.text">
<VPNavBarMenuLink v-if="'link' in item" :item="item" />
<VPNavBarMenuGroup v-else :item="item" />
</template>
</nav>
<nav v-if="nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
<span id="main-nav-aria-label" class="visually-hidden">Main navigation</span>
<template v-for="item in nav" :key="item.text">
<VPNavBarMenuLink v-if="'link' in item" :item="item" />
<VPNavBarMenuGroup v-else :item="item" />
</template>
</nav>
</template>
<style lang="stylus" scoped>
.VPNavBarMenu {
display: none
display: none
}
@media (min-width 768px) {
.VPNavBarMenu {
display: flex
}
.VPNavBarMenu {
display: flex
}
}
</style>

62
website/src/.vitepress/theme/components/CustomNavScreenMenu.vue
View File

@ -1,11 +1,11 @@
<script setup lang="ts">
import { computed, onMounted, ref } from "vue"
import { type DefaultTheme, useData } from "vitepress"
import { computed, onMounted, ref } from 'vue'
import { type DefaultTheme, useData } from 'vitepress'
import VPNavScreenMenuLink from "vitepress/dist/client/theme-default/components/VPNavScreenMenuLink.vue"
import VPNavScreenMenuGroup from "vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue"
import VPNavScreenMenuLink from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuLink.vue'
import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue'
import { data as release } from "../data/release.data"
import { data as release } from '../data/release.data'
const { theme } = useData<DefaultTheme.Config>()
@ -13,7 +13,7 @@ const { theme } = useData<DefaultTheme.Config>()
const replace = ref(false)
onMounted(() => {
replace.value = true
replace.value = true
})
/**
@ -21,37 +21,35 @@ onMounted(() => {
* and navbar doesn't support using the VitePress data loading.
*/
const nav = computed(() => {
if (!replace.value) {
return theme.value.nav
}
if (!replace.value)
return theme.value.nav
return theme.value.nav?.map((item) => {
if (!item.text.includes("{app_version}")) {
return item
}
return theme.value.nav?.map((item) => {
if (!item.text.includes('{app_version}'))
return item
const appVersion = release.stable.tag_name.substring(1)
const appVersion = release.stable.tag_name.substring(1)
return {
...item,
text: item.text.replace("{app_version}", appVersion),
} satisfies DefaultTheme.NavItem
})
return {
...item,
text: item.text.replace('{app_version}', appVersion),
} satisfies DefaultTheme.NavItem
})
})
</script>
<template>
<nav v-if="nav" class="VPNavScreenMenu">
<template v-for="item in nav" :key="item.text">
<VPNavScreenMenuLink
v-if="'link' in item"
:item="item"
/>
<VPNavScreenMenuGroup
v-else
:text="item.text || ''"
:items="item.items"
/>
</template>
</nav>
<nav v-if="nav" class="VPNavScreenMenu">
<template v-for="item in nav" :key="item.text">
<VPNavScreenMenuLink
v-if="'link' in item"
:item="item"
/>
<VPNavScreenMenuGroup
v-else
:text="item.text || ''"
:items="item.items"
/>
</template>
</nav>
</template>

54
website/src/.vitepress/theme/components/CustomSwitchAppearance.vue
View File

@ -15,7 +15,7 @@ const supportsViewTransition = ref(false)
onMounted(() => {
supportsViewTransition.value = 'startViewTransition' in document
&& window.matchMedia('(prefers-reduced-motion: no-preference)').matches
&& window.matchMedia('(prefers-reduced-motion: no-preference)').matches
})
</script>
@ -40,35 +40,35 @@ onMounted(() => {
<style lang="stylus" scoped>
.CustomSwitchAppearance {
display: flex
justify-content: center
align-items: center
width: 36px
height: 36px
color: var(--vp-c-text-2)
transition: color 0.5s
display: flex
justify-content: center
align-items: center
width: 36px
height: 36px
color: var(--vp-c-text-2)
transition: color 0.5s
&:hover {
color: var(--vp-c-text-1)
transition: color 0.25s
}
&:hover {
color: var(--vp-c-text-1)
transition: color 0.25s
}
& > :deep(svg) {
width: 20px
height: 20px
fill: currentColor
}
& > :deep(svg) {
width: 20px
height: 20px
fill: currentColor
}
&[data-view-transition="false"] {
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.1s ease
}
&[data-view-transition="false"] {
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.1s ease
}
.fade-enter-from,
.fade-leave-to {
opacity: 0
}
}
.fade-enter-from,
.fade-leave-to {
opacity: 0
}
}
}
</style>

272
website/src/.vitepress/theme/components/DownloadButtons.vue
View File

@ -1,174 +1,174 @@
<script setup lang="ts">
/// <reference types="@types/gtag.js" />
import { computed, onMounted, ref } from "vue"
import { data as release } from "../data/release.data"
import { computed, onMounted, ref } from 'vue'
import { data as release } from '../data/release.data'
const downloadInformation = computed(() => ({
preview: {
tagName: release.preview.tag_name ?? "r0000",
asset: (release.preview.assets ?? [])
.find((a) => /^tachiyomi-r\d{4,}.apk/.test(a.name)),
},
stable: {
tagName: release.stable.tag_name ?? "v0.00.0",
asset: (release.stable.assets ?? [])
.find((a) => /^tachiyomi-v\d+\.\d+\.\d+.apk/.test(a.name)),
},
preview: {
tagName: release.preview.tag_name ?? 'r0000',
asset: (release.preview.assets ?? [])
.find(a => /^tachiyomi-r\d{4,}.apk/.test(a.name)),
},
stable: {
tagName: release.stable.tag_name ?? 'v0.00.0',
asset: (release.stable.assets ?? [])
.find(a => /^tachiyomi-v\d+\.\d+\.\d+.apk/.test(a.name)),
},
}))
const isAndroid = ref(true)
onMounted(() => {
isAndroid.value = !!navigator.userAgent.match(/android/i)
isAndroid.value = !!navigator.userAgent.match(/android/i)
})
function handleAnalytics(type: "preview" | "stable") {
window.gtag?.("event", "Download", {
event_category: "App",
event_label: type === "stable" ? "Stable" : "Preview",
version: type === "stable"
? release.stable.tag_name
: release.preview.tag_name,
})
function handleAnalytics(type: 'preview' | 'stable') {
window.gtag?.('event', 'Download', {
event_category: 'App',
event_label: type === 'stable' ? 'Stable' : 'Preview',
version: type === 'stable'
? release.stable.tag_name
: release.preview.tag_name,
})
}
</script>
<template>
<div>
<div v-if="!isAndroid" class="custom-block danger">
<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 v-if="!isAndroid" class="custom-block warning">
<p class="custom-block-title">
Caution
</p>
<p>
Any app for any operating systems other than Android called
<strong>Tachiyomi</strong> is not affiliated with this project.
</p>
<blockquote>
For more information, read the
<a href="/docs/faq/general">General FAQ</a>.
</blockquote>
</div>
<div class="download-buttons">
<a
class="download-button primary"
:download="downloadInformation.stable.asset?.name"
:href="downloadInformation.stable.asset?.browser_download_url"
@click="handleAnalytics('stable')"
>
<IconDownload />
<span class="text">Stable</span>
<span class="version">{{ downloadInformation.stable.tagName }}</span>
</a>
<a
class="download-button secondary"
:download="downloadInformation.preview.asset?.name"
:href="downloadInformation.preview.asset?.browser_download_url"
@click="handleAnalytics('preview')"
>
<IconBugReport />
<span class="text">Preview</span>
<span class="version">{{ downloadInformation.preview.tagName }}</span>
</a>
</div>
<span class="version-disclaimer">
Requires <strong>Android 6.0</strong> or higher.
</span>
</div>
<div>
<div v-if="!isAndroid" class="custom-block danger">
<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 v-if="!isAndroid" class="custom-block warning">
<p class="custom-block-title">
Caution
</p>
<p>
Any app for any operating systems other than Android called
<strong>Tachiyomi</strong> is not affiliated with this project.
</p>
<blockquote>
For more information, read the
<a href="/docs/faq/general">General FAQ</a>.
</blockquote>
</div>
<div class="download-buttons">
<a
class="download-button primary"
:download="downloadInformation.stable.asset?.name"
:href="downloadInformation.stable.asset?.browser_download_url"
@click="handleAnalytics('stable')"
>
<IconDownload />
<span class="text">Stable</span>
<span class="version">{{ downloadInformation.stable.tagName }}</span>
</a>
<a
class="download-button secondary"
:download="downloadInformation.preview.asset?.name"
:href="downloadInformation.preview.asset?.browser_download_url"
@click="handleAnalytics('preview')"
>
<IconBugReport />
<span class="text">Preview</span>
<span class="version">{{ downloadInformation.preview.tagName }}</span>
</a>
</div>
<span class="version-disclaimer">
Requires <strong>Android 6.0</strong> or higher.
</span>
</div>
</template>
<style lang="stylus">
.download-buttons {
display: flex
gap: 0.75em
justify-content: center
align-items: center
margin: 0.75em auto
display: flex
gap: 0.75em
justify-content: center
align-items: center
margin: 0.75em auto
}
.download-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
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
}
&: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)
&.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)
}
&: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)
}
}
&: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)
&.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)
}
&: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)
}
}
&: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
}
svg {
display: inline-block
vertical-align: middle
margin-right: 0.5em
font-size: 1.25em
}
.text {
margin-right: 10px
}
.text {
margin-right: 10px
}
.version {
font-size: 0.8em
}
.version {
font-size: 0.8em
}
}
.version-disclaimer {
display: block
text-align: center
margin: 0.75em auto
font-size: 0.75rem
display: block
text-align: center
margin: 0.75em auto
font-size: 0.75rem
}
</style>

156
website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue
View File

@ -1,104 +1,104 @@
<script setup lang="ts">
import { computed, toRefs } from "vue"
import { useMediaQuery } from "@vueuse/core"
import { computed, toRefs } from 'vue'
import { useMediaQuery } from '@vueuse/core'
import {
ElForm,
ElFormItem,
ElInput,
ElOption,
ElRadio,
ElRadioGroup,
ElSelect,
} from "element-plus"
ElForm,
ElFormItem,
ElInput,
ElOption,
ElRadio,
ElRadioGroup,
ElSelect,
} from 'element-plus'
import { langName, simpleLangName } from "../../../config/scripts/languages"
import type { Extension } from "../../queries/useExtensionsRepositoryQuery"
import { langName, simpleLangName } from '../../../config/scripts/languages'
import type { Extension } from '../../queries/useExtensionsRepositoryQuery'
export type Nsfw = "Show all" | "NSFW" | "SFW"
export type Sort = "Ascending" | "Descending"
export type Nsfw = 'Show all' | 'NSFW' | 'SFW'
export type Sort = 'Ascending' | 'Descending'
const props = defineProps<{
extensions: Extension[][]
search: string
lang: string[]
nsfw: Nsfw
sort: Sort
extensions: Extension[][]
search: string
lang: string[]
nsfw: Nsfw
sort: Sort
}>()
defineEmits<{
(e: "update:search", search: string): void
(e: "update:lang", lang: string[]): void
(e: "update:nsfw", nsfw: Nsfw): void
(e: "update:sort", sort: Sort): void
(e: 'update:search', search: string): void
(e: 'update:lang', lang: string[]): void
(e: 'update:nsfw', nsfw: Nsfw): void
(e: 'update:sort', sort: Sort): void
}>()
const { extensions } = toRefs(props)
const isSmallScreen = useMediaQuery("(max-width: 767px)")
const labelPosition = computed(() => isSmallScreen.value ? "top" : "right")
const isSmallScreen = useMediaQuery('(max-width: 767px)')
const labelPosition = computed(() => isSmallScreen.value ? 'top' : 'right')
</script>
<template>
<ClientOnly>
<div class="filters-list">
<ElForm label-width="120px" :label-position="labelPosition">
<ElFormItem label="Search:">
<ElInput
:model-value="search"
placeholder="Search extensions by name or ID..."
clearable
@update:model-value="$emit('update:search', $event)"
/>
</ElFormItem>
<ElFormItem label="Languages:">
<ElSelect
:model-value="lang"
placeholder="Show specific languages..."
multiple
clearable
@update:model-value="$emit('update:lang', $event)"
>
<ElOption
v-for="[group] in extensions"
:key="group.lang"
:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
:value="group.lang"
/>
</ElSelect>
</ElFormItem>
<ElFormItem label="Sort by:">
<ElRadioGroup
:model-value="sort"
@update:model-value="$emit('update:sort', $event)"
>
<ElRadio label="Ascending" />
<ElRadio label="Descending" />
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="Display mode:">
<ElRadioGroup
:model-value="nsfw"
@update:model-value="$emit('update:nsfw', $event)"
>
<ElRadio label="NSFW" />
<ElRadio label="SFW" />
<ElRadio label="Show all" />
</ElRadioGroup>
</ElFormItem>
</ElForm>
</div>
</ClientOnly>
<ClientOnly>
<div class="filters-list">
<ElForm label-width="120px" :label-position="labelPosition">
<ElFormItem label="Search:">
<ElInput
:model-value="search"
placeholder="Search extensions by name or ID..."
clearable
@update:model-value="$emit('update:search', $event)"
/>
</ElFormItem>
<ElFormItem label="Languages:">
<ElSelect
:model-value="lang"
placeholder="Show specific languages..."
multiple
clearable
@update:model-value="$emit('update:lang', $event)"
>
<ElOption
v-for="[group] in extensions"
:key="group.lang"
:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
:value="group.lang"
/>
</ElSelect>
</ElFormItem>
<ElFormItem label="Sort by:">
<ElRadioGroup
:model-value="sort"
@update:model-value="$emit('update:sort', $event)"
>
<ElRadio label="Ascending" />
<ElRadio label="Descending" />
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="Display mode:">
<ElRadioGroup
:model-value="nsfw"
@update:model-value="$emit('update:nsfw', $event)"
>
<ElRadio label="NSFW" />
<ElRadio label="SFW" />
<ElRadio label="Show all" />
</ElRadioGroup>
</ElFormItem>
</ElForm>
</div>
</ClientOnly>
</template>
<style lang="stylus">
.filters-list {
display: flex
flex-direction: column
row-gap: 1rem
display: flex
flex-direction: column
row-gap: 1rem
}
.el-select {
width: 100%
width: 100%
}
</style>

62
website/src/.vitepress/theme/components/Extensions/ExtensionGroup.vue
View File

@ -1,51 +1,51 @@
<script setup lang="ts">
import { computed, toRefs } from "vue"
import { langName, simpleLangName } from "../../../config/scripts/languages"
import type { Extension } from "../../queries/useExtensionsRepositoryQuery"
import ExtensionItem from "./ExtensionItem.vue"
import { computed, 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 firstItem = list.value[0]
const firstItem = list.value[0]
return firstItem.lang === "en"
? simpleLangName(firstItem.lang)
: langName(firstItem.lang)
return firstItem.lang === 'en'
? simpleLangName(firstItem.lang)
: langName(firstItem.lang)
})
</script>
<template>
<div class="extension-group">
<h2>
<span>{{ groupName }}</span>
<div class="extension-group">
<h2>
<span>{{ groupName }}</span>
<span class="extensions-total">
Total:
<span class="extensions-total-sum">
{{ totalCount }}
</span>
</span>
</h2>
<span class="extensions-total">
Total:
<span class="extensions-total-sum">
{{ totalCount }}
</span>
</span>
</h2>
<ExtensionItem
v-for="extension in list"
:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
:key="extension.apk"
:item="extension"
/>
</div>
<ExtensionItem
v-for="extension in list"
:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
:key="extension.apk"
:item="extension"
/>
</div>
</template>
<style lang="stylus">
.extension-group h2 {
display: flex
align-items: center
justify-content: space-between
display: flex
align-items: center
justify-content: space-between
.extensions-total-sum {
color: var(--vp-c-brand)
}
.extensions-total-sum {
color: var(--vp-c-brand)
}
}
</style>

260
website/src/.vitepress/theme/components/Extensions/ExtensionItem.vue
View File

@ -1,179 +1,179 @@
<script setup lang="ts">
/// <reference types="@types/gtag.js" />
import { computed, toRefs } from "vue"
import type { Extension } from "../../queries/useExtensionsRepositoryQuery"
import { computed, toRefs } from 'vue'
import type { Extension } from '../../queries/useExtensionsRepositoryQuery'
const props = defineProps<{ item: Extension }>()
const { item } = toRefs(props)
const pkgId = computed(() => {
return item.value.pkg.replace("eu.kanade.tachiyomi.extension.", "")
return item.value.pkg.replace('eu.kanade.tachiyomi.extension.', '')
})
const pkgName = computed(() => item.value.name.split(": ")[1])
const pkgName = computed(() => item.value.name.split(': ')[1])
const pkgIsNsfw = computed(() => item.value.nsfw === 1)
const iconUrl = computed(() => {
return `https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/icon/${item.value.pkg}.png`
return `https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/icon/${item.value.pkg}.png`
})
const apkUrl = computed(() => {
return `https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/apk/${item.value.apk}`
return `https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/apk/${item.value.apk}`
})
function handleAnalytics() {
window.gtag?.("event", "Download", {
event_category: "Extension",
event_label: pkgName.value,
version: item.value.version,
})
window.gtag?.('event', 'Download', {
event_category: 'Extension',
event_label: pkgName.value,
version: item.value.version,
})
}
</script>
<template>
<div class="extension" tabindex="-1">
<a :href="`#${pkgId}`" class="anchor" aria-hidden="true" @click.stop>#</a>
<img class="extension-icon" :src="iconUrl" loading="lazy" width="42" height="42">
<div class="extension-text">
<div class="upper">
{{ pkgName }}
</div>
<div class="lower">
{{ pkgId }}
</div>
</div>
<Badge v-if="pkgIsNsfw" type="danger" :text="item.version" title="This extension contains NSFW entries." />
<Badge v-else type="info" :text="item.version" title="This extension is free from NSFW entries." />
<a
:href="apkUrl"
class="extension-download"
title="Download APK"
:download="item.apk"
@click="handleAnalytics"
>
↓
</a>
</div>
<div class="extension" tabindex="-1">
<a :href="`#${pkgId}`" class="anchor" aria-hidden="true" @click.stop>#</a>
<img class="extension-icon" :src="iconUrl" loading="lazy" width="42" height="42">
<div class="extension-text">
<div class="upper">
{{ pkgName }}
</div>
<div class="lower">
{{ pkgId }}
</div>
</div>
<Badge v-if="pkgIsNsfw" type="danger" :text="item.version" title="This extension contains NSFW entries." />
<Badge v-else type="info" :text="item.version" title="This extension is free from NSFW entries." />
<a
:href="apkUrl"
class="extension-download"
title="Download APK"
:download="item.apk"
@click="handleAnalytics"
>
↓
</a>
</div>
</template>
<style lang="stylus">
.extension {
position: relative
align-items: center
display: flex
width: calc(100% + 1em)
padding: 0.5em
margin: 0.8em -0.5em
border-radius: 8px
gap: 0.675rem
scroll-margin-top: calc(var(--vp-nav-height) + 24px)
position: relative
align-items: center
display: flex
width: calc(100% + 1em)
padding: 0.5em
margin: 0.8em -0.5em
border-radius: 8px
gap: 0.675rem
scroll-margin-top: calc(var(--vp-nav-height) + 24px)
&:hover {
background-color: var(--vp-c-bg-soft)
}
&:hover {
background-color: var(--vp-c-bg-soft)
}
&:target,
&:focus {
background-color: var(--vp-c-brand-soft)
border-radius: 8px
transition: 500ms background-color
}
&:target,
&:focus {
background-color: var(--vp-c-brand-soft)
border-radius: 8px
transition: 500ms background-color
}
&:focus {
outline: none
}
&:focus {
outline: none
}
.anchor {
position: absolute
left: 0
margin-left: -1em
font-size: 1.4em
opacity: 0
}
.anchor {
position: absolute
left: 0
margin-left: -1em
font-size: 1.4em
opacity: 0
}
&:hover .anchor,
.anchor:focus-visible {
opacity: 1
}
&:hover .anchor,
.anchor:focus-visible {
opacity: 1
}
.extension-icon {
flex-shrink: 0
margin-left: -4px
}
.extension-icon {
flex-shrink: 0
margin-left: -4px
}
.extension-text {
flex-grow: 1
min-width: 0
.extension-text {
flex-grow: 1
min-width: 0
.upper {
color: var(--vp-c-text-1)
font-weight: 600
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.upper {
color: var(--vp-c-text-1)
font-weight: 600
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.badge {
font-weight: 400
}
}
.badge {
font-weight: 400
}
}
.lower {
color: var(--vp-c-text-2)
font-family: var(--vp-font-family-mono)
font-size: 0.75rem
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
line-height: 1rem
}
}
.lower {
color: var(--vp-c-text-2)
font-family: var(--vp-font-family-mono)
font-size: 0.75rem
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
line-height: 1rem
}
}
.extension-download {
padding: 0.4em
font-weight: 700
font-size: 1.4em
border-radius: 4px
flex-shrink: 0
margin-right: -0.4em
.extension-download {
padding: 0.4em
font-weight: 700
font-size: 1.4em
border-radius: 4px
flex-shrink: 0
margin-right: -0.4em
.material-icons {
color: white
max-width: 18px
}
.material-icons {
color: white
max-width: 18px
}
&:hover {
.VPBadge {
background-color: var(--vp-c-brand-darker)
text-decoration: none
}
}
}
&:hover {
.VPBadge {
background-color: var(--vp-c-brand-darker)
text-decoration: none
}
}
}
@media (max-width 767px) {
padding: 0.4em 0
}
@media (max-width 767px) {
padding: 0.4em 0
}
}
@media (max-width 767px) {
.anchor {
display: none
}
.anchor {
display: none
}
.extension {
border: 1px solid var(--vp-c-divider)
border-radius: 8px
padding: 0.5em
margin: 0.8em 0
width: 100%
.extension {
border: 1px solid var(--vp-c-divider)
border-radius: 8px
padding: 0.5em
margin: 0.8em 0
width: 100%
.extension-icon {
margin-left: 0
}
.extension-icon {
margin-left: 0
}
.extension-download {
margin-right: 0
}
}
.extension-download {
margin-right: 0
}
}
}
</style>

40
website/src/.vitepress/theme/components/Extensions/ExtensionList.vue
View File

@ -1,36 +1,36 @@
<script setup lang="ts">
import { computed, toRefs } from "vue"
import type { Extension } from "../../queries/useExtensionsRepositoryQuery"
import ExtensionGroup from "./ExtensionGroup.vue"
import { computed, toRefs } from 'vue'
import type { Extension } from '../../queries/useExtensionsRepositoryQuery'
import ExtensionGroup from './ExtensionGroup.vue'
const props = defineProps<{ extensions: Extension[][] }>()
const { extensions } = toRefs(props)
const totalCount = computed(() => {
return extensions.value.reduce((sum, item) => sum + item.length, 0)
return extensions.value.reduce((sum, item) => sum + item.length, 0)
})
</script>
<template>
<div class="extension-list">
<ExtensionGroup
v-for="group in extensions"
:key="group[0].lang"
:list="group"
:class="group[0].lang"
:total-count="totalCount"
/>
</div>
<div class="extension-list">
<ExtensionGroup
v-for="group in extensions"
:key="group[0].lang"
:list="group"
:class="group[0].lang"
:total-count="totalCount"
/>
</div>
</template>
<style lang="stylus">
.extension-list {
> div {
&:not(:first-of-type) {
.extensions-total {
display: none
}
}
}
> div {
&:not(:first-of-type) {
.extensions-total {
display: none
}
}
}
}
</style>

174
website/src/.vitepress/theme/components/Extensions/ExtensionsWrapper.vue
View File

@ -1,127 +1,125 @@
<script setup lang="ts">
import groupBy from "lodash.groupby"
import { ElLoading } from "element-plus"
import groupBy from 'lodash.groupby'
import { ElLoading } from 'element-plus'
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 { Nsfw, Sort } from "./ExtensionFilters.vue"
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 { Nsfw, Sort } from './ExtensionFilters.vue'
const { data: extensions, isLoading } = useExtensionsRepositoryQuery({
select: (response) => {
const values: Extension[][] = Object.values(groupBy(response, "lang"))
values.sort(languageComparator)
select: (response) => {
const values: Extension[][] = Object.values(groupBy(response, 'lang'))
values.sort(languageComparator)
return values
},
return values
},
})
const filters = reactive({
search: "",
lang: [] as string[],
nsfw: "Show all" as Nsfw,
sort: "Ascending" as Sort,
search: '',
lang: [] as string[],
nsfw: 'Show all' as Nsfw,
sort: 'Ascending' as Sort,
})
function languageComparator(a: Extension[], b: Extension[]) {
const langA = simpleLangName(a[0].lang)
const langB = simpleLangName(b[0].lang)
if (langA === "All" && langB === "English") {
return -1
}
if (langA === "English" && langB === "All") {
return 1
}
if (langA === "English") {
return -1
}
if (langB === "English") {
return 1
}
if (langA < langB) {
return -1
}
if (langA > langB) {
return 1
}
return 0
const langA = simpleLangName(a[0].lang)
const langB = simpleLangName(b[0].lang)
if (langA === 'All' && langB === 'English')
return -1
if (langA === 'English' && langB === 'All')
return 1
if (langA === 'English')
return -1
if (langB === 'English')
return 1
if (langA < langB)
return -1
if (langA > langB)
return 1
return 0
}
const filteredExtensions = computed(() => {
const filtered: Extension[][] = []
const filtered: Extension[][] = []
for (const group of (extensions.value ?? [])) {
let filteredGroup = filters.lang.length
? (filters.lang.includes(group[0].lang) ? group : [])
: group
for (const group of (extensions.value ?? [])) {
let filteredGroup = filters.lang.length
? (filters.lang.includes(group[0].lang) ? group : [])
: group
if (filters.search) {
filteredGroup = filteredGroup.filter(
(ext) =>
ext.name.toLowerCase().includes(filters.search.toLowerCase())
|| ext.sources.some((source) => source.id.includes(filters.search)),
)
}
filteredGroup = filteredGroup.filter((ext) =>
filters.nsfw === "Show all" ? true : ext.nsfw === (filters.nsfw === "NSFW" ? 1 : 0),
)
if (filters.search) {
filteredGroup = filteredGroup.filter(
ext =>
ext.name.toLowerCase().includes(filters.search.toLowerCase())
|| ext.sources.some(source => source.id.includes(filters.search)),
)
}
filteredGroup = filteredGroup.filter(ext =>
filters.nsfw === 'Show all' ? true : ext.nsfw === (filters.nsfw === 'NSFW' ? 1 : 0),
)
if (filters.sort && filters.sort === "Descending") {
filteredGroup = filteredGroup.reverse()
}
if (filteredGroup.length) {
filtered.push(filteredGroup)
}
}
if (filters.sort && filters.sort === 'Descending')
filteredGroup = filteredGroup.reverse()
return filtered
if (filteredGroup.length)
filtered.push(filteredGroup)
}
return filtered
})
const loadingInstance = ref<ReturnType<typeof ElLoading["service"]>>()
const loadingInstance = ref<ReturnType<typeof ElLoading['service']>>()
onMounted(() => {
loadingInstance.value = ElLoading.service({
target: ".extensions",
fullscreen: false,
background: "transparent",
})
loadingInstance.value = ElLoading.service({
target: '.extensions',
fullscreen: false,
background: 'transparent',
})
})
watch(extensions, async () => {
if (window.location.hash) {
await nextTick()
const extElement = document.getElementById(window.location.hash.substring(1))
if (window.location.hash) {
await nextTick()
const extElement = document.getElementById(window.location.hash.substring(1))
extElement?.scrollIntoView({ behavior: "smooth" })
extElement?.focus({ preventScroll: true })
}
extElement?.scrollIntoView({ behavior: 'smooth' })
extElement?.focus({ preventScroll: true })
}
})
watch([isLoading, loadingInstance], async ([newIsLoading]) => {
if (!newIsLoading) {
loadingInstance.value?.close()
}
if (!newIsLoading)
loadingInstance.value?.close()
})
</script>
<template>
<ExtensionFilters
v-model:search="filters.search"
v-model:lang="filters.lang"
v-model:nsfw="filters.nsfw"
v-model:sort="filters.sort"
:extensions="extensions ?? []"
/>
<div class="extensions">
<ExtensionList v-if="!isLoading" :extensions="filteredExtensions" />
</div>
<ExtensionFilters
v-model:search="filters.search"
v-model:lang="filters.lang"
v-model:nsfw="filters.nsfw"
v-model:sort="filters.sort"
:extensions="extensions ?? []"
/>
<div class="extensions">
<ExtensionList v-if="!isLoading" :extensions="filteredExtensions" />
</div>
</template>
<style lang="stylus" scoped>
.extensions {
min-height: 200px
min-height: 200px
}
</style>

254
website/src/.vitepress/theme/components/News.vue
View File

@ -1,161 +1,161 @@
<script setup lang="ts">
import { IconChevronRight } from "@iconify-prerendered/vue-mdi"
import { data as newsList } from "../data/news.data"
import { IconChevronRight } from '@iconify-prerendered/vue-mdi'
import { data as newsList } from '../data/news.data'
const dateFormatter = new Intl.DateTimeFormat("en", {
dateStyle: "medium",
timeZone: "UTC",
const dateFormatter = new Intl.DateTimeFormat('en', {
dateStyle: 'medium',
timeZone: 'UTC',
})
function formatDate(date: string) {
const [year, month, day] = date
.substring(0, 10)
.split("-")
.map((number) => Number.parseInt(number, 10))
const utcDate = Date.UTC(year, month - 1, day)
return dateFormatter.format(utcDate)
const [year, month, day] = date
.substring(0, 10)
.split('-')
.map(number => Number.parseInt(number, 10))
const utcDate = Date.UTC(year, month - 1, day)
return dateFormatter.format(utcDate)
}
</script>
<template>
<article
v-for="news of newsList"
:key="news.url"
class="news"
>
<div>
<h3>
<a :href="news.url">
<span class="hover" />
<span class="title">{{ news.title }}</span>
</a>
<div class="background" />
</h3>
<time :datetime="news.date">
{{ formatDate(news.date) }}
</time>
</div>
<p>{{ news.description }}</p>
<div class="readPrompt" aria-hidden="true">
<span>Read article</span>
<IconChevronRight />
</div>
</article>
<article
v-for="news of newsList"
:key="news.url"
class="news"
>
<div>
<h3>
<a :href="news.url">
<span class="hover" />
<span class="title">{{ news.title }}</span>
</a>
<div class="background" />
</h3>
<time :datetime="news.date">
{{ formatDate(news.date) }}
</time>
</div>
<p>{{ news.description }}</p>
<div class="readPrompt" aria-hidden="true">
<span>Read article</span>
<IconChevronRight />
</div>
</article>
</template>
<style lang="stylus" scoped>
.news {
display: flex
flex-direction: column
gap: 0.5rem
position: relative
display: flex
flex-direction: column
gap: 0.5rem
position: relative
&:first-of-type {
margin-top: 3rem
}
&:first-of-type {
margin-top: 3rem
}
& + .news {
margin-top: 3rem
}
& + .news {
margin-top: 3rem
}
time {
font-size: 0.875rem
line-height: 1.25rem
color: var(--vp-c-text-2)
z-index: 10
}
time {
font-size: 0.875rem
line-height: 1.25rem
color: var(--vp-c-text-2)
z-index: 10
}
h3,
p {
margin: 0
}
h3,
p {
margin: 0
}
h3 {
position: unset
font-size: 1.125rem
line-height: 1.75rem
letter-spacing: -0.025em
}
h3 {
position: unset
font-size: 1.125rem
line-height: 1.75rem
letter-spacing: -0.025em
}
h3 a {
font-weight: 600
color: var(--vp-c-text-1)
h3 a {
font-weight: 600
color: var(--vp-c-text-1)
&:hover {
color: var(--vp-c-text-1)
text-decoration: none
}
&:hover {
color: var(--vp-c-text-1)
text-decoration: none
}
&:focus {
outline: none
}
}
&:focus {
outline: none
}
}
.title,
.readPrompt,
p,
time {
position: relative
}
.title,
.readPrompt,
p,
time {
position: relative
}
.title {
z-index: 10
}
.title {
z-index: 10
}
.readPrompt {
font-weight: 500
font-size: 0.875rem
line-height: 1.25rem
color: var(--vp-c-brand-1)
display: flex
align-items: center
margin-top: 0.25rem
.readPrompt {
font-weight: 500
font-size: 0.875rem
line-height: 1.25rem
color: var(--vp-c-brand-1)
display: flex
align-items: center
margin-top: 0.25rem
svg {
margin-bottom: -2px
margin-left: 0.25rem
width: 1.25rem
height: 1.25rem
}
}
svg {
margin-bottom: -2px
margin-left: 0.25rem
width: 1.25rem
height: 1.25rem
}
}
.hover,
.background {
position: absolute
z-index: 20
bottom: -1rem
top: -1rem
left: -1rem
right: -1rem
border-radius: 12px
}
.hover,
.background {
position: absolute
z-index: 20
bottom: -1rem
top: -1rem
left: -1rem
right: -1rem
border-radius: 12px
}
.background {
background-color: var(--vp-c-bg-soft)
transform: scale(0.95)
opacity: 0
z-index: 0
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)
}
.background {
background-color: var(--vp-c-bg-soft)
transform: scale(0.95)
opacity: 0
z-index: 0
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)
}
&:hover .background,
&:focus-within .background {
opacity: 1
transform: scale(1)
}
&:hover .background,
&:focus-within .background {
opacity: 1
transform: scale(1)
}
h3: a
h3: a
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2)
}
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2)
}
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2)
}
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2)
}
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2)
}
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2)
}
}
</style>

52
website/src/.vitepress/theme/components/OgImageTemplate.vue
View File

@ -3,30 +3,30 @@ defineProps<{ title: string; description?: string; dir?: string }>()
</script>
<template>
<div
tw="w-full h-full bg-white flex flex-col"
style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.92), rgba(231,230,255,0.86)), url(https://tachiyomi.org/img/open-graph-background.png)"
>
<div tw="p-10 w-full min-h-0 grow flex flex-col items-center justify-between">
<div tw="w-full flex justify-between items-center text-4xl font-medium">
<div tw="flex items-center">
<svg width="64" height="64" viewBox="0 0 288 288" preserveAspectRatio="xMidYMid meet" fill="#8995FF"><path d="M141.2 36.7l-18.3.3.8 9.8c.4 5.3.8 11.9.8 14.7v5h-41-41l.3 17.9.3 17.9 6.7-.7c15.2-1.4 101.5-1.8 146.2-.7l48 1.6c1.3.4 1.5-2 1.5-17.8V66.5l-38.3.4c-21 .2-39.8 0-41.8-.3l-3.5-.7.3-15c.3-12.8.1-14.9-1.2-14.7-.8.1-9.7.4-19.8.5zm-56.7 76.9c-12.8 5-16 6.7-15.8 8.1.1 1 2.2 7.3 4.7 14 5.8 15.3 12.4 38.4 16.6 57.8l3.5 15.3c.2.2 8.3-2.5 18.2-6l17.9-6.3-1.2-6c-3.5-16.8-24.8-83.6-26.7-83.4-.7.1-8.4 3-17.2 6.5zm93.6 10.1c-10.4 41.7-22.9 83.2-27.1 90.1l-1.9 3.1-17.3.3c-20 .3-91.3-.9-94.3-1.6-1.9-.5-2 0-2 18v18.6l5-.6c2.8-.3 51.8-.9 109-1.2l104-.7v-17.6-17.6l-8.5.7c-4.7.3-19.5.7-32.9.7-19.1.1-24.2-.2-23.8-1.2.3-.6 2.2-5 4.2-9.7 6.5-15.2 29.6-86.3 28.4-87.4-.4-.4-32.6-9.4-36.5-10.3-2-.4-2.4.7-6.3 16.4z" /></svg>
<div tw="text-slate-900 ml-2 mt-1 font-semibold">
Tachiyomi
</div>
</div>
<div v-if="dir" tw="flex items-center text-slate-600">
<div v-if="dir" tw="text-4xl font-semibold mr-2" v-html="dir" />
<svg v-if="dir === 'FAQ'" width="48" height="48" viewBox="0 -960 960 960" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M120-55.5q-15.5 0-26.5-11T82.5-93q0-15.5 11-26.5t26.5-11h720q15.5 0 26.5 11t11 26.5q0 15.5-11 26.5t-26.5 11H120ZM207-170q-15.5 0-26.5-11t-11-26.5v-193q-32.5-54-50.75-114.25T100.5-639.5q0-59 15.25-117.5t36.75-116q7.5-20 24.5-32.25t38-12.25q26.5 0 44.75 18.5T276-854.5l-5.5 92q-3 48.5 11 93t41.75 78Q351-558 391-537.75t89 20.25q59.5 0 116.5 11.5T697-471.5q43.5 23 68.25 58.5T790-326v118.5q0 15.5-11 26.5t-26.5 11h-355v-32q0-35 24-60.25T480-287.5h120q15.5 0 26.5-11t11-26.5q0-15.5-11-26.5t-26.5-11H480q-66 0-111.75 47T322.5-202v32H207Zm273-392.5q-65.5 0-111.5-46t-46-111.5q0-65.5 46-111.5t111.5-46q65.5 0 111.5 46t46 111.5q0 65.5-46 111.5t-111.5 46Z" /></svg>
<svg v-else-if="dir === 'Guide'" height="48" width="48" viewBox="0 -960 960 960" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M831-327.5V-558L516-386.5q-17 9-36 9t-36-9l-329.5-180q-10-5.5-14.5-14.25t-4.5-18.75q0-10 4.5-18.75t14.5-14.25l330-179.5q8.5-5 17.25-7t18.25-2q9.5 0 18.25 2t17.25 7l371 202q9 5 14.25 13.75T906-577v249.5q0 15.5-11 26.5t-26.5 11q-15.5 0-26.5-11t-11-26.5Zm-387 173-197-107q-18.5-10-28.75-27.75T208-328v-149.5L444-349q17 9 36 9t36-9l236-128.5V-328q0 21-10.25 38.75T713-261.5l-197 107q-8.5 5-17.5 7t-18.5 2q-9.5 0-18.5-2t-17.5-7Z" /></svg>
<svg v-else-if="dir === 'News'" height="48" width="48" viewBox="0 -960 960 960" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M157.5-122.5q-31 0-53-22t-22-53v-614q0-6.5 5.5-9t10.5 2.5l35.5 35.5q5.5 5.5 13 5.25t13-5.75l40-40q5.5-5.5 13-5.75t13 5.25l41 41q5.5 5.5 13 5.5t13-5.5l41-41q5.5-5.5 13-5.25t13 5.75l40 40q5.5 5.5 13 5.75t13-5.25l41-41q5.5-5.5 13-5.5t13 5.5l41 41q5.5 5.5 13 5.25t13-5.75l40-40q5.5-5.5 13-5.75t13 5.25l41 41q5.5 5.5 13 5.5t13-5.5l41-41q5.5-5.5 13-5.25t13 5.75l40 40q5.5 5.5 13 5.75t13-5.25l35.5-35.5q5-5 10.5-2.5t5.5 9v614q0 31-22 53t-53 22h-645Zm0-75h285v-245h-285v245Zm360 0h285v-85h-285v85Zm0-160h285v-85h-285v85Zm-360-160h645v-125h-645v125Z" /></svg>
</div>
</div>
<div tw="w-full pr-56 flex flex-col items-start justify-end">
<div tw="text-6xl font-bold text-slate-900" v-html="title" />
<div v-if="description" tw="mt-2 text-4xl text-slate-600" v-html="description" />
</div>
</div>
<div tw="shrink-0 h-2 w-full flex" style="background-color: #8995ff;" />
</div>
<div
tw="w-full h-full bg-white flex flex-col"
style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.92), rgba(231,230,255,0.86)), url(https://tachiyomi.org/img/open-graph-background.png)"
>
<div tw="p-10 w-full min-h-0 grow flex flex-col items-center justify-between">
<div tw="w-full flex justify-between items-center text-4xl font-medium">
<div tw="flex items-center">
<svg width="64" height="64" viewBox="0 0 288 288" preserveAspectRatio="xMidYMid meet" fill="#8995FF"><path d="M141.2 36.7l-18.3.3.8 9.8c.4 5.3.8 11.9.8 14.7v5h-41-41l.3 17.9.3 17.9 6.7-.7c15.2-1.4 101.5-1.8 146.2-.7l48 1.6c1.3.4 1.5-2 1.5-17.8V66.5l-38.3.4c-21 .2-39.8 0-41.8-.3l-3.5-.7.3-15c.3-12.8.1-14.9-1.2-14.7-.8.1-9.7.4-19.8.5zm-56.7 76.9c-12.8 5-16 6.7-15.8 8.1.1 1 2.2 7.3 4.7 14 5.8 15.3 12.4 38.4 16.6 57.8l3.5 15.3c.2.2 8.3-2.5 18.2-6l17.9-6.3-1.2-6c-3.5-16.8-24.8-83.6-26.7-83.4-.7.1-8.4 3-17.2 6.5zm93.6 10.1c-10.4 41.7-22.9 83.2-27.1 90.1l-1.9 3.1-17.3.3c-20 .3-91.3-.9-94.3-1.6-1.9-.5-2 0-2 18v18.6l5-.6c2.8-.3 51.8-.9 109-1.2l104-.7v-17.6-17.6l-8.5.7c-4.7.3-19.5.7-32.9.7-19.1.1-24.2-.2-23.8-1.2.3-.6 2.2-5 4.2-9.7 6.5-15.2 29.6-86.3 28.4-87.4-.4-.4-32.6-9.4-36.5-10.3-2-.4-2.4.7-6.3 16.4z" /></svg>
<div tw="text-slate-900 ml-2 mt-1 font-semibold">
Tachiyomi
</div>
</div>
<div v-if="dir" tw="flex items-center text-slate-600">
<div v-if="dir" tw="text-4xl font-semibold mr-2" v-html="dir" />
<svg v-if="dir === 'FAQ'" width="48" height="48" viewBox="0 -960 960 960" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M120-55.5q-15.5 0-26.5-11T82.5-93q0-15.5 11-26.5t26.5-11h720q15.5 0 26.5 11t11 26.5q0 15.5-11 26.5t-26.5 11H120ZM207-170q-15.5 0-26.5-11t-11-26.5v-193q-32.5-54-50.75-114.25T100.5-639.5q0-59 15.25-117.5t36.75-116q7.5-20 24.5-32.25t38-12.25q26.5 0 44.75 18.5T276-854.5l-5.5 92q-3 48.5 11 93t41.75 78Q351-558 391-537.75t89 20.25q59.5 0 116.5 11.5T697-471.5q43.5 23 68.25 58.5T790-326v118.5q0 15.5-11 26.5t-26.5 11h-355v-32q0-35 24-60.25T480-287.5h120q15.5 0 26.5-11t11-26.5q0-15.5-11-26.5t-26.5-11H480q-66 0-111.75 47T322.5-202v32H207Zm273-392.5q-65.5 0-111.5-46t-46-111.5q0-65.5 46-111.5t111.5-46q65.5 0 111.5 46t46 111.5q0 65.5-46 111.5t-111.5 46Z" /></svg>
<svg v-else-if="dir === 'Guide'" height="48" width="48" viewBox="0 -960 960 960" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M831-327.5V-558L516-386.5q-17 9-36 9t-36-9l-329.5-180q-10-5.5-14.5-14.25t-4.5-18.75q0-10 4.5-18.75t14.5-14.25l330-179.5q8.5-5 17.25-7t18.25-2q9.5 0 18.25 2t17.25 7l371 202q9 5 14.25 13.75T906-577v249.5q0 15.5-11 26.5t-26.5 11q-15.5 0-26.5-11t-11-26.5Zm-387 173-197-107q-18.5-10-28.75-27.75T208-328v-149.5L444-349q17 9 36 9t36-9l236-128.5V-328q0 21-10.25 38.75T713-261.5l-197 107q-8.5 5-17.5 7t-18.5 2q-9.5 0-18.5-2t-17.5-7Z" /></svg>
<svg v-else-if="dir === 'News'" height="48" width="48" viewBox="0 -960 960 960" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M157.5-122.5q-31 0-53-22t-22-53v-614q0-6.5 5.5-9t10.5 2.5l35.5 35.5q5.5 5.5 13 5.25t13-5.75l40-40q5.5-5.5 13-5.75t13 5.25l41 41q5.5 5.5 13 5.5t13-5.5l41-41q5.5-5.5 13-5.25t13 5.75l40 40q5.5 5.5 13 5.75t13-5.25l41-41q5.5-5.5 13-5.5t13 5.5l41 41q5.5 5.5 13 5.25t13-5.75l40-40q5.5-5.5 13-5.75t13 5.25l41 41q5.5 5.5 13 5.5t13-5.5l41-41q5.5-5.5 13-5.25t13 5.75l40 40q5.5 5.5 13 5.75t13-5.25l35.5-35.5q5-5 10.5-2.5t5.5 9v614q0 31-22 53t-53 22h-645Zm0-75h285v-245h-285v245Zm360 0h285v-85h-285v85Zm0-160h285v-85h-285v85Zm-360-160h645v-125h-645v125Z" /></svg>
</div>
</div>
<div tw="w-full pr-56 flex flex-col items-start justify-end">
<div tw="text-6xl font-bold text-slate-900" v-html="title" />
<div v-if="description" tw="mt-2 text-4xl text-slate-600" v-html="description" />
</div>
</div>
<div tw="shrink-0 h-2 w-full flex" style="background-color: #8995ff;" />
</div>
</template>

26
website/src/.vitepress/theme/components/ReleaseDate.vue
View File

@ -1,30 +1,30 @@
<script setup lang="ts">
import { computed, onMounted, ref, toRefs } from "vue"
import moment from "moment"
import { type AppRelease, data as release } from "../data/release.data"
import { computed, onMounted, ref, toRefs } from 'vue'
import moment from 'moment'
import { type AppRelease, data as release } from '../data/release.data'
const props = defineProps<{ type: keyof AppRelease }>()
const { type } = toRefs(props)
const momentInfo = computed(() => ({
relative: moment(release[type.value].published_at).fromNow(),
exact: moment(release[type.value].published_at).format("dddd, MMMM Do YYYY [at] HH:mm"),
iso: release[type.value].published_at ?? undefined,
relative: moment(release[type.value].published_at).fromNow(),
exact: moment(release[type.value].published_at).format('dddd, MMMM Do YYYY [at] HH:mm'),
iso: release[type.value].published_at ?? undefined,
}))
// Mimic the <ClientOnly /> behavior to show custom text while rendering.
const show = ref(false)
onMounted(() => {
show.value = true
show.value = true
})
</script>
<template>
<time v-if="show" :datetime="momentInfo.iso" :title="momentInfo.exact">
{{ momentInfo.relative }}
</time>
<time v-else :datetime="momentInfo.iso">
{{ momentInfo.exact }}
</time>
<time v-if="show" :datetime="momentInfo.iso" :title="momentInfo.exact">
{{ momentInfo.relative }}
</time>
<time v-else :datetime="momentInfo.iso">
{{ momentInfo.exact }}
</time>
</template>

22
website/src/.vitepress/theme/components/RssLink.vue
View File

@ -11,17 +11,17 @@ import { IconRssBox } from '@iconify-prerendered/vue-mdi'
<style lang="stylus" scoped>
.rss {
& > * {
vertical-align: middle
position: relative
bottom: 1px
}
& > * {
vertical-align: middle
position: relative
bottom: 1px
}
svg {
width: 1em
height: 1em
display: inline-block
margin-right: 4px
}
svg {
width: 1em
height: 1em
display: inline-block
margin-right: 4px
}
}
</style>

22
website/src/.vitepress/theme/data/changelogs.data.ts
View File

@ -1,6 +1,6 @@
import { defineLoader } from "vitepress"
import { Octokit } from "@octokit/rest"
import type { GetResponseDataTypeFromEndpointMethod } from "@octokit/types"
import { defineLoader } from 'vitepress'
import { Octokit } from '@octokit/rest'
import type { GetResponseDataTypeFromEndpointMethod } from '@octokit/types'
const octokit = new Octokit()
@ -10,13 +10,13 @@ declare const data: GitHubReleaseList
export { data }
export default defineLoader({
async load(): Promise<GitHubReleaseList> {
const releases = await octokit.paginate(octokit.repos.listReleases, {
owner: "tachiyomiorg",
repo: "tachiyomi",
per_page: 100,
})
async load(): Promise<GitHubReleaseList> {
const releases = await octokit.paginate(octokit.repos.listReleases, {
owner: 'tachiyomiorg',
repo: 'tachiyomi',
per_page: 100,
})
return releases
},
return releases
},
})

42
website/src/.vitepress/theme/data/news.data.ts
View File

@ -1,29 +1,29 @@
import { createContentLoader } from "vitepress"
import { createContentLoader } from 'vitepress'
export interface News {
title: string
description: string
date: string
url: string
title: string
description: string
date: string
url: string
}
declare const data: News[]
export { data }
export default createContentLoader("news/*.md", {
excerpt: true,
transform(articles) {
return articles
.filter(({ url }) => url !== "/news/")
.map(
({ frontmatter, url }) =>
<News>{
title: frontmatter.title,
description: frontmatter.description,
date: frontmatter.date,
url,
},
)
.sort((a, b) => b.date.localeCompare(a.date))
},
export default createContentLoader('news/*.md', {
excerpt: true,
transform(articles) {
return articles
.filter(({ url }) => url !== '/news/')
.map(
({ frontmatter, url }) =>
<News>{
title: frontmatter.title,
description: frontmatter.description,
date: frontmatter.date,
url,
},
)
.sort((a, b) => b.date.localeCompare(a.date))
},
})

32
website/src/.vitepress/theme/data/release.data.ts
View File

@ -1,31 +1,31 @@
import { defineLoader } from "vitepress"
import { Octokit } from "@octokit/rest"
import type { GetResponseDataTypeFromEndpointMethod } from "@octokit/types"
import { defineLoader } from 'vitepress'
import { Octokit } from '@octokit/rest'
import type { GetResponseDataTypeFromEndpointMethod } from '@octokit/types'
const octokit = new Octokit()
type GitHubRelease = GetResponseDataTypeFromEndpointMethod<typeof octokit.repos.getLatestRelease>
export interface AppRelease {
stable: GitHubRelease
preview: GitHubRelease
stable: GitHubRelease
preview: GitHubRelease
}
declare const data: AppRelease
export { data }
export default defineLoader({
async load(): Promise<AppRelease> {
const { data: stable } = await octokit.repos.getLatestRelease({
owner: "tachiyomiorg",
repo: "tachiyomi",
})
async load(): Promise<AppRelease> {
const { data: stable } = await octokit.repos.getLatestRelease({
owner: 'tachiyomiorg',
repo: 'tachiyomi',
})
const { data: preview } = await octokit.repos.getLatestRelease({
owner: "tachiyomiorg",
repo: "tachiyomi-preview",
})
const { data: preview } = await octokit.repos.getLatestRelease({
owner: 'tachiyomiorg',
repo: 'tachiyomi-preview',
})
return { stable, preview }
},
return { stable, preview }
},
})

36
website/src/.vitepress/theme/index.ts
View File

@ -1,31 +1,31 @@
// https://vitepress.dev/guide/custom-theme
import DefaultTheme from "vitepress/theme"
import DefaultTheme from 'vitepress/theme'
// Import Stylus files
import "./styles/base.styl"
import './styles/base.styl'
// Import Global plugins
import "element-plus/theme-chalk/dark/css-vars.css"
import 'element-plus/theme-chalk/dark/css-vars.css'
import { VueQueryPlugin } from "@tanstack/vue-query"
import { VueQueryPlugin } from '@tanstack/vue-query'
import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client"
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
// Import icon components
import { IconBugReport, IconDownload, IconNewspaperVariant } from "@iconify-prerendered/vue-mdi"
import { IconBugReport, IconDownload, IconNewspaperVariant } from '@iconify-prerendered/vue-mdi'
import analytics from "./plugin/analytics"
import Layout from "./Layout.vue"
import analytics from './plugin/analytics'
import Layout from './Layout.vue'
export default {
extends: DefaultTheme,
enhanceApp({ app }) {
app.use(VueQueryPlugin)
enhanceAppWithTabs(app)
app.component("IconDownload", IconDownload)
app.component("IconNewspaperVariant", IconNewspaperVariant)
app.component("IconBugReport", IconBugReport)
analytics({ id: "G-2CBXXM1Y86" })
},
Layout,
extends: DefaultTheme,
enhanceApp({ app }) {
app.use(VueQueryPlugin)
enhanceAppWithTabs(app)
app.component('IconDownload', IconDownload)
app.component('IconNewspaperVariant', IconNewspaperVariant)
app.component('IconBugReport', IconBugReport)
analytics({ id: 'G-2CBXXM1Y86' })
},
Layout,
}

42
website/src/.vitepress/theme/plugin/analytics.ts
View File

@ -3,35 +3,33 @@
// https://github.com/ZhongxuYang/vitepress-plugin-google-analytics
function mountGoogleAnalytics(id: string) {
if (("dataLayer" in window && window.gtag) || window.location.hostname === "localhost") {
return
}
if (('dataLayer' in window && window.gtag) || window.location.hostname === 'localhost')
return
const analyticsScript = document.createElement("script")
const analyticsScript = document.createElement('script')
analyticsScript.addEventListener("load", () => {
// @ts-expect-error Missing types
window.dataLayer = window.dataLayer || []
function gtag(..._args: any[]) {
// @ts-expect-error Missing types
// eslint-disable-next-line prefer-rest-params
window.dataLayer.push(arguments)
}
analyticsScript.addEventListener('load', () => {
// @ts-expect-error Missing types
window.dataLayer = window.dataLayer || []
function gtag(..._args: any[]) {
// @ts-expect-error Missing types
// eslint-disable-next-line prefer-rest-params
window.dataLayer.push(arguments)
}
gtag("js", new Date())
gtag("config", id)
gtag('js', new Date())
gtag('config', id)
window.gtag = gtag
})
window.gtag = gtag
})
analyticsScript.src = `https://www.googletagmanager.com/gtag/js?id=${id}`
analyticsScript.src = `https://www.googletagmanager.com/gtag/js?id=${id}`
document.body.appendChild(analyticsScript)
document.body.appendChild(analyticsScript)
}
export default function ({ id }: { id: string }) {
// eslint-disable-next-line n/prefer-global/process
if (process.env.NODE_ENV === "production" && id && typeof window !== "undefined") {
mountGoogleAnalytics(id)
}
// eslint-disable-next-line node/prefer-global/process
if (process.env.NODE_ENV === 'production' && id && typeof window !== 'undefined')
mountGoogleAnalytics(id)
}

62
website/src/.vitepress/theme/queries/useExtensionsRepositoryQuery.ts
View File

@ -1,44 +1,44 @@
import type { UseQueryOptions } from "@tanstack/vue-query"
import { useQuery } from "@tanstack/vue-query"
import axios from "axios"
import { GITHUB_EXTENSION_JSON } from "../../config/constants"
import type { UseQueryOptions } from '@tanstack/vue-query'
import { useQuery } from '@tanstack/vue-query'
import axios from 'axios'
import { GITHUB_EXTENSION_JSON } from '../../config/constants'
export type ReleaseType = "stable" | "preview"
export type ReleaseType = 'stable' | 'preview'
export interface Extension {
name: string
pkg: string
apk: string
lang: string
code: number
version: string
nsfw: number
hasReadme: number
hasChangelog: number
sources: Source[]
name: string
pkg: string
apk: string
lang: string
code: number
version: string
nsfw: number
hasReadme: number
hasChangelog: number
sources: Source[]
}
export interface Source {
name: string
lang: string
id: string
baseUrl: string
versionId: number
name: string
lang: string
id: string
baseUrl: string
versionId: number
}
type UseExtensionsRepositoryQueryOptions<S = Extension[]> =
UseQueryOptions<Extension[], Error, S>
UseQueryOptions<Extension[], Error, S>
export default function useExtensionsRepositoryQuery<S = Extension[]>(options: UseExtensionsRepositoryQueryOptions<S> = {}) {
return useQuery<Extension[], Error, S>({
queryKey: ["extensions"],
queryFn: async () => {
const { data } = await axios.get<Extension[]>(GITHUB_EXTENSION_JSON)
return useQuery<Extension[], Error, S>({
queryKey: ['extensions'],
queryFn: async () => {
const { data } = await axios.get<Extension[]>(GITHUB_EXTENSION_JSON)
return data
},
initialData: () => [],
refetchOnWindowFocus: false,
...options,
})
return data
},
initialData: () => [],
refetchOnWindowFocus: false,
...options,
})
}

244
website/src/.vitepress/theme/styles/base.styl
View File

@ -10,14 +10,14 @@
$themeColor = #818cf8
:root {
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
}
/**
@ -25,23 +25,23 @@ $themeColor = #818cf8
* -------------------------------------------------------------------------- */
html:not(.dark) {
img[data-mode="darkmode-only"] {
display: none !important
img[data-mode="darkmode-only"] {
display: none !important
& + figcaption {
display: none !important
}
}
& + figcaption {
display: none !important
}
}
}
.dark {
img[data-mode="lightmode-only"] {
display: none !important
img[data-mode="lightmode-only"] {
display: none !important
& + figcaption {
display: none !important
}
}
& + figcaption {
display: none !important
}
}
}
/**
@ -49,7 +49,7 @@ html:not(.dark) {
* -------------------------------------------------------------------------- */
:root {
--vp-button-brand-bg: var(--vp-c-brand-darker)
--vp-button-brand-bg: var(--vp-c-brand-darker)
}
/**
@ -57,32 +57,32 @@ html:not(.dark) {
* -------------------------------------------------------------------------- */
:root {
--vp-home-hero-name-color: transparent
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-light) 50%, var(--vp-c-brand-lighter) 50%)
--vp-home-hero-image-filter: blur(40px)
--vp-home-hero-name-color: transparent
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-light) 50%, var(--vp-c-brand-lighter) 50%)
--vp-home-hero-image-filter: blur(40px)
}
.dark {
--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-darker) 25%, var(--vp-c-brand-darkest) 25%)
--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-darker) 25%, var(--vp-c-brand-darkest) 25%)
}
@media (min-width 640px) {
:root {
--vp-home-hero-image-filter: blur(56px)
}
:root {
--vp-home-hero-image-filter: blur(56px)
}
}
@media (min-width 960px) {
:root {
--vp-home-hero-image-filter: blur(72px)
}
:root {
--vp-home-hero-image-filter: blur(72px)
}
}
.VPFooter {
.divider {
color: var(--vp-c-divider)
}
.divider {
color: var(--vp-c-divider)
}
}
/**
@ -90,22 +90,22 @@ html:not(.dark) {
* -------------------------------------------------------------------------- */
:root {
--vp-custom-block-tip-border: var(--vp-c-brand)
--vp-custom-block-tip-text: var(--vp-c-brand-darker)
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm)
--vp-custom-block-tip-border: var(--vp-c-brand)
--vp-custom-block-tip-text: var(--vp-c-brand-darker)
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm)
}
.dark {
--vp-custom-block-tip-border: var(--vp-c-brand)
--vp-custom-block-tip-text: var(--vp-c-brand-lightest)
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm)
--vp-custom-block-info-bg: #212127
--vp-custom-block-tip-border: var(--vp-c-brand)
--vp-custom-block-tip-text: var(--vp-c-brand-lightest)
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm)
--vp-custom-block-info-bg: #212127
}
.plugin-tabs {
&--content {
padding: 2rem !important
}
&--content {
padding: 2rem !important
}
}
/**
@ -113,11 +113,11 @@ html:not(.dark) {
* -------------------------------------------------------------------------- */
.DocSearch {
--docsearch-primary-color: var(--vp-c-brand) !important
--docsearch-primary-color: var(--vp-c-brand) !important
}
.VPImage.image-src {
border-radius: 8px
border-radius: 8px
}
/**
@ -125,12 +125,12 @@ html:not(.dark) {
*/
.VPLocalSearchBox {
--vp-local-search-highlight-bg: var(--vp-c-brand-soft)
--vp-local-search-highlight-text: var(--vp-c-brand-dark)
--vp-local-search-highlight-bg: var(--vp-c-brand-soft)
--vp-local-search-highlight-text: var(--vp-c-brand-dark)
}
.dark .VPLocalSearchBox {
--vp-local-search-highlight-text: var(--vp-c-brand-lightest)
--vp-local-search-highlight-text: var(--vp-c-brand-lightest)
}
/**
@ -140,39 +140,39 @@ html:not(.dark) {
// Shitty method to give elevation to image - TO BE REPLACED
main figure {
margin: 2rem 0
transition: transform var(--vp-tt)
margin: 2rem 0
transition: transform var(--vp-tt)
img {
margin: 0 auto
border-radius: 12px
box-shadow: 2px 2px 8px 4px var(--vp-c-bg-alt)
}
img {
margin: 0 auto
border-radius: 12px
box-shadow: 2px 2px 8px 4px var(--vp-c-bg-alt)
}
figcaption {
text-align: center
margin-top: 1.25rem
font-size: 0.875rem
color: var(--vp-c-text-2)
}
figcaption {
text-align: center
margin-top: 1.25rem
font-size: 0.875rem
color: var(--vp-c-text-2)
}
& > a .external-link-icon {
display: none
}
& > a .external-link-icon {
display: none
}
}
main :where(h1, h2, h3, h4, h5, h6) + figure {
margin-top: 1.5rem
margin-top: 1.5rem
}
.custom-block {
figure figcaption {
color: inherit
}
figure figcaption {
color: inherit
}
&.tip figure img {
--vp-c-bg-alt: var(--vp-custom-block-tip-bg)
}
&.tip figure img {
--vp-c-bg-alt: var(--vp-custom-block-tip-bg)
}
}
/**
@ -180,19 +180,19 @@ main :where(h1, h2, h3, h4, h5, h6) + figure {
* -------------------------------------------------------------------------- */
@media print {
figure:has(img)>a[href^="http://"]:after,
figure:has(img)>a[href^="https://"]:after {
content: ""
}
figure:has(img)>a[href^="http://"]:after,
figure:has(img)>a[href^="https://"]:after {
content: ""
}
}
.vp-doc a {
text-decoration: none
text-decoration: none
&:hover {
text-decoration: underline
text-underline-offset: 2px
}
&:hover {
text-decoration: underline
text-underline-offset: 2px
}
}
/**
@ -200,28 +200,28 @@ main :where(h1, h2, h3, h4, h5, h6) + figure {
* -------------------------------------------------------------------------- */
.navigation {
color: var(--vp-c-green-2)
font-weight: 600
color: var(--vp-c-green-2)
font-weight: 600
&:hover {
color: var(--vp-c-green-1)
cursor: default
}
&:hover {
color: var(--vp-c-green-1)
cursor: default
}
svg,
span.name {
vertical-align: middle // Align both SVG and <span> vertically
position: relative
bottom: 1px
}
svg,
span.name {
vertical-align: middle // Align both SVG and <span> vertically
position: relative
bottom: 1px
}
svg {
fill: currentColor
height: 1em
width: 1em
display: inline-block
margin-right: 4px
}
svg {
fill: currentColor
height: 1em
width: 1em
display: inline-block
margin-right: 4px
}
}
/**
@ -229,7 +229,7 @@ main :where(h1, h2, h3, h4, h5, h6) + figure {
*/
body {
--el-color-primary: var(--vp-c-brand-1)
--el-color-primary: var(--vp-c-brand-1)
}
/**
@ -237,15 +237,15 @@ body {
*/
.menu + .appearance::before {
margin-right: 8px !important
margin-right: 8px !important
}
.appearance + .social-links::before {
margin-left: 8px !important
margin-left: 8px !important
}
.VPMenu .CustomSwitchAppearance {
margin-right: -8px
margin-right: -8px
}
/**
@ -253,26 +253,26 @@ body {
*/
.forks .VPFeatures {
padding: 2rem 0 !important
padding: 2rem 0 !important
.VPLink:hover {
text-decoration: none
}
.VPLink:hover {
text-decoration: none
}
.title {
line-height: 24px
font-size: 16px
font-weight: 600
margin: 0
border-top: none
padding-top: 0
letter-spacing: 0
color: var(--vp-c-text-1)
}
.title {
line-height: 24px
font-size: 16px
font-weight: 600
margin: 0
border-top: none
padding-top: 0
letter-spacing: 0
color: var(--vp-c-text-1)
}
}
@media (min-width 640px) {
.forks .item.grid-4 {
width: 50% !important
}
.forks .item.grid-4 {
width: 50% !important
}
}

14
website/src/.vitepress/theme/styles/forks/lint.styl
View File

@ -1,9 +1,9 @@
.extension-list {
> div {
&:not(:first-of-type) {
.extensions-total {
display: none
}
}
}
> div {
&:not(:first-of-type) {
.extensions-total {
display: none
}
}
}
}

74
website/src/.vitepress/theme/styles/forks/neko.styl
View File

@ -2,29 +2,29 @@
$themeColor = #ff6884
.page-neko {
.VPHero {
h1 {
.clip {
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
}
}
}
.VPHero {
h1 {
.clip {
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
}
}
}
.VPButton {
&.brand {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
}
}
.VPButton {
&.brand {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
}
}
.image-bg {
display: none
}
.image-bg {
display: none
}
::selection {
background: alpha($themeColor, 0.2)
}
::selection {
background: alpha($themeColor, 0.2)
}
}
@ -33,14 +33,14 @@ $themeColor = #ff6884
* -------------------------------------------------------------------------- */
:root .page-neko {
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
}
/**
@ -48,13 +48,13 @@ $themeColor = #ff6884
* -------------------------------------------------------------------------- */
:root .page-neko {
--vp-button-brand-border: var(--vp-c-brand-light)
--vp-button-brand-text: var(--vp-c-black)
--vp-button-brand-bg: var(--vp-c-brand)
--vp-button-brand-hover-border: var(--vp-c-brand-light)
--vp-button-brand-hover-text: var(--vp-c-black)
--vp-button-brand-hover-bg: var(--vp-c-brand-light)
--vp-button-brand-active-border: var(--vp-c-brand-light)
--vp-button-brand-active-text: var(--vp-c-black)
--vp-button-brand-active-bg: var(--vp-button-brand-bg)
--vp-button-brand-border: var(--vp-c-brand-light)
--vp-button-brand-text: var(--vp-c-black)
--vp-button-brand-bg: var(--vp-c-brand)
--vp-button-brand-hover-border: var(--vp-c-brand-light)
--vp-button-brand-hover-text: var(--vp-c-black)
--vp-button-brand-hover-bg: var(--vp-c-brand-light)
--vp-button-brand-active-border: var(--vp-c-brand-light)
--vp-button-brand-active-text: var(--vp-c-black)
--vp-button-brand-active-bg: var(--vp-button-brand-bg)
}

268
website/src/.vitepress/theme/styles/forks/tachiyomi-az.styl
View File

@ -2,29 +2,29 @@
$themeColor = #ffcc4d
.page-tachiyomi-az {
.VPHero {
h1 {
.clip {
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
}
}
}
.VPHero {
h1 {
.clip {
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
}
}
}
.VPButton {
&.brand {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
}
}
.VPButton {
&.brand {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
}
}
.image-bg {
display: none
}
.image-bg {
display: none
}
::selection {
background: alpha($themeColor, 0.2)
}
::selection {
background: alpha($themeColor, 0.2)
}
}
@ -33,14 +33,14 @@ $themeColor = #ffcc4d
* -------------------------------------------------------------------------- */
:root .page-tachiyomi-az {
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
}
/**
@ -48,156 +48,156 @@ $themeColor = #ffcc4d
* -------------------------------------------------------------------------- */
:root .page-tachiyomi-az {
--vp-button-brand-border: var(--vp-c-brand-light)
--vp-button-brand-text: var(--vp-c-black)
--vp-button-brand-bg: var(--vp-c-brand)
--vp-button-brand-hover-border: var(--vp-c-brand-light)
--vp-button-brand-hover-text: var(--vp-c-black)
--vp-button-brand-hover-bg: var(--vp-c-brand-light)
--vp-button-brand-active-border: var(--vp-c-brand-light)
--vp-button-brand-active-text: var(--vp-c-black)
--vp-button-brand-active-bg: var(--vp-button-brand-bg)
--vp-button-brand-border: var(--vp-c-brand-light)
--vp-button-brand-text: var(--vp-c-black)
--vp-button-brand-bg: var(--vp-c-brand)
--vp-button-brand-hover-border: var(--vp-c-brand-light)
--vp-button-brand-hover-text: var(--vp-c-black)
--vp-button-brand-hover-bg: var(--vp-c-brand-light)
--vp-button-brand-active-border: var(--vp-c-brand-light)
--vp-button-brand-active-text: var(--vp-c-black)
--vp-button-brand-active-bg: var(--vp-button-brand-bg)
}
/**
* Component: Dumb
* -------------------------------------------------------------------------- */
@font-face {
font-family: 'Comic Sans MS'
src: url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.eot')
src: url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.eot?#iefix') format('embedded-opentype'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.woff2') format('woff2'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.woff') format('woff'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.ttf') format('truetype'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.svg#Comic Sans MS') format('svg')
font-family: 'Comic Sans MS'
src: url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.eot')
src: url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.eot?#iefix') format('embedded-opentype'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.woff2') format('woff2'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.woff') format('woff'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.ttf') format('truetype'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.svg#Comic Sans MS') format('svg')
}
.azContainer {
width: 100%
overflow: hidden
width: 100%
overflow: hidden
.azMarquee {
display: inline-block
overflow: hidden
white-space: nowrap
animation: marquee 10s linear infinite
padding-left: 100%
.azMarquee {
display: inline-block
overflow: hidden
white-space: nowrap
animation: marquee 10s linear infinite
padding-left: 100%
.azWiggleText {
padding: 2em
width: fit-content
animation: wiggleAnimation 1s ease-out infinite
.azWiggleText {
padding: 2em
width: fit-content
animation: wiggleAnimation 1s ease-out infinite
&:hover {
animation: barrelRollAnimation 0.6s
}
&:hover {
animation: barrelRollAnimation 0.6s
}
.azText {
font-family: 'Comic Sans MS', 'Comic Sans', cursive
font-size: 2em
display: inline-block
-webkit-text-stroke: 1px black
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
animation: rainbowTextColorAnimation 0.5s linear infinite, scaleXTextAnimation 2s infinite
}
}
}
.azText {
font-family: 'Comic Sans MS', 'Comic Sans', cursive
font-size: 2em
display: inline-block
-webkit-text-stroke: 1px black
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
animation: rainbowTextColorAnimation 0.5s linear infinite, scaleXTextAnimation 2s infinite
}
}
}
}
@keyframes marquee {
0% {
transform: translate(0, 0)
}
0% {
transform: translate(0, 0)
}
100% {
transform: translate(-100%, 0)
}
100% {
transform: translate(-100%, 0)
}
}
@keyframes barrelRollAnimation {
from {
transform: rotate(0)
}
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
to {
transform: rotate(360deg)
}
}
@keyframes wiggleAnimation {
0% {
transform: rotate(0)
}
0% {
transform: rotate(0)
}
25% {
transform: rotate(-15deg)
}
25% {
transform: rotate(-15deg)
}
50% {
transform: rotate(0)
}
50% {
transform: rotate(0)
}
75% {
transform: rotate(15deg)
}
75% {
transform: rotate(15deg)
}
100% {
transform: rotate(0)
}
100% {
transform: rotate(0)
}
}
@keyframes scaleXTextAnimation {
0% {
transform: scaleX(0.5) scaleY(0.5)
}
0% {
transform: scaleX(0.5) scaleY(0.5)
}
50% {
transform: scaleX(1) scaleY(1)
}
50% {
transform: scaleX(1) scaleY(1)
}
100% {
transform: scaleX(0.5) scaleY(0.5)
}
100% {
transform: scaleX(0.5) scaleY(0.5)
}
}
@keyframes rainbowTextColorAnimation {
0% {
color: hsl(0, 100%, 50%)
}
0% {
color: hsl(0, 100%, 50%)
}
10% {
color: hsl(36, 100%, 50%)
}
10% {
color: hsl(36, 100%, 50%)
}
20% {
color: hsl(72, 100%, 50%)
}
20% {
color: hsl(72, 100%, 50%)
}
30% {
color: hsl(108, 100%, 50%)
}
30% {
color: hsl(108, 100%, 50%)
}
40% {
color: hsl(144, 100%, 50%)
}
40% {
color: hsl(144, 100%, 50%)
}
50% {
color: hsl(180, 100%, 50%)
}
50% {
color: hsl(180, 100%, 50%)
}
60% {
color: hsl(216, 100%, 50%)
}
60% {
color: hsl(216, 100%, 50%)
}
70% {
color: hsl(252, 100%, 50%)
}
70% {
color: hsl(252, 100%, 50%)
}
80% {
color: hsl(288, 100%, 50%)
}
80% {
color: hsl(288, 100%, 50%)
}
90% {
color: hsl(324, 100%, 50%)
}
90% {
color: hsl(324, 100%, 50%)
}
100% {
color: hsl(360, 100%, 50%)
}
100% {
color: hsl(360, 100%, 50%)
}
}

74
website/src/.vitepress/theme/styles/forks/tachiyomi-j2k.styl
View File

@ -2,29 +2,29 @@
$themeColor = #0952af
.page-tachiyomi-j2k {
.VPHero {
h1 {
.clip {
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
}
}
}
.VPHero {
h1 {
.clip {
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
}
}
}
.VPButton {
&.brand {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
}
}
.VPButton {
&.brand {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
}
}
.image-bg {
display: none
}
.image-bg {
display: none
}
::selection {
background: alpha($themeColor, 0.2)
}
::selection {
background: alpha($themeColor, 0.2)
}
}
@ -33,14 +33,14 @@ $themeColor = #0952af
* -------------------------------------------------------------------------- */
:root .page-tachiyomi-j2k {
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
}
/**
@ -48,13 +48,13 @@ $themeColor = #0952af
* -------------------------------------------------------------------------- */
:root .page-tachiyomi-j2k {
--vp-button-brand-border: var(--vp-c-brand-light)
--vp-button-brand-text: var(--vp-c-white)
--vp-button-brand-bg: var(--vp-c-brand)
--vp-button-brand-hover-border: var(--vp-c-brand-light)
--vp-button-brand-hover-text: var(--vp-c-white)
--vp-button-brand-hover-bg: var(--vp-c-brand-light)
--vp-button-brand-active-border: var(--vp-c-brand-light)
--vp-button-brand-active-text: var(--vp-c-white)
--vp-button-brand-active-bg: var(--vp-button-brand-bg)
--vp-button-brand-border: var(--vp-c-brand-light)
--vp-button-brand-text: var(--vp-c-white)
--vp-button-brand-bg: var(--vp-c-brand)
--vp-button-brand-hover-border: var(--vp-c-brand-light)
--vp-button-brand-hover-text: var(--vp-c-white)
--vp-button-brand-hover-bg: var(--vp-c-brand-light)
--vp-button-brand-active-border: var(--vp-c-brand-light)
--vp-button-brand-active-text: var(--vp-c-white)
--vp-button-brand-active-bg: var(--vp-button-brand-bg)
}

74
website/src/.vitepress/theme/styles/forks/tachiyomi-sy.styl
View File

@ -2,29 +2,29 @@
$themeColor = #ce2828
.page-tachiyomi-sy {
.VPHero {
h1 {
.clip {
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
}
}
}
.VPHero {
h1 {
.clip {
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
}
}
}
.VPButton {
&.brand {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
}
}
.VPButton {
&.brand {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
}
}
.image-bg {
display: none
}
.image-bg {
display: none
}
::selection {
background: alpha($themeColor, 0.2)
}
::selection {
background: alpha($themeColor, 0.2)
}
}
@ -33,14 +33,14 @@ $themeColor = #ce2828
* -------------------------------------------------------------------------- */
:root .page-tachiyomi-sy {
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
--vp-c-brand: $themeColor
--vp-c-brand-light: tint($themeColor, 20%)
--vp-c-brand-lighter: tint($themeColor, 40%)
--vp-c-brand-lightest: tint($themeColor, 60%)
--vp-c-brand-dark: shade($themeColor, 25%)
--vp-c-brand-darker: shade($themeColor, 50%)
--vp-c-brand-darkest: shade($themeColor, 75%)
--vp-c-brand-dimm: alpha($themeColor, 0.08)
}
/**
@ -48,13 +48,13 @@ $themeColor = #ce2828
* -------------------------------------------------------------------------- */
:root .page-tachiyomi-sy {
--vp-button-brand-border: var(--vp-c-brand-light)
--vp-button-brand-text: var(--vp-c-white)
--vp-button-brand-bg: var(--vp-c-brand)
--vp-button-brand-hover-border: var(--vp-c-brand-light)
--vp-button-brand-hover-text: var(--vp-c-white)
--vp-button-brand-hover-bg: var(--vp-c-brand-light)
--vp-button-brand-active-border: var(--vp-c-brand-light)
--vp-button-brand-active-text: var(--vp-c-white)
--vp-button-brand-active-bg: var(--vp-button-brand-bg)
--vp-button-brand-border: var(--vp-c-brand-light)
--vp-button-brand-text: var(--vp-c-white)
--vp-button-brand-bg: var(--vp-c-brand)
--vp-button-brand-hover-border: var(--vp-c-brand-light)
--vp-button-brand-hover-text: var(--vp-c-white)
--vp-button-brand-hover-bg: var(--vp-c-brand-light)
--vp-button-brand-active-border: var(--vp-c-brand-light)
--vp-button-brand-active-text: var(--vp-c-white)
--vp-button-brand-active-bg: var(--vp-button-brand-bg)
}

164
website/src/.vitepress/theme/styles/tree.styl
View File

@ -1,99 +1,99 @@
.tree {
border-radius: 8px
margin: 16px
padding: 16px
color: var(--vp-c-text-1)
// background-color: var(--vp-code-block-bg)
font-family: var(--vp-font-family-mono)
font-size: 0.85rem
line-height: 1.5
border-radius: 8px
margin: 16px
padding: 16px
color: var(--vp-c-text-1)
// background-color: var(--vp-code-block-bg)
font-family: var(--vp-font-family-mono)
font-size: 0.85rem
line-height: 1.5
& > ul {
margin: 0
}
& > ul {
margin: 0
}
li {
& + li {
margin-top: 0
}
}
li {
& + li {
margin-top: 0
}
}
span {
&.folder {
&.root,
&.main {
color: var(--vp-c-brand-darker)
}
}
span {
&.folder {
&.root,
&.main {
color: var(--vp-c-brand-darker)
}
}
&.file.zip {
color: var(--vp-c-brand-darker) !important
}
&.file.zip {
color: var(--vp-c-brand-darker) !important
}
&.file {
.file-extension {
color: var(--vp-c-text-2)
}
}
}
&.file {
.file-extension {
color: var(--vp-c-text-2)
}
}
}
ul {
padding-left: 5px
list-style: none
ul {
padding-left: 5px
list-style: none
li {
position: relative
padding-left: 15px
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
li {
position: relative
padding-left: 15px
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
&:before {
top: 15px
left: 0
width: 10px
height: 1px
margin: auto
}
&:before {
top: 15px
left: 0
width: 10px
height: 1px
margin: auto
}
&:after {
top: 0
bottom: 0
left: 0
width: 1px
height: 100%
}
&:after {
top: 0
bottom: 0
left: 0
width: 1px
height: 100%
}
&:before,
&:after {
position: absolute
content: ''
background-color: var(--vp-c-text-3)
}
&:before,
&:after {
position: absolute
content: ''
background-color: var(--vp-c-text-3)
}
&:last-child {
&:after {
height: 15px
}
}
}
}
&:last-child {
&:after {
height: 15px
}
}
}
}
&-icon {
height: 12px
width: 12px
margin-right: 6px
display: inline-block
}
&-icon {
height: 12px
width: 12px
margin-right: 6px
display: inline-block
}
}
.dark {
.tree {
span {
&.folder,
&.file.zip {
color: var(--vp-c-brand-lighter) !important
}
}
}
.tree {
span {
&.folder,
&.file.zip {
color: var(--vp-c-brand-lighter) !important
}
}
}
}

4
website/src/.vitepress/vue-shim.d.ts vendored
View File

@ -1,5 +1,5 @@
declare module "*.vue" {
import type { Component } from "vue"
declare module '*.vue' {
import type { Component } from 'vue'
const _default: Component
export default _default