termblack

bash: create HTML with automatic -scripts- and -links-

I was frequently writing small projects, or test projects, and found myself just needing an index.html hull with a number of links to various local js files and css files, as well as cdn based libraries.

Here’s a bash command I wrote that will create a local index.html file and search through all of the arguments¬†provided to the command to automatically insert js or css files by name, or cdn libraries by partial match. Obviously you could add any number of match criteria to the script. Note: you will need to manually update the cdn addresses for library version numbers as time goes on.

By default it partial matches for backbone, underscore, jquery, d3, and the usual suspects.

Usage:> makehtml anyjsfile.js anycsfile.css underscore backbone d3¬†partialmatchkey partialmatchkey…etc

#!/bin/bash

FILE="index.html"

touch $FILE
echo "<!DOCTYPE html>" > $FILE
echo "<HTML lang="en">" >> $FILE
echo "<HEAD>" >> $FILE
echo "<meta charset="UTF-8">" >> $FILE

function addCSS() {
  str=$1;
  echo "<LINK rel=\"stylesheet\" href=\"$str\">" >> $FILE
};
function addJS() {
  str=$1;
  echo "<SCRIPT src=\"$str\"></SCRIPT>" >> $FILE
};

lowerString=1

function toLower()
{
   local __word=$1
   local __len=${#__word}
   local __char
   local __octal
   local __decimal
   local __result

   for (( i=0; i<__len; i++ ))
   do
      __char=${__word:$i:1}
      case "$__char" in
         [A-Z] )
            printf -v __decimal '%d' "'$__char"
            printf -v __octal '%03o' $(( $__decimal ^ 0x20 ))
            printf -v __char \\$__octal
            ;;
      esac
      __result+="$__char"
   done
   lowerString="$__result"
};

for thing in $@; do
  if [ $FILE = $thing ]; then
    continue;
  fi

  toLower $thing

  if [[ $lowerString == *".css"* ]]; then
    echo "add css"
    addCSS $lowerString
    continue
  fi
  if [[ $lowerString == *".js"* ]]; then
    echo "add js"
    addJS $lowerString
    continue
  fi
  if [[ $lowerString == *"bootstrap"* ]]; then
    addCSS "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
    continue
  fi
  if [[ $lowerString == *"jquery"* ]]; then
    addJS "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
    continue
  fi
  if [[ $lowerString == *"angular"* ]]; then
    addJS "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
    continue
  fi
  if [[ $lowerString == *"three"* ]]; then
    addJS "https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"
    continue
  fi
  if [[ $lowerString == *"webfont"* ]]; then
    addJS "https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"
    continue
  fi
  if [[ $lowerString == *"backbone"* ]]; then
    addJS "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
    continue
  fi
  if [[ $lowerString == *"underscore"* ]]; then
    addJS "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
    continue
  fi
  if [[ $lowerString == *"d3"* ]]; then
    addJS "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"
    continue
  fi

done

echo "</HEAD>" >> $FILE
echo "<BODY>" >> $FILE
echo "<p>===============<p>" >> $FILE
echo "<p>CONTENT OF PAGE<p>" >> $FILE
echo "<p>===============<p>" >> $FILE
echo "</BODY>" >> $FILE
echo "</HTML>" >> $FILE

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>