Attaching PDF files in preview mode

[soumendrak]

Is there any way to embed a PDF file like this?

[welpo]

Have you tried their HTML?

<object data="https://example.com/example.pdf" type="application/pdf" width="100%" height="1800px">
      <p>Unable to display PDF file? <a href="https://example.com/example.pdf">Download</a> instead.</p>
</object>

Doesn't look great on my mobile, though. Just a heads up.

[soumendrak]

I tried this but it is always coming as Download instead on the website.

<object data="https://github.com/soumendrak/website-v2/blob/main/static/pdfs/cv.pdf" type="application/pdf" width="100%" height="1800px">
      <p>Unable to display PDF file? <a href="https://github.com/soumendrak/website-v2/blob/main/static/pdfs/cv.pdf">Download</a> instead.</p>
</object>

What am I missing here? Thanks.

[welpo]

On the console I see:

Content-Security-Policy: The page’s settings blocked the loading of a resource (object-src) at https://github.com/soumendrak/website-v2/blob/main/static/pdfs/cv.pdf because it violates the following directive: “default-src 'self'”

I see two options:

1. Use a relative link for the object data, like <object data="/pdfs/cv.pdf"
2. Allow object-src connections to GitHub in the CSP

I tried the first one locally and it works.

[soumendrak]

I had to do both to make it work.

1. My CSP at config.toml for frame-src directive now looks like this:

{ 
  directive = "frame-src", 
  domains = ["player.vimeo.com", 
             "https://www.youtube-nocookie.com", 
             "http://127.0.0.1:1111/", 
             "https://www.soumendrak.com"] 
},

2. My HTML tag looks like this:

<object data="/pdfs/cv.pdf" type="application/pdf" width="100%" height="1800px">
      <p>Unable to display PDF file? <a href="/pdfs/cv.pdf">Download</a> instead.</p>
</object>

[welpo]

Interesting. Thanks for reporting back. Does it fail to load locally when you do zola serve (without the CSP changes)?