@dxtmisha/wiki 0.39.1 → 0.39.3

package/src/media/functional/en/meta.mdx

@@ -1,1206 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/functional/en/Classes/Meta'/>
-
-# Meta Class
-
-A unified class for managing all types of meta tags: standard HTML, Open Graph, and Twitter Card. Provides a single interface for working with SEO optimization and social networks, automatically synchronizing changes across all platforms.
-
-## Key Features
-
-- **Unified API** — single entry point for all types of meta tags
-- **Automatic Synchronization** — changes in Meta are automatically applied to Open Graph and Twitter Card
-- **Title Management** — support for title suffix (e.g., "Title - Site Name")
-- **Full Integration** — combines MetaManager, MetaOg, and MetaTwitter
-- **Simplified Interface** — reduces code needed to set meta tags
-- **Keywords Support** — works with keywords as string or array
-- **Robots Directives** — manages indexing and crawling
-- **SSR Compatible** — generates HTML for server-side rendering
-
-## Constructor
-
-### `constructor`
-
-Creates a Meta instance with integrated Open Graph and Twitter Card support. Automatically initializes internal MetaOg and MetaTwitter instances.
-
-```javascript
-import { Meta } from '@dxtmisha/functional'
-
-// Create a unified meta tags manager
-const meta = new Meta()
-
-// The class automatically manages:
-// - Standard HTML meta tags (description, keywords, author, robots, canonical)
-// - Open Graph tags (og:title, og:description, og:image, og:url, og:site_name, og:locale)
-// - Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image, twitter:site)
-```
-
-## Data Retrieval Methods
-
-### `getTitle`
-
-Gets the page title without suffix.
-
-**Returns:** `string` — page title
-
-```javascript
-const meta = new Meta()
-
-// Set title with suffix
-meta.setSuffix('My Site')
-meta.setTitle('Home Page')
-
-// document.title = "Home Page - My Site"
-
-// Get clean title (without suffix)
-const title = meta.getTitle()
-// "Home Page"
-
-// Use in navigation
-const breadcrumb = meta.getTitle()
-
-// Check if set
-if (meta.getTitle()) {
-  console.log('Title is set')
-}
-```
-
-### `getKeywords`
-
-Gets the keywords meta tag.
-
-**Returns:** `string` — comma-separated keywords
-
-```javascript
-const meta = new Meta()
-
-const keywords = meta.getKeywords()
-// "web development, javascript, vue, react"
-
-// Convert to array
-const keywordsArray = keywords.split(', ')
-
-// Check for keyword
-if (meta.getKeywords().includes('javascript')) {
-  console.log('Page about JavaScript')
-}
-
-// Use for filtering
-const tags = meta.getKeywords().split(', ')
-```
-
-### `getDescription`
-
-Gets the description meta tag.
-
-**Returns:** `string` — page description
-
-```javascript
-const meta = new Meta()
-
-const description = meta.getDescription()
-// "Complete guide to web development"
-
-// Check length
-if (meta.getDescription().length > 160) {
-  console.warn('Description too long for Google')
-}
-
-// Use in preview
-const preview = meta.getDescription().substring(0, 100)
-
-// For structured data
-const schema = {
-  description: meta.getDescription()
-}
-```
-
-### `getImage`
-
-Gets the Open Graph image URL.
-
-**Returns:** `string` — image URL
-
-```javascript
-const meta = new Meta()
-
-const imageUrl = meta.getImage()
-// "https://example.com/images/preview.jpg"
-
-// Preload
-const img = new Image()
-img.src = meta.getImage()
-
-// Use in sharing
-const shareData = {
-  title: meta.getTitle(),
-  text: meta.getDescription(),
-  image: meta.getImage()
-}
-
-// Check if set
-if (!meta.getImage()) {
-  console.warn('Social media image not set')
-}
-```
-
-### `getCanonical`
-
-Gets the canonical URL.
-
-**Returns:** `string` — canonical URL
-
-```javascript
-const meta = new Meta()
-
-const canonicalUrl = meta.getCanonical()
-// "https://example.com/page"
-
-// Check match with current URL
-if (meta.getCanonical() !== window.location.href) {
-  console.log('Canonical URL differs from current')
-}
-
-// Use for redirects
-const canonical = meta.getCanonical()
-
-// For sitemap
-const url = meta.getCanonical()
-```
-
-### `getRobots`
-
-Gets the robots meta tag value.
-
-**Returns:** `MetaRobots` — robots directive
-
-```javascript
-const meta = new Meta()
-
-const robots = meta.getRobots()
-// "index, follow"
-
-// Check indexing
-if (meta.getRobots().includes('noindex')) {
-  console.log('Page should not be indexed')
-}
-
-// Conditional logic
-const isIndexable = !meta.getRobots().includes('noindex')
-
-// For debugging
-console.log('Robots directive:', meta.getRobots())
-```
-
-### `getAuthor`
-
-Gets the author meta tag.
-
-**Returns:** `string` — author name
-
-```javascript
-const meta = new Meta()
-
-const author = meta.getAuthor()
-// "John Doe"
-
-// Display author info
-console.log(`Author: ${meta.getAuthor()}`)
-
-// For structured data
-const articleSchema = {
-  author: {
-    name: meta.getAuthor()
-  }
-}
-
-// Check authorship
-if (meta.getAuthor()) {
-  console.log('Content has an author')
-}
-```
-
-### `getSiteName`
-
-Gets the Open Graph site name.
-
-**Returns:** `string` — site name
-
-```javascript
-const meta = new Meta()
-
-const siteName = meta.getSiteName()
-// "My Blog"
-
-// Use in title
-document.title = `${meta.getTitle()} | ${meta.getSiteName()}`
-
-// For branding
-const brandName = meta.getSiteName()
-
-// In footer
-const footerText = `© 2024 ${meta.getSiteName()}`
-```
-
-### `getLocale`
-
-Gets the Open Graph locale.
-
-**Returns:** `string` — locale (e.g., 'en_US')
-
-```javascript
-const meta = new Meta()
-
-const locale = meta.getLocale()
-// "en_US"
-
-// Determine language
-const language = meta.getLocale().split('_')[0] // "en"
-
-// Use for i18n
-if (meta.getLocale().startsWith('en')) {
-  console.log('English content')
-}
-
-// For hreflang
-const lang = meta.getLocale().replace('_', '-').toLowerCase()
-```
-
-### `getOg`
-
-Gets the MetaOg instance for advanced Open Graph operations.
-
-**Returns:** `MetaOg` — MetaOg class instance
-
-```javascript
-const meta = new Meta()
-
-// Get access to MetaOg
-const og = meta.getOg()
-
-// Use specific Open Graph methods
-og.setType(MetaOpenGraphType.article)
-
-// Access all MetaOg methods
-og.getType() // 'article'
-
-// Set additional OG tags
-meta.getOg().setType(MetaOpenGraphType.video)
-
-// Chaining calls
-meta.getOg()
-  .setType(MetaOpenGraphType.article)
-  .setLocale('en_US')
-
-// Use for specific settings
-const setupArticle = () => {
-  meta.setTitle('Article')
-  meta.setDescription('Description')
-
-  // Specific Open Graph settings
-  meta.getOg().setType(MetaOpenGraphType.article)
-}
-```
-
-### `getTwitter`
-
-Gets the MetaTwitter instance for advanced Twitter Card operations.
-
-**Returns:** `MetaTwitter` — MetaTwitter class instance
-
-```javascript
-const meta = new Meta()
-
-// Get access to MetaTwitter
-const twitter = meta.getTwitter()
-
-// Use specific Twitter Card methods
-twitter.setCard(MetaTwitterCard.summaryLargeImage)
-
-// Access all MetaTwitter methods
-twitter.getCard() // 'summary_large_image'
-
-// Set additional Twitter tags
-meta.getTwitter().setCard(MetaTwitterCard.player)
-
-// Chaining calls
-meta.getTwitter()
-  .setCard(MetaTwitterCard.summaryLargeImage)
-  .setCreator('@author')
-
-// Use for specific settings
-const setupVideo = () => {
-  meta.setTitle('Video')
-  meta.setDescription('Video description')
-
-  // Specific Twitter Card settings
-  meta.getTwitter().setCard(MetaTwitterCard.player)
-}
-
-// Set creator (not available directly through Meta)
-meta.getTwitter().setCreator('@john_doe')
-```
-
-## Data Setting Methods
-
-### `setTitle`
-
-Sets the page title with automatic suffix addition and updates Open Graph and Twitter Card.
-
-**Parameters:**
-- `title: string` — page title (without suffix)
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-const meta = new Meta()
-
-// Set suffix (usually site name)
-meta.setSuffix('My Site')
-
-// Set title
-meta.setTitle('Home Page')
-// document.title = "Home Page - My Site"
-// og:title = "Home Page - My Site"
-// twitter:title = "Home Page - My Site"
-
-// Without suffix
-const meta2 = new Meta()
-meta2.setTitle('Page without suffix')
-// document.title = "Page without suffix"
-
-// Dynamic update
-router.afterEach((to) => {
-  meta.setTitle(to.meta.title)
-})
-
-// For different pages
-meta.setTitle('About Us')
-meta.setTitle('Contact')
-meta.setTitle('Blog')
-
-// Chaining
-meta
-  .setTitle('New Page')
-  .setDescription('Page description')
-```
-
-### `setKeywords`
-
-Sets the keywords meta tag. Accepts string or array.
-
-**Parameters:**
-- `keywords: string | string[]` — keywords
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-const meta = new Meta()
-
-// String
-meta.setKeywords('web development, javascript, vue, react')
-
-// Array
-meta.setKeywords(['web development', 'javascript', 'vue', 'react'])
-// Result: "web development, javascript, vue, react"
-
-// From page data
-const page = {
-  tags: ['javascript', 'tutorial', 'web']
-}
-meta.setKeywords(page.tags)
-
-// Dynamic addition
-const existingKeywords = meta.getKeywords().split(', ')
-const newKeywords = [...existingKeywords, 'new', 'keywords']
-meta.setKeywords(newKeywords)
-
-// Conditional addition
-const keywords = ['web']
-if (isJavaScriptArticle) {
-  keywords.push('javascript')
-}
-meta.setKeywords(keywords)
-
-// Note: while keywords are less important for modern SEO,
-// they can be used for internal search
-```
-
-### `setDescription`
-
-Sets the description meta tag.
-
-**Parameters:**
-- `description: string` — page description
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-const meta = new Meta()
-
-// Set description
-meta.setDescription('Complete guide to web development with code examples and practical exercises')
-
-// From content data
-meta.setDescription(article.excerpt)
-
-// Truncate long text
-const longDescription = article.content
-const shortDescription = longDescription.substring(0, 160)
-meta.setDescription(shortDescription)
-
-// Remove HTML tags
-const plainText = article.html.replace(/<[^>]*>/g, '')
-meta.setDescription(plainText.substring(0, 160))
-
-// Chaining
-meta
-  .setDescription('Page description')
-  .setKeywords(['web', 'dev'])
-
-// Recommendations:
-// - Google displays ~155-160 characters
-// - Should contain keywords
-// - Should be unique for each page
-```
-
-### `setImage`
-
-Sets the image for Open Graph and Twitter Card simultaneously.
-
-**Parameters:**
-- `image: string` — image URL
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-const meta = new Meta()
-
-// Set image
-meta.setImage('https://example.com/images/preview.jpg')
-// Updates og:image and twitter:image
-
-// Absolute URL
-const imageUrl = new URL('/images/social-preview.jpg', window.location.origin).href
-meta.setImage(imageUrl)
-
-// From content data
-meta.setImage(article.coverImage)
-
-// Fallback image
-meta.setImage(page.image || '/images/default-preview.jpg')
-
-// For different pages
-if (isHomePage) {
-  meta.setImage('/images/home-preview.jpg')
-} else if (isArticle) {
-  meta.setImage(article.image)
-}
-
-// Chaining
-meta
-  .setImage('https://example.com/image.jpg')
-  .setTitle('Title')
-
-// Recommended size: 1200x630 px
-// Minimum size: 600x315 px
-// Formats: JPG, PNG, WebP
-```
-
-### `setCanonical`
-
-Sets the canonical URL and automatically updates og:url and twitter:url.
-
-**Parameters:**
-- `canonical: string` — canonical URL
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-const meta = new Meta()
-
-// Set canonical
-meta.setCanonical('https://example.com/page')
-// Updates:
-// - <link rel="canonical" href="https://example.com/page">
-// - og:url = "https://example.com/page"
-// - twitter:url = "https://example.com/page"
-
-// Current URL
-meta.setCanonical(window.location.href)
-
-// Clean parameters
-const cleanUrl = `${window.location.origin}${window.location.pathname}`
-meta.setCanonical(cleanUrl)
-
-// For pagination (all pages point to first)
-meta.setCanonical('https://example.com/articles')
-
-// For SPA
-router.afterEach((to) => {
-  const url = `https://example.com${to.path}`
-  meta.setCanonical(url)
-})
-
-// For duplicate content
-meta.setCanonical(originalArticleUrl)
-
-// Chaining
-meta
-  .setCanonical('https://example.com/page')
-  .setTitle('Title')
-```
-
-### `setRobots`
-
-Sets the robots meta tag to control indexing.
-
-**Parameters:**
-- `robots: MetaRobots` — robots directive
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-import { Meta, MetaRobots } from '@dxtmisha/functional'
-
-const meta = new Meta()
-
-// Allow indexing (default)
-meta.setRobots(MetaRobots.indexFollow)
-// <meta name="robots" content="index, follow">
-
-// Prevent indexing
-meta.setRobots(MetaRobots.noindexNofollow)
-// <meta name="robots" content="noindex, nofollow">
-
-// Index but don't follow links
-meta.setRobots(MetaRobots.indexNofollow)
-
-// Don't index but follow links
-meta.setRobots(MetaRobots.noindexFollow)
-
-// Prevent caching
-meta.setRobots(MetaRobots.noarchive)
-
-// Don't show snippet
-meta.setRobots(MetaRobots.nosnippet)
-
-// Conditional setting
-if (isDraftPage) {
-  meta.setRobots(MetaRobots.noindexNofollow)
-} else {
-  meta.setRobots(MetaRobots.indexFollow)
-}
-
-// For private pages
-meta.setRobots(MetaRobots.noindexNofollow)
-
-// For pages with duplicate content
-meta.setRobots(MetaRobots.noindex)
-```
-
-### `setAuthor`
-
-Sets the author meta tag.
-
-**Parameters:**
-- `author: string` — author name
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-const meta = new Meta()
-
-// Set author
-meta.setAuthor('John Doe')
-
-// From user data
-meta.setAuthor(article.author.name)
-
-// Full name
-meta.setAuthor(`${user.firstName} ${user.lastName}`)
-
-// For blog
-meta.setAuthor(post.author)
-
-// Conditional setting
-if (article.author) {
-  meta.setAuthor(article.author.name)
-}
-
-// Chaining
-meta
-  .setAuthor('John Doe')
-  .setTitle('Article')
-  .setDescription('Description')
-
-// For structured data
-meta.setAuthor(author.name)
-```
-
-### `setSiteName`
-
-Sets the site name for Open Graph and Twitter Card simultaneously.
-
-**Parameters:**
-- `siteName: string` — site name
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-const meta = new Meta()
-
-// Set site name
-meta.setSiteName('My Blog')
-// Updates og:site_name and twitter:site
-
-// From configuration
-meta.setSiteName(config.siteName)
-
-// Constant
-const SITE_NAME = 'WebDev Journal'
-meta.setSiteName(SITE_NAME)
-
-// For branding
-meta.setSiteName('TechBlog')
-
-// Once during initialization
-const meta = new Meta()
-meta.setSiteName('My Site')
-meta.setSuffix('My Site')
-
-// Chaining
-meta
-  .setSiteName('Site Name')
-  .setTitle('Home')
-
-// Recommendations:
-// - Short and recognizable
-// - Matches the brand
-// - Used in social networks
-```
-
-### `setLocale`
-
-Sets the locale for Open Graph.
-
-**Parameters:**
-- `locale: string` — locale in language_TERRITORY format
-
-**Returns:** `this` — for chaining calls
-
-```javascript
-const meta = new Meta()
-
-// Set English locale
-meta.setLocale('en_US')
-
-// Other locales
-meta.setLocale('en_GB') // English (United Kingdom)
-meta.setLocale('ru_RU') // Russian
-meta.setLocale('uk_UA') // Ukrainian
-meta.setLocale('de_DE') // German
-meta.setLocale('fr_FR') // French
-
-// Automatic detection
-const userLocale = navigator.language.replace('-', '_')
-meta.setLocale(userLocale)
-
-// From i18n settings
-meta.setLocale(i18n.locale.replace('-', '_'))
-
-// Conditional setting
-const locale = isEnglish ? 'en_US' : 'ru_RU'
-meta.setLocale(locale)
-
-// On language change
-const changeLanguage = (lang) => {
-  const localeMap = {
-    'en': 'en_US',
-    'ru': 'ru_RU',
-    'de': 'de_DE'
-  }
-  meta.setLocale(localeMap[lang])
-}
-
-// Chaining
-meta
-  .setLocale('en_US')
-  .setSiteName('My Site')
-```
-
-### `setSuffix`
-
-Sets the suffix to automatically append to page title.
-
-**Parameters:**
-- `suffix?: string` — title suffix (optional)
-
-```javascript
-const meta = new Meta()
-
-// Set suffix
-meta.setSuffix('My Site')
-meta.setTitle('Home')
-// document.title = "Home - My Site"
-
-// From configuration
-meta.setSuffix(config.siteName)
-
-// Remove suffix
-meta.setSuffix()
-meta.setTitle('Page')
-// document.title = "Page"
-
-// Conditional setting
-if (showBranding) {
-  meta.setSuffix('Site Name')
-}
-
-// Different suffixes for different sections
-if (isBlog) {
-  meta.setSuffix('Blog | My Site')
-} else {
-  meta.setSuffix('My Site')
-}
-
-// Usually set once during initialization
-const initMeta = () => {
-  const meta = new Meta()
-  meta.setSuffix('My Site')
-  meta.setSiteName('My Site')
-  return meta
-}
-
-// Note: suffix is automatically added
-// in format: "Title - Suffix"
-```
-
-### `html`
-
-Generates the complete HTML for all meta tags, including Open Graph and Twitter Card.
-
-**Returns:** `string` — HTML string with all meta tags
-
-```javascript
-const meta = new Meta()
-
-// Setup meta tags
-meta.setSuffix('My Site')
-meta.setSiteName('My Site')
-meta.setLocale('en_US')
-meta
-  .setTitle('Article')
-  .setDescription('Article description')
-  .setKeywords(['web', 'javascript'])
-  .setImage('https://example.com/image.jpg')
-  .setCanonical('https://example.com/article')
-  .setAuthor('John Doe')
-
-// Get HTML of all meta tags
-const metaHTML = meta.html()
-
-// Result includes:
-// - Standard HTML meta tags (description, keywords, author, canonical)
-// - Open Graph tags (og:title, og:description, og:image, og:url, og:site_name, og:locale)
-// - Twitter Card tags (twitter:title, twitter:description, twitter:image, twitter:site)
-
-// Use in SSR (Server-Side Rendering)
-// Express.js
-app.get('/page', (req, res) => {
-  const meta = new Meta()
-  meta
-    .setTitle('Page Title')
-    .setDescription('Description')
-    .setImage('https://example.com/og-image.jpg')
-
-  const html = `
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="UTF-8">
-        ${meta.html()}
-        <title>Title - Site</title>
-      </head>
-      <body>
-        <h1>Content</h1>
-      </body>
-    </html>
-  `
-
-  res.send(html)
-})
-
-// Next.js getServerSideProps
-export async function getServerSideProps() {
-  const meta = new Meta()
-  meta
-    .setTitle('Article')
-    .setDescription('Article description')
-
-  return {
-    props: {
-      metaTags: meta.html()
-    }
-  }
-}
-
-// Nuxt.js (in composable)
-const meta = new Meta()
-meta.setTitle('Page')
-
-const metaHTML = meta.html()
-// Insert into head via useHead() or template
-
-// Benefits of html() method:
-// - Automatic escaping of special characters
-// - Combines all three types of meta tags (standard, OG, Twitter)
-// - Ready for insertion into server template
-// - Safe from XSS attacks
-```
-
-## Practical Examples
-
-### Complete Page Setup
-
-```javascript
-import { Meta, MetaRobots } from '@dxtmisha/functional'
-
-const meta = new Meta()
-
-// Setup during app initialization
-meta.setSuffix('My Site')
-meta.setSiteName('My Site')
-meta.setLocale('en_US')
-
-// Setup specific page
-meta
-  .setTitle('Complete Guide to Web Development')
-  .setDescription('Learn web development from scratch: HTML, CSS, JavaScript, frameworks and tools')
-  .setKeywords(['web development', 'html', 'css', 'javascript', 'guide'])
-  .setImage('https://example.com/images/web-dev-guide.jpg')
-  .setCanonical('https://example.com/guides/web-development')
-  .setAuthor('John Doe')
-  .setRobots(MetaRobots.indexFollow)
-
-// Result:
-// <title>Complete Guide to Web Development - My Site</title>
-// <meta name="description" content="Learn web development...">
-// <meta name="keywords" content="web development, html, css, javascript, guide">
-// <meta name="author" content="John Doe">
-// <meta name="robots" content="index, follow">
-// <link rel="canonical" href="https://example.com/guides/web-development">
-// <meta property="og:title" content="Complete Guide... - My Site">
-// <meta property="og:description" content="Learn web development...">
-// <meta property="og:image" content="https://example.com/images/web-dev-guide.jpg">
-// <meta property="og:url" content="https://example.com/guides/web-development">
-// <meta property="og:site_name" content="My Site">
-// <meta property="og:locale" content="en_US">
-// <meta property="twitter:title" content="Complete Guide... - My Site">
-// <meta property="twitter:description" content="Learn web development...">
-// <meta property="twitter:image" content="https://example.com/images/web-dev-guide.jpg">
-// <meta property="twitter:site" content="My Site">
-```
-
-### Vue Router Integration
-
-```javascript
-import { Meta } from '@dxtmisha/functional'
-
-const meta = new Meta()
-
-// Initialization
-meta.setSuffix('My Site')
-meta.setSiteName('My Site')
-meta.setLocale('en_US')
-
-// Update on route change
-router.afterEach((to) => {
-  meta
-    .setTitle(to.meta.title || 'Page Not Found')
-    .setDescription(to.meta.description || '')
-    .setKeywords(to.meta.keywords || [])
-    .setCanonical(`https://example.com${to.path}`)
-
-  // Image if available
-  if (to.meta.image) {
-    meta.setImage(to.meta.image)
-  }
-
-  // Author if available
-  if (to.meta.author) {
-    meta.setAuthor(to.meta.author)
-  }
-})
-
-// Define meta in routes
-const routes = [
-  {
-    path: '/',
-    component: Home,
-    meta: {
-      title: 'Home',
-      description: 'Welcome to our website',
-      keywords: ['home', 'website'],
-      image: '/images/home.jpg'
-    }
-  },
-  {
-    path: '/about',
-    component: About,
-    meta: {
-      title: 'About Us',
-      description: 'Information about our company',
-      keywords: ['about', 'company'],
-      image: '/images/about.jpg'
-    }
-  }
-]
-```
-
-### React Integration
-
-```javascript
-import { Meta } from '@dxtmisha/functional'
-import { useEffect } from 'react'
-
-const meta = new Meta()
-
-// Initialization in App.js
-function App() {
-  useEffect(() => {
-    meta.setSuffix('My Site')
-    meta.setSiteName('My Site')
-    meta.setLocale('en_US')
-  }, [])
-
-  return <Router />
-}
-
-// Page component
-function ArticlePage({ article }) {
-  useEffect(() => {
-    meta
-      .setTitle(article.title)
-      .setDescription(article.excerpt)
-      .setKeywords(article.tags)
-      .setImage(article.coverImage)
-      .setCanonical(`https://example.com/articles/${article.slug}`)
-      .setAuthor(article.author.name)
-
-    return () => {
-      // Cleanup on unmount (optional)
-    }
-  }, [article])
-
-  return <div>{/* content */}</div>
-}
-
-// Custom hook for meta tags
-function useMeta(metaData) {
-  useEffect(() => {
-    if (metaData.title) meta.setTitle(metaData.title)
-    if (metaData.description) meta.setDescription(metaData.description)
-    if (metaData.keywords) meta.setKeywords(metaData.keywords)
-    if (metaData.image) meta.setImage(metaData.image)
-    if (metaData.canonical) meta.setCanonical(metaData.canonical)
-    if (metaData.author) meta.setAuthor(metaData.author)
-  }, [metaData])
-}
-
-// Using hook
-function BlogPost({ post }) {
-  useMeta({
-    title: post.title,
-    description: post.excerpt,
-    keywords: post.tags,
-    image: post.image,
-    author: post.author.name
-  })
-
-  return <article>{/* content */}</article>
-}
-```
-
-### SSR (Server-Side Rendering)
-
-```javascript
-import { Meta } from '@dxtmisha/functional'
-
-// Express.js server
-app.get('/article/:id', async (req, res) => {
-  const article = await getArticle(req.params.id)
-
-  const meta = new Meta()
-  meta.setSuffix('My Blog')
-  meta.setSiteName('My Blog')
-  meta.setLocale('en_US')
-
-  meta
-    .setTitle(article.title)
-    .setDescription(article.excerpt)
-    .setKeywords(article.tags)
-    .setImage(article.coverImage)
-    .setCanonical(`https://example.com/article/${article.id}`)
-    .setAuthor(article.author.name)
-
-  const html = `
-    <!DOCTYPE html>
-    <html lang="en">
-      <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>${article.title} - My Blog</title>
-        ${meta.html()}
-      </head>
-      <body>
-        <article>${article.content}</article>
-      </body>
-    </html>
-  `
-
-  res.send(html)
-})
-```
-
-### Using Advanced Open Graph and Twitter Card Features
-
-```javascript
-import { Meta, MetaOpenGraphType, MetaTwitterCard } from '@dxtmisha/functional'
-
-const meta = new Meta()
-
-// Basic setup through Meta
-meta
-  .setTitle('Video: Introduction to JavaScript')
-  .setDescription('Complete JavaScript video guide for beginners')
-  .setImage('https://example.com/images/js-video-thumb.jpg')
-  .setCanonical('https://example.com/videos/js-intro')
-
-// Advanced Open Graph setup through getOg()
-meta.getOg()
-  .setType(MetaOpenGraphType.videoMovie) // Type: video
-  .setLocale('en_US')
-
-// Advanced Twitter Card setup through getTwitter()
-meta.getTwitter()
-  .setCard(MetaTwitterCard.player) // Card with player
-  .setCreator('@javascript_guru') // Video author
-
-// Combined setup for different content types
-const setupContentMeta = (content) => {
-  // Common settings
-  meta
-    .setTitle(content.title)
-    .setDescription(content.description)
-    .setImage(content.image)
-    .setCanonical(content.url)
-
-  // Specific settings depending on type
-  switch (content.type) {
-    case 'article':
-      meta.getOg().setType(MetaOpenGraphType.article)
-      meta.getTwitter().setCard(MetaTwitterCard.summaryLargeImage)
-      if (content.author?.twitter) {
-        meta.getTwitter().setCreator(content.author.twitter)
-      }
-      break
-
-    case 'video':
-      meta.getOg().setType(MetaOpenGraphType.videoMovie)
-      meta.getTwitter().setCard(MetaTwitterCard.player)
-      break
-
-    case 'product':
-      meta.getOg().setType(MetaOpenGraphType.product)
-      meta.getTwitter().setCard(MetaTwitterCard.summaryLargeImage)
-      break
-
-    case 'music':
-      meta.getOg().setType(MetaOpenGraphType.musicSong)
-      meta.getTwitter().setCard(MetaTwitterCard.player)
-      break
-  }
-}
-
-// Usage
-setupContentMeta({
-  type: 'video',
-  title: 'JavaScript Tutorial',
-  description: 'Learn JavaScript from scratch',
-  image: 'https://example.com/thumb.jpg',
-  url: 'https://example.com/videos/js-tutorial',
-  author: {
-    twitter: '@instructor'
-  }
-})
-
-// Access specific methods
-const getFullMetaInfo = () => {
-  return {
-    // Through Meta
-    title: meta.getTitle(),
-    description: meta.getDescription(),
-    image: meta.getImage(),
-
-    // Through MetaOg
-    ogType: meta.getOg().getType(),
-    ogLocale: meta.getOg().getLocale(),
-
-    // Through MetaTwitter
-    twitterCard: meta.getTwitter().getCard(),
-    twitterCreator: meta.getTwitter().getCreator()
-  }
-}
-```
-
-## Usage Recommendations
-
-### Initialization
-Set common parameters once at app startup:
-```javascript
-const meta = new Meta()
-meta.setSuffix('Site Name')
-meta.setSiteName('Site Name')
-meta.setLocale('en_US')
-```
-
-### Update on Navigation
-Update meta tags on page change:
-```javascript
-router.afterEach((to) => {
-  meta
-    .setTitle(to.meta.title)
-    .setDescription(to.meta.description)
-    .setCanonical(`https://example.com${to.path}`)
-})
-```
-
-### Text Length
-- **Title:** up to 60 characters (without suffix)
-- **Description:** 150-160 characters
-- **Keywords:** 10-15 keywords
-
-### Required Tags
-Minimum necessary meta tags:
-- Title (via `setTitle`)
-- Description (via `setDescription`)
-- Canonical (via `setCanonical`)
-- Image for social media (via `setImage`)
-
-### Images
-- Size: 1200×630 px (optimal)
-- Format: JPG, PNG, WebP
-- Maximum: 8 MB
-
-## Notes
-
-- Class combines functionality of MetaManager, MetaOg, and MetaTwitter
-- Changes in Meta are automatically applied to all related meta tags
-- Suffix is added only to document.title and social tags
-- `html()` method is inherited from MetaManager and generates HTML for all managed tags
-- Class is SSR compatible — checks for DOM presence before accessing document
-- Keywords are less important for modern SEO but can be used for internal search
-- For advanced Open Graph work, use `meta.og` directly
-- For advanced Twitter Card work, use `meta.twitter` directly
-