astro-lqip 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Felix Icaza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+<img src="./assets/cover.png" alt="Cover" width="896" height="280" style="object-fit: cover" />
+
+# 🖼️ astro-lqip
+
+[![GitHub Release](https://img.shields.io/github/v/release/felixicaza/astro-lqip?logo=npm)](https://www.npmjs.com/package/astro-lqip)
+[![GitHub License](https://img.shields.io/github/license/felixicaza/astro-lqip)](https://github.com/felixicaza/astro-lqip/blob/main/LICENSE)
+
+A integration built over the native Astro component that generates low-quality image placeholders (LQIP) for your images.
+
+## ⬇️ Installation
+
+NPM:
+
+```bash
+npm install astro-lqip
+```
+
+PNPM:
+
+```bash
+pnpm add astro-lqip
+```
+
+Yarn:
+
+```bash
+yarn add astro-lqip
+```
+
+## 🚀 Usage
+
+In your current Astro project, just replace the native Astro `<Picture>` component with the one provided by this integration.
+
+```astro
+- import { Picture } from 'astro:assets';
++ import { Picture } from 'astro-lqip/components';
+```
+
+## 📝 ToDo
+
+- [ ] Add support for Image component.
+- [ ] Add support for more lqip techniques.
+- [ ] Optimize current CSS usage.
+- [ ] Improve demo page.
+
+## 💡 Knowledge
+
+Since this integration is built on top of Astro's native `<Picture>` component, you can refer to the [Astro documentation](https://docs.astro.build/en/guides/images/#picture-) for more information on how to use it.
+
+## 🤝 Contributing
+If you wish to contribute to this project, you can do so by reading the [contribution guide](https://github.com/felixicaza/astro-lqip/blob/main/CONTRIBUTING.md).
+
+## 📄 License
+This project is licensed under the MIT License. See the [license file](https://github.com/felixicaza/astro-lqip/blob/main/LICENSE) for more details.

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "astro-lqip",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "astro",
+    "astro-component",
+    "astro-integration",
+    "image",
+    "lqip"
+  ],
+  "homepage": "https://github.com/felixicaza/astro-lqip",
+  "bugs": {
+    "url": "https://github.com/felixicaza/astro-lqip/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/felixicaza/astro-lqip.git"
+  },
+  "license": "MIT",
+  "author": "Felix Icaza",
+  "type": "module",
+  "exports": {
+    "./components": "./src/index.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "simple-git-hooks": {
+    "pre-commit": "pnpm nano-staged"
+  },
+  "nano-staged": {
+    "*": "pnpm lint:fix"
+  },
+  "dependencies": {
+    "lqip-modern": "2.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.30.0",
+    "@typescript-eslint/parser": "8.35.0",
+    "astro": "5.10.1",
+    "bumpp": "10.2.0",
+    "eslint": "9.30.0",
+    "eslint-plugin-astro": "1.3.1",
+    "eslint-plugin-jsonc": "2.20.1",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-package-json": "0.42.0",
+    "eslint-plugin-yml": "1.18.0",
+    "globals": "16.2.0",
+    "jiti": "2.4.2",
+    "nano-staged": "0.8.0",
+    "neostandard": "0.12.1",
+    "simple-git-hooks": "2.13.0"
+  },
+  "peerDependencies": {
+    "astro": ">=3.3.0"
+  },
+  "scripts": {
+    "build": "pnpm -r build",
+    "dev": "pnpm -r dev",
+    "lint": "eslint --cache .",
+    "lint:fix": "eslint --cache --fix .",
+    "preview": "pnpm -r preview",
+    "release": "bumpp -r"
+  }
+}

package/src/components/Picture.astro

@@ -0,0 +1,86 @@
+---
+import path from 'node:path'
+import fs from 'node:fs/promises'
+
+import lqipModern from 'lqip-modern'
+
+import { Picture as PictureComponent } from 'astro:assets'
+import type { Props as PictureProps } from 'astro/components/Picture.astro'
+
+type Props = PictureProps
+
+const { class: className, ...props } = Astro.props as Props
+
+let imageMetadata
+let lqip
+
+if (typeof props.src === 'string') {
+  imageMetadata = null
+} else if ('then' in props.src && typeof props.src.then === 'function') {
+  imageMetadata = (await props.src).default
+} else if ('src' in props.src) {
+  imageMetadata = props.src
+} else {
+  imageMetadata = null
+}
+
+if (import.meta.env.MODE === 'development') {
+  if (imageMetadata?.src?.startsWith('/@fs/')) {
+    const filePath = imageMetadata.src.replace(/^\/@fs/, '').split('?')[0]
+    const buffer = await fs.readFile(filePath)
+
+    const lqipModernBuffer = await lqipModern(buffer)
+    lqip = lqipModernBuffer.metadata?.dataURIBase64
+  }
+} else {
+  if (imageMetadata?.src?.startsWith('/_astro/')) {
+    const publicPath = path.join(process.cwd(), 'dist', imageMetadata.src)
+
+    try {
+      const buffer = await fs.readFile(publicPath)
+      const lqipModernBuffer = await lqipModern(buffer)
+      lqip = lqipModernBuffer.metadata?.dataURIBase64
+    } catch (e) {
+      lqip = undefined
+    }
+  }
+}
+---
+
+<style is:inline>
+  picture {
+    --opacity: 1;
+    --z-index: 0;
+
+    position: relative;
+    display: inline-block;
+  }
+
+  picture::after {
+    content: "";
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    pointer-events: none;
+    transition: opacity 1s;
+    opacity: var(--opacity);
+    z-index: var(--z-index);
+    background: var(--lqip-background);
+    background-size: cover;
+    background-position: 50% 50%;
+  }
+
+  picture img {
+    z-index: 1;
+    position: relative;
+    overflow: hidden;
+  }
+</style>
+
+<PictureComponent
+  {...props}
+  class={className}
+  pictureAttributes={{ style: { '--lqip-background': `url('${lqip}')` } }}
+  onload="parentElement.style.setProperty('--z-index', 1), parentElement.style.setProperty('--opacity', 0)"
+/>

package/src/index.ts

@@ -0,0 +1 @@
+export { default as Picture } from './components/Picture.astro'