docs: various changes

README.md

@@ -53,14 +53,12 @@ Lingui is an easy yet powerful internationalization framework for global project
 
 ### Install
 
-- [Create React App][TutorialSetupCRA]
 - [React projects][TutorialSetupReact]
 - [Vite project][SetupVite]
 
 ### Tutorials
 
 - [React][TutorialReact]
-- [Vue.js][TutorialVue]
 - [React Native][TutorialReactNative]
 - [Plain JavaScript][TutorialJavaScript]
 - [Working with Command Line Tool][TutorialCLI]
@@ -69,6 +67,7 @@ Lingui is an easy yet powerful internationalization framework for global project
 
 - [SWC Plugin][SWCPlugin]
 - [Vite Plugin][VitePlugin]
+- [ESLint Plugin](ESLintPlugin)
 
 If you're a react-intl user, check out [a comparison of react-intl and Lingui](https://lingui.dev/misc/react-intl).
 
@@ -128,15 +127,14 @@ The project is licensed under the [MIT][License] license.
 [TutorialReactNative]: https://lingui.dev/tutorials/react-native
 [TutorialJavaScript]: https://lingui.dev/tutorials/javascript
 [TutorialCLI]: https://lingui.dev/tutorials/cli
-[TutorialSetupCRA]: https://lingui.dev/tutorials/setup-cra
 [TutorialSetupReact]: https://lingui.dev/tutorials/setup-react
-[TutorialVue]: https://lingui.dev/tutorials/extractor-vue
 [SetupVite]: https://lingui.dev/tutorials/setup-vite
 [RefCLI]: https://lingui.dev/ref/cli
 [Examples]: https://github.com/lingui/js-lingui/tree/main/examples
 
 [SWCPlugin]: https://lingui.dev/ref/swc-plugin
 [VitePlugin]: https://lingui.dev/ref/vite-plugin
+[ESLintPlugin]: https://lingui.dev/ref/eslint-plugin
 
 [Badge-MainSuite-GithubCI]: https://github.com/lingui/js-lingui/workflows/main-suite/badge.svg
 [Badge-ReleaseWorkflowTesting-GithubCI]: https://github.com/lingui/js-lingui/workflows/release-workflow-test/badge.svg

packages/extractor-vue/README.md

@@ -44,7 +44,7 @@ This package is licensed under [MIT][license] license.
 
 [license]: https://github.com/lingui/js-lingui/blob/main/LICENSE
 [linguijs]: https://github.com/lingui/js-lingui
-[documentation]: https://lingui.dev/tutorials/extractor-vue
+[documentation]: https://lingui.dev/ref/extractor-vue
 [package]: https://www.npmjs.com/package/@lingui/extractor-vue
 [badge-downloads]: https://img.shields.io/npm/dw/@lingui/extractor-vue.svg
 [badge-version]: https://img.shields.io/npm/v/@lingui/extractor-vue.svg

vercel.json

@@ -1,6 +1,9 @@
 {
   "redirects": [
     { "source": "/index.html", "destination": "/", "permanent": true },
-    { "source": "/:path+.html", "destination": "/:path", "permanent": true }
+    { "source": "/:path+.html", "destination": "/:path", "permanent": true },
+    { "source": "/tutorials/setup-cra", "destination": "/tutorials/setup-react", "permanent": true},
+    { "source": "/ref/message-format", "destination": "/guides/message-format", "permanent": true},
+    { "source": "/tutorials/extractor-vue", "destination": "/ref/extractor-vue", "permanent": true}
   ]
 }

website/docs/guides/message-extraction.md

@@ -28,7 +28,7 @@ t({
 const jsx = <Trans>Hi, my name is {name}</Trans>;
 ```
 
-For more usage examples, refer to the [macro documentation](/docs/ref/macro.md).
+For more usage examples, refer to the [macro documentation](/docs/ref/macro.mdx).
 
 ### Non-Macro usages
 

website/docs/guides/plurals.md

@@ -36,11 +36,11 @@ plural(numBooks, {
 When `numBooks == 1`, this will render as _1 book_ and for `numBook == 2` it will be _2 books_.
 
 Interestingly, for `numBooks == -1`, it will be _-1 book_. This is because the "one" plural form also applies to -1. It is therefore important to remember that the plural forms (such as "one" or "two") do not represent the numbers themselves, but rather _categories_ of numbers.
-If you want to specify a message for an exact number, use [`exact matches`](/ref/message-format#plurals).
+If you want to specify a message for an exact number, use [`exact matches`](/guides/message-format#plurals).
 
 > Funny fact for non-English speakers: In English, 0 uses plural form too, _0 books_.
 
-Under the hood, [`plural`](/docs/ref/macro.md#plural) is replaced with low-level [`i18n._`](/docs/ref/core.md#i18n._). For production, the above example will become:
+Under the hood, [`plural`](/docs/ref/macro.mdx#plural) is replaced with low-level [`i18n._`](/docs/ref/core.md#i18n._). For production, the above example will become:
 
 ```js
 i18n._({

website/docs/misc/react-intl.md

@@ -67,25 +67,25 @@ However, let's go yet another level deeper.
 
 ## Macros for component-based message syntax
 
-[Lingui](https://github.com/lingui/js-lingui) provides macros [`@lingui/macro`](/docs/ref/macro.md) which automatically generates a message syntax.
+[Lingui](https://github.com/lingui/js-lingui) provides macros [`@lingui/macro`](/docs/ref/macro.mdx) which automatically generates a message syntax.
 
 Let's go back to the previous example:
 
 ```html
 <p>Read the <a href="/docs">documentation</a>.</p>
 ```
 
-All we need to do is to wrap the message in a [`Trans`](/docs/ref/macro.md#trans) macro:
+All we need to do is to wrap the message in a [`Trans`](/docs/ref/macro.mdx#trans) macro:
 
 ```html
 <p>
   <Trans id="msg.docs">Read the <a href="/docs">documentation</a>.</Trans>
 </p>
 ```
 
-The macro then parses the [`Trans`](/docs/ref/macro.md#trans) macro children and generates `message` and `components` props automatically in the form described in the previous section.
+The macro then parses the [`Trans`](/docs/ref/macro.mdx#trans) macro children and generates `message` and `components` props automatically in the form described in the previous section.
 
-This is extremely useful when adding i18n to an existing project. All we need is to wrap all messages in [`Trans`](/docs/ref/macro.md#trans) macro.
+This is extremely useful when adding i18n to an existing project. All we need is to wrap all messages in [`Trans`](/docs/ref/macro.mdx#trans) macro.
 
 Let's compare it with react-intl solution to see the difference:
 
@@ -130,7 +130,7 @@ Let's take a look at the original example from react-intl docs:
 />
 ```
 
-Using [Lingui](https://github.com/lingui/js-lingui) macros, we could combine [`Trans`](/docs/ref/macro.md#trans), [`Plural`](/docs/ref/macro.md#plural-1) components and [`i18n.number`](/docs/ref/core.md#i18n.number) macro:
+Using [Lingui](https://github.com/lingui/js-lingui) macros, we could combine [`Trans`](/docs/ref/macro.mdx#trans), [`Plural`](/docs/ref/macro.mdx#plural-1) components and [`i18n.number`](/docs/ref/core.md#i18n.number) macro:
 
 ```jsx
 <Trans id="welcome">

website/docs/ref/catalog-formats.md

@@ -81,8 +81,8 @@ msgstr[1] "Case number {anotherCount}"
 
 Note that this format comes with several caveats and should therefore only be used if using ICU plurals in PO files is not an option:
 
-- Nested/multiple plurals in one message as shown in [`plural`](/docs/ref/macro.md#plural) are not supported as it cannot be expressed with gettext plurals. Messages containing nested/multiple formats will not be output correctly.
-- [`select`](/docs/ref/macro.md#select) and [`selectOrdinal`](/docs/ref/macro.md#selectordinal) cannot be expressed with gettext plurals, but the original ICU format is still saved to the `msgid`/`msgstr` properties. To disable the warning that this might not be the expected behavior, include `{ disableSelectWarning: true }` in the [`format`](/docs/ref/conf.md#format) options.
+- Nested/multiple plurals in one message as shown in [`plural`](/docs/ref/macro.mdx#plural) are not supported as it cannot be expressed with gettext plurals. Messages containing nested/multiple formats will not be output correctly.
+- [`select`](/docs/ref/macro.mdx#select) and [`selectOrdinal`](/docs/ref/macro.mdx#selectordinal) cannot be expressed with gettext plurals, but the original ICU format is still saved to the `msgid`/`msgstr` properties. To disable the warning that this might not be the expected behavior, include `{ disableSelectWarning: true }` in the [`format`](/docs/ref/conf.md#format) options.
 - Source/development languages with more than two plurals could experience difficulties when no custom IDs are used, as gettext cannot have more than two plurals cases identifying an item (`msgid` and `msgid_plural`).
 - Gettext doesn't support plurals for negative and fractional numbers even though some languages have special rules for these cases.
 

website/docs/ref/conf.md

@@ -403,7 +403,7 @@ import { myI18n } from "./custom-i18n-config";
 // "runtimeConfigModule": ["./custom-i18n-config", "myI18n"]
 ```
 
-In some advanced cases you may also need to change the module from which [Trans](/docs/ref/macro.md#trans) is imported. To do that, pass an object to `runtimeConfigModule`:
+In some advanced cases you may also need to change the module from which [Trans](/docs/ref/macro.mdx#trans) is imported. To do that, pass an object to `runtimeConfigModule`:
 
 ```jsx
 // If you import `i18n` object from custom module like this:

website/docs/ref/macro.md → website/docs/ref/macro.mdx

@@ -5,48 +5,55 @@ description: Transform JavaScript objects and JSX elements into ICU MessageForma
 
 # Macros
 
-The `@lingui/macro` package transforms JavaScript objects and JSX elements into ICU MessageFormat messages. You can use [Babel macros](#babel) or [SWC plugin](#swc) for this transformation.
+The `@lingui/macro` package transforms JavaScript objects and JSX elements into ICU MessageFormat messages. You can use Babel macros or SWC plugin for this transformation.
 
 ## Installation
 
-Installing `@lingui/macro` can be done in two ways, depending on whether you use Babel or SWC as your compiler.
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
-### Babel
+<Tabs groupId="babel-swc">
+  <TabItem value="babel" label="Babel" default>
+    Babel macros require [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) to work. If you use a framework (for example GatsbyJS, Create React App > 2.0) you might already have macros enabled. Otherwise, install it as any other Babel plugin:
+    - Install `babel-plugin-macros` as a dev dependency and `@lingui/macro` as dependency:
 
-Babel macros require [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) to work. If you use a framework (for example GatsbyJS, Create React App > 2.0) you might already have macros enabled. Otherwise, install it as any other Babel plugin:
+      ```bash npm2yarn
+      npm install --save-dev babel-plugin-macros
+      npm install --save @lingui/macro
+      ```
 
-1. Install `babel-plugin-macros` as a dev dependency and `@lingui/macro` as dependency:
+    - Add `macros` to the top of plugins section in your Babel config:
 
-```bash npm2yarn
-npm install --save-dev babel-plugin-macros
-npm install --save @lingui/macro
-```
-
-2. Add `macros` to the top of plugins section in your Babel config:
-
-```json
-{
-  "plugins": ["macros"]
-}
-```
+      ```json
+      {
+        "plugins": ["macros"]
+      }
+      ```
 
-### SWC
+      When using any preset, first check if it includes the `macros` plugin. These presets already includes the `macros` plugin: `react-scripts`.
 
-For those who prefer not to use Babel, Lingui offers the [SWC Plugin](/docs/ref/swc-plugin.md) as an alternative.
+  </TabItem>
+  <TabItem value="swc" label="SWC">
+    - Install `@lingui/swc-plugin` as a dev dependency and `@lingui/macro` as dependency:
 
-1. Install `@lingui/swc-plugin` as a dev dependency and `@lingui/macro` as dependency:
+      ```bash npm2yarn
+      npm install --save-dev @lingui/swc-plugin
+      npm install --save @lingui/macro
+      ```
 
-```bash npm2yarn
-npm install --save-dev @lingui/swc-plugin
-npm install --save @lingui/macro
-```
+    - [Add necessary configurations](/docs/ref/swc-plugin.md#usage).
 
-2. [Add necessary configurations](/docs/ref/swc-plugin.md#usage).
+  </TabItem>
+</Tabs>
 
 :::note
 It's recommended to install `@lingui/macro` package as a production dependency rather than development one to avoid `import/no-extraneous-dependencies` errors in ESLint.
 :::
 
+:::tip
+Don't miss the [Lingui ESLint Plugin](/docs/ref/eslint-plugin.md) which can help you find and prevent common l10n mistakes in your code.
+:::
+
 ## Overview
 
 The advantages of using macros are:
@@ -89,10 +96,10 @@ i18n._(
 ```
 
 :::note
-By default, the `i18n` object is imported from `@lingui/core`. If you use a custom instance of `i18n` object, you need to set [`runtimeConfigModule`](/docs/ref/conf.md#runtimeconfigmodule) or pass a custom instance to [`t`](/docs/ref/macro.md#t).
+By default, the `i18n` object is imported from `@lingui/core`. If you use a custom instance of `i18n` object, you need to set [`runtimeConfigModule`](/docs/ref/conf.md#runtimeconfigmodule) or pass a custom instance to [`t`](/docs/ref/macro.mdx#t).
 :::
 
-The only exception is [`defineMessage`](/docs/ref/macro.md#definemessage) which is transformed into message descriptor. In other words, the message isn't translated directly and can be used anytime later:
+The only exception is [`defineMessage`](/docs/ref/macro.mdx#definemessage) which is transformed into message descriptor. In other words, the message isn't translated directly and can be used anytime later:
 
 ```jsx
 import { i18n } from "@lingui/core"
@@ -311,7 +318,7 @@ const msg = /*i18n*/ {
 These macros can be used in any context (e.g. outside JSX). All JS macros are transformed into a _Message Descriptor_ wrapped inside of [`i18n._`](/docs/ref/core.md#i18n._) call.
 
 :::note
-By default, the `i18n` object is imported from `@lingui/core`. If you use a custom instance of `i18n` object, you need to set [`runtimeConfigModule`](/docs/ref/conf.md#runtimeconfigmodule) or pass a custom instance to [`t`](/docs/ref/macro.md#t).
+By default, the `i18n` object is imported from `@lingui/core`. If you use a custom instance of `i18n` object, you need to set [`runtimeConfigModule`](/docs/ref/conf.md#runtimeconfigmodule) or pass a custom instance to [`t`](/docs/ref/macro.mdx#t).
 :::
 
 _Message Descriptor_ is an object with message ID, default message and other parameters. [`i18n._`](/docs/ref/core.md#i18n._) accepts message descriptors and performs translation and formatting:
@@ -482,7 +489,7 @@ const message = i18n._(
 );
 ```
 
-If you need to add variables to plural form, you can use template string literals. This time [`t`](/docs/ref/macro.md#t) macro isn't required as template strings are transformed automatically:
+If you need to add variables to plural form, you can use template string literals. This time [`t`](/docs/ref/macro.mdx#t) macro isn't required as template strings are transformed automatically:
 
 ```js
 import { plural } from "@lingui/macro";
@@ -897,7 +904,7 @@ Components and HTML tags are replaced with dummy indexed tags (`<0></0>`) which
 
 > MessageFormat: `{arg, plural, ...forms}`
 
-Props of [`Plural`](/docs/ref/macro.md#plural-1) macro are transformed into [`plural`](/docs/ref/message-format.md) format.
+Props of [`Plural`](/docs/ref/macro.mdx#plural-1) macro are transformed into [`plural`](/docs/guides/message-format.md) format.
 
 ```jsx
 import { Plural } from "@lingui/macro";
@@ -964,7 +971,7 @@ Use `<Plural>` inside `<Trans>` macro if you want to provide `id`, `context` or
 
 > MessageFormat: `{arg, selectordinal, ...forms}`
 
-Props of `SelectOrdinal` macro are transformed into [`selectOrdinal`](/docs/ref/message-format.md) format:
+Props of `SelectOrdinal` macro are transformed into [`selectOrdinal`](/docs/guides/message-format.md) format:
 
 ```jsx
 import { SelectOrdinal } from "@lingui/macro";
@@ -997,7 +1004,7 @@ Use `<SelectOrdinal>` inside `<Trans>` macro if you want to provide `id`, `conte
 The select cases except `other` should be prefixed with underscore: `_male` or `_female`.
 :::
 
-Props of `Select` macro are transformed into [`select`](/docs/ref/message-format.md) format:
+Props of `Select` macro are transformed into [`select`](/docs/guides/message-format.md) format:
 
 ```jsx
 import { Select } from "@lingui/macro";

website/docs/ref/react.md

@@ -137,7 +137,7 @@ const CurrentLocale = () => {
 
 ## Components
 
-The `@lingui/react` package provides `Trans` component to render translations. However, you're more likely to use [macros](/docs/ref/macro.md) instead because they are more convenient and easier to use.
+The `@lingui/react` package provides `Trans` component to render translations. However, you're more likely to use [macros](/docs/ref/macro.mdx) instead because they are more convenient and easier to use.
 
 This section is intended for reference purposes.
 
@@ -149,7 +149,7 @@ This section is intended for reference purposes.
 
 :::important
 
-Import [`Trans`](/docs/ref/macro.md#trans) macro instead of [`Trans`](#trans) component if you use macros:
+Import [`Trans`](/docs/ref/macro.mdx#trans) macro instead of [`Trans`](#trans) component if you use macros:
 
 ```jsx
 import { Trans } from "@lingui/macro";
@@ -189,7 +189,7 @@ It's also possible to use `Trans` component directly without macros. In that cas
 
 ### Plurals
 
-If you cannot use [@lingui/macro](/docs/ref/macro.md) for some reason, you can render plurals using the plain Trans component like this:
+If you cannot use [@lingui/macro](/docs/ref/macro.mdx) for some reason, you can render plurals using the plain Trans component like this:
 
 ```jsx
 import React from "react";

website/docs/ref/swc-plugin.md

@@ -7,7 +7,7 @@ description: Use Lingui Macros in your SWC project
 
 [SWC](https://swc.rs/) is an extensible Rust-based platform for the next generation of fast developer tools.
 
-If you're using SWC in your project, you can opt for the `@lingui/swc-plugin`. This plugin, designed for SWC, is a Rust version of [LinguiJS Macro](/docs/ref/macro.md).
+If you're using SWC in your project, you can opt for the `@lingui/swc-plugin`. This plugin, designed for SWC, is a Rust version of [LinguiJS Macro](/docs/ref/macro.mdx).
 
 [![npm-version](https://img.shields.io/npm/v/@lingui/swc-plugin?logo=npm&cacheSeconds=1800)](https://www.npmjs.com/package/@lingui/swc-plugin)
 [![npm-downloads](https://img.shields.io/npm/dt/@lingui/swc-plugin?cacheSeconds=500)](https://www.npmjs.com/package/@lingui/swc-plugin)

website/docs/ref/vite-plugin.md

@@ -60,5 +60,5 @@ See the [guide about dynamic loading catalogs](/docs/guides/dynamic-loading-cata
 See [Vite's official documentation](https://vitejs.dev/guide/features.html#dynamic-import) for more info about Vite dynamic imports.
 
 :::note
-You also need to set up [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) to support [macros](/docs/ref/macro.md).
+You also need to set up [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) to support [macros](/docs/ref/macro.mdx).
 :::

website/docs/releases/migration-3.md

@@ -121,7 +121,7 @@ i18n.load({
 
 ### `@lingui/macro`
 
-- [`plural`](/docs/ref/macro.md#plural), [`select`](/docs/ref/macro.md#select) and [`selectOrdinal`](/docs/ref/macro.md#selectordinal) accepts value as a first parameter:
+- [`plural`](/docs/ref/macro.mdx#plural), [`select`](/docs/ref/macro.mdx#select) and [`selectOrdinal`](/docs/ref/macro.mdx#selectordinal) accepts value as a first parameter:
 
   ```diff
   - plural({ value, one: "# book", other: "# books" })
@@ -182,15 +182,15 @@ npm install --dev @lingui/macro babel-plugin-macros
     }
     ```
 
-2. Import [`Trans`](/docs/ref/macro.md#trans), [`Plural`](/docs/ref/macro.md#plural-1), [`Select`](/docs/ref/macro.md#select-1) and [`SelectOrdinal`](/docs/ref/macro.md#selectordinal-1) from `@lingui/macro`:
+2. Import [`Trans`](/docs/ref/macro.mdx#trans), [`Plural`](/docs/ref/macro.mdx#plural-1), [`Select`](/docs/ref/macro.mdx#select-1) and [`SelectOrdinal`](/docs/ref/macro.mdx#selectordinal-1) from `@lingui/macro`:
 
    ```diff
    - import { Trans } from "@lingui/react"
    + import { Trans } from "@lingui/macro"
    ```
 
    :::caution Note
-   If you used [`Trans`](/docs/ref/macro.md#trans) component without children, then keep the import from `@lingui/react`:
+   If you used [`Trans`](/docs/ref/macro.mdx#trans) component without children, then keep the import from `@lingui/react`:
 
    ```jsx
    import { Trans } from "@lingui/react";

website/docs/tools/translation-io.md

@@ -50,7 +50,7 @@ Sometimes you have no choice but to confront your translators with HTML or inter
 
 ### Smart Plural Management
 
-Lingui allows to write plurals using the [ICU MessageFormat](/docs/ref/message-format.md) syntax that looks like this:
+Lingui allows to write plurals using the [ICU MessageFormat](/docs/guides/message-format.md) syntax that looks like this:
 
 ```icu-message-format
 {count, plural, =0 {No messages}