@nuagedelait/sanity-pagebuilder NPM

Sanity plugin pagebuilder

This is a Sanity Studio v3 plugin.

Installation

npm install @nuagedelait/sanity-pagebuilder

Features

extends the (default or custom) structure by adding a base with 3 main sections
- Settings : global website settings
- Content : header, footer, pages, and blocks
- Managment : authors and categories
Page builder based on page / sections / blocks
- You can create a page that can be devided into sections (objects)
- Each section can contains a list of references to blocks
- Blocks are documents so you can use them on multiple pages
- You have basics blocks but you can add yours easely
Settings

Redirections
You can add redirections in a array in the settings section
Content
Managment
Menu
Menu can contains menu items
Menu item
Menu items can contains menu (as submenu)
Pages
Menu items can contains sections
Sections
Sections can cotnains blocks
Blocks
Blocks can be created within the page and are independants documents

Usage

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import { pagebuilderTool } from '@nuagedelait/sanity-pagebuilder'

export default defineConfig({
  //...
  plugins: [pagebuilderTool()],
})

Config

You can extends schemas of the plugins without the pain of handling desk structure

export default defineConfig({
  //...
  plugins: [pagebuilderTool(
    {
      addBlocksSchemas: [ 'array of blocks schemas in sections' ]
      addContentSchemas: [ 'array of content schemas like custom `posts` or `articles`' ]
      addManagmentSchemas: [ 'array of diverses schemas (used if contents)' ] 
      api: 'sanity api version, default : `v2023-08-01`'
    }
  )],
})

Localization

You can use localization by adding a language array to the plugin config It will add :

Language switcher in top of studio
localize url handling (ex: http://localhost:3000/en/studio/structure/) with autmatic document filtering
necessary fields based on the document type :
- "lang" field to localize the content
- "translations" field to reference document in multiple languages

export default defineConfig({
  //...
  plugins: [pagebuilderTool(
    {
      addBlocksSchemas: [ 'array of blocks schemas in sections' ]
      addContentSchemas: [ 'array of content schemas like custom `posts` or `articles`' ]
      addManagmentSchemas: [ 'array of diverses schemas (used if contents)' ] 
      api: 'sanity api version, default : `v2023-08-01`',
      languages: ['en','fr']
    }
  )],
})

If you have custom schema, you can add the localization fields using the i18n function :

import { i18n } from '@nuagedelait/sanity-pagebuilder'

const schemaWithLocale = i18n(
  schema,  // your custom schema
  languages, // your languages list, ex : ['en', 'fr']
  true // if needed, add translations field
),