docs rewrite

README.md

@@ -33,7 +33,7 @@ This open-source repo contains internationalization libraries for React framewor
 
 ## Add the `<T>` component and see translations as you code:
 
-![Demo](./apps/docs/public/live_translations.gif)
+![Demo](./apps/docs/public/demo.gif)
 
 ## Features
 

apps/docs/app/[locale]/docs/[[...slug]]/page.tsx

@@ -32,6 +32,9 @@ import SupportedLocales from '@/components/SupportedLocales';
 import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
 import { Rate } from '@/components/rate';
 import { Metadata } from 'next';
+import { getLocale } from 'gt-next/server';
+import { Mermaid } from '@/components/mdx/mermaid';
+import Video from '@/components/Video';
 
 const customMdxComponents = {
   a: (props: React.ComponentProps<'a'>) => (
@@ -46,11 +49,15 @@ const customMdxComponents = {
   LogoCardContent,
   AllLogoCards,
   SupportedLocales,
+  Mermaid,
+  Video,
 };
 export default async function Page(props: {
   params: Promise<{ slug?: string[]; locale: string }>;
 }) {
-  const { slug, locale } = await props.params;
+  const { slug } = await props.params;
+  const locale = await getLocale();
+
   const page = source.getPage(slug, locale);
   if (!page) notFound();
 

apps/docs/app/[locale]/layout.tsx

@@ -6,23 +6,26 @@ import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
 import type { ReactNode } from 'react';
 import { baseOptions } from '@/app/[locale]/layout.config';
 import { source } from '@/lib/source';
-import { GTProvider } from 'gt-next';
+import { GTProvider, T } from 'gt-next';
 import { getLocaleProperties } from 'generaltranslation';
 import { SiGithub } from '@icons-pack/react-simple-icons';
 import { PostHogProvider } from '@/components/analytics/PostHogProvider';
 import AnalyticsBanner from '@/components/analytics/AnalyticsBanner';
 import SearchDialog from '@/components/SearchDialog';
 import PrefetchSearchIndex from '@/components/PrefetchSearchIndex';
+import { getGT, getLocale, getLocales } from 'gt-next/server';
 
 const inter = Inter({
   subsets: ['latin'],
 });
 
-export function generateMetadata(): Metadata {
+export async function generateMetadata(): Promise<Metadata> {
+  const gt = await getGT();
   return {
-    title: 'Docs — General Translation',
-    description:
-      'Documentation for the General Translation internationalization platform',
+    title: gt('Docs — General Translation'),
+    description: gt(
+      'Documentation for the General Translation internationalization platform'
+    ),
     icons: {
       icon: [
         {
@@ -38,15 +41,15 @@ export function generateMetadata(): Metadata {
       ],
     },
     keywords: [
-      'translation',
-      'localization',
-      'l10n',
-      'i18n',
-      'internationalization',
-      'automate',
-      'next.js',
-      'nextjs',
-      'react',
+      gt('translation'),
+      gt('localization'),
+      gt('internationalization'),
+      gt('l10n', { context: 'localization' }),
+      gt('i18n', { context: 'internationalization' }),
+      gt('automate'),
+      gt('next.js'),
+      gt('nextjs'),
+      gt('react'),
     ],
   };
 }
@@ -55,16 +58,10 @@ function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-export default async function Layout({
-  children,
-  params,
-}: {
-  children: ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await params;
+export default async function Layout({ children }: { children: ReactNode }) {
+  const locale = await getLocale();
   const options = await baseOptions(locale);
-  const locales = ['en', 'zh', 'de', 'fr', 'es', 'ja'].map((locale) => ({
+  const locales = getLocales().map((locale) => ({
     name: capitalize(getLocaleProperties(locale, locale).languageName),
     locale: locale,
   }));
@@ -118,7 +115,7 @@ export default async function Layout({
                     },
                   },
                   banner: (
-                    <>
+                    <T>
                       <a
                         href="https://github.com/generaltranslation/gt"
                         target="_blank"
@@ -131,7 +128,7 @@ export default async function Layout({
                           </h3>
                         </div>
                       </a>
-                    </>
+                    </T>
                   ),
                 }}
                 tree={source.pageTree[locale]}

apps/docs/components/Video.tsx

@@ -1,5 +1,3 @@
-import { BASE_URL } from '@/lib/constants';
-
 export default function Video({ src }: { src: string }) {
-  return <video src={BASE_URL + src} loop controls className="rounded-lg" />;
+  return <video src={src} loop controls autoPlay className="rounded-lg" />;
 }

apps/docs/components/mdx/mermaid.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { use, useEffect, useId, useState } from 'react';
+import { useTheme } from 'next-themes';
+
+export function Mermaid({ chart }: { chart: string }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return;
+  return <MermaidContent chart={chart} />;
+}
+
+const cache = new Map<string, Promise<unknown>>();
+
+function cachePromise<T>(
+  key: string,
+  setPromise: () => Promise<T>
+): Promise<T> {
+  const cached = cache.get(key);
+  if (cached) return cached as Promise<T>;
+
+  const promise = setPromise();
+  cache.set(key, promise);
+  return promise;
+}
+
+function MermaidContent({ chart }: { chart: string }) {
+  const id = useId();
+  const { resolvedTheme } = useTheme();
+  const { default: mermaid } = use(
+    cachePromise('mermaid', () => import('mermaid'))
+  );
+
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: 'loose',
+    fontFamily: 'inherit',
+    themeCSS: 'margin: 1.5rem auto 0;',
+    theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+  });
+
+  const { svg, bindFunctions } = use(
+    cachePromise(`${chart}-${resolvedTheme}`, () => {
+      return mermaid.render(id, chart.replaceAll('\\n', '\n'));
+    })
+  );
+
+  return (
+    <div
+      ref={(container) => {
+        if (container) bindFunctions?.(container);
+      }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

apps/docs/content/docs/en/cli/formats/i18next-quickstart.mdx

@@ -49,7 +49,7 @@ Install the `gtx-cli` tool in your project.
 <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
   <Tab value="npm">
   ```bash 
-  npm i --save-dev gtx-cli
+  npm i gtx-cli
   ``` 
   </Tab>
   <Tab value="yarn">

apps/docs/content/docs/en/cli/formats/json.mdx

@@ -56,7 +56,7 @@ Install the `gtx-cli` tool in your project.
 <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
   <Tab value="npm">
   ```bash 
-  npm i --save-dev gtx-cli
+  npm i gtx-cli
   ``` 
   </Tab>
   <Tab value="yarn">

apps/docs/content/docs/en/cli/formats/mdx.mdx

@@ -49,7 +49,7 @@ Install the `gtx-cli` tool in your project.
 <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
   <Tab value="npm">
   ```bash 
-  npm i --save-dev gtx-cli
+  npm i gtx-cli
   ``` 
   </Tab>
   <Tab value="yarn">

apps/docs/content/docs/en/cli/formats/next-intl-quickstart.mdx

@@ -48,7 +48,7 @@ Install the `gtx-cli` tool in your project.
 <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
   <Tab value="npm">
   ```bash 
-  npm i --save-dev gtx-cli
+  npm i gtx-cli
   ``` 
   </Tab>
   <Tab value="yarn">

apps/docs/content/docs/en/cli/formats/ts.mdx

@@ -49,7 +49,7 @@ Install the `gtx-cli` tool in your project.
 <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
   <Tab value="npm">
   ```bash 
-  npm i --save-dev gtx-cli
+  npm i gtx-cli
   ``` 
   </Tab>
   <Tab value="yarn">

apps/docs/content/docs/en/cli/reference/usage.mdx

@@ -21,7 +21,7 @@ To install the CLI tool, run the following command:
 <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
   <Tab value="npm">
   ```bash 
-  npm i --save-dev gtx-cli
+  npm i gtx-cli
   ``` 
   </Tab>
   <Tab value="yarn">

apps/docs/content/docs/en/core/class/constructor.mdx

@@ -0,0 +1,123 @@
+---
+title: GT Constructor
+description: API Reference for the GT class constructor
+---
+
+## Overview
+
+The `GT` constructor creates a new instance of the General Translation class, which provides access to all translation, formatting, and locale functionality.
+
+```typescript
+import { GT } from 'generaltranslation';
+
+const gt = new GT({
+  apiKey: 'your-api-key',
+  projectId: 'your-project-id',
+  sourceLocale: 'en',
+  targetLocale: 'es'
+});
+```
+
+The constructor will automatically check the environment for `GT_API_KEY` and `GT_PROJECT_ID` environment variables, so you can omit them from the constructor parameters.
+Additionally, it will validate all provided locale codes.
+
+---
+
+## Reference
+
+### Parameters
+
+<TypeTable
+  type={{
+    "params": {
+      type: 'GTConstructorParams',
+      optional: true,
+      default: '{}',
+    }
+  }}
+/>
+
+The `GTConstructorParams` object supports the following properties:
+
+| Property | Type | Optional | Description |
+|----------|------|----------|-------------|
+| `apiKey` | `string` | ✓ | Production API key for translation service |
+| `devApiKey` | `string` | ✓ | Development API key (takes precedence in development) |
+| `projectId` | `string` | ✓ | Unique project identifier |
+| `sourceLocale` | `string` | ✓ | Default source locale for translations |
+| `targetLocale` | `string` | ✓ | Default target locale for translations |
+| `locales` | `string[]` | ✓ | Array of supported locale codes |
+| `baseUrl` | `string` | ✓ | Custom API base URL (for enterprise deployments) |
+| `customMapping` | `CustomMapping` | ✓ | Custom locale code mappings and definitions |
+
+### Returns
+
+A new `GT` class instance with all translation and locale methods available.
+
+---
+
+
+## Examples
+
+### Basic Usage
+
+```typescript
+import { GT } from 'generaltranslation';
+
+// Minimal setup - uses environment variables
+const gt = new GT();
+```
+
+### With API Credentials
+
+```typescript
+const gt = new GT({
+  projectId: 'my-project-id',
+  apiKey: 'my-api-key',
+  targetLocale: 'fr'
+});
+```
+
+### With Custom Locale Mapping
+A custom mapping can be provided.
+This lets the user (1) use aliases for locale codes which, (2) can override the standard BCP 47 validation, and (3) override the standard BCP 47 locale information.
+
+For example, say you wanted to use `cn` as an alias for `zh`.
+Because the General Translation API does not support `cn`, you must specify a custom mapping.
+
+```typescript
+const gt = new GT({
+  projectId: 'my-project-id',
+  apiKey: 'my-api-key',
+  targetLocale: 'es',
+  customMapping: {
+    'cn': { code: 'zh' }
+  }
+});
+```
+
+You can do other things with custom mappings, such as add custom names, emojis, etc.
+
+```typescript
+const gt = new GT({
+  projectId: 'my-project-id',
+  apiKey: 'my-api-key',
+  targetLocale: 'es',
+  customMapping: { 'en-US': { name: 'Mandarin', emoji: '🇫🇷' } }
+});
+```
+
+---
+
+## Notes
+
+- All parameters are optional, but API operations will require `apiKey` and `projectId`
+- The constructor validates all locale codes immediately, throwing errors for invalid codes
+- Custom mappings take precedence over standard BCP 47 validation
+
+## Next Steps
+
+- Configure your instance with [`setConfig()`](/docs/core/class/setConfig)
+- Start translating with [`translate()`](/docs/core/class/methods/translation/translate)
+- Learn about [`GTConstructorParams` type](/docs/core/types/GTConstructorParams)
+- Explore locale utilities [`getLocaleName()`](/docs/core/class/methods/locales/getLocaleName)

apps/docs/content/docs/en/core/class/meta.json

@@ -0,0 +1,8 @@
+{
+  "title": "GT Class",
+  "pages": [
+    "./constructor",
+    "./setConfig",
+    "./methods"
+  ]
+}