From eeb51c6aeb8de2ae73a59ce20e208df36f93c143 Mon Sep 17 00:00:00 2001 From: beerpiss Date: Thu, 27 Jul 2023 01:06:29 +0700 Subject: [PATCH] feat: merge the website into one drop-in page --- internal/build/build.go | 22 -- internal/build/web/index.html.tmpl | 91 +------- internal/build/web/scripts/elements.js | 4 - internal/build/web/scripts/index.js | 107 --------- internal/build/web/styles/index.css | 312 ------------------------- 5 files changed, 1 insertion(+), 535 deletions(-) delete mode 100644 internal/build/web/scripts/elements.js delete mode 100644 internal/build/web/scripts/index.js delete mode 100644 internal/build/web/styles/index.css diff --git a/internal/build/build.go b/internal/build/build.go index 1eab9ca..ac71037 100644 --- a/internal/build/build.go +++ b/internal/build/build.go @@ -87,28 +87,6 @@ func BuildWeb(webTitle string, output string) error { if err != nil { return err } - - err = os.MkdirAll(output+"/scripts", os.FileMode(0777)) - if err != nil { - return err - } - err = os.MkdirAll(output+"/styles", os.FileMode(0777)) - if err != nil { - return err - } - - files := []string{"scripts/elements.js", "scripts/index.js", "styles/index.css"} - for _, file := range files { - bytes := box.MustBytes(file) - file, err := os.Create(output + "/" + file) - if err != nil { - return err - } - file.Write(bytes) - file.Sync() - file.Close() - } - return nil } diff --git a/internal/build/web/index.html.tmpl b/internal/build/web/index.html.tmpl index c039d9a..f66c969 100644 --- a/internal/build/web/index.html.tmpl +++ b/internal/build/web/index.html.tmpl @@ -1,90 +1 @@ - - - - - - {{ .Title }} - - - - - - - - - - - -
-

{{ .Title }}

- Add to Aidoku -
-
- On a device with Aidoku installed, tap Add to Aidoku - or use the base URL to add this source list. -
-
-

Base URL:

-

-
-
-

Sources

- - - -
- - +{{ .Title }}

{{ .Title }}

Add to Aidoku
On a device with Aidoku installed, tap Add to Aidoku or use the base URL to add this source list.

Base URL:

Sources

diff --git a/internal/build/web/scripts/elements.js b/internal/build/web/scripts/elements.js deleted file mode 100644 index dd3f7f8..0000000 --- a/internal/build/web/scripts/elements.js +++ /dev/null @@ -1,4 +0,0 @@ -Promise.allSettled( - ["sl-button", "sl-input", "sl-select", "sl-option", "sl-checkbox", "sl-badge"] - .map(e => customElements.whenDefined(e)) -).then(() => document.body.classList.add("ready")); diff --git a/internal/build/web/scripts/index.js b/internal/build/web/scripts/index.js deleted file mode 100644 index b895afa..0000000 --- a/internal/build/web/scripts/index.js +++ /dev/null @@ -1,107 +0,0 @@ -(function (w) { - const namesInEnglish = new Intl.DisplayNames(["en"], { type: "language" }); - - /** - * - * @param {string} code - * @returns {[string, string]} - */ - function languageName(code) { - if (code === "multi") { - return ["Multi-Language", ""]; - } else { - const namesInNative = new Intl.DisplayNames([code], { type: "language" }); - - // All the language codes are probably valid if they got merged. - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - return [namesInEnglish.of(code), namesInNative.of(code)]; - } - } - - /** - * - * @param {string} code - * @returns {string} - */ - function fullLanguageName(code) { - const names = languageName(code); - return names[1] - ? code !== "en" - ? `${names[0]} - ${names[1]}` - : names[0] - : names[0]; - } - - const LoadingStatus = { - Loading: "loading", - Loaded: "loaded", - Error: "error", - }; - - document.addEventListener("alpine:init", () => { - Alpine.store("sourceUrl", w.location.href.replace(w.location.hash, "")) - Alpine.store("addUrl", `aidoku://addSourceList?url=${w.location.href.replace(w.location.hash, "")}`) - - Alpine.data("sourceList", () => ({ - sources: [], - languages: [], - loading: LoadingStatus.Loading, - - LoadingStatus, - languageName, - fullLanguageName, - - // options - filtered: [], - query: "", - selectedLanguages: [], - nsfw: true, - - async init() { - try { - const res = await fetch(`./index.min.json`); - this.sources = (await res.json()).sort((lhs, rhs) => { - if (lhs.lang === "multi" && rhs.lang !== "multi") { - return -1; - } - if (lhs.lang !== "multi" && rhs.lang === "multi") { - return 1; - } - if (lhs.lang === "en" && rhs.lang !== "en") { - return -1; - } - if (rhs.lang === "en" && lhs.lang !== "en") { - return 1; - } - - const [langLhs] = languageName(lhs.lang); - const [langRhs] = languageName(rhs.lang); - return langLhs.localeCompare(langRhs) || lhs.name.localeCompare(rhs.name); - }); - this.languages = [...new Set(this.sources.map((source) => source.lang))]; - this.loading = LoadingStatus.Loaded; - } catch { - this.loading = LoadingStatus.Error; - } - - this.$nextTick(() => { - window.location.hash && window.location.replace(window.location.hash); - }); - }, - - updateFilteredList() { - this.filtered = this.sources - .filter((item) => - this.query - ? item.name.toLowerCase().includes(this.query.toLowerCase()) || - item.id.toLowerCase().includes(this.query.toLowerCase()) - : true - ) - .filter((item) => (this.nsfw ? true : (item.nsfw ?? 0) <= 1)) - .filter((item) => - this.selectedLanguages.length ? this.selectedLanguages.includes(item.lang) : true - ); - } - })) - }) -})(window); diff --git a/internal/build/web/styles/index.css b/internal/build/web/styles/index.css deleted file mode 100644 index be3f3f3..0000000 --- a/internal/build/web/styles/index.css +++ /dev/null @@ -1,312 +0,0 @@ -* { - --aidoku-color: #ff375f; - font-family: -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif; -} - -/* #region Add to Aidoku button */ -.add-to-aidoku::part(base) { - background: #ff375f0f; - border: none; -} - -.add-to-aidoku::part(base):hover { - background: rgba(255, 55, 95, 0.15); -} - -.add-to-aidoku::part(base):active { - background: rgba(255, 55, 95, 0.25); -} - -.add-to-aidoku::part(base):focus-visible { - box-shadow: 0 0 0 3px solid rgba(255, 55, 95, 0.33); -} - -.add-to-aidoku::part(label) { - color: var(--aidoku-color); -} -/* #endregion */ - -body { - margin: 0.75rem auto; - max-width: 42rem; -} - -:not(:defined) { - visibility: hidden; -} - -@media only screen and (max-width: 767px) { - body { - max-width: 22rem; - } -} - -@media only screen and (max-width: 376px) { - body { - max-width: 20rem; - } -} - -header { - margin: 1rem auto; - - display: flex; - flex-direction: column; - - align-items: center; - justify-content: center; - text-align: center; - - font-size: 1.25rem; - line-height: 1.75rem; -} - -header p { - color: var(--aidoku-color); - font-weight: 600; - padding-bottom: 0.5rem; - margin-bottom: 0.5rem; - margin-top: 0.5rem; -} - -.description { - margin: auto 2rem; -} - -.description a { - color: var(--aidoku-color); - text-decoration: none; -} - -.base-url { - width: 91.6667%; - margin: 0.75rem auto; - padding: 0.75rem 1rem; - - border-style: solid; - border-radius: 0.125rem; - border-width: 1px; - border-color: rgb(96 165 250); - - background-color: rgb(239 246 255); -} - -.base-url__description { - font-weight: 600; - margin: 0; - margin-bottom: 0.5rem; -} - -.base-url__url { - margin: 0; -} - -.sources { - margin: 0.75rem auto; -} - -.sources h1 { - font-weight: 600; - font-size: 1.875rem; - line-height: 2.25rem; - padding-bottom: 1rem; - margin: 0; -} - -.sources__search { - padding-bottom: 0.25rem; -} - -.sources__search * { - margin-bottom: 0.25rem; -} - -.sources__status { - display: flex; - align-items: center; - justify-content: center; -} - -.sources__item { - display: flex; - align-items: center; - - padding: 0.5rem 0.5rem; -} - -.sources__item:target { - background-color: rgba(255, 55, 95, 0.25); - border-radius: 0.5rem; - transition: background-color .5s; -} - -@media (min-width: 1024px) { - .sources__item { - padding-left: 1.5rem; - padding-right: 1.5rem; - } -} - -.sources__item:hover .sources__anchor { - opacity: 1; -} - -.sources__anchor { - opacity: 0; - float: left; - - margin-top: auto; - margin-bottom: auto; - margin-left: -1.5rem; - - padding-left: 0.5rem; - padding-right: 0.5rem; - - font-size: 1.25rem; - font-weight: 400; - line-height: 1.75rem; - - color: var(--aidoku-color); -} - -.sources__anchor:hover { - text-decoration-line: underline; -} - -.sources__icon-wrapper { - margin-top: auto; - margin-bottom: auto; -} - -.sources__icon { - display: block; - max-width: 100%; - margin-right: 0.5rem; - border-radius: 0.5rem; -} - -.sources__info { - display: flex; - flex: 1 1 0%; - flex-direction: column; -} - -.sources__name { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - gap: 0.25rem; - font-weight: 600; -} - -.sources__name sl-badge { - font-size: 0.75rem; - line-height: 0.875rem; -} - -.sources__version { - font-size: 0.875rem; - line-height: 1.25rem; - color: rgb(156 163 175); -} - -.sources__download { - margin: auto auto; -} - -.sources__download sl-button::part(base) { - background: var(--sl-color-gray-100); - border: none; -} - -.sources__download sl-button::part(base):hover { - background: var(--sl-color-gray-200); -} - -.sources__download sl-button::part(base):active { - background: var(--sl-color-gray-300); -} - -.sources__download sl-button::part(base):focus-visible { - box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.33); -} - -.sources__download sl-button::part(label) { - color: var(--aidoku-color); -} - - -/* #region Spinner */ -@keyframes fade { - from { - opacity: 1; - } - to { - opacity: 0.25; - } -} - -.spinner { - position: relative; - display: inline-block; - height: 3.5rem; - width: 3.5rem; -} - -.spinner>div { - position: absolute; - left: 49%; - top: 43%; - height: 16%; - width: 6%; - - border-radius: 50px; - - background-color: #78787a; - opacity: 0; - box-shadow: 0 0 3px rgba(0,0,0,0.2); - - animation: fade 1s linear infinite; -} - -.spinner>div.bar0 { - transform: rotate(0deg) translate(0, -130%); - animation-delay: 0s; -} - -.spinner>div.bar1 { - transform: rotate(45deg) translate(0, -130%); - animation-delay: 0.125s; -} - -.spinner>div.bar2 { - transform: rotate(90deg) translate(0, -130%); - animation-delay: 0.25s; -} - -.spinner>div.bar3 { - transform: rotate(135deg) translate(0, -130%); - animation-delay: 0.375s; -} - -.spinner>div.bar4 { - transform: rotate(180deg) translate(0, -130%); - animation-delay: 0.5s; -} - -.spinner>div.bar5 { - transform: rotate(225deg) translate(0, -130%); - animation-delay: 0.625s; -} - -.spinner>div.bar6 { - transform: rotate(270deg) translate(0, -130%); - animation-delay: 0.75s; -} - -.spinner>div.bar7 { - transform: rotate(315deg) translate(0, -130%); - animation-delay: 0.875s; -} -/* #endregion */