fix: buttons; homepage drawings to svgs; canonical tags; css

Author: omznc

messages/bs.json

@@ -1066,7 +1066,8 @@
 					"minimumChars": "Unesite najmanje 2 slova",
 					"noResults": "Nema rezultata",
 					"chooseUserDescription": "Ako je korisnik već na platformi, možete ga pronaći ovdje.",
-					"emailDescription": "Ako ne možete pronaći korisnika, ili već znate njihov email, unesite ga ovdje."
+					"emailDescription": "Ako ne možete pronaći korisnika, ili već znate njihov email, unesite ga ovdje.",
+					"or": "ili"
 				},
 				"managers": {
 					"promote": {

messages/en.json

@@ -1017,7 +1017,8 @@
 					"minimumChars": "Enter at least 2 characters",
 					"noResults": "No results",
 					"chooseUserDescription": "If the user is already on the platform, you can find them here.",
-					"emailDescription": "If you can't find the user, or already know their email, enter it here."
+					"emailDescription": "If you can't find the user, or already know their email, enter it here.",
+					"or": "or"
 				},
 				"managers": {
 					"title": "Managers",

public/footer.webp

@@ -9,10 +9,9 @@ import { SiGithub } from "@icons-pack/react-simple-icons";
 import { remark } from "remark";
 import remarkHtml from "remark-html";
 import remarkGfm from "remark-gfm";
-import Peeking from "@public/peeking.webp";
-import Image from "next/image";
 
 import "./markdown.css";
+import { PeekingDrawing } from "@/components/logos/drawings/peeking-drawing";
 
 // Helper function to format GitHub release body markdown
 async function formatReleaseBody(body: string): Promise<string> {
@@ -101,14 +100,7 @@ export default async function ChangelogPage() {
 
 			{/* Latest Release */}
 			<div className="relative mb-16">
-				<Image
-					priority={true}
-					loading="eager"
-					src={Peeking}
-					alt="An airsoft player peeking from behind a wall"
-					draggable={false}
-					className="z-10 absolute -right-5 md:-right-0 -top-11 lg:-top-27 transition-all w-full max-w-[180px] lg:max-w-[300px] dark:invert"
-				/>
+				<PeekingDrawing className="z-10 absolute -right-5 md:-right-0 -top-11 lg:-top-27 transition-all w-full max-w-[180px] lg:max-w-[300px] dark:invert" />
 				<h2 className="text-2xl font-bold mb-6">{t("latestRelease")}</h2>
 				<Card className="relative overflow-hidden border-2 border-primary/20 shadow-lg">
 					<CardHeader className="bg-primary/5">

public/home.webp

@@ -106,9 +106,14 @@ export async function generateMetadata(props: PageProps): Promise<Metadata> {
 		ogUrl.searchParams.set("logo", club.logo);
 	}
 
+	const canonicalUrl = `${env.NEXT_PUBLIC_BETTER_AUTH_URL}/clubs/${club.slug || club.id}`;
+
 	return {
 		title: `${club.name} - RECONNED`,
 		description: club.description?.slice(0, 160) ?? t("description"),
+		alternates: {
+			canonical: canonicalUrl,
+		},
 		openGraph: {
 			images: [
 				{

public/peeking.webp

@@ -4,6 +4,7 @@ import { Pagination } from "@/app/[locale]/(public)/_components/pagination";
 import { SearchResultCard } from "@/app/[locale]/(public)/search/_components/search-result-card";
 import { VerifiedClubIcon } from "@/components/icons";
 import type { Metadata } from "next";
+import { env } from "@/lib/env";
 
 const ITEMS_PER_PAGE = 12;
 
@@ -76,5 +77,8 @@ export async function generateMetadata(): Promise<Metadata> {
 		keywords: t("layout.metadata.keywords")
 			.split(",")
 			.map((keyword) => keyword.trim()),
+		alternates: {
+			canonical: `${env.NEXT_PUBLIC_BETTER_AUTH_URL}/clubs`,
+		},
 	};
 }

src/app/[locale]/(public)/changelog/page.tsx

@@ -8,6 +8,7 @@ import { FEATURE_FLAGS } from "@/lib/server-utils";
 import { isAfter, isBefore } from "date-fns";
 import { getLocale, getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";
+import type { Metadata } from "next";
 
 interface EventApplicationPageProps {
 	params: Promise<{
@@ -146,3 +147,43 @@ export default async function EventApplicationPage(props: EventApplicationPagePr
 		</div>
 	);
 }
+
+export async function generateMetadata(props: EventApplicationPageProps): Promise<Metadata> {
+	const params = await props.params;
+	const t = await getTranslations("public.events.metadata");
+
+	const event = await prisma.event.findFirst({
+		where: {
+			OR: [
+				{
+					id: params.id,
+				},
+				{
+					slug: params.id,
+				},
+			],
+		},
+		select: {
+			id: true,
+			slug: true,
+			name: true,
+			description: true,
+		},
+	});
+
+	if (!event) {
+		return {
+			title: "Event Not Found - RECONNED",
+		};
+	}
+
+	const canonicalUrl = `${env.NEXT_PUBLIC_BETTER_AUTH_URL}/events/${event.slug || event.id}/apply`;
+
+	return {
+		title: `Apply to ${event.name} - RECONNED`,
+		description: `Apply to participate in ${event.name}`,
+		alternates: {
+			canonical: canonicalUrl,
+		},
+	};
+}

src/app/[locale]/(public)/clubs/[id]/page.tsx

@@ -112,9 +112,14 @@ export async function generateMetadata(props: PageProps): Promise<Metadata> {
 		ogUrl.searchParams.set("image", event.image);
 	}
 
+	const canonicalUrl = `${env.NEXT_PUBLIC_BETTER_AUTH_URL}/events/${event.slug || event.id}`;
+
 	return {
 		title: `${event.name} - RECONNED`,
 		description: event.description.slice(0, 160) ?? t("description"),
+		alternates: {
+			canonical: canonicalUrl,
+		},
 		openGraph: {
 			images: [
 				{