SliceMachine - Improvements for Dev-Workflow

Developing with Prismic
1

Hi there,
First of all, I really love the concept of Slices and SliceMachine.

I already use SliceMachine in some of my client projects and I noticed some things that slow down my process since the upgrade to the new version (Slice Machine UI).

  1. It would be nice if I wouldn't have to run 3 terminals, while working on my project.

  2. Why cant I chose all the options for some fields in SliceMachine UI just as I could in Prismic. I noticed this using the Rich Text Field and the Image Field:

Image Field: In Prismic I can define sizes only by one parameter, letting the other one stay on auto. This isn't a valid input in SliceMachine. (My workaround by directly edit the image size in the model.json)

Rich Text Field: In SliceMachine I cannot allow links and other styling options to a rich text file. I had to add them manually to model.json.

I would also like to see the Grid/List option to be an option in SliceMachine UI.

  1. Is there a way to rename or delete slices, that already have been pushed to Prismic (using the CLI)? I manually renamed one of my slices in the code. After pushing to Prismic it showed up as a separate slice instead of renaming the old one.

  2. I think there should be an option for using Icons instead of taking a Screenshot of the mock data. (Or allowing us to use custom preview Images) For some Layouts, the mock data just doesn't look very nice. My workaround: Replacing the preview.png by a custom image, edit the model.json and then push it to Prismic.

  3. For some projects I don't really need SliceMachine UI since I already work on the final Prismic repository. Is it possible to only use the Slice-Zone Component without SliceMachine UI?

Thanks for developing such a powerful tool. I would be very happy if some of my suggestions for improvement would be incorporated into a new version of SliceMachine.

Best regards
David.

1 Like
2

Hey David, thanks for taking the time to give your input, it's much appreciated by the team :blush:
Allow me to extend on your list to see how we can incorporate them:

1/ I agree that it's not ideal but I see a major advantage for this against launching everything in the same tab: logs don't get mixed together / are easier to read. Maybe a solution would be to use something like blessed to create an interface tailored to our needs. Otherwise, I believe creating your own npm-run-all script would work already.

2/ Nice catch! It should be pretty straightforward to add these. Would you be interested in opening a PR? I can create an issue and give you more info on Github if needed.

3/ Not yet, we'll be working on this really soon.

4/ I totally agree. You should be able to use custom images there. This could be done by adding some sort of form next to the slice (with title, description and the image you want to define as screenshot). Also, I had in mind to move generated preview.png files to their own folder. That way, when pushing the slice to Prismic, the builder would first look inside the component folder and take the screenshot if it's there, and otherwise default to the screenshots folder (eg. .slicemachine/screenshots). What do you think?

5/ Yes, I believe this quickstart was written before we started coding the builder, so you should see what are the minimum requirements to work with the SliceZone

Happy to discuss further!
Hugo

1 Like
3

Hi Hugo, Thanks for your quick response. I'm happy to see that your are actively developing on Slicemachine.

  1. Good point! Thanks for pointing out a solution using npm-run-all. I created the follwing script to run all three commands at once:
    "prismic": "npm-run-all --parallel slicemachine storybook dev"
    By running the dev script last, I'll be able to see the Nuxt errors. This solves the issue for me :slight_smile:

  2. Unfortunately, I don't have too much time to work on this at the moment. I'll get back to you as soon as I have the time to contribute to Slicemachine.
    Just out of curiosity: I wasn't able to find a Github Repo for SliceMachine UI ... it'd like to take a look at it :wink:

  3. Awesome! It'd be cool if renaming and deleting slice could be implemented in the form. (see 4.)

  4. This would be a perfect implementation of custom images! I look forward to seeing this in a future version.

  5. Thanks, I also found the quick-start for a Nuxt project here: https://www.slicemachine.dev/documentation/nuxt/nuxt-quick-start/

Best regards
David

5

Hi Phil,
Do you know if the formatting options (link, ul...) will release soon to the Slice Machine?
It is so lacking ;(

6

Hey Benoit,

I'm not sure of the exact date but I believe this is being improved in this sprint. I'll check with the team to confirm.

Thanks.

1 Like
7

I checked with the team and @hugo.villain has completed this, but he hasn't pushed it yet. I'll let you know once it's pushed.

1 Like
8

This is being tracked as an open feature request + the extra formatting options have been shipped.

If you have another use-case for this feature, you can 'Flag' this topic to reopen. Please use the :heart: button to show your support for the feature and check out our Feature Request Guidelines.

9

Hi Everyone,

The team has planned to work in the current sprint to enable deletions and updates etc.

Although I've discussed a workaround for the moment here:

Let me know if you have any questions.

Thanks.

1 Like