Migrate from Docusaurus 1 to Docusaurus 3 (#17043)

Co-authored-by: fisker Cheung <lionkay@gmail.com>
2025-01-30 10:16:21 +08:00
1 parent 3e2f487049
commit 6a612520bc
@@ -49,9 +49,6 @@ jobs:
      - name: Lint Changelog
        run: yarn lint:changelog

-      - name: Lint blog post
-        run: yarn lint:blog
-
      - name: Lint docs code block
        run: yarn prettier "{docs,website/versioned_docs/version-stable}/**/*.md" --check
        env:
@@ -18,6 +18,7 @@
 /website/i18n
 /website/static/playground.js
 /website/static/lib
+/website/.docusaurus
 .DS_Store
 /coverage
 .idea
@@ -338,11 +338,11 @@
        "ve{2,}r{2,}y",
        "ve+r+y+long\\w*",
        "\\(https?://.*?\\)",
-        "author: \".*?\"",
-        "authorURL: \".*?\"",
-        "\"author\": \".*?\"",
+        "authors: \".*?\"",
+        "\"authors\": \".*?\"",
        "(long|after){3,}",
-        "\\\\u\\{[0-9a-fA-F]{4,6}\\}"
+        "\\\\u\\{[0-9a-fA-F]{4,6}\\}",
+        "appId: \".*?\""
    ],
    "files": [
        "*",
@@ -364,9 +364,11 @@
        "website/data/users.yml",
        "website/build/**",
        "website/playground/codeSamples.mjs",
-        "website/pages/googlefe164a33bda4034b.html",
+        "website/static/googlefe164a33bda4034b.html",
        "website/static/lib/**",
        "website/static/playground.js",
+        "website/src/css/custom.css",
+        "website/blog/authors.yml",
        "scripts/build/typescript-unused-specifiers.js"
    ]
 }
@@ -177,6 +177,10 @@ await format("lodash ( )", {
 // -> "_();\n"
 ```

-> Note: Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using [jscodeshift](https://github.com/facebook/jscodeshift) if you need codemods.
+:::note
+
+Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using [jscodeshift](https://github.com/facebook/jscodeshift) if you need codemods.
+
+:::

 As part of the removed Custom parser API, it was previously possible to pass a path to a module exporting a `parse` function via the `--parser` option. Use the `--plugin` CLI option or the `plugins` API option instead to [load plugins](plugins.md#using-plugins).
@@ -18,7 +18,7 @@ Required options:

 - **[`parser`](options.md#parser) (or [`filepath`](options.md#file-path))**: One of these options has to be specified for Prettier to know which parser to use.

- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in <https://unpkg.com/browse/prettier@%PRETTIER_VERSION%/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.
+- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource-options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in [https://unpkg.com/browse/prettier@%PRETTIER_VERSION%/plugins](https://unpkg.com/browse/prettier@%PRETTIER_VERSION%/plugins). Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.

  You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.

@@ -9,7 +9,11 @@ Use the `prettier` command to run Prettier from the command line.
 prettier [options] [file/dir/glob ...]
 ```

-> To run your locally installed version of Prettier, prefix the command with `npx` or `yarn` (if you use Yarn), i.e. `npx prettier --help`, or `yarn prettier --help`.
+:::note
+
+To run your locally installed version of Prettier, prefix the command with `npx` or `yarn` (if you use Yarn), i.e. `npx prettier --help`, or `yarn prettier --help`.
+
+:::

 To format a file in-place, use `--write`. (Note: This overwrites your files!)

@@ -29,9 +33,17 @@ A more complicated example:
 prettier docs package.json "{app,__{tests,mocks}__}/**/*.js" --write --single-quote --trailing-comma all
 ```

-> Don’t forget the **quotes** around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.
+:::warning

-> It’s better to use a [configuration file](configuration.md) for formatting options like `--single-quote` and `--trailing-comma` instead of passing them as CLI flags. This way the Prettier CLI, [editor integrations](editors.md), and other tooling can all know what options you use.
+Don’t forget the **quotes** around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.
+
+:::
+
+:::note
+
+It’s better to use a [configuration file](configuration.md) for formatting options like `--single-quote` and `--trailing-comma` instead of passing them as CLI flags. This way the Prettier CLI, [editor integrations](editors.md), and other tooling can all know what options you use.
+
+:::

 ## File patterns

@@ -222,7 +234,11 @@ Running Prettier without `--cache` will delete the cache.

 Also, since the cache file is stored in `./node_modules/.cache/prettier/.prettier-cache`, so you can use `rm ./node_modules/.cache/prettier/.prettier-cache` to remove it manually.

-> Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
+:::warning
+
+Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
+
+:::

 ## `--cache-location`

@@ -13,7 +13,11 @@ You can configure Prettier via (in order of precedence):
 - A `.prettierrc.cjs`, `prettier.config.cjs`, `.prettierrc.cts`, or `prettier.config.cts` file that exports an object using `module.exports`.
 - A `.prettierrc.toml` file.

-> TypeScript configuration files support requires [additional setup](#typescript-configuration-files)
+:::info
+
+TypeScript configuration files support requires [additional setup](#typescript-configuration-files)
+
+:::

 The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.

@@ -215,7 +219,7 @@ You can also switch to the `flow` parser instead of the default `babel` for .js

 ## Configuration Schema

-If you’d like a JSON schema to validate your configuration, one is available here: <https://json.schemastore.org/prettierrc>.
+If you’d like a JSON schema to validate your configuration, one is available here: [https://json.schemastore.org/prettierrc](https://json.schemastore.org/prettierrc).

 ## EditorConfig

@@ -7,10 +7,10 @@ title: For Enterprise

 Tidelift is working with the maintainers of Prettier and thousands of other open source projects to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use.

-<a class="button" href="https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Learn more</a>
-<a class="button" href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Request a demo</a>
+<a class="button button--primary" href="https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Learn more</a>
+<a class="button button--primary" href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Request a demo</a>

-<br>
+<br />

 ### Enterprise-ready open source software—managed for you

@@ -44,5 +44,5 @@ Tidelift works with GitHub, GitLab, BitBucket, and more. We support every cloud

 The end result? All of the capabilities you expect from commercial-grade software, for the full breadth of open source you use. That means less time grappling with esoteric open source trivia, and more time building your own applications—and your business.

-<a class="button" href="https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Learn more</a>
-<a class="button" href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Request a demo</a>
+<a class="button button--primary" href="https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Learn more</a>
+<a class="button button--primary" href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Request a demo</a>
@@ -51,9 +51,9 @@ Prettier enforces a consistent code **style** (i.e. code formatting that won’t

 If you want to learn more, these two conference talks are great introductions:

-[![A Prettier Printer by James Long on React Conf 2017](/docs/assets/youtube-cover/a-prettier-printer-by-james-long-on-react-conf-2017.png)](https://www.youtube.com/watch?v=hkfBvpEfWdA)
+[![A Prettier Printer by James Long on React Conf 2017](/images/youtube-cover/a-prettier-printer-by-james-long-on-react-conf-2017.png)](https://www.youtube.com/watch?v=hkfBvpEfWdA)

-[![JavaScript Code Formatting by Christopher Chedeau on React London 2017](/docs/assets/youtube-cover/javascript-code-formatting-by-christopher-chedeau-on-react-london-2017.png)](https://www.youtube.com/watch?v=0Q4kUNx85_4)
+[![JavaScript Code Formatting by Christopher Chedeau on React London 2017](/images/youtube-cover/javascript-code-formatting-by-christopher-chedeau-on-react-london-2017.png)](https://www.youtube.com/watch?v=0Q4kUNx85_4)

 #### Footnotes

@@ -3,34 +3,41 @@ id: install
 title: Install
 ---

+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
 First, install Prettier locally:

-<!--DOCUSAURUS_CODE_TABS-->
-<!--npm-->
+<Tabs groupId="package-manager">
+<TabItem value="npm">

 ```bash
 npm install --save-dev --save-exact prettier
 ```

-<!--yarn-->
+</TabItem>
+<TabItem value="yarn">

 ```bash
 yarn add --dev --exact prettier
 ```

-<!--pnpm-->
+</TabItem>
+<TabItem value="pnpm">

 ```bash
 pnpm add --save-dev --save-exact prettier
 ```

-<!--bun-->
+</TabItem>
+<TabItem value="bun">

 ```bash
 bun add --dev --exact prettier
 ```

-<!--END_DOCUSAURUS_CODE_TABS-->
+</TabItem>
+</Tabs>

 Then, create an empty config file to let editors and other tools know you are using Prettier:

@@ -51,48 +58,76 @@ Next, create a [.prettierignore](ignore.md) file to let the Prettier CLI and edi
 node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
 ```

-> Tip! Prettier will follow rules specified in .gitignore if it exists in the same directory from which it is run. You can also base your .prettierignore on .eslintignore (if you have one).
+:::tip

-> Another tip! If your project isn’t ready to format, say, HTML files yet, add `*.html`.
+Prettier will follow rules specified in .gitignore if it exists in the same directory from which it is run. You can also base your .prettierignore on .eslintignore (if you have one).
+
+:::
+
+:::tip[Another tip]
+
+If your project isn’t ready to format, say, HTML files yet, add `*.html`.
+
+:::

 Now, format all files with Prettier:

-<!--DOCUSAURUS_CODE_TABS-->
-<!--npm-->
+<Tabs groupId="package-manager">
+<TabItem value="npm">

 ```bash
 npx prettier . --write
 ```

-> What is that `npx` thing? `npx` ships with `npm` and lets you run locally installed tools. We’ll leave off the `npx` part for brevity throughout the rest of this file!
->
-> Note: If you forget to install Prettier first, `npx` will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your `package.json`. And it’s faster, too.
+:::info

-<!--yarn-->
+What is that `npx` thing? `npx` ships with `npm` and lets you run locally installed tools. We’ll leave off the `npx` part for brevity throughout the rest of this file!
+
+Note: If you forget to install Prettier first, `npx` will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your `package.json`. And it’s faster, too.
+
+:::
+
+</TabItem>
+<TabItem value="yarn">

 ```bash
 yarn prettier . --write
 ```

-> What is `yarn` doing at the start? `yarn prettier` runs the locally installed version of Prettier. We’ll leave off the `yarn` part for brevity throughout the rest of this file!
+:::info

-<!--pnpm-->
+What is `yarn` doing at the start? `yarn prettier` runs the locally installed version of Prettier. We’ll leave off the `yarn` part for brevity throughout the rest of this file!
+
+:::
+
+</TabItem>
+<TabItem value="pnpm">

 ```bash
 pnpm exec prettier . --write
 ```

-> What is `pnpm` doing at the start? `pnpm prettier` runs the locally installed version of Prettier. We’ll leave off the `pnpm` part for brevity throughout the rest of this file!
+:::info

-<!--bun-->
+What is `pnpm` doing at the start? `pnpm prettier` runs the locally installed version of Prettier. We’ll leave off the `pnpm` part for brevity throughout the rest of this file!
+
+:::
+
+</TabItem>
+<TabItem value="bun">

 ```bash
 bun prettier . --write
 ```

-> What is `bun` doing at the start? `bun prettier` runs the locally installed version of Prettier. We’ll leave off the `bun` part for brevity throughout the rest of this file!
+:::info

-<!--END_DOCUSAURUS_CODE_TABS-->
+What is `bun` doing at the start? `bun prettier` runs the locally installed version of Prettier. We’ll leave off the `bun` part for brevity throughout the rest of this file!
+
+:::
+
+</TabItem>
+</Tabs>

 `prettier --write .` is great for formatting everything, but for a big project it might take a little while. You may run `prettier --write app/` to format a certain directory, or `prettier --write app/components/Button.js` to format a certain file. Or use a _glob_ like `prettier --write "app/**/*.test.js"` to format all tests in a directory (see [fast-glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) for supported glob syntax).

@@ -110,9 +145,13 @@ Formatting from the command line is a good way to get started, but you get the m

 See [Editor Integration](editors.md) for how to set up your editor. If your editor does not support Prettier, you can instead [run Prettier with a file watcher](watching-files.md).

-> **Note:** Don’t skip the regular local install! Editor plugins will pick up your local version of Prettier, making sure you use the correct version in every project. (You wouldn’t want your editor accidentally causing lots of changes because it’s using a newer version of Prettier than your project!)
->
-> And being able to run Prettier from the command line is still a good fallback, and needed for CI setups.
+:::note
+
+Don’t skip the regular local install! Editor plugins will pick up your local version of Prettier, making sure you use the correct version in every project. (You wouldn’t want your editor accidentally causing lots of changes because it’s using a newer version of Prettier than your project!)
+
+And being able to run Prettier from the command line is still a good fallback, and needed for CI setups.
+
+:::

 ## ESLint (and other linters)

@@ -128,8 +167,8 @@ For example, you can do the following to have Prettier run before each commit:

 1. Install [husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged):

-   <!--DOCUSAURUS_CODE_TABS-->
-   <!--npm-->
+<Tabs groupId="package-manager">
+<TabItem value="npm">

 ```bash
 npm install --save-dev husky lint-staged
@@ -137,7 +176,8 @@ For example, you can do the following to have Prettier run before each commit:
 node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
 ```

-   <!--yarn-->
+</TabItem>
+<TabItem value="yarn">

 ```bash
 yarn add --dev husky lint-staged
@@ -145,9 +185,14 @@ For example, you can do the following to have Prettier run before each commit:
 node --eval "fs.writeFileSync('.husky/pre-commit','yarn lint-staged\n')"
 ```

-   > If you use Yarn 2, see https://typicode.github.io/husky/#/?id=yarn-2
+:::note

-   <!--pnpm-->
+If you use Yarn 2, see https://typicode.github.io/husky/#/?id=yarn-2
+
+:::
+
+</TabItem>
+<TabItem value="pnpm">

 ```bash
 pnpm add --save-dev husky lint-staged
@@ -155,7 +200,8 @@ For example, you can do the following to have Prettier run before each commit:
 node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"
 ```

-   <!--bun-->
+</TabItem>
+<TabItem value="bun">

 ```bash
 bun add --dev husky lint-staged
@@ -163,7 +209,8 @@ For example, you can do the following to have Prettier run before each commit:
 bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"
 ```

-   <!--END_DOCUSAURUS_CODE_TABS-->
+</TabItem>
+</Tabs>

 2. Add the following to your `package.json`:

@@ -175,7 +222,11 @@ For example, you can do the following to have Prettier run before each commit:
 }
 ```

-> Note: If you use ESLint, make sure lint-staged runs it before Prettier, not after.
+:::note
+
+If you use ESLint, make sure lint-staged runs it before Prettier, not after.
+
+:::

 See [Pre-commit Hook](precommit.md) for more information.

@@ -3,9 +3,13 @@ id: option-philosophy
 title: Option Philosophy
 ---

-> Prettier has a few options because of history. **But we won’t add more of them.**
->
-> Read on to learn more.
+:::info
+
+Prettier has a few options because of history. **But we won’t add more of them.**
+
+Read on to learn more.
+
+:::

 Prettier is not a kitchen-sink code formatter that attempts to print your code in any way you wish. It is _opinionated._ Quoting the [Why Prettier?](why-prettier.md) page:

@@ -30,22 +30,26 @@ Valid options:
 - `"end"` - Default behavior; when binary expressions wrap lines, print operators at the end of previous lines.

 | Default | CLI Override                                                    | API Override                                                   |
-| ------- | -------------------------------------------------------------- | ------------------------------------------------------------- |
-| `"end"` | <code>--experimental-operator-position <start&#124;end></code> | <code>experimentalOperatorPosition: "<start&#124;end>"</code> |
+| ------- | --------------------------------------------------------------- | -------------------------------------------------------------- |
+| `"end"` | <code>--experimental-operator-position \<start&#124;end></code> | <code>experimentalOperatorPosition: "\<start&#124;end>"</code> |

 ## Print Width

 Specify the line length that the printer will wrap on.

-> **For readability we recommend against using more than 80 characters:**
->
-> In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the maximum.
->
-> Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.
->
-> Remember, computers are dumb. You need to explicitly tell them what to do, while humans can make their own (implicit) judgements, for example on when to break a line.
->
-> In other words, don’t try to use printWidth as if it was ESLint’s [max-len](https://eslint.org/docs/rules/max-len) – they’re not the same. max-len just says what the maximum allowed line length is, but not what the generally preferred length is – which is what printWidth specifies.
+:::warning
+
+**For readability we recommend against using more than 80 characters:**
+
+In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends well below the maximum.
+
+Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how ng you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.
+
+Remember, computers are dumb. You need to explicitly tell them what to do, while humans can make their own (implicit) judgements, for example on when break a line.
+
+In other words, don’t try to use printWidth as if it was ESLint’s [max-len](https://eslint.org/docs/rules/max-len) – they’re not the same. max-len just says what the maximum allowed line length is, but not what the generally preferred length is – which is what printWidth specifies.
+
+:::

 | Default | CLI Override          | API Override        |
 | ------- | --------------------- | ------------------- |
@@ -116,8 +120,8 @@ Valid options:
 - `"preserve"` - Respect the input use of quotes in object properties.

 | Default       | CLI Override                                                          | API Override                                                          |
-| ------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------- |
-| `"as-needed"` | <code>--quote-props <as-needed&#124;consistent&#124;preserve></code> | <code>quoteProps: "<as-needed&#124;consistent&#124;preserve>"</code> |
+| ------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `"as-needed"` | <code>--quote-props \<as-needed&#124;consistent&#124;preserve></code> | <code>quoteProps: "\<as-needed&#124;consistent&#124;preserve>"</code> |

 Note that Prettier never unquotes numeric property names in Angular expressions, TypeScript, and Flow because the distinction between string and numeric keys is significant in these languages. See: [Angular][quote-props-angular], [TypeScript][quote-props-typescript], [Flow][quote-props-flow]. Also Prettier doesn’t unquote numeric properties for Vue (see the [issue][quote-props-vue] about that).

@@ -147,8 +151,8 @@ Valid options:
 - `"none"` - No trailing commas.

 | Default | CLI Override                                            | API Override                                            |
-| ------- | ------------------------------------------------------ | ------------------------------------------------------ |
-| `"all"` | <code>--trailing-comma <all&#124;es5&#124;none></code> | <code>trailingComma: "<all&#124;es5&#124;none>"</code> |
+| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
+| `"all"` | <code>--trailing-comma \<all&#124;es5&#124;none></code> | <code>trailingComma: "\<all&#124;es5&#124;none>"</code> |

 ## Bracket Spacing

@@ -177,8 +181,8 @@ Valid options:
 - `"collapse"` - Fit to a single line when possible.

 | Default      | CLI Override                                         | API Override                                         |
-| ------------ | --------------------------------------------------- | --------------------------------------------------- |
-| `"preserve"` | <code>--object-wrap <preserve&#124;collapse></code> | <code>objectWrap: "<preserve&#124;collapse>"</code> |
+| ------------ | ---------------------------------------------------- | ---------------------------------------------------- |
+| `"preserve"` | <code>--object-wrap \<preserve&#124;collapse></code> | <code>objectWrap: "\<preserve&#124;collapse>"</code> |

 ## Bracket Line

@@ -217,7 +221,11 @@ Valid options:

 ## [Deprecated] JSX Brackets

-_This option has been deprecated in v2.4.0, use --bracket-same-line instead_
+:::danger
+
+This option has been deprecated in v2.4.0, use --bracket-same-line instead\_
+
+:::

 Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).

@@ -264,8 +272,8 @@ Valid options:
 - `"avoid"` - Omit parens when possible. Example: `x => x`

 | Default    | CLI Override                                     | API Override                                     |
-| ---------- | ----------------------------------------------- | ----------------------------------------------- |
-| `"always"` | <code>--arrow-parens <always&#124;avoid></code> | <code>arrowParens: "<always&#124;avoid>"</code> |
+| ---------- | ------------------------------------------------ | ------------------------------------------------ |
+| `"always"` | <code>--arrow-parens \<always&#124;avoid></code> | <code>arrowParens: "\<always&#124;avoid>"</code> |

 At first glance, avoiding parentheses may look like a better choice because of less visual noise.
 However, when Prettier removes parentheses, it becomes harder to add type annotations, extra arguments or default values as well as making other changes.
@@ -325,7 +333,7 @@ Valid options:

 Note: the default value was `"babylon"` until v1.13.0.

-Note: the Custom parser API has been removed in v3.0.0. Use [plugins](plugins.md) instead ([how to migrate](api.md#custom-parser-api)).
+Note: the Custom parser API has been removed in v3.0.0. Use [plugins](plugins.md) instead ([how to migrate](api.md#custom-parser-api-removed)).

 <a name="filepath"></a>

@@ -398,8 +406,8 @@ Valid options:
 - `"preserve"` - Do nothing, leave prose as-is. _First available in v1.9.0_

 | Default      | CLI Override                                                 | API Override                                                 |
-| ------------ | ----------------------------------------------------------- | ----------------------------------------------------------- |
-| `"preserve"` | <code>--prose-wrap <always&#124;never&#124;preserve></code> | <code>proseWrap: "<always&#124;never&#124;preserve>"</code> |
+| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| `"preserve"` | <code>--prose-wrap \<always&#124;never&#124;preserve></code> | <code>proseWrap: "\<always&#124;never&#124;preserve>"</code> |

 ## HTML Whitespace Sensitivity

@@ -416,8 +424,8 @@ Valid options:
 - `"ignore"` - Whitespace (or the lack of it) around all tags is considered insignificant.

 | Default | CLI Override                                                              | API Override                                                             |
-| ------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
-| `"css"` | <code>--html-whitespace-sensitivity <css&#124;strict&#124;ignore></code> | <code>htmlWhitespaceSensitivity: "<css&#124;strict&#124;ignore>"</code> |
+| ------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| `"css"` | <code>--html-whitespace-sensitivity \<css&#124;strict&#124;ignore></code> | <code>htmlWhitespaceSensitivity: "\<css&#124;strict&#124;ignore>"</code> |

 ## Vue files script and style tags indentation

@@ -467,8 +475,8 @@ Valid options:
  (mixed values within one file are normalised by looking at what’s used after the first line)

 | Default | CLI Override                                                 | API Override                                                |
-| ------- | ----------------------------------------------------------- | ---------------------------------------------------------- |
-| `"lf"`  | <code>--end-of-line <lf&#124;crlf&#124;cr&#124;auto></code> | <code>endOfLine: "<lf&#124;crlf&#124;cr&#124;auto>"</code> |
+| ------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
+| `"lf"`  | <code>--end-of-line \<lf&#124;crlf&#124;cr&#124;auto></code> | <code>endOfLine: "\<lf&#124;crlf&#124;cr&#124;auto>"</code> |

 Setting `end_of_line` in an [`.editorconfig` file](https://editorconfig.org/) will configure Prettier’s end of line usage, unless overridden.

@@ -488,8 +496,8 @@ Valid options:
 - `"off"` - Never automatically format embedded code.

 | Default  | CLI Override                                                 | API Override                                                |
-| -------- | ----------------------------------------------------------- | ---------------------------------------------------------- |
-| `"auto"` | <code>--embedded-language-formatting=<off&#124;auto></code> | <code>embeddedLanguageFormatting: "<off&#124;auto>"</code> |
+| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
+| `"auto"` | <code>--embedded-language-formatting=\<off&#124;auto></code> | <code>embeddedLanguageFormatting: "\<off&#124;auto>"</code> |

 ## Single Attribute Per Line

@@ -15,7 +15,11 @@ You can load plugins with:
  prettier --write main.foo --plugin=prettier-plugin-foo
  ```

-  > Tip: You can set `--plugin` options multiple times.
+  :::tip
+
+  You can set `--plugin` options multiple times.
+
+  :::

 - The [API](api.md), via the `plugins` options:

@@ -3,6 +3,9 @@ id: precommit
 title: Pre-commit Hook
 ---

+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
 You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via `git add` before you commit.

 ## Option 1. [lint-staged](https://github.com/okonet/lint-staged)
@@ -53,8 +56,8 @@ Git-format-staged is used to run any formatter that can accept file content via

 Git-format-staged requires Python v3 or v2.7. Python is usually pre-installed on Linux and macOS, but not on Windows. Use git-format-staged with [husky](https://github.com/typicode/husky):

-<!--DOCUSAURUS_CODE_TABS-->
-<!--npm-->
+<Tabs groupId="package-manager">
+<TabItem value="npm">

 ```bash
 npx husky init
@@ -62,7 +65,8 @@ npm install --save-dev git-format-staged
 node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
 ```

-<!--yarn-->
+</TabItem>
+<TabItem value="yarn">

 ```bash
 yarn husky init
@@ -70,7 +74,8 @@ yarn add --dev git-format-staged
 node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
 ```

-<!--pnpm-->
+</TabItem>
+<TabItem value="pnpm">

 ```bash
 pnpm exec husky init
@@ -78,7 +83,8 @@ pnpm add --save-dev git-format-staged
 node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
 ```

-<!--bun-->
+</TabItem>
+<TabItem value="bun">

 ```bash
 bunx husky init
@@ -86,7 +92,8 @@ bun add --dev git-format-staged
 bun --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
 ```

-<!--END_DOCUSAURUS_CODE_TABS-->
+</TabItem>
+</Tabs>

 Add or remove file extensions to suit your project. Note that regardless of which extensions you list formatting will respect any `.prettierignore` files in your project.

@@ -13,9 +13,9 @@ The first requirement of Prettier is to output valid code that has the exact sam

 ### Strings

-Double or single quotes? Prettier chooses the one which results in the fewest number of escapes. `"It's gettin' better!"`, not `'It\'s gettin\' better!'`. In case of a tie or the string not containing any quotes, Prettier defaults to double quotes (but that can be changed via the [singleQuote](options.html#quotes) option).
+Double or single quotes? Prettier chooses the one which results in the fewest number of escapes. `"It's gettin' better!"`, not `'It\'s gettin\' better!'`. In case of a tie or the string not containing any quotes, Prettier defaults to double quotes (but that can be changed via the [singleQuote](/docs/options#quotes) option).

-JSX has its own option for quotes: [jsxSingleQuote](options.html#jsx-quotes).
+JSX has its own option for quotes: [jsxSingleQuote](/docs/options#jsx-quotes).
 JSX takes its roots from HTML, where the dominant use of quotes for attributes is double quotes. Browser developer tools also follow this convention by always displaying HTML with double quotes, even if the source code uses single quotes. A separate option allows using single quotes for JS and double quotes for "HTML" (JSX).

 Prettier maintains the way your string is escaped. For example, `"🙂"` won’t be formatted into `"\uD83D\uDE42"` and vice versa.
@@ -79,11 +79,13 @@ const user = {
 [stylesheets]: https://github.com/prettier/prettier/issues/74#issuecomment-275262094
 [keyed methods]: https://github.com/prettier/prettier/pull/495#issuecomment-275745434

-> #### ♻️ A note on formatting reversibility
->
-> The semi-manual formatting for object literals is in fact a workaround, not a feature. It was implemented only because at the time a good heuristic wasn’t found and an urgent fix was needed. However, as a general strategy, Prettier avoids _non-reversible_ formatting like that, so the team is still looking for heuristics that would allow either to remove this behavior completely or at least to reduce the number of situations where it’s applied.
->
-> What does **reversible** mean? Once an object literal becomes multiline, Prettier won’t collapse it back. If in Prettier-formatted code, we add a property to an object literal, run Prettier, then change our mind, remove the added property, and then run Prettier again, we might end up with a formatting not identical to the initial one. This useless change might even get included in a commit, which is exactly the kind of situation Prettier was created to prevent.
+:::note[A note on formatting reversibility]
+
+The semi-manual formatting for object literals is in fact a workaround, not a feature. It was implemented only because at the time a good heuristic wasn’t found and an urgent fix was needed. However, as a general strategy, Prettier avoids _non-reversible_ formatting like that, so the team is still looking for heuristics that would allow either to remove this behavior completely or at least to reduce the number of situations where it’s applied.
+
+What does **reversible** mean? Once an object literal becomes multiline, Prettier won’t collapse it back. If in Prettier-formatted code, we add a property to an object literal, run Prettier, then change our mind, remove the added property, and then run Prettier again, we might end up with a formatting not identical to the initial one. This useless change might even get included in a commit, which is exactly the kind of situation Prettier was created to prevent.
+
+:::

 ### Decorators

@@ -228,7 +230,7 @@ console.log("Running a background task")(async () => {

 The [printWidth](options.md#print-width) option is more of a guideline to Prettier than a hard rule. It is not the upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified print width.

-There are some edge cases, such as really long string literals, regexps, comments and variable names, which cannot be broken across lines (without using code transforms which [Prettier doesn’t do](#what-prettier-is-_not_-concerned-about)). Or if you nest your code 50 levels deep your lines are of course going to be mostly indentation :)
+There are some edge cases, such as really long string literals, regexps, comments and variable names, which cannot be broken across lines (without using code transforms which [Prettier doesn’t do](#what-prettier-is-not-concerned-about)). Or if you nest your code 50 levels deep your lines are of course going to be mostly indentation :)

 Apart from that, there are a few cases where Prettier intentionally exceeds the print width.

@@ -3,6 +3,9 @@ id: sharing-configurations
 title: Sharing configurations
 ---

+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
 In case you have many different projects, it can be helpful to have a **shared configuration** which can be used in all of them, instead of copy-pasting the same config for every project.

 This page explains how to create, publish and consume a shareable config.
@@ -71,32 +74,36 @@ npm publish

 You first need to install your published configuration, for example:

-<!--DOCUSAURUS_CODE_TABS-->
-<!--npm-->
+<Tabs groupId="package-manager">
+<TabItem value="npm">

 ```bash
 npm install --save-dev @username/prettier-config
 ```

-<!--yarn-->
+</TabItem>
+<TabItem value="yarn">

 ```bash
 yarn add --dev @username/prettier-config
 ```

-<!--pnpm-->
+</TabItem>
+<TabItem value="pnpm">

 ```bash
 pnpm add --save-dev @username/prettier-config
 ```

-<!--bun-->
+</TabItem>
+<TabItem value="bun">

 ```bash
 bun add --dev @username/prettier-config
 ```

-<!--END_DOCUSAURUS_CODE_TABS-->
+</TabItem>
+</Tabs>

 Then, you can reference it in your `package.json`:

@@ -13,7 +13,7 @@ Once it’s done, you can do a few things in your IDE. You can use the **Reforma

 You can also configure WebStorm to run Prettier on save (_Cmd+S/Ctrl+S_) or use it as the default formatter (_Opt+Cmd+L/Ctrl+Alt+L_). For this, open _Preferences / Settings | Languages & Frameworks | JavaScript | Prettier_ and tick the corresponding checkbox: **On save** and/or **On ‘Reformat Code’** action.

-![Example](/docs/assets/webstorm/prettier-settings.png)
+![Example](/images/webstorm/prettier-settings.png)

 By default, WebStorm will apply formatting to all _.js, .ts, .jsx_, and _.tsx_ files that you’ve edited in your project. To apply the formatting to other file types, or to limit formatting to files located only in specific directories, you can customize the default configuration by using [glob patterns](https://github.com/isaacs/node-glob).

@@ -33,6 +33,7 @@ dist*/
 website/build/
 website/static/playground.js
 website/static/lib/
+website/.docusaurus
 scripts/benchmark/*/
 **/.yarn/**
 **/.pnp.*
@@ -467,6 +468,12 @@ export default [
      "unicorn/filename-case": "off",
    },
  },
+  {
+    files: ["website/docusaurus.config.js"],
+    languageOptions: {
+      sourceType: "module",
+    },
+  },
  {
    files: ["website/playground/**/*"],
    languageOptions: {
@@ -1,5 +1,6 @@
 [build]
  command = "yarn build:website"
+  publish = "website/build/"

 [build.environment]
  NODE_VERSION = "lts/*"
@@ -176,7 +176,6 @@
    "lint:prettier": "prettier . --check --cache",
    "lint:spellcheck": "cspell --no-progress --relative --dot --gitignore",
    "lint:deps": "node ./scripts/check-deps.js",
-    "lint:blog": "node ./scripts/lint-blog.js",
    "lint:knip": "knip",
    "fix": "run-s fix:eslint fix:prettier",
    "fix:eslint": "yarn lint:eslint --fix",
@@ -1,17 +0,0 @@
-#!/usr/bin/env node
-
-import fs from "node:fs";
-
-const blogPostDir = new URL("../website/blog/", import.meta.url);
-
-const files = fs.readdirSync(blogPostDir);
-
-for (const file of files) {
-  if (file.endsWith(".md")) {
-    const fileData = fs.readFileSync(new URL(file, blogPostDir), "utf8");
-    if (!fileData.includes("<!-- truncate -->")) {
-      console.error(`${file}: Should include a <!-- truncate --> comment`);
-      process.exitCode = 1;
-    }
-  }
-}
@@ -28,9 +28,9 @@ https://prettier.io/

 The site is built on [Docusaurus](https://docusaurus.io/), a static site generator for documentation sites.

-Its main configuration file is `siteConfig.js` ([docs](https://docusaurus.io/docs/en/site-config)).
+Its main configuration file is `docusaurus.config.js` ([docs](https://docusaurus.io/docs/configuration)).

-Pages can be added to the site by putting `.js` files with React components in `pages/`. If you want to use code from other files in these pages, be aware of [how `require` works in Docusaurus](https://docusaurus.io/docs/en/api-pages#page-require-paths). It’s also possible to include `.html` files directly. They are served as is and don’t have any of the header, footer, or styles shared by the rest of Docusaurus. This is the way the Playground is hooked up (`pages/playground/index.html`).
+Pages can be added to the site by putting `.jsx` files with React components in `src/pages/`. It’s also possible to include `.md` files directly. ([docs](https://docusaurus.io/docs/creating-pages))

 Images and other static assets are placed inside the `static` directory: `static/img/your-image.png` is mapped to `http://prettier.io/img/your-image.png`. Any `.css` files in `static/` are concatenated to the standard styles provided by Docusaurus and used site-wide.

@@ -38,6 +38,8 @@ Images and other static assets are placed inside the `static` directory: `static

 The Playground is not integrated with the Docusaurus infrastructure. Its UI (`website/playground/`) is built separately with webpack configured to put the resulting bundle in Docusaurus’s `static` directory. The `yarn start` command (in `website/`) concurrently starts both Docusaurus’s local server and webpack in the watch mode for the Playground.

+The entry point of the playground is at `static/playground/index.html`.
+
 Another part of the Playground is a web worker where formatting happens. It’s not managed by webpack and resides directly in `static/worker.js`. It expects to find the [UMD bundles of Prettier](https://prettier.io/docs/en/browser.html) in `static/lib/`. That’s why running `yarn build:website` or `PULL_REQUEST=true yarn build:website` in the project root is a required step.

 Finally, there is a service worker that caches Prettier’s relatively heavy bundles (`static/service-worker.js`).
@@ -59,7 +61,7 @@ next: doc2 # next doc on the sidebar for navigation
 ---
 ```

-The docs from `docs/` are published to `https://prettier.io/docs/en/next/` and are considered to be the docs of the next (not yet released) version of Prettier. When a release happens, the docs from `docs/` are copied to the `website/versioned_docs/version-stable` directory, whose content is published to `https://prettier.io/docs/en`.
+The docs from `docs/` are published to `https://prettier.io/docs/next/` and are considered to be the docs of the next (not yet released) version of Prettier. When a release happens, the docs from `docs/` are copied to the `website/versioned_docs/version-stable` directory, whose content is published to `https://prettier.io/docs/`.

 ## Blog

@@ -67,8 +69,7 @@ The `website/blog` directory contains blog posts written in Markdown. Their fron

 ```yaml
 title: Blog Post Title
-author: Author Name
-authorURL: http://github.com/author # (or some other link)
+authors: author declared in `blog/authors.yml`
 ---
 ```

@@ -1,6 +1,5 @@
 ---
-author: Christopher Chedeau (@vjeux)
-authorURL: https://twitter.com/vjeux
+authors: "vjeux"
 title: Releasing Prettier 1.0
 ---

@@ -1,6 +1,5 @@
 ---
-author: Christopher Chedeau (@vjeux)
-authorURL: https://twitter.com/vjeux
+authors: "vjeux"
 title: Prettier 1.2
 ---

@@ -1,6 +1,5 @@
 ---
-author: Christopher Chedeau (@vjeux)
-authorURL: https://twitter.com/vjeux
+authors: "vjeux"
 title: Prettier 1.3
 ---

@@ -1,6 +1,5 @@
 ---
-author: Christopher Chedeau (@vjeux)
-authorURL: https://twitter.com/vjeux
+authors: "vjeux"
 title: "Prettier 1.4: TypeScript and CSS support"
 ---

@@ -8,7 +7,7 @@ This release introduces support for TypeScript, CSS, Less, and SCSS languages to

 <!-- truncate -->

-[![prettier-revolution-conf](/blog/assets/prettier-revolution-conf.png)](https://revolutionconf.com/talk/a-prettier-printer)
+[![prettier-revolution-conf](./assets/prettier-revolution-conf.png)](https://revolutionconf.com/talk/a-prettier-printer)

 ## TypeScript Support

@@ -1,6 +1,5 @@
 ---
-author: Christopher Chedeau (@vjeux)
-authorURL: https://twitter.com/vjeux
+authors: "vjeux"
 title: "Prettier 1.5: GraphQL, CSS-in-JS & JSON"
 ---

@@ -1,6 +1,5 @@
 ---
-author: Christopher Chedeau (@vjeux)
-authorURL: https://twitter.com/vjeux
+authors: "vjeux"
 title: "Prettier 1.6: Config File, JSX"
 ---

@@ -496,7 +495,7 @@ global {
 }
 ```

-#### Fix <this.Component /> ([#2472](https://github.com/prettier/prettier/pull/2472)) by [@backus](https://github.com/backus)
+#### Fix \<this.Component /> ([#2472](https://github.com/prettier/prettier/pull/2472)) by [@backus](https://github.com/backus)

 Thanks to the untyped and permissive nature of JavaScript, we've been able to concat undefined to a string and get some interesting code as a result. Now fixed for this case :)

@@ -1,6 +1,5 @@
 ---
-author: @suchipi
-authorURL: https://twitter.com/suchipi
+authors: "suchipi"
 title: "Prettier 1.7: JSX tweaks, Pragma, TypeScript and CSS fixes"
 ---

@@ -55,7 +54,7 @@ We should print a ternary using JSX mode if:
 ```

 However, this heuristic caused some [unexpected formatting](https://github.com/prettier/prettier/issues/2729):
-![GitHub Diff showing a ternary containing internationalization strings appearing inside a JSX element being converted to use JSX-mode style ternaries](/blog/assets/github-diff-ternary-in-jsx.png)
+![GitHub Diff showing a ternary containing internationalization strings appearing inside a JSX element being converted to use JSX-mode style ternaries](./assets/github-diff-ternary-in-jsx.png)

 So, in 1.7.0, we have revised our heuristic to just be:

@@ -1,6 +1,5 @@
 ---
-author: Lucas Azzola (@azz)
-authorURL: https://twitter.com/lucasazzola
+authors: "azz"
 title: "Prettier 1.8: Markdown Support"
 ---

@@ -108,7 +107,7 @@ reallyUgly(javascript);

 When rearranging list items, after running Prettier all the numbers will be fixed!

-![Markdown Lists](/blog/assets/markdown-lists.gif)
+![Markdown Lists](./assets/markdown-lists.gif)

 > Note: you can actually opt out of this by using `1.` for all list items if you want to optimize for cleaner diffs.

@@ -116,7 +115,7 @@ When rearranging list items, after running Prettier all the numbers will be fixe

 Tables will also automatically be adjusted to fit their contents. This could be completely unmaintainable without an automated tool.

-![Markdown Tables](/blog/assets/markdown-tables.gif)
+![Markdown Tables](./assets/markdown-tables.gif)

 **Markdown-in-JS**

@@ -1,6 +1,5 @@
 ---
-author: Lucas Duailibe (@duailibe)
-authorURL: https://twitter.com/duailibe
+authors: "duailibe"
 title: "Prettier 1.9: JSX Fragments, EditorConfig and Arrow Parens"
 ---

@@ -1,6 +1,5 @@
 ---
-author: Christopher Chedeau (@vjeux)
-authorURL: https://twitter.com/vjeux
+authors: "vjeux"
 title: "Prettier 1.10: One Year of Prettier 🎂"
 ---

@@ -425,7 +424,7 @@ Similarly, "JSON with comments" will also be detected.

 ---

-<h1 style="padding: 0; margin-bottom: -2rem">🎂</h1>
+<h1 style={{padding: 0, marginBottom: "-2rem"}}>🎂</h1>

 [@azz]: https://github.com/azz
 [@ardevelop]: https://github.com/ardevelop
@@ -1,6 +1,5 @@
 ---
-author: Suchipi (@suchipi)
-authorURL: https://github.com/suchipi
+authors: "suchipi"
 title: "Prettier 1.11: CSS fixes and new TypeScript feature support"
 ---

@@ -335,7 +334,7 @@ Prettier was mistakenly adding a comma after `@import` urls. This is no longer a
 Prettier was printing the `!default` directive in an odd way:

 <!-- prettier-ignore -->
-```css
+```scss
 $theme-checkbox-colors: (
    default: $theme-color-border,
    checked: $theme-color-checked,
@@ -348,7 +347,7 @@ $theme-checkbox-colors: (
 It's now handled properly:

 <!-- prettier-ignore -->
-```css
+```scss
 $theme-checkbox-colors: (
  default: $theme-color-border,
  checked: $theme-color-checked,
@@ -923,7 +922,7 @@ Links whose URL contained HTML entities were mistakenly being changed when run t
 Indentation of JS tagged template string content within markdown code blocks was being calculated incorrectly:

 <!-- prettier-ignore -->
-```md
+``````md
 <!-- Unformatted code: -->
 - 1
  - 2
@@ -954,12 +953,12 @@ asd
 asd
 `;
      ```
-```
+``````

 It has been fixed in Prettier 1.11.0:

 <!-- prettier-ignore -->
-```md
+``````md
 <!-- Formatted code (Prettier 1.11.0): -->
 * 1

@@ -976,7 +975,7 @@ It has been fixed in Prettier 1.11.0:
      asd
      `;
      ```
-```
+``````

 #### Print multiline content correctly in footnoteDefinition ([#3787] by [@ikatyang])

@@ -1007,6 +1006,7 @@ fn main() {
 ```

 <!-- Formatted code (Prettier 1.11.0): -->
+
 Some text.[^fn]

 [^fn]: Here is a footnote which includes code.
@@ -1016,6 +1016,7 @@ Some text.[^fn]
    println!("this is some Rust!");
 }
 ```
+
 ``````

 #### Respect `tabWidth` for list items ([#3990] by [@ikatyang])
@@ -1037,7 +1038,7 @@ We've discovered that CommonMark diverges from the original Markdown syntax for

 This change should also improve indentation in text editors:

-![](/blog/assets/markdown-list-indent.gif)
+![](./assets/markdown-list-indent.gif)

 ### API

@@ -1,7 +1,6 @@
 ---
-author: Christian Zosel (@chrzosel)
-authorURL: https://twitter.com/chrzosel
-title: Prettier for PHP 0.1: First alpha release 🎉
+authors: "czosel"
+title: "Prettier for PHP 0.1: First alpha release 🎉"
 ---

 After more than 200 merged pull requests since mid December 2017, we're happy to announce the first alpha release of [Prettier for PHP](https://github.com/prettier/plugin-php). In this blog post, we'd like to give a short overview of how the plugin works, its philosophy, and what to expect in the future.
@@ -1,6 +1,5 @@
 ---
-author: Suchipi (@suchipi)
-authorURL: https://twitter.com/suchipi
+authors: "suchipi"
 title: "Prettier 1.12: Fixes, Features, and Formatting, Oh My!"
 ---

@@ -1,6 +1,5 @@
 ---
-author: Lucas Duailibe (@duailibe)
-authorURL: https://twitter.com/duailibe
+authors: "duailibe"
 title: "Prettier 1.13: Conquering the web!"
 ---

@@ -608,7 +607,7 @@ When passing `--plugin=path/to/plugin` Prettier 1.12 and earlier would crash bec

 #### Adding plugin interface for isBlockComment ([#4347] by [@mgrip])

-A block comment is a comment that can be printed inline (for JS, it's `/* comment */`) with code. Since Prettier is responsible for printing comments we needed to let plugins determine if a comment is a block comment. Read more in our [docs](plugins.md).
+A block comment is a comment that can be printed inline (for JS, it's `/* comment */`) with code. Since Prettier is responsible for printing comments we needed to let plugins determine if a comment is a block comment. Read more in our [docs](/docs/plugins).

 ### JavaScript

@@ -1,6 +1,5 @@
 ---
-author: Ika (@ikatyang)
-authorURL: https://github.com/ikatyang
+authors: "ikatyang"
 title: "Prettier 1.14: YAML Support"
 ---

@@ -1,6 +1,5 @@
 ---
-author: Ika (@ikatyang)
-authorURL: https://github.com/ikatyang
+authors: "ikatyang"
 title: "Prettier 1.15: HTML, Vue, Angular and MDX Support"
 ---

@@ -491,18 +490,18 @@ we'll look at the first line of the file,
 and if there's a shebang,
 we'll use it to infer which parser to use.

-<code style="display: block; background: #282a36; color: #f1f1f0">
-<span style="color: #686868"># Input</span><br />
-$ <span style="color: #5af78e">cat</span> <u>bin/example</u><br />
+<code style={{display: "block", background: "#282a36", color: "#f1f1f0"}}>
+<span style={{color: "#686868"}}># Input</span><br />
+$ <span style={{color: "#5af78e"}}>cat</span> <u>bin/example</u><br />
 \#!/usr/bin/env node<br />
 &nbsp;&nbsp;require ( "../src/cli" ) . run ( )<br />
-<br />
-$ <span style="color: #5af78e">prettier</span> <u>bin/example</u><br />
-<br />
-<span style="color: #686868"># Output (Prettier 1.14)</span><br />
-[<span style="color: #ff5c57">error</span>] No parser could be inferred for file: bin/example<br />
-<br />
-<span style="color: #686868"># Output (Prettier 1.15)</span><br />
+
+$ <span style={{color: "#5af78e"}}>prettier</span> <u>bin/example</u><br />
+
+<span style={{color: "#686868"}}># Output (Prettier 1.14)</span><br />
+[<span style={{color: "#ff5c57"}}>error</span>] No parser could be inferred for file: bin/example<br />
+
+<span style={{color: "#686868"}}># Output (Prettier 1.15)</span><br />
 #!/usr/bin/env node<br />
 require("../src/cli").run();
 </code>
@@ -521,15 +520,15 @@ Previously, there was no color for the option validation error message,
 so it wasn’t easy to see what option had an invalid value passed to it, and what the valid values were.
 In Prettier 1.15, you should be able to understand what's going on at a glance.

-<code style="display: block; background: #282a36; color: #f1f1f0">
-<span style="color: #686868"># Input</span><br />
-$ <span style="color: #5af78e">prettier</span> <u>filename.js</u> --trailing-comma wow<br />
-<br />
-<span style="color: #686868"># Output (Prettier 1.14)</span><br />
-[<span style="color: #ff5c57">error</span>] Invalid \`\`--trailing-comma\`\` value. Expected "all", "es5" or "none", but received \`"wow"\`.
-<br /><br />
-<span style="color: #686868"># Output (Prettier 1.15)</span><br />
-[<span style="color: #ff5c57">error</span>] Invalid <span style="color: #ff5c57">--trailing-comma</span> value. Expected <span style="color: #57c7ff">"all", "es5" or "none"</span>, but received <span style="color: #ff5c57">"wow"</span>.
+<code style={{display: "block", background: "#282a36", color: "#f1f1f0"}}>
+<span style={{color: "#686868"}}># Input</span><br />
+$ <span style={{color: "#5af78e"}}>prettier</span> <u>filename.js</u> --trailing-comma wow<br />
+
+<span style={{color: "#686868"}}># Output (Prettier 1.14)</span><br />
+[<span style={{color: "#ff5c57"}}>error</span>] Invalid \`\`--trailing-comma\`\` value. Expected "all", "es5" or "none", but received \`"wow"\`.
+
+<span style={{color: "#686868"}}># Output (Prettier 1.15)</span><br />
+[<span style={{color: "#ff5c57"}}>error</span>] Invalid <span style={{color: "#ff5c57"}}>--trailing-comma</span> value. Expected <span style={{color: "#57c7ff"}}>"all", "es5" or "none"</span>, but received <span style={{color: "#ff5c57"}}>"wow"</span>.
 </code>

 #### Allow printer to preprocess the AST ([#5041] by [@ikatyang])
@@ -550,15 +549,15 @@ interface Printer {
 Previously, loading a config file of an unsupported format would throw an error message
 that looks like a bug in Prettier, so we improved the message in Prettier 1.15.

-<code style="display: block; background: #282a36; color: #f1f1f0">
-<span style="color: #686868"># Input</span><br />
-$ <span style="color: #5af78e">prettier</span> <u>filename.js</u> --config <u>.prettierrc.wow</u><br />
-<br />
-<span style="color: #686868"># Output (Prettier 1.14)</span><br />
-[<span style="color: #ff5c57">error</span>] Invalid configuration file: Cannot read property 'sync' of undefined
-<br /><br />
-<span style="color: #686868"># Output (Prettier 1.15)</span><br />
-[<span style="color: #ff5c57">error</span>] Invalid configuration file: No sync loader specified for extension ".wow"
+<code style={{display: "block", background: "#282a36", color: "#f1f1f0"}}>
+<span style={{color: "#686868"}}># Input</span><br />
+$ <span style={{color: "#5af78e"}}>prettier</span> <u>filename.js</u> --config <u>.prettierrc.wow</u><br />
+
+<span style={{color: "#686868"}}># Output (Prettier 1.14)</span><br />
+[<span style={{color: "#ff5c57"}}>error</span>] Invalid configuration file: Cannot read property 'sync' of undefined
+
+<span style={{color: "#686868"}}># Output (Prettier 1.15)</span><br />
+[<span style={{color: "#ff5c57"}}>error</span>] Invalid configuration file: No sync loader specified for extension ".wow"
 </code>

 #### Add an option to enforce line endings ([#5327] by [@kachkaev])
@@ -1,6 +1,5 @@
 ---
-author: Ika (@ikatyang)
-authorURL: https://github.com/ikatyang
+authors: "ikatyang"
 title: "Prettier 1.16: HTML improvements and better CRLF handling"
 ---

@@ -136,13 +135,13 @@ in the output except for the files which aren’t properly formatted. This isn
 very friendly for new contributors and users in general, so we added a `--check`
 option that produces more human-friendly output.

-<code style="display: block; background: #282a36; color: #f1f1f0">
-<span style="color: #686868"># Prettier 1.15</span><br />
-$ <span style="color: #5af78e">prettier</span> <span style="color: #57c7ff">\*.js</span> --list-different<br />
+<code style={{display: "block", background: "#282a36", color: "#f1f1f0"}}>
+<span style={{color: "#686868"}}># Prettier 1.15</span><br />
+$ <span style={{color: "#5af78e"}}>prettier</span> <span style={{color: "#57c7ff"}}>\*.js</span> --list-different<br />
 unformatted.js<br />
-<br />
-<span style="color: #686868"># Prettier 1.16</span><br />
-$ <span style="color: #5af78e">prettier</span> <span style="color: #57c7ff">\*.js</span> --check<br />
+
+<span style={{color: "#686868"}}># Prettier 1.16</span><br />
+$ <span style={{color: "#5af78e"}}>prettier</span> <span style={{color: "#57c7ff"}}>\*.js</span> --check<br />
 Checking formatting...<br />
 unformatted.js<br />
 Code style issues found in the above file(s). Forgot to run Prettier?<br />
@@ -1,6 +1,5 @@
 ---
-author: Lucas Duailibe (@duailibe)
-authorURL: https://github.com/duailibe
+authors: "duailibe"
 title: "Prettier 1.17: More quotes options and support for shared configs"
 ---

@@ -75,14 +74,18 @@ If you don't want to use `package.json`, you can use any of the supported extens

 [@azz] has created an example configuration package. You can [see the source on GitHub](https://github.com/azz/prettier-config) or [install it via npm](https://www.npmjs.com/package/@azz/prettier-config).

-> Note: This method does **not** offer a way to _extend_ the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a `.prettierrc.js` file and export the modifications, e.g:
->
-> ```js
-> module.exports = {
->   ...require("@company/prettier-config"),
->   semi: false,
-> };
-> ```
+:::note
+
+This method does **not** offer a way to _extend_ the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a `.prettierrc.js` file and export the modifications, e.g:
+
+```js
+module.exports = {
+  ...require("@company/prettier-config"),
+  semi: false,
+};
+```
+
+:::

 ## General

@@ -1,6 +1,5 @@
 ---
-author: Lucas Duailibe (@duailibe)
-authorURL: https://github.com/duailibe
+authors: "duailibe"
 title: "Prettier 1.18: Lots of fixes and OpenCollective"
 ---

@@ -1,6 +1,5 @@
 ---
-author: Simon Lydell (@lydell)
-authorURL: https://github.com/lydell
+authors: "lydell"
 title: "Prettier 1.19: Long awaited Vue option, TypeScript 3.7 and new JavaScript features"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Georgii Dolzhykov (@thorn0)"
-authorURL: "https://github.com/thorn0"
+authors: "thorn0"
 title: "Prettier 2.0 “2020”"
 ---

@@ -18,7 +17,7 @@ After a long and careful consideration, we decided to change the default values

 Previously, any method call chain of length three or longer would be automatically broken into multiple lines. The new heuristic is based on the complexity of the call arguments in the chain, rather than simply on the chain's length. Now, if chained method calls have arguments which aren't easy to understand at a glance (e.g. functions or deeply-nested objects), the chain is broken. Otherwise, they're allowed to remain on one line. See prior issues [#3197](https://github.com/prettier/prettier/issues/3107), [#4765](https://github.com/prettier/prettier/pull/4765), [#1565](https://github.com/prettier/prettier/issues/1565) and [#4125](https://github.com/prettier/prettier/pull/4125) for context and examples.

-To get best results, make sure your value for the [`printWidth` option](/docs/en/options.html#print-width) isn't too high.
+To get best results, make sure your value for the [`printWidth` option](/docs/options#print-width) isn't too high.

 <!-- prettier-ignore -->
 ```javascript
@@ -101,7 +100,7 @@ In Prettier 2.0, the CLI also prints such errors for individual patterns.

 #### Fix config overrides pattern matching to include dot files ([#5813](https://github.com/prettier/prettier/pull/5813) by [@chrisblossom](https://github.com/chrisblossom))

-Previously, [configuration overrides](/docs/en/configuration.html#configuration-overrides) weren't applied to files whose name had a leading dot.
+Previously, [configuration overrides](/docs/configuration#configuration-overrides) weren't applied to files whose name had a leading dot.

 #### Drop support for Node versions older than 10 ([#6908](https://github.com/prettier/prettier/pull/6908) by [@fisker](https://github.com/fisker))

@@ -120,13 +119,13 @@ There is a possibility that the default value will change to `all` (meaning even

 #### Plugin API: changes in `prettier.util` ([#6993](https://github.com/prettier/prettier/pull/6993) by [@fisker](https://github.com/fisker))

- `prettier.util.mapDoc` has been removed.<br>
+- `prettier.util.mapDoc` has been removed.<br />
  Use `prettier.doc.utils.mapDoc` instead.
- `prettier.util.isNextLineEmpty` has been updated.<br>
+- `prettier.util.isNextLineEmpty` has been updated.<br />
  Use `isNextLineEmpty(text, node, locEnd)` instead of `isNextLineEmpty(text, node, options)`.
- `prettier.util.isPreviousLineEmpty` has been updated.<br>
+- `prettier.util.isPreviousLineEmpty` has been updated.<br />
  Use `isPreviousLineEmpty(text, node, locStart)` instead of `isPreviousLineEmpty(text, node, options)`.
- `prettier.util.getNextNonSpaceNonCommentCharacterIndex` has been updated.<br>
+- `prettier.util.getNextNonSpaceNonCommentCharacterIndex` has been updated.<br />
  Use `getNextNonSpaceNonCommentCharacterIndex(text, node, locEnd)` instead of `getNextNonSpaceNonCommentCharacterIndex(text, node, options)`.

 #### Change default value for `arrowParens` to `always` ([#7430](https://github.com/prettier/prettier/pull/7430) by [@kachkaev](https://github.com/kachkaev))
@@ -1063,7 +1062,7 @@ Error: Mixed descriptor in srcset is not supported
 <!-- prettier-ignore -->
 ```html
 <!-- Input -->
-<pre><br></pre>
+<pre><br /></pre>
 <pre><hr></pre>

 <!-- Prettier 1.19 -->
@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 2.1: new --embedded-language-formatting option and new JavaScript/TypeScript features!"
 ---

@@ -12,7 +11,7 @@ This release adds a new `--embedded-language-formatting` option, supports new Ja

 ### API

-#### Add --embedded-language-formatting={auto,off} option ([#7875](https://github.com/prettier/prettier/pull/7875) by [@bakkot](https://github.com/bakkot), [#8825](https://github.com/prettier/prettier/pull/8825) by [@fisker](https://github.com/fisker))
+#### Add --embedded-language-formatting=\{auto,off\} option ([#7875](https://github.com/prettier/prettier/pull/7875) by [@bakkot](https://github.com/bakkot), [#8825](https://github.com/prettier/prettier/pull/8825) by [@fisker](https://github.com/fisker))

 When Prettier identifies cases where it looks like you've placed some code it knows how to format within a string in another file, like in a tagged template in JavaScript with a tag named `html` or in code blocks in Markdown, it will try to format that code by default.

@@ -502,7 +501,7 @@ SyntaxError: Unexpected token (1:1)
 };
 ```

-#### Wrap jsx element on the left of "<" with parentheses ([#8461](https://github.com/prettier/prettier/pull/8461) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+#### Wrap jsx element on the left of "\<" with parentheses ([#8461](https://github.com/prettier/prettier/pull/8461) by [@sosukesuzuki](https://github.com/sosukesuzuki))

 <!-- prettier-ignore -->
 ```jsx
@@ -982,7 +981,7 @@ modify URLs.
 }
 ```

-#### Add support for @supports selector(<custom-selector>) ([#8545](https://github.com/prettier/prettier/pull/8545) by [@boyenn](https://github.com/boyenn))
+#### Add support for @supports selector(\<custom-selector>) ([#8545](https://github.com/prettier/prettier/pull/8545) by [@boyenn](https://github.com/boyenn))

 <!-- prettier-ignore -->
 ```css
@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 2.2: new JavaScript parsers, TS 4.1 and ESM standalone bundles"
 ---

@@ -1,6 +1,5 @@
 ---
-author: Kevin Newton (@kddnewton)
-authorURL: https://twitter.com/kddnewton
+authors: kddnewton
 title: Prettier for Ruby goes v1.0 🎉
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Georgii Dolzhykov (@thorn0)"
-authorURL: "https://github.com/thorn0"
+authors: "thorn0"
 title: "Prettier 2.3. In which assignments are consistent, short keys non-breaking, and Handlebars official"
 ---

@@ -98,7 +97,7 @@ The [`--html-whitespace-sensitivity`][hws-option] option is supported and defaul

 The feature is called “Ember / Handlebars” and not just “Handlebars” because Glimmer doesn’t support some syntax and use cases of Handlebars. This is mostly due to the fact that [Handlebars], being a template engine (a preprocessor), doesn’t care about the underlying syntax of the content it processes whereas Glimmer parses two syntaxes – HTML and Handlebars – at the same time and combines the result into a single tree, which Prettier can print. This means Prettier won’t format Handlebars files that can’t be parsed into such a tree, either because the underlying syntax isn’t HTML or because template directives and tags overlap in a way that can’t be represented in a tree (e.g., `{{#if foo}}<div>{{/if}`). Even with these restrictions, the formatter still seems to be useful enough to non-Ember Handlebars users. As for the syntax unsupported by Ember, there is a good chance to see support for it in future versions of Prettier as Glimmer uses a full-fledged Handlebars parser under the hood.

-Files with the extensions `.hbs` and `.handlebars` are recognized as Handlebars by default. For other extensions, the [`--parser`](parser-option) option with the value `glimmer` has to be specified – for example, using command line or, better yet, [configuration overrides].
+Files with the extensions `.hbs` and `.handlebars` are recognized as Handlebars by default. For other extensions, the [`--parser`](/docs/configuration#setting-the-parser-option) option with the value `glimmer` has to be specified – for example, using command line or, better yet, [configuration overrides].

 See the formatter in action on the [playground][playground-glimmer]!

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support!"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax!"
 ---

@@ -16,7 +15,7 @@ If you enjoy Prettier and would like to support our work, consider sponsoring us

 #### Avoid extra offset in arrow function body when using long types ([#11515](https://github.com/prettier/prettier/pull/11515) by [@kachkaev](https://github.com/kachkaev) and [@thorn0](https://github.com/thorn0))

-Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body indentation. Changing the length of the type annotation could produce large diffs and thus increased the chance of git conflicts. To prevent this, function body offset was stabilized.<br>
+Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body indentation. Changing the length of the type annotation could produce large diffs and thus increased the chance of git conflicts. To prevent this, function body offset was stabilized.<br />
 **Note**: This change may affect a large number of lines in your codebase.

 <!-- prettier-ignore -->
@@ -1,14 +1,15 @@
 ---
-author: "Christopher Chedeau (@vjeux)"
-authorURL: "https://github.com/vjeux"
+authors: "vjeux"
 title: "Prettier begins paying maintainers"
 ---

 Prettier, an opinionated code formatter for JavaScript and many web languages, has been accepting donations at [OpenCollective](https://opencollective.com/prettier) since 2019 and thanks to many generous donations we now have \$50,000 in the bank! As a result, we are now able to pay the two active maintainers \$1,500/month each. This funding will ensure that they will be able to continue consistent maintenance of Prettier into the future.

-<!-- truncate -->
+{/* truncate */}

-<blockquote class="twitter-tweet"><p lang="en" dir="ltr">📣 Prettier is now accepting donations! 🎉 If you &#39;d like to support our work, head to our OpenCollective! 🙏<a href="https://t.co/etDqkYLm4H">https://t.co/etDqkYLm4H</a></p>&mdash; Prettier (@PrettierCode) <a href="https://twitter.com/PrettierCode/status/1132012865416781824?ref_src=twsrc%5Etfw">May 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+import { Tweet } from "react-tweet";
+
+<Tweet id="1132012865416781824" />

 Open Source and Money has always been a tricky topic. We've tried many things with Prettier. Right after the project was open sourced, Facebook contracted [James Long](https://twitter.com/jlongster) for 2 weeks in order to polish it. Facebook also paid Christopher Chedeau ([vjeux](https://twitter.com/Vjeux)) for 9 months to work on it full time. Once there was \$10,000 in contributions, we gave everyone that contributed significantly the opportunity to redeem \$1,000 but due to the complexities in collecting the money, few people did.

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 2.6: new singleAttributePerLine option and new JavaScript features!"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 2.7: new --cache CLI option and TypeScript 4.7 syntax!"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 2.8: improve --cache CLI option and TypeScript 4.9 satisfies operator!"
 ---

@@ -205,7 +204,7 @@ Pseudo-selectors like `:is`, `:where`, and `:not` that can take multiple selecto

 ### SCSS

-#### Fix: extra space between '#' and '{' ([#13286](https://github.com/prettier/prettier/pull/13286) by [@jspereiramoura](https://github.com/jspereiramoura))
+#### Fix: extra space between '#' and '\{' ([#13286](https://github.com/prettier/prettier/pull/13286) by [@jspereiramoura](https://github.com/jspereiramoura))

 <!-- prettier-ignore -->
 ```scss
@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 3.0: Hello, ECMAScript Modules!"
 ---

@@ -359,7 +358,7 @@ File structures changes:
 - `esm/parser-yaml.mjs` -> `plugins/yaml.mjs`
 - `parser-yaml.js` -> `plugins/yaml.js`

-Check full list on <https://unpkg.com/browse/prettier@3.0.0/>.
+Check full list on https://unpkg.com/browse/prettier@3.0.0/.

 A new plugin has been added:

@@ -425,7 +424,7 @@ We believe make `textToDoc` return docs without trailing hard lines makes the pl

 #### Removed support for custom parser api ([#13250](https://github.com/prettier/prettier/pull/13250) by [@fisker](https://github.com/fisker) and [@thorn0](https://github.com/thorn0))

-Before [plugins](/docs/en/plugins.html) were a thing, Prettier had a similar but more limited feature called custom parsers. It’s been removed in v3.0.0 as its functionality was a subset of what the Plugin API did. If you used it, please check [how to migrate](/docs/en/api.html#custom-parser-api).
+Before [plugins](/docs/plugins) were a thing, Prettier had a similar but more limited feature called custom parsers. It’s been removed in v3.0.0 as its functionality was a subset of what the Plugin API did. If you used it, please check [how to migrate](/docs/api#custom-parser-api-removed).

 #### The second argument `parsers` passed to `parsers.parse` has been removed ([#13268](https://github.com/prettier/prettier/pull/13268) by [@fisker](https://github.com/fisker))

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 3.1: New experimental ternaries formatting and Angular control flow syntax!"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Alex Rattray (@rattrayalex)"
-authorURL: "https://github.com/rattrayalex"
+authors: "rattrayalex"
 title: "A curious case of the ternaries"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Christopher Chedeau (@vjeux)"
-authorURL: "https://github.com/vjeux"
+authors: "vjeux"
 title: "$20k Bounty was Claimed!"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Fabio Spampinato (@fabiospampinato)"
-authorURL: "https://github.com/fabiospampinato"
+authors: "fabiospampinato"
 title: "Prettier's CLI: A Performance Deep Dive"
 ---

@@ -38,9 +37,7 @@ The goal is to make it close to ~100% backwards compatible, and then just ship i

 ## Overview

-<p align="center">
-	<img src="/blog/assets/prettier-architecture.png" width="800px" />
-</p>
+![](./assets/prettier-architecture.png)

 Prettier's CLI works roughly like in the diagram above:

@@ -235,9 +232,7 @@ I think the main room for improvement in this area is doing something visually i

 ## Results

-<p align="center">
-	<img src="/blog/assets/prettier-bench.png" width="600px" />
-</p>
+![](./assets/prettier-bench.png)

 Before we wrap up, here are some numbers I see when checking files in Babel's monorepo, with all files formatted, but 9 erroring files, with various flags, and with the current and new CLI:

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 3.2: Support JSONC and Angular’s ICU expression"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 3.3: New Flow features and a lot of bug fixes"
 ---

@@ -1,6 +1,5 @@
 ---
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
+authors: "sosukesuzuki"
 title: "Prettier 3.4: A lot of bug fixes"
 ---

@@ -571,9 +570,9 @@ The CommonMark spec doesn't mention non-ASCII spaces here, so removing them chan
 <!-- prettier-ignore -->
 ```md
 <!-- Input -->
- EM Space (U+2003) EM Space 
+ EM Space (U+2003) EM Space

-　全角スペース (U+3000) 全形空白　
+　全角スペース (U+3000) 全形空白

 <!-- Prettier 3.3 -->
 EM Space (U+2003) EM Space
@@ -581,9 +580,9 @@ EM Space (U+2003) EM Space
 全角スペース (U+3000) 全形空白

 <!-- Prettier 3.4 -->
- EM Space (U+2003) EM Space 
+ EM Space (U+2003) EM Space

-　全角スペース (U+3000) 全形空白　
+　全角スペース (U+3000) 全形空白
 ```

 #### Don't break a line a between Chinese or Japanese and others ([#16691](https://github.com/prettier/prettier/pull/16691) by [@tats-u](https://github.com/tats-u))
@@ -0,0 +1,95 @@
+vjeux:
+  name: Christopher Chedeau
+  url: https://github.com/vjeux
+  image_url: https://github.com/vjeux.png
+  socials:
+    x: vjeux
+    github: vjeux
+
+suchipi:
+  name: Lily Skye
+  url: https://github.com/suchipi
+  image_url: https://github.com/suchipi.png
+  socials:
+    x: suchipi
+    github: suchipi
+
+azz:
+  name: Lucas Azzola
+  url: https://github.com/azz
+  image_url: https://github.com/azz.png
+  socials:
+    x: lucasazzola
+    github: suchipi
+
+duailibe:
+  name: Lucas Duailibe
+  url: https://github.com/duailibe
+  image_url: https://github.com/duailibe.png
+  socials:
+    x: duailibe
+    github: duailibe
+
+czosel:
+  name: Christian Zosel
+  url: https://github.com/czosel
+  image_url: https://github.com/czosel.png
+  socials:
+    x: chrzosel
+    github: czosel
+
+ikatyang:
+  name: Ika
+  url: https://github.com/ikatyang
+  image_url: https://github.com/ikatyang.png
+  socials:
+    x: ikatyang
+    github: ikatyang
+
+lydell:
+  name: Simon Lydell
+  url: https://github.com/lydell
+  image_url: https://github.com/lydell.png
+  socials:
+    x: SimonLydell
+    github: lydell
+
+thorn0:
+  name: Georgii Dolzhykov
+  url: https://github.com/thorn0
+  image_url: https://github.com/thorn0.png
+  socials:
+    x: thorn0
+    github: thorn0
+
+sosukesuzuki:
+  name: Sosuke Suzuki
+  url: https://github.com/sosukesuzuki
+  image_url: https://github.com/sosukesuzuki.png
+  socials:
+    x: __sosukesuzuki
+    github: sosukesuzuki
+
+kddnewton:
+  name: Kevin Newton
+  url: https://github.com/kddnewton
+  image_url: https://github.com/kddnewton.png
+  socials:
+    x: kddnewton
+    github: kddnewton
+
+rattrayalex:
+  name: Alex Rattray
+  url: https://github.com/rattrayalex
+  image_url: https://github.com/rattrayalex.png
+  socials:
+    x: RattrayAlex
+    github: rattrayalex
+
+fabiospampinato:
+  name: Fabio Spampinato
+  url: https://github.com/fabiospampinato
+  image_url: https://github.com/fabiospampinato.png
+  socials:
+    x: fabiospampinato
+    github: fabiospampinato
@@ -1,95 +0,0 @@
-"use strict";
-
-const React = require("react");
-const PropTypes = require("prop-types");
-
-const GithubButton = (props) => (
-  <a
-    className="github-button"
-    href={props.config.githubUrl}
-    data-icon="octicon-star"
-    data-show-count="true"
-    aria-label="Star this project on GitHub"
-  >
-    Star
-  </a>
-);
-
-GithubButton.propTypes = {
-  config: PropTypes.object,
-};
-
-class Footer extends React.Component {
-  url(path) {
-    const language = this.props.language || "en";
-    return `${this.props.config.baseUrl}docs/${language}${path}`;
-  }
-
-  usersUrl() {
-    const language = this.props.language || "en";
-    return `${this.props.config.baseUrl}${language}/users`;
-  }
-
-  render() {
-    return (
-      <footer className="footerSection nav-footer" id="footer">
-        <section className="sitemap">
-          <a href={this.props.config.baseUrl} className="nav-home">
-            <img
-              src={this.props.config.baseUrl + this.props.config.footerIcon}
-              alt={this.props.config.title}
-            />
-          </a>
-          <div>
-            <h5>Docs</h5>
-            <a href={this.url("/index.html")}>About</a>
-            <a href={this.url("/install.html")}>Usage</a>
-            <br />
-            <a href="https://www.netlify.com">
-              <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" />
-            </a>
-          </div>
-          <div>
-            <h5>Community</h5>
-            <a href={this.usersUrl()}>User Showcase</a>
-            <a
-              href="http://stackoverflow.com/questions/tagged/prettier"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Stack Overflow
-            </a>
-            <a href="https://twitter.com/PrettierCode">
-              @PrettierCode on Twitter
-            </a>
-            <object
-              type="image/svg+xml"
-              data="https://img.shields.io/twitter/follow/prettiercode.svg?label=Follow+Prettier&style=social"
-            >
-              <a href="https://twitter.com/intent/follow?screen_name=prettiercode">
-                <img
-                  alt="Follow Prettier on Twitter"
-                  src="https://img.shields.io/twitter/follow/prettiercode.png?label=Follow+Prettier&style=social"
-                />
-              </a>
-            </object>
-          </div>
-          <div>
-            <h5>More</h5>
-            <a href={this.props.config.baseUrl + "blog"}>Blog</a>
-            <a href={this.props.config.githubUrl}>GitHub</a>
-            <a href={this.props.config.githubUrl + "/issues"}>Issues</a>
-            <GithubButton config={this.props.config} />
-          </div>
-        </section>
-      </footer>
-    );
-  }
-}
-
-Footer.propTypes = {
-  language: PropTypes.string,
-  config: PropTypes.object,
-};
-
-module.exports = Footer;
@@ -1,5 +1,4 @@
 - name: JavaScript
-  showName: true
  image: /images/languages/tools_js.svg
  variants:
    - "[JSX](https://facebook.github.io/jsx/)"
@@ -7,14 +6,12 @@
    - "[TypeScript](https://www.typescriptlang.org)"
    - "[JSON](https://json.org)"
 - name: HTML
-  showName: true
  image: /images/languages/tools_html.svg
  variants:
    - "[Vue](https://vuejs.org)"
    - "[Angular](https://angular.io)"
    - "[Ember / Handlebars](https://emberjs.com)"
 - name: CSS
-  showName: true
  image: /images/languages/tools_css.svg
  variants:
    - "[Less](http://lesscss.org)"
@@ -23,12 +20,10 @@
    - "[`styled-jsx`](https://npmjs.com/styled-jsx)"
 - name: GraphQL
  nameLink: https://graphql.org
-  showName: true
  image: /images/languages/tools_gql.svg
  variants:
    - "[GraphQL Schemas](https://graphql.org/learn/schema/)"
 - name: Markdown
-  showName: true
  image: /images/languages/tools_md.svg
  variants:
    - "[CommonMark](https://commonmark.org)"
@@ -36,12 +31,10 @@
    - "[MDX v1](https://mdxjs.com)"
 - name: YAML
  nameLink: https://yaml.org
-  showName: true
  image: /images/languages/tools_yaml.svg
  variants: []
 - name: Community Plugins
  nameLink: ./docs/en/plugins.html#community-plugins
-  showName: true
  image: /images/languages/tools_wip.svg
  variants:
    - "[Apex](https://github.com/dangmai/prettier-plugin-apex)"
@@ -52,4 +45,4 @@
    - "[Rust](https://github.com/jinxdash/prettier-plugin-rust)"
    - "[TOML](https://github.com/bd82/toml-tools/tree/master/packages/prettier-plugin-toml)"
    - "[XML](https://github.com/prettier/plugin-xml)"
-    - "[And more...](./docs/en/plugins.html#community-plugins)"
+    - "[And more...](/docs/plugins#community-plugins)"
@@ -0,0 +1,261 @@
+// @ts-check
+
+import fs from "node:fs";
+import { createRequire } from "node:module";
+import { load as parseYaml } from "js-yaml";
+import { themes as prismThemes } from "prism-react-renderer";
+
+const require = createRequire(import.meta.url);
+
+const packageJsonFile = new URL("../package.json", import.meta.url);
+const packageJson = JSON.parse(fs.readFileSync(packageJsonFile, "utf8"));
+const GITHUB_URL = `https://github.com/${packageJson.repository}`;
+
+/**
+ *
+ * @param {string} fsPath
+ */
+function loadYaml(fsPath) {
+  return parseYaml(fs.readFileSync(new URL(fsPath, import.meta.url), "utf8"));
+}
+
+const users = loadYaml("./data/users.yml");
+const editors = loadYaml("./data/editors.yml");
+const supportedLanguages = loadYaml("./data/languages.yml");
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: "Prettier",
+  tagline: "Opinionated Code Formatter",
+  favicon: "icon.png",
+  titleDelimiter: "·",
+
+  // Set the production url of your site here
+  url: packageJson.homepage,
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: "/",
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: "prettier", // Usually your GitHub org/user name.
+  projectName: packageJson.name, // Usually your repo name.
+
+  customFields: {
+    users,
+    editors,
+    supportedLanguages,
+    githubUrl: GITHUB_URL,
+    tideliftUrl:
+      "https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=website",
+  },
+
+  stylesheets: [
+    "https://unpkg.com/@sandhose/prettier-animated-logo@1.0.3/dist/wide.css",
+  ],
+
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+
+  // Even if you don't use internationalization, you can use this field to set
+  // useful metadata like html lang. For example, if your site is Chinese, you
+  // may want to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+
+  presets: [
+    [
+      "classic",
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      {
+        docs: {
+          sidebarPath: "./sidebars.json",
+          /** @type {import('@docusaurus/plugin-content-docs').EditUrlFunction} */
+          editUrl: ({ docPath }) => `${GITHUB_URL}/edit/main/docs/${docPath}`,
+          path: "../docs",
+          sidebarCollapsed: false,
+          breadcrumbs: false,
+          versions: {
+            current: {
+              label: "next",
+              badge: false,
+            },
+            stable: {
+              label: "stable",
+              badge: false,
+            },
+          },
+        },
+        blog: {
+          feedOptions: {
+            type: ["rss", "atom"],
+            xslt: true,
+          },
+          blogTitle: "Prettier blog",
+          blogDescription: "Read blog posts about Prettier from the team",
+          editUrl: `${GITHUB_URL}/edit/main/website/`,
+          blogSidebarCount: 10,
+          blogSidebarTitle: "Recent posts",
+          postsPerPage: 10,
+          onInlineTags: "warn",
+          onInlineAuthors: "warn",
+          onUntruncatedBlogPosts: "throw",
+        },
+        theme: {
+          customCss: [
+            "./src/css/custom.css",
+            require.resolve("react-tweet/theme.css"),
+          ],
+        },
+        gtag: {
+          trackingID: "G-T57CP1SG02",
+          anonymizeIP: true,
+        },
+      },
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    {
+      // Replace with your project's social card
+      image: "icon.png",
+      colorMode: {
+        respectPrefersColorScheme: true,
+      },
+      navbar: {
+        title: "Prettier",
+        logo: {
+          alt: "",
+          src: "icon.png",
+        },
+        style: "dark",
+        items: [
+          {
+            type: "docsVersionDropdown",
+          },
+          {
+            to: "pathname:///playground/",
+            label: "Playground",
+            position: "right",
+            target: "_self",
+          },
+          {
+            type: "docSidebar",
+            sidebarId: "docs",
+            label: "Docs",
+            position: "right",
+          },
+          { to: "/blog", label: "Blog", position: "right" },
+          {
+            href: "https://opencollective.com/prettier",
+            label: "Donate",
+            position: "right",
+          },
+          {
+            "aria-label": "GitHub repository",
+            className: "header-github-link",
+            href: GITHUB_URL,
+            position: "right",
+          },
+        ],
+      },
+      footer: {
+        style: "dark",
+        links: [
+          {
+            title: "Docs",
+            items: [
+              {
+                label: "About",
+                to: "/docs",
+              },
+              {
+                label: "Usage",
+                to: "/docs/install",
+              },
+              {
+                html: /*html*/ `
+                  <br />
+                  <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
+                    <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51" />
+                  </a>
+                `,
+              },
+            ],
+          },
+          {
+            title: "Community",
+            items: [
+              {
+                label: "User Showcase",
+                to: "/users",
+              },
+              {
+                label: "Stack Overflow",
+                href: "http://stackoverflow.com/questions/tagged/prettier",
+              },
+              {
+                label: "@PrettierCode on Twitter",
+                href: "https://twitter.com/PrettierCode",
+              },
+            ],
+          },
+          {
+            title: "More",
+            items: [
+              {
+                label: "Blog",
+                to: "/blog",
+              },
+              {
+                label: "GitHub",
+                href: GITHUB_URL,
+              },
+              {
+                label: "Issues",
+                href: `${GITHUB_URL}/issues`,
+              },
+              {
+                html: /*html*/ `
+                  <a
+                    href="https://github.com/prettier/prettier"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    aria-label="Star this project on GitHub"
+                    class="footer__github-stars"
+                  >
+                    <img src="https://img.shields.io/github/stars/prettier/prettier?style=social" alt="Star this project on GitHub" />
+                  </a>
+                `,
+              },
+            ],
+          },
+        ],
+      },
+      algolia: {
+        appId: "OHFQ1H5TQS",
+        apiKey: "46e1871dfdc7b4e16290acceb5b0f459",
+        indexName: "prettier",
+      },
+      prism: {
+        additionalLanguages: [
+          "bash",
+          "diff",
+          "handlebars",
+          "markup-templating", // Required for "handlebars"
+          "toml",
+          "ini",
+          "vim",
+          "scss",
+          "less",
+        ],
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
+      },
+    },
+};
+
+export default config;
@@ -2,29 +2,56 @@
  "private": true,
  "license": "MIT",
  "scripts": {
-    "build": "webpack --mode=production && docusaurus-build",
-    "start": "concurrently \"docusaurus-start\" \"webpack --mode=development --watch\"",
-    "update-stable-docs": "rimraf ./versioned_docs ./versions.json && docusaurus-version stable && node ./scripts/replace-version-placeholder.mjs"
+    "playground:build": "webpack --mode=production",
+    "playground:watch": "webpack --mode=development --watch",
+    "docusaurus": "docusaurus",
+    "start": "concurrently \"yarn playground:watch\" \"docusaurus start\"",
+    "build": "yarn playground:build && docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "update-stable-docs": "node ./scripts/update-stable-docs.mjs"
  },
  "dependencies": {
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
+    "@mdx-js/react": "^3.0.0",
+    "@sandhose/prettier-animated-logo": "1.0.3",
    "clipboard": "2.0.11",
+    "clsx": "^2.0.0",
    "codemirror-graphql": "2.2.0",
    "lz-string": "1.5.0",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "prism-react-renderer": "^2.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "9.0.3",
+    "react-tweet": "3.2.1"
  },
  "devDependencies": {
    "@babel/core": "7.26.0",
    "@babel/preset-env": "7.26.0",
-    "@sandhose/prettier-animated-logo": "1.0.3",
+    "@docusaurus/module-type-aliases": "3.7.0",
+    "@docusaurus/types": "3.7.0",
+    "@types/js-yaml": "4.0.9",
    "babel-loader": "9.2.1",
    "concurrently": "9.1.2",
-    "docusaurus": "1.14.7",
    "js-yaml": "4.1.0",
-    "rimraf": "6.0.1",
    "webpack": "5.97.1",
    "webpack-cli": "6.0.1"
  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
  "packageManager": "yarn@4.6.0"
 }
@@ -1,46 +0,0 @@
-"use strict";
-
-const React = require("react");
-const { Container, GridBlock } = require("../../../core/CompLibrary.js");
-
-class Help extends React.Component {
-  render() {
-    const supportLinks = [
-      {
-        content:
-          "Learn more using the [documentation on this site.](/docs/en/why-prettier.html)\n",
-        title: "Browse Docs",
-      },
-      {
-        content: "Ask questions about the documentation and project\n",
-        title: "Join the community",
-      },
-      {
-        content: "Find out what's new with this project\n",
-        title: "Stay up to date",
-      },
-    ];
-
-    return (
-      <div>
-        <div className="docMainWrapper wrapper">
-          <Container className="mainContainer documentContainer postContainer">
-            <div className="post">
-              <header className="postHeader">
-                <h2>Need help?</h2>
-              </header>
-              <p>This project is maintained by a dedicated group of people;</p>
-              <GridBlock contents={supportLinks} layout="threeColumn" />
-            </div>
-          </Container>
-        </div>
-      </div>
-    );
-  }
-}
-
-Help.defaultProps = {
-  language: "en",
-};
-
-module.exports = Help;
@@ -1,420 +0,0 @@
-"use strict";
-
-const React = require("react");
-const PropTypes = require("prop-types");
-const AnimatedLogo = require("@sandhose/prettier-animated-logo");
-const { MarkdownBlock, Container } = require("../../core/CompLibrary.js");
-
-const siteConfig = require(process.cwd() + "/siteConfig.js");
-
-const ButtonGroup = (props) => (
-  <div className="buttonGroup buttonWrapper">{props.children}</div>
-);
-
-ButtonGroup.propTypes = {
-  children: PropTypes.node,
-};
-
-class Button extends React.Component {
-  render() {
-    return (
-      <div className="pluginWrapper buttonWrapper">
-        <a className="button" href={this.props.href} target={this.props.target}>
-          {this.props.children}
-        </a>
-      </div>
-    );
-  }
-}
-
-Button.defaultProps = {
-  target: "_self",
-};
-
-Button.propTypes = {
-  href: PropTypes.string,
-  target: PropTypes.string,
-  children: PropTypes.any,
-};
-
-function Tidelift() {
-  return (
-    <a className="tidelift" href={siteConfig.tideliftUrl}>
-      PRETTIER FOR ENTERPRISE
-    </a>
-  );
-}
-
-const HomeSplash = (props) => (
-  <div className="homeContainer">
-    <Tidelift />
-    <div className="homeSplashFade">
-      <div className="wrapper homeWrapper">
-        <div className="animatedLogoWrapper">
-          <AnimatedLogo version="wide" />
-        </div>
-        <div className="inner">
-          <div className="section promoSection">
-            <div className="promoRow">
-              <div className="pluginRowBlock">
-                <Button href="/playground/">Try It Online</Button>&nbsp;
-                <Button href={"/docs/" + props.language + "/install.html"}>
-                  Install Prettier
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-HomeSplash.propTypes = {
-  language: PropTypes.string,
-};
-
-const TldrSection = ({ language }) => (
-  <div className="tldrSection productShowcaseSection lightBackground">
-    <Container>
-      <div
-        style={{
-          display: "flex",
-          flexFlow: "row wrap",
-          justifyContent: "space-evenly",
-        }}
-      >
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <h2>What is Prettier?</h2>
-          <ul style={{ flex: "1" }}>
-            <li>An opinionated code formatter</li>
-            <li>Supports many languages</li>
-            <li>Integrates with most editors</li>
-            <li>
-              <a href={"/docs/" + language + "/option-philosophy.html"}>
-                Has few options &raquo;
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <h2>Why?</h2>
-          <ul style={{ flex: "1" }}>
-            <li>Your code is formatted on save</li>
-            <li>No need to discuss style in code review</li>
-            <li>Saves you time and energy</li>
-            <li>
-              <a href={"/docs/" + language + "/why-prettier.html"}>
-                And more &raquo;
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </Container>
-  </div>
-);
-
-TldrSection.propTypes = {
-  language: PropTypes.string,
-};
-
-const Language = ({ name, nameLink, showName, image, variants }) => (
-  <div
-    className="languageCategory"
-    style={{
-      display: "flex",
-      alignItems: "flex-start",
-      paddingBottom: "1em",
-    }}
-  >
-    <img src={image} style={{ width: "50px", padding: "0 20px" }} />
-    <ul>
-      {showName && (
-        <li className="accented">
-          {nameLink ? <a href={nameLink}>{name}</a> : name}
-        </li>
-      )}
-      {variants.map((variant) => (
-        <li key={variant}>
-          <MarkdownBlock>{variant}</MarkdownBlock>
-        </li>
-      ))}
-    </ul>
-  </div>
-);
-
-Language.propTypes = {
-  name: PropTypes.string,
-  nameLink: PropTypes.string,
-  showName: PropTypes.bool,
-  image: PropTypes.string,
-  variants: PropTypes.array,
-};
-
-const LanguagesSection = () => {
-  const languageChunks = siteConfig.supportedLanguages.reduce(
-    (acc, language) => {
-      const last = acc.at(-1);
-      if (
-        last &&
-        last.length < 2 &&
-        last.reduce((sum, lang) => sum + lang.variants.length, 0) +
-          language.variants.length <
-          9
-      ) {
-        last.push(language);
-      } else {
-        acc.push([language]);
-      }
-      return acc;
-    },
-    [],
-  );
-
-  return (
-    <div
-      className="languagesSection productShowcaseSection"
-      style={{ textAlign: "center" }}
-    >
-      <Container>
-        <h2>Works with the Tools You Use</h2>
-        <div
-          style={{
-            display: "flex",
-            flexFlow: "row wrap",
-            justifyContent: "space-around",
-          }}
-        >
-          {languageChunks.map((languageChunk, index) => (
-            <div key={index} style={{ flex: "1 1 auto" }}>
-              {languageChunk.map((language) => (
-                <Language key={language.name} {...language} />
-              ))}
-            </div>
-          ))}
-        </div>
-      </Container>
-    </div>
-  );
-};
-
-const Editor = ({ content = "", image, name }) => (
-  <div className="editor">
-    <img className="editorImage" src={image} />
-    <div className="editorInfo">
-      <h3 className="editorName">{name}</h3>
-      <MarkdownBlock>{content.replaceAll("\n", "  \n")}</MarkdownBlock>
-    </div>
-  </div>
-);
-
-Editor.propTypes = {
-  content: PropTypes.string,
-  image: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-};
-
-const EditorSupportSection = () => (
-  <div className="editorSupportSection productShowcaseSection lightBackground">
-    <Container>
-      <h2>Editor Support</h2>
-      <div
-        style={{
-          display: "flex",
-          flexFlow: "row wrap",
-          justifyContent: "space-around",
-        }}
-      >
-        {siteConfig.editors.map((editor) => (
-          <Editor key={editor.name} {...editor} />
-        ))}
-      </div>
-    </Container>
-
-    <div style={{ float: "right" }}>
-      <span>Got more? </span>
-      <a
-        href={`${siteConfig.githubUrl}/edit/main/website/data/editors.yml`}
-        className="button"
-      >
-        Send a PR
-      </a>
-    </div>
-  </div>
-);
-
-const UsersSection = ({ language }) => {
-  const showcase = siteConfig.users
-    .filter((user) => user.pinned)
-    .map((user, i) => (
-      <a key={i} className="growOnHover alignCenter" href={user.infoLink}>
-        <img className="user" src={user.greyImage} title={user.caption} />
-      </a>
-    ));
-
-  return (
-    <div className="usersSection productShowcaseSection">
-      <Container>
-        <h2>Used By People You Rely On</h2>
-        <div style={{ textAlign: "right" }} />
-        <div
-          style={{
-            display: "flex",
-            flexFlow: "row wrap",
-            justifyContent: "space-around",
-          }}
-        >
-          {showcase}
-        </div>
-        <div className="more-users">
-          <a
-            className="button"
-            href={siteConfig.baseUrl + language + "/users/"}
-            target="_self"
-            style={{ marginRight: "10px" }}
-          >
-            See Others
-          </a>
-        </div>
-
-        <h2 className="ecosystemSubHeader">Established in the Ecosystem</h2>
-        <div
-          className="ecosystemSubSection"
-          style={{
-            display: "flex",
-            justifyContent: "space-around",
-            flexFlow: "row wrap",
-          }}
-        >
-          <div style={{ display: "flex", marginTop: "22px" }}>
-            <a
-              href="https://2021.stateofjs.com/en-US/other-tools/utilities"
-              style={{ marginTop: "15px" }}
-            >
-              <img
-                src="/images/state_of_js_grey.svg"
-                style={{ width: "80px" }}
-              />
-            </a>
-            <div style={{ marginLeft: ".7em", width: "260px" }}>
-              <p>Regularly used by:</p>
-              <ul style={{ marginBottom: "0" }}>
-                <li>
-                  <a href="https://2021.stateofjs.com/en-US/other-tools/#utilities">
-                    More than 83% of respondents to State of JS 2021.
-                  </a>
-                </li>
-                <li>
-                  <a href="https://2020.stateofjs.com/en-US/other-tools/#utilities">
-                    More than 70% of respondents to State of JS 2020.
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div style={{ display: "flex", marginTop: "22px" }}>
-            <a href="https://github.com/prettier/prettier">
-              <img src="/images/github_grey.svg" style={{ width: "80px" }} />
-            </a>
-            <div style={{ marginLeft: ".7em", width: "260px" }}>
-              <p>
-                More than{" "}
-                <strong data-placeholder="dependent-github">8.9 million</strong>{" "}
-                dependent repositories on GitHub
-              </p>
-              <Button href="https://github.com/prettier/prettier/network/dependents">
-                Check Them Out
-              </Button>
-            </div>
-          </div>
-
-          <div style={{ display: "flex", marginTop: "22px" }}>
-            <a href="https://npmjs.com/package/prettier">
-              <img src="/images/npm_grey.svg" style={{ width: "80px" }} />
-            </a>
-            <div style={{ marginLeft: ".7em", width: "260px" }}>
-              <p>
-                More than{" "}
-                <strong data-placeholder="dependent-npm">18.7k</strong>{" "}
-                dependent packages on npm
-              </p>
-              <Button href="https://www.npmjs.com/browse/depended/prettier">
-                See them all
-              </Button>
-            </div>
-          </div>
-        </div>
-      </Container>
-    </div>
-  );
-};
-
-UsersSection.propTypes = {
-  language: PropTypes.string,
-};
-
-const SyntaxSection = () => (
-  // eslint-disable-next-line react/jsx-no-target-blank
-  <a
-    href="https://sentry.shop/products/syntax-prettier-tee"
-    target="_blank"
-    className="syntaxLink"
-    style={{
-      color: "black",
-      fontSize: 20,
-      fontWeight: "bold",
-    }}
-  >
-    <div
-      style={{
-        backgroundColor: "#f8bc45",
-        justifyContent: "center",
-        display: "flex",
-        paddingTop: 20,
-      }}
-    >
-      <div
-        style={{
-          width: 860,
-          display: "flex",
-          justifyContent: "center",
-          flexDirection: "column",
-        }}
-      >
-        <p>
-          Limited edition tshirts are now available to buy! $10 per tshirt goes
-          to maintain the project.
-        </p>
-        <img width={860} src="/images/syntaxfm/1.webp" />
-      </div>
-    </div>
-  </a>
-);
-
-class Index extends React.Component {
-  render() {
-    const language = this.props.language || "en";
-
-    return (
-      <div>
-        <script src="landing.js" />
-        <HomeSplash language={language} />
-        <div className="mainContainer landingContainer">
-          <SyntaxSection />
-          <TldrSection language={language} />
-          <LanguagesSection />
-          <EditorSupportSection />
-          <UsersSection language={language} />
-        </div>
-      </div>
-    );
-  }
-}
-
-Index.propTypes = {
-  language: PropTypes.string,
-};
-
-module.exports = Index;
@@ -1,67 +0,0 @@
-"use strict";
-
-const React = require("react");
-const { Container } = require("../../../core/CompLibrary.js");
-
-const siteConfig = require(process.cwd() + "/siteConfig.js");
-
-class Users extends React.Component {
-  render() {
-    const showcase = siteConfig.users.map((user, i) => (
-      <a key={i} href={user.infoLink}>
-        <img src={user.image} title={user.caption} />
-      </a>
-    ));
-
-    return (
-      <div>
-        <div className="mainContainer">
-          <Container padding={["bottom", "top"]}>
-            <div className="showcaseSection">
-              <div className="prose">
-                <h1>Who’s Using This?</h1>
-              </div>
-              <blockquote
-                style={{
-                  fontSize: "125%",
-                  textAlign: "left",
-                }}
-              >
-                <p>Prettier is regularly used by:</p>
-                <ul>
-                  <li>
-                    <a href="https://2021.stateofjs.com/en-US/other-tools/#utilities">
-                      More than <strong>83%</strong> of respondents to State of
-                      JS 2021 (10282 developers out of 12360).
-                    </a>
-                  </li>
-                  <li>
-                    <a href="https://2020.stateofjs.com/en-US/other-tools/#utilities">
-                      More than <strong>70%</strong> of respondents to State of
-                      JS 2020 (14880 developers out of 20974).
-                    </a>
-                  </li>
-                </ul>
-              </blockquote>
-              <div className="logos">{showcase}</div>
-              <div className="prose">
-                ...and{" "}
-                <a href="https://www.npmjs.com/browse/depended/prettier">
-                  many more projects
-                </a>
-              </div>
-            </div>
-          </Container>
-        </div>
-      </div>
-    );
-  }
-}
-
-Users.defaultProps = {
-  language: "en",
-};
-
-Users.title = "Who's using Prettier?";
-
-module.exports = Users;
@@ -1,96 +0,0 @@
-"use strict";
-
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const React = require("react");
-const { Container } = require("../../core/CompLibrary.js");
-
-const CWD = process.cwd();
-
-const versions = require(`${CWD}/versions.json`);
-
-const rootPackageJson = require(`${CWD}/../package.json`);
-const defaultBranchVersion = rootPackageJson.version;
-const isDefaultBranchDevVersion = defaultBranchVersion.endsWith("-dev");
-const devVersion = isDefaultBranchDevVersion ? defaultBranchVersion : null;
-const latestVersion = isDefaultBranchDevVersion
-  ? rootPackageJson.devDependencies.prettier
-  : defaultBranchVersion;
-const [latestDocsVersion, ...pastDocsVersions] = versions;
-
-function Versions(props) {
-  const { config: siteConfig } = props;
-  return (
-    <div className="docMainWrapper wrapper">
-      <Container className="mainContainer versionsContainer">
-        <div className="post">
-          <header className="postHeader">
-            <h1>{siteConfig.title} Versions</h1>
-          </header>
-          <table className="versions">
-            <tbody>
-              <tr>
-                <th>Version</th>
-                <th>Install with</th>
-                <th>Documentation</th>
-              </tr>
-              <tr>
-                <td>{latestVersion}</td>
-                <td>
-                  <code>npm install prettier</code>
-                </td>
-                <td>
-                  <a href={`${siteConfig.baseUrl}docs/en/index.html`}>
-                    {latestDocsVersion}
-                  </a>{" "}
-                  (latest)
-                </td>
-              </tr>
-              <tr>
-                <td>{devVersion}</td>
-                <td>
-                  <code>npm install prettier/prettier</code>
-                </td>
-                <td>
-                  <a href={`${siteConfig.baseUrl}docs/en/next/index.html`}>
-                    next
-                  </a>{" "}
-                  (main)
-                </td>
-              </tr>
-              {pastDocsVersions.length > 0 &&
-                pastDocsVersions.map((pastDocsVersion, index) => {
-                  const pastMajorVersion = pastDocsVersion.replace(/^v/u, "");
-                  return (
-                    <tr key={index}>
-                      <td>{pastMajorVersion}.x</td>
-                      <td>
-                        <code>
-                          npm install prettier@
-                          {pastMajorVersion}
-                        </code>
-                      </td>
-                      <td>
-                        <a
-                          href={`${siteConfig.baseUrl}docs/en/${pastDocsVersion}/index.html`}
-                        >
-                          {pastDocsVersion}
-                        </a>
-                      </td>
-                    </tr>
-                  );
-                })}
-            </tbody>
-          </table>
-        </div>
-      </Container>
-    </div>
-  );
-}
-
-module.exports = Versions;
@@ -1,22 +0,0 @@
-import fs from "node:fs/promises";
-
-const DIRECTORY = new URL("../versioned_docs/version-stable/", import.meta.url);
-let version = process.env.PRETTIER_VERSION;
-
-if (!version) {
-  const packageJsonFile = new URL("../../package.json", import.meta.url);
-  const packageJson = JSON.parse(await fs.readFile(packageJsonFile));
-  ({ version } = packageJson);
-}
-
-await Promise.all(
-  ["browser.md"].map(async (file) => {
-    file = new URL(file, DIRECTORY);
-
-    let content = await fs.readFile(file, "utf8");
-
-    content = content.replaceAll("%PRETTIER_VERSION%", version);
-
-    await fs.writeFile(file, content);
-  }),
-);
@@ -0,0 +1,55 @@
+import fs from "node:fs/promises";
+
+const version = await getPrettierVersion();
+
+// Copy sidebar config
+const STABLE_SIDEBAR = relativeURL(
+  "../versioned_sidebars/version-stable-sidebars.json",
+);
+const CURRENT_SIDEBAR = relativeURL("../sidebars.json");
+
+await fs.copyFile(CURRENT_SIDEBAR, STABLE_SIDEBAR);
+
+// Copy docs
+const STABLE_DOCS_DIRECTORY = relativeURL("../versioned_docs/version-stable/");
+const CURRENT_DOCS_DIRECTORY = relativeURL("../../docs/");
+
+await fs.rm(STABLE_DOCS_DIRECTORY, { recursive: true, force: true });
+await fs.mkdir(STABLE_DOCS_DIRECTORY, { recursive: true, force: true });
+await fs.cp(CURRENT_DOCS_DIRECTORY, STABLE_DOCS_DIRECTORY, { recursive: true });
+
+// Replace version placeholders
+await Promise.all(
+  ["browser.md"].map(async (file) => {
+    file = new URL(file, STABLE_DOCS_DIRECTORY);
+    await replaceVersionPlaceholder(file, version);
+  }),
+);
+
+async function getPrettierVersion() {
+  const version = process.env.PRETTIER_VERSION;
+
+  if (!version) {
+    const packageJsonFile = new URL("../../package.json", import.meta.url);
+    const packageJson = JSON.parse(await fs.readFile(packageJsonFile));
+    return packageJson.version;
+  }
+  return version;
+}
+
+/**
+ * @param {import("fs").PathLike} path
+ */
+function relativeURL(path) {
+  return new URL(path, import.meta.url);
+}
+
+/**
+ * @param {import("fs").PathLike} path
+ * @param {string} version
+ */
+async function replaceVersionPlaceholder(path, version) {
+  let content = await fs.readFile(path, "utf8");
+  content = content.replaceAll("%PRETTIER_VERSION%", version);
+  await fs.writeFile(path, content);
+}
@@ -1,98 +0,0 @@
-"use strict";
-
-// Docs: https://docusaurus.io/docs/en/site-config.html
-
-const path = require("path");
-const fs = require("fs");
-const { load: parseYaml } = require("js-yaml");
-
-const PACKAGE = require("../package.json");
-const GITHUB_URL = `https://github.com/${PACKAGE.repository}`;
-
-function loadYaml(fsPath) {
-  return parseYaml(fs.readFileSync(path.join(__dirname, fsPath), "utf8"));
-}
-
-const users = loadYaml("./data/users.yml");
-const editors = loadYaml("./data/editors.yml");
-const supportedLanguages = loadYaml("./data/languages.yml");
-
-const siteConfig = {
-  title: "Prettier",
-  tagline: "Opinionated Code Formatter",
-  githubUrl: GITHUB_URL,
-  url: PACKAGE.homepage,
-  baseUrl: "/",
-  projectName: PACKAGE.name,
-  repo: PACKAGE.repository,
-  cname: "prettier.io",
-  users,
-  editors,
-  supportedLanguages,
-  tideliftUrl:
-    "https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=website",
-  /* base url for editing docs, usage example: editUrl + 'en/doc1.md' */
-  editUrl: `${GITHUB_URL}/edit/main/docs/`,
-  headerLinks: [
-    { href: "/playground/", label: "Playground" },
-    { doc: "index", label: "Docs" },
-    { blog: true, label: "Blog" },
-    { search: true },
-    { href: "https://opencollective.com/prettier", label: "Donate" },
-    { href: GITHUB_URL, label: "GitHub" },
-  ],
-  /* path to images for header/footer */
-  headerIcon: "icon.png",
-  footerIcon: "icon.png",
-  favicon: "icon.png",
-  /* colors for website */
-  colors: {
-    primaryColor: "#1A2B34",
-    secondaryColor: "#808080",
-  },
-  highlight: {
-    theme: "default",
-    version: require("highlight.js/package.json").version,
-  },
-  usePrism: ["javascript", "jsx", "typescript", "ts", "js", "html", "css"],
-  useEnglishUrl: true,
-  scripts: [
-    "https://buttons.github.io/buttons.js",
-    "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js",
-    "/js/code-block-buttons.js",
-  ],
-  stylesheets: [
-    "//unpkg.com/@sandhose/prettier-animated-logo@1.0.3/dist/wide.css",
-  ],
-  algolia: {
-    apiKey: process.env.ALGOLIA_PRETTIER_API_KEY,
-    indexName: "prettier",
-  },
-  markdownPlugins: [
-    // ignore `<!-- prettier-ignore -->` before passing into Docusaurus to avoid mis-parsing (#3322)
-    (md) => {
-      md.block.ruler.before(
-        "htmlblock",
-        "prettierignore",
-        (state, startLine) => {
-          const pos = state.bMarks[startLine];
-          const max = state.eMarks[startLine];
-          if (/<!-- prettier-ignore -->/u.test(state.src.slice(pos, max))) {
-            state.line += 1;
-            return true;
-          }
-          return false;
-        },
-      );
-    },
-  ],
-  separateCss: ["static/separate-css"],
-  gaTrackingId: "UA-111350464-1",
-  twitter: true,
-  twitterUsername: "PrettierCode",
-  twitterImage: "icon.png",
-  ogImage: "icon.png",
-  onPageNav: "separate",
-};
-
-module.exports = siteConfig;
@@ -0,0 +1,98 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #19828a;
+  --ifm-color-primary-dark: #16757c;
+  --ifm-color-primary-darker: #156e75;
+  --ifm-color-primary-darkest: #115b61;
+  --ifm-color-primary-light: #1b8f98;
+  --ifm-color-primary-lighter: #1d959f;
+  --ifm-color-primary-lightest: #21a9b3;
+  --ifm-code-font-size: 90%;
+  --ifm-button-border-radius: calc(0.8rem * var(--ifm-button-size-multiplier));
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  --navbar-color: #1a2b34;
+
+  --color-yellow: #f8bc45;
+  --color-yellow-dark: #f7b126;
+  --color-yellow-darker: #f6ab17;
+  --color-yellow-darkest: #d69108;
+  --color-yellow-light: #f9c764;
+  --color-yellow-lighter: #facd73;
+  --color-yellow-lightest: #fbdda1;
+
+  --color-pink: #c596c7;
+  --color-pink-dark: #b87fbb;
+  --color-pink-darker: #b274b5;
+  --color-pink-darkest: #9c559f;
+  --color-pink-light: #d2add3;
+  --color-pink-lighter: #d8b8d9;
+  --color-pink-lightest: #ebdaeb;
+}
+
+[data-theme="dark"] {
+  --ifm-color-primary: #56b3b4;
+  --ifm-color-primary-dark: #4aa5a6;
+  --ifm-color-primary-darker: #459c9d;
+  --ifm-color-primary-darkest: #398081;
+  --ifm-color-primary-light: #68bbbc;
+  --ifm-color-primary-lighter: #72bfc0;
+  --ifm-color-primary-lightest: #8dcccd;
+
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+.button--primary:active,
+.button--primary.button--active {
+  --ifm-button-background-color: var(--ifm-color-primary-dark);
+  --ifm-button-border-color: var(--ifm-color-primary-dark);
+}
+
+.button--secondary:active,
+.button--secondary.button--active {
+  --ifm-button-background-color: var(--ifm-color-secondary-dark);
+  --ifm-button-border-color: var(--ifm-color-secondary-dark);
+}
+
+.navbar {
+  --ifm-navbar-background-color: var(--navbar-color);
+  --ifm-navbar-link-hover-color: #68bbbc;
+}
+
+.hero {
+  --ifm-hero-background-color: var(--navbar-color);
+}
+
+.footer {
+  --ifm-footer-background-color: #20232a;
+}
+
+.header-github-link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-github-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}
+
+.menu__link {
+  line-height: 1.15;
+}
+
+.footer__github-stars {
+  display: block;
+  margin-top: 8px;
+}
@@ -0,0 +1,55 @@
+import Link from "@docusaurus/Link";
+import Layout from "@theme/Layout";
+
+import Heading from "@theme/Heading";
+
+/**
+ *
+ * @param {object} props
+ * @param {string} props.title
+ * @param {ReactNode} props.children
+ */
+function Card({ title, children }) {
+  return (
+    <div class="card margin-vert--sm">
+      <div class="card__header">
+        <h2>{title}</h2>
+      </div>
+      <div class="card__body">
+        <p>{children}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function Help() {
+  return (
+    <Layout title="Prettier · Opinionated Code Formatter">
+      <main className="margin-vert--xl container">
+        <div className="margin-bottom--lg">
+          <Heading as="h1">Need help?</Heading>
+          <div>This project is maintained by a dedicated group of people;</div>
+        </div>
+
+        <div className="row">
+          <div className="col">
+            <Card title="Browse Docs">
+              Learn more using the{" "}
+              <Link to="/docs">documentation on this site</Link>.
+            </Card>
+          </div>
+          <div className="col">
+            <Card title="Join the community">
+              Ask questions about the documentation and project.
+            </Card>
+          </div>
+          <div className="col">
+            <Card title="Stay up to date">
+              Find out what's new with this project.
+            </Card>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}
@@ -0,0 +1,371 @@
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import AnimatedLogo from "@sandhose/prettier-animated-logo";
+import Heading from "@theme/Heading";
+import styles from "./index.module.css";
+import { useState } from "react";
+import Markdown from "react-markdown";
+
+function DraggableLogo() {
+  const [rolling, setRolling] = useState(false);
+
+  /**
+   *
+   * @param {DragEvent} event
+   */
+  const onDragStart = (event) => {
+    event.preventDefault();
+    setRolling(true);
+  };
+
+  return (
+    <div
+      className={styles.logoWrapper}
+      draggable="true"
+      onDragStart={onDragStart}
+      onTouchStart={onDragStart}
+    >
+      <AnimatedLogo
+        version="wide"
+        rolling={rolling}
+        onAnimationEnd={() => setRolling(false)}
+      />
+    </div>
+  );
+}
+
+function Tidelift() {
+  const { siteConfig } = useDocusaurusContext();
+  const tideliftUrl = siteConfig.customFields.tideliftUrl;
+
+  return (
+    <Link className={styles.tidelift} to={tideliftUrl}>
+      PRETTIER FOR ENTERPRISE
+    </Link>
+  );
+}
+
+function HomepageHeader() {
+  return (
+    <header className={clsx("hero hero--dark", styles.heroBanner)}>
+      <Tidelift />
+
+      <div className="container">
+        <div className={styles.logoWrapperContainer}>
+          <DraggableLogo />
+        </div>
+        <div className={styles.heroButtonContainer}>
+          <Link
+            className={clsx(
+              "button button--primary button--lg",
+              styles.heroButton,
+            )}
+            to="pathname:///playground/"
+            target="_self"
+          >
+            Try It Online
+          </Link>
+          <Link
+            className={clsx(
+              "button button--secondary button--lg",
+              styles.heroButton,
+            )}
+            to="/docs/install"
+          >
+            Install Prettier
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+function SyntaxSection() {
+  return (
+    <section className={styles.syntaxSection}>
+      <Link
+        to="https://sentry.shop/products/syntax-prettier-tee"
+        className={clsx(styles.syntaxLink, "container")}
+      >
+        <div className="margin-bottom--md">
+          Limited edition tshirts are now available to buy! $10 per tshirt goes
+          to maintain the project.
+        </div>
+        <img width={860} alt="" src="/images/syntaxfm/1.webp" />
+      </Link>
+    </section>
+  );
+}
+
+function TldrSection() {
+  return (
+    <div className={clsx(styles.tldrSection, styles.sectionPadding)}>
+      <div className={clsx("container", styles.tldrSectionInner)}>
+        <div className={styles.tldrSectionColumn}>
+          <Heading as="h2">What is Prettier?</Heading>
+          <ul>
+            <li>An opinionated code formatter</li>
+            <li>Supports many languages</li>
+            <li>Integrates with most editors</li>
+            <li>
+              <a href={"/docs/option-philosophy"}>Has few options &raquo;</a>
+            </li>
+          </ul>
+        </div>
+        <div className={styles.tldrSectionColumn}>
+          <Heading as="h2">Why?</Heading>
+          <ul>
+            <li>Your code is formatted on save</li>
+            <li>No need to discuss style in code review</li>
+            <li>Saves you time and energy</li>
+            <li>
+              <Link to={"/docs/why-prettier"}>And more &raquo;</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LanguagesSection() {
+  const { siteConfig } = useDocusaurusContext();
+  const languages = siteConfig.customFields.supportedLanguages;
+
+  const languageChunks = languages.reduce((acc, language) => {
+    const last = acc.at(-1);
+    if (
+      last &&
+      last.length < 2 &&
+      last.reduce((sum, lang) => sum + lang.variants.length, 0) +
+        language.variants.length <
+        9
+    ) {
+      last.push(language);
+    } else {
+      acc.push([language]);
+    }
+    return acc;
+  }, []);
+
+  return (
+    <section className={clsx(styles.sectionPadding, styles.languageSection)}>
+      <div className="container">
+        <Heading as="h2">Works with the Tools You Use</Heading>
+        <div className={styles.languageSectionGrid}>
+          {languageChunks.map((languageChunk, index) => (
+            <div key={index}>
+              {languageChunk.map((language) => (
+                <LanguageItem key={language.name} {...language} />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/**
+ *
+ * @param {object} props
+ * @param {string} props.name
+ * @param {string?} props.nameLink
+ * @param {string} props.image
+ * @param {string[]} props.variants
+ */
+function LanguageItem({ name, nameLink, image, variants }) {
+  return (
+    <div className={styles.languageItem}>
+      <img src={image} className={styles.languageItemImage} alt="" />
+      <ul className={styles.languageItemList}>
+        <li>{nameLink ? <a href={nameLink}>{name}</a> : name}</li>
+
+        {variants.map((variant) => (
+          <li key={variant}>
+            <Markdown>{variant}</Markdown>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function EditorSupportSection() {
+  const { siteConfig } = useDocusaurusContext();
+  const editors = siteConfig.customFields.editors;
+  const githubUrl = siteConfig.customFields.githubUrl;
+
+  return (
+    <div className={clsx(styles.sectionPadding, styles.editorSection)}>
+      <div className="container">
+        <Heading as="h2">Editor Support</Heading>
+        <div className={styles.editorSectionGrid}>
+          {editors.map((editor) => (
+            <Editor key={editor.name} {...editor} />
+          ))}
+        </div>
+
+        <div className={styles.editorSectionButtonContainer}>
+          <div>
+            <span className="margin-right--sm">Got more?</span>
+            <Link
+              to={`${githubUrl}/edit/main/website/data/editors.yml`}
+              className={clsx("button button--outline button--primary")}
+            >
+              Send a PR
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ *
+ * @param {object} props
+ * @param {string} props.content
+ * @param {string} props.image
+ * @param {string} props.name
+ */
+function Editor({ content = "", image, name }) {
+  return (
+    <div className={styles.editorItem}>
+      <img src={image} className={styles.editorItemImage} alt="" />
+      <div>
+        <Heading as="h3">{name}</Heading>
+        <Markdown>{content.replaceAll("\n", "  \n")}</Markdown>
+      </div>
+    </div>
+  );
+}
+
+function UsersSection() {
+  const { siteConfig } = useDocusaurusContext();
+  const users = siteConfig.customFields.users;
+  const showcase = users
+    .filter((user) => user.pinned)
+    .map((user, i) => (
+      <a key={i} href={user.infoLink} className={styles.userItem}>
+        <img
+          src={user.greyImage}
+          title={user.caption}
+          className={styles.userItemImage}
+        />
+      </a>
+    ));
+
+  return (
+    <div className={clsx(styles.sectionPadding, styles.userSection)}>
+      <div className="container padding-bottom--md">
+        <Heading as="h2">Used By People You Rely On</Heading>
+        <div className={styles.userSectionGrid}>{showcase}</div>
+        <div className={styles.userSectionButtonContainer}>
+          <div>
+            <Link to="/users" className={clsx("button button--primary")}>
+              See others
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="container">
+        <Heading as="h2">Established in the Ecosystem</Heading>
+
+        <div className={styles.ecosystemGrid}>
+          <div className={styles.ecosystemGridItem}>
+            <Link
+              to="https://2021.stateofjs.com/en-US/other-tools/utilities"
+              style={{ marginTop: "15px" }}
+              aria-label="Statistic for utility tools in the State of JavaScript survey"
+            >
+              <img src="/images/state_of_js_grey.svg" alt="" />
+            </Link>
+            <div>
+              <p>Regularly used by:</p>
+              <ul>
+                <li>
+                  <Link to="https://2021.stateofjs.com/en-US/other-tools/#utilities">
+                    More than 83% of respondents to State of JS 2021.
+                  </Link>
+                </li>
+                <li>
+                  <Link to="https://2020.stateofjs.com/en-US/other-tools/#utilities">
+                    More than 70% of respondents to State of JS 2020.
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className={styles.ecosystemGridItem}>
+            <Link
+              to="https://github.com/prettier/prettier"
+              aria-label="Prettier on GitHub"
+            >
+              <img src="/images/github_grey.svg" alt="" />
+            </Link>
+            <div>
+              <p>
+                More than{" "}
+                <strong data-placeholder="dependent-github">8.9 million</strong>{" "}
+                dependent repositories on GitHub
+              </p>
+              <Link
+                className="button button--primary"
+                to="https://github.com/prettier/prettier/network/dependents"
+              >
+                Check Them Out
+              </Link>
+            </div>
+          </div>
+
+          <div className={styles.ecosystemGridItem}>
+            <Link
+              to="https://npmjs.com/package/prettier"
+              aria-label="Prettier on NPM"
+            >
+              <img src="/images/npm_grey.svg" alt="" />
+            </Link>
+            <div>
+              <p>
+                More than{" "}
+                <strong data-placeholder="dependent-npm">18.7k</strong>{" "}
+                dependent packages on npm
+              </p>
+              <Link
+                className="button button--primary"
+                to="https://www.npmjs.com/browse/depended/prettier"
+                aria-label="See every dependent npm packages"
+              >
+                See them all
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Home() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <div className="home">
+      <Layout
+        title="Prettier · Opinionated Code Formatter"
+        description={siteConfig.tagline}
+      >
+        <HomepageHeader />
+        <SyntaxSection />
+        <TldrSection />
+        <LanguagesSection />
+        <EditorSupportSection />
+        <UsersSection />
+      </Layout>
+    </div>
+  );
+}
@@ -0,0 +1,333 @@
+:global(.home) {
+  --ifm-navbar-shadow: none;
+
+  --color-tidelift: #f6914d;
+  --color-tidelift-darker: #e67c36;
+
+  --ifm-h2-font-size: 2.125rem;
+  --ifm-heading-font-weight: 500;
+  --ifm-heading-margin-top: 1.25rem;
+  --ifm-heading-margin-bottom: 2.75rem;
+
+  --ifm-list-margin: 0;
+  --ifm-list-left-padding: 0;
+}
+
+.heroBanner {
+  --ifm-color-primary: var(--color-yellow);
+  --ifm-color-primary-dark: var(--color-yellow-dark);
+  --ifm-color-secondary: var(--color-pink);
+  --ifm-color-secondary-dark: var(--color-pink-dark);
+
+  padding: 3rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding-bottom: 2.5rem;
+  }
+}
+
+.logoWrapperContainer {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+
+.logoWrapper > svg {
+  cursor: ew-resize;
+  height: auto;
+  max-width: calc(100vw - 30px);
+}
+
+.heroButtonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+@media screen and (max-width: 443px) {
+  .heroButtonContainer {
+    flex-direction: column;
+  }
+}
+
+.heroButton {
+  --ifm-button-color: var(--ifm-color-gray-900);
+}
+
+.tidelift {
+  --ifm-link-hover-decoration: none;
+  --ifm-link-hover-color: var(--ifm-color-gray-900);
+
+  background: var(--color-tidelift) url(/images/tidelift-small.png) 10px
+    no-repeat;
+  background-size: 24px;
+  color: var(--ifm-color-gray-900);
+  position: absolute;
+  top: 16px;
+  right: 0;
+  font-size: 12px;
+  border-radius: 14px 0 0 14px;
+  padding: 6px 14px 6px 44px;
+  z-index: 10;
+  font-weight: 500;
+  transition-property: color, background, border-color;
+  transition-duration: var(--ifm-button-transition-duration);
+  transition-timing-function: var(--ifm-transition-timing-default);
+}
+
+.tidelift:hover {
+  background-color: var(--color-tidelift-darker);
+}
+
+.syntaxSection {
+  --ifm-color-primary: var(--color-yellow);
+  --ifm-color-primary-dark: var(--color-yellow-dark);
+
+  background-color: var(--ifm-color-primary);
+  display: flex;
+  justify-content: center;
+}
+
+.syntaxLink {
+  --ifm-link-hover-color: var(--ifm-color-gray-900);
+  --ifm-container-width: 860px;
+  --ifm-container-width-xl: 860px;
+
+  color: var(--ifm-color-gray-900);
+  font-size: 1.25rem;
+  font-weight: bold;
+
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.sectionPadding {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.tldrSection {
+  --ifm-color-primary: var(--color-yellow);
+  --ifm-color-primary-dark: var(--color-yellow-dark);
+  --ifm-link-color: var(--ifm-color-primary);
+  --ifm-link-hover-color: var(--ifm-color-primary);
+
+  background-color: #182025;
+  color: var(--ifm-color-primary);
+}
+
+.tldrSectionInner {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: space-evenly;
+}
+
+.tldrSectionColumn {
+  display: flex;
+  flex-direction: column;
+}
+
+.tldrSection h2:before {
+  content: "# ";
+}
+
+.tldrSectionColumn ul li {
+  list-style: none;
+  list-style-position: inside;
+}
+
+.tldrSectionColumn li::before {
+  content: "* ";
+  vertical-align: sub;
+}
+
+.languageSection {
+  --ifm-color-primary: var(--color-pink);
+  --ifm-color-primary-dark: var(--color-pink-dark);
+  --ifm-link-color: var(--ifm-color-white);
+  --ifm-link-hover-color: var(--ifm-color-white);
+  color: var(--ifm-color-white);
+  background-color: var(--navbar-color);
+}
+
+.languageSection h2 {
+  color: var(--ifm-color-primary);
+}
+
+.languageSectionGrid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.languageSectionGrid > * {
+  flex: 1 1 auto;
+}
+
+.languageItem {
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 1em;
+}
+
+.languageItemImage {
+  width: 50px;
+  margin: 0 1.25rem;
+}
+
+.languageItemList {
+  list-style: none;
+  --ifm-paragraph-margin-bottom: 0;
+}
+
+.languageItemList li:first-of-type {
+  --ifm-link-color: var(--ifm-color-primary);
+  --ifm-link-hover-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.languageItemList li + li {
+  margin-bottom: 0.25rem;
+}
+
+.languageItem code,
+.editorItem code {
+  background-color: transparent;
+  border: none;
+}
+
+.editorSection {
+  --ifm-color-primary: #56b3b4;
+  --ifm-link-color: var(--ifm-color-white);
+  --ifm-link-hover-color: var(--ifm-color-white);
+  color: var(--ifm-color-white);
+  background-color: #182025;
+}
+
+.editorSection h2 {
+  color: var(--ifm-color-primary);
+}
+
+.editorSectionGrid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 3.75rem 1.25rem;
+}
+
+.editorSectionGrid > * {
+  flex: 0 1 262px;
+}
+
+.editorItem {
+  --ifm-heading-margin-top: 1.25rem;
+  --ifm-heading-margin-bottom: 0px;
+  --ifm-paragraph-margin-bottom: 0;
+
+  display: flex;
+  gap: 0.75rem;
+}
+
+.editorItemImage {
+  width: 100px;
+  height: 100px;
+}
+
+.editorSectionButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 3.75rem;
+
+  --ifm-font-color-base-inverse: var(--ifm-color-gray-1000);
+}
+
+.userSection {
+  --ifm-color-primary: #6f7b81;
+  --ifm-color-primary-dark: #637075;
+  --ifm-button-color: #1a2b34;
+  background-color: var(--navbar-color);
+}
+
+.userSection h2 {
+  color: var(--ifm-color-primary);
+}
+
+.userSectionGrid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.userItem {
+  display: flex;
+  align-items: center;
+  padding: 1em;
+  transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.userItem:hover {
+  transform: scale(1.2);
+}
+
+.userItemImage {
+  width: 200px;
+  max-height: 100px;
+}
+
+@media only screen and (max-width: 736px) {
+  .userItemImage {
+    max-height: 50px;
+    width: 100px;
+  }
+}
+
+.userSectionButtonContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.25rem;
+}
+
+.ecosystemGrid {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  gap: 1.5rem 1rem;
+}
+
+@media only screen and (max-width: 736px) {
+  .ecosystemGrid {
+    gap: 2rem 1rem;
+  }
+}
+
+.ecosystemGridItem {
+  display: grid;
+  grid-template-columns: auto 260px;
+  gap: 0.8rem;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #b0c4ce;
+  --ifm-link-color: #b0c4ce;
+  --ifm-link-hover-color: var(--ifm-color-white);
+  --ifm-list-left-padding: 2rem;
+  --ifm-paragraph-margin-bottom: 1rem;
+}
+
+.ecosystemGridItem img {
+  width: 80px;
+}
+
+.ecosystemGridItem li + li {
+  margin-top: 0.5rem;
+}
@@ -0,0 +1,63 @@
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Heading from "@theme/Heading";
+import Admonition from "@theme/Admonition";
+import styles from "./index.module.css";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+
+export default function Users() {
+  const { siteConfig } = useDocusaurusContext();
+  const users = siteConfig.customFields.users;
+
+  const showcase = users.map((user, i) => (
+    <div key={i} className={styles.logoItem}>
+      <Link to={user.infoLink}>
+        <img src={user.image} title={user.caption} />
+      </Link>
+    </div>
+  ));
+
+  return (
+    <Layout title="Who's using Prettier?">
+      <main className={clsx("margin-vert--xl", styles.main)}>
+        <div className="container">
+          <Heading as="h1" className="text--center">
+            Who’s Using This?
+          </Heading>
+
+          <Admonition
+            type="info"
+            title="Prettier is regularly used by:"
+            className="margin-vert--lg"
+          >
+            <ul>
+              <li>
+                <Link to="https://2021.stateofjs.com/en-US/other-tools/#utilities">
+                  More than <strong>83%</strong> of respondents to State of JS
+                  2021 (10282 developers out of 12360).
+                </Link>
+              </li>
+              <li>
+                <Link to="https://2020.stateofjs.com/en-US/other-tools/#utilities">
+                  More than <strong>70%</strong> of respondents to State of JS
+                  2020 (14880 developers out of 20974).
+                </Link>
+              </li>
+            </ul>
+          </Admonition>
+
+          <section>
+            <div className={styles.logoGrid}>{showcase}</div>
+            <div className="text--center margin-bottom--lg">
+              ...and{" "}
+              <Link to="https://www.npmjs.com/browse/depended/prettier">
+                many more projects
+              </Link>
+            </div>
+          </section>
+        </div>
+      </main>
+    </Layout>
+  );
+}
@@ -0,0 +1,31 @@
+.main {
+  --ifm-container-width: 990px;
+  --ifm-container-width-xl: 990px;
+}
+
+.logoGrid {
+  --min-item-size: 168px;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.logoGrid > * {
+  flex: 1 1 var(--min-item-size);
+}
+
+.logoItem,
+.logoItem > a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logoItem a {
+  padding: 20px;
+}
+
+.logoItem img {
+  max-height: 64px;
+  width: 128px;
+}
@@ -0,0 +1 @@
+prettier.io
@@ -6,3 +6,8 @@
 # Broken blog link
 /blog/2018/05/23/1.13.0.html    /blog/2018/05/27/1.13.0.html
 /blog/2023/07/05/3.1.0.html     /blog/2023/07/05/3.0.0.html
+
+# English language redirects
+/en         /
+/en/*       /:splat
+/docs/en/*  /docs/:splat
@@ -1,63 +0,0 @@
-/* "Copy" code block button, style from docusaurus v2 */
-
-.code-block-with-actions {
-  position: relative;
-}
-
-.code-block-actions {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-
-.code-block-copy-button {
-  width: 32px;
-  height: 32px;
-  border: 1px solid #dadde1;
-  border-radius: 6px;
-  display: flex;
-  transition: opacity 0.2s ease-in-out;
-  opacity: 0;
-  position: relative;
-  cursor: pointer;
-  color: #393a34;
-  background-color: #f6f8fa;
-}
-
-.code-block-with-actions:hover .code-block-copy-button {
-  opacity: 0.4;
-}
-
-.code-block-with-actions:hover .code-block-copy-button:hover {
-  opacity: 1;
-}
-
-.code-block-copy-button__icon {
-  fill: currentColor;
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  transition: 0.15s;
-}
-
-.code-block-copy-button__icon--copied {
-  color: #00d600;
-  opacity: 0;
-  transform: scale(0.33);
-}
-
-.code-block-copy-button--copied .code-block-copy-button__icon--copy {
-  opacity: 0;
-  transform: scale(0.33);
-}
-
-.code-block-copy-button--copied .code-block-copy-button__icon--copied {
-  transition-delay: 75ms;
-  transform: scale(1);
-  opacity: 1;
-}
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 93"><g fill="none" fill-rule="evenodd"><path fill="#56B3B4" fill-rule="nonzero" d="M92 46.5C92 72.181 71.405 93 46 93S0 72.181 0 46.5 20.595 0 46 0s46 20.819 46 46.5z"/><path fill="#000" d="M32.522 72.933s3.089.218 7.062-.131c1.61-.142 7.72-.74 12.288-1.74 0 0 5.57-1.187 8.55-2.282 3.117-1.146 4.814-2.118 5.578-3.496-.034-.282.235-1.283-1.203-1.884-3.676-1.537-7.94-1.26-16.375-1.438-9.355-.32-12.467-1.881-14.125-3.139-1.59-1.275-.79-4.804 6.021-7.913C43.75 49.255 57.2 46.2 57.2 46.2c-4.53-2.232-12.977-6.156-14.713-7.004-1.523-.743-3.96-1.862-4.488-3.216-.599-1.3 1.414-2.42 2.54-2.74 3.621-1.042 8.734-1.69 13.388-1.762 2.34-.037 2.719-.187 2.719-.187 3.228-.534 5.352-2.735 4.467-6.222-.795-3.56-4.986-5.65-8.97-4.926-3.75.681-12.791 3.3-12.791 3.3 11.175-.097 13.045.09 13.88 1.254.494.687-.223 1.63-3.204 2.116-3.244.528-9.99 1.164-9.99 1.164-6.47.383-11.027.409-12.394 3.294-.893 1.885.952 3.552 1.761 4.595 3.418 3.79 8.355 5.834 11.533 7.34 1.196.566 4.704 1.635 4.704 1.635-10.31-.565-17.747 2.59-22.11 6.225-4.933 4.55-2.75 9.974 7.358 13.313 5.97 1.973 8.932 2.9 17.838 2.1 5.246-.281 6.073-.113 6.125.316.073.604-5.827 2.105-7.437 2.568-4.098 1.179-14.84 3.558-14.894 3.57z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 93"><g fill="none" fill-rule="evenodd"><path fill="#56B3B4" fill-rule="nonzero" d="M92 46.5C92 72.181 71.405 93 46 93S0 72.181 0 46.5 20.595 0 46 0s46 20.819 46 46.5z"/><path fill="#182025" d="M32.522 72.933s3.089.218 7.062-.131c1.61-.142 7.72-.74 12.288-1.74 0 0 5.57-1.187 8.55-2.282 3.117-1.146 4.814-2.118 5.578-3.496-.034-.282.235-1.283-1.203-1.884-3.676-1.537-7.94-1.26-16.375-1.438-9.355-.32-12.467-1.881-14.125-3.139-1.59-1.275-.79-4.804 6.021-7.913C43.75 49.255 57.2 46.2 57.2 46.2c-4.53-2.232-12.977-6.156-14.713-7.004-1.523-.743-3.96-1.862-4.488-3.216-.599-1.3 1.414-2.42 2.54-2.74 3.621-1.042 8.734-1.69 13.388-1.762 2.34-.037 2.719-.187 2.719-.187 3.228-.534 5.352-2.735 4.467-6.222-.795-3.56-4.986-5.65-8.97-4.926-3.75.681-12.791 3.3-12.791 3.3 11.175-.097 13.045.09 13.88 1.254.494.687-.223 1.63-3.204 2.116-3.244.528-9.99 1.164-9.99 1.164-6.47.383-11.027.409-12.394 3.294-.893 1.885.952 3.552 1.761 4.595 3.418 3.79 8.355 5.834 11.533 7.34 1.196.566 4.704 1.635 4.704 1.635-10.31-.565-17.747 2.59-22.11 6.225-4.933 4.55-2.75 9.974 7.358 13.313 5.97 1.973 8.932 2.9 17.838 2.1 5.246-.281 6.073-.113 6.125.316.073.604-5.827 2.105-7.437 2.568-4.098 1.179-14.84 3.558-14.894 3.57z"/></g></svg>
@@ -1,57 +0,0 @@
-/* global ClipboardJS */
-
-"use strict";
-
-(function () {
-  const CONTAINER_CLASS_NAME = "code-block-with-actions";
-  const ACTIONS_CONTAINER_CLASS_NAME = "code-block-actions";
-  const COPY_BUTTON_CLASS_NAME = "code-block-copy-button";
-  const COPY_BUTTON_COPIED_CLASS_NAME = `${COPY_BUTTON_CLASS_NAME}--copied`;
-  const COPY_BUTTON_ICON_CLASS_NAME = `${COPY_BUTTON_CLASS_NAME}__icon`;
-  const COPY_BUTTON_COPY_ICON_CLASS_NAME = `${COPY_BUTTON_ICON_CLASS_NAME}--copy`;
-  const COPY_BUTTON_COPIED_ICON_CLASS_NAME = `${COPY_BUTTON_ICON_CLASS_NAME}--copied`;
-  const ARIA_LABEL = "Copy code to clipboard";
-  const ARIA_LABEL_COPIED = "Copied";
-
-  function init(codeBlock) {
-    const container = codeBlock.parentNode;
-    container.classList.add(CONTAINER_CLASS_NAME);
-
-    const actionsContainer = Object.assign(document.createElement("div"), {
-      className: ACTIONS_CONTAINER_CLASS_NAME,
-    });
-    const copyButton = Object.assign(document.createElement("button"), {
-      className: COPY_BUTTON_CLASS_NAME,
-      type: "button",
-      innerHTML:
-        `<svg class="${COPY_BUTTON_ICON_CLASS_NAME} ${COPY_BUTTON_COPY_ICON_CLASS_NAME}" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg>` +
-        `<svg class="${COPY_BUTTON_ICON_CLASS_NAME} ${COPY_BUTTON_COPIED_ICON_CLASS_NAME}" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg>`,
-    });
-    copyButton.setAttribute("aria-label", ARIA_LABEL);
-
-    new ClipboardJS(copyButton, { target: () => codeBlock }).on(
-      "success",
-      (event) => {
-        event.clearSelection();
-        copyButton.classList.add(COPY_BUTTON_COPIED_CLASS_NAME);
-        copyButton.setAttribute("aria-label", ARIA_LABEL_COPIED);
-        copyButton.disabled = true;
-
-        setTimeout(() => {
-          copyButton.classList.remove(COPY_BUTTON_COPIED_CLASS_NAME);
-          copyButton.setAttribute("aria-label", ARIA_LABEL);
-          copyButton.disabled = false;
-        }, 2000);
-      },
-    );
-
-    actionsContainer.appendChild(copyButton);
-    container.appendChild(actionsContainer);
-  }
-
-  window.addEventListener("load", () => {
-    for (const codeBlock of document.querySelectorAll("pre > code.hljs")) {
-      init(codeBlock);
-    }
-  });
-})();
@@ -1,30 +0,0 @@
-"use strict";
-
-if (location.hash.slice(1).startsWith(encodeURIComponent("{"))) {
-  location.pathname = "/playground/";
-}
-
-window.addEventListener("load", () => {
-  // We don't have access to a unique body css attribute for just the homepage
-  // so instead it is set on load. It's only really visible on a vertical overscroll
-  document.body.style.backgroundColor = "rgb(24, 32, 37)";
-
-  const logoWrapper = document.querySelector(".animatedLogoWrapper");
-  const logo = document.querySelector(".prettier-logo-wide");
-  const lastDash = logo.querySelector("g:last-of-type path:last-of-type");
-
-  function handleLogoDrag(event) {
-    logo.classList.add("rolling");
-    event.preventDefault();
-  }
-
-  logoWrapper.setAttribute("draggable", "true");
-  logoWrapper.addEventListener("touchstart", handleLogoDrag);
-  logoWrapper.addEventListener("dragstart", handleLogoDrag);
-
-  lastDash.addEventListener("animationend", (event) => {
-    if (/roll/u.test(event.animationName)) {
-      logo.classList.remove("rolling");
-    }
-  });
-});
@@ -1,611 +0,0 @@
-html body {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    Fira Sans,
-    Droid Sans,
-    Helvetica Neue,
-    sans-serif;
-
-  overflow-x: hidden;
-}
-
-em {
-  font-style: italic;
-}
-
-.mainContainer .wrapper a:hover,
-.mainContainer .wrapper a:focus,
-.inner .projectIntro a:hover,
-.inner .projectIntro a:focus {
-  text-decoration: underline;
-}
-
-.tidelift {
-  background: #f6914d url(/images/tidelift-small.png) 10px center no-repeat;
-  background-size: 24px;
-  color: #000000;
-  position: absolute;
-  margin-top: -15px;
-  right: 0;
-  font-size: 13px;
-  border-radius: 13px 0 0px 13px;
-  padding: 7px 15px 5px 45px;
-  z-index: 9999 !important;
-}
-
-/* Note: CSS on body bg-color for index page is set inside landing.js, not here */
-
-.post p a {
-  text-decoration: underline !important;
-}
-.post a {
-  font-weight: 600;
-}
-
-.animatedLogoWrapper > svg {
-  max-width: calc(100vw - 30px);
-  height: auto;
-  cursor: ew-resize;
-  margin-bottom: 30px;
-}
-
-@media screen and (max-width: 735px) {
-  footer .sitemap {
-    display: block;
-    margin-left: 20px;
-  }
-  footer .sitemap .nav-home {
-    margin: 0 auto;
-  }
-
-  footer .sitemap > div {
-    margin-bottom: 20px;
-  }
-
-  footer .sitemap > div h5 {
-    margin: 0;
-  }
-}
-
-.buttonGroup .button:not(:first-of-type) {
-  margin-left: -2px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.buttonGroup .button:not(:last-of-type) {
-  margin-right: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.button {
-  font-weight: 600;
-  font-size: 18px;
-  padding-top: 9px;
-  padding-bottom: 8px;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  border-radius: 8px;
-}
-
-.pluginRowBlock .button {
-  border-radius: 16px;
-}
-
-.pluginRowBlock .buttonWrapper:nth-of-type(1) .button {
-  background: #f8bc45;
-}
-.pluginRowBlock .buttonWrapper:nth-of-type(2) .button {
-  background: #c596c7;
-}
-.pluginRowBlock .buttonWrapper:nth-of-type(3) .button {
-  background: #5ab3b3;
-}
-
-.homeContainer {
-  background: #1a2b34;
-  padding-top: 30px;
-}
-
-.mainContainer.landingContainer {
-  padding: 0;
-}
-
-.productShowcaseSection {
-  background: #1a2b34;
-  padding-top: 50px;
-  padding-bottom: 50px;
-}
-
-.productShowcaseSection.lightBackground {
-  background: #182025;
-}
-
-.productShowcaseSection h2 {
-  text-align: left;
-  font-weight: 500;
-  margin-bottom: 1.5em;
-  font-size: 34px !important;
-}
-
-.productShowcaseSection h3 {
-  color: #f9f9f9 !important;
-  font-weight: 400;
-}
-
-.productShowcaseSection p,
-.productShowcaseSection span,
-.productShowcaseSection a,
-.productShowcaseSection code {
-  color: #f9f9f9 !important;
-  font-size: 14px;
-}
-
-.tldrSection h2,
-.tldrSection ul {
-  color: #f8bc45 !important;
-  padding: 0 !important;
-}
-
-.tldrSection h2::before {
-  content: "# ";
-}
-
-.mainContainer .tldrSection ul li {
-  list-style: none;
-  list-style-position: inside;
-  line-height: 1;
-}
-
-.mainContainer .tldrSection ul li a {
-  color: inherit !important;
-  font-size: inherit;
-}
-
-.tldrSection li::before {
-  content: "* ";
-  vertical-align: sub;
-}
-
-.languagesSection h2,
-.languagesSection .accented,
-.languagesSection .accented a {
-  color: #c596c7 !important;
-}
-
-.languagesSection .languageCategory ul {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-.languagesSection .languageCategory p,
-.languagesSection .languageCategory a {
-  font-size: 1rem;
-  padding: 0;
-}
-.languagesSection .languageCategory code {
-  font-size: 0.8rem;
-}
-
-.editorSupportSection h2 {
-  color: #5ab3b3 !important;
-}
-
-.editor {
-  padding: 0 20px 60px 0;
-  display: flex;
-  min-width: 262px;
-  flex: 1;
-  flex-grow: 0;
-  flex-basis: 22%;
-}
-
-.editor code {
-  white-space: nowrap;
-}
-
-.editorImage {
-  width: 100px;
-  height: 100px;
-}
-
-.editorInfo {
-  padding-left: 12px;
-  flex-shrink: 0;
-}
-
-.editorInfo .editorName {
-  margin-bottom: 0;
-  margin-top: 1em;
-}
-
-.productShowcaseSection code,
-.editorInfo code {
-  white-space: normal;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.editorInfo p {
-  line-height: 1.7;
-  padding: 0;
-}
-
-@media only screen and (min-width: 360px) and (max-width: 590px) {
-  .editor {
-    flex-direction: column;
-    min-width: 140px;
-    padding-right: 0;
-  }
-
-  .editorInfo {
-    padding-left: 0px !important;
-  }
-
-  .editorImage {
-    margin: 0;
-    width: 50px;
-    height: 50px;
-  }
-}
-
-@media only screen and (max-width: 736px) {
-  .editor {
-    padding-bottom: 30px;
-  }
-
-  .editorImage {
-    width: 75px;
-    height: 75px;
-  }
-}
-
-.getStartedSection h2 {
-  color: #e85f61 !important;
-}
-
-.getStartedSection {
-  text-align: left;
-}
-
-.getStartedSection--npm .yarnOnly {
-  display: none;
-}
-.getStartedSection:not(.getStartedSection--npm) .npmOnly {
-  display: none;
-}
-
-.getStartedSection .button {
-  border: 1px solid #e85f61;
-  color: #e85f61 !important;
-  line-height: 1em;
-}
-
-.getStartedSection .button.active {
-  background: #e85f61;
-  color: #1a2b34 !important;
-}
-
-.getStartedSection ol {
-  list-style: none;
-  color: #f9f9f9;
-  margin-top: 48px;
-  margin-left: 48px;
-}
-
-.getStartedSection ol li {
-  margin: 0 0 22px 0 !important;
-  min-height: 110px;
-  padding-left: 46px;
-  position: relative;
-}
-
-.getStartedSection ol li::before {
-  color: #e85f61;
-  font-size: 58px;
-  position: absolute;
-  left: -24px;
-  top: -44px;
-  width: 58px;
-  text-align: right;
-}
-
-.getStartedSection ol li:nth-of-type(1)::before {
-  content: "1.";
-}
-.getStartedSection ol li:nth-of-type(2)::before {
-  content: "2.";
-}
-.getStartedSection ol li:nth-of-type(3)::before {
-  content: "3.";
-}
-
-.decorativeRects {
-  min-width: 400px;
-  width: 400px;
-}
-
-@media screen and (max-width: 960px) {
-  .decorativeRects {
-    min-width: 300px;
-    width: 300px;
-  }
-}
-@media screen and (max-width: 875px) {
-  .decorativeRects {
-    display: none;
-  }
-}
-
-@media only screen and (max-width: 736px) {
-  .getStartedSection ol {
-    margin: 0 0 0 -12px !important;
-    padding: 0 !important;
-  }
-
-  .getStartedSection ol li::before {
-    font-size: 36px;
-    top: -22px;
-  }
-
-  .getStartedFlexContainer {
-    flex-wrap: wrap-reverse !important;
-  }
-}
-
-.getStartedFlexContainer pre {
-  overflow: hidden;
-}
-
-.getStartedSection code {
-  font-weight: 500;
-  font-size: 100%;
-  overflow-x: auto;
-}
-
-.getStartedSection .hljs {
-  background: transparent !important;
-  font-size: 130%;
-}
-
-.getStartedSteps {
-  overflow: auto;
-}
-
-.usersSection h2,
-.usersSection h3 {
-  color: #6f7b81 !important;
-}
-.usersSection a {
-  color: #f9f9f9 !important;
-}
-.usersSection a:hover {
-  color: white !important;
-}
-.usersSection .alignCenter {
-  display: flex;
-  align-items: center;
-}
-.usersSection p {
-  font-size: 1em;
-  margin: 4px;
-}
-
-.usersSection .button {
-  background: #6f7b81;
-  color: #1a2b34 !important;
-}
-
-.usersSection .user {
-  max-height: 100px;
-  width: 200px;
-  flex-grow: 1;
-  padding: 1em;
-}
-
-.usersSection .more-users {
-  margin-top: 20px;
-}
-
-@media only screen and (max-width: 736px) {
-  .usersSection .user {
-    max-height: 50px !important;
-    width: 100px !important;
-  }
-}
-
-.ecosystemSubHeader {
-  margin-top: 40px !important;
-  margin-bottom: 20px !important;
-}
-
-.ecosystemSubSection p {
-  padding-top: 0 !important;
-  font-size: 0.9em;
-  color: rgb(176, 196, 206) !important;
-  line-height: 1.2em !important;
-}
-
-.ecosystemSubSection ul,
-.ecosystemSubSection ul a {
-  color: rgb(176, 196, 206) !important;
-}
-
-.growOnHover {
-  transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-
-.growOnHover:hover {
-  transform: scale(1.2);
-}
-
-.mainContainer .wrapper .post h2 {
-  font-size: 2em;
-}
-
-.mainContainer .wrapper .post h3 {
-  font-size: 1.5em;
-  font-weight: 400;
-}
-
-.mainContainer .wrapper .post h4 {
-  font-size: 1.25em;
-  font-weight: 400;
-}
-
-pre {
-  overflow-x: auto;
-}
-
-@media only screen and (min-width: 736px) {
-  .mainContainer .wrapper .post .postHeader h1 {
-    font-size: 32px;
-  }
-}
-
-h1 a {
-  color: #24292e;
-}
-
-a {
-  color: #56b3b4;
-}
-
-.post p a {
-  text-decoration: inherit !important;
-}
-.post p a:hover {
-  text-decoration: underline !important;
-}
-.post a {
-  font-weight: inherit;
-}
-
-.post,
-.post-content {
-  font-size: 16px;
-}
-
-.post-meta {
-  float: left;
-  margin-right: 10px;
-  font-size: 14px;
-}
-
-.blogContainer .postHeader {
-  margin-bottom: 0;
-}
-
-.read-more {
-  margin-top: 10px;
-}
-
-.blogContainer .posts .post {
-  border-bottom: 1px solid #1b2b35;
-  border-radius: 0;
-}
-
-.mainContainer .wrapper .post h2,
-.mainContainer .wrapper .post h3 {
-  padding-bottom: 0.3em;
-  border-bottom: 1px solid #1b2b35;
-  margin-top: 14px;
-  margin-bottom: 16px;
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-.mainContainer .wrapper .post h4 {
-  font-size: 1.25em;
-  line-height: 24px;
-  font-weight: 500;
-  margin-bottom: 20px;
-  margin-top: 10px;
-}
-
-.mainContainer .wrapper .post h5 {
-  font-size: 1.125em;
-}
-
-.hljs {
-  padding: 16px;
-  overflow: auto;
-  font-size: 13.6px;
-  line-height: 1.45;
-  border-radius: 3px;
-  border-left-color: #eb5d5d;
-}
-
-.hljs,
-.hljs-subst {
-  color: #1b2b35;
-}
-
-.hljs-type,
-.hljs-string,
-.hljs-number,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-quote,
-.hljs-template-tag,
-.hljs-deletion,
-.hljs-title,
-.hljs-section {
-  color: #eb5d5d;
-}
-
-.hljs-built_in,
-.hljs-bullet,
-.hljs-code,
-.hljs-addition,
-.hljs-literal {
-  color: #56b3b4;
-}
-
-.hljs-keyword,
-.hljs-attribute,
-.hljs-selector-tag,
-.hljs-meta-keyword,
-.hljs-doctag,
-.hljs-name,
-.hljs-title,
-.hljs-section {
-  font-weight: normal;
-}
-
-.hljs-regexp,
-.hljs-symbol,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-link,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-comment {
-  color: #cda144;
-}
-
-.showcaseSection .logos img {
-  max-height: 64px;
-}
-
-/* DOCUSAURUS_CODE_TABS */
-.tabs {
-  border-top: none;
-}
-.nav-tabs {
-  border-bottom: none;
-}
-.tabs .nav-tabs > div {
-  padding: 4px 12px;
-}
-
-/* Syntax Section */
-.syntaxLink:hover {
-  text-decoration: underline;
-}
@@ -170,10 +170,10 @@
    ></script>
    <link rel="stylesheet" href="/separate-css/playground.css" />

-    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <!-- Google tag (gtag.js) -->
    <script
      async
-      src="https://www.googletagmanager.com/gtag/js?id=UA-111350464-1"
+      src="https://www.googletagmanager.com/gtag/js?id=G-T57CP1SG02"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
@@ -181,7 +181,7 @@
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
-      gtag("config", "UA-111350464-1");
+      gtag("config", "G-T57CP1SG02");
    </script>
  </head>

@@ -1,7 +1,6 @@
 ---
-id: version-stable-api
+id: api
 title: API
-original_id: api
 ---

 If you want to run Prettier programmatically, check this page out.
@@ -178,6 +177,10 @@ await format("lodash ( )", {
 // -> "_();\n"
 ```

-> Note: Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using [jscodeshift](https://github.com/facebook/jscodeshift) if you need codemods.
+:::note
+
+Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using [jscodeshift](https://github.com/facebook/jscodeshift) if you need codemods.
+
+:::

 As part of the removed Custom parser API, it was previously possible to pass a path to a module exporting a `parse` function via the `--parser` option. Use the `--plugin` CLI option or the `plugins` API option instead to [load plugins](plugins.md#using-plugins).
@@ -1,7 +1,6 @@
 ---
-id: version-stable-browser
+id: browser
 title: Browser
-original_id: browser
 ---

 Run Prettier in the browser using its **standalone** version. This version doesn’t depend on Node.js. It only formats the code and has no support for config files, ignore files, CLI usage, or automatic loading of plugins.
@@ -19,7 +18,7 @@ Required options:

 - **[`parser`](options.md#parser) (or [`filepath`](options.md#file-path))**: One of these options has to be specified for Prettier to know which parser to use.

- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in <https://unpkg.com/browse/prettier@3.4.2/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.
+- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource-options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in [https://unpkg.com/browse/prettier@3.4.2/plugins](https://unpkg.com/browse/prettier@3.4.2/plugins). Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.

  You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.

@@ -1,7 +1,6 @@
 ---
-id: version-stable-cli
+id: cli
 title: CLI
-original_id: cli
 ---

 Use the `prettier` command to run Prettier from the command line.
@@ -10,7 +9,11 @@ Use the `prettier` command to run Prettier from the command line.
 prettier [options] [file/dir/glob ...]
 ```

-> To run your locally installed version of Prettier, prefix the command with `npx` or `yarn` (if you use Yarn), i.e. `npx prettier --help`, or `yarn prettier --help`.
+:::note
+
+To run your locally installed version of Prettier, prefix the command with `npx` or `yarn` (if you use Yarn), i.e. `npx prettier --help`, or `yarn prettier --help`.
+
+:::

 To format a file in-place, use `--write`. (Note: This overwrites your files!)

@@ -30,9 +33,17 @@ A more complicated example:
 prettier docs package.json "{app,__{tests,mocks}__}/**/*.js" --write --single-quote --trailing-comma all
 ```

-> Don’t forget the **quotes** around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.
+:::warning

-> It’s better to use a [configuration file](configuration.md) for formatting options like `--single-quote` and `--trailing-comma` instead of passing them as CLI flags. This way the Prettier CLI, [editor integrations](editors.md), and other tooling can all know what options you use.
+Don’t forget the **quotes** around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.
+
+:::
+
+:::note
+
+It’s better to use a [configuration file](configuration.md) for formatting options like `--single-quote` and `--trailing-comma` instead of passing them as CLI flags. This way the Prettier CLI, [editor integrations](editors.md), and other tooling can all know what options you use.
+
+:::

 ## File patterns

@@ -223,7 +234,11 @@ Running Prettier without `--cache` will delete the cache.

 Also, since the cache file is stored in `./node_modules/.cache/prettier/.prettier-cache`, so you can use `rm ./node_modules/.cache/prettier/.prettier-cache` to remove it manually.

-> Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
+:::warning
+
+Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
+
+:::

 ## `--cache-location`

@@ -1,7 +1,6 @@
 ---
-id: version-stable-comparison
+id: comparison
 title: Prettier vs. Linters
-original_id: comparison
 ---

 ## How does it compare to ESLint/TSLint/stylelint, etc.?
@@ -1,7 +1,6 @@
 ---
-id: version-stable-configuration
+id: configuration
 title: Configuration File
-original_id: configuration
 ---

 You can configure Prettier via (in order of precedence):
@@ -172,7 +171,7 @@ You can also switch to the `flow` parser instead of the default `babel` for .js

 ## Configuration Schema

-If you’d like a JSON schema to validate your configuration, one is available here: <https://json.schemastore.org/prettierrc>.
+If you’d like a JSON schema to validate your configuration, one is available here: https://json.schemastore.org/prettierrc.

 ## EditorConfig

@@ -1,7 +1,6 @@
 ---
-id: version-stable-editors
+id: editors
 title: Editor Integration
-original_id: editors
 ---

 To get the most out of Prettier, it’s recommended to run it from your editor.