Generate HTML/markup from folder full of course videos

genhtml.sh

#!/bin/bash

course="php-101"

totalcount=0
for i in *.mp4; do
  [[ $i == *"- clean"* ]] && continue
  totalcount=$((totalcount+1))
done;

count=0
lastsection=0
for i in *.mp4; do
  [[ $i == *"- clean"* ]] && continue
  count=$((count+1))
  prefix=`echo "$i" | sed "s/^\([0-9]*\)\.\(.*\)/\1/"`
  title=`echo "$i" | sed "s/^\([0-9]*\)\. \(.*\)\.mp4/\2/"`
  thissection=${prefix::1}
  if [ "$thissection" != "$lastsection" ] && [ "$count" != 1 ]; then
    echo "</div>"
    echo "
<hr class=\"mt-12\" />
"
  fi
  if [ "$thissection" != "$lastsection" ] || [ "$count" == 1 ]; then
    echo "<h2 class=\"pt-8 pb-4 h3\">
    Heading
</h2>
<div class=\"video-group\">"
  fi
  echo "    <VideoThumbnail
        thumb=\"/images/courses/$course/screenshots/$prefix.webp\"
        title=\"$title\"
    />"
  if [ "$count" == "$totalcount" ]; then
    echo "</div>"
  fi
  lastsection="$thissection"
done;