Preview not showing

[nickterhaar]

When searching through Alfred and using the Cmd+Y shortcut to preview the webpage, it's not showing the page. It briefly shows it and then goes to the blue background (darkmode background). It did work in the previous versions that used to show Tailwind V2. When switching to Tailwind V3 it's breaking on me. Not sure if it's something on my side or in general.

[clnt]

Hey @nickterhaar - Is your Alfred fully up-to-date? Reason for asking is I just realised when I bundled this last night I think my Alfred had a pending update.

Also are you running dark mode on your OS? As on the V3 site it has some form of auto detection which I have seen sometimes work and sometimes not depending on what browser I am using so it could be that and not the Alfred workflow itself.

I will see if I can reproduce the behaviour, it's not a feature I have used myself as I usually just slam enter :D Might explain why I always have so many tabs!

[nickterhaar]

Hey @clnt my Alfred is up-to-date (4.6.3[1285]). I am running dark mode on my OS, but just tried it with light mode and it stays at the darkmode of tailwindcss.com. I also switched to light mode on tailwindcss.com in Chrome as well as in Safari. Both did not change anything.

What happens is as follows:

• I type a search query
• I hit Cmd+Y
• It shortly flashes the correct page for a sec.
• It then only shows the background of the webpage with no text or whatsoever.

[marcusmoore]

Hello, I'm experiencing the same thing. I'm also on 4.6.3 [1285] but not running dark mode on macOS or tailwindcss.com.

My experience is the same as above but with one added point: if I hit escape to close the preview it causes Alfred to pinwheel for a few seconds. Closing the preview by clicking x seems to close it without pinwheeling.

[clnt]

Thanks both, I was able to reproduce the issue before updating my Alfred and it still persisted upon updating to the latest version and when checking a search result such as tw2 flex it displays the site fine which makes me isolate the issue to the default system dark mode introduced on the v3 site I think.

To my understanding this 'Quick Look' feature uses a built in browser within Alfred, as clicking to open in the default browser displays the website fine. This makes my hands tied quite a bit because all I am passing to a quicklookurl() method is the same URL that I am passing to the arg() method which is the URL taken to in the web browser.

Looking at the Tailwind documentation if I had the ability to set some form of localStorage and force the theme to light it could potentially work but I see no way of me being able to do that. However, I feel even if that was possible the built in browser could just not be handling the V3 version of the site as it does flash part of the page.

Running the workflow with debug mode on isn't printing out anything when I perform the preview action.

I tried just typing the URL to the site into the Alfred bar and using the preview action, when going to the /docs address it does the same behaviour as the search results. However when going to https://tailwindcss.com I had the following show after the website had flashed up:

I don't see a way to access the console for the built in browser.

This will probably be best reported as a bug to Alfred https://www.alfredapp.com/help/report-a-bug/

[marcusmoore]

Thanks for looking into it @clnt 😄

[nickterhaar]

@clnt thanks foor looking into it!

I personally don't think it's a thing on Alfred's side, more as it's on the webpage side of tailwindcss.com. When I previewed a couple of different websites through Alfred and Cmd+Y it worked okay. It's only the new tailwindcss.com that breaks in the preview.

I have a feeling that there is some sort of script running on the v3 docs page that is not supported by the Quick Look browser. Not clear what it is yet.

[clnt]

@marcusmoore @nickterhaar No problem, thanks for your input and reporting the issue.

I understand your thinking @nickterhaar - however the site runs fine for me in various browsers especially anything that uses Chromium for example. I am not sure what underlying tech Alfred are using to power their Quick Look browser but it could be that it just doesn't support something in a script as you say. If Alfred were to run a Chromium based browser for the Quick Look feature it could solve the issue as perhaps it could handle any potential script using new technology.

It would be great if it was possible to access the browser console to see what it's throwing an error on.

A quick search for the exact error message shown above when browsing to the main TailwindCSS site leads to results which all seem to point towards Next.js - for example this issue here https://github.com/mui/material-ui/issues/30343 (relating to colours, their documentation site is powered by Next.js and also has a system colour detection mode). But when previewing https://mui.com/getting-started/installation/ in a preview window loads the site successfully so it must be handling the Next.js

[nickterhaar]

Hmm I see. Thanks @clnt for all the effort looking into it!