2

I am trying to create a simple site with flat-file content management, and a Vue.js front-end. I hope to approximate the following file structure:

app
- various vue files and folders
- data.json
- posts
- - post1.md
- - post2.md

There would be some kind of build process that takes each markdown file in app/posts, processes the markdown, and stores everything in app/data.json. Then the vue.js front-end can just import data.json and use it to hydrate various components as needed.

The problem I am having in finding a solution is that there are tons of flat-file CMS out there, but very few of them seem to allow you to get between the processing of the flat files and the rendering of the templates. Most of the flat-file CMS I have encountered are designed to generate a static site folder structure of html documents. Since I intend to use a front-end framework with routing (I am using Vue, but it could be React, Choo, etc.), I need a flat-file CMS that will easily dump the data it processes from the folder structure into a single JSON file that can be adapted to serve as the data model for Vue.

I've Googled this many times and in many ways. The fact that so few results come back, in spite of the omnipresence of front-end js frameworks, is making me wonder if there's some obvious reason you wouldn't build a site this way, or some key term I'm missing.

So, my questions:

  1. Is there a flat-file CMS that allows you to easily harvest the data it extracts without generating a full static site?

  2. If not, why? Is it that the processing of a folder full of markdown files is simple enough that it should just be done with a custom npm script? Is there a glaringly obvious reason that generating a js-framework-friendly mini-database from a flat file system is a dumb idea?

Kevin
  • 21
  • 2
  • I really do want actual pre-rendered HTML pages. Faster initial page display time, easier SEO and support for clients without JS come to mind as obvious advantages. But if you don't care for those, why not just use something like https://github.com/miaolz123/vue-markdown and render your markdown client-side too? – raphinesse Sep 07 '17 at 20:58
  • Thanks for the response! We're using a front-end framework to optimize for a lot of DOM manipulations that the project requires. If we do use vue-markdown render the markdown on the client, we still need to generate a database (ideally just a json file) listing all the markdown files in the project, their raw content, and their frontmatter. I guess that's really the crux of what I'm trying to figure out. Would you say that once the markdown is on the front-end, the problem of generating the database file becomes trivial enough to just roll my own generator as an npm script or something? – Kevin Sep 07 '17 at 21:29
  • I'm still not 100% certain that I really got your requirements, but yes, I'd say generating an index/a DB of your markdown content should be really straightforward. List dir contents, read files, split front matter and content, optionally render markdown to HTML, store everything in appropriate structure, serialize it to JSON and finally write that out to the disk. I would guess 30-50 LoC. – raphinesse Sep 07 '17 at 21:51
  • That's helpful, thank you @raphinesse – Kevin Sep 08 '17 at 00:00

1 Answers1

0

If you're still in need of a solution: there might possibly be one from our PHP and jQuery based flat file CMS. It outputs everything to database.js in JSON format. The database.js structure looks like this:

{
    "config": {
        "siteTitle": "Website title",
        "theme": "default",
        "defaultPage": "home",
        "login": "loginURL",
        "password": "$2y$10$3Et0aY82zCjSZJDAkBep7uXrQHQa3PtLt0okgqF2oen\/IIriiL65O",
        "menuItems": {
            "0": {
                "name": "Home",
                "slug": "home",
                "visibility": "show"
            },
            "1": {
                "name": "Example",
                "slug": "example",
                "visibility": "show"
            }
        }
    },
    "pages": {
        "home": {
            "title": "Home",
            "keywords": "Keywords, for, this, page",
            "description": "A short description.",
            "content": "<h1>Home content.<\/h1>"
        },
        "example": {
            "title": "Example",
            "keywords": "Keywords, for, this, page",
            "description": "A short description is also good.",
            "content": "An example page."
        }
    }
}

The CMS will need some custom work so you could pull the data from database.js (since only a logged in user can read/write to the database.js). This would allow you to pull the database data with Vue and work with displaying the content. Project link: https://github.com/robiso/wondercms

robiso
  • 1