FR: small link preview option #190

Activity

1. delucis commented on May 16, 2025

   

   delucis

   on May 16, 2025

   Owner

   More actions

   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>
2. Repository owner locked and limited conversation to collaborators on Jan 6, 2026
3. delucis

   converted this issue into a discussion #279 on Jan 6, 2026