### Install Sharp

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/getting-started.mdx

Installs the 'sharp' library, a dependency for Plaiceholder used for image transformations. This command is typically run using npm.

```sh
npm install sharp
```

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

### Install Plaiceholder

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/getting-started.mdx

Installs the Plaiceholder library using npm. Plaiceholder is an ESM-only library for server-side image optimization.

```sh
npm install plaiceholder
```

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

### NPM Commands for Astro Projects

Source: https://github.com/joe-bell/plaiceholder/blob/main/examples/astro/README.md

This section lists common npm commands used to manage an Astro project. It includes commands for installing dependencies, starting the development server, building for production, previewing the build, and interacting with the Astro CLI.

```bash
npm install
npm run dev
npm run build
npm run preview
npm run astro ...
npm run astro --help
```

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

### Install Dependencies and Link Packages

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

Installs all project dependencies and links packages within the monorepo using PNPM.

```sh
pnpm install
```

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

### Install Plaiceholder Next.js Plugin

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/next.mdx

Installs the `@plaiceholder/next` package alongside your existing `plaiceholder` installation. This is the first step to integrating Plaiceholder with your Next.js project.

```sh
npm install @plaiceholder/next
```

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

### Install plaiceholder Tailwind Plugin

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/tailwind.mdx

Installs the plaiceholder Tailwind CSS plugin using npm. This is a prerequisite for integrating plaiceholder's LQIP generation into your Tailwind CSS setup.

```sh
npm install @plaiceholder/tailwindcss
```

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

### Basic Usage Example

Source: https://github.com/joe-bell/plaiceholder/blob/main/README.md

This snippet demonstrates the basic usage of the plaiceholder library to generate a placeholder image from a given URL. It shows how to import the library and use the `buffer` function to process an image.

```javascript
import { buffer } from 'plaiceholder';

async function getPlaceholder(imageUrl) {
  const { buffer } = await fetch(imageUrl).then(async (res) => (
    res.ok ? await res.arrayBuffer() : Promise.reject(res)
  ));

  const { id, src } = await buffer(buffer);

  return src;
}
```

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

### Callout Component Usage

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/index.mdx

Shows how to use the Callout component to display important information, such as project release notes and migration guides.

```jsx
import { Callout } from "nextra-theme-docs";

<Callout type="info">

**`plaiceholder@3.0`: Final Release**

The `plaiceholder` project is feature complete and will now be kept in maintenance mode.

[**Read the migration guide**](/docs/upgrading-to-3) for further information.

If this project has been useful to you, please consider [sponsoring my work](https://joebell.co.uk/sponsors).

</Callout>
```

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

### Remote Image Resolution in Node.js

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/upgrading-to-3.mdx

Illustrates how to resolve remote images using `getPlaiceholder` in Node.js. It fetches an image from a URL, converts the response to a buffer, and then processes it with `getPlaiceholder` to get image metadata.

```javascript
const getImage = async (src: string) => {
  const buffer = await fetch(src).then(async (res) =>
    Buffer.from(await res.arrayBuffer())
  );

  const {
    metadata: { height, width },
    ...plaiceholder
  } = await getPlaiceholder(buffer, { size: 10 });

  return {
    ...plaiceholder,
    img: { src, height, width },
  };
};

// Usage
const { base64, img } = await getImage(
  "https://images.unsplash.com/photo-1621961458348-f013d219b50c?auto=format&fit=crop&w=2850&q=80"
);
```

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

### TypeScript Integration

Source: https://github.com/joe-bell/plaiceholder/blob/main/README.md

This snippet shows how plaiceholder can be used with TypeScript, leveraging its type definitions for better code safety and autocompletion. It demonstrates the same buffer functionality as the basic JavaScript example but within a TypeScript context.

```typescript
import { buffer } from 'plaiceholder';

async function getPlaceholder(imageUrl: string): Promise<string> {
  const response = await fetch(imageUrl);
  const arrayBuffer = await response.arrayBuffer();
  const { src } = await buffer(arrayBuffer);
  return src;
}
```

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

### Get Metadata from Local Image

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Retrieves metadata from a local image file using Plaiceholder. This includes image dimensions, format, size, and more, leveraging the sharp library.

```javascript
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";

try {
  const file = await fs.readFile("/path-to-your-image.jpg");

  const { metadata } = await getPlaiceholder(file);

  console.log(metadata);
} catch (err) {
  err;
}

// Logs
// {
//   width: …,
//   height: …,
//   format: '…',
//   size: …,
//   space: '…',
//   channels: …,
//   depth: '…',
//   density: …,
//   chromaSubsampling: '…',
//   isProgressive: …,
//   resolutionUnit: '…',
//   hasProfile: …,
//   hasAlpha: …,
//   orientation: …,
//   exif: …,
//   icc: …,
//   iptc: …,
//   xmp: …
// }
```

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

### Get Metadata from Remote Image

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Retrieves metadata from a remote image URL using Plaiceholder. It fetches the image, converts it to a buffer, and then extracts metadata.

```javascript
import { getPlaiceholder } from "plaiceholder";

try {
  const src = "https://images.unsplash.com/photo-1621961458348-f013d219b50c";

  const buffer = await fetch(src).then(async (res) =>
    Buffer.from(await res.arrayBuffer())
  );

  const { metadata } = await getPlaiceholder(buffer);

  console.log(metadata);
} catch (err) {
  err;
}

// Logs
// {
//   width: …,
//   height: …,
//   format: '…',
//   size: …,
//   space: '…',
//   channels: …,
//   depth: '…',
//   density: …,
//   chromaSubsampling: '…',
//   isProgressive: …,
//   resolutionUnit: '…',
//   hasProfile: …,
//   hasAlpha: …,
//   orientation: …,
//   exif: …,
//   icc: …,
//   iptc: …,
//   xmp: …
// }
```

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

### SVG Placeholder Generation

Source: https://github.com/joe-bell/plaiceholder/blob/main/README.md

This example illustrates how to generate an SVG placeholder using plaiceholder. It highlights the use of the `svg` function to create a base64 encoded SVG string, which can be used as a placeholder.

```javascript
import { svg } from 'plaiceholder';

async function getSvgPlaceholder(imageUrl) {
  const { svg } = await svg(imageUrl);

  return svg;
}
```

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

### Get Pixels from Remote Image

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Extracts raw pixel data from a remote image URL using Plaiceholder. It fetches the image, converts it to a buffer, and then processes the pixels.

```javascript
import { getPlaiceholder } from "plaiceholder";

try {
  const src = "https://images.unsplash.com/photo-1621961458348-f013d219b50c";

  const buffer = await fetch(src).then(async (res) =>
    Buffer.from(await res.arrayBuffer())
  );

  const { pixels } = await getPlaiceholder(buffer);

  console.log(pixels);
} catch (err) {
  err;
}

// Logs
// [
//   // Row 1
//   [
//     // Row 1, Column 1
//     { r: 179, g: 155, b: 178 },
//     // Row 1, Column 2
//     { r: 246, g: 152, b: 170 },
//     // Row 1, Column 3
//     { r: 145, g: 106, b: 123 }
//   ],
//   // Row 2
//   [
//     // Row 2, Column 1
//     { r: 179, g: 155, b: 178 },
//     // Row 2, Column 2
//     { r: 246, g: 152, b: 170 },
//     // Row 2, Column 3
//     { r: 145, g: 106, b: 123 }
//   ],
// ]
```

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

### Get Dominant Color (Local Image)

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Retrieves the dominant color of a local image, providing RGB values and a hex code. Requires reading the file into a Buffer.

```js
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";

try {
  const file = await fs.readFile("/path-to-your-image.jpg");

  const { color } = await getPlaiceholder(file);

  console.log(color);
} catch (err) {
  err;
}

// Logs
// {
//   r: …,
//   g: …,
//   b: …,
//   hex: '…'
// },
// }
```

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

### Get Dominant Color (Remote Image)

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Retrieves the dominant color of a remote image, providing RGB values and a hex code. Requires fetching the image and converting it to a Buffer.

```js
import { getPlaiceholder } from "plaiceholder";

try {
  const src = "https://images.unsplash.com/photo-1621961458348-f013d219b50c";

  const buffer = await fetch(src).then(async (res) =>
    Buffer.from(await res.arrayBuffer())
  );

  const { color } = await getPlaiceholder(buffer);

  console.log(color);
} catch (err) {
  err;
}

// Logs
// {
//   r: …,
//   g: …,
//   b: …,
//   hex: '…'
// },
// }
```

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

### Get Pixels from Local Image

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Extracts raw pixel data from a local image file using Plaiceholder. The output is an array of rows, with each row containing pixel objects (r, g, b, and optionally a for transparency).

```javascript
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";

try {
  const file = await fs.readFile("/path-to-your-image.jpg");

  const { pixels } = await getPlaiceholder(file);

  console.log(pixels);
} catch (err) {
  err;
}

// Logs
// [
//   // Row 1
//   [
//     // Row 1, Column 1
//     { r: 179, g: 155, b: 178 },
//     // Row 1, Column 2
//     { r: 246, g: 152, b: 170 },
//     // Row 1, Column 3
//     { r: 145, g: 106, b: 123 }
//   ],
//   // Row 2
//   [
//     // Row 2, Column 1
//     { r: 179, g: 155, b: 178 },
//     // Row 2, Column 2
//     { r: 246, g: 152, b: 170 },
//     // Row 2, Column 3
//     { r: 145, g: 106, b: 123 }
//   ],
// ]
```

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

### Limitation: Dynamic Values in JIT Mode

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/tailwind.mdx

Illustrates a limitation in Tailwind CSS's JIT mode where dynamic values cannot be used directly within `plaiceholder` classes. This example shows a non-working scenario with a dynamically generated class name.

```jsx
// ❌ NOT POSSIBLE
const Example = ({ src }) => (
  <div
    className={`plaiceholder-[{src}] transform scale-150 filter blur-2xl`}
  />;
);

```

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

### Prepare Packages for Publishing

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

Builds all packages in the monorepo, preparing them for publishing to npm.

```sh
pnpm build
```

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

### IntroHeader Component Usage

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/index.mdx

Demonstrates the usage of the IntroHeader component with headline and tagline props for displaying introductory information.

```jsx
import IntroHeader from "../../components/IntroHeader";

<IntroHeader
  headline="Beautiful image placeholders, without the hassle."
  tagline="Choose-your-own adventure, from pure CSS to SVG…"
/>
```

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

### Create GitHub Release

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

Creates a new release on GitHub using the newly pushed tag.

```APIDOC
GitHub Releases API:
POST /repos/{owner}/{repo}/releases

Parameters:
- owner: The owner of the repository (e.g., 'joe-bell')
- repo: The name of the repository (e.g., 'plaiceholder')
- tag_name: The name of the tag (e.g., 'vX.X.X')
- name: The name of the release
- body: The text of the release (often generated from changelogs)

Example:
Create a release using the GitHub CLI:
git tag v1.0.0
git push origin v1.0.0
github release create v1.0.0 --title "v1.0.0" --notes "Initial release"
```

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

### Version Packages and Generate Changelogs

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

Bumps package versions and generates CHANGELOG.md files based on previously created changesets.

```sh
pnpm changeset version
```

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

### Tag and Push Release

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

Creates a Git tag for the release version and pushes the commit and tag to the remote repository.

```sh
git tag vX.X.X
git push
git push origin refs/tags/vX.X.X
```

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

### Run Project Scripts

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

Executes scripts defined in the root package.json. For package-specific scripts, use the --filter flag.

```sh
pnpm <script-name>
pnpm <script-name> --filter <package-name>
```

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

### Plaiceholder Implementation README License Acknowledgement

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

This markdown snippet provides the required license and acknowledgement section for the README.md file of a Plaiceholder implementation. It specifies the Apache-2.0 license and credits the original author, Joe Bell.

```markdown
## License

Apache-2.0 License © <!-- your project name -->

### Acknowledgements

#### [Joe Bell](https://github.com/joe-bell) ([Plaiceholder](https://github.com/joe-bell/plaiceholder))

Copyright © 2020-2022, Joe Bell. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License").
```

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

### Migrating Next.js Configuration

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/upgrading-to-3.mdx

Instructions for migrating a Next.js project's configuration file to support ESM, typically by renaming `next.config.js` to `next.config.mjs`.

```bash
Migrate your `next.config.js` to `next.config.mjs`  
   _(or `.ts` when supported)_
```

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

### Astro Project Structure

Source: https://github.com/joe-bell/plaiceholder/blob/main/examples/astro/README.md

This snippet details the typical file and folder organization within an Astro project. It highlights the roles of `public/` for static assets, `src/components/`, `src/layouts/`, and `src/pages/` for Astro components and pages.

```bash
/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json
```

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

### Publish Packages

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

Publishes all packages in the monorepo to npm. The -r flag indicates a recursive publish.

```sh
pnpm publish -r
```

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

### Add Changesets

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

Initiates the process of creating a changeset, which is used for managing releases and generating changelogs.

```sh
pnpm changeset
```

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

### PHP Plaiceholder Implementation

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/community.mdx

An alternative implementation of Plaiceholder for PHP environments, allowing developers to generate blurred image placeholders using PHP.

```php
<?php

// Example usage of php-plaiceholder (conceptual)
// require 'vendor/autoload.php';
// use Accudio\Plaiceholder\Plaiceholder;

// $plaiceholder = new Plaiceholder();
// $image = $plaiceholder->process('path/to/your/image.jpg');
// echo '<img src="data:image/png;base64,' . base64_encode($image) . '" alt="Blurred Placeholder">';

?>
```

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

### Configure Next.js with Plaiceholder

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/next.mdx

Wraps your Next.js configuration object with the `withPlaiceholder` function. This ensures proper integration and that Plaiceholder functions run correctly within the Next.js environment. Your Next.js config file must use the `.mjs` extension.

```javascript
// @ts-check
import withPlaiceholder from "@plaiceholder/next";

/**
 * @type {import('next').NextConfig}
 */
const config = {
  // your Next.js config
};

export default withPlaiceholder(config);
```

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

### Plaiceholder Implementation README Disclaimer

Source: https://github.com/joe-bell/plaiceholder/blob/main/CONTRIBUTING.md

This markdown snippet provides the required disclaimer to be placed at the top of a README.md file for any Plaiceholder implementation. It acknowledges the external maintenance and links to the original Plaiceholder project.

```markdown
<p align="center">
  An externally-maintained implementation of
  <strong>
     <a href="https://github.com/joe-bell/plaiceholder">
        Plaiceholder
     </a>
  </strong>
</p>

---

<!-- your readme content-->
```

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

### Apply Styles to CSS LQIP

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/tailwind.mdx

Shows how to combine the `plaiceholder` class with other Tailwind CSS utility classes to style the generated LQIP, such as applying transformations and blur effects.

```html
<!-- 
   based on the config above, returns a pure CSS LQIP for:
   `./public/image-slug.jpg`
-->
<div class="plaiceholder-[image-slug] transform scale-150 filter blur-2xl" />

```

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

### Migrating Tailwind CSS Configuration

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/upgrading-to-3.mdx

Guidance on migrating a Tailwind CSS project's configuration file to ESM, usually by renaming `tailwind.config.js` to `tailwind.config.mjs` or `tailwind.config.ts`.

```bash
Migrate your `tailwind.config.js` to `tailwind.config.mjs` or `tailwind.config.ts`
```

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

### Local Image Resolution in Node.js

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/upgrading-to-3.mdx

Demonstrates how to resolve local images using `getPlaiceholder` in a Node.js environment after upgrading to Plaiceholder 3.0. It reads a local file into a buffer and passes it to the function, extracting image metadata.

```javascript
import path from "node:path";
import fs from "node:fs/promises";

const getImage = async (src: string) => {
  const buffer = await fs.readFile(path.join("./public", src));

  const {
    metadata: { height, width },
    ...plaiceholder
  } = await getPlaiceholder(buffer, { size: 10 });

  return {
    ...plaiceholder,
    img: { src, height, width },
  };
};

// Usage
const { base64, img } = await getImage("/assets/image/example.jpg");
```

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

### Generate CSS LQIP with plaiceholder Class

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/tailwind.mdx

Demonstrates how to use the `plaiceholder-[image-slug]` class in HTML to generate a pure CSS LQIP for a specified image. The plugin resolves the image based on the configured resolver.

```html
<!-- 
   based on the config above, returns a pure CSS LQIP for:
   `./public/image-slug.jpg`
-->
<div class="plaiceholder-[image-slug]" />

```

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

### Plaiceholder getPlaiceholder Function

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

The core getPlaiceholder function takes an image input (Buffer) and optional configuration options to generate various placeholder formats. It leverages the Sharp library for image transformations.

```js
getPlaiceholder(input, options);
```

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

### Generate CSS Placeholder (Local Image)

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Generates CSS styles for a low-res placeholder, outputting as a JavaScript style object with linear-gradients, from a local image. Requires reading the file into a Buffer.

```js
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";

try {
  const file = await fs.readFile("/path-to-your-image.jpg");

  const { css } = await getPlaiceholder(file);

  console.log(css);
} catch (err) {
  err;
}

// Logs
// {
//   backgroundImage: "…"
//   backgroundPosition: "…"
//   backgroundSize: "…"
//   backgroundRepeat: "…"
// }
```

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

### Generate CSS Placeholder (Remote Image)

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Generates CSS styles for a low-res placeholder, outputting as a JavaScript style object with linear-gradients, from a remote image. Requires fetching the image and converting it to a Buffer.

```js
import { getPlaiceholder } from "plaiceholder";

try {
  const src = "https://images.unsplash.com/photo-1621961458348-f013d219b50c";

  const buffer = await fetch(src).then(async (res) =>
    Buffer.from(await res.arrayBuffer())
  );

  const { css } = await getPlaiceholder(buffer);

  console.log(css);
} catch (err) {
  err;
}

// Logs
// {
//   backgroundImage: "…"
//   backgroundPosition: "…"
//   backgroundSize: "…"
//   backgroundRepeat: "…"
// }
```

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

### Generate SVG Placeholder from Remote Image

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Fetches a remote image using its URL, converts it into an SVG placeholder using `getPlaiceholder`, and logs the SVG output. Requires `fetch` API.

```js
import { getPlaiceholder } from "plaiceholder";

try {
  const src = "https://images.unsplash.com/photo-1621961458348-f013d219b50c";

  const buffer = await fetch(src).then(async (res) =>
    Buffer.from(await res.arrayBuffer())
  );

  const { svg } = await getPlaiceholder(buffer);

  console.log(svg);
} catch (err) {
  err;
}

// Logs
// [
//   "svg",
//   { ...svgProps }
//   [
//     [
//       "rect",
//       { ...rectProps }
//     ],
//     ...etc
//   ]
// ]
```

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

### Generate SVG Placeholder from Local Image

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Reads a local image file and converts it into an SVG placeholder using `getPlaiceholder`. The SVG output is logged to the console. Requires Node.js `fs` module.

```js
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";

try {
  const file = await fs.readFile("/path-to-your-image.jpg");

  const { svg } = await getPlaiceholder(file);

  console.log(svg);
} catch (err) {
  err;
}

// Logs
// [
//   "svg",
//   { ...svgProps }
//   [
//     [
//       "rect",
//       { ...rectProps }
//     ],
//     ...etc
//   ]
// ]
```

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

### Configure Tailwind CSS with plaiceholder Plugin

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/tailwind.mdx

Adds the plaiceholder plugin to your Tailwind CSS configuration file (`tailwind.config.mjs`). This enables the plugin's functionality for generating LQIPs.

```js
// @ts-check
import plaiceholder from "@plaiceholder/tailwindcss";

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [plaiceholder()],
};

```

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

### Generate Base64 Placeholder (Local Image)

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Generates a Base64 encoded low-resolution image placeholder from a local file. Requires reading the file into a Buffer.

```js
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";

try {
  const file = await fs.readFile("/path-to-your-image.jpg");

  const { base64 } = await getPlaiceholder(file);

  console.log(base64);
} catch (err) {
  err;
}

// Logs
// data:image/jpeg;base64,/9j/2wBDAAYEBQY…
```

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

### Generate img Attributes from Image Metadata

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Demonstrates how to use image metadata (specifically height and width) obtained via Plaiceholder to generate essential attributes for an `<img>` tag.

```javascript
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";

try {
  const src = "/path-to-your-image.jpg";
  const file = await fs.readFile(src);

  const {
    metadata: { height, width },
  } = await getPlaiceholder(file);

  const img = { src, height, width };

  console.log(img);
} catch (err) {
  err;
}

// Logs
// {
//   src: '…',
//   width: …,
//   height: …,
// }
```

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

### Generate Base64 Placeholder (Remote Image)

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/usage.mdx

Generates a Base64 encoded low-resolution image placeholder from a remote image URL. Requires fetching the image and converting it to a Buffer.

```js
import { getPlaiceholder } from "plaiceholder";

try {
  const src = "https://images.unsplash.com/photo-1621961458348-f013d219b50c";

  const buffer = await fetch(src).then(async (res) =>
    Buffer.from(await res.arrayBuffer())
  );

  const { base64 } = await getPlaiceholder(buffer);

  console.log(base64);
} catch (err) {
  err;
}

// Logs
// data:image/jpeg;base64,/9j/2wBDAAYEBQY…
```

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

### Configure Tailwind CSS with Custom Resolver

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/tailwind.mdx

Configures the plaiceholder Tailwind CSS plugin with a custom resolver function. This function dictates how image paths are read and converted into buffers, allowing for custom image loading logic.

```js
// @ts-check
import fs from "node:fs";
import path from "node:path";
import plaiceholder from "@plaiceholder/tailwindcss";

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    plaiceholder({
      resolver: (src) =>
        fs.readFileSync(path.join("./public", `${src}.jpg`)),
    }),
  ],
};

```

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

### ESM Only Packages

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/faqs.mdx

This callout indicates that all plaiceholder packages are exclusively available in ECMAScript Module (ESM) format. This means they should be imported using `import` statements and are not compatible with CommonJS `require` syntax.

```typescript
import { Callout } from "nextra-theme-docs";

<Callout type="info">

**`plaiceholder` packages are [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).**

</Callout>
```

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

### ESM Only Packages Notification

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/upgrading-to-3.mdx

A notification indicating that Plaiceholder packages are now ESM only, requiring users to migrate their projects if they are currently using CommonJS.

```html
<Callout type="info">

**`plaiceholder` packages are [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).**

</Callout>
```

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

### Extract Image Source from plaiceholder Class

Source: https://github.com/joe-bell/plaiceholder/blob/main/docs/pages/docs/plugins/tailwind.mdx

Utilizes the `extractImgSrc` utility from `@plaiceholder/tailwindcss/utils` to parse a `plaiceholder` class string and extract the image source slug. This is useful for dynamic scenarios where the class name is generated.

```js
import { extractImgSrc } from "@plaiceholder/tailwindcss/utils";

const plaiceholder = "plaiceholder-[image-slug]";
const src = extractImgSrc(plaiceholder);

console.log(src);

// Logs
// "image-slug"

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.