Plugging pages

In my last post I descriped some ideas for a prototyping solution based on Snippetory. One of the modules it builds upon is the mounting of re-usable parts. Now I want to provide further details on this part based on the Snippetory site as an example. 
Things start with the base.html. It contains the things, that are used for the entire site. And it provides sockets to plug the parts that are different. These sockets can be mandatory, or provided a sensitive default, optional. They're represented by simple location marks
<title>{v:title default='JProggy'}</title>
or if there's some more code used as default as a region.
<div class="region-logo">Source
<div class="tagline">for developers</div></div>
To get a meaningful page we have to add some content. As there are a number of plugs this is not bound to a single location, but can spread throughout the entire page. Of course this is a very simple page. Who ever been on the site knows, the most pages have an additional navigation area on the left. This is achived by adding the menu.html. The menu.html plugs into some sockets of the base.html, provides some new and, wraps the 'content' plug, so that content is injected into the code of the menu.html. So far this is a solution, that allows quite some possibilities to share repitive code. However, for a modular application this might not be enough. So stacking several files similar to menu.html. The algorithm supports that. In addition some kind of component provider can be stacked even on top of the content file. This would make sense to encapsulate components, that are placed on different pages, but not on all. Like a comment function one want only provide to some of the pages, or an advertisement block, that's used to fill spare areas. Hm, the examples might be not that brilliant, but I think there are better ones out there. As the pages are simply stacked the definition of a page type only needs a list fragment files to be included in order.
For all the pages in the snippetory directory.

No comments:

Post a Comment