From 732a6cfac5038f82ccdd4df7c2dacf036deceae5 Mon Sep 17 00:00:00 2001 From: Caleb Jasik Date: Sat, 4 May 2024 17:17:56 -0500 Subject: [PATCH] Make number of `` description lines configurable (#119) Co-authored-by: Chris Swithinbank --- .changeset/wet-chairs-cry.md | 5 +++++ docs/src/content/docs/components/link-preview.mdx | 2 ++ packages/astro-embed-link-preview/LinkPreview.astro | 5 ++++- 3 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/wet-chairs-cry.md diff --git a/.changeset/wet-chairs-cry.md b/.changeset/wet-chairs-cry.md new file mode 100644 index 0000000..5fe0f32 --- /dev/null +++ b/.changeset/wet-chairs-cry.md @@ -0,0 +1,5 @@ +--- +'@astro-community/astro-embed-link-preview': minor +--- + +Make the number of lines displayed in the `` description configurable. diff --git a/docs/src/content/docs/components/link-preview.mdx b/docs/src/content/docs/components/link-preview.mdx index 81da738..dc82c18 100644 --- a/docs/src/content/docs/components/link-preview.mdx +++ b/docs/src/content/docs/components/link-preview.mdx @@ -95,6 +95,8 @@ The `` component supports the following API for controlling its sty --link-preview-padding-block: 0.5em; /** Round the corners of the link preview card. */ --link-preview-corners: 0.5em; + /** Set the maximum number of lines in the description to display. */ + --link-preview-description-lines: 3; } ``` diff --git a/packages/astro-embed-link-preview/LinkPreview.astro b/packages/astro-embed-link-preview/LinkPreview.astro index d154d0f..dcc9641 100644 --- a/packages/astro-embed-link-preview/LinkPreview.astro +++ b/packages/astro-embed-link-preview/LinkPreview.astro @@ -64,6 +64,7 @@ const domain = meta?.url ? new URL(meta.url).hostname.replace('www.', '') : ''; --lp-pad-x: var(--link-preview-padding-inline, 0); --lp-pad-y: var(--link-preview-padding-block, 0.5em); --lp-corners: var(--link-preview-corners, 0); + --lp-desc-lines: var(--link-preview-description-lines, 1); position: relative; width: var(--lp-width); @@ -86,7 +87,9 @@ const domain = meta?.url ? new URL(meta.url).hostname.replace('www.', '') : ''; } .link-preview__description { - white-space: nowrap; + display: -webkit-box; + -webkit-line-clamp: var(--lp-desc-lines); + -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }