feat: og image for link (shared file)

[zaCKoZAck0]

Related to #629
[WIP]: add og images for file sharing url.

Draft:

• Dynamically render og image
  • Add icon according to file type
  • Add metadata according to file
• Add first page preview of file [Skipped]
• Option to disable file preview. [Skipped]

Currently og image looks something like this:

Last updated 30-10-24

[vercel]

@zaCKoZAck0 is attempting to deploy a commit to the mftsio Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[mfts]

@zaCKoZAck0 looks good for now. Let me know if you have any questions

[zaCKoZAck0]

I have read the CLA Document and I hereby sign the CLA

[mfts]

@zaCKoZAck0 are you still working on this issue?

[zaCKoZAck0]

Hi @mfts ,
I was exploring on how to show the preview but og image has a few limitations.

1. Can only render images and native JSX elements.
2. We can't utilize any element that relies on client-side functionality or interactivity / custom React components that use hooks, state, or other advanced React features are not supported, so we can't use our existing methods or most of the external libraries.

Few workarounds:

1. We can convert first page of our documents to image and then render it on the og.
   1.1. But issue with the above is we have to add multiple dependencies to convert each file type to an image.
   1.2. The fix would be to add preview of selected types for e.g. Image, PDFs etc. which would require minimum dependencies.
2. We can ask users to upload a preview? But it won't be as intuitive as other methods.

What path should I take next?, I've updated the current state of OG preview in the PR description.

[mfts]

@zaCKoZAck0 thanks for the transparency.

Perhaps you can then design a OG image that takes the name of the document, Papermark and then a standard papermark image. Something that we could swap out in the future as a standard image.

[mfts]

@zaCKoZAck0 let me know if you'd like to proceed with this PR?

[zaCKoZAck0]

Hi @mfts ,
Yes I would like to continue with the PR
I was just exploring some ideas for the placeholder image and office.com uses something like this which we can take inspiration from.

Here's from another office suite.

We can replace the grey area of the og image with a placeholder illustration image like this. That will let the user know what type of document it is.

[zaCKoZAck0]

Placeholder Image for PDF, DOC, CAD and Notion

[zaCKoZAck0]

For Sheet, Image, Slides, Dataroom and other files

@mfts please review the above placeholder images.

[mfts]

@zaCKoZAck0 these placeholders aren't really professional looking. I'm thinking we need to go basic and minimalist.

something like cal.com

[zaCKoZAck0]

Hi @mfts
I've created an OG (V2) that is minimal and according to papermark's design language. Let me know what you think.

If brand is present

If brand is not present

[zaCKoZAck0]

@mfts this is a more minimal option V3

[mfts]

@zaCKoZAck0 I like this one this one the best (without the avatar)

[zaCKoZAck0]

Thanks, I'll do the required changes.

[zaCKoZAck0]

Hi @mfts

It's ready for review now.

[mfts]

Looks super cool!

[mfts]

Thanks for working with me to get this over the line!

May I ask where you go the tiled background from. I may want to reuse it in other places :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
papermark	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 10:57am

[zaCKoZAck0]

Hi @mfts

Here's the background I used https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/#pattern-randomized

Use stroke width around 0.1 0.2 to get that github like grid 😁

[mfts]

/award 1500

awarding you and merging it later

[oss-gg]

Awarding zaCKoZAck0: 1500 points 🕹️ Well done! Check out your new contribution on oss.gg/zaCKoZAck0