feat: add preview in dashboard using iframe

[rinczefi-user]

Changes:

• ♻️ the useResumePreview hook is currently unused, because huge loading times
• 🚀 I refactored it to use the same functionality as here

Resume/blob/main/apps/client/src/pages/public/page.tsx#L81-L86)

• using iframe to render it and set resume in the useEffect((), [frameRef])

💪 It is fast and from the exploratory tests I've done locally, we can rely on it, as well.

Discussion in issue: #2005 (comment)

[rinczefi-user]

@AmruthPillai please review and merge if it's okay. Thank you!

[rinczefi-user]

Though in case the page's content overflows, the scrollbars will be visible.. 👇

The first CV has 2 pages and the first one is too full of content.

This can be resolved with setting the iframe.scrolling to "no".

<iframe
  ref={frameRef}
  title={resume.title}
  src="/artboard/preview"
  scrolling="no"
  style={{
    height: "100%",
    width: "100%",
    zoom: 0.35,
  }}
/>

After the fix:

[rinczefi-user]

There is only one deprecation warning, related to iframe.scrolling.
Didn't find a viable alternative, but this one is working as expected.

• the thing is that we need to set overflow: "hidden" in the iframe's document's HTML
  • https://github.com/AmruthPillai/Reactive-Resume/blob/main/apps/artboard/index.html#L2
  • or in the HTML's body: https://github.com/AmruthPillai/Reactive-Resume/blob/main/apps/artboard/index.html#L35
• this would mean that we'd need to make this part of static HTML to dynamic code (react)..

⚠️ 'scrolling' is deprecated.ts(6385)

commit: 4d4f28d

[rinczefi-user]

Review please 🙏
Thank you! 😄

cc. @AmruthPillai

[rinczefi-user]

Review please 🙏 Thank you! 😄

cc. @AmruthPillai

@AmruthPillai What do you think?

[rinczefi-user]

Review please 🙏 Thank you! 😄
cc. @AmruthPillai

@AmruthPillai What do you think?

Small reminder 😄 Thank you!

cc. @AmruthPillai

[rinczefi-user]

@AmruthPillai Please review 😄

[ektorasdj]

Hello @rinczefi-user !
I have tested this in my setup but the preview is zoomed in.

I have done all your changes as shown in your commits.

[ektorasdj]

It seems that this happens on Firefox. On Google chrome it shows ok.

[rinczefi-user]

It seems that this happens on Firefox. On Google chrome it shows ok.

Hmm.. I see that it's supported only in the new Firefox versions.. 🤔

• link: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom#browser_compatibility 👇

[rinczefi-user]

I'll try this suggestion 👇 later today, thanks!
https://stackoverflow.com/questions/4049342/how-can-i-zoom-an-html-element-in-firefox-and-opera