Skip to content

Commit

Permalink
feat: merge the website into one drop-in page
Browse files Browse the repository at this point in the history
  • Loading branch information
@beer-psi
beer-psi committed Jul 26, 2023
1 parent 94c4bd9 commit eeb51c6
Show file tree
Hide file tree
Showing 5 changed files with 1 addition and 535 deletions.
22 changes: 0 additions & 22 deletions internal/build/build.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down
91 changes: 1 addition & 90 deletions internal/build/web/index.html.tmpl
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Title }}</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/themes/light.css" integrity="sha384-0usmJJJTG5wZwRFlxdECle5gNAqtRYVm8rHBHjGO0+Cpgp83KTGEANVIFUYafjaO" crossorigin="anonymous" />
<link rel="stylesheet" href="styles/index.css" />

<script type="module" src="scripts/elements.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js" integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin" crossorigin="anonymous"></script>

<script defer src="scripts/index.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js" integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV" crossorigin="anonymous"></script>
</head>
<body>
<header>
<p>{{ .Title }}</p>
<sl-button class="add-to-aidoku" x-data :href="$store.addUrl">Add to Aidoku</sl-button>
</header>
<div class="description">
On a device with Aidoku installed, tap <a x-data :href="$store.addUrl">Add to Aidoku</a>
or use the base URL to add this source list.
</div>
<div class="base-url" variant="primary">
<p class="base-url__description">Base URL:</p>
<p class="base-url__url" x-data x-text="$store.sourceUrl"></p>
</div>
<div x-data="sourceList" class="sources">
<h1>Sources</h1>
<template x-if="loading === LoadingStatus.Loading">
<div class="sources__status">
<div aria-label="Loading" class="spinner">
<div class="bar0"></div>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
</div>
</div>
</template>
<template x-if="loading === LoadingStatus.Error">
<div class="sources__status">
<div class="text-red-500">
<p>Could not load sources.</p>
<p>This source list might not work in the app.</p>
</div>
</div>
</template>
<template x-if="loading === LoadingStatus.Loaded">
<div>
<div class="sources__search" x-effect="updateFilteredList">
<sl-input placeholder="Search by name or ID..." x-model="query"></sl-input>
<sl-select placeholder="Filter by languages" multiple clearable @sl-change="selectedLanguages = event.target.value">
<template x-for="(language, index) in languages" :key="language">
<sl-option :value="language" x-text="fullLanguageName(language)"></sl-option>
</template>
</sl-select>
<sl-checkbox @sl-change="nsfw = event.target.checked" :checked="nsfw">Show NSFW sources?</sl-checkbox>
</div>
<div class="sources__list">
<template x-for="source in filtered" :key="source.id">
<div class="sources__item">
<a :href="`#${source.id}`" class="sources__anchor">#</a>
<div class="sources__icon-wrapper">
<img class="sources__icon" :alt="`Icon for ${source.name}`" :src="`./icons/${source.icon}`" loading="lazy" width="42" height="42">
</div>
<div class="sources__info">
<div class="sources__name">
<span x-text="source.name"></span>
<span class="sources__version" x-text="`v${source.version}`"></span>
<sl-badge variant="danger" pill x-cloak x-show="source.nsfw === 2">18+</sl-badge>
</div>
<div class="sources__version" x-text="languageName(source.lang)[0]"></div>
</div>
<div class="sources__download">
<sl-button size="small" pill download :href="`./sources/${source.file}`">Download</sl-button>
</div>
</div>
</template>
</div>
</div>
</template>
</div>
</body>
</html>
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>{{ .Title }}</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/themes/light.css" integrity="sha384-0usmJJJTG5wZwRFlxdECle5gNAqtRYVm8rHBHjGO0+Cpgp83KTGEANVIFUYafjaO" crossorigin="anonymous"><style>*{--aidoku-color:#ff375f;font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}.add-to-aidoku::part(base){background:#ff375f0f;border:none}.add-to-aidoku::part(base):hover{background:rgba(255,55,95,.15)}.add-to-aidoku::part(base):active{background:rgba(255,55,95,.25)}.add-to-aidoku::part(base):focus-visible{box-shadow:0 0 0 3px solid rgba(255,55,95,.33)}.add-to-aidoku::part(label){color:var(--aidoku-color)}body{margin:.75rem auto;max-width:42rem;visibility:hidden}body.ready{visibility:visible}@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:.5rem;margin-bottom:.5rem;margin-top:.5rem}.description{margin:auto 2rem}.description a{color:var(--aidoku-color);text-decoration:none}.base-url{width:91.6667%;margin:.75rem auto;padding:.75rem 1rem;border-style:solid;border-radius:.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:.5rem}.base-url__url{margin:0}.sources{margin:.75rem auto}.sources h1{font-weight:600;font-size:1.875rem;line-height:2.25rem;padding-bottom:1rem;margin:0}.sources__search{padding-bottom:.25rem}.sources__search *{margin-bottom:.25rem}.sources__status{display:flex;align-items:center;justify-content:center}.sources__item{display:flex;align-items:center;padding:.5rem .5rem}.sources__item:target{background-color:rgba(255,55,95,.25);border-radius:.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:.5rem;padding-right:.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:.5rem;border-radius:.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:.25rem;font-weight:600}.sources__name sl-badge{font-size:.75rem;line-height:.875rem}.sources__version{font-size:.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,.33)}.sources__download sl-button::part(label){color:var(--aidoku-color)}@keyframes fade{from{opacity:1}to{opacity:.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,.2);animation:fade 1s linear infinite}.spinner>div.bar0{transform:rotate(0) translate(0,-130%);animation-delay:0s}.spinner>div.bar1{transform:rotate(45deg) translate(0,-130%);animation-delay:125ms}.spinner>div.bar2{transform:rotate(90deg) translate(0,-130%);animation-delay:.25s}.spinner>div.bar3{transform:rotate(135deg) translate(0,-130%);animation-delay:375ms}.spinner>div.bar4{transform:rotate(180deg) translate(0,-130%);animation-delay:.5s}.spinner>div.bar5{transform:rotate(225deg) translate(0,-130%);animation-delay:625ms}.spinner>div.bar6{transform:rotate(270deg) translate(0,-130%);animation-delay:.75s}.spinner>div.bar7{transform:rotate(315deg) translate(0,-130%);animation-delay:875ms}</style><script async>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")}))</script><script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js" integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin" crossorigin="anonymous"></script><script defer>!function(e){const n=new Intl.DisplayNames(["en"],{type:"language"});function t(e){return"multi"===e?"Multi-Language":n.of(e)}function a(e){if("multi"===e)return"Multi-Language";if("en"===e)return"English";const t=new Intl.DisplayNames([e],{type:"language"});return`${n.of(e)} - ${t.of(e)}`}const i={Loading:"loading",Loaded:"loaded",Error:"error"};document.addEventListener("alpine:init",(()=>{Alpine.store("sourceUrl",e.location.href.replace(e.location.hash,"")),Alpine.store("addUrl",`aidoku://addSourceList?url=${e.location.href.replace(e.location.hash,"")}`),Alpine.data("sourceList",(()=>({LoadingStatus:i,simpleLanguageName:t,languageName:a,sources:[],languages:[],loading:i.Loading,filtered:[],query:"",selectedLanguages:[],nsfw:!0,async init(){try{const e=await fetch("./index.min.json");this.sources=(await e.json()).sort(((e,n)=>{if("multi"===e.lang&&"multi"!==n.lang)return-1;if("multi"!==e.lang&&"multi"===n.lang)return 1;if("en"===e.lang&&"en"!==n.lang)return-1;if("en"===n.lang&&"en"!==e.lang)return 1;const a=t(e.lang),i=t(n.lang);return a.localeCompare(i)||e.name.localeCompare(n.name)})),this.languages=[...new Set(this.sources.map((e=>e.lang)))],this.loading=i.Loaded}catch{this.loading=i.Error}0===this.filtered.length&&this.updateFilteredList(),this.$nextTick((()=>{e.location.hash&&e.location.replace(e.location.hash)}))},updateFilteredList(){this.filtered=this.sources.filter((e=>!this.query||(e.name.toLowerCase().includes(this.query.toLowerCase())||e.id.toLowerCase().includes(this.query.toLowerCase())))).filter((e=>!!this.nsfw||(e.nsfw??0)<=1)).filter((e=>!this.selectedLanguages.length||this.selectedLanguages.includes(e.lang)))}})))}))}("undefined"!=typeof self?self:this)</script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js" integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV" crossorigin="anonymous"></script></head><body><header><p>{{ .Title }}</p><sl-button class="add-to-aidoku" x-data :href="$store.addUrl">Add to Aidoku</sl-button></header><div class="description">On a device with Aidoku installed, tap <a x-data :href="$store.addUrl">Add to Aidoku</a> or use the base URL to add this source list.</div><div class="base-url" variant="primary"><p class="base-url__description">Base URL:</p><p class="base-url__url" x-data x-text="$store.sourceUrl"></p></div><div class="sources" x-data="sourceList"><h1>Sources</h1><template x-if="loading === LoadingStatus.Loading"><div class="sources__status"><div aria-label="Loading" class="spinner"><div class="bar0"></div><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div><div class="bar7"></div></div></div></template><template x-if="loading === LoadingStatus.Error"><div class="sources__status"><p>Could not load sources.</p><p>This source list might not work in the app.</p></div></template><template x-if="loading === LoadingStatus.Loaded"><div><div class="sources__search" x-effect="updateFilteredList"><sl-input placeholder="Search by name or ID..." x-model="query"></sl-input><sl-select multiple clearable placeholder="Filter by languages" @sl-change="selectedLanguages = event.target.value"><template x-for="(language, index) in languages" :key="language"><sl-option :value="language" x-text="languageName(language)"></sl-option></template></sl-select><sl-checkbox @sl-change="nsfw = event.target.checked" :checked="nsfw">Show NSFW sources?</sl-checkbox></div><div class="sources__list"><template x-for="source in filtered" :key="source.id"><div class="sources__item" :id="source.id"><a :href="`#${source.id}`" class="sources__anchor">#</a><div class="sources__icon-wrapper"><img class="sources__icon" :alt="`Icon for ${source.name}`" :src="`./icons/${source.icon}`" loading="lazy" width="42" height="42"></div><div class="sources__info"><div class="sources__name"><span x-text="source.name"></span> <span class="sources__version" x-text="`v${source.version}`"></span><sl-badge pill x-cloak variant="danger" x-show="source.nsfw === 2">18+</sl-badge></div><div class="sources__version" x-text="simpleLanguageName(source.lang)"></div></div><div class="sources__download"><sl-button pill size="small" download :href="`./sources/${source.file}`">Download</sl-button></div></div></template></div></div></template></div></body></html>
4 changes: 0 additions & 4 deletions internal/build/web/scripts/elements.js
View file

This file was deleted.

107 changes: 0 additions & 107 deletions internal/build/web/scripts/index.js
View file

This file was deleted.

Loading

0 comments on commit eeb51c6

Please sign in to comment.