sintaxi / harp

Static Web Server/Generator/Bundler
http://harpjs.com
5k stars 343 forks source link

Link to Next/Previous objects in a JSON file #189

Closed myk13 closed 10 years ago

myk13 commented 10 years ago

I'm looking for a way to link to the 'next' and 'previous' objects in a JSON file.

On IRC kennethormandy requested I log this as he has a recipe for it.

kennethormandy commented 10 years ago

Here it is with comments, I will get around to making it a full recipe soon with a lot more detail, but hopefully this is enough to get you going.

//- Create an empty array of the articles
articles = []
//- Iterate over the articles like you would normally
for article, slug in public.articles._data
  //- Assign the slug, which is the object key, to a value instead
  - article.slug = slug
  //- Push each article into the empty array
  - articles.push(public.articles._data[slug])

//- Iterate over the articles array
each article, i in articles
  //- Article slug is the old object key that matched the file name,
  //- Like "a-post" for example
  //- Match it against the current page
  if article.slug == current.source
      //- Previous is one before this array item
      //- Next is one after
      //- Variables make it easy to template
      - prev = articles[i - 1]
      - next = articles[i + 1]
      //- The actual links
      ul
      if prev
        a(href="#{ prev.slug }") ← #{ prev.title }
      if next
        a(href="#{ next.slug }") #{ next.title } →

Here is the _data.json file I’m using, in articles/_data.json:

{
  "welcome-to-harp": {
    "title": "Welcome to Harp"
  },
  "go-out-and-make-it-your-own": {
    "title": "Go Out & Make It Your Own"
  },
  "a-post": {
    "title": "An example post"
  }
}
kennethormandy commented 10 years ago

Added it to the next-post branch of my Harp boilerplate, hb-remedy if you want a working example. It will also handle draft posts and sorting by dates appropriately.

hb-remedy-next-prev

ajmalafif commented 10 years ago

OMG what a week for me! This is the feature I've been loooong wanting for static generator. I asked Ghost forum every other month about this and the latest they gonna have it is v0.5 (now is v0.3.3), hexo, assemble.io and others..

I thought that porting from WordPress I'm only going to miss this one feature when using static gen, but now that @kennethormandy figured this out :zap:

silentrob commented 10 years ago

@ajmalafif How did you first hear about Harp? We need to find more people as excited as you are to try it :)

ajmalafif commented 10 years ago

@silentrob Ouch! :laughing:

I don't remember exactly which one was first, but it's either from these two sources;

1) http://staticsitegenerators.net/ — you can safely say I tried almost all just to find the right fit. From ruby-based to JS. Was liking JS since I tried Hexo, Ghost, Wintersmith, and Docpad (in that order; some others afterward as well like roots.cx).

2) I think there's this week Harp is being featured in Github's explore, JS Daily and web-tools weekly.

Beautiful things don't ask for attention. — Sean O'Connell, The Secret Life of Walter Mitty

I think if you've gone through almost everything on http://staticsitegenerators.net/ but can't really find a comparable to current setup/choice (WordPress), everyone would be as excited as I am! I mean generally of course static is always faster that's a given but to what extend can I compromise features-wise (like assets file management, SEO-wise as a blog/site, interactivity-wise for showcasing my work).

I would confidently and proudly say Harp is the best option out there for static generator, at very little need to compromise anything at all.

My next concern would be how to handle external/3rd-party javascript for some extra interactivity to be included in my Harp setup, but from what I can wrap my head around right now, that's already doable in Harp. I believe I just need to figure out or ask here (since you guys are very helpful and welcoming)!

myk13 commented 10 years ago

That's awesome! Thanks @kennethormandy. I was sooo close - can't believe I didn't get there. Very much appreciated.

@silentrob - Personally, I only stumbled across harp a few days ago. I'm pretty sure it was initially via http://webdevrefinery.com/forums/topic/13153-ghost-a-nodejs-blogging-framework/. I was playing with assemble.io and Wintersmith as an alternative to Middleman. I was just looking for something really simple, that I could drop into my existing Grunt workflow. My test was to build an average small site with 30 pages across 5 templates exactly the same with Harp, Assemble and Wintersmith. I had already built the site once with Middleman, so had worked out the structure, design concerns, etc. I simply built it with Harp faster - I just needed the 'next'/'previous' issue answered.

As far as static sites go, I'm sold. The only thing I could ask for at this point is more recipes and the ability to generate pages from JSON - both of which are already being discussed.

kennethormandy commented 10 years ago

This has been pretty well covered now, so I’m going to close the issue.

If you want to read about it, check out:

mcbjam commented 9 years ago

Hi.

You are looking for

articles.indexOf(current.source);

This is a link explain what you want to do with harp : http://www.raymondcamden.com/2014/02/26/Creating-NextPrevious-Links-in-HarpJS

One of my Website with Harp : http://buzz.mcbjam.com/