I'm working on developing a business site for a friend using GasbyJS and NetlifyCMS for content. I'm running into a bit of an issue determining how to use the CMS to maintain Markdown-formatted information that is not structured like a blog post, since that's where a lot of the tutorials out there work from.
My Netlify CMS config is as follows:
backend:
name: github
repo: my/repo
media_folder: static/assets
public_folder: assets
collections:
- label: 'Pages'
name: 'pages'
files:
- label: 'Home Page'
name: 'home'
file: 'content/home.yml'
fields:
- {
label: 'Home Banner Text',
name: home-banner-text,
widget: markdown,
}
- {
label: 'Home Acting Text',
name: home-acting-text,
widget: markdown,
}
- {
label: 'Home Costume Design Text',
name: home-costume-design-text,
widget: markdown,
}
- {
label: 'Home Modeling Text',
name: home-modeling-text,
widget: markdown,
}
Which produces a YML file at C:/path/to/my/site/content/home.yml thus:
home-banner-text: 'Welcome to my site!'
home-acting-text: I **am an actor.** Click here to learn about my acting work.
home-costume-design-text: I am a costume designer. Click here to learn about my costume design work.
home-modeling-text: I am a model. Click here to learn about my modeling work.
This all seems fairly straightforward and, I think, logical -- the site is going to have a home page with four content sections on it, and I want the site owner to be able to modify each one with formatted content.
What I can't figure out is how to transform this in Gatsby once it's sourced via gatsby-source-filesystem. There's a gatsby-transform-yaml package, but it doesn't transform any Markdown in the YML field values to HTML, and while I've found a few packages that extend it by adding Markdown support, they all require some sort of prefix on any Markdown values (i.e. home-acting-text: md//I **am an actor.**) in order to determine which ones should be parsed, and I can't figure out any way to get Netlify CMS to inject that.
It seems like I'll probably have to do some custom logic in gatsby-node.js but I'm a little lost on where to start -- and this seems like a common enough use case that I wonder if I'm missing something.
Any guidance would be appreciated! :)
Have you checked the Gatsby docs? Im assuming you have, but if you havent then i suggest starting there. A quick search reveals this: Sourcing from Netlify CMS
Related
I'm using quarto's reveal.js implementation. I've been reading the official documentation page on customising themes and I'm relatively familiar with SCSS rules.
I've been able to create classes to slides and then customise them via SCSS rules. Regretfully, I haven't been able to add a custom background (either colour or, ideally, image background) to the first slide (#title-slide) covering the entire area, as I would do in other regular slides as described here.
Is there any way to add custom backgrounds to the first slide other than this hack consisting of leaving the presentation's attributes blank?
EDIT:
Not sure if that's the right approach, but I tried adding the background-image url in the yaml metadata and it works:
---
title: "My title"
background-image: "https://images.unsplash.com/flagged/photo-1580139624070-910f651c1b78?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
background-opacity: "0.45"
format:
revealjs:
theme: [default]
logo: images/logo_black.png
editor: visual
---
Regretfully, properties such as background-color and background-opacity don't work.
Just for the record, after #tarleb's comment pointing me to pandoc's documentation, I made it work by adding this on yaml's metada:
---
[...]
title-slide-attributes:
data-background-image: "/path/to/image"
data-background-size: contain
data-background-opacity: "number"
[...]
---
As can be seen, other attributes can be passed, as long as
they are indented under title-slide-attributes
they are prepended with data-
Jekyll is not parsing a post correctly, and I can't find the error; the YAML front matter is the same as in our other posts. Here are the two differences:
(1) For some reason, Jekyll is rendering the three dashes at the bottom of the YAML front-matter as a single dash: category: German — Doch is a modal particle,. I have tried deleting these hyphens and retyping them, and that has not solved the problem.
(2) We are trying to create a new category with this post called "German." Jekyll has automatically created our categories from other posts, but in this instance, it is not creating the "German" category and is instead placing the post in a folder of its own.
When I open the page in the browser, I see this at the top:
layout: post author: WordBrewery title: “How to use the German doch” description: “How to use and understand the German modal particle doch.” image: hohenschwangau.jpg featured: true published: true category: German — Doch is a modal particle, a word used to indicate attitude, tone or the focus of a sentence.
Here is the YAML front-matter and first line of the post:
---
layout: post
author: WordBrewery
title: "How to use the German doch"
description: "How to use and understand the German modal particle doch."
image: hohenschwangau.jpg
featured: true
published: true
category: German
---
*Doch* is a [modal particle](https://en.m.wikipedia.org/wiki/German_modal_particle), a word used to indicate attitude, tone or the
I would greatly appreciate any help.
Appearance of the unparsed post
(Moved from comments to answer)
You need to make sure that the markdown file encoding is correct (utf8 no BOM). Jekyll has a problem with BOM in the front matter http://jekyllrb.com/docs/frontmatter/
I have categories with spaces in them. I add them in a post as follows:
layout: post
title: "Visualizing the Magnitude of Earthquakes in New Zealand"
date: 2012-11-06 19:19:41 -0800
categories: [Data Visualization with R]
comments: true
Octopress correctly generates the path data-visualization-with-r and when I go to mysite.com/categories/data-visualization-with-r all is well.
However, on the automatically generated 'categories' page the link is to:
mysite.com/categories/data%20visualization%20with%20r/
which is empty.
Does anybody have experience in categories with spaces in them?
Edit: I will add that the link to the category from the main blog page is also correct. The only place where it has spaces and is wrong/different is on the /categories page.
how is it automatically generating the categories page? you can use slugify http://jekyllrb.com/docs/templates/
{{ page.categories | slugify }}
I simply explain my "problem". I know nothing about JS and AJAX. But I'd make a simple AJAX function:
My Menu "projects" displays the last 5 projects to which the user is involved
When you click on one of these projects, a small drop-down list appears and you can choose "Tasks", "presentation", "Discussions", etc..
When you click on "Tasks" for example, the right part of the website is updated by displaying tasks on the project.
Not refreshing the entire page, just a div on the right.
I have to pass the ID of the project that I want to see the tasks to the right div (which simply loads tasks.php) so that it displays project tasks that I selected!
By asking a few people I was advised to pass the ID of the project by putting it in a "rel" of the div of the project, that I would recover after tasks.php, only I did not have a clue how to put it into practice, as simply as possible!
If you could help me, it would be very helpful :)
Seems like all you need is to build a url to your php page. Something along the lines of tasks.php?projectId=[project id goes here]. This url would be built when the user clicked on one of the projects.
For the request itself, I suggest you use jQuery's $.get() function (http://api.jquery.com/jQuery.get/).
In PHP, you could then use $_GET["projectId"] to retrieve the value, and act accordingly. As far as how to transfer data between the two, I'd recommend encoding your PHP response as json (using the proper content encoding, a simple set of header directives will do), obviously you'll need to fomat the JSON to something like:
{tasks: [{id: 'task1', name: 'My task', ...}, {id: 'task2', name: 'my other task', ...}]}
Does this answer your question?
How can I set text direction [rtl] on load editor?
According to the docs, this should do it:
CKEDITOR.config.contentsLangDirection in the CKSource manual
Example taken from there:
config.contentsLangDirection = 'rtl';
Another way to do it is directly from your view file, the benefit of using replace() method is that you can use different direction and style for each of your view.
CKEDITOR.replace( 'article_area', {
contentsLangDirection: 'rtl'
} );
By using replace() you can also do other filtering stuff like allowing/disallowing tags and removing buttons from the editor. for a detailed description visit:
http://ckeditor.com/ckeditor_4.1rc/samples/datafiltering.html
If you use CKEditor version 5, the config block is like:
language: {
ui: 'en',
content: 'ar'
}
Where in this example, the editor itself will remain in english (both headings and orientation) and the content will be edited in arabic (therefore right to left).
I chose this example to illustrate that it's possible to use different languages for these two purposes (say if you build a CMS with the text editor and admins want to add arabic or hebrew translations for different site content but interact with the editor itself in english). But you could also set ui: 'ar' in order to mirror the editor itself as well (note that to do this I think you have to bundle in the languages in one of several ways, see the links below for reference).
The support for bidirectional text seems to be good (aka type something in Arabic and then type in english and it automatically switches to left-to-right only while you type in english).
References:
https://ckeditor.com/blog/CKEditor-5-v12.4.0-with-image-resizing-to-do-lists-RTL-language-support-and-more/
and the linked
https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html#righttoleft-rtl-languages-support
CKEDITOR.replace('editor1', {
language: 'es',
removeButtons: 'PasteFromWord'
});
just change the ContentsLangDirection="Rtl" inside the CkEditor like below
<CKEditor:CKEditorControl ID="CKEdMainPageDescriptionWebsiteMobileappAr" BasePath="ckeditor/" runat="server" Width="100%" Toolbar="Basic" ContentsLangDirection="Rtl"
ToolbarBasic="|Bold|Italic|Underline|Strike|-|NumberedList|BulletedList|Outdent|Indent|-|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|
|Styles|-|Format|-|Font|-|FontSize|
/
|Link|Unlink|-|TextColor|-|Undo|Redo|Cut|Copy|Paste|PasteText|PasteFromWord|"> </CKEditor:CKEditorControl>
As of version 5, the direction can be set by changing language settings. You can see more details here.