I'm using a website with Gridsome and I use markdown files to feed content to the website.
I have little experience with markdown. While I don't really understand how md files work, I managed to get it working with a few tutorials until I started adding arrays into the md file see below.
content/home/index.md
---
metaTitle: this is the meta title tag
metaDescription: metadescription
someArray: [alpha, beta, delta] //I tried adding an array like this and it worked fine
imgArray: [{url: "someurl", alt: "some alt", caption: "some caption}, {url: "someurl", alt: "some alt", caption: "some caption}] //this did not work and caused an error
---
my question is whether adding an array of objects in markdown files possible? if it is, how do I write it? thanks very much!
In your YAML, the array is invalid in that it's missing quotes after some caption.
The section of metadata you're describing is the YAML frontmatter, and it's not specific to Gridsome or Vue.
Yes, object arrays are allowed in YAML either as comma-separated objects:
imgArray2: [
{url: "someurl", alt: "some alt", caption: "some caption"},
{url: "someurl", alt: "some alt", caption: "some caption"}
]
demo
...or as lists, where each element starts on a new line with a hyphen prefix:
imgArray:
- {url: "someurl", alt: "some alt", caption: "some caption"}
- {url: "someurl", alt: "some alt", caption: "some caption"}
demo
Related
Example
Hey guys,
can anyone tell me how to add such an input field to a slash command in Discord.js (v.14)?
Example above.
Look at the discord.js doc here
When you create a command, you have just to set the options parameters :
client.application.commands.create({
type: "CHAT_INPUT",
name: "mycommand",
description: "My awesome command",
options: [
{
type: "STRING",
name: "firstparameter",
description: "My first parameter",
required: true
}
]
});
Is it not possible to use an object type as a reference in sanity? For example this is not working. When I go to the field nothing shows up. If I can't do this how can I access the indexPage objects that have been created under other documents?
export const indexPage = {
title: "Index Page",
name: "indexPage",
type: "object",
fields: [
{
title: "Subheading",
name: "subheading",
type: "array",
of: [{ type: 'block' }]
},
{
title: "Content",
name: "content",
type: "array",
of: [{ type: "block" }]
},
]
}
// in another file
export const coolPage = {
title: "Cool Page",
name: "coolPage",
type: "object",
fields: [
{
title: "Reference Index Page",
name: "refIndexPage",
type: "reference",
to: [{ type: 'indexPage' }]
}
]
}
References can only point to other documents; not to a specific part of a document. So to achieve this, indexPage would need to be a document.
I think modelling indexPage as a document would be a viable option in your case. You mentioned "indexPage objects that have been created under other documents". Instead of creating indexPage data inside a specific document, indexPage should be its own document type. Any other document can then connect to it via a reference. This approach should be really flexible for you.
Sanity Studio recently added support for "references in place", which makes this workflow even better. The studio now allows you to create a document to reference while you are editing the document that references it—without leaving the editor. You can see a demo here (no extra work on your part is needed here, it's handled automatically by Sanity Studio).
In summary: if you have a piece of data you'd like to share between multiple documents, model it as its own document type that is referenced by every document that is related.
I have copied the Buefy carousel component from https://buefy.org/documentation/carousel#carousel-list into my Gridsome project. The carousel displays correctly with its supplied placeholder images. These are in an array in the data() segment eg
items: [
{
title: 'Slide 1',
image: 'https://picsum.photos/id/0/1230/500'
},
Now I want my images, not the Buefy placeholder ones.
I cannot find the right way to target my local images. I have tried lots of things including
items: [
{
title: 'Slide 1',
image: require("#/assets/img/gallery/sheep/sheep2.jpg")
},
My attempts either break the carousel or display a broken link within it.
Solved. I did a new build (in my case "gridsome develop") after inserting my own image paths. Then this worked fine -
items: [
{
title: "Slide 1",
image: require("#/assets/img/gallery/sheep/sheep1.jpg")
},
The vue-form-generator github repo states it supports "custom styles", "Bootstrap friendly templates", etc. I can't find any documentation on how to style vue-form-generator components. Is there doc anywhere? Am I missing something obvious? Note: I'm very new to Vue.js
According to document, you can add addition custom css class using styleClasses props:
{
type: "input",
inputType: "text",
label: "Name",
model: "name",
maxlength: 50,
required: true,
placeholder: "User's full name",
validator: validators.string,
styleClasses: 'my-input-class'
}
Then custom css style classes will be appended to the .form-group
I am using Dojo 1.6 to render a simple DatGrid. Only problem I faced is similar to dojo 1.6 DataGrid cannot display lists?
The solution here along with reference from here http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_grid/ indeed worked and all but there is still one problem with JSON structure. Following are working and non-working examples. I am getting JSON in format where everything is wrapped in items array. How do I make it work?
The working json format
[{
"bolist": ["CHM", "CVO", "PMO"],
"title": "How do I do",
"painpoints": ["this", "that", "manay more"],
"solution": "wondeful"
}, {
"bolist": ["DGM", "EXE", "CLI"],
"title": "There we go",
"painpoints": ["Front", "back", "many other places"],
"solution": "under review"
}]
The not working json format (And I am getting my json in this format)
{"items":[{
"bolist": ["CHM", "CVO", "PMO"],
"title": "How do I do",
"painpoints": ["this", "that", "manay more"],
"solution": "wondeful"
}, {
"bolist": ["DGM", "EXE", "CLI"],
"title": "There we go",
"painpoints": ["Front", "back", "many other places"],
"solution": "under review"
}]}
You can handle the json like a javascript object ! So try delivering jsonReturn.items to the grid. That way the grid gets only the json data you want:
[{
"bolist": ["CHM", "CVO", "PMO"],
"title": "How do I do",
"painpoints": ["this", "that", "manay more"],
"solution": "wondeful"
}, {
"bolist": ["DGM", "EXE", "CLI"],
"title": "There we go",
"painpoints": ["Front", "back", "many other places"],
"solution": "under review"
}]