npm - @zoyth/simple-site-framework - Versions diffs - 1.0.0 - Mend

@zoyth/simple-site-framework 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/LICENSE +21 -0
package/README.md +572 -0
package/bin/create-simple-site.js +390 -0
package/bin/simple-site.js +664 -0
package/dist/client.js +135 -0
package/dist/client.js.map +1 -0
package/dist/client.mjs +107 -0
package/dist/client.mjs.map +1 -0
package/dist/components/index.d.mts +3936 -0
package/dist/components/index.d.ts +3936 -0
package/dist/components/index.js +38265 -0
package/dist/components/index.js.map +1 -0
package/dist/components/index.mjs +38173 -0
package/dist/components/index.mjs.map +1 -0
package/dist/config/index.d.mts +298 -0
package/dist/config/index.d.ts +298 -0
package/dist/config/index.js +19 -0
package/dist/config/index.js.map +1 -0
package/dist/config/index.mjs +1 -0
package/dist/config/index.mjs.map +1 -0
package/dist/index.d.mts +2184 -0
package/dist/index.d.ts +2184 -0
package/dist/index.js +1713 -0
package/dist/index.js.map +1 -0
package/dist/index.mjs +1605 -0
package/dist/index.mjs.map +1 -0
package/dist/lib/i18n/index.js +665 -0
package/dist/lib/i18n/index.js.map +1 -0
package/dist/lib/i18n/index.mjs +621 -0
package/dist/lib/i18n/index.mjs.map +1 -0
package/docs/DOCUMENTATION-STRUCTURE.md +1156 -0
package/docs/EXPORTS.md +125 -0
package/docs/PERFORMANCE.md +757 -0
package/docs/POLICY-PAGES.md +867 -0
package/docs/ROADMAP.md +334 -0
package/docs/SEO.md +455 -0
package/docs/SITEMAP.md +708 -0
package/docs/STRUCTURED-DATA.md +671 -0
package/docs/accessibility/common-patterns.md +529 -0
package/docs/accessibility/keyboard-navigation.md +263 -0
package/docs/accessibility/overview.md +122 -0
package/docs/accessibility/screen-readers.md +311 -0
package/docs/accessibility/wcag-compliance.md +159 -0
package/docs/api/README.md +164 -0
package/docs/api/components/Accessibility.md +356 -0
package/docs/api/components/Button.md +240 -0
package/docs/api/components/HeroSection.md +306 -0
package/docs/architecture/decisions.md +449 -0
package/docs/components/AnalyticsTracker.md +58 -0
package/docs/components/AnimatedCounter.md +48 -0
package/docs/components/AnimatedSection.md +56 -0
package/docs/components/BlogCard.md +42 -0
package/docs/components/Checkbox.md +56 -0
package/docs/components/CodeBlock.md +52 -0
package/docs/components/ComparisonTable.md +40 -0
package/docs/components/ComponentDemo.md +38 -0
package/docs/components/CountdownTimer.md +51 -0
package/docs/components/ExitIntentModal.md +56 -0
package/docs/components/FAQAccordion.md +66 -0
package/docs/components/FeaturesGrid.md +55 -0
package/docs/components/FileUpload.md +54 -0
package/docs/components/I18nMetaTags.md +55 -0
package/docs/components/Icon.md +53 -0
package/docs/components/LazySection.md +46 -0
package/docs/components/LiveProof.md +53 -0
package/docs/components/LoadingSpinner.md +46 -0
package/docs/components/MultiStepForm.md +48 -0
package/docs/components/PolicyLayout.md +55 -0
package/docs/components/PricingTable.md +49 -0
package/docs/components/Radio.md +59 -0
package/docs/components/SEOMetaTags.md +58 -0
package/docs/components/ScriptInjector.md +50 -0
package/docs/components/Select.md +72 -0
package/docs/components/Skeleton.md +47 -0
package/docs/components/StatsSection.md +48 -0
package/docs/components/StickyBar.md +62 -0
package/docs/components/StructuredData.md +99 -0
package/docs/components/StyleGuide.md +46 -0
package/docs/components/TableOfContents.md +47 -0
package/docs/components/TestimonialCarousel.md +42 -0
package/docs/components/Timeline.md +51 -0
package/docs/components/Toast.md +59 -0
package/docs/components/TrackedLink.md +62 -0
package/docs/components/TrustBadges.md +44 -0
package/docs/components/conversion/MobileCTA.md +363 -0
package/docs/components/forms/ContactForm.md +75 -0
package/docs/components/forms/FormField.md +74 -0
package/docs/components/layout/Footer.md +601 -0
package/docs/components/layout/Header.md +549 -0
package/docs/components/layout/LanguageSelector.md +54 -0
package/docs/components/layout/LanguageSwitcher.md +24 -0
package/docs/components/overview.md +447 -0
package/docs/components/sections/AboutSection.md +48 -0
package/docs/components/sections/CTASection.md +596 -0
package/docs/components/sections/CaseStudySection.md +47 -0
package/docs/components/sections/ContactSection.md +599 -0
package/docs/components/sections/FeatureSection.md +44 -0
package/docs/components/sections/HeroSection.md +404 -0
package/docs/components/sections/LogosSection.md +47 -0
package/docs/components/sections/PersonalTaxesSection.md +23 -0
package/docs/components/sections/RecruitingSection.md +23 -0
package/docs/components/sections/SecurePortalSection.md +23 -0
package/docs/components/sections/ServicePageLayout.md +52 -0
package/docs/components/sections/ServicesSection.md +49 -0
package/docs/components/sections/TestimonialSection.md +44 -0
package/docs/components/sections/WhyChooseUsSection.md +54 -0
package/docs/components/ui/Breadcrumb.md +70 -0
package/docs/components/ui/Button.md +514 -0
package/docs/components/ui/Card.md +501 -0
package/docs/components/ui/Input.md +54 -0
package/docs/components/ui/MobileLinks.md +43 -0
package/docs/components/ui/Modal.md +60 -0
package/docs/components/ui/Tabs.md +62 -0
package/docs/components/ui/Textarea.md +52 -0
package/docs/core-concepts/configuration-driven.md +552 -0
package/docs/core-concepts/overview.md +351 -0
package/docs/features/accessibility/README.md +73 -0
package/docs/features/accessibility/aria-support.md +177 -0
package/docs/features/accessibility/color-contrast.md +155 -0
package/docs/features/accessibility/focus-management.md +187 -0
package/docs/features/accessibility/testing.md +196 -0
package/docs/features/analytics/README.md +51 -0
package/docs/features/analytics/ab-testing.md +171 -0
package/docs/features/analytics/conversion-tracking.md +207 -0
package/docs/features/analytics/custom-events.md +219 -0
package/docs/features/analytics/privacy.md +198 -0
package/docs/features/analytics/setup.md +114 -0
package/docs/features/analytics/tracking-events.md +224 -0
package/docs/features/i18n/README.md +51 -0
package/docs/features/i18n/best-practices.md +273 -0
package/docs/features/i18n/configuration.md +84 -0
package/docs/features/i18n/formatting.md +133 -0
package/docs/features/i18n/locale-detection.md +122 -0
package/docs/features/i18n/routing.md +99 -0
package/docs/features/i18n/rtl-support.md +191 -0
package/docs/features/i18n/translations.md +129 -0
package/docs/features/internationalization.md +595 -0
package/docs/features/performance/README.md +77 -0
package/docs/features/performance/bundle-size.md +134 -0
package/docs/features/performance/caching.md +131 -0
package/docs/features/performance/code-splitting.md +121 -0
package/docs/features/performance/image-optimization.md +110 -0
package/docs/features/performance/lazy-loading.md +92 -0
package/docs/features/performance/monitoring.md +148 -0
package/docs/features/seo/README.md +51 -0
package/docs/features/seo/best-practices.md +184 -0
package/docs/features/seo/canonical-urls.md +182 -0
package/docs/features/seo/meta-tags.md +126 -0
package/docs/features/seo/open-graph.md +166 -0
package/docs/features/seo/robots-txt.md +146 -0
package/docs/features/seo/sitemaps.md +162 -0
package/docs/features/seo/structured-data.md +166 -0
package/docs/getting-started/installation.md +292 -0
package/docs/getting-started/introduction.md +195 -0
package/docs/getting-started/quick-start.md +460 -0
package/docs/guides/analytics-setup.md +616 -0
package/docs/i18n/CONFIGURATION.md +353 -0
package/docs/i18n/EXAMPLES.md +402 -0
package/docs/i18n/MIGRATION.md +260 -0
package/docs/i18n/SEO.md +392 -0
package/docs/i18n/STATIC-GENERATION-FIX.md +71 -0
package/docs/migration/changelog.md +136 -0
package/docs/migration/overview.md +233 -0
package/docs/recipes/adding-animations.md +475 -0
package/docs/recipes/forms-with-validation.md +393 -0
package/package.json +152 -0

package/docs/i18n/EXAMPLES.md ADDED Viewed

@@ -0,0 +1,402 @@
+# i18n Usage Examples
+Practical examples for common i18n scenarios.
+## Table of Contents
+- [Single Language Site](#single-language-site)
+- [Bilingual Site](#bilingual-site-2-languages)
+- [Multi-Language Site](#multi-language-site-3-languages)
+- [RTL Language Support](#rtl-language-support)
+- [Custom Slug Translations](#custom-slug-translations)
+- [Language-Specific Content](#language-specific-content)
+## Single Language Site
+For a site with no i18n overhead:
+```typescript
+// src/config/i18n.ts
+export const i18nConfig = {
+  locales: ['en'],
+  defaultLocale: 'en',
+  localePrefix: 'never',
+  localeDetection: false,
+};
+```
+**URLs:** `/about`, `/contact` (no locale prefix)
+**Folder structure:**
+```
+src/app/
+├── layout.tsx
+├── page.tsx
+└── about/
+    └── page.tsx
+```
+**No `[locale]` folder needed** - middleware handles everything.
+## Bilingual Site (2 Languages)
+Classic bilingual setup with text toggle:
+```typescript
+// src/config/i18n.ts
+export const i18nConfig = {
+  locales: ['en', 'fr'],
+  defaultLocale: 'en',
+  localePrefix: 'as-needed',
+  localeDetection: true,
+  localeNames: {
+    en: 'English',
+    fr: 'Français',
+  },
+};
+```
+**URLs:**
+- English: `/about` (default, no prefix)
+- French: `/fr/about` (with prefix)
+**Layout with language selector:**
+```tsx
+// src/app/[locale]/layout.tsx
+import { setI18nConfig, getTextDirection } from 'simple-site-framework/lib/i18n';
+import { LanguageSelector, I18nMetaTags } from 'simple-site-framework';
+import { i18nConfig } from '../../config/i18n';
+setI18nConfig(i18nConfig);
+export default async function Layout({ children, params }) {
+  const { locale } = await params;
+  return (
+    <html lang={locale} dir={getTextDirection(locale)}>
+      <head>
+        <I18nMetaTags
+          currentLocale={locale}
+          pathname="/about"
+          baseUrl="https://example.com"
+        />
+      </head>
+      <body>
+        <header>
+          <nav>
+            {/* Auto-detects text toggle for 2 languages */}
+            <LanguageSelector currentLocale={locale} />
+          </nav>
+        </header>
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
+```
+## Multi-Language Site (3+ Languages)
+Site with multiple languages and dropdown selector:
+```typescript
+// src/config/i18n.ts
+export const i18nConfig = {
+  locales: ['en', 'fr', 'es', 'de', 'ja'],
+  defaultLocale: 'en',
+  localePrefix: 'always',
+  localeDetection: true,
+  localeNames: {
+    en: 'English',
+    fr: 'Français',
+    es: 'Español',
+    de: 'Deutsch',
+    ja: '日本語',
+  },
+  localeLabels: {
+    en: 'EN',
+    fr: 'FR',
+    es: 'ES',
+    de: 'DE',
+    ja: 'JA',
+  },
+};
+```
+**URLs:** All have prefix
+- `/en/about`
+- `/fr/about`
+- `/es/about`
+- `/de/about`
+- `/ja/about`
+**Layout with dropdown:**
+```tsx
+// LanguageSelector auto-switches to dropdown with 3+ languages
+<LanguageSelector currentLocale={locale} className="ml-4" />
+```
+## RTL Language Support
+Adding Arabic and Hebrew:
+```typescript
+// src/config/i18n.ts
+export const i18nConfig = {
+  locales: ['en', 'ar', 'he'],
+  defaultLocale: 'en',
+  rtlLocales: ['ar', 'he'],
+  localeNames: {
+    en: 'English',
+    ar: 'العربية',
+    he: 'עברית',
+  },
+};
+```
+**Layout with RTL support:**
+```tsx
+import { getTextDirection } from 'simple-site-framework/lib/i18n';
+<html lang={locale} dir={getTextDirection(locale)}>
+  {/* dir="ltr" for English, dir="rtl" for Arabic/Hebrew */}
+</html>
+```
+**RTL-aware CSS:**
+```css
+/* Use logical properties */
+.container {
+  padding-inline-start: 1rem;  /* Left in LTR, right in RTL */
+  margin-inline-end: 2rem;     /* Right in LTR, left in RTL */
+}
+/* Or use dir selector */
+[dir="rtl"] .icon {
+  transform: scaleX(-1);  /* Flip icons in RTL */
+}
+```
+## Custom Slug Translations
+Translate URL slugs between languages:
+```typescript
+// src/config/i18n.ts
+export const i18nConfig = {
+  locales: ['en', 'fr', 'es'],
+  defaultLocale: 'en',
+  slugTranslations: {
+    en: {
+      '/products': '/produits',
+      '/services': '/servicios',
+      '/about': '/a-propos',
+    },
+    fr: {
+      '/produits': '/products',
+      '/servicios': '/services',
+      '/a-propos': '/about',
+    },
+    es: {
+      '/products': '/productos',
+      '/services': '/servicios',
+      '/about': '/acerca-de',
+    },
+  },
+};
+```
+**URLs:**
+- English: `/products`
+- French: `/fr/produits`
+- Spanish: `/es/productos`
+**Language selector handles translation automatically.**
+## Language-Specific Content
+Using localized strings in components:
+```tsx
+// Component with localized content
+import { getLocalizedString } from 'simple-site-framework/lib/content';
+interface Props {
+  locale: string;
+}
+export function PricingSection({ locale }: Props) {
+  const content = {
+    heading: {
+      en: 'Pricing Plans',
+      fr: 'Plans tarifaires',
+      es: 'Planes de precios',
+    },
+    description: {
+      en: 'Choose the plan that fits your needs',
+      fr: 'Choisissez le plan qui vous convient',
+      es: 'Elige el plan que se adapte a tus necesidades',
+    },
+  };
+  return (
+    <section>
+      <h2>{getLocalizedString(content.heading, locale)}</h2>
+      <p>{getLocalizedString(content.description, locale)}</p>
+    </section>
+  );
+}
+```
+## Formatters
+Using locale-aware formatters:
+```tsx
+import {
+  formatDate,
+  formatNumber,
+  formatCurrency,
+  formatRelativeTime,
+} from 'simple-site-framework/lib/i18n';
+export function ProductCard({ locale, product }) {
+  return (
+    <div>
+      <h3>{product.name}</h3>
+      {/* Format currency */}
+      <p className="price">
+        {formatCurrency(product.price, locale, 'USD')}
+        {/* en: "$29.99" | fr: "29,99 $US" */}
+      </p>
+      {/* Format date */}
+      <time>
+        {formatDate(product.releaseDate, locale, { dateStyle: 'long' })}
+        {/* en: "January 15, 2026" | fr: "15 janvier 2026" */}
+      </time>
+      {/* Format relative time */}
+      <span>
+        {formatRelativeTime(-2, 'day', locale)}
+        {/* en: "2 days ago" | fr: "il y a 2 jours" */}
+      </span>
+      {/* Format number */}
+      <p>
+        {formatNumber(product.views, locale)} views
+        {/* en: "1,234,567" | fr: "1 234 567" */}
+      </p>
+    </div>
+  );
+}
+```
+## Middleware Configuration
+### Basic Middleware
+```typescript
+// src/middleware.ts
+import { createI18nMiddleware } from 'simple-site-framework/lib/i18n';
+import { i18nConfig } from './src/config/i18n';
+export default createI18nMiddleware(i18nConfig);
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+};
+```
+### Exclude Additional Routes
+```typescript
+export const config = {
+  matcher: [
+    '/((?!api|_next/static|_next/image|favicon.ico|robots.txt|sitemap.xml).*)',
+  ],
+};
+```
+### Custom Middleware Logic
+```typescript
+import { createI18nMiddleware } from 'simple-site-framework/lib/i18n';
+import { NextRequest } from 'next/server';
+import { i18nConfig } from './src/config/i18n';
+const i18nMiddleware = createI18nMiddleware(i18nConfig);
+export default function middleware(request: NextRequest) {
+  // Run i18n middleware first
+  const response = i18nMiddleware(request);
+  // Add custom logic
+  response.headers.set('X-Custom-Header', 'value');
+  return response;
+}
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+};
+```
+## Static Generation
+Generate static pages for all locales:
+```tsx
+// src/app/[locale]/blog/[slug]/page.tsx
+import { i18nConfig } from '../../../config/i18n';
+export async function generateStaticParams() {
+  const posts = await getPosts();
+  return i18nConfig.locales.flatMap((locale) =>
+    posts.map((post) => ({
+      locale,
+      slug: post.slug,
+    }))
+  );
+}
+```
+## Utilities
+### Check Locale Support
+```tsx
+import { validateLocale } from 'simple-site-framework/lib/i18n';
+if (validateLocale(userLocale)) {
+  // Use user's locale
+} else {
+  // Fall back to default
+}
+```
+### Get Alternate Locales
+```tsx
+import { getAlternateLocales } from 'simple-site-framework/lib/i18n';
+const alternates = getAlternateLocales('en');
+// ['fr', 'es', 'de'] (all except 'en')
+```
+### Match Locale Variants
+```tsx
+import { matchLocale } from 'simple-site-framework/lib/i18n';
+matchLocale('en-US'); // 'en' (if 'en' is supported)
+matchLocale('fr-CA'); // 'fr' (if 'fr' is supported)
+matchLocale('de-DE'); // null (if 'de' not supported)
+```
+## See Also
+- [Configuration Reference](./CONFIGURATION.md)
+- [Migration Guide](./MIGRATION.md)
+- [SEO Guide](./SEO.md)

package/docs/i18n/MIGRATION.md ADDED Viewed

@@ -0,0 +1,260 @@
+# i18n Migration Guide
+This guide helps you migrate from the hardcoded bilingual (fr/en) system to the new flexible i18n configuration.
+## Overview
+**Old System (pre-v0.2.0):**
+- Hardcoded support for French and English only
+- Locale routing always required `[locale]` folder
+- No configuration needed (but inflexible)
+**New System (v0.2.0+):**
+- Support for any number of languages
+- Flexible locale prefix modes
+- Project-specific configuration
+- Middleware for automatic routing
+## Breaking Changes
+1. **Configuration Required**: Projects must call `setI18nConfig()` before using i18n features
+2. **No Hardcoded Locales**: Import from your config, not from framework
+3. **LanguageSelector**: Replaces `LanguageSwitcher` (which is now deprecated)
+## Migration Steps
+### Step 1: Create i18n Configuration
+Create `/src/config/i18n.ts` in your project:
+```typescript
+import type { I18nConfig } from 'simple-site-framework/lib/i18n';
+export const i18nConfig: I18nConfig = {
+  // Supported locales
+  locales: ['fr', 'en'],
+  // Default locale
+  defaultLocale: 'fr',
+  // Locale prefix mode (matches old behavior)
+  localePrefix: 'always',
+  // Enable browser language detection
+  localeDetection: true,
+  // Display names for language selector
+  localeNames: {
+    fr: 'Français',
+    en: 'English',
+  },
+  // Short labels for compact display
+  localeLabels: {
+    fr: 'FR',
+    en: 'EN',
+  },
+};
+```
+**To match old behavior exactly**, use `localePrefix: 'always'`.
+### Step 2: Create Middleware
+Create `/src/middleware.ts` in your project:
+```typescript
+import { createI18nMiddleware } from 'simple-site-framework/lib/i18n';
+import { i18nConfig } from './src/config/i18n';
+export default createI18nMiddleware(i18nConfig);
+export const config = {
+  // Exclude API routes, static assets, etc.
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+};
+```
+### Step 3: Initialize Config in Layout
+Update `/src/app/[locale]/layout.tsx`:
+```typescript
+import { setI18nConfig } from 'simple-site-framework/lib/i18n';
+import { i18nConfig } from '../../config/i18n';
+// Initialize config at the top level
+setI18nConfig(i18nConfig);
+export async function generateStaticParams() {
+  return i18nConfig.locales.map((locale) => ({ locale }));
+}
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = (await params) as { locale: string };
+  return (
+    <html lang={locale}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+### Step 4: Update Language Switcher (Optional)
+Replace `LanguageSwitcher` with `LanguageSelector`:
+**Before:**
+```typescript
+import { LanguageSwitcher } from 'simple-site-framework/components/layout/LanguageSwitcher';
+<LanguageSwitcher currentLocale={locale} />
+```
+**After:**
+```typescript
+import { LanguageSelector } from 'simple-site-framework/components/layout/LanguageSelector';
+<LanguageSelector currentLocale={locale} />
+```
+**Note:** `LanguageSwitcher` still works (it's a wrapper), but it's deprecated and will be removed in v1.0.0.
+### Step 5: Add SEO Meta Tags (Optional but Recommended)
+Add `I18nMetaTags` to your layout or pages:
+```typescript
+import { I18nMetaTags } from 'simple-site-framework';
+export default function Layout({ children, params }) {
+  return (
+    <html>
+      <head>
+        <I18nMetaTags
+          currentLocale={params.locale}
+          pathname="/about"
+          baseUrl="https://yoursite.com"
+        />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+### Step 6: Test Your Changes
+1. **Run build**: `npm run build`
+2. **Test language switching**: Click language selector
+3. **Test direct URLs**: Navigate to `/fr/about`, `/en/about`
+4. **Test browser detection**: Clear cookies, visit `/`
+5. **Check SEO tags**: View page source for hreflang tags
+## Common Issues
+### Issue: "i18n configuration not initialized"
+**Cause**: Forgot to call `setI18nConfig()` in layout
+**Fix**: Add this at the top of your layout file:
+```typescript
+import { setI18nConfig } from 'simple-site-framework/lib/i18n';
+import { i18nConfig } from '../../config/i18n';
+setI18nConfig(i18nConfig);
+```
+### Issue: Routes not working
+**Cause**: Middleware not created or incorrect matcher
+**Fix**: Ensure `/src/middleware.ts` exists and exports the middleware with correct matcher.
+### Issue: Language selector not appearing
+**Cause**: Component not imported or config not initialized
+**Fix**: Import `LanguageSelector` and ensure config is initialized before rendering.
+## Upgrading to Better Prefix Modes
+Once migrated, consider switching to `localePrefix: 'as-needed'` for better UX:
+```typescript
+export const i18nConfig: I18nConfig = {
+  locales: ['fr', 'en'],
+  defaultLocale: 'fr',
+  localePrefix: 'as-needed', // Changed from 'always'
+  // ... rest of config
+};
+```
+**With 'as-needed':**
+- French (default): `/about` (no prefix)
+- English: `/en/about` (with prefix)
+**Benefits:**
+- Cleaner URLs for default language
+- Better SEO (canonical URLs simpler)
+- Matches user expectations for primary market
+## Adding More Languages
+To add more languages after migration:
+```typescript
+export const i18nConfig: I18nConfig = {
+  locales: ['fr', 'en', 'es', 'de'], // Added Spanish and German
+  defaultLocale: 'fr',
+  localePrefix: 'as-needed',
+  localeNames: {
+    fr: 'Français',
+    en: 'English',
+    es: 'Español',    // Add display names
+    de: 'Deutsch',
+  },
+  localeLabels: {
+    fr: 'FR',
+    en: 'EN',
+    es: 'ES',         // Add labels
+    de: 'DE',
+  },
+};
+```
+The `LanguageSelector` automatically switches to dropdown mode with 3+ languages.
+## RTL Language Support
+To add RTL languages (Arabic, Hebrew, etc.):
+```typescript
+export const i18nConfig: I18nConfig = {
+  locales: ['en', 'ar', 'he'],
+  defaultLocale: 'en',
+  rtlLocales: ['ar', 'he'], // Specify RTL locales
+  // ... rest of config
+};
+```
+Update your layout to use text direction:
+```typescript
+import { getTextDirection } from 'simple-site-framework/lib/i18n';
+<html lang={locale} dir={getTextDirection(locale)}>
+```
+## Need Help?
+- Check [CONFIGURATION.md](./CONFIGURATION.md) for complete config reference
+- Check [EXAMPLES.md](./EXAMPLES.md) for usage examples
+- Open an issue on GitHub: https://github.com/zoyth/simple-site-framework/issues