index.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <meta name="robots" content="noindex">
  7. <title>Keiyoushi</title>
  8. <meta name="description" content="A repository of unofficial Tachiyomi extensions.">
  9. <meta property="og:title" content="Keiyoushi">
  10. <meta property="og:description" content="A repository of unofficial Tachiyomi extensions.">
  11. <meta property="og:image" content="https://avatars.githubusercontent.com/u/113362897?v=4">
  12. <meta property="og:url" content="https://keiyoushi.github.io/extensions/">
  13. <meta name="theme-color" content="#2e84bf">
  14. <link
  15. rel="stylesheet"
  16. media="(prefers-color-scheme:light)"
  17. href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css"
  18. integrity="sha384-0usmJJJTG5wZwRFlxdECle5gNAqtRYVm8rHBHjGO0+Cpgp83KTGEANVIFUYafjaO"
  19. crossorigin="anonymous"
  20. />
  21. <link
  22. rel="stylesheet"
  23. media="(prefers-color-scheme:dark)"
  24. href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"
  25. onload="document.documentElement.classList.add('sl-theme-dark');"
  26. integrity="sha384-2HpI1Tt4Zv7emgrwKyetd6ouDie+RKolEtNHOdD+KCVHLj1V2fjxryG48h50f0Rw"
  27. crossorigin="anonymous"
  28. />
  29. <link rel="stylesheet" href="../index.css">
  30. <script async type="module"
  31. src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"
  32. integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin"
  33. crossorigin="anonymous"></script>
  34. <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
  35. integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV"
  36. crossorigin="anonymous"></script>
  37. <script src="extensions.js"></script>
  38. <script data-goatcounter="https://keiyoushi.goatcounter.com/count"
  39. async src="//gc.zgo.at/count.js"></script>
  40. </head>
  41. <body>
  42. <header class="header">
  43. <p class="header__title">Keiyoushi</p>
  44. </header>
  45. <div class="description">
  46. Join the <a class="description__anchor" href="https://discord.gg/3FbCpdKbdY">Discord server</a> for support. Make sure to star <a class="description__anchor" href="https://github.com/keiyoushi/extensions">the GitHub repo</a>.
  47. </div>
  48. <div class="sources" x-data="extensionList">
  49. <h1 class="sources__title">Extensions</h1>
  50. <template x-if="loading === LoadingStatus.Loading">
  51. <sl-spinner class="sources__status" style="font-size:3rem"></sl-spinner>
  52. </template>
  53. <template x-if="loading === LoadingStatus.Error">
  54. <div class="sources__status">Could not load extension list.</div>
  55. </template>
  56. <template x-if="loading === LoadingStatus.Loaded">
  57. <div>
  58. <div class="source-search" x-effect="updateFilteredList">
  59. <div class="source-search__nsfw-wrapper">
  60. <span class="source-search__nsfw-label">Display mode: </span>
  61. <sl-radio-group size="small"
  62. name="nsfw"
  63. value="all"
  64. @sl-change="nsfw = $event.target.value">
  65. <sl-radio-button value="all">Show all</sl-radio-button>
  66. <sl-radio-button value="nsfw">NSFW</sl-radio-button>
  67. <sl-radio-button value="safe">SFW</sl-radio-button>
  68. </sl-radio-group>
  69. </div>
  70. <sl-input class="source-search__title"
  71. placeholder="Search by name or ID..."
  72. x-model="query">
  73. </sl-input>
  74. <sl-select class="source-search__language"
  75. multiple clearable
  76. placeholder="Filter by languages"
  77. @sl-change="selectedLanguages = event.target.value">
  78. <template x-for="(language, index) in languages" :key="index">
  79. <sl-option :value="language" x-text="languageName(language)"></sl-option>
  80. </template>
  81. </sl-select>
  82. </div>
  83. <template x-for="extension in filtered" :key="extension.pkg">
  84. <div class="source"
  85. :id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')">
  86. <a :href="`#${extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')}`"
  87. class="source__anchor">
  88. #
  89. </a>
  90. <img class="source__icon"
  91. :alt="`Icon for ${extension.name}`"
  92. :src="`${$store.repoUrl}/icon/${extension.pkg}.png`"
  93. loading="lazy"
  94. width="42"
  95. height="42">
  96. <div class="source__info">
  97. <div class="source__name">
  98. <span x-text="extension.name.split(': ')[1]"></span>
  99. <span class="source__version"
  100. x-text="`v${extension.version}`"></span>
  101. <sl-tag class="content-rating content-rating--nsfw"
  102. size="small" variant="danger"
  103. x-cloak x-show="extension.nsfw === 1">
  104. 18+
  105. </sl-tag>
  106. </div>
  107. <div class="source__version" x-text="simpleLanguageName(extension.lang)"></div>
  108. </div>
  109. <sl-button class="download-button"
  110. pill
  111. size="small"
  112. download
  113. :href="`${$store.repoUrl}/apk/${extension.apk}`"
  114. @click="window.goatcounter?.count({ path: `/extensions/apk/${extension.apk}` })">
  115. <sl-icon name="download"></sl-icon>
  116. </sl-button>
  117. </div>
  118. </template>
  119. </div>
  120. </template>
  121. </div>
  122. <script>
  123. Promise.allSettled(
  124. ["sl-button", "sl-select"].map((e) => customElements.whenDefined(e))
  125. )
  126. .then(() => document.body.classList.add("ready"))
  127. </script>
  128. </body>
  129. </html>