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:
| M | compile | | | 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]"
