paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 0408d683f2b524aa1c0cb67269e8f4e322e21ba4
parent 8cb46296745dadaf9998d88e484857d4819924e1
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Wed, 22 Jan 2020 22:29:38 -0500

Add creation of <section> tags during page compile

<section> tags used when there is a table of contents that logically
splits the page up into separate sections. Done to further the website's
accessibility.

Diffstat:
Mcompile | 51++++++++++++++++++++++++++++++++++++++-------------
1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/compile b/compile @@ -64,7 +64,7 @@ for page in $@; do pagedir=$(dirname "$page") checkpage=$(echo "$pagedir" | cut -f 1 -d '/') - # Stripts "pages" from the file path so files are saved in the root of + # Strips "pages" from the file path so files are saved in the root of # $htmldir if [[ "$pagedir" == "pages" ]]; then savepath="." @@ -108,8 +108,8 @@ for page in $@; do # Assumes first line of every markdown file is the header in the format: # "## <page_title>" - # And sets the html <title> tag to be <page_title>. - pagetitle=$(head -n 1 "$pagedir"/"$pagename".md | cut -f 2- -d " ") + # Sets the html <title> tag to be <page_title>. + pagetitle=$(head -n 1 "$pagedir"/"$pagename".md | cut -d" " -f 2-) printf " Setting page title..." sed -i "s/<title>.*<\/title>/<title>${pagetitle//&/\\&} - paritybit.ca<\/title>/" \ "$htmldir"/"$savepath"/"$pagename".html @@ -150,6 +150,17 @@ for page in $@; do # Assumes the seventh line of every markdown file defines the sections # to add to a table of contents (preceded by '[//]: #'). + # + # Each ((sub)sub)section is added to the list in reverse order of + # appearance as the entry is appended after the table of contents header + # for simplicity (the header is an "anchor point" for sed to act on). + # Also added is an internal link to the relevant header in the actual + # content, <section> elements to divide each logical section of the + # document for accessibility, and a "back-to-top" arrow beside each + # section (not sub-sections). + # + # Note: sectionNameNS is the name of the section without any spaces + # because the HTML spec says no spaces in href property toc=$(sed '7!d' "$pagedir"/"$pagename".md | cut -d# -f 2) # Remove leading whitespace and quote marks tocClean=$(echo -e "${toc}" | sed -e 's/^[[:space:]]*//') @@ -159,16 +170,8 @@ for page in $@; do IFS=';' read -r -a sections <<< "$tocClean" # Check for an empty array, if it's not empty then populate the TOC if [ ! "${#sections[@]}" -eq "0" ]; then - # Add a heading - sed -i "/TOC/a <div id=\"table-of-contents\">\n<p id=\"toc-title\">Table of Contents</p>" \ + sed -i "/TOC/a <div id=\"table-of-contents\" aria-label=\"Table of Contents\">\n<h2 id=\"toc-title\">Table of Contents</h2>" \ $htmldir/$savepath/$pagename.html - # Add each section to list after the h3 tag (done in reverse order - # because lines are appended immediately after the h3 tag) and add - # an internal link to the header of that section as well as a - # "back-to-top" arrow beside each regular section header. - # - # Note: sectionNameNS is the name of the section without any spaces - # because the HTML spec says no spaces in href property sed -i "/toc-title/a </ul></div>" $htmldir/$savepath/$pagename.html for ((i = ${#sections[@]}-1; i >= 0; i--)); do # Remove leading whitespaces @@ -179,29 +182,51 @@ for page in $@; do sectionNameNS=$(sed -e 's/ //g' <<< "$sectionName") sed -i "/toc-title/a <ul><ul><li><a href=\"#$sectionNameNS\">$sectionName</a></li></ul></ul>" \ $htmldir/$savepath/$pagename.html + + sed -i "/<h5>$sectionName<\/h5>/i </section>\n<section>" \ + $htmldir/$savepath/$pagename.html + sed -i "/<h5>$sectionName<\/h5>/i <a id=\"$sectionNameNS\"></a>" \ $htmldir/$savepath/$pagename.html + # Check if this is supposed to be a sub-section & add <ul> elif echo "$sectionName" | grep -qi "^sub:"; then sectionName=${sectionName:4} sectionNameNS=$(sed -e 's/ //g' <<< "$sectionName") sed -i "/toc-title/a <ul><li><a href=\"#$sectionNameNS\">$sectionName</a></li></ul>" \ $htmldir/$savepath/$pagename.html + + sed -i "/<h4>$sectionName<\/h4>/i </section>\n<section>" \ + $htmldir/$savepath/$pagename.html + sed -i "/<h4>$sectionName<\/h4>/i <a id=\"$sectionNameNS\"></a>" \ $htmldir/$savepath/$pagename.html - # Otherwise, this is a normal section + + # Otherwise, this is a normal section, no <ul> added else sectionNameNS=$(sed -e 's/ //g' <<< "$sectionName") sed -i "/toc-title/a <li><a href=\"#$sectionNameNS\">$sectionName</a></li>" \ $htmldir/$savepath/$pagename.html + + sed -i "/<h3>$sectionName<\/h3>/i </section>\n<section>" \ + $htmldir/$savepath/$pagename.html + sed -i "/<h3>$sectionName<\/h3>/i <a id=\"$sectionNameNS\"></a>" \ $htmldir/$savepath/$pagename.html + sed -i "s/<h3>$sectionName<\/h3>/<h3>$sectionName <a class=\"back-to-top\" href=\"#\">\&\#10548\;<\/a><\/h3>/g" \ $htmldir/$savepath/$pagename.html fi done # Closes out the table of contents list sed -i "/toc-title/a <ul>" $htmldir/$savepath/$pagename.html + + # Wraps the beginning of the document (stuff before first section) + # in a section by adding the first <section> tag + sed -i "/END OF HEADER FILE/a <section>" $htmldir/$savepath/$pagename.html + + # Closes out the final section by inserting final </section> tag + sed -i "/<\/main>/i </section>" $htmldir/$savepath/$pagename.html fi tput setaf 2; tput bold echo " [DONE]"