docs: upgrade to Docusaurus v3 (#1861)

website/docs/misc/react-intl.md

@@ -146,7 +146,7 @@ and the final message would be very similar:
 />
 ```
 
-The only difference is the [<0>] tag included in the message, as [LinguiJS](https://github.com/lingui/js-lingui) can handle components in both variables and the message itself.
+The only difference is the `<0>` tag included in the message, as [LinguiJS](https://github.com/lingui/js-lingui) can handle components in both variables and the message itself.
 
 :::note
 It's good to mention here that this isn't the best example of using plurals. Make your translators happy and move plurals to the top of the message:
@@ -190,7 +190,7 @@ Custom IDs are supported as well:
 ```
 
 :::note
-To inject `i18n` object into props, you need to use [`useLingui`](/docs/ref/react.md#useLingui) hook. It's very similar to `useIntl` from [react-intl](https://formatjs.io/docs/react-intl/api/#useintl-hook).
+To inject `i18n` object into props, you need to use [`useLingui`](/docs/ref/react.md#uselingui) hook. It's very similar to `useIntl` from [react-intl](https://formatjs.io/docs/react-intl/api/#useintl-hook).
 :::
 
 ## External message catalog

website/docs/ref/catalog-formats.md

@@ -77,7 +77,7 @@ 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 [`formatOptions`](/docs/ref/conf.md#formatoptions).
+- [`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.
 - 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/releases/migration-3.md

@@ -16,10 +16,10 @@ Minimal required versions are:
 
 - `<I18n>` render-prop component was removed in favor of [`useLingui`](/docs/ref/react.md#uselingui) hook.
 - In [`I18nProvider`](/docs/ref/react.md#i18nprovider), `defaultRender` prop was renamed to `defaultComponent`, and now only accepts Custom Components
-- In [`Trans`](/docs/ref/react.md#Trans), `defaults` prop was renamed to `message` and `description` to `comment`.
-- In [`Trans`](/docs/ref/react.md#Trans), `render` prop only accepts render-prop function which is used to render translation.
-- In [`Trans`](/docs/ref/react.md#Trans), new prop `component` accepts React component which is used to render translation.
-- In [`Trans`](/docs/ref/react.md#Trans), `components` is now an object, not an array. When using the low level API, it allows to name the component placeholders:
+- In [`Trans`](/docs/ref/react.md#trans), `defaults` prop was renamed to `message` and `description` to `comment`.
+- In [`Trans`](/docs/ref/react.md#trans), `render` prop only accepts render-prop function which is used to render translation.
+- In [`Trans`](/docs/ref/react.md#trans), new prop `component` accepts React component which is used to render translation.
+- In [`Trans`](/docs/ref/react.md#trans), `components` is now an object, not an array. When using the low level API, it allows to name the component placeholders:
 
   ```jsx
   <Trans id="Read <a>the docs</a>!" components={{ a: <a href="/docs" /> }} />

website/docs/releases/migration-4.md

@@ -87,7 +87,7 @@ Enabling this mode will swap the logic, and the formatter will treat all message
 
 You can read more about the motivation behind this change in the [original RFC](https://github.com/lingui/js-lingui/issues/1360)
 
-Also, we've added a possibility to provide a context for the message. For more details, see the [Providing a context for a message](/docs/tutorials/react-patterns.md#providing-a-context-for-a-message).
+Also, we've added a possibility to provide a context for the message. For more details, see the [Providing a context for a message](/docs/tutorials/explicit-vs-generated-ids.md#providing-context-for-a-message).
 
 The context feature affects the message ID generation and adds the `msgctxt` parameter in case of the PO catalog format extraction.
 

website/docs/tools/introduction.md

@@ -42,9 +42,9 @@ Instead of manually sending and receiving many emails and fixing the inconsisten
 ### [Crowdin](https://crowdin.com/?utm_source=lingui.dev&utm_medium=referral&utm_campaign=lingui.dev)
 
 - Documentation: [Crowdin](/docs/tools/crowdin.md)
-- GitHub: <https://github.com/crowdin>
+- GitHub: https://github.com/crowdin
 
 ### [Translation.io](https://translation.io/lingui)
 
 - Documentation: [translation-io](/docs/tools/translation-io.md)
-- GitHub: <https://github.com/translation/lingui>
+- GitHub: https://github.com/translation/lingui

website/docs/tools/translation-io.md

@@ -7,8 +7,8 @@
 
 Links:
 
-- Website: <https://translation.io/lingui>
-- GitHub: <https://github.com/translation/lingui>
+- Website: https://translation.io/lingui
+- GitHub: https://github.com/translation/lingui
 
 ## Features
 
@@ -157,4 +157,4 @@ npm run sync_and_purge
 
 ---
 
-If you need some help with your project, feel free to contact <[email protected]>
+If you need some help with your project, feel free to contact [email protected]

website/docs/tutorials/react-native.md

@@ -83,7 +83,7 @@ As you can see, it's a simple mailbox application with only one screen.
 ## Internationalization in React (Native)
 
 :::tip TL;DR
-There are several ways to render translations: You may use the [`Trans`](/docs/ref/react.md#trans) component or the [`useLingui`](/docs/ref/react.md#withi18n) hook together with the [`t`](/docs/ref/macro.md#t) or [`msg`](/ref/macro#definemessage) macros. When you change the active locale or load new messages, all components that consume the Lingui context provided by [`I18nProvider`](/docs/ref/react.md#i18nprovider) will re-render, making sure the UI shows the correct translations.
+There are several ways to render translations: You may use the [`Trans`](/docs/ref/react.md#trans) component or the [`useLingui`](/docs/ref/react.md#uselingui) hook together with the [`t`](/docs/ref/macro.md#t) or [`msg`](/ref/macro#definemessage) macros. When you change the active locale or load new messages, all components that consume the Lingui context provided by [`I18nProvider`](/docs/ref/react.md#i18nprovider) will re-render, making sure the UI shows the correct translations.
 :::
 
 Not surprisingly, this part isn't too different from the [React tutorial](/docs/tutorials/react.md).

website/docs/tutorials/react-patterns.md

@@ -169,7 +169,7 @@ export function LoginLogoutButtons(props) {
 }
 ```
 
-If you need the prop to be displayed as a string-only translation, you can pass a message tagged with the [`msg`](/docs/ref/macro.md#defineMessage) macro:
+If you need the prop to be displayed as a string-only translation, you can pass a message tagged with the [`msg`](/docs/ref/macro.md#definemessage) macro:
 
 ```jsx
 import { msg } from "@lingui/macro";

website/docs/tutorials/react.md

@@ -334,7 +334,7 @@ Spooky, right? Let's see how this message actually looks in the message catalog.
 See all <0>unread messages</0> or <1>mark them</1> as read.
 ```
 
-You may notice that components and html tags are replaced with indexed tags (_<0>_, _<1>_). This is a little extension to the ICU MessageFormat which allows rich-text formatting inside translations. Components and their props remain in the source code and don't scare our translators. The tags in the extracted message won't scare our translators either: translators are used to seeing tags and their tools support them. Also, in case we change a `className`, we don't need to update our message catalogs. How cool is that?
+You may notice that components and html tags are replaced with indexed tags (`<0>`, `<1>`). This is a little extension to the ICU MessageFormat which allows rich-text formatting inside translations. Components and their props remain in the source code and don't scare our translators. The tags in the extracted message won't scare our translators either: translators are used to seeing tags and their tools support them. Also, in case we change a `className`, we don't need to update our message catalogs. How cool is that?
 
 ### JSX to MessageFormat transformations
 

website/docusaurus.config.js → website/docusaurus.config.ts

@@ -1,11 +1,11 @@
-const copyright = `Copyright © 2017-2022 Tom Ehrlich, © 2022-${new Date().getFullYear()} Crowdin.`;
-const url = process.env["SITE_URL"] || "https://lingui.dev";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
+import { themes } from "prism-react-renderer";
 
-/** @type {import('@docusaurus/types').DocusaurusConfig} */
-module.exports = {
+const config: Config = {
   title: "Lingui",
   tagline: "Internationalization Framework for Global Products",
-  url: url,
+  url: process.env["SITE_URL"] || "https://lingui.dev",
   baseUrl: "/",
   onBrokenLinks: "throw",
   favicon: "img/favicon.ico",
@@ -62,7 +62,7 @@ module.exports = {
     },
     footer: {
       style: "dark",
-      copyright,
+      copyright: `Copyright © 2017-2022 Tom Ehrlich, © 2022-${new Date().getFullYear()} Crowdin.`,
       links: [
         {
           title: "Docs",
@@ -127,11 +127,11 @@ module.exports = {
       indexName: "lingui",
     },
     prism: {
-      theme: require("prism-react-renderer/themes/github"),
-      darkTheme: require("prism-react-renderer/themes/dracula"),
-      additionalLanguages: ["bash", "gettext", "icu-message-format", "ignore"],
+      theme: themes.github,
+      darkTheme: themes.dracula,
+      additionalLanguages: ["bash", "json", "gettext", "icu-message-format", "ignore", "diff"],
     },
-  },
+  } satisfies Preset.ThemeConfig,
   presets: [
     [
       "@docusaurus/preset-classic",
@@ -151,15 +151,16 @@ module.exports = {
           editUrl: "https://github.com/lingui/js-lingui/tree/main/website/",
         },
         sitemap: {
-          changefreq: "weekly",
           priority: 0.5,
           filename: "sitemap.xml",
         },
         theme: {
           customCss: require.resolve("./src/css/custom.scss"),
         },
-      },
+      } satisfies Preset.Options,
     ],
   ],
   plugins: ["docusaurus-plugin-sass"],
 };
+
+export default config;

website/package.json

@@ -15,57 +15,57 @@
     "fixFormat": "prettier --write ."
   },
   "dependencies": {
-    "@docusaurus/core": "2.3.1",
-    "@docusaurus/preset-classic": "2.3.1",
-    "@docusaurus/remark-plugin-npm2yarn": "2.4.3",
-    "@mdx-js/react": "1.6.22",
-    "clsx": "1.2.1",
-    "docusaurus-plugin-sass": "^0.2.3",
-    "react": "17.0.0",
-    "react-dom": "17.0.0",
-    "sass": "^1.57.1"
+    "@docusaurus/core": "3.1.1",
+    "@docusaurus/preset-classic": "3.1.1",
+    "@docusaurus/remark-plugin-npm2yarn": "3.1.1",
+    "@mdx-js/react": "3.0.1",
+    "clsx": "2.1.0",
+    "docusaurus-plugin-sass": "^0.2.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sass": "^1.71.1"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "2.3.1",
-    "@docusaurus/module-type-aliases": "2.3.1",
-    "@docusaurus/utils": "2.3.1",
-    "@tsconfig/docusaurus": "1.0.6",
-    "@types/react": "17.0.0",
-    "@types/react-helmet": "6.1.6",
+    "@docusaurus/eslint-plugin": "3.1.1",
+    "@docusaurus/module-type-aliases": "3.1.1",
+    "@docusaurus/utils": "3.1.1",
+    "@tsconfig/docusaurus": "2.0.2",
+    "@types/react": "18.2.58",
+    "@types/react-helmet": "6.1.11",
     "@types/react-router-dom": "5.3.3",
-    "@typescript-eslint/eslint-plugin": "5.48.1",
-    "@typescript-eslint/parser": "5.48.1",
-    "editorconfig-checker": "4.0.0",
-    "eslint": "8.31.0",
-    "eslint-plugin-react": "7.32.0",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2",
+    "editorconfig-checker": "5.1.4",
+    "eslint": "8.57.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "prettier": "2.8.2",
-    "remark-cli": "11.0.0",
-    "remark-heading-id": "^1.0.0",
+    "prettier": "3.2.5",
+    "remark-cli": "12.0.0",
+    "remark-heading-id": "^1.0.1",
     "remark-lint-match-punctuation": "0.2.1",
-    "remark-lint-no-duplicate-headings-in-section": "3.1.1",
-    "remark-lint-no-tabs": "3.1.1",
+    "remark-lint-no-duplicate-headings-in-section": "3.1.2",
+    "remark-lint-no-tabs": "3.1.2",
     "remark-lint-no-trailing-spaces": "2.0.1",
-    "remark-preset-lint-consistent": "5.1.1",
-    "remark-preset-lint-markdown-style-guide": "5.1.2",
-    "remark-preset-lint-recommended": "6.1.2",
-    "remark-retext": "5.0.1",
-    "remark-validate-links": "12.1.0",
-    "retext-diacritics": "4.2.0",
-    "retext-english": "4.1.0",
-    "retext-indefinite-article": "4.2.0",
-    "retext-redundant-acronyms": "4.3.0",
-    "retext-repeated-words": "4.2.0",
-    "retext-sentence-spacing": "5.2.0",
-    "retext-syntax-mentions": "3.1.0",
-    "retext-syntax-urls": "3.1.2",
-    "typescript": "4.9.4",
-    "typescript-plugin-css-modules": "^4.1.1",
-    "unified": "10.1.2"
+    "remark-preset-lint-consistent": "5.1.2",
+    "remark-preset-lint-markdown-style-guide": "5.1.3",
+    "remark-preset-lint-recommended": "6.1.3",
+    "remark-retext": "6.0.0",
+    "remark-validate-links": "13.0.0",
+    "retext-diacritics": "5.0.0",
+    "retext-english": "5.0.0",
+    "retext-indefinite-article": "5.0.0",
+    "retext-redundant-acronyms": "5.0.0",
+    "retext-repeated-words": "5.0.0",
+    "retext-sentence-spacing": "6.0.0",
+    "retext-syntax-mentions": "4.0.0",
+    "retext-syntax-urls": "4.0.0",
+    "typescript": "5.3.3",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "unified": "11.0.4"
   }
 }

website/src/components/Features.tsx

@@ -187,7 +187,7 @@ const Features = (): React.ReactElement => {
         </div>
       </div>
       <div className={styles.linkFeatures}>
-        <Button href={withBaseUrl("/introduction/#key-features")} isOutline={true}>
+        <Button href={withBaseUrl("/introduction#key-features")} isOutline={true}>
           More Features
         </Button>
       </div>

website/tsconfig.json

@@ -3,6 +3,7 @@
   "include": ["src/"],
   "compilerOptions": {
     "jsx": "react",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+    "moduleResolution": "node"
   }
 }