I'm searching for a database concept for managing a dynamic multilevel menu as JSON Object. Because we have different customers, and the menu is depending on the customer. I'm searching for a database structure to store the following JSON String so that I can edit the structure and create again a json object from the data. How would you realize that? I don't need a complete answer, just an approach.
[
{
name: 'Dashboard',
url: '/dashboard',
writeble: true,
icon: 'icon-speedometer'
},
{
name: 'Menu1',
url: '/menu1',
writeble: true,
icon: 'icon-puzzle',
children: [
{
name: 'Item1.1',
url: '/item/item1.1',
icon: 'icon-puzzle'
subitem: [
{
name: 'Subitem 1',
url: '/item/item1.1',
icon: 'icon-puzzle'
}
},
{
name: 'Item1.2',
url: '/item/item1.2',
icon: 'icon-puzzle'
},
{
name: 'Settings',
url: '/settings',
icon: 'icon-settings'
}
]
}
]
If I understand correctly your question, I would use a NoSql DB where every document is your JSON object and the key is the customer Id.
Related
For example, i have a schema called 'Blog'. i don't want there to be multiple 'Blog' entries, and only allow one entry.
export default {
name: 'blog',
type: 'document',
title: 'Blog',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'content',
title: 'Content',
type: 'array',
of: [{ type: 'block' }],
},
],
}
according to the doc
The type: 'document' property tells the studio that it should make it possible to make new animal documents.
i tried to remove type: 'document' from the schema, but got an error.
I'm attempting to transform all my frontmatter from a legacy git based CMS into Sanity's ironically named CMS but I'm having difficulties with the arrays. For reference, here is my frontmatter:
resources.md
title: "Resources"
heading: "Check out our resources"
resources_list:
- title: User Manual
icon: "/assets/manual.jpg"
asset: "/assets/user-manual.pdf"
First I created a document type for the resources page and added the array to the fields:
resources.js
export default {
name: 'resourcesPage',
title: 'Resources Page',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string'
},
{
name: 'heading',
title: 'Heading',
type: 'string'
},
{
name: 'resourcesList',
title: 'Resources List',
type: 'array',
of: [
{
type: 'object',
fields: [
{
title: 'Title',
name: 'title',
type: 'string'
},
{
title: 'Icon',
name: 'icon',
type: 'image'
},
{
title: 'Asset',
name: 'asset',
type: 'file'
}
]
}
],
}
]
}
Then I get the follwoing error after I attempt to run sanity graphql deploy
Error: Encountered anonymous inline object "object" for field/type
"resourcesList". To use this field with GraphQL you will need to create
a top-level schema type for it. See
https://docs.sanity.io/help/schema-lift-anonymous-object-type
I follow their vague docs by creating another schema type for the object I want to place in my array:
resourceObj.js
export default {
type: 'object',
title: 'Resource',
name: 'resourceObj',
fields: [
{
title: 'Title',
name: 'title',
type: 'string'
},
{
title: 'Icon',
name: 'icon',
type: 'image'
},
{
title: 'Asset',
name: 'asset',
type: 'file'
}
]
}
Then I add it to the resources page schema:
export default {
name: 'resourcesPage',
title: 'Resources Page',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string'
},
{
name: 'heading',
title: 'Heading',
type: 'string'
},
{
name: 'resourcesList',
title: 'Resources List',
type: 'array',
of: [
{
type: 'resourceObj',
}
],
}
]
}
When I run sanity graphql deploy again I get the following error:
Error: resourcesPage - (document) / fields / resourcesList - (array) / of / <unnamed_type_#_index_0> - (resourcesObj)
Why would sanity not recognize my object?
In order to use objects in an array, you need to create a separate file for the object in the schema directory and make sure to import it on schema.js:
// First, we must import the schema creator
import createSchema from 'part:#sanity/base/schema-creator'
// Then import schema types from any plugins that might expose them
import schemaTypes from 'all:part:#sanity/base/schema-type'
import resourcesPage from './ownerGarage'
import resourceObj from './resourceObj'
// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
// We name our schema
name: "default",
// Then proceed to concatenate our document type
// to the ones provided by any plugins that are installed
types: schemaTypes.concat([
/* Your types here! */
resourcesPage,
resourceObj
]),
});
Anybody have experience with twitter cards and Vue, dynamically loading meta tags into the components? seems like it needs server side rendering, does anybody know a way to avoid coding all the server side rendering? I am loading the meta tag information from APIs in Vuex and using them within my vue-head meta function:
meta: function() {
return [
//twitter
{ name: "twitter:title", content: this.title, id: "t-title" },
{ name: "twitter:image", content: this.image, id: "t-image" },
{ name: "twitter:description", content: this.excerpt, id: "t-excerpt" },
{
name: "twitter:card",
content: "summary_large_image",
id: "t-card",
},
// Facebook / Open Graph
{ property: "og:title", content: this.title, id: "og-title" },
// with shorthand
{ p: "og:image", c: this.image, id: "og-image" },
];
},
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 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.