The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix AI SEO and add original file button
+49
-27
+6
-2
app/ai-gallery/[uploadId]/layout.tsx
+6
-2
app/ai-gallery/[uploadId]/layout.tsx
···
11
11
import { getPageAnalytics } from "@/lib/analytics";
12
12
import { getGuild } from "@/lib/api";
13
13
import SadWumpusPic from "@/public/sad-wumpus.gif";
14
+
import { truncate } from "@/utils/truncate";
14
15
import { getBaseUrl, getCanonicalUrl } from "@/utils/urls";
15
16
16
17
import { getUpload, getUploads } from "../api";
···
27
28
params
28
29
}: Props): Promise<Metadata> => {
29
30
const upload = await getUpload(params.uploadId);
31
+
const prompt = "prompt" in upload
32
+
? truncate(upload.prompt.split(" ").map((str) => str.replace(/^\w/, (char) => char.toUpperCase())).join(" "), 24)
33
+
: null;
30
34
31
-
const title = "Free /image Ai for Discord";
32
-
const description = `Amazing AI generated images ${"model" in upload ? `using the ${upload.model}` : ""}, created using our versatile image command.`.replace(" ", " ");
35
+
const title = prompt ? `${prompt} - /image Ai` : "Free /image Ai for Discord";
36
+
const description = `Amazing AI generated images ${"model" in upload ? `using the ${upload.model}` : ""}, created using Wamellow's versatile /image command for Discord.`.replace(/ +/g, " ");
33
37
const images = "id" in upload ? `https://r2.wamellow.com/ai-image/${upload.id}.webp` : `${getBaseUrl()}/waya-v3.jpg`;
34
38
const url = getCanonicalUrl("ai-gallery", params.uploadId);
35
39
+43
-25
app/ai-gallery/[uploadId]/page.tsx
+43
-25
app/ai-gallery/[uploadId]/page.tsx
···
1
1
import { Chip, Image } from "@nextui-org/react";
2
2
import NextImage from "next/image";
3
-
import { notFound } from "next/navigation";
3
+
import Link from "next/link";
4
+
import { HiExternalLink } from "react-icons/hi";
4
5
5
6
import { getUpload } from "../api";
6
7
···
14
15
params
15
16
}: Props) {
16
17
const upload = await getUpload(params.uploadId);
17
-
if (!upload || "statusCode" in upload) return notFound();
18
+
if (!upload || "statusCode" in upload) return;
19
+
20
+
const src = `https://r2.wamellow.com/ai-image/${upload.id}.webp`;
18
21
19
22
return (
20
-
<div className="relative">
21
-
<Image
22
-
alt={upload.prompt}
23
-
as={NextImage}
24
-
className="rounded-lg"
25
-
height={1024}
26
-
isBlurred
27
-
isZoomed
28
-
src={`https://r2.wamellow.com/ai-image/${upload.id}.webp`}
29
-
width={1024}
30
-
/>
23
+
<div>
31
24
32
-
<div className="relative md:absolute px-2 md:p-4 bottom-8 md:bottom-0 left-0 z-10 -mb-466md:mb-0">
33
-
<div className="bg-wamellow backdrop-blur-xl backdrop-brightness-50 rounded-lg overflow-hidden shadow-lg p-4">
34
-
<Chip
35
-
color="secondary"
36
-
className="mb-2"
37
-
variant="flat"
38
-
size="lg"
39
-
>
40
-
{upload.model}
41
-
</Chip>
42
-
<div className="text-xl font-medium text-neutral-200">{upload.prompt}</div>
43
-
<div className="text-medium">{upload.negativePrompt}</div>
25
+
<div className="relative">
26
+
<Image
27
+
alt={upload.prompt}
28
+
as={NextImage}
29
+
className="rounded-lg"
30
+
height={1024}
31
+
isBlurred
32
+
isZoomed
33
+
src={src}
34
+
width={1024}
35
+
/>
36
+
37
+
<div className="relative md:absolute px-2 md:p-4 bottom-8 md:bottom-0 left-0 z-10 -mb-466md:mb-0">
38
+
<div className="bg-wamellow backdrop-blur-xl backdrop-brightness-50 rounded-lg overflow-hidden shadow-lg p-4">
39
+
<Chip
40
+
color="secondary"
41
+
className="mb-2"
42
+
variant="dot"
43
+
size="lg"
44
+
>
45
+
{upload.model}
46
+
</Chip>
47
+
<div className="text-xl font-medium text-neutral-200">{upload.prompt}</div>
48
+
<div className="text-medium">{upload.negativePrompt}</div>
49
+
</div>
44
50
</div>
45
51
</div>
52
+
53
+
54
+
55
+
<Link
56
+
className="my-1 z-20 flex items-center gap-1"
57
+
target="_blank"
58
+
href={src}
59
+
>
60
+
<span>Open original file</span>
61
+
<HiExternalLink />
62
+
</Link>
63
+
46
64
</div>
47
65
);
48
66
}