Thought I'd keep a little log on the progress of my #SliceContest entry. :)

[sacha.sayan]

Sweet contest, Prismic Team! It's definitely the little boost I needed to get off my butt and give Prismic a shot, and SliceMachine in particular looks really interesting!

Thought I'd keep a little log of my progress as I go through the motions, and document successes/failures for others who may be going through a similar journey. :)

Day #1:

I do a lot of Nuxt myself, so that seems like the best choice for me. The provided starters didn't work for me, and I'm actually hoping to use TailwindCSS, so I'm starting from my own clean slate create-nuxt-app generated app.

The "step-by-step" version of the getting started directions are actually quite good, and I preferred them to the quick start as they go a little deeper into the how's and why's of Slices and SliceMachine:

Slice Machine: Developer Tool for Building with Prismic

Something that tripped me up at first, is that at the moment, you cannot use the stable prismic-cli, and instead must use 3.8.3-beta.0 or greater. The documentation actually mentions this in a few places...

You will need the 3.8.3-beta.0 version of the Prismic CLI, check by running: prismic --version.

You can go to that version by running the following command:

yarn global add prismic-cli@3.8.3-beta.0

or

npm install --global prismic-cli@3.8.3-beta.0

If you run into any problems try uninstalling and reinstalling the CLI.

...but not actually at any point in the quick start, so it was easy to miss. Without using the beta, slice creation will fail as the scripts try to ping the cms with the wrong api address, so make sure you get it right!

Also worth pointing out that the starter projects (i believe), the cli package is listed as an internal dependencies, so you may not need to yarn global add it, and/or you might run into problems going through the documentation which sometimes tells you to f.ex prismic sm... and sometimes tells you to yarn prismic sm.... — just be aware which setup you've got and stick with the right choice for you.

The canonical set of useful commands that will go into my README.md:

# Create a slice
$ prismic sm --create-slice

# List all slices
$ prismic sm -ls

# Run Storybook, defaults to localhost:3003
## https://www.slicemachine.dev/documentation/adding-a-storybook/
$ yarn run storybook

# Run SliceMachine, defaults to localhost:9999
$ prismic sm --develop

Some of the documentation mentions that the developers are aware that running Nuxt, Storybook, and SliceMachine all at once in different terminals is a bit awkward, and I agree with that. It's not an insane ask — but streamlining the process would be nice, though I think it's far down my "requested features" list so far.

[lihbr (Lucie)]

Hey Sacha, really happy to read your log!

It's a nice idea to document your journey this way, and really insightful for us as to where improvements can be made!
I'm glad you managed to find your way through setting up Slice Machine for your project, indeed having to use a beta version may sound confusing for some people and I hope we'll be able to release a stable version really soon~ You should be able anyway to perform everything for this contest using only the beta version (3.8.3-beta.0)

Regarding the starter, it's alright not using it! I'm curious although where it didn't work for you (so I can attempt to fix it for other people)?
It's supposed to be just a regular create-nuxt-app with Slice Machine preconfigured in it so adding TailwindCSS should follow the regular process for example.
Also I get the confusion about prismic vs. yarn prismic, the latter should only be mentioned in the starter as it was made for the sake of simplicity but might not be as simple as it sounded for us haha ^^'
I admit the starter readme is a bit lengthy so it can address most of the common issues (especially deployment for people not familiar with it).

Looking forward to hearing more from you! Feel free to contact me on Twitter also (@li_hbr) in case you're in need of direct assistance Cheers!

[sacha.sayan]

Thanks, @lihbr.

Regarding the starter, it's alright not using it! I'm curious although where it didn't work for you (so I can attempt to fix it for other people)?

Unfortunately, I didn't write down what the error was that I was getting with the pre-baked starters. I'll try to find some time to give it a shot again as I reach a maturity point with my attempt.

Day #2:

I'm at a point where I can start making slices, so I've been playing around in general today, and thinking today which direction I'd like to take, and I'm thinking a visual-forward library meant for artists and designers to build portfolios to showcase their work could be a fun one. I started looking at various Wordpress Gutenberg Block Libraries as a closest analogue, and nailing down what I think a good component inventory list could look like:

• Some sort of configurable full-bleed homepage block.
• Index > Header
• Index > Footer
• Index > Grid (for linking to galleries or case studies)
• Index / Case Study > Drop Quote
• Case Study > Introduction
• Case Study > Grid
• Case Study >

Okay, cool. Let's get started.

A couple things that confused me at first:

• I wasn't really sure what @/slices library was supposed to represent — given that the documentation mentions the default slice library a bunch, was this it? I can't be sure if it's relating to standard js paths or signifying something else...

• I hadn't actually created anything yet but @/slices was present, so I assumed so and went to create a new one with the default path (sure!) of slices, and now I've got... oh, two @/slices libraries? Okay, I see what I've done....

• Something interesting I notice right away as a newbie is that Prismic Slices must be two words, camel-cased. You can't for instance, choose a Component name such as Gallery or Footer I'm curious why this is?

• Let's create some slices, woo! I must say, prismic sm --ls is a very handy line for an at-a-glance birds eye view of what's available to your project from the CLI, especially as you're building things out.

• I'll spare you, the reader, the dirty details as I start scaffolding out and building markup for my slices. Pretty standard stuff here.

Some TODOs:

• One immediate barrier I run into is generating proper mocks. It seems they're (at least initially?) populated with random platitudes and unsplash images. What's the best way to resolve this, and is there a way to set the 'default' mock text for a field from within SliceMachine? If I'm meant to edit it manually, it would be nice for this JSON to be prettified rather than exist on one gigantic line...

• It's my first time working with Prismic & Slices as well as SM, so I find myself going through the journey of trying to figure out how deep a slice can go. Can they create expectations or associations with how specific non-primitive content types to feed into them? Will things break or become brittle? Still investigating here...

[lihbr (Lucie)]

Hey! Glad to hear from you again

I wasn't really sure what @/slices library was supposed to represent

Indeed it's the default created local slice library where @ is the root of your project and /slices its path inside your project, so a Nuxt/Webpack alias fashion path. Libraries (local ones or packages) are referenced inside the sm.json file where you'll notice the same notation Duly noted we'll try to improve our documentation here!

---

I assumed so and went to create a new one with the default path (sure!) of slices

Haha ^^' glad you figured it with that happy accident :)

---

Prismic Slices must be two words

It's actually something I'm not a fan either but it helps to prevent errors (afaik) and is part of Vue Essential Style Guide: Style Guide — Vue.js Also I noticed the pascalcasification is a bit glitchy from time to time~

---

I must say, prismic sm --ls is a very handy line

Woo

---

One immediate barrier I run into is generating proper mocks

Indeed, mocks are generated for a slice once you save its model to file system. They are still really basic (you'll notice it especially when you look for paragraphs) and we're currently working on bringing better mocks that you can configure with different sets and such.

What I suggest for now is to write a customMocks.json file along the mocks.json (as it will reset every time you save), and input there data you wish to use. You can then update the index.stories.js to use either only your custom mocks, or to merge it with mocks.json (using lodash defaultsDeep or whatever you're fine with).

Eventually you may even want to write different stories with multiple mocks showing different use cases for your slice or even using knobs, if you're looking for an example code check here: https://github.com/lihbr/sms-hoy/blob/master/hoy-slices/slices/InfoCard/index.stories.js

---

It's my first time working with Prismic & Slices as well as SM, so I find myself going through the journey of trying to figure out how deep a slice can go. Can they create expectations or associations with how specific non-primitive content types to feed into them? Will things break or become brittle?

I'm not sure I got it completely but you should be able to go quite deep with slices. With the builder it's still a bit tricky to do so although to be fair. On full Prismic project, Nuxt.js fetch hook can become really powerful for example with a "latest blog post" slice, dynamically fetching content for it. Nonetheless as we're only developing a library here might be a bit out of context

---

Anyway, can't wait to read your next entry and to see your library Sacha! Good luck

[lihbr (Lucie)]

Hey @sacha.sayan, it's been a few days since we heard from you, how it's going?

[sacha.sayan]

Unfortunately, I won't make it into the contest! Things got a little hectic over here.

I hope to publish my slices soon, when I find the time!

[lihbr (Lucie)]

Sure, no worries! There will be other contest you can participate in also