search

chinchang / web-maker

A blazing fast & offline frontend playground
https://webmaker.app
MIT License
2.57k stars 316 forks source link

Detatched Preview is referencing non-existent style.css file, detached preview iframe is only 300px x 150px #548

Closed nhogle closed 11 months ago

nhogle commented 11 months ago

Meta info

It looks like the preview.html should probably be referencing the bundled css file? Either that, or we just need to deploy the src/style.css file? If you look at the preview.html on the production site, we see:

<link rel="stylesheet" href="style.css">
<body>
    <iframe src="about://blank" frameborder="0" id="demo-frame" allowfullscreen></iframe>
    <script src="detached-window.js"></script>
</body>

But the main app index.html has:

<html>
  <!-- ... -->
  <head>
    <!-- ... -->
    <link href="./bundle.eef2b.css" rel="stylesheet">
  </head>
  <!-- ... -->
</html>

The result is that the embedded iframe in the detached preview is only 300px by 150px, not filling the preview window.

The reference to style.css produces a 404 error, since there is no /app/style.css file on the production site. Perhaps the src/style.css file should be deployed? It looks like gulpfile.js used to include it in the deliverables, but then it got commented out.

@chinchang : Your thoughts?

chinchang commented 11 months ago

This is fixed now in web app (chrome extension will follow). Thanks for reporting, Nick! The style.css wasn't actually necessary...was working before last release because of a cache. Last release removed the file and hence broke the preview. The required styles are now inlined.

nhogle commented 11 months ago

Great thank you for getting this fixed!!

I have been using the web app, it has been great! I'm curious what benefits I might get from using the chrome extension instead?

Cheers, -Nick

Sent from my mobile phone.

On Fri, Oct 27, 2023 at 2:34 AM Kushagra Gour @.***> wrote:

@nhogle https://github.com/nhogle Also, one thing I am curious about - do you use web app or chrome extension?

— Reply to this email directly, view it on GitHub https://github.com/chinchang/web-maker/issues/548#issuecomment-1782604532, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABEPL2CJP2TVYGX3YHWRMLYBN53LAVCNFSM6AAAAAA6R3KTHCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBSGYYDINJTGI . You are receiving this because you were mentioned.Message ID: @.***>

chinchang commented 11 months ago

Web app has more features, so you are good :)