Home > Examples

Examples

The documentation of trgensit itself serves as an example of a small web-site.

The directory doc contains all the web pages as if it was a web site. The directory site is the home directory. doc/trWSite.xsl is the example XSLT style sheet file. doc/site/site.css is the central CSS style sheet file. doc/site/index.htm is the main entry documentation page.

Note that normally, the files trWSite.xsl, body.htm and trWNav.xml should not be uploaded to the web server. I included them in the distribution zip file, such that you can reference them. They are not needed to surf the documentation.

I am using the sitecopy tool to automatically upload to a web server. sitecopy allows to exclude specific files or file types. Thus I exclude the body.htm and trWNav.xml files. Note that trWSite.xsl would anyway not be uploaded, because it is one directory level above the site and hence outside.

If you downloaded the ZIP file trgensit-org.zip instead of trgensit.zip, you will find a body.org file in each directory. Please see here for more details.

Navigation Examples

The example XSLT file doc/trWSite.xsl defines the structure of each documentation page and in particular the navigation elements. It achieves:

The XSLT example file contains code to switch navigation elements on and off, depending on the context. Note that the example is kept deliberately simple. More complex navigation is possible using more elaborate trWSite.xsl style sheets.

To show this, the directory doc contains a second style sheet, trWSite-hmbrgr.xsl. It produces a tree like navigation structure on the left side of the pages and "hamburger" style functionality. To try-out that style, you would rename that style sheet to trWSite.xsl (after renaming the previous trWSite.xsl) and run trwupall.py from the doc/site directory. This will update all index.htm files to the other navigation model.

As is, trWSite-hmbrgr.xsl uses scalable vector graphics (SVG) icons to help guide the user in the navigation menu. The SVG files are stored in the home directory. All index.htm files reference the same SVG graphics using relative paths, that are automatically inserted by the XSLT transformation.

trWSite-hmbrgr.xsl also contains the option to use UTF-8 symbols from the monospace font instead of SVG graphics. This option is commented out using usual <!-- ... --> XML comments.

The hamburger style navigation will kick in, when the web-browser window width is below a certain treshold. You can try this on a PC by playing with the browser window width. When viewed on a mobile device you will usually get the hamburger style right away, because of the smaller (logical) screen width than on PCs.

The hamburger style navigation relies on various CSS definitions in the file site.css in the home directory.

Example CSS Styles

The definitions in the example CSS file doc/site/site.css set the look and feel of the documentation site, e.g. colours and fonts.

In general the file site.css shall have the corresponding style definitions that are injected into the final index.htm files by the trWsite.xsl XSLT transformation file.

The provided site.css file contains definitions for both the trWSite.xsl and trWSite-hmbrgr.xsl example transformations.

My Personal Web Site

I have been maintaining my private web site https://web222.webclient5.de with the trgensit tools since year 2003. Updates, like changing all navigation graphics from raster graphics to SVG, were straight forward due to the trgensit tools.


Last change: 2024-09-27
© 2002-2024 Dr. Thomas Redelberger redetho(at)gmx.de