RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove the svelte component from InstalledThemes

Browse source
This commit is contained in:
MotorTruck1221 2024-12-28 03:25:12 -07:00
parent a03f7d111b
commit d2b05a1b1b
No known key found for this signature in database
GPG key ID: 08F417E2B8B61EA4
6 changed files with 120 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/catalog/InstalledPlugins.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts">
import { unmount } from "svelte";
import { Suspense, createSuspense } from "@svelte-drama/suspense";
const suspend = createSuspense();
import { Settings, settings } from "@utils/settings/index";
@ -40,7 +41,7 @@ let compRef = [];
<div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
<div class="text-2xl"> {asset.title} </div>
<div class="flex flex-row">
<div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall(asset.type === "page" ? "plugin-page" : "plugin-sw", asset.package_name); compRef[key].$destroy()}}>
<div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall(asset.type === "page" ? "plugin-page" : "plugin-sw", asset.package_name); unmount(compRef[key])}}>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
<path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
</svg>

116
src/components/catalog/InstalledThemes.astro Normal file
View file

@ -0,0 +1,116 @@
<div id="parent" class="flex flex-row flex-wrap gap-4 items-center font-roboto justify-center">
<div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
<div class="w-full" id="main-theme">
<img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl"/>
</div>
<div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
Classic Nebula
</div>
</div>
</div>
<script>
type Assets = {
description: string,
image: string,
package_name: string,
payload: string,
tags: [],
background_video: string,
background_image: string,
title: string,
type: string,
version: string
}
import { pageLoad } from "@utils/events";
import { Settings, settings } from "@utils/settings";
async function getItem(item: any) {
try {
const res = await fetch(new URL(`/api/packages/${item}`, window.location.origin));
const data = await res.json();
return { ...data, package_name: item }
}
catch (err: any) {
console.log(`Err in themes: ${err}`);
return null;
}
}
async function getAssets() {
const items = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes) as string) || [];
const promises = items.map(getItem);
const dataArray = await Promise.all(promises);
const accumulatedData = dataArray.filter((data) => data !== null);
return accumulatedData;
}
const attachThemeEvent = (elem: HTMLElement, def: boolean | Assets) => {
elem.addEventListener("click", () => {
if (def === true || def === false) return settings.marketPlaceSettings.changeTheme(def);
settings.marketPlaceSettings.changeTheme(false, def.payload, def.background_video, def.background_image, def.package_name);
});
};
const attachDeleteEvent = (elem: HTMLElement, mainElem: HTMLElement, parentElem: HTMLElement, asset: Assets) => {
elem.addEventListener("click", () => {
settings.marketPlaceSettings.uninstall("theme", asset.package_name);
settings.marketPlaceSettings.changeTheme(true);
parentElem.removeChild(mainElem);
});
}
const createElem = (asset: Assets) => {
const parent = document.getElementById("parent");
const mainDiv = document.createElement("div");
mainDiv.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer");
const clickDiv = document.createElement("div");
clickDiv.classList.add("w-full");
attachThemeEvent(clickDiv, asset);
const imgDiv = document.createElement("img");
imgDiv.classList.add("aspect-[16/9]", "rounded-t-3xl");
imgDiv.src = `/packages/${asset.package_name}/${asset.image}`;
imgDiv.alt = `${asset.type}-${asset.title}`;
clickDiv.appendChild(imgDiv);
const infoDiv = document.createElement("div");
infoDiv.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
const infoTitle = document.createElement("p");
infoTitle.classList.add("text-2xl");
infoTitle.innerHTML = asset.title;
const elemInfoMain = document.createElement("div");
elemInfoMain.classList.add("flex", "flex-row");
const deleteButton = document.createElement("div");
deleteButton.classList.add("h-8", "w-8", "cursor-pointer");
attachDeleteEvent(deleteButton, mainDiv, parent!, asset);
//FUCK SVG's
const deleteButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`
deleteButton.innerHTML= deleteButtonSVG;
elemInfoMain.appendChild(deleteButton);
const openButton = document.createElement("a");
openButton.classList.add("h-8", "w-8", "cursor-pointer");
openButton.href = `../catalog/package/${asset.package_name}`
const openButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`
openButton.innerHTML = openButtonSVG;
elemInfoMain.appendChild(openButton);
infoDiv.appendChild(elemInfoMain);
infoDiv.appendChild(infoTitle);
mainDiv.appendChild(clickDiv);
mainDiv.appendChild(infoDiv);
parent?.appendChild(mainDiv);
console.log(mainDiv);
}
pageLoad(async () => {
const mainElem = document.getElementById("main-theme");
try { attachThemeEvent(mainElem!, true) } catch(_) {}
const assets = await getAssets();
console.log(assets);
assets.map((asset) => { createElem(asset); });
}, true);
</script>

67
src/components/catalog/InstalledThemes.svelte
View file

@ -1,67 +0,0 @@
<script lang="ts">
import { Suspense, createSuspense } from "@svelte-drama/suspense";
const suspend = createSuspense();
import { Settings, settings } from "@utils/settings/index";
import Parent from "./Parent.svelte";
async function getItem(item) {
try {
const response = await fetch(`/api/packages/${item}`);
const data = await response.json();
return {
...data,
package_name: item
};
} catch (error) {
console.error("error: failed to fetch", error);
return null;
}
}
async function getAssets() {
const items = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes)) || [];
const promises = items.map(getItem);
const dataArray = await Promise.all(promises);
const accumulatedData = dataArray.filter((data) => data !== null);
console.log(JSON.stringify(accumulatedData));
return accumulatedData;
}
let assets = getAssets();
let compRef = [];
</script>
<Suspense>
{#snippet children(suspend)}
<div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
<div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(true)}}>
<img src='/classic_theme.png' alt="Classic Nebula" class="aspect-[16/9] rounded-t-3xl"/>
</div>
<div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
Classic Nebula
</div>
</div>
{#await suspend(assets) then data}
{#each Object.entries(data) as [key, asset]}
<Parent bind:this={compRef[key]}>
<div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
<div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image, asset.package_name)}}>
<img src={`/packages/${asset.package_name}/${asset.image}`} alt="theme" class="aspect-[16/9] rounded-t-3xl"/>
</div>
<div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
<div class="text-2xl"> {asset.title} </div>
<div class="flex flex-row">
<div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall("theme", asset.package_name); settings.marketPlaceSettings.changeTheme(true); compRef[key].$destroy()}}>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
<path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
</svg>
</div>
<a class="h-8 w-8 cursor-pointer" href={`../catalog/package/${asset.package_name}`}>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
<path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
</svg>
</a>
</div>
</div>
</div>
</Parent>
{/each}
{/await}
{/snippet}
</Suspense>

1
src/components/catalog/Parent.svelte
View file

@ -1,2 +1 @@
<!-- Legit just so we can use $destroy() -->
<slot />

4
src/pages/[lang]/settings/appearance.astro
View file

@ -1,5 +1,5 @@
---
import InstalledThemes from "@components/catalog/InstalledThemes.svelte";
import InstalledThemes from "@components/catalog/InstalledThemes.astro";
import Layout from "@layouts/Layout.astro";
import SettingsLayout from "@layouts/SettingsLayout.astro";
import SettingsSection from "@layouts/SettingsSection.astro";
@ -17,7 +17,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
subtitle="Choose a theme so your eyes don't hate us.">
<div class="flex flex-row flex-wrap gap-4 items-center font-roboto">
<div class="justify-center flex flex-row gap-6 flex-wrap md:justify-normal">
<InstalledThemes client:only="svelte" />
<InstalledThemes />
{MARKETPLACE_ENABLED &&
<a href={`/${lang}/catalog/1`} class="rounded-3xl bg-navbar-color w-64 flex flex-col">
<div class="w-full items-center justify-center flex aspect-[16/9]">

0
tailwind.config.mjs → tailwind.config.ts
View file