Caltech Library logo

Simple With Navigation

This theme demonstates adding a Markdown file for controlling site navigation and document specific titles. Like the simple theme you have a “content” element and a sitewide common “csspath” element.

The title element in the Markdown document is extracted with the mkpage utility called titleline.

This theme relies on three mkpage project commands - mkpage, reldocpath, titleline and ws (for testing the website and viewing from your web browser over http://localhost:8000)

To test this theme do the following run the following commands in this directory.

    ./mk-website.bash
    ws

Point your webbrowser at http://localhost:8000 and view this page.

Template Example

    <!DOCTYPE html>
    <html>
    <head>
        ${if(title)}<title>${title}</title>${endif}
        ${if(csspath)}<link rel="stylesheet" href="${csspath}">${endif}
        ${if(css)}<style>${css}</style>${endif}
    </head>
    <body>
        <header>
            ${if(title)}<h1>${title}</h1>${endif}
        </header>
        ${if(nav)}<nav>${nav}</nav>${endif}
        ${if(content)}<section>${content}</section>${endif}
        ${if(footer)}<footer>${footer}</footer>${endif}
    </body>
    </html>

Bash Script

    #!/bin/bash

    START=$(pwd)
    cd "$(dirname "$0")"

    function SoftwareCheck() {
        for NAME in "$@"; do
            APP_NAME="$(which "$NAME")"
            if [ "$APP_NAME" = "" ] && [ ! -f "./bin/$NAME" ]; then
                echo "Missing $NAME"
                exit 1
            fi
        done
    }

    function GenerateNav() {
        echo "+ [Home](/)" >nav.md
        echo "+ [Up](../)" >>nav.md
        for FNAME in $(find . -type f | grep -E "\.md$"); do
            title="$(titleline -i "$FNAME")"
            docpath="$(dirname "$FNAME")"
            html_filename="$(basename "$FNAME" .md).html"
            if [ "$html_filename" != "nav.html" ]; then
                echo "+ [$title]($docpath/$html_filename)" >>nav.md
            fi
        done
    }

    echo "Checking necessary software is installed"
    SoftwareCheck mkpage reldocpath titleline ws

    echo "Generating nav.md from current Markdown files found"
    GenerateNav

    echo "Converting Markdown files to HTML supporting a relative document path to the CSS file"
    for MARKDOWN_FILE in $(find . -type f | grep -E "\.md$"); do
        # Get filename
        FNAME="$(basename "$MARKDOWN_FILE")"
        if [ "$FNAME" != "nav.md" ]; then
            # Caltechlate DOCPath
            DOCPath="$(dirname "$MARKDOWN_FILE")"
            # Calculate the HTML filename
            HTML_FILE="$(basename "$MARKDOWN_FILE" .md).html"
            CSSPath="$(reldocpath "$DOCPath" css)"
            WEBSITE_TITLE="$(titleline -i "$MARKDOWN_FILE")"
            echo "Generating $WEBSITE_TITLE from $MARKDOWN_FILE"
            mkpage \
                "title=text:$WEBSITE_TITLE" \
                "csspath=text:$CSSPath/site.css" \
                "nav=nav.md" \
                "content=$MARKDOWN_FILE" \
                page.tmpl >"$DOCPath/$HTML_FILE"
        fi
    done

    cd "$START"

Improvements over one-element

Limitations

  1. This theme assumes this directory is the root HTML directory
  2. nav.md is treated as a special filename and not rendered as its own page
  3. Navigation is defined as a UL list and always expanded but this could be improved with updating the CSS pointed to by CSSPath