Generate page from json directly

[kuzvac]

Can i use it for display pages from json directly, not from markdown?
Use case: I get json that need statinamic from wordpress (through wp-api, and some modifications). Feed this json to statinamic (route setups manually or dynamic), and statinamic render my pages.
It's really to do?

[thangngoc89]

Well. Thanks for a interesting feature request. AFAIK This is currently not possible with Statinamic.

But there is workaround, you can save your json data to files and let's Statinamic handle the rest like normal.

[kuzvac]

@thangngoc89 hmm, interesting, thanks for suggesting. Save json data to json file or create markdown from json?
I think i dive into it at end of next week.

[thangngoc89]

Save json data to json file or create markdown from json

That depends on which kind of data. Could you show me an example data structure of the JSON ?

[kuzvac]

Real json date i can provide in next week. For now i have schema of fields which wp-api can provide:
post - http://v2.wp-api.org/reference/posts/
pages - http://v2.wp-api.org/reference/pages/

[thangngoc89]

For now i have schema of fields

That's more than enough. You have 2 options here:

• Easy: Dump JSON data into files like this:

---json
// Dump all data you need here with JSON.stringify()
---

Main content put in there

• Write a content-loader that doesn't parse frontmatter but read and emit files directly from those JSON field. This is hard if you don't know about how Statinamic works internally but it might saves you a little performances if you are working with a large amount of files.

In the integrating process, if there is any complications, you can ping me. This is a great use case that can a great show off for Statinamic ;)

[MoOx]

If you want to have statinamic working from with static/client build, you can simply generate files from your wp-api with the following content

---
# header (json/yml/whatever) with title, route, date etc
---

html content (since wordpress wysiwyg generate html)

This way, you can consume this files via content-loader with an empty rendering method (since body will already be html). statinamic will be able to generate collection data from those files.
Seems really simple to do, and I am interested since I maintain a wordpress website (admin is easier for my wife than raw markdown files).

For assets (wordpress media), it should not be an issue since wordpress generate full url for media in the wysiwyg.

A script that generate from wp-api to statinamic ready files will be highly appreciated for me (and the community haha).

[thangngoc89]

For the record, I'm building something similar to you. Take posts from Discourse forum API and build static site with that. If you need a hint, take a look

https://github.com/thangngoc89/dnh-blog

(most interested parts is in /data/)

[MoOx]

@kuzvac any update maybe?

[kuzvac]

No, for now, we built layout pages with static data.
But we will be doing it later. I write here about progress.

[MoOx]

Now we are supposed to be able to do this via phenomic loader plugins. Will need some tests I guess. https://phenomic.io/docs/usage/plugins/

[clembu]

@MoOx I was looking for a way to handle data files and render them with react components, and looked at Phenomic's plugin pipeline, but the PhenomicLoader only deals with front-matter and markdown, in your docs, and it's documented that "body is what will be injected in Phenomic's <BodyContainer>" It's okay by me, but 1) yaml and json don't have front-matter, they directly have matter, and have no body, and 2) I don't want to output html into a body in my plugin, I want to pass data to my React components so that they render it as an html DOM.

[MoOx]

We can totally adjust our loader to accept file like yml and json directly.
I am also thinking about removing the head/body thing, and just directly have the data, probably keeping a "body" field generated from text file using a front-matter + some content.
The BodyContainer only make sense to display a body indeed, but you can skip it's usage and only rely on data to display whatever you want. A workaround I am currently using is to use .md files with just front-matter (eg: for showcases on our website)

[clembu]

Yeah, as a work-around, it's a good one, since if you ever want to add a markdown content, you easily can without changing your structure that much.
I'm actively looking for a way to build a static site like this:

front-matter===|
               |=> js objects==|
markdown=======|               |
                               |=> site data structure ===|
                   yaml/json===|                          |
                                                  ________V_________
                   Routing parameters ===========>|React components|
                                                  ==================
                                                          |
                                                          |
                                                          V
                                                  ===================
                                                  |Static HTML files|
                                                  ===================

Ideally, with means to smartly parse the source file paths into data (something like /animals/birds/sparrow.yml would become, after loading, a object in the Content Tree with a category: bird property, viewable at url /animals/sparrow, because its Content Type defined something in the likes

route: {
    from: 'animals/:category/:name',
    to: 'animals/:name',
    save: [
        'category',
        'name'
    ]
}

Phenomic is the existing technology closest to allowing me to do that, yet I don't really know if I can leverage Phenomic to do it, or if I'll end up having to write my own webpack loaders and plugins anyway.

My guts say I could, but my brains, rummaging through the docs and the code, can't find a solution :/

[MoOx]

To make it easy we can add native support for raw data. Anyway, the current way to consume data & collection will be refactored and improved, and API will probably change a little bit.
For the transformation you are talking (category from file path to metadata), you can probably write a custom loader plugin.
For the routing, when data will be in the phenomic global collection, it should not be a problem since we have what I think is a nice way to create dynamic routes https://phenomic.io/docs/usage/routing/

[clembu]

I guess you're right, Phenomic gives me all the tools I need, I just need to engineer my way through the problem.

Curiosity satisfied regarding raw data transformation. Thanks!

[MoOx]

If you want to take a look and play with things a little bit, here is where current transformations are made

phenomic/src/loader/index.js

Lines 31 to 38 in 38662d0

	const frontMatter = frontMatterParser(input)
	const pluginsResult = plugins.reduce((result, plugin) => {
	return plugin({
	frontMatter,
	result,
	options,
	})
	}, {})

. Should not be very hard to adjust this to skip frontMatter in certain situation (file extension?)

[bloodyowl]

Going to be fixed with #925