Міграція з react-helmet-async на нативні примітиви React 19

+-------------------------------------------------------------------------+
|      АРХІТЕКТУРА МІГРАЦІЇ: ВІД HELMETPROVIDER ДО НАНО-ПРИМІТИВІВ REACT 19|
+-------------------------------------------------------------------------+

 [ СТАРА МОДЕЛЬ: react-helmet-async ]
 +-----------------------------------------------------------------------+
 | <HelmetProvider context={helmetContext}>                              |
 |   <App>                                                               |
 |     <Helmet>                                                          |
 |       <title>My Page</title>  ---> Сайд-ефект у requestAnimationFrame |
 |     </Helmet>                      Мутація: document.head.appendChild |
 |   </App>                           Розмітка: <title data-rh="true">   |
 +-----------------------------------------------------------------------+

                                  |
                                  v МІГРАЦІЯ НА REACT 19
 [ НОВА МОДЕЛЬ: Native React 19 Hoisting ]
 +-----------------------------------------------------------------------+
 | <App>                                                                 |
 |   <title>My Page</title>      ---> Fiber Reconciliation Engine         |
 |   <meta name="desc" ... />         Вбудований HostResourceElement     |
 | </App>                             Прямий комміт у <head> документа   |
 |                                    Розмітка: <title>My Page</title>   |
 +-----------------------------------------------------------------------+

import React from 'react';

export interface HelmetShimProps {
  children?: React.ReactNode;
  title?: string;
  defaultTitle?: string;
  titleTemplate?: string;
}

/**
 * Адаптер зворотної сумісності для плавної міграції з react-helmet-async.
 * Розгортає дочірні елементи в нативні теги React 19.
 */
export const Helmet: React.FC<HelmetShimProps> = ({
  children,
  title,
  defaultTitle,
  titleTemplate,
}) => {
  // Обчислюємо заголовок з урахуванням шаблону, якщо він заданий
  const resolvedTitle = React.useMemo(() => {
    const rawTitle = title || defaultTitle;
    if (!rawTitle) return null;
    if (titleTemplate && title) {
      return titleTemplate.replace('%s', title);
    }
    return rawTitle;
  }, [title, defaultTitle, titleTemplate]);

  return (
    <>
      {resolvedTitle && <title>{resolvedTitle}</title>}
      {children}
    </>
  );
};

export default Helmet;

/**
 * Видаляє з document.head залишкові DOM-вузли, створені react-helmet(-async).
 * Викликається один раз перед монтуванням кореневого дерева React 19.
 */
export function purgeLegacyHelmetAttributes(): void {
  if (typeof document === 'undefined') return;

  const legacyElements = document.head.querySelectorAll('[data-rh="true"], [data-react-helmet="true"]');
  
  legacyElements.forEach((node) => {
    node.parentNode?.removeChild(node);
  });

  if (process.env.NODE_ENV === 'development' && legacyElements.length > 0) {
    console.info(`[SEO Migration] Видалено ${legacyElements.length} застарілих DOM-елементів Helmet.`);
  }
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import { purgeLegacyHelmetAttributes } from './utils/cleanup-legacy-helmet';
import { App } from './App';

// Очищаємо DOM від старих тегів до ініціалізації React 19
purgeLegacyHelmetAttributes();

const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Кореневий DOM-елемент #root не знайдено');
}

// React 19 createRoot: HelmetProvider більше не потрібен
ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from 'react';

interface ArticleData {
  id: string;
  slug: string;
  title: string;
  excerpt: string;
  publishedAt: string;
}

interface BlogPostPageProps {
  article: ArticleData;
}

export const BlogPostPage: React.FC<BlogPostPageProps> = ({ article }) => {
  const canonicalUrl = `https://agenticlab.dev/blog/${article.slug}`;

  return (
    <article className="prose mx-auto py-8">
      {/* 
        РЕЗУЛЬТАТ МІГРАЦІЇ:
        Замість <Helmet><title>...</title></Helmet>
        оголошуємо нативні теги безпосередньо в JSX.
        React 19 виконає хойстинг у document.head автоматично.
      */}
      <title>{`${article.title} | Fullstack Agentic Lab`}</title>
      <meta name="description" content={article.excerpt} />
      <meta name="author" content="Fullstack Agentic Lab Team" />
      
      {/* OpenGraph специфікація */}
      <meta property="og:title" content={article.title} />
      <meta property="og:description" content={article.excerpt} />
      <meta property="og:type" content="article" />
      <meta property="og:url" content={canonicalUrl} />
      
      {/* Канонічний URL */}
      <link rel="canonical" href={canonicalUrl} />

      <header>
        <h1 className="text-3xl font-bold">{article.title}</h1>
        <time dateTime={article.publishedAt}>{article.publishedAt}</time>
      </header>

      <div className="content mt-4">
        <p>{article.excerpt}</p>
      </div>
    </article>
  );
};