Webstudio
Log in

Join the Webstudio community

Home
Members
Nateaúx
N
Nateaúx
Offline, last seen 3 months ago
Joined December 13, 2024
NNateaúx
·

Resource loading on built website

Hey, I have finally finished the first version of this website, and everything works perfect when built and hosted by webstudio here: https://clickett-beta.wstd.io/
When I use the CLI to build the project and enter the localhost, a couple things are no longer working.
On the downloads page, I have 5 images pulled from various places externally, such as github links for the 3 large images: example
These are all not showing on the localhost, as well as when hosted on vercel.
Here is the download page working as it should: https://clickett-beta.wstd.io/download
Here is the vercel-hosted one not working: https://clickett.app/download
(Just cancel the automatic download)

The 3 problems:
  • Images from external links return 404
  • Favicon does not load (return 400)
  • Downloaded file is null (0 bytes)
I have attached an image of the errors in the console which is the same on the localhost and vercel host
It looks like webstudio has added to the beginning of the original links of the images
This is the code I use for the download:
Plain Text
downloadFile("website.com/file.exe","download name");

function downloadFile(url, fileName) {
  fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
    .then(res => res.blob())
    .then(res => {
      const aElement = document.createElement('a');
      aElement.setAttribute('download', fileName);
      const href = URL.createObjectURL(res);
      aElement.href = href;
      aElement.setAttribute('target', '_blank');
      aElement.click();
      URL.revokeObjectURL(href);
    });
};

I am building using the webstudio CLI on the latest version, and have tried the vanilla and vercel configurations.
Thank you!
30 comments
N
O
NNateaúx
·

Change token with js

Hey is it possible to edit a token with javascript? I need to change the border radius on many objects at once
28 comments
O
B
N
NNateaúx
·

JS libraries via NPM

Hello, I'm trying out different animation libraries with webstudio. I've gotten anime.js working easily with
Plain Text
<script src="https://cdn.jsdelivr.net/gh/juliangarnier/anime@b471ced746e4488b0e53587bbdd5999f7af2f668/lib/anime.min.js">
</script>

However, I would like to try out motion one before committing to the library. Motion one's docs only say to use npm to install it, however I can't find anywhere on webstudio's documentation how to do this.
How can I import this library?
11 comments
O
N
NNateaúx
·

Token with custom CSS?

I would like to add the following class to the majority of elements on my site:
Plain Text
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Of course it should be a token, but none of these are supported and likely won't be for a long time.
What would be the best way to add these? Surely using a HTML embed for a majority of elements can't be a good solution.
22 comments
N
O
B