### Install Jetpack CLI

Source: https://github.com/automattic/jetpack/blob/trunk/tools/cli/README.md

Install the Jetpack CLI by running the setup and install commands from the monorepo root. Ensure the setup command succeeds and follow any instructions provided.

```sh
pnpm setup
# Make sure the above succeeds, and do anything it tells you to.

pnpm install
pnpm jetpack cli link
```

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

### Start Jetpack Docker Container

Source: https://github.com/automattic/jetpack/blob/trunk/docs/quick-start.md

Use this command to start the Docker container for Jetpack. This may take some time for the initial setup.

```bash
jetpack docker up -d
```

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

### Build Setup for Jetpack Instant Search

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/search/src/instant-search/README.md

Commands to install pnpm and build the instant search assets. Use `--watch` for continuous compilation during development. Verify built assets in the specified directory.

```bash
> npm install pnpm
> pnpm build-search (--watch)
> # alternatively, `pnpm build` or `pnpm watch`
> # verify built assets via `ls _inc/build/instant-search/`
```

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

### Start Existing Docker WordPress Containers

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/search/docs/plans/local-testing-setup.md

Starts previously installed Docker containers for the WordPress environment. Use this command if containers were already set up.

```bash
jetpack docker up -d
```

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

### Run Example Composer Script

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/analyzer/README.md

Execute the example script using Composer.

```bash
composer run example
```

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

### Basic Pie Semi Circle Chart Setup

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/charts/src/charts/pie-semi-circle-chart/stories/index.docs.mdx

Import the chart and CSS, then provide data to render a basic semi-circle chart. This is the foundational example for using the component.

```jsx
import { PieSemiCircleChart } from '@automattic/charts';
import '@automattic/charts/style.css';

	const data = [
		{
			label: 'MacOS',
			value: 30000,
			valueDisplay: '30K',
			percentage: 5,
		},
		{
			label: 'Linux',
			value: 22000,
			valueDisplay: '22K',
			percentage: 1,
		},
		{
			label: 'Windows',
			value: 80000,
			valueDisplay: '80K',
			percentage: 2,
		},
	];

	<PieSemiCircleChart
		data={ data }
		thickness={ 0.4 }
		label="OS"
		note="Windows +10%"
	/>
```

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

### Geo Chart Basic Setup

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/charts/src/charts/geo-chart/stories/index.docs.mdx

Basic setup for the Geo Chart component requires importing the necessary components and CSS. This example shows how to render a simple Geo Chart with data, width, and height.

```tsx
import { GeoChart } from '@automattic/charts';
import '@automattic/charts/style.css';

	<GeoChart
		data={ ordersByCountry }
		width={ 800 }
		height={ 500 }
	/>
```

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

### Start Docker Environment for Tests

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/jetpack/tests/e2e/README.md

Starts the Docker environment, including WordPress and database containers, for running E2E tests. The WordPress installation will be accessible at localhost:8889.

```shell
pnpm env:up
```

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

### Install WordPress in Docker

Source: https://github.com/automattic/jetpack/blob/trunk/docs/quick-start.md

After starting the Docker container, use this command to install WordPress within it.

```bash
jetpack docker install
```

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

### Basic Modal Usage Example

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/stories/index.mdx

A simple example showcasing the essential props for rendering the ProductInterstitialModal.

```APIDOC
## Basic Modal

### Description
This example demonstrates a basic implementation of the modal with title, description, and button labels.

### Usage
```jsx
<ProductInterstitialModal
  title="Jetpack Boost"
  description="Speed up your WordPress site"
  modalTriggerButtonLabel="Learn More"
  buttonLabel="Upgrade"
  onOpen={() => console.log('Modal opened')}
/>
```
```

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

### Start Storybook Development Server

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/protect/README.md

Run this command in the specified directory to start the Storybook development server for UI components.

```bash
pnpm run storybook:dev
```

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

### Example Implementation

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/my-jetpack/_inc/hooks/use-go-back/Readme.md

An example demonstrating how to use the `useGoBack` hook within a React component.

```APIDOC
## Example Usage

### Component
```javascript
import { useGoBack } from './hooks/use-go-back';

function Interstitial( { slug } ) {
	const { onClickGoBack } = useGoBack( { slug: 'backup' } );

	return (
		<>
			{/* Other component JSX */}
			<GoBackLink onClick={ onClickGoBack } />
			{/* Other component JSX */}
		</>
	);
}
```

### Explanation
This example shows how to import and use the `useGoBack` hook in a React component named `Interstitial`. The hook is called with a `slug`, and the returned `onClickGoBack` handler is passed to a `GoBackLink` component.
```

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

### Build and Install Package

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/boost-speed-score/README.md

Build and install the boost-speed-speed package using jetpack commands.

```sh
jetpack build packages/boost-speed-score && jetpack install packages/boost-speed-score
```

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

### Start Boost E2E Environment Shortcut

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/boost/tests/e2e/README.md

A shortcut command to start the e2e testing environment and the tunnel for Boost.

```bash
pnpm test-e2e:start
```

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

### Install Jetpack AI Client

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/ai-client/README.md

Install the Jetpack AI Client package using npm. This command fetches and installs the necessary dependencies.

```bash
npm install @automattic/jetpack-ai-client
```

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

### Build and Install Protect Status Package

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/protect-status/README.md

Build and install the protect-status package locally.

```sh
jetpack build packages/protect-status && jetpack install packages/protect-status
```

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

### Install Jetpack Scan Client

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/scan/README.md

Install the Jetpack Scan Client package using pnpm.

```bash
pnpm i @automattic/jetpack-scan
```

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

### BoostUtils Test Example

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/boost/tests/e2e/README.md

Demonstrates the usage of `boostUtils` fixture for environment setup, module management, connection mocking, speed score mocking, premium feature mocking, and executing WordPress CLI commands within E2E tests.

```typescript
test('My test', async ({ boostUtils, jetpackBoostPage, page }) => {
  // Environment setup
  await boostUtils.resetEnvironment();
  
  // Module management
  await boostUtils.activateBoostModule(['critical_css', 'render_blocking_js']);
  await boostUtils.deactivateBoostModule('page_cache');
  
  // Connection management
  await boostUtils.mockConnection(); // Mocks the connection
  // OR for real connection:
  await boostUtils.connectIfNeeded(page); // Go through the real connection flow
  
  // Speed score management
  await boostUtils.mockSpeedScore(); // Fast, consistent scores
  // OR for real API:
  await boostUtils.unMockSpeedScore(); // Real PageSpeed API calls
  
  // Premium features
  await boostUtils.mockPremiumFeatures(['cornerstone-10-pages']);
  
  // WordPress CLI commands
  await boostUtils.executeWpCommand('option set permalink_structure "/%postname%/"');
});
```

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

### Setup Jetpack CLI Local Development

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/jetpack-cli/DEVELOPING.md

Install dependencies and link the local Jetpack CLI package to make the global `jp` command use your local source. Changes to `bin/jp.js` are effective immediately.

```bash
cd projects/js-packages/jetpack-cli
npm install
npm link
```

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

### Install Automattic Charts Package

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/charts/README.md

Install the charts package using npm, pnpm, or yarn.

```bash
npm install @automattic/charts
# or
pnpm add @automattic/charts
# or
yarn add @automattic/charts
```

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

### Install Jetpack AI Client

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/ai-client/src/jwt/Readme.md

Install the library using npm. This command adds the package as a dependency to your project.

```bash
npm install --save @automattic/jetpack-ai-client
```

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

### Install Base Styles Module

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/base-styles/README.md

Install the @automattic/jetpack-base-styles module using npm.

```bash
npm install @automattic/jetpack-base-styles --save-dev
```

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

### Install Root Dependencies

Source: https://github.com/automattic/jetpack/blob/trunk/CONTRIBUTING.md

Installs JavaScript and PHP dependencies using pnpm and Composer respectively. Ensure these tools are installed before running.

```sh
pnpm install      # JS dependencies
composer install  # PHP dependencies
```

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

### Start E2E Testing Environment and Tunnel

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/boost/tests/e2e/README.md

Starts the necessary environment and tunnel for running E2E tests.

```bash
pnpm run env:up && pnpm run tunnel:up
```

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

### Build and Install Protect Models

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/protect-models/README.md

Commands to build and install the protect-models package locally.

```sh
jetpack build packages/protect-models && jetpack install packages/protect-models
```

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

### Usage Example

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/jetpack/_inc/client/README.md

Example of how to use state selectors and action creators within a React component.

```APIDOC
## How to use selectors and actions creators from a component file

### Description
This example demonstrates connecting Jetpack state selectors and action creators to a React component's props using `react-redux`.

### Code Example
```javascript
import { getModules, isModuleActivated, activateModule } from 'state/modules';

export const YourComponent = ( props ) => (
	<div>
		<button onClick={ props.isModuleActivated ?
			props.activate.bind( null, props.module.name ) :
			props.deactivate.bind( null, props.module.name )
		}>Activate</button>
	</div>
)

// Connect selectors to the component's props
const mapStateToProps = ( state, ownProps ) => {
  return {
    modules: getModules( state ),
		isModuleActivated: isModuleActivated( state, 'protect' ),
		...ownProps
  }
}

// Connect action creators to the component's props
const mapDispatchToProps = ( dispatch ) => {
  return {
    activate: ( module_name ) => dispatch( activateModule( module_name ) ),
    deactivate: ( module_name ) => dispatch( deactivateModule( module_name ) )
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)( YourComponent )
```
```

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

### Setup Image CDN Core Functionality

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/image-cdn/README.md

Run this to load core functionality and compatibility for the Photon module. Load it before 'plugins_loaded' priority 10.

```php
Automattic\Jetpack\Image_CDN\Image_CDN_Core::setup();
```

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

### Uninstall WordPress Installation

Source: https://github.com/automattic/jetpack/blob/trunk/tools/docker/README.md

Removes the WordPress installation managed by Jetpack Docker, allowing you to start over.

```sh
jetpack docker uninstall
```

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

### Initial Instance Setup with Flags

Source: https://github.com/automattic/jetpack/blob/trunk/tools/docker/README.md

This command sets up a new Docker instance using CLI flags for ports. The CLI will append these settings to the `.env` file for future use.

```sh
jetpack docker up -d --name feature --port 8080 --port-phpmy 8281 \
  --port-inbox 1180 --port-smtp 2525 --port-sftp 1122
```

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

### Get Installed Plugins

Source: https://github.com/automattic/jetpack/blob/trunk/docs/rest-api.md

Retrieve a list of all currently installed plugins on the site, including their details.

```APIDOC
## GET /wp-json/jetpack/v4/plugins

### Description
Get a list of the currently installed plugins on the site.

### Method
GET

### Endpoint
/wp-json/jetpack/v4/plugins

### Response
#### Success Response (200)
- (object) - An object where keys are plugin file paths and values are plugin details.
  - **Name** (string) - The name of the plugin.
  - **PluginURI** (string) - The URI of the plugin.
  - **Version** (string) - The version of the plugin.
  - **Description** (string) - A description of the plugin.
  - **Author** (string) - The author of the plugin.
  - **AuthorURI** (string) - The URI of the plugin author.
  - **TextDomain** (string) - The text domain of the plugin.
  - **DomainPath** (string) - The domain path of the plugin.
  - **Network** (boolean) - Whether the plugin is network-activated.
  - **Title** (string) - The title of the plugin.
  - **AuthorName** (string) - The name of the plugin author.
  - **active** (boolean) - Whether the plugin is currently active.

### Response Example
```json
{
    "hello.php": {
        "Name": "Hello Dolly",
        "PluginURI": "http://wordpress.org/plugins/hello-dolly/",
        "Version": "1.6",
        "Description": "This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.",
        "Author": "Matt Mullenweg",
        "AuthorURI": "http://ma.tt/",
        "TextDomain": "",
        "DomainPath": "",
        "Network": false,
        "Title": "Hello Dolly",
        "AuthorName": "Matt Mullenweg",
        "active": false
    },
    "jetpack/jetpack.php": {
        "Name": "Jetpack by WordPress.com",
        "PluginURI": "https://jetpack.com",
        "Version": "5.3",
        "Description": "Get everything you need to <strong>design, secure, and grow your WordPress site</strong>. Jetpack gives you free themes, image tools, related content, and site security, all in one convenient bundle.",
        "Author": "Automattic",
        "AuthorURI": "https://jetpack.com",
        "TextDomain": "jetpack",
        "DomainPath": "/languages/",
        "Network": false,
        "Title": "Jetpack by WordPress.com",
        "AuthorName": "Automattic",
        "active": true
    }
}
```
```

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

### Mirrors.txt Example

Source: https://github.com/automattic/jetpack/blob/trunk/projects/github-actions/push-to-mirrors/README.md

Defines the target mirror repositories for the action. Each line in `mirrors.txt` should be a repository in the format `owner/repo`.

```text
Automattic/jetpack-production
Automattic/jetpack-beta
```

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

### Modal with Custom Trigger and Video Example

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/stories/index.mdx

An example showing how to use a custom trigger and include a video in the modal.

```APIDOC
## With Custom Trigger and Video

### Description
This example combines a custom trigger with video content in the secondary column.

### Usage
```jsx
<ProductInterstitialModal
  title="Jetpack AI"
  customModalTrigger={<JetpackLogo style={{ cursor: 'pointer' }} />}
  isWithVideo={true}
  secondaryColumn={<VideoComponent />}
/>
```
```

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

### Example 2: Using Path and Site Placeholders

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/components/tools/jp-redirect/README.md

Illustrates using the 'path' and 'site' arguments with a source handler that has dynamic placeholders. The generated URL and the final redirected URL are provided.

```javascript
getRedirectUrl(
	'calypso-edit-post',
	{
		path: '1234',
		site: 'example.org'
	}
)
```

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

### Opt Out of Cloning

Source: https://github.com/automattic/jetpack/blob/trunk/tools/docker/README.md

Use `--no-clone` to prevent database cloning and start with a fresh WordPress installation. You will need to run `jetpack docker install` separately.

```sh
jetpack docker up -d --name clean --port 8090 --no-clone
```

```sh
jetpack docker install --name clean --port 8090
```

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

### Example 1: Using Query and Anchor Arguments

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/components/tools/jp-redirect/README.md

Demonstrates building a redirect URL with query parameters and an anchor. The generated URL includes these parameters, and the final destination URL is also shown.

```javascript
getRedirectUrl( 'jetpack', { query: 'foo=bar', anchor: 'section' } );
```

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

### Initialize VideoPress with Admin UI

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/videopress/README.md

Initialize the VideoPress package with the admin UI enabled. Pass 'admin_ui' as true in the options array.

```php
$config = new Config();
$config->ensure(
	'videopress',
	array( 'admin_ui' => true )
);
```

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

### Get Installed Plugins List - Jetpack API

Source: https://github.com/automattic/jetpack/blob/trunk/docs/rest-api.md

Retrieve a list of all currently installed plugins on the site, including their details like name, version, and author.

```json
{
    "hello.php": {
        "Name": "Hello Dolly",
        "PluginURI": "http://wordpress.org/plugins/hello-dolly/",
        "Version": "1.6",
        "Description": "This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.",
        "Author": "Matt Mullenweg",
        "AuthorURI": "http://ma.tt/",
        "TextDomain": "",
        "DomainPath": "",
        "Network": false,
        "Title": "Hello Dolly",
        "AuthorName": "Matt Mullenweg",
        "active": false
    },
    "jetpack/jetpack.php": {
        "Name": "Jetpack by WordPress.com",
        "PluginURI": "https://jetpack.com",
        "Version": "5.3",
        "Description": "Get everything you need to <strong>design, secure, and grow your WordPress site</strong>. Jetpack gives you free themes, image tools, related content, and site security, all in one convenient bundle.",
        "Author": "Automattic",
        "AuthorURI": "https://jetpack.com",
        "TextDomain": "jetpack",
        "DomainPath": "/languages/",
        "Network": false,
        "Title": "Jetpack by WordPress.com",
        "AuthorName": "Automattic",
        "active": true
    }
}
```

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

### Example: Standard Changelog Entry

Source: https://github.com/automattic/jetpack/blob/trunk/AGENTS.md

Demonstrates adding a standard patch-level fixed changelog entry for the 'packages/connection' project.

```bash
# Standard changelog entry
jp changelog add packages/connection -s patch -t fixed -e "Connection: Fix issue with site registration."
```

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

### GET /wp-json/jetpack/v4/connection/url

Source: https://github.com/automattic/jetpack/blob/trunk/docs/rest-api.md

Fetches a fresh WordPress.com URL for connecting the Jetpack installation.

```APIDOC
## GET /wp-json/jetpack/v4/connection/url

### Description
Fetch a fresh WordPress.com URL for connecting the Jetpack installation.

### Method
GET

### Endpoint
/wp-json/jetpack/v4/connection/url

### Response
#### Success Response (200)
- **(string)** - A URL string for authorizing Jetpack connection.

### Response Example
```
"https:\/\/jetpack.wordpress.com\/jetpack.authorize\/1\/?response_type=code&client_id=107314117&redirect_uri=https%3A%2F%2Fmysite.mydomain.com%2Fwp-admin%2Fadmin.php%3Fpage%3Djetpack%26action%3Dauthorize%26_wpnonce%63Db10f339f8%26redirect%3Dhttps%253A%252F%252Fmysite.mydomain.com%252Fwp-admin%252Fadmin.php%253Fpage%253Djetpack%26state%3D1%26scope%3Dadministrator%253A6493e88f3b4130d138e051a48f3b417c5cf503a%26user_email%3Dsiteowner%40company.com%26user_login%3Dmysite%26is_active%3D1%26jp_version%3D5.3%26auth_type%3Dcalypso%26secret%3D2ejv2bbhwE44GedSjwud7233TN2lGXkxh%26locale%3Den%26blogname%3Dmysite+Sandbox%26site_url%3Dhttps%253A%252F%252Fmysite.mydomain.com%26home_url%3Dhttps%253A%252F%252Fmysite.mydomain.com%26site_icon%3Dhttps%253A%252F%252Fi2.wp.com%252Fmysite.mydomain.com%252Fwp-content%252Fuploads%252F2016%252F04%252Fcropped-jetpack-logo.png%253Ffit%253D512%25252C512%2526ssl%253D1%26site_lang%3Den_US%26_ui%3D7178474%26_ut%3Dwpcom%253Auser_id"
```
```

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

### GET /wp-json/jetpack/v4/connection

Source: https://github.com/automattic/jetpack/blob/trunk/docs/rest-api.md

Fetches the current connection status of the Jetpack installation with WordPress.com.

```APIDOC
## GET /wp-json/jetpack/v4/connection

### Description
Fetch Jetpack's current connection status.

### Method
GET

### Endpoint
/wp-json/jetpack/v4/connection

### Response
#### Success Response (200)
- **isActive** (boolean) - Indicates if Jetpack is currently active.
- **offlineMode** (object) - Details about the offline mode status.
  - **isActive** (boolean) - Whether offline mode is active.
  - **constant** (boolean) - Whether offline mode is set via a constant.
  - **url** (boolean) - Whether offline mode is influenced by a URL.
  - **filter** (boolean) - Whether offline mode is influenced by a filter.

#### Response Example
```json
{
	"isActive": true,
	"offlineMode": {
		"isActive":false,
		"constant":false,
		"url":false,
		"filter":false
	}
}
```
```

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

### Start Local Tunnel

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/search/tests/e2e/README.md

Starts a local tunnel to expose your local WordPress installation via a public URL, bypassing offline mode. This is essential for tests requiring external access.

```shell
pnpm tunnel:up
```

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

### Get Plugin Updates

Source: https://github.com/automattic/jetpack/blob/trunk/docs/rest-api.md

Retrieve the number of available updates for currently installed WordPress plugins.

```APIDOC
## GET /wp-json/jetpack/v4/updates/plugins

### Description
Get number of updated available for currently installed WordPress plugins.

### Method
GET

### Endpoint
/wp-json/jetpack/v4/updates/plugins

### Response
#### Success Response (200)
- **code** (string) - The status code of the response.
- **message** (string) - A message indicating the status of the updates.
- **count** (integer) - The number of plugins that need updating.

### Response Example (No Updates)
```json
{
	"code": "success",
	"message": "All plugins are up-to-date. Keep up the good work!",
	"count":0
}
```

### Response Example (Updates Available)
```json
{
	"code": "updates-available",
	"message": "2 plugins need updating.",
	"count": 2
}
```
```

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

### Example Trivial Change File

Source: https://github.com/automattic/jetpack/blob/trunk/docs/monorepo.md

This example shows how to format a change file for a trivial change that does not require a changelog entry. The 'Comment' header is used instead of a body.

```text
Significance: patch
Type: compat
Comment: Update composer.lock, no need for a changelog entry
```

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

### Start Local Tunnel for Public URL

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/jetpack/tests/e2e/README.md

Starts a local tunnel using the 'localtunnel' library to expose the local WordPress installation (localhost:8889) via a public URL. This is necessary to bypass offline mode during tests.

```shell
pnpm tunnel:up
```

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

### Get PECL extension directory

Source: https://github.com/automattic/jetpack/blob/trunk/docs/monorepo.md

Determine the directory where PECL installs extensions. This is needed to configure PHP to find the extension.

```bash
pecl config-get ext_dir
```

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

### Complete Examples

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/forms/docs/feedback-author.md

Illustrates practical usage of the Feedback_Author class for common scenarios like displaying an author card or setting up email notifications.

```APIDOC
## Complete Examples

### Display Author Card

```php
$author = $feedback->get_author_data();

echo '<div class="author-card">';

// Avatar
if ( $author->get_avatar_url() ) {
    echo '<img src="' . esc_url( $author->get_avatar_url() ) . '" ';
    echo 'alt="' . esc_attr( $author->get_display_name() ) . '" />';
}

// Name
echo '<h3>' . esc_html( $author->get_display_name() ) . '</h3>';

// Email (linked)
if ( $author->get_email() ) {
    echo '<a href="mailto:' . esc_attr( $author->get_email() ) . '">';
    echo esc_html( $author->get_email() ) . '</a>';
}

// Website (linked)
if ( $author->get_url() ) {
    echo '<a href="' . esc_url( $author->get_url() ) . '" ';
    echo 'target="_blank" rel="nofollow">';
    echo esc_html( $author->get_url() ) . '</a>';
}

echo '</div>';
```

### Email Notification Header

```php
$author = $feedback->get_author_data();

$email_header = "From: {$author->get_display_name()}";

if ( $author->get_email() ) {
    $email_header .= " <{$author->get_email()}>";
}

if ( $author->get_url() ) {
    $email_header .= "\nWebsite: {$author->get_url()}";
}

// Use in wp_mail headers
$headers = [
    'Reply-To: ' . $author->get_email(),
];
```
```

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

### Get Jetpack Authorization URL

Source: https://github.com/automattic/jetpack/blob/trunk/docs/rest-api.md

Obtain a fresh URL for connecting your Jetpack installation to WordPress.com. The response is a string, not a JSON object.

```text
"https:\/\/jetpack.wordpress.com\/jetpack.authorize\/1\/?response_type=code&client_id=107314117&redirect_uri=https%3A%2F%2Fmysite.mydomain.com%2Fwp-admin%2Fadmin.php%3Fpage%3Djetpack%26action%3Dauthorize%26_wpnonce%63Db10f339f8%26redirect%3Dhttps%253A%252F%252Fmysite.mydomain.com%252Fwp-admin%252Fadmin.php%253Fpage%253Djetpack&state=1&scope=administrator%3A6493e88f3b4130d138e051a48f3b417c5cf503a&user_email=siteowner%40company.com&user_login=mysite&is_active=1&jp_version=5.3&auth_type=calypso&secret=2ejv2bbhwE44GedSjwud7233TN2lGXkxh&locale=en&blogname=mysite+Sandbox&site_url=https%3A%2F%2Fmysite.mydomain.com&home_url=https%3A%2F%2Fmysite.mydomain.com&site_icon=https%3A%2F%2Fi2.wp.com%2Fmysite.mydomain.com%2Fwp-content%2Fuploads%2F2016%2F04%2Fcropped-jetpack-logo.png%3Ffit%3D512%252C512%26ssl%3D1&site_lang=en_US&_ui=7178474&_ut=wpcom%3Auser_id"
```

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

### Defining Plan Data for Blocks

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/jetpack/extensions/README.md

This example shows how to define plan data, specifying which plans support certain features. This is necessary for both WordPress.com and Jetpack environments when a block is paid for one but free for the other.

```php
const PLAN_DATA = array(
	'free'     => array(
		'plans'    => array(
			'jetpack_free',
		),
		'supports' => array(
			'opentable',
			'calendly',
		),
	),

```

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

### Get Feedback Entry Relative Permalink

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/forms/docs/feedback-source-class.md

Retrieves the relative permalink for the feedback entry, suitable for use in internal links. For example, '/contact?page=2'.

```php
public function get_relative_permalink(): string
```

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

### Pie Chart Basic Setup

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/charts/src/charts/pie-chart/stories/index.docs.mdx

Basic setup for the Pie Chart component, including necessary imports and enabling tooltips and legend.

```jsx
import { PieChart } from '@automattic/charts';
import '@automattic/charts/style.css';

    <PieChart
    	data={ data }
    	withTooltips={ true }
    	showLegend={ true }
    />
```

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

### Col lg Prop Examples

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/components/components/layout/col/README.md

Demonstrates configuring the column span for large breakpoints using the 'lg' prop. Can be a number or an object specifying start and end.

```jsx
<Col lg={ 10 }></Col>
```

```jsx
<Col lg={ { start: 4, end: 12 } }></Col>
```

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

### Get PHP extension directory

Source: https://github.com/automattic/jetpack/blob/trunk/docs/monorepo.md

Find out where PHP is currently looking for extensions. This helps in aligning PHP's configuration with PECL's installation directory.

```bash
php -r 'echo ini_get( "extension_dir" ) . "\n";'
```

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

### Example GitHub Actions Workflow

Source: https://github.com/automattic/jetpack/blob/trunk/projects/github-actions/push-to-mirrors/README.md

Demonstrates how to integrate the push-to-mirrors action into a GitHub Actions workflow. Ensure the `token` is securely stored as a secret.

```yaml
name: Build
on:
  push:
    branches: [ main ]

jobs:
  build:
    name: Build all projects
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Build all projects
        id: build
        run: ...

      - name: Push changed projects
        uses: Automattic/action-push-to-mirrors@v2
        with:
          token: ${{ secrets.API_TOKEN_GITHUB }}
          username: buildbot
          working-directory: ${{ github.workspace }}/build
```

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

### Col sm Prop Examples

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/components/components/layout/col/README.md

Shows how to set the number of columns for small breakpoints using the 'sm' prop. It can be a number or an object defining start and end points.

```jsx
<Col sm={ 3 }></Col>
```

```jsx
<Col sm={ { start: 2, end: 4 } }></Col>
```

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

### Basic Clipboard Button Usage

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/jetpack/_inc/client/components/form/clipboard-button/README.md

Demonstrates how to import and use the ClipboardButton component with basic text and button label. This example assumes a React class component setup.

```jsx
import { createClass } from 'react';
import ClipboardButton from 'components/form/clipboard-button';

createClass( {
	render: function() {
		return (
			<ClipboardButton text="Text to copy" prompt="Highlight and copy the following text to your clipboard:">
				Button Text
			</ClipboardButton>
		);
	}
} );
```

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

### Initialize VideoPress Package

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/videopress/README.md

Initialize the VideoPress package using Jetpack Config. Ensure the 'videopress' feature is enabled.

```php
use Automattic\Jetpack\Config;

require_once plugin_dir_path( __FILE__ ) . 'vendor/autoload_packages.php';

function jpcs_load_plugin() {

	// Here we enable the Jetpack packages.
	$config = new Config();
	$config->ensure( 'videopress' );
}

add_action( 'plugins_loaded', 'jpcs_load_plugin', 1 );
```

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

### Usage Examples

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/forms/docs/feedback-source-class.md

Illustrates common use cases for the Feedback_Source class, including getting the current source, manual creation, checking source types, and displaying feedback with edit links.

```APIDOC
## Usage Examples

### From Current Context
```php
$source = Feedback_Source::get_current( $form_attributes );
echo $source->get_title();
echo $source->get_permalink();
```

### Manual Creation
```php
$source = new Feedback_Source(
    123,                    // post ID
    'Contact Page',         // title
    2,                      // page number
    'single',              // source type
    'https://example.com'  // request URL
);
```

### Check Source Type
```php
$source = $feedback->get_source_object();

switch ( $source->get_source_type() ) {
    case 'widget':
        // Handle widget source
        break;
    case 'block_template':
        // Handle template source
        break;
    case 'single':
    default:
        // Handle post/page source
        break;
}
```

### Display with Edit Link
```php
echo '<a href="' . esc_url( $source->get_permalink() ) . '">';
echo esc_html( $source->get_title() ) . '</a>';

if ( $edit_url = $source->get_edit_form_url() ) {
    echo ' <a href="' . esc_url( $edit_url ) . '">Edit</a>';
}
```
```

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

### Run Caddy Reverse Proxy

Source: https://github.com/automattic/jetpack/blob/trunk/tools/docker/README.md

Start Caddy as a reverse proxy to handle HTTPS connections and forward traffic to your local development environment. Use `--internal-certs` and `--disable-redirects` for HTTPS setup.

```bash
caddy reverse-proxy --from your-test-site.example.com --to localhost:80 --internal-certs --disable-redirects
```

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

### Install and Link Jetpack CLI

Source: https://github.com/automattic/jetpack/blob/trunk/docs/monorepo.md

Run this command once from the root of the repo to install dependencies and link the `jetpack` CLI tool globally. Omit the `&& pnpm jetpack cli link` part if you don't need the CLI globally.

```bash
pnpm install && pnpm jetpack cli link
```

```bash
pnpm install
```

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

### Run Storybook Locally

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/storybook/README.md

Execute this command in the project directory to start the Storybook development server.

```bash
npm run storybook:dev
```

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

### Get Playback Media Token

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/videopress/src/client/lib/get-media-token/Readme.md

Use this function to retrieve a playback token. It handles caching and expiration, requesting a new token from the server if necessary. Ensure the necessary parameters like post ID and GUID are provided.

```es6
import getMediaToken from './';

async function myPostHandler( postId, guid ) {
	const playbackTokenData = getMediaToken( 'playback', { id: postId, guid } );
	if ( playbackTokenData?.token ) {
		console.log( 'playback token: ', playbackTokenData.token );
	}
}
```

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

### Basic Usage of IgnoreFile in PHP

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/ignorefile/README.md

Demonstrates how to instantiate IgnoreFile, add rules from a file, and check if a specific filename is ignored. Also shows how to filter an array of files.

```php
// Read a .myignore file.
$ignore = new IgnoreFile();
$ignore->add( file_get_contents( '.myignore' ) );

// Test if a file is ignored.
if ( $ignore->ignores( $filename ) ) {
        echo "$filename is ignored\n";
} else {
        echo "$filename is not ignored\n";
}

// Filter ignored files from an array of files.
$filesToProcess = $ignore->filter( $allFiles );
```

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

### Install Composer Dependencies

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/blocks/README.md

Install composer dependencies required for development and testing. Ensure you have `svn`, `composer`, and `pnpm` installed.

```bash
composer install --ignore-platform-reqs
```

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

### Install Social Logos Package

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/social-logos/README.md

Install the social-logos package using npm. This package requires React to be installed in your project.

```bash
npm install social-logos --save
```

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

### Install ESLint Changed and ESLint

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/eslint-changed/README.md

Install the package using npm. Ensure ESLint is also installed as a peer dependency.

```bash
npm install @automattic/eslint-changed eslint
```

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

### Document 'showBetaFeatures' in README

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/forms/src/store/config/README.md

Documents the 'showBetaFeatures' configuration key in the README file, explaining its purpose.

```markdown
- `showBetaFeatures` - Whether beta features should be shown to the current user
```

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

### Install nvm (Node Version Manager)

Source: https://github.com/automattic/jetpack/blob/trunk/docs/quick-start.md

Installs nvm, a script to manage multiple Node.js versions. It's recommended to use nvm for Node.js installations. This command downloads and runs the nvm installation script.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
```

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

### Install Jetpack CLI

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/search/docs/plans/local-testing-setup.md

Installs the Jetpack CLI globally if it's not already present. Ensure Node.js and npm/pnpm are installed first.

```bash
jetpack --version
# If missing: npm install -g @automattic/jetpack-cli  (or pnpm add -g)
```

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

### Register Media Source - Basic

Source: https://github.com/automattic/jetpack/blob/trunk/projects/plugins/jetpack/extensions/store/media-source/README.md

Use this action to register a new media source into the `jetpack/media-source` state tree. Ensure the `@wordpress/data` package is imported.

```es6
import { dispatch } from '@wordpress/data';

dispatch( 'jetpack/media-source' ).registerMediaSource( 'myMediaSource' );
```

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

### Install Homebrew

Source: https://github.com/automattic/jetpack/blob/trunk/docs/quick-start.md

Installs Homebrew, a package manager for macOS and Linux, which is recommended for managing software installations. Run this command in your terminal.

```bash
bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

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

### Build Jetpack SEO Package

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/seo/README.md

Build the Jetpack SEO package once from the repository root.

```bash
jetpack build packages/seo
```

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

### Extract GUID from VideoPress URL

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/videopress/src/client/lib/url/README.md

Use `pickGUIDFromUrl` to extract the unique GUID from a VideoPress URL. The GUID is typically found in the URL parameters.

```es6
const guid = pickGUIDFromUrl( 'https://videopress.com/v/SEhvBzm2?loop=1' ); // -> SEhvBzm2
```

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

### useProductCheckoutWorkflow Hook Usage

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/connection/hooks/use-product-checkout-workflow/Readme.md

This example demonstrates how to use the `useProductCheckoutWorkflow` hook to initiate the checkout process for a product. It shows how to pass the required `productSlug`, `siteSuffix`, and `redirectUrl` props and how to use the `run` function as an event callback.

```APIDOC
## useProductCheckoutWorkflow

### Description
Custom hook that performs the needed steps to concrete the checkout workflow. For this, it'll try to register the site in case it's disconnected, and then it'll redirect to the Calypso checkout page. The hook delegates the task to connect the user when it's disconnected, adding a `unlinked=1` to the checkout URL.

### API

#### Arguments
The hook expects a `props` object argument with the following specs:

##### productSlug
this is the WordPress.com product slug.

##### redirectUrl
The URL to redirect to after checkout. For instance, for security bundle it's usually defined with `jetpack_security_t1_yearly`.

##### siteSuffix (optional)
Site slug suffix to be used as part of Calypso URLs. As default, tt's defined by the [get_site_suffix()](../../../../packages/status/src/class-status.php#L327) backend helper.

And it returns also an object with the following keys:

##### run
helper function to run the checkout process. Usually, you'd like to asign this function as to an event callback.

```jsx
import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';

function MyComponent() {
	const { run } = useProductCheckoutWorkflow( {
		productSlug: 'jetpack_security_t1_yearly',
		siteSuffix: 'poweredsite.wordpress.com'
		redirectUrl: 'https://poweredsite.wordpress.com/wp-admin/admin.php?page=jetpack-protect',
	} );

	return (
		<Button onClick={ run }>Add Security plan!</Button>
	)
}
```
```

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

### Initialize Jetpack ExPlat API in PHP

Source: https://github.com/automattic/jetpack/blob/trunk/projects/packages/explat/README.md

Call this static method in your project's initialization to set up the ExPlat API and register its endpoints.

```php
use Automattic\Jetpack\ExPlat;

ExPlat::init();
```

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

### Check PHP ast extension installation on Mac

Source: https://github.com/automattic/jetpack/blob/trunk/docs/monorepo.md

Verify if the PHP ast extension is already installed by checking its info. This is useful before attempting to install it.

```bash
php --ri ast
```

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

### Install remove-asset-webpack-plugin

Source: https://github.com/automattic/jetpack/blob/trunk/projects/js-packages/remove-asset-webpack-plugin/README.md

Install the plugin using npm or yarn.

```bash
npm install --save-dev @automattic/remove-asset-webpack-plugin
```

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

### Run PHP Unit Tests on Local Install

Source: https://github.com/automattic/jetpack/blob/trunk/docs/development-environment.md

Execute PHP unit tests directly using the 'phpunit' command from the Jetpack directory after setting up a local WordPress development environment.

```bash
phpunit
```

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

### Start Jetpack Docker Containers

Source: https://github.com/automattic/jetpack/blob/trunk/tools/docker/README.md

Use this command to spin up the necessary Docker containers for Jetpack development. This command starts the WordPress instance and other supporting services.

```sh
jetpack docker up
```