Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(astro): add support for placeholders#452

Merged
kodiakhq[bot] merged 3 commits into
mainfrom
backgrounds
Jan 27, 2024
Merged

feat(astro): add support for placeholders#452
kodiakhq[bot] merged 3 commits into
mainfrom
backgrounds

Conversation

@ascorbic

Copy link
Copy Markdown
Owner

Adds support for automatic generation of loading placeholders for Astro. Supported types are: dominantColor, blurhash and lqip. These can either be passed as props to the Unpic Image or Source component, or set as a default in the Unpic Image Service config. These are only supported for images served from a CDN - local images are ignored. For a demo of the different types, see the deploy preview.

You can also set a static placeholder background by passing a colour, data URI or any valid CSS background value.

To choose the placeholder type, you can set it directly on an Unpic component:

---
import { Image } from "@unpic/astro";
---

<Image
  src="https://cdn.shopify.com/static/sample-images/garnished.jpeg"
  placeholder="dominantColor"
  width={800}
  height={600}
  alt="Lunch"
/>

Alternatively you can set a default for all images using the Image Service:

// astro.config.mjs
import { defineConfig } from "astro/config";
import { imageService } from "@unpic/astro/service";
export default defineConfig({
  image: {
    service: imageService({
      placeholder: "blurhash",
    }),
  },
});

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-solid ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-solid/deploys/65b4c1c1f22d930008d5ccae
😎 Deploy Preview https://deploy-preview-452--unpic-solid.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 97 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-qwik ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-qwik/deploys/65b4c1c1ff796b0008d6156b
😎 Deploy Preview https://deploy-preview-452--unpic-qwik.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance:
Accessibility:
Best Practices:
SEO:
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-astro ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-astro/deploys/65b4c1c1f44e71000886dfcf
😎 Deploy Preview https://deploy-preview-452--unpic-astro.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 99 (🟢 up 2 from production)
Accessibility: 100 (no change from production)
Best Practices: 92 (🔴 down 8 from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-preact canceled.

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-preact/deploys/65b4c1c1cedded00081d70ac

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-vue ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-vue/deploys/65b4c1c1ff796b0008d61567
😎 Deploy Preview https://deploy-preview-452--unpic-vue.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-next ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-next/deploys/65b4c1c126a5ae0008ba3f53
😎 Deploy Preview https://deploy-preview-452--unpic-next.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-docs ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-docs/deploys/65b4c1c1e0d3e500089befef
😎 Deploy Preview https://deploy-preview-452.preview.unpic.pics
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-angular ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-angular/deploys/65b4c1c16a6eb80008a11297
😎 Deploy Preview https://deploy-preview-452--unpic-angular.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-lit ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-lit/deploys/65b4c1c176e36100092edb67
😎 Deploy Preview https://deploy-preview-452--unpic-lit.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-webc ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-webc/deploys/65b4c1c138180e000881b868
😎 Deploy Preview https://deploy-preview-452--unpic-webc.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify

netlify Bot commented Jan 27, 2024

Copy link
Copy Markdown

Deploy Preview for unpic-svelte ready!

Name Link
🔨 Latest commit dde73ea
🔍 Latest deploy log https://app.netlify.com/sites/unpic-svelte/deploys/65b4c1c1f22d930008d5ccb0
😎 Deploy Preview https://deploy-preview-452--unpic-svelte.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance:
Accessibility:
Best Practices:
SEO:
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@kodiakhq kodiakhq Bot merged commit 4dbff26 into main Jan 27, 2024
@kodiakhq kodiakhq Bot deleted the backgrounds branch January 27, 2024 08:46
@mixie-bot mixie-bot Bot mentioned this pull request Jan 27, 2024
kodiakhq Bot pushed a commit that referenced this pull request Jan 27, 2024
🤖 I have created a release *beep* *boop*
---


<details><summary>@unpic/angular: 0.0.33</summary>

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>astro: 0.0.40</summary>

## [0.0.40](astro-v0.0.39...astro-v0.0.40) (2024-01-27)


### Features

* **astro:** add support for placeholders ([#452](#452)) ([4dbff26](4dbff26))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>core: 0.0.44</summary>

## [0.0.44](core-v0.0.43...core-v0.0.44) (2024-01-27)


### Features

* **astro:** add support for placeholders ([#452](#452)) ([4dbff26](4dbff26))
</details>

<details><summary>@unpic/lit: 0.0.25</summary>

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>@unpic/preact: 0.0.38</summary>

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>@unpic/qwik: 0.0.40</summary>

### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>@unpic/react: 0.1.7</summary>

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>@unpic/solid: 0.0.43</summary>

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>@unpic/svelte: 0.0.45</summary>

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>@unpic/vue: 0.0.44</summary>

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

<details><summary>@unpic/webc: 0.0.37</summary>

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @unpic/core bumped to 0.0.44
</details>

---
This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant