AtomGraph / LinkedDataHub-Apps

System, demo, and user-submitted applications built on LinkedDataHub
https://linkeddatahub.com/demo/
Apache License 2.0
11 stars 4 forks source link

add bash script, xslt, and missing ttl file (for root resource) #12

Closed Conal-Tuohy closed 2 years ago

Conal-Tuohy commented 2 years ago

The bash script ttl-to-html.sh defines a variable OUTPUT_FOLDER where the HTML files are to be written. For my purposes I've set it to /var/www/html which is the document root for my Apache 2 web server.

The bash script then uses Jena riot to convert the turtle files to trix xml, so they can be transformed via XSLT. I noticed that the turtle documents used <> to refer to the root resource of the entire website, not to the turtle document itself. So in the conversion I have set all the turtle files to have the same URI (file:///) in order that the merged data forms a coherent graph. The trix files are crudely merged into a single graph by removing the first and last line containing the root element start and end tags, and concatenating them.

Then the script uses the Saxon docker image to execute the ttl-to-html.xsl transformation. I mount the PWD and the OUTPUT_FOLDER as two distinct volumes. The ttl-to-html.xsl stylesheet expects an output-folder parameter, and I've set that to match the mount location of the OUTPUT_FOLDER in the docker image (/output).

The ttl-to-html.xsl stylesheet generates a full XHTML page, containing the HTML literal content from the turtle files, and populates the HTML head with the other metadata from the turtle files (title, description, parent topic link, seeAlso link).

The ttl-to-html.xsl stylesheet imports the decorate-html.xsl stylesheet, and delegates to it to format the plain XHTML pages into full pages. It also generates an outline menu (nested HTML lists, containing hyperlinks) for the entire site and passes that to decorate-html.xsl as a tunnel parameter, so it can be inserted into the full page. I've done a basic decorate-html.xsl but I expect you will want to change this significantly.

In order to generate pages that could be served as static files, in response to URIs ending in /, I converted the resources to index.html files inside a directory of the appropriate name, e.g. the resource user-guide/import-data/import-csv-data/ produces the file user-guide/import-data/import-csv-data/index.html. The XHTML literals in the turtle files also include hyperlinks pointing to URIs ending in /, so they will continue to match.

I noted that (apart from being the parent of the top-level topics) the root of the website was not really represented in the RDF graph; there was no actual content for the <> resource. So I added the small turtle file linkeddatahub.ttl to represent the home page of the documentation, which ends up as the index.html page of the site.

Conal-Tuohy commented 2 years ago

I've added a list of child resources as page-local navigation.

I've done it slightly differently to your example: I inserted the page-local navigation links into a <nav> inside the page's <header>. But more importantly I separated out just the p[@class='lead'] and not the entire div[p/@class='lead'], because at least in some cases I found that the <div> containing the lead para contained the entire remaining content. I hope I've captured your actual intent, but it's easy enough to change if not.

I moved the CSS into a separate file and made some small fixes.