# Sanity Setup

# Introduction

If you need a developer-friendly solution to managing content, then utilizing Sanity can provide a lot of flexibility and is a powerful way for managing your content on your Nacelle space. In order to use Sanity for managing your pages, blogs, and articles you must configure specific content models for that data. There are 10 default content types that have built-in support for Nacelle: Article, Blog, Author, Page, Content, Hero Banner, Side by Side, Product Grid, Testimonial, and Testimonials.

# Configure Content Model Schema

Sanity utilizes their Studio (opens new window) to define the models' schemas.

For a new project, you can quickly clone our Nacelle x Sanity Content Studio Starter (opens new window) and configure it quickly utilizing the Sanity CLI (opens new window)

The repo (opens new window) also makes a great reference if you have an existing project and need to port over any of the supported content types.

After installing the CLI globally, npm install -g @sanity/cli, you can initialize the project by running sanity init.

  • This will log you into Sanity, create a project, set up a dataset, and generate the files needed to run the editing environment locally.

# Add CORS Origins in Sanity settings

Your Sanity project is configured to only respond to queries from default origins (see Sanity docs (opens new window)). To allow Nacelle to connect to your Sanity project, go to the Sanity management console (manage.sanity.io (opens new window)), navigate to the project's API settings and add these CORS origins:

Origin Allow Credentials
https://v1.dilithiumindex.com
https://connector-v1.dilithiumindex.com
https://dashboard.getnacelle.com
http://localhost:\<local dev port\>

Origins with "Allow Credentials" enabled can use the authenticated Sanity client (opens new window) to connect to your Sanity project's API. This is important for previewing draft entries, which are only visible to authenticated connections.

# Configure Sanity in the Nacelle dashboard

After completing your schema upload and updating CORS origins, you will need to update your content settings in the Nacelle dashboard. First, in your Sanity project settings find or generate a new token. These are the settings you will need to fill out in your Nacelle Dashboard.

Next, log in to the Nacelle dashboard and select your space. Scroll down to the Content Settings section and change the Connector Type drop down menu to "Sanity". Add your Sanity project id, the dataset, and the API token.

When all the fields are complete, you can click the button for "Save Changes and Index Content". This will start the importing and indexing process to pass your data from Sanity to Nacelle.

# With Nuxt

The following instructions detail using Sanity as a content data source with the Nacelle Nuxt Starter.

# Begin Adding Content

# Create a Homepage

Once you have added all the necessary content models you can begin adding your homepage content. First, create a new entry with content type of "Page". Set the title and handle to "Homepage" and "homepage". Pages have a WYSIWYG field, "Body", for adding basic text and image content. They also have the field "Sections" you can add your content section blocks for more expressive content.

WARNING

Content handles must be unique to their content type. For example if you create a page and set the handle to "about-us". No other page content type should have the same handle. Nacelle uses handles for generating unique ids when indexing your content.

Entries in Sanity must have a handle in order to be indexed.

"Hero Banner", "Side by Side", "Product Grid", and "Testimonials" are default section block content types. They are pre-configured to work with several components in our Nuxt Starter. Additionally there is also the "Testimonial" content type which is used in the Testimonial component.

If these default content types do not fully suit your needs, you can create new section block content types or extend our default content types with new fields. When making this kind of customization, however, you will need to create your own custom frontend components to handle this data.

After updating the "Homepage" fields, save and publish. You will then need to re-index this and all other content changes from the Nacelle dashboard.

# Create a Blog

You can also create a new blog easily with our default components. Create a new entry of content type "Blog" in Sanity. Blogs have a field for title, handle, and articles. Under "Articles", clicking "Create a new entry and link" and selecting "Article", will bring up the form to write your first blog article. Save and publish the article as well as the newly created blog. Again re-index your content to ensure Nacelle has your latest updates and you are all set.

# In Nuxt

In your Nuxt project you will now be able to import locale content using $nacelle, by passing the locale as a parameter:

const articleWithArgentinianTranslation = this.$nacelle.data.article({
  handle: 'my-blog-post',
  locale: 'es-AR',
})

const heroBannerWithPolishTranslation = this.$nacelle.data.content({
  handle: 'my-hero-banner',
  type: 'heroBanner',
  locale: 'pl-PL',
})