390-feat: Add open graph previews

.gitignore

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

dev-data/open-graph.data.ts

@@ -0,0 +1,27 @@
+export const COURSE_SLUGS = {
+  JS_PRESCHOOL_RU: 'javascript-preschool-ru',
+  JS_EN: 'javascript',
+  JS_RU: 'javascript-ru',
+  REACT: 'reactjs',
+  ANGULAR: 'angular',
+  NODE: 'nodejs',
+  AWS_FUNDAMENTALS: 'aws-fundamentals',
+  AWS_CLOUD_DEVELOPER: 'aws-cloud-developer',
+  AWS_DEVOPS: 'aws-devops',
+} as const;
+
+export const RS_PAGES = {
+  MAIN: 'Home',
+  MENTORSHIP: 'Mentorship',
+  COMMUNITY: 'Community',
+  DOCS: 'Docs',
+  COURSES: 'Courses',
+} as const;
+
+export const Descriptions = {
+  MAIN: 'Connecting people, growing together, having fun',
+  MENTORSHIP: 'By teaching others, you learn yourself',
+  COMMUNITY: 'An international community of developers since 2013',
+  DOCS: 'School docs hub: rules, guides, and FAQs',
+  COURSES: 'Community driven. 100% free of charge. Journey to full stack mastery',
+} as const;

package.json

@@ -4,8 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "tsc && next build",
+    "generate-og": "tsx scripts/generate-og-script.ts",
+    "dev": "npm run generate-og && next dev --turbopack",
+    "build": "npm run generate-og && tsc && next build",
     "stylelint": "npx stylelint \"**/*.scss\"",
     "stylelint:fix": "npx stylelint \"**/*.scss\" --fix",
     "lint": "npx eslint . --report-unused-disable-directives",
@@ -91,6 +92,7 @@
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-order": "^7.0.0",
     "stylelint-prettier": "^5.0.3",
+    "tsx": "^4.19.4",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.31.1",
     "vitest": "^3.0.5"

scripts/generate-og-script.ts

@@ -0,0 +1,120 @@
+#!/usr/bin/env tsx
+
+import { JSX } from 'react';
+import 'dotenv/config';
+import fs from 'fs/promises';
+import path from 'path';
+
+import { ApiCourse } from './types';
+import { getCourseInfo } from './utils/course-info';
+import { ensureDirExists } from './utils/ensure-dir-exists';
+import { fetchCoursesList } from './utils/fetch-courses-list';
+import { createCourseTree } from './utils/generate-courses-tree';
+import { generateImage } from './utils/generate-image';
+import { createPageTree } from './utils/generate-page-tree';
+import { type Font, loadFont } from './utils/load-fonts';
+import { loadImageAsDataUri } from './utils/load-image-as-data-uri';
+import { COURSE_TITLES } from '../dev-data/course-titles.data';
+import { COURSE_SLUGS, Descriptions, RS_PAGES } from '../dev-data/open-graph.data';
+
+const fontRegularPromise: Promise<Font> = loadFont(400);
+const fontBoldPromise: Promise<Font> = loadFont(700);
+
+type CourseKey = keyof typeof COURSE_SLUGS;
+
+const COURSES_JSON_URL = process.env.API_URL;
+
+async function generateOGCourses(): Promise<void> {
+  const coursesList: ApiCourse[] = await fetchCoursesList(COURSES_JSON_URL);
+  const ogDir: string = path.join(process.cwd(), 'public', 'og-images');
+
+  await ensureDirExists(ogDir);
+
+  const rsLogoDataUriPromise: Promise<string> = loadImageAsDataUri('src/shared/assets/og-logos/rs-school.png', 'image/png');
+
+  const [fontRegular, fontBold, rsLogoDataUri] =
+    await Promise.all([
+      fontRegularPromise,
+      fontBoldPromise,
+      rsLogoDataUriPromise,
+    ]);
+
+  const fonts: Font[] = [fontRegular, fontBold];
+
+  const leftTitle: string = 'RS School';
+  const leftSubtitle: string = 'Free courses. High motivation';
+
+  for (const key of Object.keys(COURSE_TITLES) as CourseKey[]) {
+    const slug: string = COURSE_SLUGS[key];
+    const title: string = COURSE_TITLES[key];
+
+    const formattedDate: string = await getCourseInfo(coursesList, slug);
+
+    const logoDataUri: string = await loadImageAsDataUri(`src/shared/assets/og-logos/${slug}.svg`, 'image/svg+xml');
+
+    const tree: JSX.Element = createCourseTree(
+      title,
+      leftTitle,
+      leftSubtitle,
+      formattedDate,
+      rsLogoDataUri,
+      logoDataUri,
+    );
+
+    const buffer: Buffer<ArrayBufferLike> | null = await generateImage(tree, fonts);
+
+    if (!buffer) {
+      throw new Error(`Doesn't generate image for "${slug}"`);
+    }
+
+    await fs.writeFile(path.join(ogDir, `${slug}.png`), buffer);
+    console.log(`${slug} created`);
+  }
+}
+
+async function generateOgImagePages(): Promise<void> {
+  const rsBannerPromise: Promise<string> = loadImageAsDataUri('src/shared/assets/og-logos/rs-banner.png', 'image/png');
+  const rsMascotsPromise: Promise<string> = loadImageAsDataUri('src/shared/assets/og-logos/mentor-with-his-students.png', 'image/png');
+  const mapBgPromise: Promise<string> = loadImageAsDataUri('src/shared/assets/og-logos/map.png', 'image/png');
+
+  const ogDir: string = path.join(process.cwd(), 'public', 'og-images-pages');
+
+  await ensureDirExists(ogDir);
+
+  const [fontRegular, fontBold, rsBannerUri, rsMascotsUri, mapBgUri] =
+    await Promise.all([
+      fontRegularPromise,
+      fontBoldPromise,
+      rsBannerPromise,
+      rsMascotsPromise,
+      mapBgPromise,
+    ]);
+
+  const fonts: Font[] = [fontRegular, fontBold];
+
+  for (const key of Object.keys(RS_PAGES) as Array<keyof typeof RS_PAGES>) {
+    const title: string = RS_PAGES[key];
+    const description: string = Descriptions[key];
+
+    const tree: JSX.Element = createPageTree(title, description, rsBannerUri, rsMascotsUri, mapBgUri);
+    const buffer: Buffer<ArrayBufferLike> | null = await generateImage(tree, fonts);
+    const fileName: string = `${title.toLowerCase()}.png`.replace(/\s+/g, '-');
+
+    if (!buffer) {
+      throw new Error(`Doesn't generate image for "${title}"`);
+    }
+
+    await fs.writeFile(path.join(ogDir, fileName), buffer);
+    console.log(`${fileName} created`);
+  }
+}
+
+generateOgImagePages().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
+
+generateOGCourses().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

scripts/types.ts

@@ -0,0 +1,4 @@
+export type ApiCourse = {
+  startDate: string;
+  descriptionUrl: string;
+};

scripts/utils/course-info.ts

@@ -0,0 +1,19 @@
+import dayjs from 'dayjs';
+
+import type { ApiCourse } from '../types';
+
+export const getCourseInfo = (coursesList: ApiCourse[], slug: string): string => {
+  const courseInfo: ApiCourse | undefined = coursesList.find((c) => c.descriptionUrl.toLowerCase().endsWith(slug));
+
+  let rawDate: string;
+
+  if (!courseInfo) {
+    rawDate = '';
+  } else {
+    rawDate = courseInfo.startDate;
+  }
+
+  const formattedDate: string = rawDate ? dayjs(rawDate).format('MMM DD, YYYY') : 'TBD';
+
+  return formattedDate;
+};

scripts/utils/ensure-dir-exists.ts

@@ -0,0 +1,14 @@
+import fs from 'node:fs/promises';
+
+export const ensureDirExists = async (dirPath: string): Promise<void> => {
+  const stat = await fs.stat(dirPath).catch((err) => {
+    if (err.code === 'ENOENT') {
+      return null;
+    }
+    throw err;
+  });
+
+  if (!stat || !stat.isDirectory()) {
+    await fs.mkdir(dirPath, { recursive: true });
+  }
+};

scripts/utils/fetch-courses-list.ts

@@ -0,0 +1,10 @@
+import type { ApiCourse } from '../types';
+
+export async function fetchCoursesList(url: string): Promise<ApiCourse[]> {
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    throw new Error(`API error ${res.status}`);
+  }
+  return (await res.json()) as ApiCourse[];
+}