mirror of
https://github.com/NebulaServices/Nebula.git
synced 2025-05-13 12:00:01 -04:00
theme image embed
This commit is contained in:
rift
parent
aab156560f
commit
4ab3de409e
2 changed files with 177 additions and 80 deletions
|
|
@ -7,9 +7,10 @@ interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
noHeader?: string;
|
noHeader?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
|
image: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title, noHeader, description } = Astro.props;
|
const { title, noHeader, description, image } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
|
@ -22,6 +23,7 @@ const { title, noHeader, description } = Astro.props;
|
||||||
content={description ? description : "Astro description"}
|
content={description ? description : "Astro description"}
|
||||||
/>
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta property="og:image" content={image ? image : ""} />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,98 @@
|
||||||
---
|
---
|
||||||
const { packageName } = Astro.params;
|
const { packageName } = Astro.params;
|
||||||
import Layout from "@layouts/Layout.astro";
|
import Layout from "@layouts/Layout.astro";
|
||||||
const response = await fetch(new URL("/api/packages/" + packageName, Astro.url));
|
const response = await fetch(
|
||||||
|
new URL("/api/packages/" + packageName, Astro.url)
|
||||||
|
);
|
||||||
const assetsJson = await response.json();
|
const assetsJson = await response.json();
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={`Package: ${assetsJson.title}`} description=`${assetsJson.title} is a package on Nebula. Start using this package on Nebula today!`>
|
<Layout
|
||||||
<div class="flex flex-wrap min-[1032px]:mt-16 mt-8 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center lg:pb-64 font-roboto max-md:p-4">
|
title={`Package: ${assetsJson.title}`}
|
||||||
{assetsJson.error && <h1 class="text-text-color text-3xl font-bold"> Unexpected error. Is the name right? </h1>}
|
description=`${assetsJson.title} is a package on Nebula. Start using this package on Nebula today!`
|
||||||
{!assetsJson.error &&
|
image={assetsJson.image}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex flex-wrap min-[1032px]:mt-16 mt-8 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center lg:pb-64 font-roboto max-md:p-4"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
assetsJson.error && (
|
||||||
|
<h1 class="text-text-color text-3xl font-bold">
|
||||||
|
{" "}
|
||||||
|
Unexpected error. Is the name right?{" "}
|
||||||
|
</h1>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
!assetsJson.error && (
|
||||||
<div class="flex flex-col max-md:min-[1032px]:justify-center md:min-[1032px]:flex-row items-center text-text-color bg-navbar-color rounded-2xl">
|
<div class="flex flex-col max-md:min-[1032px]:justify-center md:min-[1032px]:flex-row items-center text-text-color bg-navbar-color rounded-2xl">
|
||||||
{assetsJson.background_video &&
|
{assetsJson.background_video && (
|
||||||
<video src={`/packages/${packageName}/${assetsJson.background_video}`} controls class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl">
|
<video
|
||||||
|
src={`/packages/${packageName}/${assetsJson.background_video}`}
|
||||||
|
controls
|
||||||
|
class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"
|
||||||
|
>
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
}
|
)}
|
||||||
{assetsJson.backgroundImage &&
|
{assetsJson.backgroundImage && (
|
||||||
<div style={{backgroundImage: `url(/packages/${packageName}/${assetsJson.backgroundImage})`}} class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover bg-center rounded-xl"/>
|
<div
|
||||||
}
|
style={{
|
||||||
{!assetsJson.background_video && !assetsJson.backgroundImage && <img loading="lazy" src={`/packages/${packageName}/${assetsJson.image}`} alt={assetsJson.title} class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"/>}
|
backgroundImage: `url(/packages/${packageName}/${assetsJson.backgroundImage})`,
|
||||||
|
}}
|
||||||
|
class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover bg-center rounded-xl"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{!assetsJson.background_video && !assetsJson.backgroundImage && (
|
||||||
|
<img
|
||||||
|
loading="lazy"
|
||||||
|
src={`/packages/${packageName}/${assetsJson.image}`}
|
||||||
|
alt={assetsJson.title}
|
||||||
|
class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<div class="flex flex-col ml-7 md:p-16 p-10">
|
<div class="flex flex-col ml-7 md:p-16 p-10">
|
||||||
<p class="text-xl">{assetsJson.type === "plugin-page" || assetsJson.type === "plugin-sw" ? "plugin": assetsJson.type}</p>
|
<p class="text-xl">
|
||||||
<h1 class="text-4xl font-roboto font-semibold">{assetsJson.title}</h1>
|
{assetsJson.type === "plugin-page" ||
|
||||||
<p class="text-xl"> By: <strong>{assetsJson.author}</strong></p>
|
assetsJson.type === "plugin-sw"
|
||||||
|
? "plugin"
|
||||||
|
: assetsJson.type}
|
||||||
|
</p>
|
||||||
|
<h1 class="text-4xl font-roboto font-semibold">
|
||||||
|
{assetsJson.title}
|
||||||
|
</h1>
|
||||||
|
<p class="text-xl">
|
||||||
|
{" "}
|
||||||
|
By: <strong>{assetsJson.author}</strong>
|
||||||
|
</p>
|
||||||
<p class="text-xl">{assetsJson.description}</p>
|
<p class="text-xl">{assetsJson.description}</p>
|
||||||
<button class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9" id="install">
|
<button
|
||||||
|
class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9"
|
||||||
|
id="install"
|
||||||
|
>
|
||||||
Install
|
Install
|
||||||
</button>
|
</button>
|
||||||
<button class="hidden bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9" id="uninstall">
|
<button
|
||||||
|
class="hidden bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9"
|
||||||
|
id="uninstall"
|
||||||
|
>
|
||||||
Uninstall
|
Uninstall
|
||||||
</button>
|
</button>
|
||||||
<a href="../1" class="w-full bg-background text-text-color border-none rounded-lg text-l max-md:mt-7 px-4 py-4 h-full flex-grow md:text-right text-center font-bold underline underline-offset-4 decoration-2 hover:decoration-border-color transition-colors duration-300">Go Back</a>
|
<a
|
||||||
|
href="../1"
|
||||||
|
class="w-full bg-background text-text-color border-none rounded-lg text-l max-md:mt-7 px-4 py-4 h-full flex-grow md:text-right text-center font-bold underline underline-offset-4 decoration-2 hover:decoration-border-color transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Go Back
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<variable-define data-assets={JSON.stringify(assetsJson)} data-name={packageName} data-type={assetsJson.type} />
|
<variable-define
|
||||||
|
data-assets={JSON.stringify(assetsJson)}
|
||||||
|
data-name={packageName}
|
||||||
|
data-type={assetsJson.type}></variable-define>
|
||||||
</Layout>
|
</Layout>
|
||||||
<script>
|
<script>
|
||||||
import { pageLoad } from "@utils/events";
|
import { pageLoad } from "@utils/events";
|
||||||
|
|
@ -53,15 +110,27 @@ import type { SWPagePlugin } from "@utils/settings/types";
|
||||||
packageType = this.dataset.type as PackageType;
|
packageType = this.dataset.type as PackageType;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
customElements.define('variable-define', VariableDefiner);
|
customElements.define("variable-define", VariableDefiner);
|
||||||
const fn = () => {
|
const fn = () => {
|
||||||
const cssItems = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes) as string) || [];
|
const cssItems =
|
||||||
|
JSON.parse(
|
||||||
|
localStorage.getItem(Settings.AppearanceSettings.themes) as string
|
||||||
|
) || [];
|
||||||
const cssItemExists = cssItems.indexOf(packageName) !== -1;
|
const cssItemExists = cssItems.indexOf(packageName) !== -1;
|
||||||
const pluginItems = JSON.parse(localStorage.getItem(Settings.PluginSettings.plugins) as string) || [];
|
const pluginItems =
|
||||||
|
JSON.parse(
|
||||||
|
localStorage.getItem(Settings.PluginSettings.plugins) as string
|
||||||
|
) || [];
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
const pluginItemExists = pluginItems.find(({ name, remove }) => name === packageName && remove !== true);
|
const pluginItemExists = pluginItems.find(
|
||||||
const installButton = document.getElementById("install") as HTMLButtonElement;
|
({ name, remove }) => name === packageName && remove !== true
|
||||||
const uninstallButton = document.getElementById("uninstall") as HTMLButtonElement;
|
);
|
||||||
|
const installButton = document.getElementById(
|
||||||
|
"install"
|
||||||
|
) as HTMLButtonElement;
|
||||||
|
const uninstallButton = document.getElementById(
|
||||||
|
"uninstall"
|
||||||
|
) as HTMLButtonElement;
|
||||||
const payload = assetsJson ? JSON.parse(assetsJson) : undefined;
|
const payload = assetsJson ? JSON.parse(assetsJson) : undefined;
|
||||||
if (cssItemExists || pluginItemExists) {
|
if (cssItemExists || pluginItemExists) {
|
||||||
uninstallButton.classList.remove("hidden");
|
uninstallButton.classList.remove("hidden");
|
||||||
|
|
@ -69,21 +138,47 @@ import type { SWPagePlugin } from "@utils/settings/types";
|
||||||
}
|
}
|
||||||
installButton.addEventListener("click", () => {
|
installButton.addEventListener("click", () => {
|
||||||
console.log(payload);
|
console.log(payload);
|
||||||
settings.marketPlaceSettings.install(
|
settings.marketPlaceSettings
|
||||||
payload.type === "theme" ? {theme: {payload: payload.payload, video: payload.background_video, bgImage: payload.background_image}} :
|
.install(
|
||||||
payload.type === "plugin-page" ? {plugin: {name: packageName, src: payload.payload, type: "page" }} : {plugin: { name: packageName, src: payload.payload, type: "serviceWorker" } },
|
payload.type === "theme"
|
||||||
packageName, payload.payload
|
? {
|
||||||
).then(() => {
|
theme: {
|
||||||
|
payload: payload.payload,
|
||||||
|
video: payload.background_video,
|
||||||
|
bgImage: payload.background_image,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: payload.type === "plugin-page"
|
||||||
|
? {
|
||||||
|
plugin: {
|
||||||
|
name: packageName,
|
||||||
|
src: payload.payload,
|
||||||
|
type: "page",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
plugin: {
|
||||||
|
name: packageName,
|
||||||
|
src: payload.payload,
|
||||||
|
type: "serviceWorker",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
packageName,
|
||||||
|
payload.payload
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
installButton.classList.add("hidden");
|
installButton.classList.add("hidden");
|
||||||
uninstallButton.classList.remove("hidden");
|
uninstallButton.classList.remove("hidden");
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
uninstallButton.addEventListener("click", () => {
|
uninstallButton.addEventListener("click", () => {
|
||||||
settings.marketPlaceSettings.uninstall(packageType as PackageType, packageName).then(() => {
|
settings.marketPlaceSettings
|
||||||
uninstallButton.classList.add("hidden")
|
.uninstall(packageType as PackageType, packageName)
|
||||||
|
.then(() => {
|
||||||
|
uninstallButton.classList.add("hidden");
|
||||||
installButton.classList.remove("hidden");
|
installButton.classList.remove("hidden");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
pageLoad(fn);
|
pageLoad(fn);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue