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.
The example XSLT file doc/trWSite.xsl
defines the structure of each
documentation page and in particular the navigation elements. It
achieves:
body.htm
file (not the index.htm
file)
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.
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.
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.