# Make HTML Page List script # Author: Theodore Zacharia # V1.0 - initial release # April 2019 # simple script to create a hierarchical list of all pages in the site TARGETPAGE="pagelist.html" T1=flist ADIRSET="../* ../sw ../trips" # predefined list ADIRSET=$(find ../* -type d -maxdepth 1) # all dirs cat << EOF > $TARGETPAGE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } button.collapsible.active, button.collapsible:hover { background-color: #555; } button.collapsible:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } button.collapsible.active:after { content: "\2212"; } .content { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1; transition: max-height 0.2s ease-out; } </style> </head> <body> This is just a dump of all html pages on the site, some will definetly NOT work as they are old or need to be called in a certain context <p> <p>Page Sections:</p> EOF for ADIR in $(ls -d $ADIRSET) ../*.html do echo "checking $ADIR" if [ -d $ADIR ] then find $ADIR -maxdepth 1 -name "*.html" > $T1 else echo $ADIR > $T1 fi CT=`wc -l $T1 | awk '{print $1}'` if [ $CT -eq 0 ] then continue fi if [ -d $ADIR ] then echo "<button class=\"collapsible\">Open $ADIR</button>" >> $TARGETPAGE echo "<div class=\"content\">" >> $TARGETPAGE fi # create a layer which can open and close while IFS= read -r APAGE do echo "APAGE=$APAGE" echo "<br><a href="$APAGE">$APAGE</a>" >> $TARGETPAGE done<"$T1" if [ -d $ADIR ] then echo "</div>" >> $TARGETPAGE fi done cat << EOF1 >> $TARGETPAGE <script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } </script> </body> </html> EOF1 # now make the colour version of this script for the page #pygmentize -l shell -f html -o makeall.colour.html makeall.sh highlight makeall.sh > makeall.colour.html rm -f $T1