Slice Machine from Prismic

In May my colleagues Aitor, Núria and I attended our first virtual conference, Jamstack Conf. Check out Núria's blogpost here on the virtual conference experience! Amongst other talks was a lightning talk by Renaud Bressand, a project manager at Prismic. If you don't know, Prismic is a CMS. We often use it in our JAMStack projects at Codegram so we were super interested to hear what they had to say. Prismic announced in the talk the release of their new open source project Slice Machine! Well it sounds pretty cool, right? Let's take a look at what exactly it can do for us.

So as I said, Prismic is a CMS where we can handle content for our websites. To look at a simple example, we could take an entry for a news article. We might know that every article has a title, a headline and a main image so we can add those fields to the article content type in Prismic, but what about the rest of the article? We don't want to restrict the editor to stick to a rigid predefined template. And we want to make the editing experience as visual and intuitive as possible. That's where Prismic slices come in. Enter Slice Zone...

Slice Zone is a section you can add to your content types to give the editor more freedom when entering content. You are able to define a number of different content types which the user can then select from, in the order they wish. Let's take our example of a news article. Maybe a news article can be composed of: text, images, quotes, videos, subtitles, tweets, CTAs etc. Slice zone lets the user select the types and input content in the order they wish.

So that's Slice Zone, what about Slice Machine? Slice Machine takes Slice Zone to the next level by making it super easy for editors to build pages made up of component sections without any help from developers. Prismic describe it as "In it’s most basic form, Slice Machine is an open-source CLI and a component library". Let's see how it works.

First of all we need to install the Prismic CLI

$ npm install -g prismic-cli

Currently Slice Machine is only available for Nuxt.js projects, so we'll also need to create one of those

$ npx create-nuxt-app annas-slice-machine

And now from inside the project, run the Slice Machine setup command

$ prismic sm --setup

This will connect the default component library and add dependencies (you will see these extra configurations added to your nuxt.config.js file along with a sm.json file). This command will ask you to login to an existing Prismic account or to create a new one and will create a new repository in the account with a standard "Page" custom type for starting out.

You can add the Slice Zone to an existing page but here we're going to create a new page _uid.vue with the following code

<template>
  <slice-zone type="page" :uid="$route.params.uid" />
</template>

<script>
  import SliceZone from 'vue-slicezone'

  export default {
    components: {
      SliceZone
    }
  }
</script>

The Slice Zone component has two props here, the type, which at the moment we only have the page type that comes out of the box, and uid which is the unique identifier for the page and will be the name of the route.

In your newly created Prismic repository add a new page type. You'll see here the Slice Zone and all the possible premade components you can add to your page. You can go on over to the storybook to see what these components look like. They've been created by Sara Soueidan and are accessible and responsive too!

Once you've added a uid and a slice for your page, you can run npm run dev and go over to [localhost:3000/uid-of-page](http://localhost:3000/uid-of-page) and see that a page has been created with the route of the uid you just added in Prismic. That was easy peasy right!?

So you might be thinking it's cool, but that you need more control over the design of your page. Well Slice Machine provides ways to customise the default library by using themes, allowing you to make small changes such as colors and text align. But better than this, it also allows you to easily create your own custom slices via the CLI

$ prismic sm --create-slice

This command will prompt you to provide the name of your slice, and the custom types that you want this slice to be available, for example the page type, which is currently the only type we have.

In your project a new folder slices will have been created and inside that a folder with the name of your new component containing two files, index.vue and model.json. Your new slice will also appear in the Slice Zone for the page type where you can update and add/remove entries from it via the Prismic dashboard. Due to still being in beta, you will need to update the model.json file manually but Prismic say they are working on a Custom Types API where you will be able to send custom types to the repo with a CURL request 🎉

We've only scratched the surface but I think Slice Machine could be a great tool for making developers lives easier and for giving more freedom and control to editors with JAMStack websites!