Rendered full HTML output?

[craigkeeling]

Is it possible to have a full HTML output instead of the template? The interactive samples appear to show that possibility, but my tests output the template only. My goal is to allow for a crawl-enabled page (SEO) instead of a content-empty template in the source. Thanks!

[pyykkis]

That's possible, but not trivial. Transparency doesn't (and can't, actually) provide any support out-of-the box, it's just a client-side templating engine.

To support web crawlers, you need to render pages at the server side. That's possible, although a bit tricky with Transparency. First, you need to be able to execute javascript on the server (the same is true with handlebars.js etc.). Additionally, as Transparency is DOM based, you need to have decent DOM implementation available in the javascript env. This pretty much limits your choices to node.js + jsdom.

The easiest way to do SEO optimised pages is to ditch Transparency and render everything at the server side with Jade, Haml, or any other choice you prefer. In case you want to do client-side rendering AND support crawlers, there's couple of feasible strategies:

1. Use the same templating engine on both client and server. Server renders pages ready for the crawlers and for the first request made by browser. Browser takes care of rendering the subsequent updates on the client side. Mustache is a good candidate, as it has been implemented to variety of languages.
2. Use whatever templating engines you prefer on client and server and setup node.js with jsdom as a reverse proxy for your service. For the crawlers and first requests made by browsers, use node.js to fetch the content-empty templates and json responses and run javascripts in order to build full HTML response. Finally, send the HTML and scripts back to client.

Of course, your experience, preferences and the particular situation should be the primary factors in the decision. Generally speaking, I'd prefer option 2, as it decouples the html/api responsibilities and leaves me more room and options for the backend, .e.g., using Transparency + CoffeeScript on the browser and Clojure on the backend would be non-issue.

[craigkeeling]

Thanks, @pyykkis.

The perspective and situation I'm thinking of is similar in nature to Hammer (http://hammerformac.com/). The ability to use Transparency-style templates in quick, static sites (similar to Hammer's includes and variable functions) would be extremely useful. I've suggested this feature to the Hammer developers, but they feel it would go too far outside of their vision for the software and Transparency appeared to come close to what I was looking for.

[pyykkis]

Ah, that goal should be far more easier achieve!

I guess you know the scene quite a bit better, but in any case, Jekyll is one generator I've heard quite positive comments, especially when used with GitHub Pages.

Regarding Transparency, it should be quite easy to wrap it into a command-line tool that would generate static sites. Out of my head, it could be something like this

> transparency generate --config config.json

Where config.json would be something like

{
  "templates/index.html": {
    "#books": "data/books.json",
    "#pencils": data/pencils.json"
  },

  "templates/services.html": {
    ".barber.services": "data/barber-pricing.json"
  }
}

And the folder structure, as implied, would be something like this:

├── config.json
├── data
│   ├── barber-pricing.json
│   ├── books.json
│   └── pencils.json
├── public
└── templates
    ├── index.html
    └── services.html

After running

> transparency generate --config config.json

public folder would contain index.html and services.html, filled with the data given in the corresponding .json files. Is this closer the thing you were looking for?

[craigkeeling]

@pyykkis Yes, exactly! A command line tool like that would be extremely useful. That's an easy tool to create?