Update docs

Author: hugocxl

package.json

@@ -41,11 +41,12 @@
     "@changesets/changelog-github": "^0",
     "@changesets/cli": "^2",
     "@types/node": "^20",
-    "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react": "^18",
     "@vitest/coverage-v8": "^1",
     "husky": "^9",
     "lint-staged": "^15",
+    "prettier": "^3",
     "rimraf": "^5",
     "tsup": "^8",
     "typescript": "^5",

pnpm-lock.yaml

@@ -3,6 +3,7 @@
     "display": "hidden",
     "type": "page",
     "theme": {
+      "layout": "full",
       "breadcrumb": false,
       "footer": false,
       "sidebar": false,

website/src/pages/_meta.json

@@ -13,13 +13,13 @@ list of contributors on
 
 Terai is powered by these incredible open source projects:
 
+- [@legendapp/state](https://rollupjs.org)
+- [Node](https://rollupjs.org)
 - [React](https://github.com/facebook/react)
-- [Tsup](https://github.com/apache/incubator-echarts)
 - [Rollup](https://rollupjs.org)
-- [Node](https://rollupjs.org)
+- [Tsup](https://github.com/apache/incubator-echarts)
 - [Typescript](https://rollupjs.org)
 - [Vite](https://rollupjs.org)
-- [@legendapp/state](https://rollupjs.org)
 
 ## License
 

website/src/pages/about.mdx

@@ -0,0 +1,23 @@
+{
+  "extraction": {
+    "title": "Extraction"
+  },
+  "translation": {
+    "title": "Translation"
+  },
+  "cache": {
+    "title": "Cache"
+  },
+  "code-splitting": {
+    "title": "Code-Splitting"
+  },
+  "formatting": {
+    "title": "Formatting"
+  },
+  "variables": {
+    "title": "Variables"
+  },
+  "ts": {
+    "title": "ts"
+  }
+}

website/src/pages/docs/concepts/_meta.json

@@ -34,7 +34,7 @@ that instance are linked.
 import { useTs } from './locale'
 
 export function Button() {
-  const ts = useTs({ chunkId: 'button' })
+  const { ts } = useTs({ chunkId: 'button' })
 
   return (
     <div>
@@ -53,7 +53,7 @@ specific requirements.
 import { useTs } from './locale'
 
 export function Header() {
-  const ts = useTs({ chunkId: 'common' })
+  const { ts } = useTs({ chunkId: 'common' })
 
   return (
     <div>
@@ -67,7 +67,7 @@ export function Header() {
 import { useTs } from './locale'
 
 export function Footer() {
-  const ts = useTs({ chunkId: 'common' })
+  const { ts } = useTs({ chunkId: 'common' })
 
   return (
     <div>

website/src/pages/docs/concepts/code-splitting.mdx

@@ -1 +1,17 @@
 # Extraction
+
+Keeping your localization system up to date can be a challenging task, especially in large or fast-paced projects. It often involves duplicating work and leaves room for potential errors.
+
+Terai's extraction feature simplifies the process of identifying all the strings that require localization in your project, making them ready for translation.
+
+## Running the `extract` command
+
+To extract strings for localization in your project using Terai, follow these steps:
+
+1. Run the `terai extract` command in your project.
+2. Terai will analyze the inputs to your project and search for all instances of `ts` files.
+3. Each occurrence of a string will be converted into a unique hash (e.g., 78awdk123) based on its content.
+4. The extracted strings will be written to a manifest file (`.terai/locale-manifest.json`).
+5. Additionally, the dictionary for your `projectLocale` will be created or updated, as it does not require translation.
+
+![Extract](/extract.gif)

website/src/pages/docs/concepts/extraction.mdx

@@ -0,0 +1,72 @@
+import { Steps, Tabs } from 'nextra/components'
+
+# Formatting
+
+Terai provides a set of utils to format numbers, dates, displayNames, lists and relative times.
+All functions are based in the `Intl` Web API Standard.
+
+## Usage
+
+Now you can start using terai in your project. Here is the snippet of code that
+you can use in some `example.tsx` file.
+
+<Tabs items={['useFormat', 'getFormat']}>
+  <Tabs.Tab>
+  ```tsx filename="example.tsx" copy
+import { useTs, useFormat } from '@terai/vite'
+
+export function Example() {
+  const { ts } = useTs()
+  const format = useFormat()
+  const now = new Date()
+
+  return (
+  <div>
+    <p>{ts`Now is ${format.date({ value: now })}!`}</p>
+  </div>
+  ) 
+}
+```
+  </Tabs.Tab>
+  <Tabs.Tab>
+  ```sh copy
+  npm install -D @terai/dev
+  npm install @terai/vite
+  npx terai init
+````
+
+  </Tabs.Tab>
+</Tabs>
+
+### Number
+
+This function uses `Intl.NumberFormat` options.
+
+```ts
+function format.number(
+  value: number,
+  options?: Intl.NumberFormatOptions & {format?: string}
+): string
+```
+
+```tsx filename="example.tsx" copy
+import { useTs, useFormat } from '@terai/vite'
+
+export function Example() {
+  const { ts } = useTs()
+  const format = useFormat()
+
+  return (
+    <div>
+      <p>{ts`Hello, world!`}</p>
+    </div>
+  )
+}
+```
+
+```tsx
+function formatDate(
+  value: number | Date,
+  options?: Intl.DateTimeFormatOptions & { format?: string }
+): string
+```

website/src/pages/docs/concepts/formatting.mdx

@@ -12,8 +12,7 @@ steps to configure and use the translator effectively.
 ### Translator config
 
 First, you need to configure the translator in your `terai.config.ts` file.
-While we recommend using our dedicated translation service (link to
-documentation), **Terai** also provides integrations with major translation
+**Terai** also provides integrations with major translation
 service providers.
 
 ```tsx

website/src/pages/docs/concepts/translation.mdx

@@ -41,7 +41,7 @@ List of files glob to ignore.
 ### outDir
 
 - **Type**: `string`
-- **Default**: `""`
+- **Default**: `"./locale-system"`
 
 The output directory for your locale system.
 

website/src/pages/docs/references/config.mdx

@@ -1,6 +1,6 @@
 import { Steps, Tabs } from 'nextra/components'
 
-# Using terai with Node
+# Using Terai with Node
 
 Setting up terai in a Node project.
 

website/src/pages/docs/usage/node.mdx

@@ -1,6 +1,6 @@
 import { Steps, Tabs } from 'nextra/components'
 
-# Using terai with React
+# Using Terai with React
 
 Setting up terai in a React project.
 

website/src/pages/docs/usage/react.mdx

@@ -1,8 +1,8 @@
 import { Steps, Tabs } from 'nextra/components'
 
-# Using terai with Vite
+# Using Terai with Vite
 
-Using **terai** in a **Vite** project.
+Using **Terai** in a **Vite** project.
 
 ## Installation
 
@@ -41,7 +41,6 @@ Install `terai` and create your `terai.config.ts` file.
   bun terai init
   ```
   </Tabs.Tab>
-
 </Tabs>
 
 - [`init`](/docs/references/cli#terai-init): script that creates a

website/src/pages/docs/usage/vite.mdx

@@ -1 +1 @@
-# Terai
+# Terai

website/src/pages/index.mdx

@@ -57,7 +57,7 @@ const config: ThemeConfig = {
 		dark: 235
 	},
 	primarySaturation: {
-		light: 70,
+		light: 40,
 		dark: 40
 	},
 	footer: {

website/theme.config.tsx

@@ -22,6 +22,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/pages/index.mdx"
+  ],
   "exclude": ["node_modules"]
 }