slice-machine
slice-machine copied to clipboard
prismicio
RFC: Custom screenshots
Changelog
SliceMachine now supports custom screenshots! ✌️
Previously, screenshots were stored along with your components. Everytime a change was made to a slice, a new screenshot was generated, erasing the previous one.
This behaviour made it impossible for users to add their own preview file.
These default screenshots are now stored in .slicemachine, a special folder that will probaby grow with more features in the coming weeks - and that you should definitely push to git!
To enable the custom screenshot feature, simply add a preview.(png|jpg) to each of your components folders. When pushing slices to Prismic, the builder will select the screenshot by favouring the custom preview file first, then the automatic screenshot.
Your editors will then be able to preview your custom screenshot in the editor.
Opinions
What do you think?
This is awesome. Since almost every slice will probably be in a Figma/Sketch file or something like that. It would be great to be able to tailor this screenshot to look as good as possible. Also, it should probably be documented somewhere what pixel ratio/res the file should have as well!
Definitely with Samuel, resizing/documenting the expected format would help produce beautiful screenshots!
Maybe when you push the upload button, you'll get presented with a neat dropbox, with a description below like:
DRAG YOUR FILE HERE Note: File should be png and minimum 800x400
Not sure if this should be a new issue.
When adding custom previews for version 0.1.0-alpha.5, the upload fails with the error Error: ENOENT: no such file or directory, copyfile
I found that the directory it is looking for is under the root ./slices/[SliceName]/default-slice/preview.png. The default slice folder isn't there in any of the new slices made, but is in the .slicemachine/assets/slices. But that's not where the custom ones are.
It should be able to recover from this error, but doesn't seem to be. I think it used to handle this.
Also not sure what branch to make the changes in a PR??
It would be great if you could decide the width of the generated screenshots, as for me they are taken at the breakpoint of a tablet / small laptop, while I'd rather the screenshot show the desktop preview.
I agree. It should also be desktop by default. For now, we can add a configuration object in sm.json and see later if something more complete can be implemented