### Install and Start Docusaurus for Local Testing

Source: https://github.com/facebook/docusaurus/blob/main/admin/testing-changes-on-Docusaurus-itself.md

Navigate to your Docusaurus repository, install dependencies, change to the website directory, and start the development server.

```bash
cd /path/to/docusaurus-repo
pnpm install
cd website
pnpm start
```

--------------------------------

### Install Docusaurus from Local Repository in package.json (Initial)

Source: https://github.com/facebook/docusaurus/blob/main/admin/local-third-party-project-testing.md

An example package.json snippet showing typical Docusaurus dependencies before linking a local version.

```json
{
  "dependencies": {
    "@docusaurus/core": "^2.0.0-beta.8",
    "@docusaurus/preset-classic": "^2.0.0-beta.8"
  }
}
```

--------------------------------

### Install Dependencies with npm in a Nested Context

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__fixtures__/multiple.md

This example shows how to install project dependencies using npm within a nested HTML element. The plugin will convert this to a yarn command.

```bash
npm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/facebook/docusaurus/blob/main/website/README.md

Run this command in the root of the repository to install project dependencies.

```bash
pnpm install
```

--------------------------------

### Java Hello World Example

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/code-block-tests.mdx

A basic 'Hello, World!' program in Java. This is a standard example for demonstrating Java syntax.

```java
class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}
```

--------------------------------

### Start Local Development Server

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/README.md

Starts a local development server for live previewing changes. Changes are reflected without server restart.

```bash
yarn start
```

--------------------------------

### Installing and Starting Docusaurus with Canary Release

Source: https://github.com/facebook/docusaurus/blob/main/website/community/4-canary.mdx

Provides the commands to install dependencies after updating package.json and to start the Docusaurus development server. This step is crucial for applying the canary release changes.

```bash
npm install
npm start
```

--------------------------------

### Clean, Build, and Install Packages

Source: https://github.com/facebook/docusaurus/blob/main/admin/publish-legacy.md

Clean the project, install dependencies, and build all packages from a clean state using yarn.

```shell
yarn clear
yarn install
```

--------------------------------

### Install Live Codeblock Theme

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-live-codeblock/README.md

Install the @docusaurus/theme-live-codeblock package using npm or yarn.

```bash
npm i @docusaurus/theme-live-codeblock # or yarn add @docusaurus/theme-live-codeblock
```

--------------------------------

### Install Docusaurus from Local Repository in package.json

Source: https://github.com/facebook/docusaurus/blob/main/admin/local-third-party-project-testing.md

Example of how a package.json file looks after adding a local Docusaurus package. The core package is linked via a relative path.

```json
{
  "dependencies": {
    "@docusaurus/core": "../../local/docusaurus/packages/docusaurus",
    "@docusaurus/preset-classic": "^2.0.0-beta.8"
  }
}
```

--------------------------------

### Start Docusaurus Development Server

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/intro.mdx

Navigate to your new site's directory and run this command to start the local development server. The site will be available at http://localhost:3000/.

```bash
cd my-website
npm run start
```

--------------------------------

### Generate Release Examples

Source: https://github.com/facebook/docusaurus/blob/main/admin/publish.md

Run this command on a separate branch after a major/minor/patch release to update examples. Push the branch to open a PR for merging.

```bash
git co -b slorber/release-v3.11.0-examples
pnpm examples:generate
git push
```

--------------------------------

### Start Local Development Server

Source: https://github.com/facebook/docusaurus/blob/main/packages/create-docusaurus/templates/shared/README.md

Starts a local development server for live previewing changes. The server automatically reloads the browser when code is modified.

```bash
npm run start
```

--------------------------------

### Bash command with --save

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/releases/3.0/index.mdx

Example of installing a package using npm with the --save flag for bash syntax highlighting.

```bash
npm install --save some-package
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/README.md

Installs all the necessary dependencies for the Docusaurus project.

```bash
yarn
```

--------------------------------

### Install npm package

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__fixtures__/conversion-test.md

Converts an npm package installation command to its yarn equivalent.

```bash
npm install package
```

```bash
yarn add package
```

--------------------------------

### Install @docusaurus/mdx-loader

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-mdx-loader/README.md

Install the @docusaurus/mdx-loader package using yarn.

```sh
yarn add @docusaurus/mdx-loader
```

--------------------------------

### Initialize Docusaurus with npm

Source: https://github.com/facebook/docusaurus/blob/main/packages/create-docusaurus/README.md

Use this command to start a new Docusaurus project using npm.

```bash
npm init docusaurus
```

--------------------------------

### Install @docusaurus/lqip-loader

Source: https://github.com/facebook/docusaurus/blob/main/packages/lqip-loader/README.md

Install the LQIP loader as a development dependency using npm.

```bash
npm install --save-dev @docusaurus/lqip-loader
```

--------------------------------

### Install Mermaid Theme Package

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-mermaid/README.md

Install the mermaid theme package using npm or yarn.

```bash
npm i @docusaurus/theme-mermaid
# or
yarn add @docusaurus/theme-mermaid
```

--------------------------------

### Example CSS Copyright Header

Source: https://github.com/facebook/docusaurus/blob/main/packages/stylelint-copyright/README.md

An example of the expected copyright header format in a CSS file.

```css
/*
 * Copyright ...
 * ...
 */
```

--------------------------------

### Start Verdaccio Local Server

Source: https://github.com/facebook/docusaurus/blob/main/admin/local-third-party-project-testing.md

Manually start the Verdaccio local npm registry server. This command specifies the listening port and configuration file.

```bash
npx verdaccio --listen 4873 --config admin/verdaccio.yaml
```

--------------------------------

### Install Package with npm

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__fixtures__/syntax-not-properly-set.md

Use this snippet to install a Docusaurus plugin using npm. Ensure npm is installed and configured in your environment.

```npm2yarn
npm install --save docusaurus-plugin-name

```

```bash
npm install --save docusaurus-plugin-name

```

```shell
npm install --save docusaurus-plugin-name

```

--------------------------------

### Install Docusaurus Globally with npm

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__fixtures__/import-tabs-below.md

Installs the Docusaurus CLI globally using npm. This is a prerequisite for using Docusaurus.

```bash
$ npm install --global docusaurus
```

--------------------------------

### Import and Render Contributing Guide

Source: https://github.com/facebook/docusaurus/blob/main/website/community/3-contributing.mdx

This snippet imports the main contributing guide from a separate Markdown file and renders it within the current page. It's used to centralize contribution information.

```mdx
import Contributing from "@site/../CONTRIBUTING.md"

<Contributing />
```

--------------------------------

### Initialize Docusaurus with Yarn

Source: https://github.com/facebook/docusaurus/blob/main/packages/create-docusaurus/README.md

Use this command to start a new Docusaurus project using Yarn.

```bash
yarn create docusaurus
```

--------------------------------

### Release Cooldown Configuration Examples

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/releases/3.10/index.mdx

Examples of configuring release cooldowns across different package managers to delay updates and mitigate risks from compromised dependencies.

```yaml
# npm v11.10+ - .npmrc
min-release-age=7

# pnpm v10.16+ - pnpm-workspace.yaml
minimumReleaseAge: 10080

# Yarn v4.10+ - .yarnrc.yml
npmMinimalAgeGate: "7d"

# Bun v1.3+ - bunfig.toml
[install]
minimumReleaseAge = 604800
```

--------------------------------

### Start Docusaurus Website Development

Source: https://github.com/facebook/docusaurus/blob/main/AGENTS.md

Starts the Docusaurus website in development mode, enabling live reloading and other development features.

```bash
pnpm start:website
```

--------------------------------

### Start Site in a Specific Locale

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-extras/translate-your-site.mdx

Use this command to run the development server for a single locale. This is useful during development to focus on translating and testing one language at a time.

```bash
npm run start -- --locale fr
```

--------------------------------

### HTML Image Tag Examples

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/markdown-tests-md.md

Shows examples of using the img HTML tag with both closed and unclosed tags.

```html
#### Closed image tag:

<img src="/img/docusaurus.png"/>

<br/>

#### Unclosed image tag:

<img src="/img/docusaurus.png">
```

--------------------------------

### Initialize Docusaurus with npx

Source: https://github.com/facebook/docusaurus/blob/main/packages/create-docusaurus/README.md

Use this command to start a new Docusaurus project using npx, ensuring the latest version is used.

```bash
npx create-docusaurus@latest
```

--------------------------------

### Install Docusaurus Plugin with npm

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__fixtures__/plugin.md

Use this command to install a Docusaurus plugin as a dependency for your project.

```bash
npm install --save docusaurus-plugin-name
```

--------------------------------

### Install Docusaurus Classic Theme

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/README.md

Install the classic theme using npm or yarn. This is the first step to applying the theme to your Docusaurus project.

```bash
npm i @docusaurus/theme-classic
# or
yarn add @docusaurus/theme-classic
```

--------------------------------

### Install Docusaurus with npm

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__fixtures__/import-tabs-above.md

This snippet shows the command to install Docusaurus globally using npm. It is automatically converted to its yarn equivalent by the plugin.

```bash
  $ npm install --global docusaurus
```

--------------------------------

### Install Docusaurus Faster Package

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/releases/3.6/index.mdx

Install the new package to begin adopting the faster infrastructure. This command works for both npm and yarn.

```bash
npm install @docusaurus/faster
```

--------------------------------

### Simple Variable Declaration

Source: https://github.com/facebook/docusaurus/blob/main/admin/test-bad-package/README.mdx

A basic example demonstrating a variable declaration in JavaScript.

```javascript
const age = 42;
```

--------------------------------

### Enable Docusaurus Faster

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/releases/3.8/index.mdx

Turn on the experimental Docusaurus Faster options to improve build performance. Ensure you have installed the `@docusaurus/faster` dependency.

```js
const config = {
  future: {
    // highlight-next-line
    experimental_faster: true,
  },
};
```

--------------------------------

### Markdown Definition List Syntax

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus/src/server/__tests__/__fixtures__/docs/foo/baz.md

Provides examples of definition lists in Markdown, including standard and compact styles, and how to include code within definitions.

```markdown
Term 1

: Definition 1 with lazy continuation.

Term 2 with _inline markup_

: Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

_Compact style:_

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b
```

--------------------------------

### Install Dev Dependencies

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/2023/09-22-upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing/index.mdx

Install the necessary development dependencies for the visual regression testing workflow. This includes the Argos CLI, Playwright integration, Playwright test runner, and Cheerio for HTML parsing.

```bash
yarn add -D @argos-ci/cli @argos-ci/playwright @playwright/test cheerio
```

--------------------------------

### Markdown Link to URL Example

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/markdown-features.mdx

Standard Markdown syntax for creating links to external URLs.

```md
Let's see how to [Create a page](/create-a-page).
```

--------------------------------

### Using useBaseUrl for Image Source

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_blog tests/2021-10-08-blog-post-mdx-require-feed-tests.mdx

Demonstrates how to use the `useBaseUrl` hook to get the correct path for an image asset within Docusaurus.

```javascript
import useBaseUrl from '@docusaurus/useBaseUrl';

<img src={useBaseUrl('/img/docusaurus.png')} />
```

--------------------------------

### Display External URL with BrowserWindow

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/releases/3.9/index.mdx

This example demonstrates how to use the BrowserWindow component to display a URL, useful for showcasing web interfaces or external content within the documentation. The bodyStyle is set to have no padding and a font size of 0 to ensure the content within the browser window is displayed as intended.

```mdx
<BrowserWindow
  url="http://localhost:3000/"
  bodyStyle={{padding: 0, fontSize: 0}}>
  <>![Algolia DocSearch v4 - Ask AI screenshot](./img/askai.png)</>
</BrowserWindow>
```

--------------------------------

### Implement Experimental VCS API with Hardcoded Data

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/releases/3.10/index.mdx

This example shows how to implement the experimental VCS API using hardcoded data for file creation and last update information. It's useful for development and testing.

```typescript
export default {
  future: {
    experimental_vcs: {
      initialize: ({siteDir}) => {
        // You can initialize and cache VCS data here, if needed
      },
      getFileCreationInfo: async (filePath: string) => {
        return {timestamp: 1490997600000, author: 'Slash'};
      },
      getFileLastUpdateInfo: async (filePath: string) => {
        return {timestamp: 1490997600000, author: 'Slash'};
      },
    },
  },
};
```

--------------------------------

### Test Build and Website Initialization

Source: https://github.com/facebook/docusaurus/blob/main/admin/publish-legacy.md

Build all packages, publish them to a local Verdaccio registry, and initialize a new D2 skeleton website using these local packages. This step is optional.

```shell
yarn test:build:website
```

--------------------------------

### Markdown Heading Example

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/markdown-features.mdx

Standard Markdown syntax for creating headings. The number of '#' symbols determines the heading level.

```md
## Headings

My text
```

--------------------------------

### Markdown Link to Relative File Example

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/markdown-features.mdx

Creates a link to another Markdown file within the project using a relative path.

```md
Let's see how to [Create a page](./create-a-page.mdx).
```

--------------------------------

### Markdown Admonition Examples

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/markdown-features.mdx

Creates callout boxes with different types (tip, danger) and custom titles using special ::: syntax.

```md
:::tip[My tip]

Use this awesome feature option

:::

:::danger[Take care]

This action is dangerous

:::
```

--------------------------------

### F# Hello World Entry Point

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/code-block-tests.mdx

An F# script with an entry point to print 'Hello, World!', using block and next-line highlighting.

```fsharp
(* highlight-start *)
[<EntryPoint>]
(* highlight-end *)
let main _ =
    // highlight-next-line
    printfn "Hello, World!"
    0
```

--------------------------------

### Initialize Docusaurus Site

Source: https://github.com/facebook/docusaurus/blob/main/README.md

Use the initialization CLI to create a new Docusaurus site. This command sets up the basic structure for your project website.

```bash
npm init docusaurus@latest
```

--------------------------------

### Serve Production Build Locally

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/deploy-your-site.mdx

Use this command to test your production build locally before deploying. It serves the contents of the `build` folder at http://localhost:3000/.

```bash
npm run serve
```

--------------------------------

### Initialize Docusaurus Project

Source: https://github.com/facebook/docusaurus/blob/main/examples/README.md

Use this command to initialize a new Docusaurus project with a specified template. Replace `<templateName>` with your desired template name.

```bash
npx @docusaurus/init@latest init examples/<templateName> <templateName>
```

--------------------------------

### Quoted Admonition Example

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_docs tests/tests/admonitions.mdx

Illustrates how admonitions can be nested within blockquotes. This example shows a basic admonition within a quote.

```mdx
> :::caution There be dragons
> 
> This is the admonition content
> 
> :::
> 
> > :::caution There be dragons
> > 
> > This is the admonition content
> > 
> > :::
```

--------------------------------

### Serve Built Docusaurus Website Locally

Source: https://github.com/facebook/docusaurus/blob/main/AGENTS.md

Serves the production-ready built website locally for testing and review.

```bash
pnpm serve:website
```

--------------------------------

### Test Website in Dev/Prod Mode

Source: https://github.com/facebook/docusaurus/blob/main/admin/publish-legacy.md

Navigate to the test-website directory and test the website in development and production modes.

```shell
cd test-website
yarn start
yarn build
yarn serve
```

--------------------------------

### Install Docusaurus Globally

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__fixtures__/sync.md

Installs the Docusaurus CLI globally on your system. This command is useful for managing Docusaurus projects across different directories.

```bash
npm install --global docusaurus
```

--------------------------------

### Build Static Website

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/README.md

Generates the static content for the website into the 'build' directory, ready for hosting.

```bash
yarn build
```

--------------------------------

### Build and Publish Packages with Lerna

Source: https://github.com/facebook/docusaurus/blob/main/admin/publish-legacy.md

Build all necessary packages and then use Lerna to publish a new version. The `--force-publish` and `--exact` flags are important for a clean release.

```sh
yarn build:packages
yarn lerna publish  --force-publish --exact 2.0.0-beta.0
```

--------------------------------

### Fortran Hello World Program

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/code-block-tests.mdx

A Fortran program to print 'Hello, World!', showcasing block and next-line highlighting.

```fortran
! highlight-start
program hello
! highlight-end
  implicit none
  ! highlight-next-line
  print *, "Hello, World!"
end program hello
```

--------------------------------

### Install Local Docusaurus Packages with pnpm

Source: https://github.com/facebook/docusaurus/blob/main/admin/local-third-party-project-testing.md

Build and install local Docusaurus packages within the Docusaurus repository itself using pnpm. This step is necessary before linking to an external project.

```bash
cd /path/to/local/docusaurus
pnpm install
```

--------------------------------

### Create a Blog Post

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/create-a-blog-post.mdx

Create a file for your blog post in the `blog/` directory. This markdown file includes front matter for metadata and the post content.

```md
---
slug: greetings
title: Greetings!
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
tags: [greetings]
---

Congratulations, you have made your first post!

Feel free to play around and edit this post as much as you like.
```

--------------------------------

### Install npm2yarn Remark Plugin

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/README.md

Install the remark plugin using npm. This is a remark plugin, not a Docusaurus plugin, and needs to be configured within your Docusaurus project's remarkPlugins.

```bash
npm install @docusaurus/remark-plugin-npm2yarn
```

--------------------------------

### IdealImageLegacy Media Component States

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/MediaWithDefaults/README.md

Demonstrates the MediaWithDefaults component with various 'icon' prop values to represent different states. Includes LQIP placeholder configuration.

```javascript
const lqip =
  'data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAA4DASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUG/8QAIRAAAQQDAAEFAAAAAAAAAAAAAQIDBREABAYhEjEyQVH/xAAUAQEAAAAAAAAAAAAAAAAAAAAE/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQACIRH/2gAMAwEAAhEDEQA/AMJ2DG+7Dw0nz8gsx+uyhlxnWdLakOlfzpIF3aRf1WT5t96P5+N1ug9Tu7ZWS8q1gG6B8H2FDz+YxhjUrEOdZ//Z';

const sqip =
  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4774 3024'%3e%3cfilter id='b'%3e%3cfeGaussianBlur stdDeviation='12' /%3e%3c/filter%3e%3cpath fill='%23515a57' d='M0 0h4774v3021H0z'/%3e%3cg filter='url(%23b)' transform='translate(9.3 9.3) scale(18.64844)' fill-opacity='.5'%3e%3cellipse fill='whitefef' rx='1' ry='1' transform='matrix(74.55002 60.89891 -21.7939 26.67923 151.8 104.4)'/%3e%3cellipse fill='black80c' cx='216' cy='49' rx='59' ry='59'/%3e%3cellipse fill='black60e' cx='22' cy='60' rx='46' ry='89'/%3e%3cellipse fill='%23ffebd5' cx='110' cy='66' rx='42' ry='28'/%3e%3cellipse fill='whiteff9' rx='1' ry='1' transform='rotate(33.3 -113.2 392.6) scale(42.337 17.49703)'/%3e%3cellipse fill='%23031f1e' rx='1' ry='1' transform='matrix(163.4651 -64.93326 6.77862 17.06471 111 16.4)'/%3e%3cpath fill='whitefea' d='M66 74l9 39 16-44z'/%3e%3cellipse fill='%23a28364' rx='1' ry='1' transform='rotate(-32.4 253.2 -179) scale(30.79511 43.65381)'/%3e%3cpath fill='%231a232c' d='M40 139l61-57 33 95z'/%3e%3cpath fill='%230a222b' d='M249.8 153.3l-48.1-48 32.5-32.6 48.1 48z'/%3e%3c/g%3e%3c/svg%3e";
<table>
  <tbody>
    <tr>
      <th align="left" width="100">
        load
      </th>
      <td>
        <MediaWithDefaults
          width={3500}
          height={2095}
          placeholder={{lqip: lqip}}
          src="andre-spieker-238-unsplash.jpg"
          style={{maxWidth: 200}}
          icon={'load'}
        />
      </td>
      <th align="left" width="100">
        noicon
      </th>
      <td>
        <MediaWithDefaults
          width={3500}
          height={2095}
          placeholder={{lqip: lqip}}
          src="andre-spieker-238-unsplash.jpg"
          style={{maxWidth: 200}}
          icon={'noicon'}
        />
      </td>
    </tr>
    <tr>
      <th align="left">loading</th>
      <td>
        <MediaWithDefaults
          width={3500}
          height={2095}
          placeholder={{lqip: lqip}}
          src="andre-spieker-238-unsplash.jpg"
          style={{maxWidth: 200}}
          icon={'loading'}
        />
      </td>
      <th align="left">offline</th>
      <td>
        <MediaWithDefaults
          width={3500}
          height={2095}
          placeholder={{lqip: lqip}}
          src="andre-spieker-238-unsplash.jpg"
          style={{maxWidth: 200}}
          icon={'offline'}
        />
      </td>
    </tr>
    <tr>
      <th align="left">loaded</th>
      <td>
        <MediaWithDefaults
          width={3500}
          height={2095}
          placeholder={{lqip: lqip}}
          src="andre-spieker-238-unsplash.jpg"
          style={{maxWidth: 200}}
          icon={'loaded'}
        />
      </td>
      <th align="left">error</th>
      <td>
        <MediaWithDefaults
          width={3500}
          height={2095}
          placeholder={{lqip: lqip}}
          src="andre-spieker-238-unsplash.jpg"
          style={{maxWidth: 200}}
          icon={'error'}
        />
      </td>
    </tr>
  </tbody>
</table>;
```

--------------------------------

### Live React Clock Example

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-live-codeblock/README.md

A functional React component demonstrating a live updating clock within a Docusaurus page. This example requires React's useState and useEffect hooks.

```jsx
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
```

--------------------------------

### Import README as MDX

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/index.mdx

Shows how to import a README file (assuming it's an MDX file) into an MDX page.

```mdx
import Readme from "../README.mdx"

<Readme />
```

--------------------------------

### Install Docusaurus from Verdaccio Local Registry

Source: https://github.com/facebook/docusaurus/blob/main/admin/local-third-party-project-testing.md

Install a specific version of Docusaurus from a local Verdaccio registry. Ensure the Verdaccio service is running and the version number reflects the latest published local version.

```bash
pnpm_config_registry="http://localhost:4873" pnpm install @docusaurus/core@"2.0.0-beta.8.NEW"
```

--------------------------------

### Initialize docusaurus project

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__fixtures__/conversion-test.md

Converts npm commands for initializing a docusaurus project to their yarn equivalents.

```bash
npm init docusaurus
```

```bash
yarn create docusaurus
```

```bash
npm init docusaurus@latest my-website classic
```

```bash
yarn create docusaurus@latest my-website classic
```

--------------------------------

### Import MDX Partial

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/index.mdx

Demonstrates how to import and render an MDX partial component within another MDX file.

```mdx
import PagePartial from "./_pagePartial.mdx"

<PagePartial />
```

--------------------------------

### Mermaid Mindmap diagram

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/releases/3.0/index.mdx

Example of a mindmap diagram rendered using Mermaid syntax.

```mermaid
mindmap
  root((mindmap))
    Research
      Creative techniques
      Strategic planning
      Argument mapping
    Tools
      Pen and paper
      Mermaid
```

--------------------------------

### Another Basic Text Directive

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-mdx-loader/src/remark/unusedDirectives/__tests__/__fixtures__/textDirectives.md

A standalone text directive, similar to the first example.

```markdown
Simple:textDirective5
```

--------------------------------

### Minimal GitHub Actions Workflow for Argos CI

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/2023/09-22-upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing/index.mdx

This YAML configuration sets up a GitHub Actions workflow that runs on push to main and pull requests targeting main. It checks out code, sets up Node.js, installs dependencies, installs Playwright browsers, builds the Docusaurus site, takes screenshots using Playwright, and uploads them to Argos.

```yaml
name: Argos CI Screenshots

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  take-screenshots:
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository code
        uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: current

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Install Playwright browsers
        run: yarn playwright install --with-deps chromium

      - name: Build the website
        run: yarn docusaurus build

      - name: Take screenshots with Playwright
        run: yarn playwright test

      - name: Upload screenshots to Argos
        run: yarn argos upload ./screenshots
```

--------------------------------

### Add Metadata to Markdown Files

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/2018/04-30-How-I-Converted-Profilo-To-Docusaurus.mdx

Example of metadata to be added to Markdown files for Docusaurus documentation.

```markdown
---
id: architecture
title: Architecture
sidebar_label: Architecture
---
```

--------------------------------

### Admonition Alias Example

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx

Illustrates using an admonition alias like 'important' which defaults to an 'Important' title.

```mdx
:::important

Admonition alias `:::important` should have Important title

:::
```

--------------------------------

### Using require for Site-Level Image Source

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_blog tests/2021-10-08-blog-post-mdx-require-feed-tests.mdx

Illustrates using `require` with an alias (`@site`) to reference an image file located at the site level.

```javascript
<img src={require('@site/static/img/docusaurus.png').default} />
```

--------------------------------

### Exporting a Constant

Source: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/just-content.md

This snippet shows a simple JavaScript export statement. It is a basic example of module export.

```javascript
export const c = 1;
```

--------------------------------

### Build Your Docusaurus Site for Production

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/deploy-your-site.mdx

Run this command to generate static HTML, JavaScript, and CSS files for your Docusaurus site. The output is placed in the `build` folder.

```bash
npm run build
```

--------------------------------

### Indented Admonition Example

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_docs tests/tests/admonitions.mdx

Demonstrates how admonitions can be indented within lists or other block elements. This syntax is compatible with v2.

```mdx
:::info Important Considerations

For better experience, try to keep the upgrade experience smooth.

:::


  :::caution Warning

  Scaling up a cluster may cause several minutes of downtime. Please exercise caution.

  :::
```

--------------------------------

### Create a React Page

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/create-a-page.mdx

Create a React component file in `src/pages` to generate a new page. The component should return JSX wrapped in a Docusaurus `Layout` component.

```jsx
import React from 'react';
import Layout from '@theme/Layout';

export default function MyReactPage() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>This is a React page</p>
    </Layout>
  );
}
```

--------------------------------

### VB.NET HashSet Initialization

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/code-block-tests.mdx

VB.NET code to initialize a HashSet with string values, demonstrating next-line and block highlighting.

```vbnet
' highlight-next-line
Dim languages As New HashSet(Of String) From {
    "C#",
    "Visual Basic",
    _ ' highlight-start
    "F#",
    "PowerShell",
    "TypeScript"
    _' highlight-end
}
```

--------------------------------

### Mermaid Architecture Diagram

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/diagrams.mdx

Example of an architecture diagram using Mermaid syntax. Ensure Mermaid is enabled in your Docusaurus configuration.

```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

--------------------------------

### Markdown Heading ID Example

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/markdown-features.mdx

Assigns an explicit anchor ID to a Markdown heading by appending `{/* #my-custom-id */}` after the heading text.

```md
### Heading Ids {/_ #my-custom-id _/}
```

--------------------------------

### Create a Basic Markdown Document

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/tutorial-basics/create-a-document.mdx

Create a simple Markdown file in the `docs` folder. This file will be automatically rendered as a document on your site.

```markdown
# Hello

This is my **first Docusaurus document**!

```

--------------------------------

### Generate Changelog with Specific Version

Source: https://github.com/facebook/docusaurus/blob/main/admin/publish-legacy.md

Generates the changelog starting from a specific version, which can help resolve issues with empty changelogs.

```bash
yarn changelog --from v2.0.0-beta.0
```

--------------------------------

### Browser Window Component Usage

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/markdown-tests-md.md

Demonstrates the usage of a custom BrowserWindow component.

```jsx
import BrowserWindow from '@site/src/components/BrowserWindow';

<BrowserWindow>

BrowserWindow content

</BrowserWindow>
```

--------------------------------

### Generate a New Docusaurus Site

Source: https://github.com/facebook/docusaurus/blob/main/examples/classic/docs/intro.mdx

Use this command to create a new Docusaurus site with the classic template. It installs all necessary dependencies.

```bash
npm init docusaurus@latest my-website classic
```

--------------------------------

### Using require for Local Image Source

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_blog tests/2021-10-08-blog-post-mdx-require-feed-tests.mdx

Shows how to use a `require` call to reference a local image file, accessing its default export.

```javascript
<img src={require('../../static/img/docusaurus.png').default} />
```

--------------------------------

### Fast Production Build for Docusaurus Website

Source: https://github.com/facebook/docusaurus/blob/main/AGENTS.md

Builds the Docusaurus website for production, focusing on recent versions to speed up the build time and feedback loop.

```bash
pnpm build:website:fast
```

--------------------------------

### Import SVG as React Component

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/releases/3.7/index.mdx

Use SVGs directly as React components in your Docusaurus site. This example shows a basic import.

```tsx
import DocusaurusSvg from './docusaurus.svg';

<DocusaurusSvg />;
```

--------------------------------

### Docusaurus v2 Warning Admonition

Source: https://github.com/facebook/docusaurus/blob/main/website/blog/2023/09-29-preparing-your-site-for-docusaurus-v3/index.mdx

Example of the undocumented `:::warning` admonition in Docusaurus v2, which renders with a red color and incorrect icon.

```markdown
:::danger Warning

This is a Docusaurus v2 `:::warning` admonition.

:::
```

--------------------------------

### JavaScript Clock Component with Highlighting

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_pages tests/markdown-tests-md.md

A JavaScript React component for a ticking clock, featuring code highlighting and long line examples.

```javascript
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
      // highlight-start
      {/* prettier-ignore */}
      long long long long long long long long long long long long line
      {/* prettier-ignore */}
      // highlight-end
    </div>
  );
}
```

--------------------------------

### Import and Render Partial Component

Source: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/_blog tests/2021-08-22-no-author.mdx

This snippet demonstrates how to import and render a partial MDX component within a Docusaurus blog post. Ensure the partial component exists at the specified path.

```mdx
import Partial from "./_partial.mdx"

<Partial />
```