<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//ABISOURCE//DTD XHTML plus AWML 2.2//EN" "http://www.abisource.com/2004/xhtml-awml/xhtml-awml.mod">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:awml="http://www.abisource.com/2004/xhtml-awml/">
<head>
<!-- ======================================================= -->
<!-- Created by AbiWord, a free, Open Source wordprocessor. -->
<!-- For more information visit http://www.abisource.com. -->
<!-- ======================================================= -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Cindy Demo Site</title>
<meta name="Title" content="Cindy Demo Site" />
</head>
<body>
<div>
<h2>Cindy Demo Site</h2>
<h3>What is Cindy?</h3>
<p>Cindy is a template engine that was designed to solve the problem of
application developers modifying web designer HTML. There have been
earlier approaches who did this well. The earliest one I know about
is <a href="http://homepage.mac.com/pauljlucas/software/html_tree/classparser.html"
>HTML Tree</a>. Another one is
<a href="http://wiki.zope.org/ZPT/TALSpecification14"
>Zope's TAL</a>. There are at least two recent engines working on
completely unmodified HTML. These are
<a href="http://search.cpan.org/~tomita/Template-Semantic">Template::Semantic</a>
and
<a href="http://beebole.com/pure/">PURE</a>. The term <b>unobtrusive</b>
(as used by PURE) for template engines that work on valid HTML without
any special content describes this approach best.
</p>
<p></p>
<p>Cindy does however go further. It is not a library that mangles data
provided through an API. To achieve complete decoupling of application
and design the application delivers its data as XML (or parse able
HTML). Cindy then moves these data into templates. As a consequence
Cindy is language independent.</p>
<p></p>
<p>This resembles a limited version of XSL. The big difference is that
Cindy is still a template engine, that is dreamweaver compatible. XSL
mixes output template and transformation description and is not
suitable for web design.
</p>
<h3>Content Injection Sheets</h3>
<p style="text-align:left">The description of how to move the data is
done in content injection sheets. They have a grammar that is mostly
<source XPath> <action> <target XPath>. The actions
are those specified by <a href="http://homepage.mac.com/pauljlucas/software/html_tree/classparser.html"
>TAL</a>. </p>
<p style="text-align:left"></p>
<p style="text-align:left">The idea for content injection sheets came
from seeing a web designer adding an image to a page with css. I
realized that he was actually injecting content. Since the semantics
are similiar cjs sheets do resemble css.</p>
<h3>About this Demo</h3>
<p style="text-align:left">This demonstrates the use of the
<a href="http://search.cpan.org/%7ejzobel/Cindy/"
>Cindy</a> Apache2 module and SSI for building a static website.
As you see you get an albeit limited CMS. Cindy is used to surround
all pages with a constant frame and to create a menu. You
can look at the unmodified pages (such as
<a href="./10_About.shtml?cindy=no">this page</a>
or <a href="./?cindy=no">its directory index</a>) by adding a
GET parameter <span style="font-family:'Courier'">cindy=no.</span></p>
<h3>Framing</h3>
<p>All static pages are used as data for the template frame.html
(<a href="./tec/tmpl/frame.html">Check the source</a>). Their title
is moved to the frames title. Their body is moved into the frames
<span style="font-family:'Courier'"><div id="main"></span>.
This strips the header and enables using a static frame around all
pages. This frame includes the menu. Both is done by this simple
<a href="tec/cindy/frame.cjs">cjs sheet</a>. </p>
<h3>Creating a Menu from Directory Indexes</h3>
<p>The directory indexes are parsed as data and are then recursively
included via SSI. Parsing the directory indexes generated by
<span style="font-family:'Courier'">mod_autoindex</span> is done using
a <a href="tec/cindy/index.cjs">more complex cjs sheet</a>. For
each directory found in such an index a SSI include for that
directory is generated. The result is a nested list, that is
displayed as a menu using a css stylesheet
(<a href="http://www.cssplay.co.uk/menus/final_drop2.html"
>Stu Nicholis Ultimate menu v2</a> in this demo). </p>
<p></p>
<p>The advantage of using apache directory indexes is that
things a user is not allowed to see are automatically
removed. So if HTTP authentication is required for a directory,
it appears in the menu when the user authenticates.</p>
<h3>Using .htaccess</h3>
<p>How content injection is done is controlled from
<a href=".htaccess">.htaccess</a>. For every file Cindy needs to
know template, data and injection sheet. These are communicated to
the request handler by environment variables with the prefix
<span style="font-family:'Courier'">CINDY</span>. Static values
are set with <span style="font-family:'Courier'">SetEnv</span>
while dynamic values are set with
<span style="font-family:'Courier'">RewriteRule ... [E:..]</span>.
Note the usage of
<span style="font-family:'Courier'">IndexIgnore</span>
to keep files or directories out of the menu.</p>
<p></p>
</div>
<div>
<p></p>
</div>
</body>
</html>