[WIP] feat: og image (dynamic route)

[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]
• Add default image for each file type [WIP]
  • DOC
  • CAD
  • PDF
  • Image
  • Notion
  • Sheet
  • Dataroom
  • Other Files
  • Slides

Currently og image looks something like this:

Last updated 12-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.