cynber.dev

Appearance

Embed Components: Lemmy ​

This component allows you to embed Fediverse posts from Lemmy.

It supports both dark and light themes, and will automatically adjust based on the theme of the site. You can give it a try on this page by toggling the theme, using the button in the top right corner.

It is versatile, letting you choose which elements of the post to display, and how many lines of text to show for the title and excerpt. There is also support for an optional header card, which can be used to provide context for the embedded content.

Demo ​

Demonstration of the Lemmy Embed ComponentJanuary 27, 2025
This post could not be loaded.
It may have been deleted or removed.

You can try viewing it here.
This post could not be loaded.
It may have been deleted or removed.

You can try viewing it here.
This post could not be loaded.
It may have been deleted or removed.

You can try viewing it here.

If a post is deleted or removed, or otherwise inaccessible, the component will display the following message:

This post could not be loaded.
It may have been deleted or removed.

You can try viewing it here.

Usage ​

Similar to the other card components

  • You can call a header card for the container
  • You can specify the number of lines to display for the card title and card excerpt
  • You can also hide certain elements of the card.

Basic Usage:

vue
<EmbedLemmy
  :links="[
    'https://lemmy.ca/post/6890347',
  ]"
/>
Which will display the following
This post could not be loaded.
It may have been deleted or removed.

You can try viewing it here.

Props ​

  • links - An array of Lemmy post URLs to embed.
  • Hide props:
    • hideUser - Hide the user who posted the content.
    • hideCommunity - Hide the community the content was posted in.
    • hideTitle - Hide the title of the post
    • hideBanner - Hide the image in the post. This includes image posts, as well as thumbnails for link posts.
    • hideExcerpt - Hide the text from the post body
    • hideScore - Hide the score of the post (net number of upvotes)
    • hideComments - Hide the number of comments on the post
    • hideDate - Hide the date the post was created
  • Header Bar:
    • headerTitle - The title of the header card
    • HeaderTitleLines - The number of lines to display for the header title
    • headerDate - The date in the header card
    • headerLink - A link for the header card
  • titleLines - The number of lines to display for the title
  • excerptLines - The number of lines to display for the excerpt

Here is a silly example using all the props, where only the banner is displayed:

vue
<EmbedLemmy
  :links="[
    'https://lemmy.ca/post/6890347',
  ]"
  :hideUser="true"
  :hideCommunity="true"
  :hideTitle="true"
  :hideBanner="false"
  :hideExcerpt="true" 
  :hideScore="true"
  :hideComments="true"
  :hideDate="true"
  headerTitle="A silly example using all the props"
  headerTitleLines="2"
  headerDate="2025-01-27"
  headerLink="https://example.com"
  :titleLines="2"
  :excerptLines="3"
/>
Which will display the following
A silly example using all the propsJanuary 27, 2025
This post could not be loaded.
It may have been deleted or removed.

You can try viewing it here.