Merge branch 'feature/song-page-tags'

Author: Bentroen

web/public/docs/guidelines.md

@@ -2,7 +2,7 @@
 
 > Last updated: October 7, 2024
 
-Welcome to **Note Block World**! We strive to be the best online community for everyone to create, share, and listen to note block music from around the world, no matter your level of experience!
+Welcome to **Note Block World**! We strive to be the best online community for everyone to discover, share, and listen to note block music from around the world, no matter your level of experience!
 
 In this page, you’ll find a few guidelines that we’ve put in place to help keep Note Block World a healthy, safe, and positive space for all of our members. We kindly ask that you read these Guidelines carefully and follow them closely when contributing to the community!
 

web/src/app/(content)/(info)/about/page.tsx

@@ -6,15 +6,7 @@ import { NoteBlockWorldLogo } from '@web/src/modules/shared/components/NoteBlock
 import About from './about.mdx';
 
 export const metadata: Metadata = {
-  title: {
-    template: '%s | Help',
-    default: 'Note Block World',
-  },
-  openGraph: {
-    title: 'Create, share and listen to note block music',
-    description: 'Note Block World',
-    siteName: 'Note Block World',
-  },
+  title: 'About',
 };
 
 const AboutPage = () => {

web/src/app/(content)/(info)/blog/page.tsx

@@ -5,7 +5,11 @@ import Link from 'next/link';
 
 import { getSortedPostsData } from '@web/src/lib/posts';
 import type { PostType } from '@web/src/lib/posts';
+import { Metadata } from 'next';
 
+export const metadata: Metadata = {
+  title: 'Blog',
+};
 async function BlogPage() {
   const allPostsData = getSortedPostsData('blog', 'date');
   return <BlogPageComponent posts={allPostsData}></BlogPageComponent>;

web/src/app/(content)/(info)/contact/page.tsx

@@ -5,15 +5,7 @@ import BackButton from '@web/src/modules/shared/components/client/BackButton';
 import Contact from './contact.mdx';
 
 export const metadata: Metadata = {
-  title: {
-    template: '%s | Help',
-    default: 'Note Block World',
-  },
-  openGraph: {
-    title: 'Create, share and listen to note block music',
-    description: 'Note Block World',
-    siteName: 'Note Block World',
-  },
+  title: 'Contact',
 };
 
 const AboutPage = () => {

web/src/app/(content)/(info)/help/[id]/page.tsx

@@ -18,15 +18,11 @@ export function generateMetadata({ params }: HelpPageProps): Metadata {
   const publicUrl = process.env.NEXT_PUBLIC_URL;
 
   return {
-    title: {
-      template: '%s | Help',
-      default: 'Note Block World',
-    },
+    title: post.title,
     authors: [{ name: post.author }],
     openGraph: {
       url: publicUrl + '/help/' + id,
       title: post.title,
-      description: 'Create, share and listen to note block music',
       siteName: 'Note Block World',
       images: [
         {

web/src/app/(content)/(info)/help/page.tsx

@@ -5,6 +5,11 @@ import Link from 'next/link';
 
 import { getSortedPostsData } from '@web/src/lib/posts';
 import type { PostType } from '@web/src/lib/posts';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Help Center',
+};
 
 async function HelpPage() {
   const allPostsData = getSortedPostsData('help', 'id');

web/src/app/(content)/my-songs/page.tsx

@@ -2,6 +2,11 @@ import { redirect } from 'next/navigation';
 
 import { checkLogin } from '@web/src/modules/auth/features/auth.utils';
 import Page from '@web/src/modules/my-songs/components/MySongsPage';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'My songs',
+};
 
 const MySongsPage = async () => {
   // TODO: Next.js extends fetch() to memoize the result of multiple requests to the same URL.

web/src/app/(content)/page.tsx

@@ -2,6 +2,7 @@ import {
   FeaturedSongsDtoType,
   SongPreviewDtoType,
 } from '@shared/validation/song/dto/types';
+import { Metadata } from 'next';
 
 import axiosInstance from '@web/src/lib/axios';
 import { HomePageProvider } from '@web/src/modules/browse/components/client/context/HomePage.context';
@@ -46,6 +47,10 @@ async function fetchFeaturedSongs(): Promise<FeaturedSongsDtoType> {
   }
 }
 
+export const metadata: Metadata = {
+  title: 'Songs',
+};
+
 async function Home() {
   const recentSongs = await fetchRecentSongs();
   const featuredSongs = await fetchFeaturedSongs();

web/src/app/(content)/song/[id]/page.tsx

@@ -1,6 +1,48 @@
+import { SongViewDtoType } from '@shared/validation/song/dto/types';
+import type { Metadata } from 'next';
+
+import axios from '@web/src/lib/axios';
 import { SongPage } from '@web/src/modules/song/components/SongPage';
 
-function Page({ params }: { params: { id: string } }) {
+interface SongPage {
+  params: {
+    id: string;
+  };
+}
+
+export async function generateMetadata({
+  params,
+}: SongPage): Promise<Metadata> {
+  let song;
+  const publicUrl = process.env.NEXT_PUBLIC_URL;
+
+  try {
+    const response = await axios.get<SongViewDtoType>(`/song/${params.id}`);
+    song = response.data;
+  } catch {
+    return {
+      title: 'Unknown song!',
+    };
+  }
+
+  return {
+    title: song.title,
+    description: song.description,
+    authors: [{ name: song.uploader.username }],
+    openGraph: {
+      url: publicUrl + '/song/' + song.publicId,
+      title: song.title,
+      description: song.description,
+      siteName: 'Note Block World',
+      images: [song.thumbnailUrl],
+    },
+    twitter: {
+      card: 'summary_large_image',
+    },
+  };
+}
+
+function Page({ params }: SongPage) {
   const { id } = params;
 
   return <SongPage id={id} />;

web/src/app/(content)/upload/page.tsx

@@ -5,6 +5,11 @@ import {
   getUserData,
 } from '@web/src/modules/auth/features/auth.utils';
 import { UploadSongPage } from '@web/src/modules/song-upload/components/client/UploadSongPage';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Upload song',
+};
 
 async function UploadPage() {
   const isLogged = await checkLogin();