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/plurals.md

@@ -36,7 +36,7 @@ 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_.
 

website/docs/ref/macro.md

@@ -897,7 +897,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.md#plural-1) macro are transformed into [`plural`](/docs/guides/message-format.md) format.
 
 ```jsx
 import { Plural } from "@lingui/macro";
@@ -964,7 +964,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 +997,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/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}

website/docs/tutorials/react.md

@@ -58,7 +58,7 @@ As you can see, it's a simple mailbox application with only one page.
 
 ## Installing LinguiJS
 
-Follow setup guide either for projects using [LinguiJS with Create React App](/docs/tutorials/setup-cra.md) or for general [React projects](/docs/tutorials/setup-react.md).
+Follow the [React projects](/docs/tutorials/setup-react.md) setup guide.
 
 ## Setup
 

website/docs/tutorials/setup-react.md

@@ -5,13 +5,9 @@ description: Learn how to add internationalization to a React application using
 
 # Setup with React project
 
-:::info
-If you use Create React App, even ejected, follow [LinguiJS and Create React App](/docs/tutorials/setup-cra.md) setup guide.
-:::
+Learn how to add internationalization to a React application using Lingui. This guide applies to any React project, including those created with [Create React App](https://create-react-app.dev/).
 
-This setup guide is for any project which uses React.
-
-## Install
+## Installation
 
 1.  Install `@lingui/cli`, `@lingui/macro`, `babel-plugin-macros` and Babel [^1] core packages as a development dependencies and `@lingui/react` as a runtime dependency.
 
@@ -21,10 +17,6 @@ This setup guide is for any project which uses React.
     npm install --save @lingui/react
     ```
 
-    :::tip
-    For those who prefer not to use Babel, Lingui offers the [SWC Plugin](/docs/ref/swc-plugin.md) as an alternative.
-    :::
-
     :::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.
     :::
@@ -37,82 +29,89 @@ This setup guide is for any project which uses React.
     }
     ```
 
-    :::info
-    If you use any preset, check first if it contains `macros` plugin. These presets already includes `macros` plugin: `react-scripts`
-    :::
+    If you use any preset, check first if it contains `macros` plugin. These presets already includes `macros` plugin: `react-scripts`.
 
-3.  Create `lingui.config.js` file with LinguiJS configuration in root of your project (next to `package.json`). Replace `src` with the directory name where you have source files:
-
-    ```js title="lingui.config.js"
-    /** @type {import('@lingui/conf').LinguiConfig} */
-    module.exports = {
-      locales: ["en", "cs", "fr"],
-      catalogs: [
-        {
-          path: "<rootDir>/src/locales/{locale}/messages",
-          include: ["src"],
-        },
-      ],
-      format: "po",
-    };
-    ```
+:::info
+For those who prefer not to use Babel, Lingui offers the [SWC Plugin](/docs/ref/swc-plugin.md) as an alternative.
+:::
 
-    PO format is recommended for message catalogs. See [`format`](/docs/ref/catalog-formats.md) documentation for other available formats.
+:::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.
+:::
 
-4.  Add following scripts to your `package.json`:
+## Configuration
 
-    ```json title="package.json"
-    {
-      "scripts": {
-        "extract": "lingui extract",
-        "compile": "lingui compile"
-      }
-    }
-    ```
+1. Create `lingui.config.js` file with LinguiJS configuration in root of your project (next to `package.json`). Replace `src` with the directory name where you have source files:
+
+   ```js title="lingui.config.js"
+   /** @type {import('@lingui/conf').LinguiConfig} */
+   module.exports = {
+     locales: ["en", "cs", "fr"],
+     sourceLocale: "en",
+     catalogs: [
+       {
+         path: "<rootDir>/src/locales/{locale}/messages",
+         include: ["src"],
+       },
+     ],
+     format: "po",
+   };
+   ```
+
+   This configuration will extract messages from source files inside `src` directory and write them into message catalogs in `src/locales` (English catalog would be in e.g: `src/locales/en/messages.po`).
+
+   PO format is recommended for message catalogs. See [`format`](/docs/ref/catalog-formats.md) documentation for other available formats.
+
+2. Add following scripts to your `package.json`:
+
+   ```json title="package.json"
+   {
+     "scripts": {
+       "extract": "lingui extract",
+       "compile": "lingui compile"
+     }
+   }
+   ```
 
 :::tip
 If you use TypeScript, you can add `--typescript` flag to `compile` script to produce compiled message catalogs with TypeScript types.
 :::
 
-5.  Check the installation by running:
+## Usage
 
-    ```bash npm2yarn
-    npm run extract
-    ```
+Check the installation by running:
 
-    There should be no error and you should see output similar following:
+```bash npm2yarn
+npm run extract
+```
 
-    ```bash npm2yarn
-    > npm run extract
-
-    Catalog statistics:
-    ┌──────────┬─────────────┬─────────┐
-    │ Language │ Total count │ Missing │
-    ├──────────┼─────────────┼─────────┤
-    │ cs       │     0       │   0     │
-    │ en       │     0       │   0     │
-    │ fr       │     0       │   0     │
-    └──────────┴─────────────┴─────────┘
-
-    (use "lingui extract" to update catalogs with new messages)
-    (use "lingui compile" to compile catalogs for production)
-    ```
+There should be no error and you should see output similar following:
 
-:::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.
-:::
+```bash npm2yarn
+> npm run extract
 
-Congratulations! You've successfully set up project with LinguiJS. Now it's good time to follow [React tutorial](/docs/tutorials/react.md) or read about [ICU Message Format](/docs/ref/message-format.md) which is used in messages.
+Catalog statistics:
+┌──────────┬─────────────┬─────────┐
+│ Language │ Total count │ Missing │
+├──────────┼─────────────┼─────────┤
+│ cs       │     0       │   0     │
+│ en       │     0       │   0     │
+│ fr       │     0       │   0     │
+└──────────┴─────────────┴─────────┘
 
-## Further reading
+(use "lingui extract" to update catalogs with new messages)
+(use "lingui compile" to compile catalogs for production)
+```
+
+Congratulations! You've successfully set up project with Lingui. Now it's good time to follow [React tutorial](/docs/tutorials/react.md) or read about [ICU Message Format](/docs/guides/message-format.md) which is used in messages.
 
-Checkout these reference guides for full documentation:
+## Further reading
 
 - [Internationalization of React apps](/docs/tutorials/react.md)
 - [Common i18n patterns in React](/docs/tutorials/react-patterns.md)
 - [`@lingui/react` reference documentation](/docs/ref/react.md)
-- [ICU Message Format](/docs/ref/message-format.md)
 - [CLI reference](/docs/ref/cli.md)
 - [Configuration reference](/docs/ref/conf.md)
+- [ICU Message Format](/docs/guides/message-format.md)
 
 [^1]: For those who prefer not to use Babel, Lingui offers the [SWC Plugin](/docs/ref/swc-plugin.md) as an alternative.

website/docs/tutorials/setup-vite.md

@@ -12,7 +12,7 @@ The Lingui Vite integration:
 
 ## Setup with [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react) {#setup-with-vitejs-plugin-react}
 
-`@vitejs/plugin-react` uses Babel to transform your code. LinguiJS relies on `babel-plugin-macros` to compile JSX to [ICU Message Format](/docs/ref/message-format.md) and for automatic ID generation.
+`@vitejs/plugin-react` uses Babel to transform your code. LinguiJS relies on `babel-plugin-macros` to compile JSX to [ICU Message Format](/docs/guides/message-format.md) and for automatic ID generation.
 
 1.  Install `@lingui/cli`, `babel-plugin-macros` as development dependencies and `@lingui/macro`, `@lingui/react` as a runtime dependency:
 
@@ -46,7 +46,7 @@ The Lingui Vite integration:
 
 ## Setup with [@vitejs/plugin-react-swc](https://www.npmjs.com/package/@vitejs/plugin-react-swc) {#setup-with-vitejs-plugin-react-swc}
 
-`@vitejs/plugin-react-swc` uses [SWC](https://swc.rs/) to transform your code, which is 20x faster than Babel. LinguiJS relies on [`@lingui/swc-plugin`](/docs/ref/swc-plugin.md) to compile JSX to [ICU Message Format](/docs/ref/message-format.md) and for automatic ID generation.
+`@vitejs/plugin-react-swc` uses [SWC](https://swc.rs/) to transform your code, which is 20x faster than Babel. LinguiJS relies on [`@lingui/swc-plugin`](/docs/ref/swc-plugin.md) to compile JSX to [ICU Message Format](/docs/guides/message-format.md) and for automatic ID generation.
 
 1.  Install `@lingui/cli`, `@lingui/swc-plugin` as development dependencies and `@lingui/macro`, `@lingui/react` as a runtime dependency:
 
@@ -159,4 +159,4 @@ 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.
 
-Congratulations! You've successfully set up a Vite project with LinguiJS. Now it's a good time to follow [React tutorial](/docs/tutorials/react.md) or read about [ICU Message Format](/docs/ref/message-format.md) which is used in messages.
+Congratulations! You've successfully set up a Vite project with LinguiJS. Now it's a good time to follow [React tutorial](/docs/tutorials/react.md) or read about [ICU Message Format](/docs/guides/message-format.md) which is used in messages.