docs: various chores (#2078)

Author: andrii-bodnar

vercel.json

@@ -11,6 +11,8 @@
     { "source": "/tutorials/explicit-vs-generated-ids", "destination": "/guides/explicit-vs-generated-ids", "permanent": true},
     { "source": "/tutorials/setup-vite", "destination": "/installation#vite", "permanent": true },
     { "source": "/tutorials/setup-react", "destination": "/installation", "permanent": true },
-    { "source": "/tutorials/react-patterns", "destination": "/tutorials/react", "permanent": true }
+    { "source": "/tutorials/react-patterns", "destination": "/tutorials/react", "permanent": true },
+    { "source": "/misc/community", "destination": "/community", "permanent": true },
+    { "source": "/misc/examples", "destination": "/examples", "permanent": true }
   ]
 }

website/.remarkrc.mjs

@@ -39,7 +39,6 @@ export default {
     ],
 
     // Rules enabled by default by presents above that we don't want
-    ["remark-lint-code-block-style", false],
     ["remark-lint-file-extension", false],
     ["remark-lint-heading-style", false],
     ["remark-lint-list-item-indent", false],

website/docs/misc/community.md website/docs/community.mdwebsite/docs/misc/community.md renamed to website/docs/community.md

@@ -5,7 +5,7 @@ description: Learn how to write a custom localization message formatter for your
 
 # Custom Formatter
 
-If your project requires a message catalog format that Lingui doesn't [natively support](/docs/ref/catalog-formats.md), you can create a custom formatter to handle it. A custom formatter allows you to define how extracted strings are formatted into a custom catalog format, providing flexibility for specialized workflows and integration with unique file structures.
+If your project requires a message catalog format that Lingui doesn't [natively support](/ref/catalog-formats), you can create a custom formatter to handle it. A custom formatter allows you to define how extracted strings are formatted into a custom catalog format, providing flexibility for specialized workflows and integration with unique file structures.
 
 ## Overview
 

website/docs/misc/examples.md website/docs/examples.mdwebsite/docs/misc/examples.md renamed to website/docs/examples.md

@@ -7,7 +7,7 @@ description: Learn how to set up dynamic loading of message catalogs in Lingui t
 
 Internationalization in modern applications requires careful handling of localized messages to avoid bloating the initial bundle size. By default, Lingui makes it easy to load all strings for a single active locale. For even greater efficiency, developers can selectively load only the messages needed on demand using [`i18n.load`](/ref/core#i18n.load), ensuring minimal resource usage.
 
-The [`I18nProvider`](/docs/ref/react.md#i18nprovider) component doesn't make assumptions about your app's structure, giving you the freedom to load only the necessary messages for the currently selected language.
+The [`I18nProvider`](/ref/react#i18nprovider) component doesn't make assumptions about your app's structure, giving you the freedom to load only the necessary messages for the currently selected language.
 
 This guide shows how to set up dynamic loading of message catalogs, ensuring only the needed catalogs are loaded, which reduces bundle size and improves performance.
 

website/docs/guides/custom-formatter.md

@@ -148,7 +148,7 @@ function render() {
 }
 ```
 
-In the example code above, the content of [`Trans`](/docs/ref/macro.mdx#trans) is transformed into a message in MessageFormat syntax. By default, this message is used for generating the ID. Considering the example above, the catalog would contain these entries:
+In the example code above, the content of [`Trans`](/ref/macro#trans) is transformed into a message in MessageFormat syntax. By default, this message is used for generating the ID. Considering the example above, the catalog would contain these entries:
 
 ```js
 const catalog = [
@@ -202,7 +202,7 @@ The messages with IDs `msg.header` and `msg.hello` will be extracted with their
 
 ### With Core Macro
 
-To use custom IDs in non-JSX macros, call the [`msg`](/docs/ref/macro.mdx#definemessage) function with a message descriptor object, passing the ID using the `id` property:
+To use custom IDs in non-JSX macros, call the [`msg`](/ref/macro#definemessage) function with a message descriptor object, passing the ID using the `id` property:
 
 ```jsx
 import { msg } from "@lingui/core/macro";
@@ -212,7 +212,7 @@ msg({ id: "msg.greeting", message: `Hello World` });
 
 Message `msg.greeting` will be extracted with default value `Hello World`.
 
-For all other js macros ([`plural`](/docs/ref/macro.mdx#plural), [`select`](/docs/ref/macro.mdx#select), [`selectOrdinal`](/docs/ref/macro.mdx#selectordinal), use them inside [`msg`](/docs/ref/macro.mdx#definemessage) macro to pass ID (in this case, `'msg.caption'`).
+For all other js macros ([`plural`](/ref/macro#plural), [`select`](/ref/macro#select), [`selectOrdinal`](/ref/macro#selectordinal), use them inside [`msg`](/ref/macro#definemessage) macro to pass ID (in this case, `'msg.caption'`).
 
 ```jsx
 import { msg, plural } from "@lingui/core/macro";
@@ -228,5 +228,5 @@ msg({
 
 ## See Also
 
-- [Message Extraction](/docs/guides/message-extraction.md)
-- [Macros Reference](/docs/ref/macro.mdx)
+- [Message Extraction](/guides/message-extraction)
+- [Macros Reference](/ref/macro)

website/docs/guides/dynamic-loading-catalogs.md

@@ -5,11 +5,11 @@ description: Lazy translations allow you to defer translation of a message until
 
 # Lazy Translations
 
-Lazy translation allows you to defer translation of a message until it's rendered, giving you flexibility in how and where you define messages in your code. With lazy translation, you can tag a string with the [`msg`](/docs/ref/macro.mdx#definemessage) macro to create a _message descriptor_ that can be saved, passed around as a variable, and rendered later.
+Lazy translation allows you to defer translation of a message until it's rendered, giving you flexibility in how and where you define messages in your code. With lazy translation, you can tag a string with the [`msg`](/ref/macro#definemessage) macro to create a _message descriptor_ that can be saved, passed around as a variable, and rendered later.
 
 ## Usage Example
 
-To render the message descriptor as a string-only translation, pass it to the [`i18n._()`](/docs/ref/core.md#i18n._) method:
+To render the message descriptor as a string-only translation, pass it to the [`i18n._()`](/ref/core#i18n._) method:
 
 ```jsx
 import { msg } from "@lingui/core/macro";
@@ -24,7 +24,7 @@ export function getTranslatedColorNames() {
 
 ## Usage in React
 
-To render the message descriptor in a React component, pass its `id` to the [`Trans`](/docs/ref/react.md#trans) component as a value of the `id` prop:
+To render the message descriptor in a React component, pass its `id` to the [`Trans`](/ref/react#trans) component as a value of the `id` prop:
 
 ```jsx
 import { msg } from "@lingui/core/macro";
@@ -53,7 +53,7 @@ Please note that we import the `<Trans>` component from `@lingui/react` to use t
 
 Sometimes you need to choose between different messages to display depending on the value of a variable. For example, imagine you have a numeric "status" code that comes from an API, and you need to display a message that represents the current status.
 
-An easy way to do this is to create an object that maps the possible values of "status" to message descriptors (tagged with the [`msg`](/docs/ref/macro.mdx#definemessage) macro) and render them as needed with deferred translation:
+An easy way to do this is to create an object that maps the possible values of "status" to message descriptors (tagged with the [`msg`](/ref/macro#definemessage) macro) and render them as needed with deferred translation:
 
 ```jsx
 import { msg } from "@lingui/core/macro";
@@ -76,18 +76,14 @@ export default function StatusDisplay({ statusCode }) {
 
 In the following contrived example, we document how a welcome message will or will not be updated when locale changes. The documented behavior may not be intuitive at first, but it is expected, because of the way the `useMemo` dependencies work.
 
-To avoid bugs with stale translations, use the `_` function returned from the [`useLingui`](/docs/ref/react.md#uselingui) hook: it is safe to use with memoization because its reference changes whenever the Lingui context updates.
-
-:::tip
-You can also use the `t` function from the [`useLingui`](/docs/ref/macro.mdx#uselingui) macro hook, which behaves the same way as `_` from the runtime [`useLingui`](/docs/ref/react.md#uselingui) counterpart.
-:::
+To avoid bugs with stale translations, use the `t` function returned from the [`useLingui`](/ref/macro#uselingui) macro: it is safe to use with memoization because its reference changes whenever the Lingui context updates.
 
 Keep in mind that `useMemo` is primarily a performance optimization tool in React. Because of this, there might be no need to memoize your translations. Additionally, this issue is not present when using the `Trans` component, which we recommend using whenever possible.
 
 ```jsx
-import { msg } from "@lingui/core/macro";
 import { i18n } from "@lingui/core";
-import { useLingui } from "@lingui/react";
+import { msg } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react/macro";
 
 const welcomeMessage = msg`Welcome!`;
 
@@ -111,24 +107,13 @@ export function Welcome() {
   return <div>{buggyWelcome}</div>;
 }
 
-// ✅ Good! `useMemo` has i18n context in the dependency
+// ✅ Good! `useMemo` consumes the `t` function from the `useLingui` macro
 export function Welcome() {
-  const linguiCtx = useLingui();
-
-  const welcome = useMemo(() => {
-    return linguiCtx.i18n._(welcomeMessage);
-  }, [linguiCtx]);
-
-  return <div>{welcome}</div>;
-}
-
-// 🤩 Better! `useMemo` consumes the `_` function from the Lingui context
-export function Welcome() {
-  const { _ } = useLingui();
+  const { t } = useLingui();
 
   const welcome = useMemo(() => {
-    return _(welcomeMessage);
-  }, [_]);
+    return t(welcomeMessage);
+  }, [t]);
 
   return <div>{welcome}</div>;
 }

website/docs/guides/explicit-vs-generated-ids.md

@@ -9,7 +9,7 @@ Message extraction is a key part of the internationalization process. It involve
 
 In practice, developers define messages directly in the source code, and the extraction tool automatically collects these messages and stores them in a message catalog for translation.
 
-Read more about the [`lingui extract`](/docs/ref/cli.md) command.
+Read more about the [`lingui extract`](/ref/cli#extract) command.
 
 ## Supported Patterns
 
@@ -19,7 +19,7 @@ The extractor operates at a static level, meaning that it analyzes the source co
 
 > Macros are JavaScript transformers that run at build time. The value returned by a macro is inlined into the bundle instead of the original function call.
 
-The Lingui Macro provides powerful macros to transform JavaScript objects and JSX elements into [ICU MessageFormat](/docs/guides/message-format.md) messages at compile time.
+The Lingui Macro provides powerful macros to transform JavaScript objects and JSX elements into [ICU MessageFormat](/guides/message-format) messages at compile time.
 
 Extractor supports all macro usage, such as the following examples:
 
@@ -39,7 +39,7 @@ const jsx = <Trans>Hi, my name is {name}</Trans>;
 
 The extractor matches the `t` and `Trans` macro calls and extracts the messages from them.
 
-For more usage examples, see to the [Macros](/docs/ref/macro.mdx) reference.
+For more usage examples, see to the [Macros](/ref/macro) reference.
 
 ### Non-Macros Usage
 
@@ -108,7 +108,7 @@ The extractor can locate source files in two ways: by specifying a glob pattern
 
 By default, `lingui extract` uses a glob pattern to search for source files containing messages.
 
-The pattern is defined in the [`catalogs`](/docs//ref/conf.md#catalogs) property of the Lingui configuration file in your project's root directory.
+The pattern is defined in the [`catalogs`](/ref/conf#catalogs) property of the Lingui configuration file in your project's root directory.
 
 ![Scheme of discovering by glob pattern](/img/docs/extractor-glob-scheme.jpg#gh-light-mode-only)
 ![Scheme of discovering by glob pattern](/img/docs/extractor-glob-scheme-dark.jpg#gh-dark-mode-only)
@@ -208,10 +208,10 @@ The extractor supports TypeScript, Flow, and JavaScript (Stage 3) out of the box
 
 If you are using some experimental features (Stage 0 - Stage 2) or frameworks with custom syntax such as Vue.js or Svelte, you may want to implement your own custom extractor.
 
-Visit [Custom Extractor](/docs/guides/custom-extractor.md) to learn how to create a custom extractor.
+Visit [Custom Extractor](/guides/custom-extractor) to learn how to create a custom extractor.
 
 ## See Also
 
-- [Lingui CLI Reference](/docs/ref/cli.md)
-- [Macros Reference](/docs/ref/macro.mdx)
-- [Catalog Formats](/docs/ref/catalog-formats.md)
+- [Lingui CLI Reference](/ref/cli)
+- [Macros Reference](/ref/macro)
+- [Catalog Formats](/ref/catalog-formats)

website/docs/guides/lazy-translations.md

@@ -57,5 +57,5 @@ Example: `Attachment {name} saved`
 
 ## See Also
 
-- [Pluralization](/docs/guides/plurals.md)
+- [Pluralization](/guides/plurals)
 - [ICU Playground](https://format-message.github.io/icu-message-format-for-translators/editor.html)