FR: small link preview option

[jasikpark]

^ https://craft.do open graph embed

It'd be great to have a smaller format link preview that places the image at the beginning of the preview.

For example:

---
import { LinkPreview } from 'astro-embed';
---

<LinkPreview id="https://astro.build/blog/welcome-world/" size="small" />

[delucis]

Just noting that you can get something like this style using a little CSS:

.link-preview {
  --link-preview-width: 100%;
  flex-direction: row-reverse;
  column-gap: 1rem;
}

.link-preview :is(img, video) {
  width: 12rem;
  max-width: 40%;
}

Not quite the same as your example screenshot but places the media at the start and the rest to the right.

The component doesn’t currently accept a class prop but we could add one maybe to make it easier to have multiple custom styles for people who want it?

Right now you’d need to do something like this and target .small .link-preview:

<div class="small">
  <LinkPreview id="..." />
</div>

Would be nice to simplify that to:

<LinkPreview class="small" id="..." />

You could then wrap that up into a component for as many variants as you needed:

---
import { LinkPreview } from '@astro-community/astro-embed-link-preview';
import type { ComponentProps } from "astro/types";

type Props = ComponentProps<typeof LinkPreview> & {
  size: 'small' | 'default' | 'large';
}

const { size, ...props } = Astro.props;
---

<LinkPreview class={size} {...props} />

<style>
.small :global(.link-preview) {
  /* small styles */
}
.large :global(.link-preview) {
  /* large styles */
}
</style>