### Custom Container Examples (Markdown)

Source: https://github.com/keiyoushi/keiyoushi.github.io/blob/main/website/sandbox/markdown-examples.md

Illustrates the usage of custom container markdown syntax in VitePress. These containers allow for visually distinct blocks like info, tip, warning, danger, and details. They are defined using ::: followed by the type and content, ending with :::.

```markdown
::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::
```

--------------------------------

### Access Site, Theme, and Page Data with useData() in Vue

Source: https://github.com/keiyoushi/keiyoushi.github.io/blob/main/website/sandbox/api-examples.md

This example demonstrates using the `useData()` hook within a Vue component to retrieve site, theme, page, and frontmatter data. It requires importing `useData` from 'vitepress'. The results are displayed in preformatted text tags.

```vue
<script setup>
import { useData } from 'vitepress'

const { site, theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>
```

--------------------------------

### Syntax Highlighting with Line Highlighting (JavaScript)

Source: https://github.com/keiyoushi/keiyoushi.github.io/blob/main/website/sandbox/markdown-examples.md

Demonstrates syntax highlighting for JavaScript code with a specific line highlighted. This feature is powered by Shikiji and integrated into VitePress. It takes markdown code blocks as input and renders them with specified line highlighting.

```javascript
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

--------------------------------

### Access Site, Theme, and Page Data with useData() in Markdown

Source: https://github.com/keiyoushi/keiyoushi.github.io/blob/main/website/sandbox/api-examples.md

This snippet shows how to use the `useData()` hook within a Markdown file to access theme, page, and frontmatter data. It requires importing `useData` from 'vitepress'. The output displays the retrieved data.

```markdown
<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>
```

--------------------------------

### Extension Repository Constants in TypeScript

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

Defines constants for GitHub repository URLs used to fetch extension data and APK files. These constants are crucial for constructing correct URLs for extension icons and APK downloads. The code includes usage examples for clarity.

```typescript
export const GITHUB_EXTENSION_REPO = 'keiyoushi/extensions';
export const GITHUB_EXTENSION_BASE = `https://raw.githubusercontent.com/${GITHUB_EXTENSION_REPO}/repo`;
export const GITHUB_EXTENSION_JSON = `${GITHUB_EXTENSION_BASE}/index.json`;
export const GITHUB_EXTENSION_MIN_JSON = `${GITHUB_EXTENSION_BASE}/index.min.json`;
export const JSDELIVR_EXTENSION_MIN_JSON = `https://cdn.jsdelivr.net/gh/${GITHUB_EXTENSION_REPO}@repo/index.min.json`;

// Usage example - constructing URLs for extension assets:
const extensionPkg = 'eu.kanade.tachiyomi.extension.en.mangadex';
const iconUrl = `${GITHUB_EXTENSION_BASE}/icon/${extensionPkg}.png`;
// Result: https://raw.githubusercontent.com/keiyoushi/extensions/repo/icon/eu.kanade.tachiyomi.extension.en.mangadex.png

const apkName = 'tachiyomi-en.mangadex-v1.4.2.apk';
const apkUrl = `${GITHUB_EXTENSION_BASE}/apk/${apkName}`;
// Result: https://raw.githubusercontent.com/keiyoushi/extensions/repo/apk/tachiyomi-en.mangadex-v1.4.2.apk
```

--------------------------------

### Add Repository Page with Deep Linking

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

Handles redirection for the 'add-repo' page. It detects Android users and redirects them to add an extension repository via a deep link to the Mihon/Tachiyomi app. Non-Android users are shown a message with a manual link.

```vue
<!-- website/add-repo.md (as Vue SFC) -->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { GITHUB_EXTENSION_MIN_JSON, JSDELIVR_EXTENSION_MIN_JSON } from "./.vitepress/config/constants";

const isAndroid = ref(true);
const url = ref(GITHUB_EXTENSION_MIN_JSON);
const officialRepos = [GITHUB_EXTENSION_MIN_JSON, JSDELIVR_EXTENSION_MIN_JSON];

onMounted(() => {
  isAndroid.value = !!navigator.userAgent.match(/android/i);
  const urlParam = new URLSearchParams(window.location.search).get("url") || GITHUB_EXTENSION_MIN_JSON;

  // Security: Only allow official repository URLs
  if (!officialRepos.includes(urlParam)) {
    window.location.replace("/");
    return;
  }

  url.value = urlParam;
  const encodedUrl = encodeURIComponent(urlParam);

  if (isAndroid.value) {
    // Track analytics before redirect
    window.goatcounter?.count?.({
      path: "/#add-to-tachiyomi",
      title: "Add extension repository",
    });
    // Deep link redirect to Mihon/Tachiyomi app
    window.location.replace(`tachiyomi://add-repo?url=${encodedUrl}`);
  }
});
</script>

<template>
  <div v-if="isAndroid">
    You should be redirected to Mihon in a moment. Refresh the page if it doesn't work,
    or add the repo manually using this link:
  </div>
  <div v-else>
    Unsupported operating system. Mihon is an <strong>Android</strong> app only.
    Please add the repo manually using this link:
  </div>
  <a :href="url">{{ url }}</a>
</template>

```

--------------------------------

### Vue.js Script for Adding Repository (TypeScript)

Source: https://github.com/keiyoushi/keiyoushi.github.io/blob/main/website/add-repo.md

This script, written in Vue.js with TypeScript, handles the logic for adding a repository. It checks for Android devices, constructs the appropriate URL, and attempts to redirect the user to the Mihon app. It also includes fallback mechanisms and validation for official repositories.

```typescript
import { onMounted, ref } from "vue";
import { GITHUB_EXTENSION_MIN_JSON, JSDELIVR_EXTENSION_MIN_JSON } from "./.vitepress/config/constants";

const isAndroid = ref(true);
const url = ref(GITHUB_EXTENSION_MIN_JSON);
const officialRepos = [GITHUB_EXTENSION_MIN_JSON, JSDELIVR_EXTENSION_MIN_JSON]

onMounted(() => {
    isAndroid.value = !!navigator.userAgent.match(/android/i);
    const urlParm = new URLSearchParams(window.location.search).get("url") || GITHUB_EXTENSION_MIN_JSON;
    const encodedUrl = encodeURIComponent(urlParm);

    if (!officialRepos.includes(urlParm)) {
        window.location.replace("/");
        return;
    }

    url.value = urlParm


    if (isAndroid.value) {
        window.goatcounter?.count?.({
            path: "/#add-to-tachiyomi",
            title: "Add extension repository",
        });

        window.location.replace(`tachiyomi://add-repo?url=${encodedUrl}`);
    }
});
```

--------------------------------

### VitePress Configuration for Keiyoushi Website

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

Configures the VitePress site, including theme settings, navigation, search, and markdown plugins. It utilizes Vue 3, TypeScript, and Element Plus components for a rich user experience. Dependencies include markdown-it plugins for enhanced markdown features.

```typescript
import {
  defineConfig,
  loadEnv
} from 'vitepress'
import { attrs } from '@mdit/plugin-attrs';
import { figure } from '@mdit/plugin-figure';
import { imgSize } from '@mdit/plugin-img-size';
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs';
import shortcodePlugin from 'markdown-it-shortcode-tag';
import shortcodes from './config/shortcodes';

const env = loadEnv('', process.cwd());
const hostname: string = env.VITE_HOSTNAME || 'http://localhost:4173';

export default defineConfig({
  title: "Keiyoushi",
  description: "An unofficial repository of extensions for Tachiyomi and variants.",
  cleanUrls: true,
  themeConfig: {
    nav: [
      { text: 'Add repo', link: '/add-repo' },
      { text: 'Guide', link: '/docs/guides/getting-started' },
      { text: 'Extensions', link: '/extensions/' },
    ],
    sidebar: {
      '/docs/': [
        { text: 'Extensions', link: '/extensions/' },
        {
          text: 'Guides',
          items: [
            { text: 'Getting started', link: '/docs/guides/getting-started' },
            { text: 'Troubleshooting', link: '/docs/guides/troubleshooting' },
          ],
        },
      ],
    },
    search: { provider: 'local' },
    socialLinks: [
      { icon: 'github', link: 'https://github.com/keiyoushi/extensions' },
      { icon: 'discord', link: 'https://discord.gg/3FbCpdKbdY' },
    ],
  },
  markdown: {
    config: (md) => {
      md.use(attrs)
        .use(figure)
        .use(imgSize)
        .use(tabsMarkdownPlugin)
        .use(shortcodePlugin, shortcodes);
    }
  },
})
```

--------------------------------

### TypeScript Navigation Shortcodes for Markdown

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

Custom markdown shortcodes implemented in TypeScript to render application navigation paths with icons. This allows documentation to intuitively reference in-app navigation structures. It uses a mapping of navigation keys to names, icons, and dependencies to build hierarchical paths.

```typescript
// website/.vitepress/config/shortcodes.ts
const navigationMappings: Record<string, Navigation> = {
  // Main navigation
  'main_library': { name: 'Library', icon: bookmarkBoxOutline },
  'main_browse': { name: 'Browse', icon: compassOutline },
  'main_more': { name: 'More', icon: dotsHorizontal },

  // Browse submenu
  'extensions': { name: 'Extensions', dependsOn: 'main_browse' },
  'migrate': { name: 'Migrate', dependsOn: 'main_browse' },

  // More > Settings submenu
  'settings': { name: 'Settings', icon: cog, dependsOn: 'main_more' },
  'advanced': { name: 'Advanced', icon: codeTags, dependsOn: 'settings' },
  'browse': { name: 'Browse', icon: compassOutline, dependsOn: 'settings' },
  'extension-repos': { name: 'Extension repos / Edit repos', dependsOn: 'browse' },
}

function generateNavigationHtml(navKey: string) {
  const navData = navigationMappings[navKey]
  if (!navData) return '<strong style="color:var(--vp-c-danger-1)">Unsupported Navigation!</strong>'

  const { name, icon, dependsOn } = navData
  let html = `<span class="shortcode navigation ${navKey}">${icon ?? ''}<span class="name">${name}</span></span>`

  if (dependsOn) {
    html = `${generateNavigationHtml(dependsOn)} -> ${html}`
  }
  return html
}

const shortcodes = {
  nav: {
    render({ to }) {
      return generateNavigationHtml(to)
    },
  },
}

// Usage in markdown:
// Navigate to <nav to="advanced">
// Renders: More -> Settings -> Advanced (with icons)

// Navigate to <nav to="extension-repos">
// Renders: More -> Settings -> Browse -> Extension repos / Edit repos

```

--------------------------------

### Register VitePress Theme with Plugins

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

Registers the VitePress theme, enabling Vue Query for data fetching, a tabs plugin for markdown content, and GoatCounter for analytics. It also imports custom styles and Element Plus dark theme variables.

```typescript
// website/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
import { VueQueryPlugin } from '@tanstack/vue-query';
import goatcounter from './plugin/goatcounter';

import './styles/base.styl';
import 'element-plus/theme-chalk/dark/css-vars.css';
import Layout from './Layout.vue';

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.use(VueQueryPlugin);      // Enable data fetching with caching
    enhanceAppWithTabs(app);       // Enable tabbed markdown content
    goatcounter({ id: "keiyoushi" }); // Privacy-friendly analytics
  },
  Layout,
} satisfies Theme

// Development commands:
// pnpm docs:dev      - Start development server
// pnpm docs:build    - Build for production
// pnpm docs:preview  - Preview production build

```

--------------------------------

### Add Repository Button for Android

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

A Vue component that provides a button to add an extension repository to Tachiyomi via a deep link. It checks if the user is on Android and displays a warning for other operating systems. The component uses `tachiyomi://` protocol for adding the repository and includes analytics tracking.

```vue
<!-- website/.vitepress/theme/components/AddRepoButton.vue -->
<script setup lang="ts">
import { GITHUB_EXTENSION_MIN_JSON } from "../../config/constants";
import { onMounted, ref } from "vue";

const isAndroid = ref(true);

onMounted(() => {
  isAndroid.value = !!navigator.userAgent.match(/android/i);
});

function handleAnalytics() {
  window.goatcounter?.count?.({
    path: "/#add-to-tachiyomi",
    title: "Add extension repository",
  });
}
</script>

<template>
  <div v-if="!isAndroid">
    <div class="custom-block warning">
      <p class="custom-block-title">Unsupported operating system</p>
      <p>
        <strong>Mihon</strong> is an <strong>Android app</strong> only.
        Use an <strong>Android device with Mihon installed</strong> to add this extension repo.
      </p>
    </div>
  </div>
  <div v-else>
    <div class="action-buttons">
      <a
        class="action-button primary"
        :href="`tachiyomi://add-repo?url=${encodeURIComponent(GITHUB_EXTENSION_MIN_JSON)}`"
        @click="handleAnalytics"
      >
        <span class="text">Add repository</span>
      </a>
    </div>
    <span class="version-disclaimer">
      Requires <strong>Tachiyomi 0.15.2</strong> or newer.
    </span>
  </div>
</template>

<!-- Deep link URL format:
     tachiyomi://add-repo?url=https%3A%2F%2Fraw.githubusercontent.com%2Fkeiyoushi%2Fextensions%2Frepo%2Findex.min.json
-->

```

--------------------------------

### Fetch and Cache Extensions Data with Vue Query

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

A Vue Query hook that fetches and caches extension data from a GitHub repository. It uses axios for HTTP requests and provides options for query customization. The hook returns extension data, typically an array of Extension objects, and handles loading and error states.

```typescript
// website/.vitepress/theme/queries/useExtensionsRepositoryQuery.ts
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 interface Extension {
  name: string      // e.g., "Tachiyomi: MangaDex"
  pkg: string       // e.g., "eu.kanade.tachiyomi.extension.en.mangadex"
  apk: string       // e.g., "tachiyomi-en.mangadex-v1.4.2.apk"
  lang: string      // e.g., "en", "ja", "all"
  code: number      // Version code
  version: string   // e.g., "1.4.2"
  nsfw: number      // 0 = SFW, 1 = NSFW
  hasReadme: number
  hasChangelog: number
  sources: Source[]
}

export interface Source {
  name: string
  lang: string
  id: string
  baseUrl: string
  versionId: number
}

export default function useExtensionsRepositoryQuery<S = Extension[]>
  (options: UseQueryOptions<Extension[], Error, S> = {} 
) {
  return useQuery<Extension[], Error, S>({
    queryKey: ['extensions'],
    queryFn: async () => {
      const { data } = await axios.get<Extension[]>(GITHUB_EXTENSION_JSON)
      return data
    },
    initialData: () => [],
    refetchOnWindowFocus: false,
    ...options,
  })
}

// Usage in component:
// import groupBy from "lodash.groupby";
// const { data: extensions, isLoading } = useExtensionsRepositoryQuery({
//   select: (response) => {
//     const values: Extension[][] = Object.values(groupBy(response, "lang"))
//     values.sort(languageComparator)
//     return values
//   },
// })

```

--------------------------------

### Vue Extensions Wrapper Component

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

A Vue.js component that fetches, filters, and displays a catalog of extensions. It includes features for search, language filtering, NSFW content filtering, and sorting. Dependencies include lodash.groupby and utility functions for language names.

```vue
<script setup lang="ts">
import groupBy from "lodash.groupby";
import { computed, reactive } from "vue";
import { simpleLangName } from "../../utils/languages";
import useExtensionsRepositoryQuery from "../../queries/useExtensionsRepositoryQuery";
import type { Extension } from "../../queries/useExtensionsRepositoryQuery";
import ExtensionFilters from "./ExtensionFilters.vue";
import ExtensionList from "./ExtensionList.vue";

const { data: extensions, isLoading } = useExtensionsRepositoryQuery({
  select: (response) => {
    const values: Extension[][] = Object.values(groupBy(response, "lang"))
    values.sort(languageComparator)
    return values
  },
})

const filters = reactive({
  search: "",
  lang: [] as string[],
  nsfw: "Show all" as "Show all" | "NSFW" | "SFW",
  sort: "Ascending" as "Ascending" | "Descending",
})

function languageComparator(a: Extension[], b: Extension[]) {
  const langA = simpleLangName(a[0].lang)
  const langB = simpleLangName(b[0].lang)
  // Priority: All > English > alphabetical
  if (langA === "All") return -1
  if (langB === "All") return 1
  if (langA === "English") return -1
  if (langB === "English") return 1
  return langA.localeCompare(langB)
}

const filteredExtensions = computed(() => {
  const filtered: Extension[][] = []
  for (const group of (extensions.value ?? [])) {
    let filteredGroup = filters.lang.length
      ? (filters.lang.includes(group[0].lang) ? group : [])
      : group

    if (filters.search) {
      const lower = filters.search.toLowerCase()
      filteredGroup = filteredGroup.filter(
        (ext) => ext.name.toLowerCase().includes(lower)
          || 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 === "Descending") {
      filteredGroup = filteredGroup.reverse()
    }

    if (filteredGroup.length) {
      filtered.push(filteredGroup)
    }
  }
  return filtered
})
</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>
</template>

```

--------------------------------

### Format Language Names with Intl API

Source: https://context7.com/keiyoushi/keiyoushi.github.io/llms.txt

Utility functions for displaying language names in both English and their native forms using the JavaScript Intl API. The `simpleLangName` function returns the English name, while `langName` provides both English and native names. A helper `capitalize` function is used for proper casing.

```typescript
// website/.vitepress/theme/utils/languages.ts
export function simpleLangName(code: string) {
  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'

  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)
}

// Usage examples:
// simpleLangName('en')  // Returns: "English"
// simpleLangName('ja')  // Returns: "Japanese"
// simpleLangName('all') // Returns: "All"
// langName('ja')        // Returns: "Japanese - 日本語"
// langName('zh')        // Returns: "Chinese - 中文"

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.