From 17a659345df7f092699caab9bf1cd16a5eca1fe3 Mon Sep 17 00:00:00 2001
From: notangelmario <savin@angelmario.eu>
Date: Tue, 24 Jan 2023 01:45:46 +0200
Subject: [PATCH] Added cover in app page

---
 components/Container.tsx      |   2 +-
 components/SlideContainer.tsx |   2 +-
 lib/app.ts                    |   2 +-
 routes/app/[id]/index.tsx     | 120 ++++++++++++++++++----------------
 scripts/update.ts             |  16 ++++-
 5 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/components/Container.tsx b/components/Container.tsx
index baca101..7f7be45 100644
--- a/components/Container.tsx
+++ b/components/Container.tsx
@@ -8,7 +8,7 @@ const Container = (props: Props & JSX.IntrinsicElements["h1"]) => {
 	return (
 		<div
 			{...props}
-			class={`md:container
+			class={`md:container lg:!max-w-screen-lg
 				${!props.disableGutters && "px-4"} 
 				${props.class || ""}
 			`}
diff --git a/components/SlideContainer.tsx b/components/SlideContainer.tsx
index 632b110..4d75883 100644
--- a/components/SlideContainer.tsx
+++ b/components/SlideContainer.tsx
@@ -5,7 +5,7 @@ export default function SlideContainer(props: JSX.IntrinsicElements["div"]) {
 		<div
 			{...props}
 			class={`
-				flex flex-row overflow-x-scroll md:container
+				flex flex-row overflow-x-scroll md:container lg:!max-w-screen-lg
 				${props.class || ""}
 			`}
 			style={{
diff --git a/lib/app.ts b/lib/app.ts
index 6eeb460..3032af7 100644
--- a/lib/app.ts
+++ b/lib/app.ts
@@ -1,7 +1,7 @@
 import "dotenv";
 
 export const APP = {
-	version: "3.0.0",
+	version: "3.1.0",
 	codename: "Cristina",
 	discordInvite: "https://discord.com/invite/DXke9aSZh6",
 	githubRepo: "https://github.com/notangelmario/paquet",
diff --git a/routes/app/[id]/index.tsx b/routes/app/[id]/index.tsx
index 58a83a4..b393be9 100644
--- a/routes/app/[id]/index.tsx
+++ b/routes/app/[id]/index.tsx
@@ -48,62 +48,71 @@ export default function App({ data }: PageProps<DataProps>) {
 					<Stack>
 						<Card
 							inset
-							class="bg-light dark:bg-dark flex flex-row flex-wrap gap-4"
+							disableGutters
+							class="bg-light dark:bg-dark"
 						>
-							<img
-								class="rounded w-20 h-20 shadow-outset-light dark:shadow-outset-dark bg-light-light dark:bg-dark-light"
-								src={data.app.icon}
-							/>
-							<div class="flex-1">
-								<h2 class="text-3xl">
-									{data.app.name}
-								</h2>
-								<p class="opacity-50">
-									{data.app.author}
-								</p>
-							</div>
-							<div class="min-w-full space-y-2 sm:min-w-[30%]">
-								<a
-									href={data.app.url}
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									<Button
-										icon="external-link"
-										fullWidth
-										style={{
-											backgroundColor:
-												data.app.accent_color,
-											boxShadow:
-												`0 0 8px ${data.app.accent_color}`,
-											color: "#ffffff",
-										}}
-										iconProps={{
-											name: "external-link",
-											color: "#ffffff",
-										}}
+							{data.app.cover &&
+								<img
+									src={data.app.cover}
+									class="w-full h-32 object-cover rounded-t"
+								/>
+							}
+							<div class="flex flex-row flex-wrap gap-4 p-4 shadow-inset-light dark:shadow-inset-dark">
+								<img
+									class="rounded w-20 h-20 shadow-outset-light dark:shadow-outset-dark bg-light-light dark:bg-dark-light"
+									src={data.app.icon}
+								/>
+								<div class="flex-1">
+									<h2 class="text-3xl">
+										{data.app.name}
+									</h2>
+									<p class="opacity-50">
+										{data.app.author}
+									</p>
+								</div>
+								<div class="min-w-full space-y-2 sm:min-w-[30%]">
+									<a
+										href={data.app.url}
+										target="_blank"
+										rel="noopener noreferrer"
 									>
-										Open
-									</Button>
-								</a>
-								{data.userLoggedIn
-									? (
-										<LoveAppButton
-											app={data.app}
-											ssrLoved={data.ssrLoved}
-										/>
-									)
-									: (
-										<a href="/login" class="block">
-											<Button
-												outlined
-												fullWidth
-												icon="heart"
-											>
-												Login to give hearts
-											</Button>
-										</a>
-									)}
+										<Button
+											icon="external-link"
+											fullWidth
+											style={{
+												backgroundColor:
+													data.app.accent_color,
+												boxShadow:
+													`0 0 8px ${data.app.accent_color}`,
+												color: "#ffffff",
+											}}
+											iconProps={{
+												name: "external-link",
+												color: "#ffffff",
+											}}
+										>
+											Open
+										</Button>
+									</a>
+									{data.userLoggedIn
+										? (
+											<LoveAppButton
+												app={data.app}
+												ssrLoved={data.ssrLoved}
+											/>
+										)
+										: (
+											<a href="/login" class="block">
+												<Button
+													outlined
+													fullWidth
+													icon="heart"
+												>
+													Login to give hearts
+												</Button>
+											</a>
+										)}
+								</div>
 							</div>
 						</Card>
 						<div>
@@ -192,7 +201,7 @@ export default function App({ data }: PageProps<DataProps>) {
 export const handler: Handler = async (_, ctx) => {
 	const { data: app } = await supabase.from("apps")
 		.select(
-			"id, name, author, description, url, icon, accent_color, screenshots, features, categories, github_url, gitlab_url",
+			"id, name, author, description, url, icon, cover, accent_color, screenshots, features, categories, github_url, gitlab_url",
 		)
 		.eq("id", ctx.params.id)
 		.single();
@@ -222,7 +231,6 @@ export const handler: Handler = async (_, ctx) => {
 
 	const { data: otherApps } = await supabase.from("random_apps")
 		.select("id, name, author, icon")
-		.containedBy("categories", app.categories)
 		.neq("id", app.id)
 		.limit(5);
 
diff --git a/scripts/update.ts b/scripts/update.ts
index 5189cc8..74b0741 100644
--- a/scripts/update.ts
+++ b/scripts/update.ts
@@ -306,6 +306,18 @@ await Promise.all(apps.map(async (app) => {
 				await clearAppFromStorage(app.id, "covers");
 
 				if (cover_url) {
+						if (cover_url.startsWith("http")) {
+							cover_url = slashSlashes(cover_url);
+						} else if (cover_url.startsWith("//")) {
+							cover_url = "https://" + cover_url.slice(2);
+						} else if (cover_url.startsWith("/")) {
+							cover_url = slashSlashes(new URL(app.url).origin) +
+								"/" + slashSlashes(cover_url);
+						} else {
+							cover_url = slashSlashes(manifestParent.join("/")) +
+								"/" + slashSlashes(cover_url);
+						}
+
 					const cover_blob = await fetch(
 						new URL(cover_url, app.url).href,
 						{
@@ -342,8 +354,8 @@ await Promise.all(apps.map(async (app) => {
 				manifest_hash: hash,
 				icon: `${IMAGES_URL}/${app.id}/icon`,
 				icon_original: icon_url,
-				cover: `${IMAGES_URL}/${app.id}/cover`,
-				cover_original: cover_url,
+				cover: cover_url ? `${IMAGES_URL}/${app.id}/cover` : undefined,
+				cover_original: cover_url || undefined,
 			})
 			.eq("id", app.id);
 	}