-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(builder): add Builder.io #13
Conversation
Thanks! There seems to be an issue with how resizing is handled though, which seems to be down to the Builder API. See this example image: https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f?format=webp&width=500&height=600 The image is meant to be 500x600, but is actually 500x333. Resizing should follow the requested aspect ratio, not the aspect ratio of the original image. Is this an option with the API? Something like "cover" or "fill". |
Ah so for our API these are max dimensions and not forced dimensions. We specifically recommend using the |
Aah, ok. This should actually be ok with |
Co-authored-by: Matt Kane <m@mk.gg>
There are some test failures with the generated URLs. I'm not sure if the error is in the test or the transformer |
Dumb Q - how do I run the tests locally? Also I realized I'm dumb - we do support width and height as expected, the default |
right now I'm flying blind both with TS types not working locally and unclear how to run the tests - will use the CI for now to debug |
Just updated to do the expected behavior (defaults to fit=cover) and should have TS and one test fixed, looking into the other test |
OK I think I fixed everything - gotta hop into some mtgs but will check on the CI results when back and clear up any remaining issues |
I need to document this! This is a Deno project, so it expects to use Deno for typechecking and running tests |
So if you're uising VSCode, you install the Deno plugin and that should handle everything for you. You can run tests in VS Code, or with |
Boom! working now, will have tests fixed in a bit 🙏 |
Awesome! Seems to mostly be just ordering of props. |
I'm not sure why, but the URL in the playground isn;t working, though the tests are passing: https://deploy-preview-13--unpic-playground.netlify.app/ |
Ah yes, found the issue (the playground was not able to find the parser, but should now) Also how do I test that out locally? I'm sure it's staring me in the face |
display: grid; | ||
place-items: center; | ||
} | ||
|
||
.imagePanel img { | ||
object-fit: cover; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ascorbic I added this so that the img
behavior matches the CDN ones
previously if you typed in a new value for width/height (esp one that the CDN needs to now generate) it would show a distorted image (stretch the image, which I think there is pretty much no case where people would want to do this in production - aka the default object-fit
) and then it snaps into place when the CDN is updated
since all CDNs by default use cover
, I changed the img behavior accordingly so when you change width/height it won't look distorted while the new one loads. in most cases you just see it be pixelated for a sec, and then it snaps to being nice and clear
felt more right/intuitive, but happy to remove if intentionally undesired
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was going to change that myself, so thanks!
Per github.com/ascorbic/unpic/pull/13
Great! To test locally, run |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great stuff! Thanks for the addition.
I think I did things right - lmk anything I got wrong :D