0

Is it possible to use Docpad as static site generator that also outputs json files that can be consumed by client side JS apps?

I'm building a website using Docpad as a static site generator, and I have an events section, where I want the events homepage to list all the events that are published using Docpad (with a link to the event details page).

What I'm trying to do is to generate the event lists by looping through a Collection that has all the events in it, but I also want to make the list more interactive and sortable (as we have a variety of events and want to make it easy for people to find events that are of interest).

What I would like to do is have the events list output to a JSON file, which we can pass to an AngularJS app which does the presentation,sorting and display of the events.

I know that Docpad can be used to generate an xml, but is possible to use Docpad to generate a json file with the data needed? So far my attempts are failing, which is why I'm asking if what I'm asking is even possible. My backup is to use XML, but I'd prefer JSON as Angular can consume it natively.

TIA.

Ashwin Shankar
  • 71
  • 5
  • I do exactly that on http://www.toonoisyfish.be/. All the data for the events is stored in a json file on disk. I have a (private) page for editing that data that requires a password (add express middleware to docpad.coffee - see https://gist.github.com/balupton/4557006) and have a route that saves changed data to the file. (In fact I implement this with PHP as my client was using that before and I could not find any node hosting that was as cheap) – Simon H Jun 06 '14 at 06:24
  • @SimonH1000 can you share some details on you've got DocPad to generate the JSON? I'm still a bit unclear on how to get this working with a static site. If I understand correctly, you're generating the JSON from PHP not from DocPad. I'd like to have DocPad generate it by parsing a DocPad collection. – Ashwin Shankar Jun 10 '14 at 06:25
  • Basically you will need to use a serverExtend event in docpad.coffee to create a express hook that you can post too from the client side and that saves the results to your .json file. I can't find the code I had for Docpad as I ended up having to implement in php. – Simon H Jun 10 '14 at 15:16
  • Take a look at http://stackoverflow.com/questions/22096966/how-to-handle-routes-in-docpad – Simon H Jun 10 '14 at 15:23

2 Answers2

1

If I understand the question correctly,then you should be able to generate a JSON file in Docpad pretty much in the same way you do any other document. Nothing special needs to be done other than choosing your favourite templating plugin. I do this using the ECO template plugin to generate a JSON file of my posts:

<% posts = @getCollection('posts').toJSON() %>
<%content = posts[0].contentRenderedWithoutLayouts or posts[0].content%>
<%#handle first item manually just to avoid the last array member having a hanging comma%>
[{
  'title': '<%-posts[0].title%>',
  'date' : '<%-posts[0].date.toDateString()%>',
  'content': '<%=@truncateText(content,700)%>',
  'slug': '<%-posts[0].slug%>',
  'url': '<%-posts[0].url%>'
<% posts = posts.slice(1)%>
<% for post in posts: %>
  <%content = post.contentRenderedWithoutLayouts or post.content%>
  },{
    'title': '<%-post.title%>',
    'date' : '<%-post.date.toDateString()%>',
    'content': '<%=@truncateText(content,700)%>',
    'slug': '<%-post.slug%>',
    'url': '<%-post.url%>'
<%end%>
}]

After this, just give the template file the double extension: 'json.eco'

I actually use a similar technique here to combine and minify css files and I think you could probably use this approach to just about generate any document format.

Edit (afterthought)

As an even easier solution that works specifically for JSON you could just use JavaScript's built in function for converting objects to JSON.

<%-JSON.stringify(@getCollection('posts').toJSON())%>

or to get a nicely formatted version

<%-JSON.stringify(@getCollection('posts').toJSON(),null,2)%>
Steve Mc
  • 3,433
  • 26
  • 35
1

Have you tried to use existing plugins:

Or at least take a look on their code and modify for your use case?

Lukasz Gornicki
  • 609
  • 4
  • 12