feat: add openGraph metadata

TODO.md

@@ -73,7 +73,7 @@
 ## Стиль
 
 - [X] Тёмная тема
-- [ ] Больше метаданных для превью ссылки страницы
+- [X] Больше метаданных для превью ссылки страницы
 
 ## Баги
 

app/bookmarks/[slug]/page.tsx

@@ -15,9 +15,6 @@ export async function generateMetadata({ params }) {
 }
 
 export default function Index({ params }) {
-  const metadata = {
-    title: "AniX | " + SectionTitleMapping[params.slug],
-  };
   return (
     <BookmarksCategoryPage
       slug={params.slug}

app/bookmarks/page.tsx

@@ -3,8 +3,6 @@ export const metadata = {
 };
 
 import { BookmarksPage } from "#/pages/Bookmarks";
-  
 export default function Index() {
   return <BookmarksPage />;
 }
-  

app/home/[slug]/page.tsx

@@ -14,9 +14,6 @@ export async function generateMetadata({ params }) {
 }
 
 export default function Index({ params }) {
-  const metadata = {
-    title: "AniX | " + SectionTitleMapping[params.slug],
-  };
   return (
     <IndexCategoryPage
       slug={params.slug}

app/layout.tsx

@@ -3,11 +3,35 @@ import { App } from "./App";
 import { ThemeModeScript } from "flowbite-react";
 
 export const metadata = {
-  title: {
-    template: 'AniX | %s',
-    default: 'AniX',
+  keywords: ["anix", "anixart", "anime", "аниксарт", "аниме"],
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+  title: {
+    template: "AniX | %s",
+    default: "AniX | Домашняя",
+  },
+  description: "Неофициальное приложение для anixart.tv",
+  openGraph: {
+    url: process.env.VERCEL_URL
+      ? `https://${process.env.VERCEL_URL}`
+      : `http://localhost:${process.env.PORT || 3000}`,
+    images: [
+      {
+        url: `${
+          process.env.VERCEL_URL
+            ? "https://" + process.env.VERCEL_URL
+            : "http://localhost:" + process.env.PORT || 3000
+        }/opengraph.png`, // Must be an absolute URL
+        width: 800,
+        height: 600,
+      },
+    ],
+    locale: "ru_RU",
+    type: "website",
   },
-  description: "Generated by create next app",
 };
 
 export default function RootLayout({ children }) {

app/login/page.tsx

@@ -1,6 +1,11 @@
 import dynamic from "next/dynamic";
 import { LoginPage } from "#/pages/Login";
 
+export const metadata = {
+  title: "Авторизация",
+  description: "Вход в аккаунт anixart",
+}
+
 const LoginDynamic = dynamic(() => Promise.resolve(LoginPage), {
   ssr: false,
 });

app/page.tsx

@@ -1,7 +1,3 @@
-export const metadata = {
-  title: "AniX | Домашняя",
-};
-
 import { IndexPage } from "./pages/Index";
 
 export default function Index() {

app/profile/[id]/page.tsx

@@ -1,12 +1,30 @@
 import { ProfilePage } from "#/pages/Profile";
 import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
 
-export async function generateMetadata({ params }) {
+export async function generateMetadata(
+  { params },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
   const id: string = params.id;
-  const profile: any = await fetchDataViaGet(`https://api.anixart.tv/profile/${id}`);
+  const profile: any = await fetchDataViaGet(
+    `https://api.anixart.tv/profile/${id}`
+  );
+  const previousOG = (await parent).openGraph;
 
   return {
-    title: "Профиль " + profile.profile.login,
+    title: "Профиль - " + profile.profile.login,
+    description: profile.profile.status,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: profile.profile.avatar, // Must be an absolute URL
+          width: 600,
+          height: 600,
+        },
+      ],
+    },
   };
 }
 

app/related/[id]/page.tsx

@@ -1,13 +1,26 @@
 import { RelatedPage } from "#/pages/Related";
 import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
 
-export async function generateMetadata({ params }) {
+export async function generateMetadata({ params }, parent: ResolvingMetadata): Promise<Metadata> {
   const id:string = params.id;
   const related: any = await fetchDataViaGet(`https://api.anixart.tv/related/${id}/0`);
   const firstRelease: any = await fetchDataViaGet(`https://api.anixart.tv/release/${related.content[0].id}`);
+  const previousOG = (await parent).openGraph;
 
   return {
-    title: "Франшиза " + firstRelease.release.related.name_ru || firstRelease.release.related.name,
+    title: "Франшиза - " + firstRelease.release.related.name_ru || firstRelease.release.related.name,
+    description: firstRelease.release.description,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: firstRelease.release.image, // Must be an absolute URL
+          width: 600,
+          height: 800,
+        },
+      ],
+    },
   };
 }
 

app/release/[id]/page.tsx

@@ -1,16 +1,32 @@
 import { ReleasePage } from "#/pages/Release";
 import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
 
-export async function generateMetadata({ params }) {
-  const id = params.id
+export async function generateMetadata(
+  { params },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id = params.id;
   const release = await fetchDataViaGet(`https://api.anixart.tv/release/${id}`);
+  const previousOG = (await parent).openGraph;
 
   return {
     title: release.release.title_ru,
+    description: release.release.description,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: release.release.image, // Must be an absolute URL
+          width: 600,
+          height: 800,
+        },
+      ],
+    },
   };
 }
 
 export default async function Search({ params }) {
-  const id = params.id
+  const id = params.id;
   return <ReleasePage id={id} />;
 }

app/search/page.tsx

@@ -1,8 +1,10 @@
 import dynamic from "next/dynamic";
 import { SearchPage } from "#/pages/Search";
+import { Metadata } from "next";
 
-export async function generateMetadata({ searchParams }) {
+export async function generateMetadata({ searchParams }): Promise<Metadata> {
   const query = searchParams.q;
+
   return {
     title: query || "Поиск",
   };