Make number of <LinkPreview> description lines configurable (deluci…

…s#119)

Co-authored-by: Chris Swithinbank <[email protected]>

.changeset/wet-chairs-cry.md

@@ -0,0 +1,5 @@
+---
+'@astro-community/astro-embed-link-preview': minor
+---
+
+Make the number of lines displayed in the `<LinkPreview>` description configurable.

docs/src/content/docs/components/link-preview.mdx

@@ -95,6 +95,8 @@ The `<LinkPreview>` 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;
 }
 ```
 

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;
 	}