search

TryGhost / Ghost

Independent technology for modern publishing, memberships, subscriptions and newsletters.
https://ghost.org
MIT License
47.63k stars 10.39k forks source link

Cannot generate assets (cards, admin-auth, etc) on local windows install #14278

Closed doncabreraphone closed 1 year ago

doncabreraphone commented 2 years ago

Issue Summary

Installed ghost ( Node.js version - found v16.14.0 | npm: '8.3.1' | Ghost-CLI version: 1.18.1 | Ghost version: 4.38.0 ) on my Windows 10 machine. cards.min.css don't seem to load on my local dev site, but it does on the editor.

Editor: image

Published: image

I touched NOTHING. This is a fresh install, tried six times.

Here's the Package.json file, cards should show up.

image

Additionally, when I try to go to http://localhost:2368/public/cards.min.css on my browser, I get a 404 error.

Lastly, someone reported the same issue in 2021: in this post, a guy reported the same issue I'm having. Sadly, he seems to have abandoned ghost because of it, because no more posts under his username were made and he didn't bother to fill a bug report.

Steps to Reproduce

  1. Install ghost through npm locally on Windows
  2. Start Ghost
  3. Add cards on any blog post
  4. Publish

Ghost Version

4.38

Node.js Version

16.14.0

How did you install Ghost?

Windows 10 (npm)

Database type

SQLite3

Browser & OS version

Chrome, Firefox, Windows 10

Relevant log / error output

{"name":"Log","hostname":"DESKTOP","pid":3668,"level":30,"req":{"meta":{"requestId":"34727ba4-f918-4ee5-aaf7-696ed49b2390","userId":null},"url":"/public/cards.min.css","method":"GET","originalUrl":"/public/cards.min.css","params":{},"headers":{"host":"localhost:2368","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0","accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8","accept-language":"en-US,en;q=0.5","accept-encoding":"gzip, deflate","connection":"keep-alive","cookie":"**REDACTED**","upgrade-insecure-requests":"1","sec-fetch-dest":"document","sec-fetch-mode":"navigate","sec-fetch-site":"none","sec-fetch-user":"?1"},"query":{}},"res":{"_headers":{"x-powered-by":"Express","cache-control":"no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0","content-type":"text/html; charset=utf-8","etag":"W/\"3207-66Cm6wMvq5dLdcDIxd1CmDjHrEc\"","vary":"Accept-Encoding","content-encoding":"gzip"},"statusCode":404,"responseTime":"40ms"},"msg":"","time":"2022-03-07T20:07:44.546Z","v":0}

Code of Conduct

github-actions[bot] commented 2 years ago

This issue is currently awaiting triage from @ErisDS. We're having a busy time right now, but we'll update this issue ASAP. If you have any more information to help us triage faster please leave us some comments. Thank you for understanding ๐Ÿ™‚

KhoaSuperman commented 2 years ago

I got same problem by install Ghost on local development (Windows) but it works on One-Click deployed on Droplet of Digital Ocean. That's strangle.

ErisDS commented 2 years ago

Sounds like there's likely a windows path bug somewhere, would be fab if someone would PR a fix for it :)

biswajit-saha commented 2 years ago

I can see the files in the content/public folder on Linux but on Windows the folder is empty. These two files are not being created on Windows.

doncabreraphone commented 2 years ago

That's the thing, right? They are not being created by windows for some reason, although the code to create them exists.

ErisDS commented 2 years ago

Seems like there is a general issue where none of the assets get generated on windows for some reason. Would love to get a PR to fix this ๐Ÿ˜„

cathysarisky commented 2 years ago

I'd like to fix this one, because it messes with my ability to develop on Windows, but I'm stumped. I've dug through the repository, but am not sure where the code that should generate these assets is. I'd love to help, but I need someone who isn't as much of a newbie to point me at the right code, if you have a moment. :)

vikaspotluri123 commented 2 years ago

@cathysarisky the card asset generation service is here: https://github.com/TryGhost/Ghost/blob/857dacbf16e73d72730b859fab4ea478d63c2a4f/ghost/core/core/frontend/services/card-assets/service.js

But the root cause might be the minifier, which is here: https://github.com/TryGhost/Ghost/tree/857dacbf16e73d72730b859fab4ea478d63c2a4f/ghost/minifier

keakarsu commented 2 years ago

Same problem is still going on. I'm not able to create some cards on windows.

9larsons commented 2 years ago

@vikaspotluri123 was on the right track. minifier uses tiny-glob which uses globalyzer, which isn't compatible with Windows. I checked the output within Ghost and also ran the tests in the globalyzer package - both gave incorrect output, confusing forward and back-slashes.

It didn't look like it was worth trying to fix globalyzer's root issue since it's meant to be an optimized package. I'd probably look to use something like node-glob which has Windows handling and much more robust testing libraries. Since this is just for the minifier, it seems fine to lose out on the performance gains for robustness.

If you like @ErisDS, I can make the swap within minifier. I don't know where you all land on cross-platform support, given just about any deployment won't be on Windows.

ErisDS commented 2 years ago

Hey @9larsons ๐Ÿ‘‹ really good find! So, I switched from using node-glob to tiny-glob in the minifier for performance reasons, because the minifier runs on boot & boot time is an important metric for us.

I totally missed that it didn't have windows compatibility.

As you said noone should be deploying out to Windows, but it is common & supported to develop themes on Windows.

It would be great to check how much of a perf-change we get with node-glob, and consider if it's worth it, if there's an alternative, or if because this is dev-mode only we could manage with a dirty check for windows and a regex for the slashes ๐Ÿ˜ฌ

9larsons commented 2 years ago

Thanks for the context! I should be able to take a look at that sometime in the next few days.

9larsons commented 2 years ago

I've confirmed the minified files appear on my local build and you can see the button properly as mentioned above as a reproduction. I've been seeing no practical/visible performance change, running both node-glob and tiny-glob side by side (both taking 1-2ms per call):

image

As a note, using node-glob resolved a unit test failure on Windows for loading card assets, which was pointing to this issue.

If it looks good I can submit the PR. Branch

ErisDS commented 2 years ago

Looks great, PR would be awesome

husterk commented 1 year ago

Has there been any update on this issue? It is greatly impacting my ability to develop Ghost themes on a Windows machine. I see that a PR to fix this issue has been sitting idle since Nov of last year.

mheland commented 1 year ago

Smooth solution: Instead of of running Node/Ghost from Windows PowerShell install WSL2 Windows Subsystem for Linux. From a Windows Administrator command prompt run wsl.exe --install and then reboot to complete installation of Ubuntu.

Install NodeJS v18, Ghost CLI and Ghost in Ubuntu. Creates Ghost root folder in /home directory.

Windows drives are mounted at /mnt - symlink 'external' windows directories with ex ln -s /mnt/c/code/ghost/content /home/ubuntu-user/content and edit them in Windows with VS Code etc

No additional config, Ghost shows up at http://localhost:2368/

husterk commented 1 year ago

@mheland Thanks for the tip. Unfortunately, I didn't get a chance to test it out. I ended up switching to a Mac (for various reasons) so now I am no longer encountering the issue. Ghost runs perfectly on a Mac. ๐Ÿ˜

testing-88 commented 1 year ago

Hi, I am using ghost v5.33.1, and I have the same issue How to load the public assets such as cards.min.js, cards.min.css etc ?

I am using Windows 10

Backspaze commented 1 year ago

@monty88

As a workaround while this issue remains, you can try this tip from GBJsolution.

djekanovic commented 1 year ago

Since this is a bug that still hasn't been fixed. Here is the CSS and JS you can copy and create those files on your local install and link them manually.

CSS

.kg-audio-card,.kg-audio-card *{box-sizing:border-box}.kg-audio-card{display:flex;width:100%;min-height:96px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(124,139,154,.25)}.kg-audio-card+.kg-audio-card{margin-top:1em}.kg-audio-thumbnail{display:flex;justify-content:center;align-items:center;width:80px;min-width:80px;margin:8px;background:0 0;object-fit:cover;aspect-ratio:1/1;border-radius:2px}.kg-audio-thumbnail.placeholder{background:var(--ghost-accent-color)}.kg-audio-thumbnail.placeholder svg{width:24px;height:24px;fill:#fff}.kg-audio-player-container{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;--seek-before-width:0%;--volume-before-width:100%;--buffered-width:0%}.kg-audio-title{width:100%;margin:8px 0 0;padding:8px 12px;border:0;font-family:inherit;font-size:1.15em;font-weight:700;line-height:1.15em;background:0 0}.kg-audio-player{display:flex;flex-grow:1;align-items:center;padding:8px 12px}.kg-audio-current-time,.kg-audio-time{font-family:inherit;font-size:.85em;font-weight:500;line-height:1.4em;white-space:nowrap}.kg-audio-current-time{min-width:38px;padding:0 4px}.kg-audio-time{width:56px;color:#ababab}.kg-audio-duration{padding:0 4px}.kg-audio-pause-icon,.kg-audio-play-icon{position:relative;bottom:1px;padding:0 4px 0 0;font-size:0;background:0 0}.kg-audio-hide{display:none!important}.kg-audio-pause-icon svg,.kg-audio-play-icon svg{width:14px;height:14px;fill:currentColor}.kg-audio-seek-slider{flex-grow:1;margin:0 4px}@media (max-width:640px){.kg-audio-seek-slider{display:none}}.kg-audio-playback-rate{min-width:37px;padding:0 4px;font-family:inherit;font-size:.85em;font-weight:600;line-height:1.4em;text-align:left;background:0 0;white-space:nowrap}@media (max-width:640px){.kg-audio-playback-rate{padding-left:8px}}.kg-audio-mute-icon,.kg-audio-unmute-icon{position:relative;bottom:-1px;padding:0 4px;font-size:0;background:0 0}@media (max-width:640px){.kg-audio-mute-icon,.kg-audio-unmute-icon{margin-left:auto}}.kg-audio-mute-icon svg,.kg-audio-unmute-icon svg{width:16px;height:16px;fill:currentColor}.kg-audio-volume-slider{width:80px}@media (max-width:400px){.kg-audio-volume-slider{display:none}}.kg-audio-seek-slider::before,.kg-audio-volume-slider::before{content:"";position:absolute;left:0;width:var(--seek-before-width)!important;height:4px;cursor:pointer;background-color:currentColor;border-radius:2px}.kg-audio-volume-slider::before{width:var(--volume-before-width)!important}.kg-audio-player-container input[type=range]{position:relative;-webkit-appearance:none;background:0 0;height:auto;padding:0;border:0}.kg-audio-player-container input[type=range]:focus,.kg-video-card input[type=range]:focus{outline:0}.kg-audio-player-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.kg-audio-player-container button,.kg-video-card button{display:flex;align-items:center;border:0;cursor:pointer}.kg-audio-player-container input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:rgba(124,139,154,.25);border-radius:2px}.kg-audio-player-container input[type=range]::-webkit-slider-thumb{position:relative;box-sizing:content-box;width:13px;height:13px;margin:-5px 0 0;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-audio-player-container input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}.kg-audio-player-container input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;background:rgba(124,139,154,.25);border-radius:2px}.kg-audio-player-container input[type=range]::-moz-range-progress{background:currentColor;border-radius:2px}.kg-audio-player-container input[type=range]::-moz-range-thumb{box-sizing:content-box;width:13px;height:13px;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-audio-player-container input[type=range]:active::-moz-range-thumb{transform:scale(1.2)}.kg-audio-player-container input[type=range]::-ms-track{width:100%;height:3px;border:solid transparent;color:transparent;cursor:pointer;background:0 0}.kg-audio-player-container input[type=range]::-ms-fill-lower{background:#fff}.kg-audio-player-container input[type=range]::-ms-fill-upper{background:currentColor}.kg-audio-player-container input[type=range]::-ms-thumb{box-sizing:content-box;width:13px;height:13px;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-audio-player-container input[type=range]:active::-ms-thumb{transform:scale(1.2)}.kg-blockquote-alt{font-size:1.5em;font-style:italic;line-height:1.7em;text-align:center;padding:0 2.5em}@media (max-width:800px){.kg-blockquote-alt{font-size:1.4em;padding-left:2em;padding-right:2em}}@media (max-width:600px){.kg-blockquote-alt{font-size:1.2em;padding-left:1.75em;padding-right:1.75em}}.kg-bookmark-card,.kg-bookmark-card *{box-sizing:border-box}.kg-bookmark-card,.kg-bookmark-publisher{position:relative;width:100%}.kg-bookmark-card a.kg-bookmark-container,.kg-bookmark-card a.kg-bookmark-container:hover{display:flex;text-decoration:none;border-radius:3px;border:1px solid rgb(124 139 154/25%);overflow:hidden;color:inherit}.kg-bookmark-content{display:flex;flex-direction:column;flex-grow:1;flex-basis:100%;align-items:flex-start;justify-content:flex-start;padding:20px;overflow:hidden}.kg-bookmark-title{font-size:1.5rem;line-height:1.4em;font-weight:600}.kg-bookmark-description{display:-webkit-box;font-size:1.4rem;line-height:1.5em;margin-top:3px;font-weight:400;max-height:44px;overflow-y:hidden;opacity:.7;-webkit-line-clamp:2;-webkit-box-orient:vertical}.kg-bookmark-metadata{display:flex;align-items:center;margin-top:22px;width:100%;font-size:1.4rem;font-weight:500;white-space:nowrap}.kg-bookmark-metadata>:not(img){opacity:.7}.kg-bookmark-icon{width:20px;height:20px;margin-right:6px}.kg-bookmark-author{display:inline}.kg-bookmark-publisher{text-overflow:ellipsis;overflow:hidden;max-width:240px;white-space:nowrap;display:block;line-height:1.65em}.kg-bookmark-metadata>span:nth-of-type(2){font-weight:400}.kg-bookmark-metadata>span:nth-of-type(2):before{content:"รขโ‚ฌยข";margin:0 6px}.kg-bookmark-metadata>span:last-of-type{overflow:hidden;text-overflow:ellipsis}.kg-bookmark-thumbnail{position:relative;flex-grow:1;min-width:33%}.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;border-radius:0 2px 2px 0}.kg-button-card,.kg-button-card *{box-sizing:border-box}.kg-button-card,.kg-button-card a.kg-btn{display:flex;position:static;align-items:center}.kg-button-card{width:100%;justify-content:center}.kg-button-card.kg-align-left{justify-content:flex-start}.kg-button-card a.kg-btn{padding:0 1.2em;height:2.4em;line-height:1em;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:.95em;font-weight:600;text-decoration:none;border-radius:5px;transition:opacity .2s ease-in-out}.kg-button-card a.kg-btn:hover{opacity:.85}.kg-button-card a.kg-btn-accent{background-color:var(--ghost-accent-color);color:#fff}.kg-callout-card,.kg-callout-card *{box-sizing:border-box}.kg-callout-card{display:flex;padding:1.2em 1.6em;border-radius:3px}.kg-callout-card-grey{background:rgba(124,139,154,.13)}.kg-callout-card-white{background:0 0;box-shadow:inset 0 0 0 1px rgba(124,139,154,.25)}.kg-callout-card-blue{background:rgba(33,172,232,.12)}.kg-callout-card-green{background:rgba(52,183,67,.12)}.kg-callout-card-yellow{background:rgba(240,165,15,.13)}.kg-callout-card-red{background:rgba(209,46,46,.11)}.kg-callout-card-pink{background:rgba(225,71,174,.11)}.kg-callout-card-purple{background:rgba(135,85,236,.12)}.kg-callout-card-accent{background:var(--ghost-accent-color);color:#fff}.kg-callout-card.kg-callout-card-accent a{color:#fff;text-decoration:underline}.kg-callout-card div.kg-callout-emoji{padding-right:.8em;line-height:1.25em;font-size:1.15em}.kg-callout-card div.kg-callout-text{font-size:.95em;line-height:1.5em}.kg-callout-card+.kg-callout-card{margin-top:1em}.kg-file-card,.kg-file-card *{box-sizing:border-box}.kg-file-card{display:flex}.kg-file-card a.kg-file-card-container{display:flex;align-items:stretch;justify-content:space-between;color:inherit;padding:6px;min-height:92px;border:1px solid rgb(124 139 154/25%);border-radius:3px;transition:all ease-in-out .35s;text-decoration:none;width:100%}.kg-file-card a.kg-file-card-container:hover{border:1px solid rgb(124 139 154/35%)}.kg-file-card-contents{display:flex;flex-direction:column;justify-content:space-between;margin:4px 8px;width:100%}.kg-file-card-title{font-size:1.15em;font-weight:700;line-height:1.3em}.kg-file-card-caption{font-size:.95em;line-height:1.3em;opacity:.6}.kg-file-card-title+.kg-file-card-caption{margin-top:-3px}.kg-file-card-metadata{display:inline;font-size:.825em;line-height:1.3em;margin-top:2px}.kg-file-card-filename{display:inline;font-weight:500}.kg-file-card-filesize{display:inline-block;font-size:.925em;opacity:.6}.kg-file-card-filesize:before{display:inline-block;content:"รขโ‚ฌยข";margin-right:4px}.kg-file-card-icon{position:relative;display:flex;align-items:center;justify-content:center;width:80px;min-width:80px;height:100%}.kg-file-card-icon:before{position:absolute;display:block;content:"";top:0;left:0;right:0;bottom:0;background:currentColor;opacity:.06;transition:opacity ease-in-out .35s;border-radius:2px}.kg-file-card a.kg-file-card-container:hover .kg-file-card-icon:before{opacity:.08}.kg-file-card-icon svg{width:24px;height:24px;color:var(--ghost-accent-color)}.kg-file-card-medium a.kg-file-card-container{min-height:72px}.kg-file-card-medium .kg-file-card-caption{opacity:1;font-weight:500}.kg-file-card-small a.kg-file-card-container{align-items:center;min-height:52px}.kg-file-card-small .kg-file-card-metadata{font-size:1em;margin-top:0}.kg-file-card-small .kg-file-card-icon svg{width:20px;height:20px}.kg-file-card+.kg-file-card{margin-top:1em}.kg-gallery-card,.kg-gallery-card *{box-sizing:border-box}.kg-gallery-card,.kg-image-card{--gap:1.2rem}.kg-gallery-card:not(.kg-card-hascaption)+.kg-gallery-card,.kg-gallery-card:not(.kg-card-hascaption)+.kg-image-card,.kg-image-card:not(.kg-card-hascaption)+.kg-gallery-card,.kg-image-card:not(.kg-card-hascaption)+.kg-image-card{margin-top:var(--gap)}.kg-gallery-container{position:relative}.kg-gallery-row{display:flex;flex-direction:row;justify-content:center}.kg-gallery-image img{display:block;margin:0;width:100%;height:100%}.kg-gallery-row:not(:first-of-type){margin:var(--gap)0 0}.kg-gallery-image:not(:first-of-type){margin:0 0 0 var(--gap)}@media (max-width:600px){.kg-gallery-card,.kg-image-card{--gap:0.6rem}}.kg-header-card,.kg-header-card *{box-sizing:border-box}.kg-header-card{padding:12vmin 4em;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.kg-header-card.kg-size-small{padding-top:14vmin;padding-bottom:14vmin;min-height:40vh}.kg-header-card.kg-size-large{padding-top:18vmin;padding-bottom:18vmin;min-height:80vh}.kg-header-card.kg-align-left{text-align:left;align-items:flex-start}.kg-header-card.kg-style-dark{background:#151515;color:#fff}.kg-header-card.kg-style-light{background-color:#fafafa}.kg-header-card.kg-style-accent{background-color:var(--ghost-accent-color)}.kg-header-card.kg-style-image{position:relative;background-color:#e7e7e7;background-size:cover;background-position:center}.kg-header-card.kg-style-image::before{position:absolute;display:block;content:"";top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,transparent,rgba(0,0,0,.2))}.kg-header-card h2.kg-header-card-header{font-size:5em;font-weight:700;line-height:1.1em;letter-spacing:-.01em;margin:0}.kg-header-card h2.kg-header-card-header strong{font-weight:800}.kg-header-card.kg-size-small h2.kg-header-card-header{font-size:4em}.kg-header-card.kg-size-large h2.kg-header-card-header{font-size:6em}.kg-header-card h3.kg-header-card-subheader{font-size:1.5em;font-weight:500;line-height:1.4em;margin:0;max-width:40em}.kg-header-card h2+h3.kg-header-card-subheader{margin:.35em 0 0}.kg-header-card h3.kg-header-card-subheader strong{font-weight:600}.kg-header-card.kg-size-small h3.kg-header-card-subheader{font-size:1.25em}.kg-header-card.kg-size-large h3.kg-header-card-subheader{font-size:1.75em}.kg-header-card:not(.kg-style-light) h2.kg-header-card-header,.kg-header-card:not(.kg-style-light) h3.kg-header-card-subheader{color:#fff}.kg-header-card.kg-style-accent h3.kg-header-card-subheader,.kg-header-card.kg-style-image h3.kg-header-card-subheader,.kg-product-card-rating-active.kg-product-card-rating-star svg{opacity:1}.kg-header-card.kg-style-image a.kg-header-card-button,.kg-header-card.kg-style-image h2.kg-header-card-header,.kg-header-card.kg-style-image h3.kg-header-card-subheader{z-index:999}.kg-header-card h2.kg-header-card-header a,.kg-header-card h3.kg-header-card-subheader a{color:var(--ghost-accent-color)}.kg-header-card.kg-style-accent h2.kg-header-card-header a,.kg-header-card.kg-style-accent h3.kg-header-card-subheader a,.kg-header-card.kg-style-image h2.kg-header-card-header a,.kg-header-card.kg-style-image h3.kg-header-card-subheader a{color:#fff}.kg-header-card a.kg-header-card-button{display:flex;position:static;align-items:center;fill:#fff;background:#fff;border-radius:3px;outline:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1.05em;font-weight:600;line-height:1em;text-align:center;text-decoration:none;letter-spacing:.2px;white-space:nowrap;text-overflow:ellipsis;color:#151515;height:2.7em;padding:0 1.2em;transition:opacity .2s ease}.kg-header-card h2+a.kg-header-card-button,.kg-header-card h3+a.kg-header-card-button{margin:1.75em 0 0}.kg-header-card a.kg-header-card-button:hover{opacity:.85}.kg-header-card.kg-size-large a.kg-header-card-button{font-size:1.1em;height:2.9em}.kg-header-card.kg-size-large h2+a.kg-header-card-button,.kg-header-card.kg-size-large h3+a.kg-header-card-button{margin-top:2em}.kg-header-card.kg-size-small a.kg-header-card-button{height:2.4em;font-size:1em}.kg-header-card.kg-size-small h2+a.kg-header-card-button,.kg-header-card.kg-size-small h3+a.kg-header-card-button{margin-top:1.5em}.kg-header-card.kg-style-dark a.kg-header-card-button,.kg-header-card.kg-style-image a.kg-header-card-button{background:#fff;color:#151515}.kg-header-card.kg-style-light a.kg-header-card-button{background:var(--ghost-accent-color);color:#fff}.kg-header-card.kg-style-accent a.kg-header-card-button{background:#fff;color:#151515}@media (max-width:640px){.kg-header-card{padding-left:1em;padding-right:1em}.kg-header-card h2.kg-header-card-header{font-size:3.5em}.kg-header-card.kg-size-large h2.kg-header-card-header{font-size:4em}.kg-header-card.kg-size-small h2.kg-header-card-header{font-size:3em}.kg-header-card h3.kg-header-card-subheader{font-size:1.25em}.kg-header-card.kg-size-large h3.kg-header-card-subheader{font-size:1.5em}.kg-header-card.kg-size-small h3.kg-header-card-subheader{font-size:1em}}.kg-nft-card,.kg-nft-card *{box-sizing:border-box}.kg-nft-card{display:flex;flex-direction:column;align-items:center;width:100%;margin-left:auto;margin-right:auto}.kg-nft-card a.kg-nft-card-container{position:static;display:flex;flex:auto;flex-direction:column;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,"avenir next",avenir,"helvetica neue",helvetica,ubuntu,roboto,noto,"segoe ui",arial,sans-serif;font-size:14px;font-weight:400;box-shadow:0 2px 6px -2px rgb(0 0 0/10%),0 0 1px rgb(0 0 0/40%);width:100%;max-width:512px;color:#222;background:#fff;border-radius:5px;transition:none}.kg-nft-card *{position:static}.kg-nft-metadata{padding:20px;width:100%}.kg-nft-image{border-radius:5px 5px 0 0;width:100%}.kg-nft-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.kg-nft-header h4.kg-nft-title{font-family:inherit;font-size:19px;font-weight:700;line-height:1.3em;min-width:unset;max-width:unset;margin:0;color:#222}.kg-nft-opensea-logo{margin-top:2px;width:100px;object-fit:scale-down}.kg-nft-card p.kg-nft-description,.kg-nft-creator{font-family:inherit;line-height:1.4em;margin:4px 0 0;color:#ababab}.kg-nft-creator span{font-weight:500;color:#222}.kg-nft-card p.kg-nft-description{font-size:14px;margin:20px 0 0;color:#222}.kg-product-card,.kg-product-card *{box-sizing:border-box}.kg-product-card{display:flex;align-items:center;flex-direction:column;width:100%}.kg-product-card-container{display:grid;grid-template-columns:auto min-content;align-items:center;grid-row-gap:16px;background:0 0;max-width:550px;padding:20px;width:100%;border-radius:5px;box-shadow:inset 0 0 0 1px rgb(124 139 154/25%)}.kg-product-card-image{grid-column:1/3;justify-self:center}.kg-product-card-title-container{grid-column:1/2}.kg-product-card h4.kg-product-card-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;text-decoration:none;font-weight:700;font-size:1.4em;margin-top:0;margin-bottom:0;line-height:1.15em}.kg-product-card-description{grid-column:1/3}.kg-product-card .kg-product-card-description ol,.kg-product-card .kg-product-card-description p,.kg-product-card .kg-product-card-description ul{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:.95em;line-height:1.5em;opacity:.7;margin-bottom:0}.kg-product-card .kg-product-card-description p:first-of-type{margin-top:-4px}.kg-product-card .kg-product-card-description ol,.kg-product-card .kg-product-card-description p:not(:first-of-type),.kg-product-card .kg-product-card-description ul{margin-top:.95em}.kg-product-card .kg-product-card-description li+li,.kg-toggle-card li+li{margin-top:.5em}.kg-product-card-rating{display:flex;align-items:center;grid-column:2/3;align-self:start;justify-self:end;padding-left:16px}@media (max-width:400px){.kg-product-card-title-container{grid-column:1/3}.kg-product-card-rating{grid-column:1/3;justify-self:start;margin-top:-15px;padding-left:0}}.kg-product-card-rating-star{height:28px;width:20px}.kg-product-card-rating-star svg{width:16px;height:16px;fill:currentColor;opacity:.15}.kg-product-card a.kg-product-card-button{justify-content:center;grid-column:1/3;display:flex;position:static;align-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:.95em;font-weight:600;line-height:1em;text-decoration:none;width:100%;height:2.4em;border-radius:5px;padding:0 1.2em;transition:opacity .2s ease-in-out}.kg-product-card a.kg-product-card-btn-accent{background-color:var(--ghost-accent-color);color:#fff}.kg-toggle-card,.kg-toggle-card *{box-sizing:border-box}.kg-toggle-card{background:0 0;box-shadow:inset 0 0 0 1px rgba(124,139,154,.25);border-radius:4px;padding:1.2em}.kg-toggle-card[data-kg-toggle-state=close] .kg-toggle-content{height:0;overflow:hidden;transition:opacity .5s ease,top .35s ease;opacity:0;top:-.5em;position:relative}.kg-toggle-content{height:auto;opacity:1;transition:opacity 1s ease,top .35s ease;top:0;position:relative}.kg-toggle-card[data-kg-toggle-state=close] svg{transform:unset}.kg-toggle-heading{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start}.kg-toggle-card h4.kg-toggle-heading-text{font-size:1.15em;font-weight:700;line-height:1.3em;margin-top:0;margin-bottom:0}.kg-toggle-content p:first-of-type{margin-top:.5em}.kg-toggle-card .kg-toggle-content ol,.kg-toggle-card .kg-toggle-content p,.kg-toggle-card .kg-toggle-content ul{font-size:.95em;line-height:1.5em;margin-top:.95em;margin-bottom:0}.kg-toggle-card-icon{height:24px;width:24px;display:flex;justify-content:center;align-items:center;margin-left:1em;background:0 0;border:0}.kg-toggle-heading svg{width:14px;color:rgba(124,139,154,.5);transition:all .3s;transform:rotate(-180deg)}.kg-toggle-heading path{fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;fill-rule:evenodd}.kg-toggle-card+.kg-toggle-card{margin-top:1em}.kg-video-card,.kg-video-card *{box-sizing:border-box}.kg-video-card{position:relative;--seek-before-width:0%;--volume-before-width:100%;--buffered-width:0%}.kg-video-card video{display:block;max-width:100%;height:auto}.kg-video-container{position:relative;display:flex;flex-direction:column;align-items:center}.kg-video-large-play-icon,.kg-video-overlay{display:flex;justify-content:center;align-items:center;transition:opacity .2s ease-in-out}.kg-video-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,rgba(0,0,0,.3)0,transparent 70%,transparent 100%);z-index:999}.kg-video-large-play-icon{width:72px;height:72px;padding:0;background:rgba(0,0,0,.5);border-radius:50%}.kg-video-large-play-icon svg{width:20px;height:auto;margin-left:2px;fill:#fff}.kg-video-player-container{position:absolute;bottom:0;width:100%;height:80px;background:linear-gradient(transparent,rgba(0,0,0,.5));z-index:999;transition:opacity .2s ease-in-out}.kg-video-player{position:absolute;bottom:0;display:flex;align-items:center;width:100%;z-index:9999;padding:12px 16px}.kg-video-current-time,.kg-video-time{font-family:inherit;font-size:.85em;font-weight:500;line-height:1.4em;white-space:nowrap}.kg-video-current-time{min-width:38px;padding:0 4px;color:#fff}.kg-video-time{color:rgba(255,255,255,.6)}.kg-video-duration{padding:0 4px}.kg-video-pause-icon,.kg-video-play-icon{position:relative;padding:0 4px 0 0;font-size:0;background:0 0}.kg-video-hide{display:none!important}.kg-video-hide-animated{opacity:0!important;transition:opacity .2s ease-in-out;cursor:initial}.kg-video-pause-icon svg,.kg-video-play-icon svg{width:14px;height:14px;fill:#fff}.kg-video-seek-slider{flex-grow:1;margin:0 4px}@media (max-width:520px){.kg-video-seek-slider{display:none}}.kg-video-playback-rate{min-width:37px;padding:0 4px;color:#fff;font-family:inherit;font-size:.85em;font-weight:600;line-height:1.4em;text-align:left;background:0 0;white-space:nowrap}@media (max-width:520px){.kg-video-playback-rate{padding-left:8px}}.kg-video-mute-icon,.kg-video-unmute-icon{position:relative;bottom:-1px;padding:0 4px;font-size:0;background:0 0}@media (max-width:520px){.kg-video-mute-icon,.kg-video-unmute-icon{margin-left:auto}}.kg-video-mute-icon svg,.kg-video-unmute-icon svg{width:16px;height:16px;fill:#fff}.kg-video-volume-slider{width:80px}@media (max-width:300px){.kg-video-volume-slider{display:none}}.kg-video-seek-slider::before,.kg-video-volume-slider::before{content:"";position:absolute;left:0;width:var(--seek-before-width)!important;height:4px;cursor:pointer;background-color:#ebeef0;border-radius:2px}.kg-video-volume-slider::before{width:var(--volume-before-width)!important}.kg-video-card input[type=range]{position:relative;-webkit-appearance:none;background:0 0;height:auto;padding:0;border:0}.kg-video-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.kg-video-card input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:rgba(255,255,255,.2);border-radius:2px}.kg-video-card input[type=range]::-webkit-slider-thumb{position:relative;box-sizing:content-box;width:13px;height:13px;margin:-5px 0 0;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-video-card input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}.kg-video-card input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;background:rgba(255,255,255,.2);border-radius:2px}.kg-video-card input[type=range]::-moz-range-progress{background:#ebeef0;border-radius:2px}.kg-video-card input[type=range]::-moz-range-thumb{box-sizing:content-box;width:13px;height:13px;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-video-card input[type=range]:active::-moz-range-thumb{transform:scale(1.2)}.kg-video-card input[type=range]::-ms-track{width:100%;height:3px;border:solid transparent;color:transparent;cursor:pointer;background:0 0}.kg-video-card input[type=range]::-ms-fill-lower{background:#fff}.kg-video-card input[type=range]::-ms-fill-upper{background:#ebeef0}.kg-video-card input[type=range]::-ms-thumb{box-sizing:content-box;width:13px;height:13px;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-video-card input[type=range]:active::-ms-thumb{transform:scale(1.2)}

JAVASCRIPT

!function(){const e=function(e){const t=e.querySelector(".kg-audio-player-container"),a=e.querySelector(".kg-audio-play-icon"),i=e.querySelector(".kg-audio-pause-icon"),o=e.querySelector(".kg-audio-seek-slider"),d=e.querySelector(".kg-audio-playback-rate"),r=e.querySelector(".kg-audio-mute-icon"),s=e.querySelector(".kg-audio-unmute-icon"),l=e.querySelector(".kg-audio-volume-slider"),n=e.querySelector("audio"),c=e.querySelector(".kg-audio-duration"),u=e.querySelector(".kg-audio-current-time");let g=[{rate:.75,label:"0.7รƒโ€”"},{rate:1,label:"1รƒโ€”"},{rate:1.25,label:"1.2รƒโ€”"},{rate:1.75,label:"1.7รƒโ€”"},{rate:2,label:"2รƒโ€”"}],v=null,m=1;const k=()=>{o.value=Math.floor(n.currentTime),u.textContent=h(o.value),t.style.setProperty("--seek-before-width",o.value/o.max*100+"%"),v=requestAnimationFrame(k)},y=e=>{e===o?t.style.setProperty("--seek-before-width",e.value/e.max*100+"%"):t.style.setProperty("--volume-before-width",e.value/e.max*100+"%")},h=e=>{const t=Math.floor(e/60),a=Math.floor(e%60);return${t}:${a<10?0${a}:${a}}},p=()=>{c.textContent=h(n.duration)},L=()=>{o.max=Math.floor(n.duration)},f=()=>{if(n.buffered.length>0){const e=Math.floor(n.buffered.end(n.buffered.length-1));t.style.setProperty("--buffered-width",e/o.max*100+"%")}};n.readyState>0?(p(),L(),f()):n.addEventListener("loadedmetadata",(()=>{p(),L(),f()})),a.addEventListener("click",(()=>{a.classList.add("kg-audio-hide"),i.classList.remove("kg-audio-hide"),n.play(),requestAnimationFrame(k)})),i.addEventListener("click",(()=>{i.classList.add("kg-audio-hide"),a.classList.remove("kg-audio-hide"),n.pause(),cancelAnimationFrame(v)})),r.addEventListener("click",(()=>{r.classList.add("kg-audio-hide"),s.classList.remove("kg-audio-hide"),n.muted=!1})),s.addEventListener("click",(()=>{s.classList.add("kg-audio-hide"),r.classList.remove("kg-audio-hide"),n.muted=!0})),d.addEventListener("click",(()=>{let e=g[(m+1)%5];m+=1,n.playbackRate=e.rate,d.textContent=e.label})),n.addEventListener("progress",f),o.addEventListener("input",(e=>{y(e.target),u.textContent=h(o.value),n.paused||cancelAnimationFrame(v)})),o.addEventListener("change",(()=>{n.currentTime=o.value,n.paused||requestAnimationFrame(k)})),l.addEventListener("input",(e=>{const t=e.target.value;y(e.target),n.volume=t/100}))},t=document.querySelectorAll(".kg-audio-card");for(let a=0;a<t.length;a++)e(t[a])}(),document.querySelectorAll(".kg-gallery-image img").forEach((function(e){const t=e.closest(".kg-gallery-image"),a=e.attributes.width.value/e.attributes.height.value;t.style.flex=a+" 1 0%"})),function(){const e=document.getElementsByClassName("kg-toggle-heading"),t=function(e){const t=e.target.closest(".kg-toggle-card");"close"===t.getAttribute("data-kg-toggle-state")?t.setAttribute("data-kg-toggle-state","open"):t.setAttribute("data-kg-toggle-state","close")};for(let a=0;a<e.length;a++)e[a].addEventListener("click",t,!1)}(),function(){const e=function(e){const t=e.querySelector(".kg-video-player"),a=e.querySelector(".kg-video-player-container"),i=e.querySelector(".kg-video-play-icon"),o=e.querySelector(".kg-video-pause-icon"),d=e.querySelector(".kg-video-seek-slider"),r=e.querySelector(".kg-video-playback-rate"),s=e.querySelector(".kg-video-mute-icon"),l=e.querySelector(".kg-video-unmute-icon"),n=e.querySelector(".kg-video-volume-slider"),c=e.querySelector("video"),u=e.querySelector(".kg-video-duration"),g=e.querySelector(".kg-video-current-time"),v=e.querySelector(".kg-video-large-play-icon"),m=e.querySelector(".kg-video-overlay");let k=[{rate:.75,label:"0.7รƒโ€”"},{rate:1,label:"1รƒโ€”"},{rate:1.25,label:"1.2รƒโ€”"},{rate:1.75,label:"1.7รƒโ€”"},{rate:2,label:"2รƒโ€”"}],y=null,h=1;c.loop&&(v.classList.add("kg-video-hide-animated"),m.classList.add("kg-video-hide-animated"));const p=()=>{d.value=Math.floor(c.currentTime),g.textContent=f(d.value),t.style.setProperty("--seek-before-width",d.value/d.max*100+"%"),y=requestAnimationFrame(p)},L=e=>{e===d?t.style.setProperty("--seek-before-width",e.value/e.max*100+"%"):t.style.setProperty("--volume-before-width",e.value/e.max*100+"%")},f=e=>{const t=Math.floor(e/60),a=Math.floor(e%60);return${t}:${a<10?0${a}:${a}}},q=()=>{u.textContent=f(c.duration)},b=()=>{d.max=Math.floor(c.duration)},S=()=>{if(c.buffered.length>0){const e=Math.floor(c.buffered.end(c.buffered.length-1));t.style.setProperty("--buffered-width",e/d.max*100+"%")}};c.readyState>0?(q(),b(),S(),c.autoplay&&(y=requestAnimationFrame(p),i.classList.add("kg-video-hide"),o.classList.remove("kg-video-hide")),c.muted&&(l.classList.add("kg-video-hide"),s.classList.remove("kg-video-hide"))):c.addEventListener("loadedmetadata",(()=>{q(),b(),S(),c.autoplay&&(y=requestAnimationFrame(p),i.classList.add("kg-video-hide"),o.classList.remove("kg-video-hide")),c.muted&&(l.classList.add("kg-video-hide"),s.classList.remove("kg-video-hide"))})),e.onmouseover=()=>{c.loop||a.classList.remove("kg-video-hide-animated")},e.onmouseleave=()=>{!!(c.currentTime>0&&!c.paused&&!c.ended&&c.readyState>2)&&a.classList.add("kg-video-hide-animated")},e.addEventListener("click",(()=>{if(!c.loop){!!(c.currentTime>0&&!c.paused&&!c.ended&&c.readyState>2)?x():E()}})),c.onplay=()=>{v.classList.add("kg-video-hide-animated"),m.classList.add("kg-video-hide-animated"),i.classList.add("kg-video-hide"),o.classList.remove("kg-video-hide")};const E=()=>{v.classList.add("kg-video-hide-animated"),m.classList.add("kg-video-hide-animated"),i.classList.add("kg-video-hide"),o.classList.remove("kg-video-hide"),c.play(),y=requestAnimationFrame(p)},x=()=>{o.classList.add("kg-video-hide"),i.classList.remove("kg-video-hide"),c.pause(),cancelAnimationFrame(y)};v.addEventListener("click",(e=>{e.stopPropagation(),E()})),i.addEventListener("click",(e=>{e.stopPropagation(),E()})),o.addEventListener("click",(e=>{e.stopPropagation(),x()})),s.addEventListener("click",(e=>{e.stopPropagation(),s.classList.add("kg-video-hide"),l.classList.remove("kg-video-hide"),c.muted=!1})),l.addEventListener("click",(e=>{e.stopPropagation(),l.classList.add("kg-video-hide"),s.classList.remove("kg-video-hide"),c.muted=!0})),r.addEventListener("click",(e=>{e.stopPropagation();let t=k[(h+1)%5];h+=1,c.playbackRate=t.rate,r.textContent=t.label})),c.addEventListener("progress",S),d.addEventListener("input",(e=>{e.stopPropagation(),L(e.target),g.textContent=f(d.value),c.paused||cancelAnimationFrame(y)})),d.addEventListener("change",(e=>{e.stopPropagation(),c.currentTime=d.value,c.paused||requestAnimationFrame(p)})),n.addEventListener("click",(e=>{e.stopPropagation()})),d.addEventListener("click",(e=>{e.stopPropagation()})),n.addEventListener("input",(e=>{e.stopPropagation();const t=e.target.value;L(e.target),c.volume=t/100}))},t=document.querySelectorAll(".kg-video-card");for(let a=0;a<t.length;a++)e(t[a])}();

djekanovic commented 1 year ago

I have spent like 3 hours figuring out what is going on, too bad there is no this in docs for Windows users to fix it, and it might throw people off using ghost just because of this bug :(
Please try to include it in docs, or find some hack to fix it :)

cathysarisky commented 1 year ago

Use WSL on Windows. Works great, no bug.

Sent from my iPhone

On May 13, 2023, at 9:16 PM, Dimitrije Djekanovic @.***> wrote:

๏ปฟ I have spent like 3 hours figuring out what is going on, too bad there is no this in docs for Windows users to fix it, and it might throw people off using ghost just because of this bug :( Please try to include it in docs, or find some hack to fix it :)

โ€” Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

github-actions[bot] commented 1 year ago

Our bot has automatically marked this issue as stale because there has not been any activity here in some time.

The issue will be closed soon if there are no further updates, however we ask that you do not post comments to keep the issue open if you are not actively working on a PR.

We keep the issue list minimal so we can keep focus on the most pressing issues. Closed issues can always be reopened if a new contributor is found. Thank you for understanding ๐Ÿ™‚