I have an object of type block to get a WYSIWYG editor. It looks like this:
{
title: "Block",
type: "block",
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" }
],
lists: [{ title: "Bullet", value: "bullet" }],
marks: {
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" }
],
annotations: [
{
title: "URL",
name: "link",
type: "object",
fields: [
{
title: "URL",
name: "href",
type: "url"
}
]
}
]
}
}
But I see no option to be able to choose the color of the text. Is there a way to enable this? Maybe a plugin?
There is indeed a plugin for this. In your terminal, cd to you Sanity Content Studio folder, then run:
sanity install #sanity/color-input
This will append #sanity/color-input to the plugins array in your sanity.json file and locally install the #sanity/color-input npm package.
Then, go ahead and add the color type to the annotations array in the block content where you want to enable text color. E.g.:
export default {
name: 'blockContent',
type: 'array',
title: 'Block Content with Color',
of: [
{
type: 'block',
marks: {
annotations: [
{name: 'color', title: 'Color', type: 'color'}
]
}
}
]
}
Also, keep in mind that you'll now get text annotated with color specifics. How (and if) your front-end(s) choose to render the structured text is up to you.
Related
Im having issues with references in Sanity. Im setting some color themes in the root of my Sanity schema:
defineField({
name: 'articletheme',
title: 'Article theme',
description: 'Create 4 themes for article blocks',
type: 'array',
validation: (Rule) => Rule.required(),
of: [{ type: 'articleThemeBlock' }],
}),
In one of the blocks I would like to reference the theme array to select which color theme that block should use.
Ive tried this, but it fails:
defineField({
name: 'theme',
title: 'Theme',
type: 'reference',
to: [
{
type: 'array',
of: [
{
type: 'articletheme',
},
],
},
],
}),
Any suggestions?
Very confusing but the your second schema above looks incorrect, try this -
defineField({
name: 'theme',
title: 'Theme',
type: 'array', // changed from reference to array
to: [
{
type: 'reference', // changed from array to reference
of: [
{
type: 'articletheme',
},
],
},
],
}),
Try it like this, type array, an array OF reference, referencing TO type articletheme
`
defineField({
name: 'theme',
title: 'Theme',
type: 'array', // changed from reference to array
of: [
{
type: 'reference', // changed from array to reference
to: [
{
type: 'articletheme',
},
],
},
],
}),
`
I'm trying to set the default value given a list of radio items in Sanity Studio.
Code:
export default {
name: 'banner',
title: 'Banner',
type: 'document',
fields: [
{
name: "category",
title: "Category",
description: "Choose a category",
type: "string",
options: {
layout: "radio",
list: [
{ title: "Documentary", value: "documentary" },
{ title: "Fiction", value: "fiction" },
],
},
// set initial value here ?
},
]
}
There is a property called initialValue that can set the default value of a string easily, but I can't figure out how to do this with radio items.
How can I have the radio item Fiction already selected when the page is loaded?
name: 'banner',
title: 'Banner',
type: 'document',
fields: [
{
name: "category",
title: "Category",
description: "Choose a category",
type: "string",
options: {
layout: "radio",
list: [
{ title: "Documentary", value: "documentary" },
{ title: "Fiction", value: "fiction" },
],
},
initialValue: "documentary", // set initialValue's value to one of the `value`s in your list of radio items
},
]
}```
I'm trying to add add a new page in Docusaurus v2, so I added a new item in the navbar:
module.exports = {
...
themeConfig: {
navbar: {
title: 'My Site: API Documentation',
logo: {
alt: 'My Site Logo',
src: 'img/logo.png',
},
items: [
{
to: 'docs/',
activeBasePath: 'docs',
label: 'Docs',
position: 'left',
},
{
to: 'references/',
activeBasePath: 'references',
label: 'References',
position: 'left',
},
],
},
...
},
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
};
Problem is that when I click the References link, I am redirected to http://localhost:3000/references/ which gives me a Page Not Found page:
Does anybody know where exactly I need to put my *.mds or what I should do to be able add a page inside /references and to access e.g. http://localhost:3000/references/dymmy_page?
There are a couple options, things to check out. The first page you want showing up for /references, you can add the following to the frontmatter of that markdown file: slug: /
Or you can change to use docId (which I love). It's easier for using an ID and not remembering what file has a slug added to the frontmatter. The docid is the id from your markdown file, formatted just like the id in your sidebars.js (folder/id).
For example:
{
type: 'doc',
docId: 'folder-if-any/id-of-markdown-file',
label: 'References',
position: 'left',
},
If you add references in a dropdown menu, then it would be something like:
{
label: 'Docs',
position: 'left',
items: [
{
type: 'doc',
to: 'docs/folder-if-any/id-of-markdown-file',
label: 'References',
},
{
type: 'doc',
to: 'docs/some-other-folder/id-of-markdown-file',
label: 'Guide',
},
]
},
I am trying to customize the prview section for a document insanity.io. To that extent, I have created the following document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
subtitle: 'author',
}
}
}
This works exactly as I want in Studio. The title section in the preview pane shows the title of the document and the subtitle section shows the name of the author.
However, if I try to modify the output of author by using prepare, then it no longer works. For instance, take a look at the following variation of the same document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
author: 'author',
}
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
The title preview field is rendered, but nothing shows up in the subtitle section. However, as far as I understand -- this should work. And I wondering why not.
Any ideas?
prepare is actually a function called in preview. You have it as a seperate field of the root object. Move prepare inside preview like so:
preview: {
select: {
title: 'title',
author: 'author'
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
I want to preview a reference name in the studio
I have and icon type, for example one which has the title 'facebook'
export default {
name: 'icon',
title: 'Icon',
type: 'document',
fields: [
{
name: 'name',
title: 'Name',
type: 'string'
},
]
}
I reference this in a menu elsewhere like this
{
name: 'icon',
title: 'Icon',
type: 'reference',
to: [{ type: 'icon' }]
},
and then try to preview like this
preview: {
select: {
title: 'icon',
},
prepare(selection) {
const { title } = selection;
return {
title: title.name,
}
}
}
but my selection returns the reference object, with _ref etc. not the object itself. Is there a way to preview this reference?
You can dot your way into the property on the reference that you'd like to use in the preview like this:
preview: {
select: {
title: 'icon.name',
},
prepare(selection) {
const { title } = selection;
return {
title: title.name,
}
}
}
Side note: Since the prepare function now just passes through its input, you can remove it altogether. This would be sufficient:
preview: {
select: {
title: 'icon.name'
}
}