frontmatter | meta frontmatters of type json | Static Site Generator library

Summarizing a lot gatsby develop is interpreted by the browser while gatsby build is compiled in the Node server (your machine or your deploy server) so the behavior of your code is slightly different. Especially to what's related to global objects and SSR (Server-Side Rendering). The fact that your code works under gatsby develop means that is working under certain specific conditions, not that your code works always or has no errors, this should be inferred if it succeeds in a gatsby build.

In your case, it seems that the posts data is undefined when using memoized hook (useMemo), at least, in the initial render.

Try using:

You may find this GitHub thread insightful. Following it, try using:

The problem is that you are using a page query in an ArticleListing component (placed inside src/components/ArticleListing.js), so in a regular React component.

As you can see in the previous docs, page queries are only available in top-level components (pages or templates).

That said, you have two options depending on your use-case structure.

• Moving your ArticleListing component inside src/templates

• Use a ustaticQuery hook (or the traditional StaticQuery) to create a GraphQL query and use the same JSX structure to return the posts. Something like:

You need to pass the --front-matter=process when modifying the front-matter content and pass the required expression to modify the tags.

For case 1) pre-formatted array notation with just sorting needed, use yq as

In the example you provided, they have a collection of posts as Markdown files where each post (.md) file has a thumb field defined in frontmatter representing an image thumbnail name. Each post in the "posts" collection utilize the post.njk layout, and this is where that frontmatter data from each post will be utilized:

The beamer columns you are trying to use, are something special in the beamer class and don't work with normal classes.

However under the hood, these columns are just glorified minipages - and these you can use in normal latex classes.

One easy thing you can do is to add a key field on your markdown files to distinguish between posts and projects. This will allow you to filter GraphQL queries. In the same way, you can also place the markdowns in separate folders and filter them using the relative/absolute path.

If I understood you correctly, the URL that is generated when clicking the previous and next buttons is "concatenating" the slug of the post to the current URL instead of replacing it, isn't it?

So, instead of creating a URL like localhost:8000/blog/next-article is generating a localhost:8000/blog/current-article/next-article.

This is because of the way you generate the links. You can spot the links route just by hovering the links to see that the URL of the previous/next article is being added at the end of the URL instead of replacing it.

This is because you are not adding the correct relativity to the links. Simply use:

There are a few things weird in your code that shouldn't be working despite your said it does.

In React, all components must be capitalized, otherwise, React will interpret them as HTML elements, and because normally a component name doesn't match an HTML tag, it will break because it won't exist.

In your case, both templates must be renamed to: