I was going through various tutorials using the WP REST API. Which in fact didn’t work out too bad.
What sucked was, stuff like images in posts or pages. And then of course, now with Gutenberg Blocks it’s a whole different ball game.
So then I came across the WP GraphQL plugin and various offshoots, WP GraphQL Gutenberg, etc. These are all still under development. I started working on something, but then after a recent update I’m running into issues.
It’s all a little above my experience level. I feel like a checkers player at a chess game.
I kind of just stumbled upon Awesome Grav Stuff which includes a link to a rather lengthy and detailed article “Grav as Headless CMS Tied to Gatsby with GraphQL Schema”.
Thanks for that. I’ve seen that repository before. Also went through that article. It uses an extension for Grav that hasn’t been updated in 4 years though.
Getting some projects out the way, then I’m going to take fresh dive into Grav & Gatsby.
You are referring to Grav Pages as Data Plugin I assume. What it does is similar to outputting JSON via a template but instead of just the Markdown page content it outputs the entire Grav page object as a JSON encoded array.
Indeed that plugin hasn’t been updated in 4 years now but that need not be bad. It’s a very simple and stable plugin I think
If you go through the Gatsby docs and tutorials on www.gatsbyjs.org, their “introduction to Gatsby” tutorial describes using Markdown files as a source for content.
As far as I can make out, there are ways to fetch these files remotely.
I assume there must be a way to have Grav give access to it’s Markdown files?
Create a new plugin: $ bin/plugin devtools newplugin
Answered some questions. I called the plugin ‘headless’
$ cd user/plugins/headless
$ composer update
The gist of ‘/user/plugins/headless/headless.php’ is:
class HeadlessPlugin extends Plugin {
const api = '/api/v1/pages/';
/** The url of page being called */
protected $pageUrl;
// standard code omitted
/**
* Initialize the plugin
*/
public function onPluginsInitialized()
{
// Don't proceed if we are in the admin plugin
if ($this->isAdmin()) {
return;
}
// Enable the main events we are interested in
$lengthApi = strlen(self::api);
$url = $this->grav['uri']->url();
// If the API is being called
if (substr($url, 0, strlen(self::api)) === self::api) {
$this->pageUrl = substr($url, $lengthApi - 1);
$this->enable([
// Put your main events here
'onPagesInitialized' => ['onPagesInitialized', 0]
]);
}
}
/**
* All pages have been initialized
*/
public function onPagesInitialized($event)
{
$pages = $event['pages'];
$page = $pages->find($this->pageUrl);
$content = $page->content();
echo ($content);
die();
}
}
Browse to ‘localhost/api/v1/pages/typography’
The bare processed markdown of page '02.typography/default.md` should be send to client:
<div class="notices yellow">
<p>Details on the full capabilities of Spectre.css can be found in the <a href="https://picturepan2.github.io/spectre/elements.html">Official Spectre Documentation</a></p>
</div>
<p>The <a href="https://github.com/getgrav/grav-theme-quark">Quark theme</a> is the new default theme for Grav built with <a href="https://picturepan2.github.io/spectre/">Spectre.css</a> the lightweight, responsive and modern CSS framework. Spectre provides basic styles for typography, elements, and a responsive layout system that utilizes best practices and consistent language design.</p>
<h3>Headings</h3>
<h1>H1 Heading <code>40px</code></h1>
<h2>H2 Heading <code>32px</code></h2>
<h3>H3 Heading <code>28px</code></h3>
<h4>H4 Heading <code>24px</code></h4>
<h5>H5 Heading <code>20px</code></h5>
<h6>H6 Heading <code>16px</code></h6>
etc.
Note:
This is only a simple starter to show what a plugin with a few lines of code could do.
I’ve been looking at this from all angles and coming to the conclusion it might just be easier to work with md files directly in Gatsby. As mush as I want to use Grav!
I was thinking for instance to make a symlink from the md folder in Grav to Gatsby, but then the way Grav arranges it’s md files doesn’t play well with Gatsby. Unless you can change how Gatsby looks at the md file arrangement?
Sadly, as much as I like Grav and want this to work with Gatsby, it seems the only way is going to have to be through some kind of json api setup. Similar to WordPress’s WP REST API.
After playing with Grav a bit and using it without the Admin plugin, one thing Grav showed me was, maybe it’s not that bad to work with raw md files for content. Combine that with Gatsby’s JSX in Markdown features…
This could be a pretty schweet union though if someone clever has some ideas on how to marry the two?
They transform the page and its child into the JSON (which is exactly what we need).
Then the Gatsby.
This was really tricky because I tried to repair and edit the plugin described in the article @bleutzinn posted:
Sadly, some libraries didn’t work. Then I found something amazing. Gatsby has a plugin called Gatsby Source Custom API which is created for you to link it with your CMS.
Thanks to this plugin I was finally able to connect to my domain.com/api/page
And weeeell, that’s all. This do all the magic.
I know it’s after 3 years but maybe, maybe someone like me will find it useful.