|The Apparance web site prototype.|
- Title banner and logo
- Site navigation bar
- Page content, different for each page
- Footer with a few common links and note.
|The top-level page generation procedures.|
|All that is needed for a top level, text content based page.|
|Title banner background (transparency shown as checker-board)|
|Title logo (transparency shown as checker-board)|
|Header background (CSS) and logo (HTML) generating procedures|
|The main navigation bar. Current tab and hover highlighting shown.|
|The bar and button creation procedures.|
|The CSS generation procedure for the navigation bar and buttons.|
|Example of a double level navigation bar.|
|Simple page footer|
|Common footer procedure and where it fits in.|
|Markdown source document compared to resulting HTML page output.|
|Source operator description format generated by the editor|
|Resulting operator documentation example|
|Summary section for the operator documentation|
|It's even worth wrapping the simplest of tags.|
|The heading procedure, parameterised by level (and ID)|
HTML & CSS
|Reusable HTML and CSS procedures|
|CSS property helpers in use|
|Image fetching procedures.|
|Document reading and processing procedures.|
- Image tags are parsed and used to drive image thumbnail generation, propagate the main file, and replace the image element with the thumbnail and a link to the full image.
- Lists have a little bit of formatting added to turn "Title - Description…" into "Title - Description…" to make the headings stand out a bit more. This is styled and can be updated globally.
|Processing of all image tags in the document using recursion|
- The document is searched (using recursion) for all image tags.
- The tag is parsed and broken open into its constituants.
- The image file is located and propagated to the output folder.
- A name for the thumbnail is generated based on the image name.
- A thumbnail version of the image is generated in the output folder (using Image Magick).
- A new image tag is constructed (around the thumbnail file).
- The image tag is wrapped in a hyperlink tag pointing at the full image.
- The document around the image tag is re-combined.
Viewing the Results
|LivePage browser extension in Chrome|