From e6763d804457e4fcd837c57260f9b64201dda3c2 Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Thu, 4 Apr 2024 07:04:56 +0900 Subject: [PATCH 01/13] Added downloadPoster attribute to LinkPreview --- packages/astro-embed-link-preview/LinkPreview.astro | 5 +++-- packages/astro-embed-link-preview/lib.ts | 13 +++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/astro-embed-link-preview/LinkPreview.astro b/packages/astro-embed-link-preview/LinkPreview.astro index d154d0f..9a2e30a 100644 --- a/packages/astro-embed-link-preview/LinkPreview.astro +++ b/packages/astro-embed-link-preview/LinkPreview.astro @@ -4,11 +4,12 @@ import { parseOpenGraph } from './lib'; export interface Props { /** URL to fetch Open Graph data. */ id: string; + downloadPoster?: boolean; } -const { id } = Astro.props; +const { id, downloadPoster } = Astro.props; -const meta = await parseOpenGraph(id); +const meta = await parseOpenGraph(id, downloadPoster); const domain = meta?.url ? new URL(meta.url).hostname.replace('www.', '') : ''; --- diff --git a/packages/astro-embed-link-preview/lib.ts b/packages/astro-embed-link-preview/lib.ts index 9735ee9..bd2db43 100644 --- a/packages/astro-embed-link-preview/lib.ts +++ b/packages/astro-embed-link-preview/lib.ts @@ -1,4 +1,5 @@ import { safeGetDOM } from '@astro-community/astro-embed-utils'; +import { getImage } from 'astro:assets'; /** Helper to get the `content` attribute of an element. */ const getContent = (el: Element | null) => el?.getAttribute('content'); @@ -10,7 +11,10 @@ const urlOrNull = (url: string | null | undefined) => * Loads and parses an HTML page to return Open Graph metadata. * @param pageUrl URL to parse */ -export async function parseOpenGraph(pageUrl: string) { +export async function parseOpenGraph( + pageUrl: string, + downloadPoster: boolean = false +) { const html = await safeGetDOM(pageUrl); if (!html) return; @@ -23,11 +27,16 @@ export async function parseOpenGraph(pageUrl: string) { getMetaProperty('og:title') || html.querySelector('title')?.textContent; const description = getMetaProperty('og:description') || getMetaName('description'); - const image = urlOrNull( + const imageURL = urlOrNull( getMetaProperty('og:image:secure_url') || getMetaProperty('og:image:url') || getMetaProperty('og:image') ); + + const image = + downloadPoster && imageURL + ? (await getImage({ src: imageURL, inferSize: true, format: 'webp' })).src + : imageURL; const imageAlt = getMetaProperty('og:image:alt'); const video = urlOrNull( getMetaProperty('og:video:secure_url') || From feb6104698e35d2371037a060d027603f9991cf3 Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Thu, 4 Apr 2024 07:05:10 +0900 Subject: [PATCH 02/13] Added downloadPoster attribute to Vimeo --- packages/astro-embed-vimeo/Vimeo.astro | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/astro-embed-vimeo/Vimeo.astro b/packages/astro-embed-vimeo/Vimeo.astro index 97fd4fc..2d5c45a 100644 --- a/packages/astro-embed-vimeo/Vimeo.astro +++ b/packages/astro-embed-vimeo/Vimeo.astro @@ -2,6 +2,7 @@ import { safeGet } from '@astro-community/astro-embed-utils'; import urlMatcher from './matcher'; import './Vimeo.css'; +import { getImage } from 'astro:assets'; export interface Props extends astroHTML.JSX.HTMLAttributes { /** Vimeo video ID or URL. */ @@ -14,6 +15,8 @@ export interface Props extends astroHTML.JSX.HTMLAttributes { params?: string; /** Label for the button that will play the video. Default label: `'Play'` */ playlabel?: string; + /** Download the poster image. */ + downloadPoster?: boolean; } const { @@ -22,6 +25,7 @@ const { posterQuality = 'default', params = '', playlabel = 'Play', + downloadPoster, style, ...attrs } = Astro.props as Props; @@ -46,6 +50,10 @@ if (!posterURL) { posterURL = thumbnail_large; } } +const posterSource = + downloadPoster && posterURL + ? (await getImage({ src: posterURL, inferSize: true, format: 'webp' })).src + : posterURL; let [searchString, t] = params.split('#t='); const searchParams = new URLSearchParams(searchString); @@ -58,7 +66,7 @@ const color = searchParams.get('color'); const styles = []; if (style) styles.push(style); if (color) styles.push(`--ltv-color: #${color}`); -if (posterURL) styles.push(`background-image: url('${posterURL}')`); +if (posterURL) styles.push(`background-image: url('${posterSource}')`); --- Date: Thu, 4 Apr 2024 07:05:23 +0900 Subject: [PATCH 03/13] Added downloadPoster attribute to YouTube --- packages/astro-embed-youtube/YouTube.astro | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/astro-embed-youtube/YouTube.astro b/packages/astro-embed-youtube/YouTube.astro index cfb4d10..319576c 100644 --- a/packages/astro-embed-youtube/YouTube.astro +++ b/packages/astro-embed-youtube/YouTube.astro @@ -1,6 +1,7 @@ --- import 'lite-youtube-embed/src/lite-yt-embed.css'; import urlMatcher from './matcher'; +import { getImage } from 'astro:assets'; export interface Props extends astroHTML.JSX.HTMLAttributes { id: string; @@ -8,6 +9,7 @@ export interface Props extends astroHTML.JSX.HTMLAttributes { posterQuality?: 'max' | 'high' | 'default' | 'low'; params?: string; playlabel?: string; + downloadPoster?: boolean; } const { @@ -15,6 +17,7 @@ const { poster, posterQuality = 'default', title, + downloadPoster, ...attrs } = Astro.props as Props; @@ -35,6 +38,9 @@ const posterFile = }[posterQuality] || 'hqdefault'; const posterURL = poster || `https://i.ytimg.com/vi_webp/${videoid}/${posterFile}.webp`; +const posterSource = downloadPoster + ? (await getImage({ src: posterURL, inferSize: true, format: 'webp' })).src + : posterURL; const href = `https://youtube.com/watch?v=${videoid}`; --- @@ -43,7 +49,7 @@ const href = `https://youtube.com/watch?v=${videoid}`; {title} data-title={title} {...attrs} - style={`background-image: url('${posterURL}');`} + style={`background-image: url('${posterSource}');`} > {attrs.playlabel} From 1d95f1cf4941700cd4287f04ce48b81443feafec Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Thu, 4 Apr 2024 09:39:42 +0900 Subject: [PATCH 04/13] Add image domains to demo/astro.config.mjs --- demo/astro.config.mjs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/demo/astro.config.mjs b/demo/astro.config.mjs index 62a289f..39de9cb 100644 --- a/demo/astro.config.mjs +++ b/demo/astro.config.mjs @@ -4,5 +4,8 @@ import embed from 'astro-embed/integration'; // https://astro.build/config export default defineConfig({ + image: { + domains: ['i.ytimg.com', 'i.vimeocdn.com', 'astro.build'], + }, integrations: [embed(), mdx()], }); From 7495ca845fd46bb7eca24fc4e5adcb5a981995e5 Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Thu, 4 Apr 2024 09:41:36 +0900 Subject: [PATCH 05/13] Added downloadPoster attribute to the docs --- .../content/docs/components/link-preview.mdx | 26 +++++++++++++++++++ docs/src/content/docs/components/vimeo.mdx | 21 +++++++++++++++ docs/src/content/docs/components/youtube.mdx | 21 +++++++++++++++ 3 files changed, 68 insertions(+) diff --git a/docs/src/content/docs/components/link-preview.mdx b/docs/src/content/docs/components/link-preview.mdx index 81da738..4e5f1e4 100644 --- a/docs/src/content/docs/components/link-preview.mdx +++ b/docs/src/content/docs/components/link-preview.mdx @@ -105,6 +105,32 @@ The `` component supports the following API for controlling its sty - `.link-preview--no-media`: Class applied to the card when it includes no image or video. - `.link-preview--no-metadata`: Class applied when metadata scraping failed, or no valid title was found. In this case the only contents of the card is the original URL link. +## Optional props + +In addition to the required `id` prop, the following props are available to customise how the `` component renders: + +### `downloadPoster` + +**Type:** `boolean` + +Download the poster image and host it on the same server as your website. + +This attribute can only be used if the `og:image` metadata exists. + +```astro + +``` + +To use the `downloadPoster` attribute, need to add the address of the image server to astro.config.mjs as follows: + +```js +export default defineConfig({ + image: { + domains: ['astro.build'], + }, +}); +``` + ## Standalone installation If you only need the `` component, you can install the package directly instead of the main `astro-embed` package: diff --git a/docs/src/content/docs/components/vimeo.mdx b/docs/src/content/docs/components/vimeo.mdx index b61bf1f..02f7121 100644 --- a/docs/src/content/docs/components/vimeo.mdx +++ b/docs/src/content/docs/components/vimeo.mdx @@ -110,6 +110,27 @@ If you want to customise this, for example to match the language of your website ``` +### `downloadPoster` + +**Type:** `boolean` + +Download the poster image and host it on the same server as your website. + +```astro + +``` + +To use the `downloadPoster` attribute, need to add the address of the image server to astro.config.mjs as follows: + + +```js +export default defineConfig({ + image: { + domains: ['i.vimeocdn.com'], + }, +}); +``` + ## Standalone installation If you only need the `` component, you can install the package directly instead of the main `astro-embed` package: diff --git a/docs/src/content/docs/components/youtube.mdx b/docs/src/content/docs/components/youtube.mdx index a9fba33..72ad08d 100644 --- a/docs/src/content/docs/components/youtube.mdx +++ b/docs/src/content/docs/components/youtube.mdx @@ -128,6 +128,27 @@ Set a visible title to overlay on the video. title="The Astro Community: where contributors find a home" /> +### `downloadPoster` + +**Type:** `boolean` + +Download the poster image and host it on the same server as your website. + +```astro + +``` + +To use the `downloadPoster` attribute, need to add the address of the image server to astro.config.mjs as follows: + + +```js +export default defineConfig({ + image: { + domains: ['i.ytimg.com'], + }, +}); +``` + ## Standalone installation If you only need the `` component, you can install the package directly instead of the main `astro-embed` package: From 6abe8b3314bc912087481d460c75167857ad965f Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Wed, 17 Apr 2024 06:51:03 +0900 Subject: [PATCH 06/13] youtube src --- package-lock.json | 2 +- packages/astro-embed-youtube/YouTube.astro | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index d3b72f6..0fe8be0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13067,7 +13067,7 @@ }, "packages/astro-embed-utils": { "name": "@astro-community/astro-embed-utils", - "version": "0.1.1", + "version": "0.1.2", "license": "MIT", "dependencies": { "linkedom": "^0.14.26" diff --git a/packages/astro-embed-youtube/YouTube.astro b/packages/astro-embed-youtube/YouTube.astro index 319576c..21e13f7 100644 --- a/packages/astro-embed-youtube/YouTube.astro +++ b/packages/astro-embed-youtube/YouTube.astro @@ -38,9 +38,7 @@ const posterFile = }[posterQuality] || 'hqdefault'; const posterURL = poster || `https://i.ytimg.com/vi_webp/${videoid}/${posterFile}.webp`; -const posterSource = downloadPoster - ? (await getImage({ src: posterURL, inferSize: true, format: 'webp' })).src - : posterURL; +const posterSource = (await getImage({ src: posterURL, inferSize: true, format: 'webp' })).src const href = `https://youtube.com/watch?v=${videoid}`; --- From a1a30341d71104dc9c87809470e396c65b3e7bfc Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Wed, 17 Apr 2024 17:14:24 +0900 Subject: [PATCH 07/13] /public images can be used --- packages/astro-embed-vimeo/Vimeo.astro | 22 +++++++++++++++------- packages/astro-embed-youtube/YouTube.astro | 12 +++++++++--- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/astro-embed-vimeo/Vimeo.astro b/packages/astro-embed-vimeo/Vimeo.astro index 2d5c45a..2ed0b7c 100644 --- a/packages/astro-embed-vimeo/Vimeo.astro +++ b/packages/astro-embed-vimeo/Vimeo.astro @@ -45,15 +45,23 @@ if (!posterURL) { { max: 1280, high: 640, default: 480, low: 120 }[posterQuality] || 480; const { thumbnail_large } = data?.[0] || {}; if (thumbnail_large.endsWith('d_640')) { - posterURL = thumbnail_large.slice(0, -3) + resolution; + posterURL = ( + await getImage({ + src: thumbnail_large.slice(0, -3) + resolution, + inferSize: true, + format: 'webp', + }) + ).src; } else { - posterURL = thumbnail_large; + posterURL = ( + await getImage({ + src: thumbnail_large, + inferSize: true, + format: 'webp' + }) + ).src; } } -const posterSource = - downloadPoster && posterURL - ? (await getImage({ src: posterURL, inferSize: true, format: 'webp' })).src - : posterURL; let [searchString, t] = params.split('#t='); const searchParams = new URLSearchParams(searchString); @@ -66,7 +74,7 @@ const color = searchParams.get('color'); const styles = []; if (style) styles.push(style); if (color) styles.push(`--ltv-color: #${color}`); -if (posterURL) styles.push(`background-image: url('${posterSource}')`); +if (posterURL) styles.push(`background-image: url('${posterURL}')`); --- {attrs.playlabel} From cb986d6c28650f306c542da41f7573e153425775 Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Wed, 17 Apr 2024 17:28:15 +0900 Subject: [PATCH 08/13] delete downloadPoster prop --- packages/astro-embed-link-preview/LinkPreview.astro | 5 ++--- packages/astro-embed-vimeo/Vimeo.astro | 3 --- packages/astro-embed-youtube/YouTube.astro | 2 -- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/astro-embed-link-preview/LinkPreview.astro b/packages/astro-embed-link-preview/LinkPreview.astro index 9a2e30a..d154d0f 100644 --- a/packages/astro-embed-link-preview/LinkPreview.astro +++ b/packages/astro-embed-link-preview/LinkPreview.astro @@ -4,12 +4,11 @@ import { parseOpenGraph } from './lib'; export interface Props { /** URL to fetch Open Graph data. */ id: string; - downloadPoster?: boolean; } -const { id, downloadPoster } = Astro.props; +const { id } = Astro.props; -const meta = await parseOpenGraph(id, downloadPoster); +const meta = await parseOpenGraph(id); const domain = meta?.url ? new URL(meta.url).hostname.replace('www.', '') : ''; --- diff --git a/packages/astro-embed-vimeo/Vimeo.astro b/packages/astro-embed-vimeo/Vimeo.astro index 2ed0b7c..2fbe961 100644 --- a/packages/astro-embed-vimeo/Vimeo.astro +++ b/packages/astro-embed-vimeo/Vimeo.astro @@ -15,8 +15,6 @@ export interface Props extends astroHTML.JSX.HTMLAttributes { params?: string; /** Label for the button that will play the video. Default label: `'Play'` */ playlabel?: string; - /** Download the poster image. */ - downloadPoster?: boolean; } const { @@ -25,7 +23,6 @@ const { posterQuality = 'default', params = '', playlabel = 'Play', - downloadPoster, style, ...attrs } = Astro.props as Props; diff --git a/packages/astro-embed-youtube/YouTube.astro b/packages/astro-embed-youtube/YouTube.astro index 1e2f189..2e56ee2 100644 --- a/packages/astro-embed-youtube/YouTube.astro +++ b/packages/astro-embed-youtube/YouTube.astro @@ -9,7 +9,6 @@ export interface Props extends astroHTML.JSX.HTMLAttributes { posterQuality?: 'max' | 'high' | 'default' | 'low'; params?: string; playlabel?: string; - downloadPoster?: boolean; } const { @@ -17,7 +16,6 @@ const { poster, posterQuality = 'default', title, - downloadPoster, ...attrs } = Astro.props as Props; From 00247324d9929034b235f3701742904c6ee74455 Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Wed, 17 Apr 2024 17:36:01 +0900 Subject: [PATCH 09/13] delete downloadPoster property --- packages/astro-embed-link-preview/lib.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/astro-embed-link-preview/lib.ts b/packages/astro-embed-link-preview/lib.ts index bd2db43..8acfac8 100644 --- a/packages/astro-embed-link-preview/lib.ts +++ b/packages/astro-embed-link-preview/lib.ts @@ -11,10 +11,7 @@ const urlOrNull = (url: string | null | undefined) => * Loads and parses an HTML page to return Open Graph metadata. * @param pageUrl URL to parse */ -export async function parseOpenGraph( - pageUrl: string, - downloadPoster: boolean = false -) { +export async function parseOpenGraph(pageUrl: string) { const html = await safeGetDOM(pageUrl); if (!html) return; @@ -33,10 +30,9 @@ export async function parseOpenGraph( getMetaProperty('og:image') ); - const image = - downloadPoster && imageURL - ? (await getImage({ src: imageURL, inferSize: true, format: 'webp' })).src - : imageURL; + const image = ( + await getImage({ src: imageURL, inferSize: true, format: 'webp' }) + ).src; const imageAlt = getMetaProperty('og:image:alt'); const video = urlOrNull( getMetaProperty('og:video:secure_url') || From a6a601f00173a4668408725d923bd3409d20a790 Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Wed, 17 Apr 2024 18:42:01 +0900 Subject: [PATCH 10/13] Conditional branching of remote images --- packages/astro-embed-vimeo/Vimeo.astro | 14 ++++++++++-- packages/astro-embed-youtube/YouTube.astro | 26 ++++++++++++++-------- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/packages/astro-embed-vimeo/Vimeo.astro b/packages/astro-embed-vimeo/Vimeo.astro index 2fbe961..5e52945 100644 --- a/packages/astro-embed-vimeo/Vimeo.astro +++ b/packages/astro-embed-vimeo/Vimeo.astro @@ -35,7 +35,17 @@ function extractID(idOrUrl: string) { } const videoid = extractID(id); -let posterURL = poster; +let posterURL = poster + ? poster.startsWith('http') + ? ( + await getImage({ + src: poster, + inferSize: true, + format: 'webp', + }) + ).src + : poster + : null; if (!posterURL) { const data = await safeGet(`https://vimeo.com/api/v2/video/${videoid}.json`); const resolution = @@ -54,7 +64,7 @@ if (!posterURL) { await getImage({ src: thumbnail_large, inferSize: true, - format: 'webp' + format: 'webp', }) ).src; } diff --git a/packages/astro-embed-youtube/YouTube.astro b/packages/astro-embed-youtube/YouTube.astro index 2e56ee2..b0bb41b 100644 --- a/packages/astro-embed-youtube/YouTube.astro +++ b/packages/astro-embed-youtube/YouTube.astro @@ -34,15 +34,23 @@ const posterFile = default: 'hqdefault', low: 'default', }[posterQuality] || 'hqdefault'; -const posterURL = - poster || - ( - await getImage({ - src: `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`, - inferSize: true, - format: 'webp', - }) - ).src; +const posterURL = poster + ? poster.startsWith('http') + ? ( + await getImage({ + src: poster, + inferSize: true, + format: 'webp', + }) + ).src + : poster + : ( + await getImage({ + src: `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`, + inferSize: true, + format: 'webp', + }) + ).src; const href = `https://youtube.com/watch?v=${videoid}`; --- From c831df49887b989b0f5a66b91ddc3b2f4d822acf Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Thu, 18 Apr 2024 20:53:22 +0900 Subject: [PATCH 11/13] Image Optimization Docs --- .../content/docs/components/link-preview.mdx | 24 +++++++++++++++++ docs/src/content/docs/components/vimeo.mdx | 26 ++++++++++++------- docs/src/content/docs/components/youtube.mdx | 25 +++++++++++------- 3 files changed, 55 insertions(+), 20 deletions(-) diff --git a/docs/src/content/docs/components/link-preview.mdx b/docs/src/content/docs/components/link-preview.mdx index 4e5f1e4..741725e 100644 --- a/docs/src/content/docs/components/link-preview.mdx +++ b/docs/src/content/docs/components/link-preview.mdx @@ -131,6 +131,30 @@ export default defineConfig({ }); ``` +## Poster Image Optimization + +To optimize the poster image, you can add the following configuration to your `astro.config.mjs` file to allow remote images: + +```js +export default defineConfig({ + image: { + domains: ['astro.build'], + }, +}); +``` + +If you are using a remote image with the `poster` prop, you will need to adjust the `domains` URL in the `astro.config.mjs` file to match the URL of the remote image. + +You can also allow all HTTPS URLs by setting the `remotePatterns` option in the `astro.config.mjs` file. + +```js +export default defineConfig({ + image: { + remotePatterns: [{ protocol: "https" }], + } +}); +``` + ## Standalone installation If you only need the `` component, you can install the package directly instead of the main `astro-embed` package: diff --git a/docs/src/content/docs/components/vimeo.mdx b/docs/src/content/docs/components/vimeo.mdx index 02f7121..4442f7c 100644 --- a/docs/src/content/docs/components/vimeo.mdx +++ b/docs/src/content/docs/components/vimeo.mdx @@ -110,27 +110,33 @@ If you want to customise this, for example to match the language of your website ``` -### `downloadPoster` +## Poster Image Optimization -**Type:** `boolean` +To optimize the poster image, you can add the following configuration to your `astro.config.mjs` file to allow remote images: -Download the poster image and host it on the same server as your website. - -```astro - +```js +export default defineConfig({ + image: { + domains: ['i.vimeocdn.com'], + }, +}); ``` -To use the `downloadPoster` attribute, need to add the address of the image server to astro.config.mjs as follows: +If you are using a remote image with the `poster` prop, you will need to adjust the `domains` URL in the `astro.config.mjs` file to match the URL of the remote image. +You can also allow all HTTPS URLs by setting the `remotePatterns` option in the `astro.config.mjs` file. ```js export default defineConfig({ - image: { - domains: ['i.vimeocdn.com'], - }, + image: { + remotePatterns: [{ protocol: "https" }], + } }); ``` +If you are using a local image with the `poster` prop, the image will not be optimized. + + ## Standalone installation If you only need the `` component, you can install the package directly instead of the main `astro-embed` package: diff --git a/docs/src/content/docs/components/youtube.mdx b/docs/src/content/docs/components/youtube.mdx index 72ad08d..a759819 100644 --- a/docs/src/content/docs/components/youtube.mdx +++ b/docs/src/content/docs/components/youtube.mdx @@ -128,27 +128,32 @@ Set a visible title to overlay on the video. title="The Astro Community: where contributors find a home" /> -### `downloadPoster` +## Poster Image Optimization -**Type:** `boolean` +To optimize the poster image, you can add the following configuration to your `astro.config.mjs` file to allow remote images: -Download the poster image and host it on the same server as your website. - -```astro - +```js +export default defineConfig({ + image: { + domains: ['i.ytimg.com'], + }, +}); ``` -To use the `downloadPoster` attribute, need to add the address of the image server to astro.config.mjs as follows: +If you are using a remote image with the `poster` prop, you will need to adjust the `domains` URL in the `astro.config.mjs` file to match the URL of the remote image. +You can also allow all HTTPS URLs by setting the `remotePatterns` option in the `astro.config.mjs` file. ```js export default defineConfig({ - image: { - domains: ['i.ytimg.com'], - }, + image: { + remotePatterns: [{ protocol: "https" }], + } }); ``` +If you are using a local image with the `poster` prop, the image will not be optimized. + ## Standalone installation If you only need the `` component, you can install the package directly instead of the main `astro-embed` package: From 153eedc4c828f2a78f4955c755ab7858cb367276 Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Fri, 19 Apr 2024 06:34:00 +0900 Subject: [PATCH 12/13] Using component --- packages/astro-embed-link-preview/LinkPreview.astro | 3 ++- packages/astro-embed-link-preview/lib.ts | 6 +----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/astro-embed-link-preview/LinkPreview.astro b/packages/astro-embed-link-preview/LinkPreview.astro index d154d0f..e8f391c 100644 --- a/packages/astro-embed-link-preview/LinkPreview.astro +++ b/packages/astro-embed-link-preview/LinkPreview.astro @@ -1,5 +1,6 @@ --- import { parseOpenGraph } from './lib'; +import { Image } from 'astro:assets'; export interface Props { /** URL to fetch Open Graph data. */ @@ -41,7 +42,7 @@ const domain = meta?.url ? new URL(meta.url).hostname.replace('www.', '') : ''; ) : ( meta.image && ( - {meta.imageAlt el?.getAttribute('content'); @@ -24,15 +23,12 @@ export async function parseOpenGraph(pageUrl: string) { getMetaProperty('og:title') || html.querySelector('title')?.textContent; const description = getMetaProperty('og:description') || getMetaName('description'); - const imageURL = urlOrNull( + const image = urlOrNull( getMetaProperty('og:image:secure_url') || getMetaProperty('og:image:url') || getMetaProperty('og:image') ); - const image = ( - await getImage({ src: imageURL, inferSize: true, format: 'webp' }) - ).src; const imageAlt = getMetaProperty('og:image:alt'); const video = urlOrNull( getMetaProperty('og:video:secure_url') || From 3cb480c7a93536664b7baa5ce907a3328f046a08 Mon Sep 17 00:00:00 2001 From: SAS NEWS <109570410+sas-news@users.noreply.github.com> Date: Fri, 19 Apr 2024 06:48:37 +0900 Subject: [PATCH 13/13] format --- docs/src/content/docs/components/link-preview.mdx | 6 +++--- docs/src/content/docs/components/vimeo.mdx | 7 +++---- docs/src/content/docs/components/youtube.mdx | 6 +++--- docs/tsconfig.json | 2 +- 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/src/content/docs/components/link-preview.mdx b/docs/src/content/docs/components/link-preview.mdx index 741725e..e105a4b 100644 --- a/docs/src/content/docs/components/link-preview.mdx +++ b/docs/src/content/docs/components/link-preview.mdx @@ -149,9 +149,9 @@ You can also allow all HTTPS URLs by setting the `remotePatterns` option in the ```js export default defineConfig({ - image: { - remotePatterns: [{ protocol: "https" }], - } + image: { + remotePatterns: [{ protocol: 'https' }], + }, }); ``` diff --git a/docs/src/content/docs/components/vimeo.mdx b/docs/src/content/docs/components/vimeo.mdx index 4442f7c..c1f8ffc 100644 --- a/docs/src/content/docs/components/vimeo.mdx +++ b/docs/src/content/docs/components/vimeo.mdx @@ -128,15 +128,14 @@ You can also allow all HTTPS URLs by setting the `remotePatterns` option in the ```js export default defineConfig({ - image: { - remotePatterns: [{ protocol: "https" }], - } + image: { + remotePatterns: [{ protocol: 'https' }], + }, }); ``` If you are using a local image with the `poster` prop, the image will not be optimized. - ## Standalone installation If you only need the `` component, you can install the package directly instead of the main `astro-embed` package: diff --git a/docs/src/content/docs/components/youtube.mdx b/docs/src/content/docs/components/youtube.mdx index a759819..417ad0c 100644 --- a/docs/src/content/docs/components/youtube.mdx +++ b/docs/src/content/docs/components/youtube.mdx @@ -146,9 +146,9 @@ You can also allow all HTTPS URLs by setting the `remotePatterns` option in the ```js export default defineConfig({ - image: { - remotePatterns: [{ protocol: "https" }], - } + image: { + remotePatterns: [{ protocol: 'https' }], + }, }); ``` diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 3fd7ae6..fbc2f5f 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,3 +1,3 @@ { "extends": "astro/tsconfigs/strictest" -} \ No newline at end of file +}