Like seriously
This commit is contained in:
parent
5fe93963f3
commit
70bff6156a
2 changed files with 29 additions and 29 deletions
|
|
@ -2,34 +2,34 @@
|
||||||
const { package_name } = Astro.params;
|
const { package_name } = Astro.params;
|
||||||
import Layout from "@layouts/Layout.astro";
|
import Layout from "@layouts/Layout.astro";
|
||||||
const response = await fetch(new URL("/api/packages/" + package_name, Astro.url));
|
const response = await fetch(new URL("/api/packages/" + package_name, Astro.url));
|
||||||
const assets_json = await response.json();
|
const assetsJson = await response.json();
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Package">
|
<Layout title="Package">
|
||||||
<div class="flex flex-wrap mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center pb-64 roboto">
|
<div class="flex flex-wrap mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center pb-64 roboto">
|
||||||
{assets_json.error ? (
|
{assetsJson.error ? (
|
||||||
<h1 class="text-text-color text-3xl"> Unexpected error. Are you sure you typed the name right? </h1>
|
<h1 class="text-text-color text-3xl"> Unexpected error. Are you sure you typed the name right? </h1>
|
||||||
) : (
|
) : (
|
||||||
<div class="flex flex-row items-center text-text-color bg-navbar-color rounded-2xl">
|
<div class="flex flex-row items-center text-text-color bg-navbar-color rounded-2xl">
|
||||||
{assets_json.background_video ? (
|
{assetsJson.background_video ? (
|
||||||
// Background video
|
// Background video
|
||||||
<video src={`/videos/${assets_json.background_video}`} controls class="w-[44rem] h-[25rem] object-cover rounded-xl">
|
<video src={`/videos/${assetsJson.background_video}`} controls class="w-[44rem] h-[25rem] object-cover rounded-xl">
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
) : assets_json.backgroundImage ? (
|
) : assetsJson.backgroundImage ? (
|
||||||
// Background image
|
// Background image
|
||||||
<div style={{backgroundImage: `url(/images/${assets_json.backgroundImage})`}} class="w-[44rem] h-[25rem] bg-cover bg-center rounded-xl"/>
|
<div style={{backgroundImage: `url(/images/${assetsJson.backgroundImage})`}} class="w-[44rem] h-[25rem] bg-cover bg-center rounded-xl"/>
|
||||||
) : (
|
) : (
|
||||||
// Fallback to cover image
|
// Fallback to cover image
|
||||||
<img src={`/images/${assets_json.image}`} alt={assets_json.title} class="w-[44rem] h-[25rem] object-cover rounded-xl"/>
|
<img src={`/images/${assetsJson.image}`} alt={assetsJson .title} class="w-[44rem] h-[25rem] object-cover rounded-xl"/>
|
||||||
)}
|
)}
|
||||||
<div class="flex flex-col ml-7 p-16">
|
<div class="flex flex-col ml-7 p-16">
|
||||||
<div class="text-xl">{assets_json.type}</div>
|
<div class="text-xl">{assetsJson.type}</div>
|
||||||
<div class="text-4xl roboto font-semibold">{assets_json.title}</div>
|
<div class="text-4xl roboto font-semibold">{assetsJson.title}</div>
|
||||||
<div class="text-xl">
|
<div class="text-xl">
|
||||||
By <strong>{assets_json.author}</strong>
|
By <strong>{assetsJson.author}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-xl">{assets_json.description}</div>
|
<div class="text-xl">{assetsJson.description}</div>
|
||||||
<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>
|
||||||
|
|
@ -38,7 +38,7 @@ const assets_json = await response.json();
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<script is:inline define:vars={{ assets_json, package_name }}>
|
<script is:inline define:vars={{ assetsJson, package_name }}>
|
||||||
// determine if this is installed
|
// determine if this is installed
|
||||||
let items = JSON.parse(localStorage.getItem("installed_themes")) || [];
|
let items = JSON.parse(localStorage.getItem("installed_themes")) || [];
|
||||||
|
|
||||||
|
|
@ -77,24 +77,24 @@ const assets_json = await response.json();
|
||||||
JSON.stringify(installedThemes)
|
JSON.stringify(installedThemes)
|
||||||
);
|
);
|
||||||
|
|
||||||
if (assets_json.background_video) {
|
if (assetsJson.background_video) {
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"background_video",
|
"background_video",
|
||||||
assets_json.background_video
|
assetsJson.background_video
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
localStorage.removeItem("video");
|
localStorage.removeItem("video");
|
||||||
}
|
}
|
||||||
if (assets_json.background_image) {
|
if (assetsJson.background_image) {
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"background_image",
|
"background_image",
|
||||||
assets_json.background_image
|
assetsJson.background_image
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
localStorage.removeItem("background_image");
|
localStorage.removeItem("background_image");
|
||||||
}
|
}
|
||||||
if (assets_json.type == "theme") {
|
if (assetsJson.type == "theme") {
|
||||||
localStorage.setItem("stylesheet", "/styles/" + assets_json.payload);
|
localStorage.setItem("stylesheet", "/styles/" + assetsJson.payload);
|
||||||
}
|
}
|
||||||
location.reload();
|
location.reload();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@ const { page } = Astro.params;
|
||||||
|
|
||||||
const response = await fetch(new URL("/api/catalog-assets/", Astro.url));
|
const response = await fetch(new URL("/api/catalog-assets/", Astro.url));
|
||||||
console.log(new URL("/api/catalog-assets/", Astro.url));
|
console.log(new URL("/api/catalog-assets/", Astro.url));
|
||||||
const assets_json = await response.json();
|
const assetsJson = await response.json();
|
||||||
|
|
||||||
const next_page = parseInt(page!) + 1;
|
const nextPage = parseInt(page!) + 1;
|
||||||
const previous_page = parseInt(page!) - 1;
|
const previousPage = parseInt(page!) - 1;
|
||||||
const last_page = assets_json.pages;
|
const lastPage = assetsJson.pages;
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Catalog">
|
<Layout title="Catalog">
|
||||||
|
|
@ -24,22 +24,22 @@ const last_page = assets_json.pages;
|
||||||
<a href={"/catalog/" + 1} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"> 1 </a>
|
<a href={"/catalog/" + 1} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"> 1 </a>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{previous_page > 0 && (
|
{previousPage > 0 && (
|
||||||
<a href={"/catalog/" + previous_page} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{previous_page}</a>
|
<a href={"/catalog/" + previousPage} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{previousPage}</a>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{/* The greyed out page the user is currently on */}
|
{/* The greyed out page the user is currently on */}
|
||||||
<a class="w-8 h-8 bg-lighter items-center text-center content-center text-text-color rounded-md">{page}</a>
|
<a class="w-8 h-8 bg-lighter items-center text-center content-center text-text-color rounded-md">{page}</a>
|
||||||
{next_page < last_page && (
|
{nextPage < lastPage && (
|
||||||
<a href={"/catalog/" + next_page} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{next_page}</a>
|
<a href={"/catalog/" + nextPage} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{nextPage}</a>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{/* Pagnation input */}
|
{/* Pagnation input */}
|
||||||
<Pagnation />
|
<Pagnation />
|
||||||
{/* The last page. If the user is on this page, don't show it. */}
|
{/* The last page. If the user is on this page, don't show it. */}
|
||||||
{page != last_page && (
|
{page != lastPage && (
|
||||||
<a href={"/catalog/" + assets_json.pages} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">
|
<a href={"/catalog/" + assetsJson.pages} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">
|
||||||
{assets_json.pages}
|
{assetsJson.pages}
|
||||||
</a>
|
</a>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue