390-feat: Add open graph previews

.gitignore

@@ -32,6 +32,7 @@ src/shared/__tests__/test-results
 src/shared/__tests__/report
 /blob-report/
 /playwright/.cache/
+/public/og
 
 # env
 .env

src/app/community/og.png/route.ts

@@ -0,0 +1,13 @@
+import { createPageTree } from '@/shared/og/view/pages-tree/generate-pages-tree';
+
+export { DYNAMIC as dynamic } from '@/shared/constants';
+
+export async function GET() {
+  const title = 'Community';
+  const description = 'Join the RS School developer community.';
+
+  return createPageTree({
+    title,
+    description,
+  });
+}

src/app/community/page.tsx

@@ -1,11 +1,22 @@
 import { Metadata } from 'next';
 
+import { communityMetadata } from '@/metadata/community';
+import { generatePageMetadata } from '@/shared/helpers/generate-page-metadata';
 import Community from '@/views/community';
 
 export async function generateMetadata(): Promise<Metadata> {
-  const title = 'Community · The Rolling Scopes School';
+  const { title, description, keywords, canonical, robots } = communityMetadata;
 
-  return { title };
+  const metadata = generatePageMetadata({
+    title,
+    description,
+    imagePath: `/community/og.png`,
+    keywords,
+    alternates: { canonical },
+    robots,
+  });
+
+  return metadata;
 }
 
 export default function CommunityRoute() {

src/app/courses/[slug]/og.png/route.ts

@@ -0,0 +1,53 @@
+import { courseStore } from '@/entities/course';
+import { resolveCoursePageLocale } from '@/entities/course/helpers/resolve-course-page-locale';
+import { coursePageStore } from '@/entities/course-page';
+import { fetchAndConvertToDataUri } from '@/shared/og/utils/fetch-and-convert-to-data-uri';
+import { loadImageAsDataUri } from '@/shared/og/utils/load-image-as-data-uri';
+import { createCourseTree } from '@/shared/og/view/courses-tree/generate-courses-tree';
+
+export const preferredRegion = 'auto';
+const fallbackPath = 'src/shared/assets/svg/rss-logo.svg';
+const logoFallbackSize = 250;
+
+export async function generateStaticParams() {
+  const pages = await coursePageStore.loadCoursePages();
+
+  return pages.map(({ slug }) => ({ slug }));
+}
+
+export async function GET(_request: Request, { params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const locale = resolveCoursePageLocale(slug);
+
+  const { courseName, courseId } = await coursePageStore.loadCoursePage(slug, locale);
+
+  const course = await courseStore.loadCourse(courseId);
+
+  if (!course) {
+    throw new Error(`Course metadata not found for id="${courseId}"`);
+  }
+
+  const logoWidth = course.iconSrc.width ?? logoFallbackSize;
+  const logoHeight = course.iconSrc.height ?? logoFallbackSize;
+  const logoCache = new Map<string, string>();
+
+  let logoDataUri: string | undefined = logoCache.get(course.iconSrc.src);
+
+  try {
+    logoDataUri = await fetchAndConvertToDataUri(course.iconSrc.src);
+    logoCache.set(course.iconSrc.src, logoDataUri);
+  } catch (err) {
+    console.warn('Failed to load remote logo, using fallback', err);
+    logoDataUri = await loadImageAsDataUri(fallbackPath);
+  }
+
+  return createCourseTree({
+    name: courseName,
+    logo: {
+      src: logoDataUri,
+      width: logoWidth,
+      height: logoHeight,
+    },
+    startDate: course.startDate,
+  });
+}

src/app/courses/[slug]/page.tsx

@@ -1,7 +1,9 @@
 import { Metadata } from 'next';
+import path from 'path';
 
 import { resolveCoursePageLocale } from '@/entities/course';
 import { coursePageStore } from '@/entities/course-page';
+import { generatePageMetadata } from '@/shared/helpers/generate-page-metadata';
 import { Course } from '@/views/course';
 
 type Params = {
@@ -16,10 +18,24 @@ export async function generateMetadata({ params }: CourseRouteParams): Promise<M
   const { slug } = await params;
   const locale = resolveCoursePageLocale(slug);
 
-  const pageTitle = await coursePageStore.loadCoursePageTitle(slug, locale);
-  const title = `${pageTitle} · The Rolling Scopes School`;
-
-  return { title };
+  const { courseName, description, keywords, courseUrl } = await coursePageStore.loadCoursePage(
+    slug,
+    locale,
+  );
+  const title = `${courseName} · The Rolling Scopes School`;
+  const robots = {
+    index: true,
+    follow: true,
+  };
+
+  return generatePageMetadata({
+    title,
+    description,
+    imagePath: path.join('courses', slug, 'og.png'),
+    keywords,
+    alternates: { canonical: courseUrl },
+    robots,
+  });
 }
 
 export async function generateStaticParams() {

src/app/courses/og.png/route.ts

@@ -0,0 +1,13 @@
+import { createPageTree } from '@/shared/og/view/pages-tree/generate-pages-tree';
+
+export { DYNAMIC as dynamic } from '@/shared/constants';
+
+export async function GET() {
+  const title = 'Courses';
+  const description = 'Free RS School courses: JavaScript, React, Node.js, AWS, and more.';
+
+  return createPageTree({
+    title,
+    description,
+  });
+}

src/app/courses/page.tsx

@@ -1,11 +1,22 @@
 import { Metadata } from 'next';
 
+import { coursesMetadata } from '@/metadata/courses';
+import { generatePageMetadata } from '@/shared/helpers/generate-page-metadata';
 import { Courses } from '@/views/courses';
 
 export async function generateMetadata(): Promise<Metadata> {
-  const title = 'Courses · The Rolling Scopes School';
+  const { title, description, keywords, canonical, robots } = coursesMetadata;
 
-  return { title };
+  const metadata = generatePageMetadata({
+    title,
+    description,
+    imagePath: `/courses/og.png`,
+    keywords,
+    alternates: { canonical },
+    robots,
+  });
+
+  return metadata;
 }
 
 export default function CoursesRoute() {

src/app/docs/[lang]/[...slug]/page.tsx

@@ -1,11 +1,14 @@
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import path from 'path';
 
 import { DocsContent } from '../../components/docs-content/docs-content';
 import { TITLE_POSTFIX } from '../../constants';
 import { Menu } from '../../types';
 import { fetchMarkdownContent } from '../../utils/fetch-markdown-content';
 import { fetchMenu } from '../../utils/fetch-menu';
+import { generateDocsMetadata } from '@/metadata/docs';
+import { generatePageMetadata } from '@/shared/helpers/generate-page-metadata';
 import { Language } from '@/shared/types';
 
 type RouteParams = { lang: Language;
@@ -45,7 +48,18 @@ export async function generateMetadata({
 
   const title = titles.find((el) => el.slug.join('/') === slugPath)?.title;
 
-  return { title: `${title} ${TITLE_POSTFIX}` };
+  const { description, keywords, canonical, robots } = generateDocsMetadata(lang, slugPath);
+
+  const metadata = generatePageMetadata({
+    title: `${title} ${TITLE_POSTFIX}`,
+    description,
+    imagePath: path.join('docs', lang, 'og.png'),
+    keywords,
+    alternates: { canonical },
+    robots,
+  });
+
+  return metadata;
 }
 
 export async function generateStaticParams(): Promise<RouteParams[]> {

src/app/docs/[lang]/og.png/route.ts

@@ -0,0 +1,27 @@
+import { createPageTree } from '@/shared/og/view/pages-tree/generate-pages-tree';
+import { Language } from '@/shared/types';
+
+export { DYNAMIC as dynamic } from '@/shared/constants';
+
+export function generateStaticParams() {
+  return [{ lang: 'en' }, { lang: 'ru' }];
+}
+
+const titleMap: Record<Language, string> = {
+  en: 'RS School Docs',
+  ru: 'RS Документация',
+};
+
+const descriptionMap: Record<Language, string> = {
+  en: 'RS School Docs: rules, guides, FAQs.',
+  ru: 'Документация RS: правила, гайды, часто задаваемые вопросы.',
+};
+
+export async function GET(_request: Request, { params }: { params: Promise<{ lang: Language }> }) {
+  const lang = (await params).lang;
+
+  return createPageTree({
+    title: titleMap[lang],
+    description: descriptionMap[lang],
+  });
+}

src/app/docs/[lang]/page.tsx

@@ -1,12 +1,26 @@
 import { DocsContent } from '../components/docs-content/docs-content';
-import { TITLE_POSTFIX } from '../constants';
 import { fetchMarkdownContent } from '../utils/fetch-markdown-content';
+import { docsLangMetadata } from '@/metadata/docs';
+import { generatePageMetadata } from '@/shared/helpers/generate-page-metadata';
 import { Language } from '@/shared/types';
 
 type RouteParams = { lang: Language };
 
-export async function generateMetadata() {
-  return { title: `RS School Overview ${TITLE_POSTFIX}` };
+export async function generateMetadata({ params }: { params: Promise<RouteParams> }) {
+  const { lang } = await params;
+
+  const { title, description, keywords, canonical, robots } = docsLangMetadata;
+
+  const metadata = generatePageMetadata({
+    title,
+    description,
+    imagePath: `/docs/${lang}/og.png`,
+    keywords,
+    alternates: { canonical },
+    robots,
+  });
+
+  return metadata;
 }
 
 export async function generateStaticParams(): Promise<RouteParams[]> {

src/app/layout.tsx

@@ -8,6 +8,7 @@ import type { Metadata } from 'next';
 import '@/core/styles/index.scss';
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://rs.school'),
   title: 'RS Site',
   description:
     'RS School offers free, community-driven education courses run by The Rolling Scopes developer community since 2013. Enhance your web development, JavaScript, and front-end skills with us.',

src/app/mentorship/[course]/page.tsx

@@ -1,12 +1,23 @@
 import { Metadata } from 'next';
 
+import { mentorshipCourseMetadata } from '@/metadata/mentorship';
+import { generatePageMetadata } from '@/shared/helpers/generate-page-metadata';
 import { Mentorship } from '@/views/mentorship/mentorship';
 import { MentorshipCourseRouteKeys, mentorshipCourses, mentorshipCoursesDefault } from 'data';
 
 export async function generateMetadata(): Promise<Metadata> {
-  const title = `Mentorship · The Rolling Scopes School`;
+  const { title, description, keywords, canonical, robots } = mentorshipCourseMetadata;
 
-  return { title };
+  const metadata = generatePageMetadata({
+    title,
+    description,
+    imagePath: `/mentorship/og.png`,
+    keywords,
+    alternates: { canonical },
+    robots,
+  });
+
+  return metadata;
 }
 export async function generateStaticParams(): Promise<{ course: MentorshipCourseRouteKeys }[]> {
   return [

src/app/mentorship/og.png/route.ts

@@ -0,0 +1,13 @@
+import { createPageTree } from '@/shared/og/view/pages-tree/generate-pages-tree';
+
+export { DYNAMIC as dynamic } from '@/shared/constants';
+
+export async function GET() {
+  const title = 'Mentorship';
+  const description = 'Mentor at RS School and help others grow.';
+
+  return createPageTree({
+    title,
+    description,
+  });
+}

src/app/mentorship/page.tsx

@@ -1,12 +1,23 @@
 import { Metadata } from 'next';
 
+import { mentorshipMetadata } from '@/metadata/mentorship';
+import { generatePageMetadata } from '@/shared/helpers/generate-page-metadata';
 import { Mentorship } from '@/views/mentorship/mentorship';
 import { mentorshipCoursesDefault } from 'data';
 
 export async function generateMetadata(): Promise<Metadata> {
-  const title = `Mentorship · The Rolling Scopes School`;
+  const { title, description, keywords, canonical, robots } = mentorshipMetadata;
 
-  return { title };
+  const metadata = generatePageMetadata({
+    title,
+    description,
+    imagePath: `/mentorship/og.png`,
+    keywords,
+    alternates: { canonical },
+    robots,
+  });
+
+  return metadata;
 }
 
 export default async function MentorshipRoute() {