astro-lqip 1.8.2 → 1.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +66 -68
  2. package/package.json +2 -5
package/README.md CHANGED
@@ -1,6 +1,4 @@
1
- <a href="https://astro-lqip.web.app/">
2
- ![astro-lqip](https://raw.githubusercontent.com/felixicaza/astro-lqip/HEAD/.github/assets/astro-lqip.jpg)
3
- </a>
1
+ [![astro-lqip](https://raw.githubusercontent.com/felixicaza/astro-lqip/HEAD/.github/assets/astro-lqip.jpg)](https://astro-lqip.web.app/)
4
2
 
5
3
  # 🖼️ astro-lqip
6
4
 
@@ -104,85 +102,85 @@ import backgroundImage from '/src/assets/images/background-image.png';
104
102
  >
105
103
  >
106
104
  > <details>
107
- > <summary>Example with absolute path</summary>
108
- > <br/>
105
+ > <summary>Example with absolute path</summary>
106
+ > <br/>
109
107
  >
110
- > ```astro
111
- > ---
112
- > import { Image, Picture, Background } from 'astro-lqip/components';
113
- > ---
108
+ > ```astro
109
+ > ---
110
+ > import { Image, Picture, Background } from 'astro-lqip/components';
111
+ > ---
114
112
  >
115
- > <Image src="/src/assets/images/image.png" alt="Cover Image" width={220} height={220} />
116
- > <Picture src="/src/assets/images/other-image.png" alt="Other Image" width={220} height={220} />
117
- > <Background src="/src/assets/images/background-image.png">
118
- > <section>
119
- > <p>Optimized background</p>
120
- > </section>
121
- > </Background>
113
+ > <Image src="/src/assets/images/image.png" alt="Cover Image" width={220} height={220} />
114
+ > <Picture src="/src/assets/images/other-image.png" alt="Other Image" width={220} height={220} />
115
+ > <Background src="/src/assets/images/background-image.png">
116
+ > <section>
117
+ > <p>Optimized background</p>
118
+ > </section>
119
+ > </Background>
122
120
  >
123
- > <style>
124
- > section {
125
- > background-image: var(--background);
126
- > background-size: cover;
127
- > background-position: center;
128
- > }
129
- > </style>
130
- > ```
121
+ > <style>
122
+ > section {
123
+ > background-image: var(--background);
124
+ > background-size: cover;
125
+ > background-position: center;
126
+ > }
127
+ > </style>
128
+ > ```
131
129
  > </details>
132
130
  >
133
131
  > <details>
134
- > <summary>Example with relative path</summary>
135
- > <br/>
132
+ > <summary>Example with relative path</summary>
133
+ > <br/>
136
134
  >
137
- > ```astro
138
- > ---
139
- > import { Image, Picture, Background } from 'astro-lqip/components';
140
- > ---
135
+ > ```astro
136
+ > ---
137
+ > import { Image, Picture, Background } from 'astro-lqip/components';
138
+ > ---
141
139
  >
142
- > <!-- assuming you are on the path `/src/pages/index.astro` -->
143
- > <Image src="../assets/images/image.png" alt="Cover Image" width={220} height={220} />
144
- > <Picture src="../assets/images/other-image.png" alt="Other Image" width={220} height={220} />
145
- > <Background src="../assets/images/background-image.png">
146
- > <section>
147
- > <p>Optimized background</p>
148
- > </section>
149
- > </Background>
140
+ > <!-- assuming you are on the path `/src/pages/index.astro` -->
141
+ > <Image src="../assets/images/image.png" alt="Cover Image" width={220} height={220} />
142
+ > <Picture src="../assets/images/other-image.png" alt="Other Image" width={220} height={220} />
143
+ > <Background src="../assets/images/background-image.png">
144
+ > <section>
145
+ > <p>Optimized background</p>
146
+ > </section>
147
+ > </Background>
150
148
  >
151
- > <style>
152
- > section {
153
- > background-image: var(--background);
154
- > background-size: cover;
155
- > background-position: center;
156
- > }
157
- > </style>
158
- > ```
149
+ > <style>
150
+ > section {
151
+ > background-image: var(--background);
152
+ > background-size: cover;
153
+ > background-position: center;
154
+ > }
155
+ > </style>
156
+ > ```
159
157
  > </details>
160
158
  >
161
159
  > <details>
162
- > <summary>Example with alias</summary>
163
- > <br/>
160
+ > <summary>Example with alias</summary>
161
+ > <br/>
164
162
  >
165
- > ```astro
166
- > ---
167
- > import { Image, Picture, Background } from 'astro-lqip/components';
168
- > ---
163
+ > ```astro
164
+ > ---
165
+ > import { Image, Picture, Background } from 'astro-lqip/components';
166
+ > ---
169
167
  >
170
- > <Image src="@/assets/images/image.png" alt="Cover Image" width={220} height={220} />
171
- > <Picture src="@/assets/images/other-image.png" alt="Other Image" width={220} height={220} />
172
- > <Background src="@/assets/images/background-image.png">
173
- > <section>
174
- > <p>Optimized background</p>
175
- > </section>
176
- > </Background>
168
+ > <Image src="@/assets/images/image.png" alt="Cover Image" width={220} height={220} />
169
+ > <Picture src="@/assets/images/other-image.png" alt="Other Image" width={220} height={220} />
170
+ > <Background src="@/assets/images/background-image.png">
171
+ > <section>
172
+ > <p>Optimized background</p>
173
+ > </section>
174
+ > </Background>
177
175
  >
178
- > <style>
179
- > section {
180
- > background-image: var(--background);
181
- > background-size: cover;
182
- > background-position: center;
183
- > }
184
- > </style>
185
- > ```
176
+ > <style>
177
+ > section {
178
+ > background-image: var(--background);
179
+ > background-size: cover;
180
+ > background-position: center;
181
+ > }
182
+ > </style>
183
+ > ```
186
184
  > </details>
187
185
 
188
186
  Learn how to configure path aliasing in the [Astro documentation](https://docs.astro.build/en/guides/typescript/#import-aliases). If you want more examples of uses you can see the [Usage Tips](https://astro-lqip.web.app/usage-tips/) page.
@@ -257,7 +255,7 @@ The `<Background>` component supports the following props:
257
255
  #### `src` (string) — required
258
256
  The source of the background image located in `src` folder. It can be a static import, absolute path, relative path, alias path or remote URL.
259
257
 
260
- #### `lqip` — optional
258
+ #### `lqip` (string) — optional
261
259
  The LQIP type to use. It can be one of the following:
262
260
  - `base64` (default) — Base64-encoded LQIP image
263
261
  - `color` — Solid color placeholder
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "astro-lqip",
3
- "version": "1.8.2",
4
- "description": "🖼️ Native extended Astro components for generating low-quality image placeholders (LQIP), compatible with <img>, <picture> and CSS background images.",
3
+ "version": "1.8.3",
4
+ "description": "🖼️ Native extended Astro components for generating low-quality image placeholders (LQIP), compatible with `<Image>`, `<Picture>` and CSS background images.",
5
5
  "keywords": [
6
6
  "astro",
7
7
  "astro-component",
@@ -72,9 +72,6 @@
72
72
  "peerDependencies": {
73
73
  "astro": ">=3.3.0"
74
74
  },
75
- "engines": {
76
- "node": ">=22"
77
- },
78
75
  "scripts": {
79
76
  "build": "tsdown",
80
77
  "build:docs": "pnpm --filter ./docs -r build",