Метаданные, sitemap и картинки для соцсетей

// ── app/articles/closures/page.tsx ── в проекте перед объектом стоит export,
// а тип Metadata приезжает импортом из next; песочница выполняет один файл,
// поэтому и то и другое здесь описано на месте
type Metadata = {
  title?: string;
  description?: string;
  openGraph?: { title?: string; description?: string; images?: string[] };
};

const metadata: Metadata = {
  title: "Замыкания",
  description: "Функция помнит место, где её объявили",
  openGraph: { images: ["/og/closures.png"] },
};

// то же, что делает Next: поля объекта превращаются в теги, а пустые поля
// карточек добираются из обычных title и description
function toHead(meta: Metadata): string[] {
  const tags: string[] = [];
  if (meta.title) tags.push(`<title>${meta.title}</title>`);
  if (meta.description) {
    tags.push(`<meta name="description" content="${meta.description}">`);
  }
  const og = meta.openGraph;
  if (!og) return tags;

  const ogTitle = og.title ?? meta.title;
  const ogText = og.description ?? meta.description;
  if (ogTitle) tags.push(`<meta property="og:title" content="${ogTitle}">`);
  if (ogText) tags.push(`<meta property="og:description" content="${ogText}">`);
  for (const image of og.images ?? []) {
    tags.push(`<meta property="og:image" content="${image}">`);
  }
  // карточку для Twitter Next собирает из openGraph сам
  tags.push(`<meta name="twitter:card" content="summary_large_image">`);
  if (ogTitle) tags.push(`<meta name="twitter:title" content="${ogTitle}">`);
  return tags;
}

console.log(toHead(metadata).join("\n"));

type Og = { title?: string; description?: string; images?: string[] };
type Meta = { title?: string; openGraph?: Og };

function resolve(levels: Meta[]): Meta {
  const result = Object.assign({}, ...levels) as Meta;
  const og = result.openGraph;
  if (!og) return result;
  // пустой заголовок карточки Next добирает из обычного title
  return { ...result, openGraph: { ...og, title: og.title ?? result.title } };
}

const layout: Meta = {
  title: "Учебник",
  openGraph: { title: "Учебник по JavaScript", images: ["/og/default.png"] },
};

const pageWithOg: Meta = { title: "Замыкания", openGraph: { title: "Замыкания" } };
const pageWithoutOg: Meta = { title: "Замыкания" };

console.log(JSON.stringify(resolve([layout, pageWithOg]).openGraph));
console.log(JSON.stringify(resolve([layout, pageWithoutOg]).openGraph));

type Og = { title?: string; images?: string[] };

// общие поля карточки живут в отдельном объекте, а не в layout: страница
// разложит их спредом и допишет своё — слияние тут делаем мы, а не Next
const ogDefaults: Og = { images: ["/og/default.png"] };

// ── app/articles/closures/page.tsx ──
const metadata = {
  title: "Замыкания",
  openGraph: { ...ogDefaults, title: "Замыкания" },
};

console.log(JSON.stringify(metadata.openGraph));

type Title = string | { default?: string; template?: string; absolute?: string };
type Level = { file: string; title?: Title };

function folderOf(file: string): string {
  return file.slice(0, file.lastIndexOf("/"));
}

// повтор resolveTitle из исходников Next
function resolveTitle(title: Title, template: string | null) {
  const apply = (value: string) => (template ? template.replace(/%s/g, value) : value);
  if (typeof title === "string") return { text: apply(title), template: null };
  let text = title.default === undefined ? "" : apply(title.default);
  if (title.absolute !== undefined) text = title.absolute;
  return { text, template: title.template ?? null };
}

function headTitle(levels: Level[]): string {
  const pageFolder = folderOf(levels[levels.length - 1].file);
  let current = { text: "", template: null as string | null };
  let template: string | null = null;
  for (const level of levels) {
    if (level.title !== undefined) current = resolveTitle(level.title, template);
    if (folderOf(level.file) !== pageFolder) template = current.template;
  }
  return current.text;
}

const root: Level = {
  file: "app/layout.tsx",
  title: { default: "Учебник по JavaScript", template: "%s — java-script.pro" },
};

console.log(headTitle([root, { file: "app/page.tsx", title: "Главная" }]));
console.log(headTitle([root, { file: "app/articles/page.tsx", title: "Все статьи" }]));
console.log(
  headTitle([root, { file: "app/articles/closures/page.tsx", title: { absolute: "Замыкания" } }]),
);
console.log(headTitle([root, { file: "app/about/page.tsx" }]));

type Metadata = {
  title?: string;
  description?: string;
  robots?: { index: boolean };
  alternates?: { canonical: string };
};

const articles = [
  { slug: "closures", title: "Замыкания", lead: "Функция помнит место, где её объявили" },
];

// ── app/articles/[slug]/page.tsx ── в проекте перед функцией стоит export
async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const article = articles.find((item) => item.slug === slug);
  // страницы нет — незачем и в поиск: индексацию выключаем прямо здесь
  if (!article) return { title: "Статья не найдена", robots: { index: false } };
  return {
    title: article.title,
    description: article.lead,
    alternates: { canonical: `/articles/${slug}` },
  };
}

// Next зовёт эту функцию сам и на сервере; здесь позовём руками
async function main() {
  console.log(JSON.stringify(await generateMetadata({ params: Promise.resolve({ slug: "closures" }) })));
  console.log(JSON.stringify(await generateMetadata({ params: Promise.resolve({ slug: "тайна" }) })));
}

void main();

type Metadata = {
  title?: string;
  description?: string;
  openGraph?: { title?: string; description?: string; images?: string[] };
};

const metadata: Metadata = {
  title: "Замыкания",
  description: 8,
  openGraph: { titel: "Замыкания", images: ["/og/closures.png"] },
};

console.log(JSON.stringify(metadata));

// в проекте тип приезжает из next: MetadataRoute.Sitemap — это ровно он
type SitemapEntry = {
  url: string;
  lastModified?: string | Date;
  changeFrequency?: "always" | "hourly" | "daily" | "weekly" | "monthly" | "yearly" | "never";
  priority?: number;
};

const site = "https://java-script.pro";
const articles = [
  { slug: "closures", updated: "2026-08-14" },
  { slug: "hoisting", updated: "2026-08-20" },
];

// ── app/sitemap.ts ── в проекте это export default функция
function sitemap(): SitemapEntry[] {
  return [
    { url: site, lastModified: new Date("2026-09-01"), changeFrequency: "daily", priority: 1 },
    ...articles.map((article) => ({
      url: `${site}/articles/${article.slug}`,
      lastModified: article.updated,
      changeFrequency: "monthly" as const,
      priority: 0.8,
    })),
  ];
}

// XML собирает сам Next — вот тот же обход, строка в строку
function toXml(entries: SitemapEntry[]): string {
  let out = `<?xml version="1.0" encoding="UTF-8"?>\n`;
  out += `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n`;
  for (const entry of entries) {
    out += `<url>\n<loc>${entry.url}</loc>\n`;
    if (entry.lastModified) {
      const date =
        entry.lastModified instanceof Date ? entry.lastModified.toISOString() : entry.lastModified;
      out += `<lastmod>${date}</lastmod>\n`;
    }
    if (entry.changeFrequency) out += `<changefreq>${entry.changeFrequency}</changefreq>\n`;
    if (typeof entry.priority === "number") out += `<priority>${entry.priority}</priority>\n`;
    out += `</url>\n`;
  }
  return out + `</urlset>\n`;
}

console.log(toXml(sitemap()));

// в проекте тип приезжает из next: MetadataRoute.Robots
type Robots = {
  rules: { userAgent?: string; allow?: string | string[]; disallow?: string | string[] };
  sitemap?: string;
};

// ── app/robots.ts ── в проекте это export default функция
function robots(): Robots {
  return {
    rules: { userAgent: "*", allow: "/", disallow: ["/api/", "/drafts/"] },
    sitemap: "https://java-script.pro/sitemap.xml",
  };
}

// robots.txt Next печатает из объекта — вот те же правила
function toTxt(data: Robots): string {
  const rule = data.rules;
  let out = `User-Agent: ${rule.userAgent ?? "*"}\n`;
  for (const item of [rule.allow ?? []].flat()) out += `Allow: ${item}\n`;
  for (const item of [rule.disallow ?? []].flat()) out += `Disallow: ${item}\n`;
  return data.sitemap ? `${out}\nSitemap: ${data.sitemap}\n` : out;
}

console.log(toTxt(robots()));

// ── app/articles/[slug]/opengraph-image.tsx ──
// в проекте это export const size, а разметка уезжает в new ImageResponse(...)
const size = { width: 1200, height: 630 };

function OgCard({ title, chapter }: { title: string; chapter: string }) {
  return (
    <div
      style={{
        width: size.width,
        height: size.height,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        padding: 72,
        background: "#141322",
        color: "#fdfcff",
        fontFamily: "sans-serif",
      }}
    >
      {/* display: flex стоит на каждом узле не для красоты: Satori,
          который рисует картинку, требует его у любого блока с детьми */}
      <div style={{ display: "flex", fontSize: 36, color: "#9d97b8" }}>{chapter}</div>
      <div style={{ display: "flex", fontSize: 104, lineHeight: 1.05 }}>{title}</div>
      <div style={{ display: "flex", fontSize: 36, color: "#9d97b8" }}>java-script.pro</div>
    </div>
  );
}

// картинка настоящего размера в кадр не влезает — уменьшаем её целиком,
// как уменьшает превью лента соцсети
const scale = 0.19;

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div style={{ width: size.width * scale, height: size.height * scale, overflow: "hidden" }}>
    <div style={{ transform: `scale(${scale})`, transformOrigin: "top left" }}>
      <OgCard title="Замыкания" chapter="Часть I · Ядро языка" />
    </div>
  </div>,
);

console.log(`og:image:width ${size.width}, og:image:height ${size.height}`);