Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: preview card for status links #339

Merged
merged 18 commits into from
Dec 7, 2022
Merged

Conversation

ayoayco
Copy link
Member

@ayoayco ayoayco commented Dec 4, 2022

Implementation of Preview card for links included within status content.

Needs PR to masto.js: neet/masto.js#745

Fixes #335

Screenshots

Screenshot 2022-12-06 at 10 44 42 PM

image

image

image

@ayoayco ayoayco self-assigned this Dec 4, 2022
@stackblitz
Copy link

stackblitz bot commented Dec 4, 2022

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@netlify
Copy link

netlify bot commented Dec 4, 2022

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit 7443c1f
🔍 Latest deploy log https://app.netlify.com/sites/elk-zone/deploys/6390b43e9b33560008217825
😎 Deploy Preview https://deploy-preview-339--elk-zone.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 settings.

@ayoayco ayoayco marked this pull request as draft December 4, 2022 22:34
@ayoayco ayoayco changed the title feat: show card image feat: fancy card for status links Dec 4, 2022
@ayoayco ayoayco changed the title feat: fancy card for status links feat: preview card for status links Dec 4, 2022
@Shinigami92
Copy link
Collaborator

Just scrolled to the timeline a bit and I assume this is one example(?): https://deploy-preview-339--elk-zone.netlify.app/universeodon.com/@Sheril@mastodon.social/109457566567611895

  • The status card should be clickable
  • The status card should have round corners
  • The status card should have a little margin-top so it doesn't stick to potential images or other content

@Shinigami92
Copy link
Collaborator

Is this tackling the same issue as #161 ?

@ayoayco
Copy link
Member Author

ayoayco commented Dec 5, 2022

Is this tackling the same issue as #161 ?

i will check if this will also address video thumbnails @Shinigami92

@ayoayco
Copy link
Member Author

ayoayco commented Dec 5, 2022

  • The status card should be clickable

  • The status card should have round corners

  • The status card should have a little margin-top so it doesn't stick to potential images or other content

Thank you! Still just draft. :)

@Shinigami92 Shinigami92 added the c: feature Request for new feature label Dec 6, 2022
@ayoayco ayoayco marked this pull request as ready for review December 6, 2022 21:45
@ayoayco ayoayco marked this pull request as draft December 6, 2022 21:46
@ayoayco
Copy link
Member Author

ayoayco commented Dec 6, 2022

Messed up the git history. Will clean tomorrow. :)

@jasikpark
Copy link

:p does this use the mastodon homesserver rendered og image for less ddos / more privacy?

@ayoayco
Copy link
Member Author

ayoayco commented Dec 7, 2022

:p does this use the mastodon homesserver rendered og image for less ddos / more privacy?

Yes we're only using what the Mastodon server gives us

@ayoayco ayoayco force-pushed the feat/fancy-card-for-links branch 2 times, most recently from dbd8fba to 389fabb Compare December 7, 2022 15:41
@ayoayco ayoayco marked this pull request as ready for review December 7, 2022 15:42
@patak-dev
Copy link
Member

Looks awesome 🙌🏼

@ayoayco I see some images a bit blurry
image

https://deploy-preview-339--elk-zone.netlify.app/universeodon.com/@whitep4nth3r@indieweb.social/109473019716463638

I don't know if we can do much here though. Looks like the image itself is small, no? Should we avoid stretching in these cases and maybe make the preview smaller? 🤔

Let's merge it though, and we can check for improvements in further PRs

@patak-dev patak-dev merged commit 10167b5 into main Dec 7, 2022
@patak-dev patak-dev deleted the feat/fancy-card-for-links branch December 7, 2022 15:55
@ayoayco
Copy link
Member Author

ayoayco commented Dec 7, 2022

I think it is possible we are going to see inconsistencies, because instance servers generate these images, and I think some will generate lower quality ones to save resources.

Yeah I think we can improve by not stretching when we see it is a small thumbnail. Will write an issue for this. @patak-dev

</StatusSpoiler>
<StatusCard
v-if="status.reblog"
:status="status.reblog" border="~ rounded"
:actions="false"
/>
</div>
<StatusLink v-if="status.card" :card="status.card" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a lot of warnings in the Console about this component and I can't find it.
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think issue is in 7443c1f.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should not be in the main branch by now. Can you pull the latest? @LittleSound

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reverted in ae8f4df

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

feel free to correct me if this isn't the right solution @ayoayco

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That should be right. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: feature Request for new feature
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Preview card for links on posts
6 participants