renaud
June 30, 2020, 6:00pm
1
Hey,
We released a week ago the support of Next.js for Slicemachine. This means three main changes. A new SliceZone specifically build for Next.js, a Set of components for React, and some tweaks to our CLI to set up a next.js project properly.
We announced this release during an online meetup with Vercel. Want to catch up, watch it here.
You can also find the complete readme here :
For the two weeks to come, here are the planned improvements that we will work on:
We will create a new argument for the prismic sm --setup command allowing you to specify your custom library.
prismic sm --setup --lib my-npm-dep
This command will:
Generate a new repository and configure your project to be linked to your newly created repository
Download your custom library as a dependency
Import your custom slices in your first created custom type.
You can find all details here:
opened 02:59PM - 30 Jun 20 UTC
rfc
## Context
When using the command `prismic sm --setup` the slice machine CLI wi… ll generate a new prismic repository and import in your project a set of default Open Source components.
For nuxt.js : https://github.com/prismicio/vue-essential-slices
For next.js : https://github.com/prismicio/essential-slices
We had different request to be able to specify your own custom library instead of the default one
## Solution
We will create a new argument for the prismic sm --setup command allowing you to specify your own custom library. (This should be a npm package)
`prismic sm --setup --lib my-npm-package`
This command will
### Generate a new repository and configure your project to be linked to your newly created repository
As the current setup command, the command will create a new repository
The CLI command will generate a new prismic repository & add the different files in your codebase to link your project to your prismic endpoint & setup the toolbar
### Download your custom library as a dependency
1. Add & download the dependency in your project
2. Reference your library in the sm-resolver to use those slices automatically in the Slicezone.
### Import your custom slices in your first created custom type.
1. Generate a new prismic repository
2. Create a page custom type
3. Add all slices definition to your page custom type.
We are working on improving the Vue-essential library by adding new components. The first one will be the Feature testimonial component
opened 05:53PM - 30 Jun 20 UTC
closed 12:30PM - 03 Jul 20 UTC
The Feature & Testimonial slider is one of the basic component of a slicemachine… library. This component is awesome when you're looking to showcase a specific feature with a testimonial showcasing the value of the feautre
## Reference to vanilla JS code:
[https://github.com/SaraSoueidan/prismic-slices/tree/master/src/components/testimonials](https://github.com/SaraSoueidan/prismic-slices/tree/master/src/components/testimonials)
You can see in this folder different version of the component with small changes. We call those changes variations. You can see the different variations by browsing them in this website
[https://prismic-sm.netlify.app/](https://prismic-sm.netlify.app/)
Those variation are dependent on the value of the different fields in prismic.
**Default Navigation (Clients logo)**
**Dot navigation**
**Text Navigation**
## Component structure
You can use the folder structure of a Nuxt component as a reference for your slice
This folder should content:
- Your component code
- A `README.md` that you can copy
- A `mock.json` that you can copy for your test
- A `model.json` that you can Copy and is the model of the prismic Slice
- A `preview.png` that you can copy
- An `index.stories.js` that we will generate
**Dependency**
To render richtText & the links you will need to use the `prismic-reactjs` dependency.
**Model JSON of the Slice:**
```jsx
"featured_testimonial": {
"type": "Slice",
"fieldset": "Feature & Testimonial",
"description": "Testimonial proving the value of a specific feature",
"icon": "ondemand_video",
"display": "list",
"non-repeat": {
"eyebrow_headline": {
"type": "StructuredText",
"config": {
"label": "Eyebrow headline",
"placeholder": "Reinforce your copy with a key-worded text, to be displayed before title",
"single": "paragraph"
}
},
"title": {
"type": "StructuredText",
"config": {
"label": "Title",
"placeholder": "Our testimonial",
"single": "heading2"
}
},
"description": {
"type": "StructuredText",
"config": {
"label": "Description",
"placeholder": "These are some awesome tutorials from our awesome clients ...",
"multi": "paragraph, strong, em, hyperlink",
"allowTargetBlank": true
}
},
"feature_illustration": {
"type": "Image",
"config": {
"constraint": {},
"thumbnails": [],
"label": "Feature Illustration"
}
}
},
"repeat": {
"client_logo": {
"type": "Image",
"config": {
"constraint": {
"width": 100,
"height": 100
},
"thumbnails": [],
"label": "Client logo"
}
},
"profile_pic": {
"type": "Image",
"config": {
"constraint": {
"width": 80,
"height": 80
},
"thumbnails": [],
"label": "Profile Pic"
}
},
"quote": {
"type": "StructuredText",
"config": {
"multi": "paragraph",
"label": "Quote",
"placeholder": "Lorem ipsum dolor sit amet, ...."
}
},
"name": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "Name",
"placeholder": "John McJohn"
}
},
"role_position": {
"type": "StructuredText",
"config": {
"single": "paragraph",
"label": "Role position",
"placeholder": "Creative Director"
}
}
}
}
```
Now that we released on our next.js support we will work on providing complete documentation for next directly on our website.
We know that the wait is unbearable so you can find a proper readme here for the moment
I hope that all this gets you excited because we are.
If you have any questions don't hesitate to ask them here.Slicemachine GitHub repository.
We are providing details on what we are working on and how.
See you there
2 Likes
