Easily generate pages per metadata

[MoOx]

Eg:

• tags
• date (year, year/month...)

with a way to sort / paginate results

[thangngoc89]

Dynamic routing mind help

Add a NotFound route. Don't use * to catch all route.

[MoOx]

For this, we will have indeed to really use react-router. But I think * will be a requirement since we don't know (when writing routes) what pages you will have.

[thangngoc89]

We do. After md-collection-loader finishes, we know all the routes available. User web_modules/src/routes.js should be a small slice of routes. Statinamic will control the others

[MoOx]

Statinamic will control the others

That's why there is a *.

[thangngoc89]

Yeah. sorry :)

[MoOx]

And * is the recommended way to catch all routes (and so not found).
Not found is kind of our PageContainer || PageError.

[thangngoc89]

I'll take a look at this later. Really want a tags system

[MoOx]

I will work on it after introducing search in the default boilerplate

The idea is to use routes with names like "tag/:tags", read routes to find ":tags" and generate pages based on all metadata "tags".

Something like that. This way user will be able to control url generations.

[MoOx]

It's a requirement for me too :)

[thangngoc89]

Sound easy. Haha. How about I work on search and you work on this. Adding search is much easier.

[MoOx]

Let's do this.

[thangngoc89]

I have a upcoming project that needs a static site generator. Tagging system is a requirement so I did a little research for making such a system for Statinamic.

And here is the result : thangngoc89/blog#89
Nothing fancy there. It stills a proof of concept, need a lot of tests and a patch in statinamic core to make it work. I'll walk you through the process:

• Hook a callback to webpack's compiler done event
• Get tags list from statinamic/lib/content-loader/cache.js
• With each tags, push a new object to cache.js

cache.push({
  __url: `/tags/${item}`,
   __resourceUrl: `/tags/${item}/index.html`
})

• Catch this routes in React Router (tags/:tag)
• Make a new Component to show posts with current tags in React Router
• That's it for static build. To make it work for dev mode, I need to make reading dataUrl optional

Wrap these LoC in a condition (check for availability of item.__dataUrl)
https://github.com/MoOx/statinamic/blob/81baba84c5b8a49564ef8b2c82996148bf8f02ed/src/builder/server.js#L155-L165

Probably 404 page will be benefit from this patch too. No need for download data file for such a page.

But there is some issues to solve:

• How to inject tag data to Tag Component (to be safe, you'll will have to slugify the tag, we need to inject the original tag to the Component since slugify every tag we found is costly and make the js bundle bigger)
• The Webpack plugin is ugly, we probably need to provide a clean API for this.

[MoOx]

I will work on this after 0.9 (I was supposed to but, life and shit...).

I want this to be really simple. A route and a layout/component should be enough. I think we need to use something like redial to have a universal way to fetch data so we can use a component during build or on client runtime (currently for pages, there is 2 pieces of code to get data, one for static and one for client, which kind of sucks).

[thangngoc89]

life and shit...

Don't worry, you're doing a really good job.

A route and a layout/component should be enough

👍 I love simple

[thangngoc89]

async-props is another option. It's from react-router creator. and it uses react-router middleware

[MoOx]

I am on it. Should not take that long and user API will be straight forward (nothing specific, just routes with parameters that match name in the frontmatter and boom, generation).

[MoOx]

This is implemented in 0.16 🎉

[blairanderson]

@MoOx do you have a link to the source on this? i cannot find documentation

[MoOx]

See https://phenomic.io/docs/usage/routing/#uses-react-router-routes-parameters-to-create-dynamic-pages