docs: Add docs for VSCode integration (#484) [skip ci]

Author: amannn

docs/next.config.js

@@ -65,7 +65,12 @@ module.exports = withNextra({
     },
     {
       source: '/docs/usage/typescript',
-      destination: '/docs/typescript',
+      destination: '/docs/workflows/typescript',
+      permanent: true
+    },
+    {
+      source: '/docs/typescript',
+      destination: '/docs/workflows/typescript',
       permanent: true
     },
     {
@@ -93,6 +98,11 @@ module.exports = withNextra({
       destination: '/docs/environments/core-library',
       permanent: true
     },
+    {
+      source: '/docs/localization-management',
+      destination: '/docs/workflows/localization-management',
+      permanent: true
+    },
     {
       source: '/examples/next-13',
       destination: '/examples/app-router',

docs/pages/docs/_meta.json

@@ -4,8 +4,7 @@
   "environments": "Environments",
   "configuration": "Global configuration",
   "routing": "Routing",
-  "typescript": "TypeScript",
+  "workflows": "Workflows & integrations",
   "production-checklist": "Production checklist",
-  "faq": "FAQ",
-  "localization-management": "Localization management with Crowdin"
+  "faq": "FAQ"
 }

docs/pages/docs/configuration.mdx

@@ -119,7 +119,7 @@ export default getRequestConfig(async ({locale}) => ({
 </Tab>
 </VersionTabs>
 
-Colocating your messages with app code is beneficial because it allows developers to make changes to messages quickly. Additionally, you can [use the shape of your local messages for type checking](/docs/typescript).
+Colocating your messages with app code is beneficial because it allows developers to make changes to messages quickly. Additionally, you can [use the shape of your local messages for type checking](/docs/workflows/typescript).
 
 Translators can also collaborate on messages by using CI tools, such as <PartnerContentLink name="localization-management-intro" href="https://store.crowdin.com/github">Crowdin's GitHub integration</PartnerContentLink>, which allows changes to be synchronized directly into your code repository.
 

docs/pages/docs/faq.mdx

@@ -15,7 +15,7 @@ Generally, it's recommended to [handle internationalization in Server Components
 3. This library is built around the concept of namespaces and that components consume a single namespace—however this is not required.
 4. This library currently doesn't support AST-based extraction like `react-intl`. Note that building ASTs for messages upfront can help with runtime performance, but in exchange your bundle size might grow.
 5. This library is a bit smaller in size ([next-intl](https://bundlephobia.com/result?p=next-intl) vs [react-intl](https://bundlephobia.com/result?p=react-intl) on BundlePhobia).
-6. This library offers [type safety for message keys](/docs/typescript).
+6. This library offers [type safety for message keys](/docs/workflows/typescript).
 
 ## Can `next-intl` be used with Jest and Storybook?
 

docs/pages/docs/production-checklist.mdx

@@ -4,7 +4,7 @@ import Callout from 'components/Callout';
 
 While the [installation instructions](/docs/getting-started) are sufficient to use `next-intl` in your Next.js app, this checklist helps you ensure you're all set for production:
 
-1. If you're using TypeScript, you can take advantage of autocompletion and type safety for message keys by [setting up a type for your messages](/docs/typescript).
+1. If you're using TypeScript, you can take advantage of autocompletion and type safety for message keys by [setting up a type for your messages](/docs/workflows/typescript).
 2. If you're formatting dates and times, a [time zone should be configured](/docs/configuration#time-zone). By default, dates are formatted according to the time zone of the environment, which can lead to markup mismatches if the server and the user are located in different time zones. By supplying the `timeZone` explicitly, you can ensure that dates and times are rendered the same way on the server as well as the client.
 3. If you're formatting relative dates and times, a [global value for `now`](/docs/configuration#global-now-value) can be useful. This ensures that the server and client will render the same markup. Especially if you use caching for the responses of the server, the likelyhood of mismatches increases.
 4. To achieve consistent date, time and number formatting, it might be useful to set up [global formats](/docs/configuration#global-formats) which ensure consistent formatting across the app.

docs/pages/docs/workflows/_meta.json

@@ -0,0 +1,6 @@
+{
+  "index": "Start",
+  "typescript": "TypeScript",
+  "localization-management": "Localization management with Crowdin",
+  "vscode-integration": "VSCode integration"
+}

docs/pages/docs/workflows/index.mdx

@@ -0,0 +1,31 @@
+import {
+  CheckCircleIcon,
+  GlobeAltIcon,
+  CodeBracketIcon
+} from '@heroicons/react/24/outline';
+import {Card} from 'nextra-theme-docs';
+
+# Workflows & integrations
+
+To get the most out of `next-intl`, you can choose from these integrations to improve your workflow when developing and collaborating with translators.
+
+<div className="mt-8 flex flex-col gap-4 md:w-1/2">
+  <Card
+    arrow
+    icon={<CheckCircleIcon />}
+    title="TypeScript integration"
+    href="/docs/workflows/typescript"
+  />
+  <Card
+    icon={<GlobeAltIcon />}
+    arrow
+    title="Localization management with Crowdin"
+    href="/docs/workflows/localization-management"
+  />
+  <Card
+    icon={<CodeBracketIcon />}
+    arrow
+    title="VSCode integration"
+    href="/docs/workflows/vscode-integration"
+  />
+</div>

docs/pages/docs/localization-management.mdx renamed to docs/pages/docs/workflows/localization-management.mdx

@@ -74,9 +74,9 @@ As a developer-focused localization service, Crowdin helps you to decouple the l
 </figure>
 
 <Callout>
-  The [TypeScript integration of `next-intl`](/docs/typescript) can help you to
-  validate at compile time that your app is in sync with your translation
-  bundles.
+  The [TypeScript integration of `next-intl`](/docs/workflows/typescript) can
+  help you to validate at compile time that your app is in sync with your
+  translation bundles.
 </Callout>
 
 You can further simplify the process for translators by setting up <PartnerContentLink name="localization-management-developers" href="https://developer.crowdin.com/in-context-localization/">Crowdin In-Context</PartnerContentLink>, allowing for the translation of messages directly from your app.

docs/pages/docs/typescript.mdx renamed to docs/pages/docs/workflows/typescript.mdx

@@ -0,0 +1,22 @@
+# VSCode integration
+
+To improve the workflow for managing messages right from your code editor, you can use the [i18n Ally VSCode extension](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) which includes support for `next-intl`.
+
+<video
+  className="my-8"
+  autoPlay
+  loop
+  controls
+  muted
+  src="/i18n-ally-demo.mp4"
+/>
+
+## Installation instructions
+
+1. Install [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)
+2. Configure the extension in your workspace via [`settings.json`](https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings)
+
+```json filename=".vscode/settings.json"
+"i18n-ally.localesPaths": ["path/to/your/messages"], // E.g. "messages"
+"i18n-ally.keystyle": "nested"
+```