Skip to content

Commit

Permalink
Listing website (#2)
Browse files Browse the repository at this point in the history 
* Listing website

* landing page

* move button next to entry

* bump minimum tachiyomi version
  • Loading branch information
@beer-psi
beer-psi authored Jan 9, 2024
1 parent 228641d commit ec57d18
Show file tree
Hide file tree
Showing 4 changed files with 641 additions and 0 deletions.
109 changes: 109 additions & 0 deletions extensions/extensions.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
!function () {
const ENGLISH_DISPLAY_NAMES = new Intl.DisplayNames(["en"], { type: "language" });

function simpleLanguageName(language) {
return language === "all" ? "All" : ENGLISH_DISPLAY_NAMES.of(language);
}

function languageName(language) {
if (language === "all") {
return "All";
}

if (language === "en") {
return "English"
}

const localDisplayNames = new Intl.DisplayNames([language], { type: "language" });

return `${ENGLISH_DISPLAY_NAMES.of(language)} - ${localDisplayNames.of(language)}`;
}

const LoadingStatus = {
Loading: "loading",
Loaded: "loaded",
Error: "error",
}

const NsfwOption = {
All: "all",
Safe: "safe",
Nsfw: "nsfw",
}

document.addEventListener("alpine:init", () => {
Alpine.data("extensionList", () => ({
LoadingStatus,
NsfwOption,
simpleLanguageName,
languageName,
extensions: [],
languages: [],
loading: LoadingStatus.Loading,
filtered: [],
query: "",
selectedLanguages: [],
nsfw: NsfwOption.All,

async init() {
try {
const index = await fetch("/index.min.json").then((e) => e.json());

this.extensions = index.sort((a, b) => {
if ("all" === a.lang && "all" !== b.lang) {
return -1;
}

if ("all" !== a.lang && "all" === b.lang) {
return 1;
}

if ("en" === a.lang && "en" !== b.lang) {
return -1
}

if ("en" === b.lang && "en" !== a.lang) {
return 1;
}

const langA = simpleLanguageName(a.lang);
const langB = simpleLanguageName(b.lang);

return langA.localeCompare(langB) || a.name.localeCompare(b.name);
});
this.languages = [...new Set(this.extensions.map((e) => e.lang))];
this.loading = LoadingStatus.Loaded;
} catch (e) {
console.error(e);

this.loading = LoadingStatus.Error;
}

if (this.filtered.length === 0) {
this.updateFilteredList();
}

this.$nextTick(() => {
window.location.hash && window.location.replace(window.location.hash);
});
},

updateFilteredList() {
this.filtered = this.extensions
.filter(
(e) => !this.query
|| e.name.toLowerCase().includes(this.query.toLowerCase())
|| e.pkg.toLowerCase().includes(this.query.toLowerCase()),
)
.filter(
(e) => this.nsfw === NsfwOption.All
|| (this.nsfw === NsfwOption.Nsfw ? e.nsfw : !e.nsfw),
)
.filter(
(e) =>
!this.selectedLanguages.length || this.selectedLanguages.includes(e.lang)
);
},
}))
});
}()
107 changes: 107 additions & 0 deletions extensions/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex">
<title>Keiyoushi</title>
<meta name="description" content="A repository of unofficial Tachiyomi extensions.">
<meta property="og:title" content="Keiyoushi">
<meta property="og:description" content="A repository of unofficial Tachiyomi extensions.">
<meta property="og:image" content="https://avatars.githubusercontent.com/u/113362897?v=4">
<meta property="og:url" content="https://keiyoushi.github.io/extensions/">
<meta name="theme-color" content="#2e84bf">
<link
rel="stylesheet"
media="(prefers-color-scheme:light)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css"
integrity="sha384-0usmJJJTG5wZwRFlxdECle5gNAqtRYVm8rHBHjGO0+Cpgp83KTGEANVIFUYafjaO"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme:dark)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"
onload="document.documentElement.classList.add('sl-theme-dark');"
integrity="sha384-2HpI1Tt4Zv7emgrwKyetd6ouDie+RKolEtNHOdD+KCVHLj1V2fjxryG48h50f0Rw"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/index.css">
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"
integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin"
crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV"
crossorigin="anonymous"></script>
<script src="extensions.js"></script>
</head>

<body>
<header class="header">
<p class="header__title">Keiyoushi</p>
<sl-button variant="primary" href="tachiyomi://add-repo?url=https://keiyoushi.github.io/extensions/index.min.json">Add to Tachiyomi</sl-button>
</header>
<div class="description">
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>.
</div>
<div class="sources" x-data="extensionList">
<h1 class="sources__title">Extensions</h1>
<template x-if="loading === LoadingStatus.Loading">
<sl-spinner class="sources__status" style="font-size:3rem"></sl-spinner>
</template>
<template x-if="loading === LoadingStatus.Error">
<div class="sources__status">Could not load extension list.</div>
</template>
<template x-if="loading === LoadingStatus.Loaded">
<div>
<div class="source-search" x-effect="updateFilteredList">
<div class="source-search__nsfw-wrapper">
<span class="source-search__nsfw-label">Show NSFW extensions</span>
<sl-radio-group size="small" name="nsfw" value="all" @sl-change="nsfw = $event.target.value">
<sl-radio-button value="nsfw">Yes</sl-radio-button>
<sl-radio-button value="safe">No</sl-radio-button>
<sl-radio-button value="all">Don't care</sl-radio-button>
</sl-radio-group>
</div>
<sl-input class="source-search__title" placeholder="Search by name or ID..."
x-model="query"></sl-input>
<sl-select class="source-search__language" multiple clearable placeholder="Filter by languages"
@sl-change="selectedLanguages = event.target.value">
<template x-for="(language, index) in languages" :key="index">
<sl-option :value="language" x-text="languageName(language)"></sl-option>
</template>
</sl-select>
</div>
<template x-for="extension in filtered" :key="extension.pkg">
<div class="source" :id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')">
<a :href="`#${extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')}`"
class="source__anchor">#</a> <img class="source__icon" :alt="`Icon for ${extension.name}`"
:src="`/icon/${extension.pkg}.png`" loading="lazy" width="42" height="42">
<div class="source__info">
<div class="source__name">
<span x-text="extension.name.split(': ')[1]"></span> <span class="source__version"
x-text="`v${extension.version}`"></span>
<sl-tag x-cloak size="small" variant="danger"
class="content-rating content-rating--nsfw"
x-show="extension.nsfw === 1">18+</sl-tag>
</div>
<div class="source__version" x-text="simpleLanguageName(extension.lang)"></div>
</div>
<sl-button pill size="small" download class="download-button"
:href="`/apk/${extension.apk}`"><sl-icon name="download"></sl-icon></sl-button>
</div>
</template>
</div>
</template>
</div>
<script>
Promise.allSettled(
["sl-button", "sl-select"].map((e) => customElements.whenDefined(e))
)
.then(() => document.body.classList.add("ready"))
</script>
</body>

</html>
Loading

0 comments on commit ec57d18

Please sign in to comment.