### Install Dependencies and Start Local Demo

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/demo.md

Installs the necessary npm packages and starts the local development server for the web component demo.

```bash
npm install
npm start
```

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

### Serve Frameright Documentation Locally

Source: https://github.com/frameright/docs.frameright.io/blob/main/README.md

Instructions to install dependencies and start the Docusaurus development server locally. This allows developers to preview the documentation site before deploying.

```bash
npm install
npm start
```

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

### ResizeObserver Polyfill Setup

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/browsers.md

Demonstrates how to install and set up the ResizeObserver polyfill for broader browser compatibility with the Frameright web component.

```bash
npm install @juggle/resize-observer
```

```javascript
import '@frameright/image-display-control-web-component/image-display-control.js';

// This is a ponyfill, i.e. a polyfill that doesn't touch the global window
// object by default, see https://github.com/juggle/resize-observer
import { ResizeObserver as ResizeObserverPonyfill } from '@juggle/resize-observer';
window.ResizeObserver = window.ResizeObserver || ResizeObserverPonyfill;
```

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

### Run Local Demo

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/contributing.md

Navigates into the example directory and runs a script to clean, build, and start the local demo in interactive watch mode. Assumes Parcel is installed.

```bash
cd example/
./clean-build-and-run.sh  # interactive watch mode
cd ../
```

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

### Running Local Demo

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/contributing.md

Installs dependencies and starts a local development server to serve the demo with interactive watch mode using Web Dev Server.

```bash
npm install
npm start  # interactive watch mode
```

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

### Open Image from GD Resource

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/getting-started.md

Explains how to create an image object directly from a GD resource, allowing integration with existing GD image manipulations.

```php
// example of creating an image with GD
$gd = imagecreate(100, 100);

$jpeg = JPEG::fromResource($gd);
```

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

### GitHub Corner Icon Component

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/getting-started.md

Renders a GitHub corner icon that links to a specified GitHub repository.

```html
<GitHubCornerIcon href="https://github.com/Frameright/php-image-metadata-parser" />
```

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

### Open Image from Stream

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/getting-started.md

Demonstrates loading an image from an open stream resource, such as a file pointer obtained using `fopen`.

```php
$file = fopen('...', 'r+');

$jpeg = JPEG::fromStream($file);
```

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

### Open Image from String Data

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/getting-started.md

Illustrates how to load an image from binary string data, which is useful when images are stored in databases or retrieved from other sources as strings.

```php
use CSD\Image\Format\JPEG;

$data = get_my_image(); // fetched from database etc.
$image = JPEG::fromString($data);
...
```

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

### Installation with npm

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/importing.md

Installs the Frameright image display control web component using npm, making it available for use in projects managed by bundlers.

```bash
npm install @frameright/image-display-control-web-component
```

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

### Run Local Demo

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/example.md

Navigates to the example directory and executes a script to clean, build, and run the local demo of the react-image-display-control project.

```bash
cd example/
./clean-build-and-run.sh
```

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

### Install React Image Display Control

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/importing.md

Installs the Frameright React Image Display Control package using npm. This is the first step to using the component in your project.

```bash
npm install @frameright/react-image-display-control
```

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

### Image Display Control Web Component Example

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/usage.md

An HTML example demonstrating the usage of the image display control web component with various attributes for image display and region highlighting.

```html
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 200px;

        /* Make it resizable: */
        resize: both;
        overflow: hidden; /* needed in order the get a bottom-right resize handle */
      }

      img {
        border: 5px dashed red;

        /* Follow the parent resizable div: */
        box-sizing: border-box;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div>
      <img
        id="cats"
        is="image-display-control"
        src="cats.jpg"
        title="Meow"
        alt="Cats being cute"
        srcset="cats.jpg 2000w, cats-1024x512.jpg 1024w, cats-768x384.jpg 768w"
        sizes="(max-width: 2000px) 100vw, 2000px"
        data-loglevel="debug"
        data-image-regions='[{
          "id": "onecatsleeping",
          "names": ["One cat sleeping"],
          "shape": "rectangle",
          "unit": "relative",
          "x": "0.042",
          "y": "0.432",
          "width": "0.248",
          "height": "0.488"
        }, {
          "id": "twocatsplaying",
          "names": ["Two cats playing"],
          "shape": "rectangle",
          "unit": "pixel",
          "imageWidth": "500",
          "imageHeight": "250",
          "x": "170",
          "y": "21",
          "width": "300",
          "height": "114"
        }]'
      />
    </div>

    <!-- Built with Webpack or Rollup. Contains the web component: -->
    <script src="mybundle.js"></script>
  </body>
</html>
```

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

### Open Image from File (Auto-detect)

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/getting-started.md

Demonstrates opening an image file using the `Image::fromFile` method, which automatically detects the image format based on the file extension.

```php
use CSD\Image\Image;

$image = Image::fromFile('yourfile.jpg');
...
```

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

### Open Specific Image Format from File

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/getting-started.md

Shows how to open JPEG and PNG image files directly using their specific format classes when the format is known or the file extension is missing.

```php
use CSD\Image\Format\JPEG;
use CSD\Image\Format\PNG;

$jpeg = JPEG::fromFile('yourfile.jpg');
$png = PNG::fromFile('yourfile.png');
...
```

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

### Clone Repository

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/example.md

Clones the Frameright react-image-display-control repository from GitHub. This is the first step to get the project's source code.

```bash
git clone https://github.com/Frameright/react-image-display-control
cd react-image-display-control/
```

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

### Composer Installation

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/README.md

Instructions for installing the Frameright PHP image metadata parser using Composer. This includes setting up a custom repository for development versions.

```json
{
  "minimum-stability": "dev",
  "repositories": [
    {
      "type": "vcs",
      "url": "https://github.com/Frameright/php-image-metadata-parser.git"
    }
  ],
  "require": {
    "frameright/image-metadata-parser": "dev-master"
  }
}
```

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

### Install Image Display Control Web Component

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/README.md

Installs the Frameright Image Display Control web component using npm. This is the recommended method for projects using bundlers like Webpack or Rollup.

```bash
npm install @frameright/image-display-control-web-component
```

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

### Install PHPUnit and Dependencies

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/contributing.md

Installs Composer, a dependency manager for PHP, and then installs project dependencies required for PHPUnit testing.

```bash
sudo apt install composer
composer install
```

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

### Generate TypeDoc Documentation

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Installs project dependencies and generates API reference documentation using TypeDoc.

```bash
npm install
npm run gendoc
```

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

### Run Linters and Tests

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/contributing.md

Installs project dependencies using Composer, then runs the linter and unit tests.

```bash
composer install
composer lint
composer test
```

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

### SSR/SSG Image Display Control Setup

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/ssr.md

Demonstrates how to use the ImageDisplayControl component with an `<img>` tag in an SSR or SSG environment. It shows how to provide the `data-path-on-server` attribute, which is crucial when the image URL is not accessible from the server or build machine. This example is compatible with frameworks like Vite + SSR.

```tsx
import { ImageDisplayControl } from '@frameright/react-image-display-control';

// In Vite (+ SSR), a static import to an image yields a string containing the
// URL of the image accessible from the browser.
import skaterUrl from './assets/skater.jpg';

const isServer = typeof window === 'undefined';
const skaterPathOnServer = isServer
  ? process.cwd() + '/src/assets/skater.jpg'
  : null;

export function MyApp() {
  return (
    <ImageDisplayControl>
      <img
        src={skaterUrl}
        data-path-on-server={skaterPathOnServer}
        alt="Skater"
      />
    </ImageDisplayControl>
  );
}
```

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

### Get Metadata from File

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/README.md

Example of how to load an image from a file and retrieve metadata like headline and camera information using the PHP library.

```php
$image = Image::fromFile($filename);

$headline = $image->getXmp()->getHeadline();
$camera = $image->getExif()->getCamera();
...
```

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

### Installation via npm

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/README.md

Provides the command to install the Frameright React component using npm. This is the standard method for adding the library to a Node.js project, such as those using Next.js or Vite.

```bash
npm install @frameright/react-image-display-control
```

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

### Install PHP Compatibility Ruleset

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/contributing.md

Installs the PHPCompatibilityWP ruleset, which provides cross-version compatibility checks for PHP, using Docker and Composer.

```bash
cd wpcs/
docker run --rm -it --volume $PWD:/app -u `id -u`:`id -g` \
  composer:1.10.19 require --dev phpcompatibility/phpcompatibility-wp:"*"
cd ../
```

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

### Install Dependencies and Format Code

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/contributing.md

Installs project dependencies using npm and runs the code formatting script with Prettier. This ensures code consistency across the project.

```bash
npm install
npm run format
```

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

### CDN Usage Example

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/importing.md

Demonstrates how to use the image display control web component by including it directly from a CDN. This includes necessary polyfills for broader browser compatibility.

```html
<html>
  <head>
    <!-- Polyfill for Safari, see https://github.com/ungap/custom-elements -->
    <script src="https://unpkg.com/@ungap/custom-elements/es.js"></script>
  </head>

  <body>
    <img
      is="image-display-control"
      src="https://webc.frameright.io/assets/pics/skater.jpg"
      width="200"
      height="200"
      data-image-regions='[{ "id": "horizontalbanner", "names": ["Horizontal banner"], "shape": "rectangle", "unit": "pixel", "imageWidth": "5760", "imageHeight": "3840", "x": "2343", "y": "858", "width": "3417", "height": "1281" }, { "id": "square", "names": ["Square"], "shape": "rectangle", "unit": "pixel", "imageWidth": "5760", "imageHeight": "3840", "x": "2462", "y": "1097", "width": "782", "height": "782" }, { "id": "tallportrait", "names": ["Tall portrait"], "shape": "rectangle", "unit": "pixel", "imageWidth": "5760", "imageHeight": "3840", "x": "2345", "y": "850", "width": "1122", "height": "2990" }]'
    />

    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-web-component@1.1.8/dist/image-display-control.min.js"
    ></script>
  </body>
</html>
```

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

### Install Dependencies and Lint

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/contributing.md

Installs project dependencies using npm and provides commands to check for linting errors and format the code using ESLint and Prettier.

```bash
npm install
npm run lint    # check for errors
npm run format  # fix errors
```

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

### Run Unit Tests

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/contributing.md

Installs project dependencies and runs the unit tests using Jest.

```bash
npm install
npm run test
```

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

### Clone Repository and Setup

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/contributing.md

Clones the Frameright Image Display Control WordPress plugin repository from GitHub and navigates into the project directory. This is the initial step for any contributor.

```bash
git clone https://github.com/Frameright/image-display-control-wordpress
cd image-display-control-wordpress/
```

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

### Install Dependencies and Lint/Format Code

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Installs project dependencies using npm and provides commands to check code for errors (lint) and automatically fix formatting issues (format) using ESLint and Prettier.

```bash
npm install
npm run lint    # check for errors
npm run format  # fix errors
```

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

### Running Unit Tests

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/contributing.md

Installs dependencies and provides commands to run unit tests once or in an interactive watch mode using Web Test Runner.

```bash
npm install
npm run test        # run once
npm run test:watch  # interactive watch mode
```

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

### Setup WordPress Coding Standards with Docker

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/contributing.md

Uses a Docker container to download and set up the WordPress Coding Standards (WPCS) into a local `wpcs/` directory. This is done using an older Composer version to ensure compatibility with PHP 7.

```bash
docker run --rm -it --volume $PWD:/app -u `id -u`:`id -g` \
  composer:1.10.19 create-project wp-coding-standards/wpcs --no-dev
```

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

### Instantiate from GD Resource

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/README.md

Example of creating an image object from a GD resource, allowing integration with PHP's GD library.

```php
$gd = imagecreate(100, 100);
$jpeg = JPEG::fromResource($gd);
```

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

### Run Unit Tests

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Installs project dependencies and runs the unit tests using Jest to validate code functionality.

```bash
npm install
npm run test
```

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

### Code Formatting and Linting

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/contributing.md

Installs project dependencies and provides commands to check for and fix code errors using ESLint and Prettier.

```bash
npm install
npm run lint    # check for errors
npm run format  # fix errors
```

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

### GitHub Corner Icon Usage

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/importing.md

Example of how to use the GitHubCornerIcon component, likely for linking to a GitHub repository. This component is imported from '@site/src/components/githubCornerIcon'.

```jsx
<GitHubCornerIcon href="https://github.com/Frameright/react-image-display-control" />
```

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

### Usage Example of Image Display Control Web Component

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/README.md

Demonstrates how to use the Image Display Control web component in an HTML file. It shows the custom element `<img is="image-display-control">` with attributes for image source, dimensions, and image regions defined in JSON.

```html
<html>
  <head></head>
  <body>
    <img
      is="image-display-control"
      src="https://images.pexels.com/photos/3625715/pexels-photo-3625715.jpeg"
      width="200"
      height="200"
      data-image-regions='[{
        "id": "oneanimal",
        "names": ["One animal"],
        "shape": "rectangle",
        "unit": "relative",
        "x": "0.217",
        "y": "0.708",
        "width": "0.239",
        "height": "0.1467"
      }, {
        "id": "threeanimals",
        "names": ["Three animals"],
        "shape": "rectangle",
        "unit": "relative",
        "x": "0.245",
        "y": "0.725",
        "width": "0.419",
        "height": "0.121"
      }]'
    />
    <!-- Built with Webpack or Rollup. Contains the web component: -->
    <script src="mybundle.js"></script>
  </body>
</html>
```

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

### Get GPS Data

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/README.md

Example of retrieving GPS data from an image, checking both EXIF and XMP, and then extracting latitude.

```php
$image = ...
$gps = $image->getAggregateMeta()->getGPS(); // checks EXIF and XMP
// or $gps = $image->getExif()->getGPS();

$lat = $gps->getLatitude();
```

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

### External Tutorial Link

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/tutorial.md

This snippet demonstrates how to create an external link to a tutorial video using Docusaurus components. It utilizes the `@docusaurus/Link` component and an external link icon.

```javascript
import Link from '@docusaurus/Link';
import IconExternalLink from '@theme/Icon/ExternalLink';

<Link href={ frontMatter.href }>{ frontMatter.href }<IconExternalLink /></Link>
```

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

### Clone Frameright Repository

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/demo.md

Clones the Frameright image display control web component repository from GitHub.

```bash
git clone https://github.com/Frameright/image-display-control-web-component
cd image-display-control-web-component/image-display-control/
```

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

### Image Display Control Parent Element Setup

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/attributes.md

Example demonstrating how to set the `data-idc-parent` attribute and `contain: paint;` style on a parent DOM element for use with the ImageDisplayControl component. This helps prevent React hydration warnings and ensures proper CSS containment.

```jsx
<div data-idc-parent style={{ contain: 'paint' }}>
  <ImageDisplayControl>
    <img
      src="https://react.frameright.io/assets/pics/skater.jpg"
      alt="Skater"
    />
  </ImageDisplayControl>
</div>
```

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

### External Link Component

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/php/tutorial.md

Renders an external link to a tutorial on metadata in PHP. It uses Docusaurus's Link component and an external link icon.

```javascript
import Link from '@docusaurus/Link';
import IconExternalLink from '@theme/Icon/ExternalLink';

<Link href={ frontMatter.href }>{ frontMatter.href }<IconExternalLink /></Link>
```

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

### External Link Component

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/tutorial.md

Renders an external link to a tutorial on metadata in Node.js using Docusaurus components. It displays the URL and an external link icon.

```javascript
import Link from '@docusaurus/Link';
import IconExternalLink from '@theme/Icon/ExternalLink';

<Link href={ frontMatter.href }>{ frontMatter.href }<IconExternalLink /></Link>
```

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

### Publish to npm

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Logs into the npm registry with a specific scope and publishes the package. For the first publication, use the --access public flag.

```bash
npm login --scope=@frameright
npm publish
# For first publication: npm publish --access public
```

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

### Generate Table of Contents

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/contributing.md

Installs markdown-toc and generates or updates the table of contents for markdown files in the project.

```bash
npm install
npm run gentoc
```

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

### Regenerating Tables of Contents

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/contributing.md

Installs dependencies and provides a command to regenerate tables of contents using markdown-toc.

```bash
npm install
npm run gentoc
```

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

### Cloning the Repository

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/contributing.md

Clones the Frameright image display control web component repository from GitHub and navigates into the project directory.

```bash
git clone https://github.com/Frameright/image-display-control-web-component
cd image-display-control-web-component/image-display-control/
```

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

### Publishing to npm

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/contributing.md

Logs into the npm scope and publishes the package to npm. For the first publication, use `--access public`.

```bash
npm login --scope=@frameright
npm publish
# For first publication: npm publish --access public
```

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

### Generate Table of Contents

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Installs project dependencies and regenerates the table of contents for markdown files using markdown-toc.

```bash
npm install
npm run gentoc
```

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

### Supported Web Frameworks

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/environments.md

Lists web frameworks and build tools that have been validated for use with Frameright. This includes Vite, vite-plugin-ssr, and Next.js, highlighting their specific versions.

```javascript
import { GitHubCornerIcon } from '@site/src/components/githubCornerIcon';

<GitHubCornerIcon href="https://github.com/Frameright/react-image-display-control" />

## Supported web frameworks

Any Node.js-based, React-based bundled environment, with or without
[server-side rendering](ssr.md), should be supported. We have validated:

- [Vite](https://vitejs.dev/) 4.3.2,
- [vite-plugin-ssr](https://vite-plugin-ssr.com/) 0.4.124,
- [Next.js](https://nextjs.org/) 13.4.1.
```

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

### Update package-lock.json

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/contributing.md

Updates all package-lock.json files by running the clean-build-and-run script in the example directory. This script also serves to update dependencies.

```bash
cd example/
./clean-build-and-run.sh
cd ../
```

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

### GitHub Corner Icon Component

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/demo.md

Imports and renders the GitHubCornerIcon component, linking to the project's GitHub repository.

```javascript
import { GitHubCornerIcon } from '@site/src/components/githubCornerIcon';

<GitHubCornerIcon href="https://github.com/Frameright/image-display-control-web-component" />
```

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

### HTML Usage with Image Display Control

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/README.md

Example of using the Image Display Control web component in HTML, including the data-image-regions attribute populated with image metadata.

```html
<img
  is="image-display-control"
  src="https://images.pexels.com/photos/3625715/pexels-photo-3625715.jpeg"
  width="200"
  height="200"
  data-image-regions='[{
    "id": "oneanimal",
    "names": ["One animal"],
    "shape": "rectangle",
    "unit": "relative",
    "x": "0.217",
    "y": "0.708",
    "width": "0.239",
    "height": "0.1467"
  }, {
    "id": "threeanimals",
    "names": ["Three animals"],
    "shape": "rectangle",
    "unit": "relative",
    "x": "0.245",
    "y": "0.725",
    "width": "0.419",
    "height": "0.121"
  }]'
/>
```

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

### Browser Usage

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/README.md

Provides an example of using the Frameright JavaScript library directly in a browser. It loads the library from a CDN and parses metadata from an image fetched via the Fetch API.

```html
<html>
  <body onload="documentLoaded()">
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-metadata-parser@2.0.0/dist/image-display-control-metadata-parser-standalone.min.js"
    ></script>

    <script type="text/javascript">
      async function documentLoaded() {
        const image = await fetch(
          'https://iptc.org/std/photometadata/examples/IPTC-PhotometadataRef-Std2021.1.jpg'
        );
        const buffer = await image.arrayBuffer();
        const parser = new ImageDisplayControl.Parser(buffer);
        const regions = parser.getIdcMetadata();
        console.log(JSON.stringify(regions, null, 2 /*indent*/));
      }
    </script>
  </body>
</html>
```

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

### Building the Package Locally

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/contributing.md

Builds a tarball of the package locally and then removes the created tarball.

```bash
npm pack
rm frameright-image-display-control-web-component-1.2.3.tgz
```

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

### Clean and Reinstall Dependencies

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Removes existing node_modules and package-lock.json files, then reinstalls dependencies to ensure a clean state.

```bash
rm -rf node_modules/ package-lock.json
npm install
```

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

### Configure PHP_CodeSniffer for WordPress Standards

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/contributing.md

Configures PHP_CodeSniffer to recognize the installed WordPress coding standards by setting the `installed_paths` configuration. This involves adding the path to the downloaded WPCS.

```bash
$PWD/wpcs/vendor/bin/phpcs -i
$PWD/wpcs/vendor/bin/phpcs --config-set installed_paths wpcs/
$PWD/wpcs/vendor/bin/phpcs -i
```

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

### Node.js Backend Usage

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/README.md

Demonstrates how to use the Frameright JavaScript library in a Node.js backend to parse image metadata. It requires installing the library via npm and reading an image file into a buffer.

```jsx
#!/usr/bin/env node

import { promises as fs } from 'fs';

// npm install @frameright/image-display-control-metadata-parser
import { Parser } from '@frameright/image-display-control-metadata-parser';

// Get it from https://iptc.org/std/photometadata/examples/IPTC-PhotometadataRef-Std2021.1.jpg
const buffer = await fs.readFile('IPTC-PhotometadataRef-Std2021.1.jpg');

const parser = new Parser(buffer);
console.log(parser.getIdcMetadata());
```

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

### Creating and Pushing Git Tag

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/contributing.md

Creates a git tag for a new version and pushes it to the remote repository.

```bash
git tag 1.2.3
git push --tags
```

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

### GitHub Corner Icon Integration

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/environments.md

Demonstrates how to integrate the GitHubCornerIcon component, linking to a specific GitHub repository. This is typically used for project promotion or linking to source code.

```javascript
import { GitHubCornerIcon } from '@site/src/components/githubCornerIcon';

<GitHubCornerIcon href="https://github.com/Frameright/react-image-display-control" />
```

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

### React Image Display Control Example

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/usage.md

Demonstrates the integration of the ImageDisplayControl component with various image sources, including external URLs, local assets, and React-Bootstrap Image components. It highlights the use of data attributes for SSR and debugging.

```tsx
// npm install @frameright/react-image-display-control
import { ImageDisplayControl } from '@frameright/react-image-display-control';

// npm install react-bootstrap
import Image from 'react-bootstrap/Image';

import skaterUrl from './assets/skater.jpg';

const isServer = typeof window === 'undefined';
const skaterPathOnServer = isServer
  ? process.cwd() + '/src/assets/skater.jpg'
  : null;

export function MyApp() {
  return (
    <div style={{ contain: 'paint' }} data-idc-parent>
      <ImageDisplayControl data-debug>
        <img
          id="external-img-without-ssr"
          src="https://webc.frameright.io/assets/pics/skater2.jpg"
          alt="Skater"
          className="first-image"
          width="200"
          height="200"
        />
        <Image
          id="local-bootstrap-image-without-ssr"
          src={skaterUrl}
          data-avoid-no-region="off"
          alt="Skater"
          style={{
            width: '300px',
            height: '200px',
          }}
        />
        <img
          id="local-img-with-ssr"
          src={skaterUrl}
          data-path-on-server={skaterPathOnServer}
          alt="Skater"
          width="200"
          height="200"
        />
      </ImageDisplayControl>
    </div>
  );
}
```

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

### Next.js Image Display Control Setup with pathOnServer

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/ssr.md

Illustrates the integration of ImageDisplayControl with Next.js's `<Image />` component. It highlights the use of the `pathOnServer` property directly on the `StaticImageData` object, which is a Next.js-specific enhancement for providing the server path to the component.

```tsx
import Image from 'next/image';

// npm install @frameright/react-image-display-control
import { ImageDisplayControl } from '@frameright/react-image-display-control';

// In Next.js, a static import to an image yields a StaticImageData object.
import skater from '../images/skater.jpg';
skater['pathOnServer'] = process.cwd() + '/images/skater.jpg';

export default function MyPage() {
  return (
    <ImageDisplayControl>
      <Image src={skater} alt="Skater" />
    </ImageDisplayControl>
  );
}
```

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

### Clone Repository

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Clones the image-display-control-metadata-parser repository from GitHub and navigates into the project directory.

```bash
git clone https://github.com/Frameright/image-display-control-metadata-parser
cd image-display-control-metadata-parser/
```

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

### Update SVN Trunk with New Release

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/contributing.md

Replaces the files in the SVN `trunk` directory with the newly built plugin ZIP archive, unzips it, and prepares the changes for commit.

```bash
svn delete trunk
mkdir trunk
cd trunk/
mv ../../../image-display-control-wordpress/image-display-control.zip .
unzip image-display-control.zip
rm image-display-control.zip
cd ../
svn add trunk
svn status
```

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

### Build Package Locally

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Builds a local tarball archive of the npm package and then removes the created archive.

```bash
npm pack
rm frameright-image-display-control-metadata-parser-1.2.3.tgz
```

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

### Create and Push Git Tag

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/javascript/contributing.md

Creates a git tag for a specific version (e.g., 1.2.3) and pushes the tag to the remote repository.

```bash
git tag 1.2.3
git push --tags
```

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

### Run Unit Tests

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/wordpress/contributing.md

Executes the unit tests for the plugin using Composer, which typically invokes PHPUnit.

```bash
composer test
```

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

### React Component Demo

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/introduction.md

Demonstrates the usage of the React component for Frameright, showcasing its ability to display images with automatically adjusted regions. Includes a link to the source code.

```javascript
import { ReactIdcDemo } from '@site/src/components/reactIdcDemo';

<p className="react-idc-demo"><ReactIdcDemo /></p>

<p className="react-idc-demo">
  <ReactIdcDemo animated /><br />
  <span className="react-idc-demo-caption">
    React component in action ▲{' '}
    <Link href="https://github.com/Frameright/docs.frameright.io/blob/main/src/components/reactIdcDemo.tsx">
      Source code<IconExternalLink />
    </Link>
  </span>
</p>
```

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

### GitHub Corner Icon Component

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/react/example.md

Imports and renders the GitHubCornerIcon component, which typically displays a link to the project's GitHub repository in a corner of the page.

```javascript
import { GitHubCornerIcon } from '@site/src/components/githubCornerIcon';

<GitHubCornerIcon href="https://github.com/Frameright/react-image-display-control" />
```

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

### Frameright Web Component Usage

Source: https://github.com/frameright/docs.frameright.io/blob/main/docs/web-component/README.md

Shows how to use the Frameright web component (`<img is="image-display-control">`) to display images with defined regions. The component automatically selects and zooms into the best region based on the element's current size, providing a more intelligent display than `object-fit: cover`.

```html
<img
  is="image-display-control"
  src="https://images.pexels.com/photos/3625715/pexels-photo-3625715.jpeg"
  width="200"
  height="200"
  data-image-regions='[{
    "id": "oneanimal",
    "names": ["One animal"],
    "shape": "rectangle",
    "unit": "relative",
    "x": "0.217",
    "y": "0.708",
    "width": "0.239",
    "height": "0.1467"
  }, {
    "id": "threeanimals",
    "names": ["Three animals"],
    "shape": "rectangle",
    "unit": "relative",
    "x": "0.245",
    "y": "0.725",
    "width": "0.419",
    "height": "0.121"
  }]'
/>
```