delucis / astro-embed

Low-JavaScript embed components for Astro websites
https://astro-embed.netlify.app
MIT License
172 stars 25 forks source link

Link Preview Embed #73

Closed vasfvitor closed 3 months ago

vasfvitor commented 8 months ago

Hello, this aims to solve #30

Right now it's called astro-embed-og, to be renamed to astro-link-preview as mentioned in the issue.

TL:DR - How to go about styling and matching urls to the integration, right now it has a conditional class and matches any url.

I'm not sure how go about the best way to expose styles to allow end user customize without having to add !important. Could just remove all styles from the card and provide current styling as an example. Could make conditional classes. Any ideas?

yadayada from me

Initially It would retrieve all metatags, as OpenGraph, Twitter and a custom, if provided. Then it would utilize only those set by the user: <OpenGraph source="og" url="https://astro.build/blog/welcome-world/" /> <OpenGraph source="twitter" url="https://astro.build/blog/welcome-world/" />

But then I removed to simplify the code and because usually they are all the same data, except for custom, maybe. I was trying to mimick those cards: https://www.opengraph.xyz/url/https%3A%2F%2Fastro.build%2Fblog%2Fwelcome-world%2F

And now, how it would go to match urls in the integration? if needed

Still have to test tests.

I utilized the cache code from safeGet() but as with my current knowledge, I'm not sure it's needed or if it's being utilized properly.

Update (previous version images is commented out): Preview:

Thank you.

changeset-bot[bot] commented 8 months ago

🦋 Changeset detected

Latest commit: 6d4e635fc51cb6b57c2b37a9d1f68abcd70dccdc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages | Name | Type | | ----------------------------------------- | ----- | | @astro-community/astro-embed-utils | Patch | | @astro-community/astro-embed-integration | Minor | | @astro-community/astro-embed-link-preview | Minor | | astro-embed | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 3 months ago

Deploy Preview for astro-embed ready!

Name Link
Latest commit 6d4e635fc51cb6b57c2b37a9d1f68abcd70dccdc
Latest deploy log https://app.netlify.com/sites/astro-embed/deploys/6609e2049cdf16000873eb80
Deploy Preview https://deploy-preview-73--astro-embed.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.