@astro-community/astro-embed-link-preview 0.1.0

package/LinkPreview.astro

@@ -0,0 +1,107 @@
+---
+import { parseOpenGraph } from './lib';
+
+export interface Props {
+	/** URL to fetch Open Graph data. */
+	id: string;
+}
+
+const { id } = Astro.props;
+
+const meta = await parseOpenGraph(id);
+const domain = meta?.url ? new URL(meta.url).hostname.replace('www.', '') : '';
+---
+
+{
+	meta && meta.title ? (
+		<article
+			class:list={[
+				'link-preview',
+				{
+					'link-preview--has-video': meta.video && meta.videoType,
+					'link-preview--no-media': !(
+						(meta.video && meta.videoType) ||
+						meta.image
+					),
+				},
+			]}
+		>
+			<div class="link-preview__content">
+				<header>
+					<a class="link-preview__title" href={id}>
+						{meta.title}
+					</a>{' '}
+					{domain && <small class="link-preview__domain">{domain}</small>}
+				</header>
+				<small class="link-preview__description">{meta.description}</small>
+			</div>
+			{meta.video && meta.videoType ? (
+				<video controls preload="metadata" width="1200" height="630">
+					<source src={meta.video} type={meta.videoType} />
+				</video>
+			) : (
+				meta.image && (
+					<img
+						src={meta.image}
+						alt={meta.imageAlt || ''}
+						width="1200"
+						height="630"
+					/>
+				)
+			)}
+		</article>
+	) : (
+		<div class="link-preview link-preview--no-metadata">
+			<a href={id}>{id}</a>
+		</div>
+	)
+}
+
+<style>
+	/* Default styles */
+	.link-preview {
+		--lp-width: var(--link-preview-width, 30em);
+		--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);
+
+		position: relative;
+		width: var(--lp-width);
+		max-width: 100%;
+		display: flex;
+		flex-direction: column-reverse;
+		border-radius: var(--lp-corners);
+	}
+	.link-preview * {
+		margin: 0 !important;
+	}
+	.link-preview__content {
+		display: flex;
+		flex-direction: column;
+		padding: var(--lp-pad-y) var(--lp-pad-x);
+	}
+	.link-preview header {
+		display: flex;
+		flex-direction: column-reverse;
+	}
+
+	.link-preview__description {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.link-preview:not(.link-preview--has-video) a::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
+	.link-preview img,
+	.link-preview video {
+		aspect-ratio: 1200 / 630;
+		width: 100%;
+		height: auto;
+		object-fit: cover;
+		border-top-left-radius: var(--lp-corners);
+		border-top-right-radius: var(--lp-corners);
+	}
+</style>

package/README.md

@@ -0,0 +1,5 @@
+# `@astro-community/astro-embed-link-preview`
+
+This package contains a component for embedding Open Graph media and metadata previews in Astro projects.
+
+[Read the `<LinkPreview>` component docs](https://astro-embed.netlify.app/components/link-preview/).

package/index.ts

@@ -0,0 +1 @@
+export { default as LinkPreview } from './LinkPreview.astro';

package/lib.ts

@@ -0,0 +1,45 @@
+import { safeGetDOM } from '@astro-community/astro-embed-utils';
+
+/** Helper to get the `content` attribute of an element. */
+const getContent = (el: Element | null) => el?.getAttribute('content');
+/** Helper to filter out insecure or non-absolute URLs. */
+const urlOrNull = (url: string | null | undefined) =>
+	url?.slice(0, 8) === 'https://' ? url : null;
+
+/**
+ * Loads and parses an HTML page to return Open Graph metadata.
+ * @param pageUrl URL to parse
+ */
+export async function parseOpenGraph(pageUrl: string) {
+	const html = await safeGetDOM(pageUrl);
+	if (!html) return;
+
+	const getMetaProperty = (prop: string) =>
+		getContent(html.querySelector(`meta[property=${JSON.stringify(prop)}]`));
+	const getMetaName = (name: string) =>
+		getContent(html.querySelector(`meta[name=${JSON.stringify(name)}]`));
+
+	const title =
+		getMetaProperty('og:title') || html.querySelector('title')?.textContent;
+	const description =
+		getMetaProperty('og:description') || getMetaName('description');
+	const image = urlOrNull(
+		getMetaProperty('og:image:secure_url') ||
+			getMetaProperty('og:image:url') ||
+			getMetaProperty('og:image')
+	);
+	const imageAlt = getMetaProperty('og:image:alt');
+	const video = urlOrNull(
+		getMetaProperty('og:video:secure_url') ||
+			getMetaProperty('og:video:url') ||
+			getMetaProperty('og:video')
+	);
+	const videoType = getMetaProperty('og:video:type');
+	const url =
+		urlOrNull(
+			getMetaProperty('og:url') ||
+				html.querySelector("link[rel='canonical']")?.getAttribute('href')
+		) || pageUrl;
+
+	return { title, description, image, imageAlt, url, video, videoType };
+}

package/matcher.ts

@@ -0,0 +1,7 @@
+// Matches any HTTPS URL.
+const urlPattern = /(https:\/\/\S+)/;
+
+export default function urlMatcher(url: string): string | undefined {
+	const match = url.match(urlPattern);
+	return match?.[0];
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@astro-community/astro-embed-link-preview",
+  "version": "0.1.0",
+  "description": "Component to embed a website’s OpenGraph image and metadata on your Astro site",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./matcher": "./matcher.ts"
+  },
+  "files": [
+    "lib.ts",
+    "index.ts",
+    "matcher.ts",
+    "LinkPreview.astro"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/delucis/astro-embed",
+    "directory": "packages/astro-embed-link-preview"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "embeds",
+    "open-graph"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/delucis/astro-embed/issues"
+  },
+  "homepage": "https://astro-embed.netlify.app/components/link-preview/",
+  "dependencies": {
+    "@astro-community/astro-embed-utils": "^0.1.1"
+  }
+}