Finish first version of newly tarted up website.

2013-02-17 00:27:07 +00:00 · 2013-02-17 00:27:07 +00:00 · 533c08cb4f
parent fcdbbd2f6b
commit 533c08cb4f
9 changed files with 145 additions and 40 deletions
--- a/dottes.html.footer
+++ b/dottes.html.footer
@ -1,3 +1,4 @@
 </table>
+</div>
 </body>
 </html>
--- a/dottes.html.header
+++ b/dottes.html.header
@ -1,23 +1,44 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<title>Cry Havoc tunes - @BOOK@</title>
+  <meta charset="utf-8" />
+  <title>Cry Havoc tunes - @TITLE@</title>
+  <link rel="stylesheet" href="../css/reset.css" />
+  <link rel="stylesheet" href="../css/text.css" />
+  <link rel="stylesheet" href="../css/960.css" />
+  <link rel="stylesheet" href="../css/dottes.css" />
+
+  <link href='http://fonts.googleapis.com/css?family=Pirata+One|Oswald'
+        rel='stylesheet' type='text/css'>
 </head>
 <body>
+  <div class="container_12">
+    <a href="/">
+      <div class="grid_12 header-strip banner">
+        <h1>Ye Crie Havock Booke of Dottes</h1>
+      </div>
+    </a>
+
+    <div class="clear"></div>
+
+    <div class="grid_12 dottes-body">
      <h1>@SUBTITLE@</h1>
-<p>
-@INTRO@
-<p>
-You can download a PDF with a booklet of these tunes. There is an
+      <p>@INTRO@
+      <p>You can download a PDF with a booklet of these tunes. There is an
        <a href="@BOOK@-A5.pdf">A5 landscape book</a> with one
        tune per page, or an <a href="@BOOK@-A4.pdf">A4 book</a> with two or
        more tunes per page.
-<p>
-If you have a printer that can do duplex (i.e. print on both sides of the
-paper), you might like the
+      <p>If you have a printer that can do duplex (i.e. print on both sides
+        of the paper), you might like the
        <a href="@BOOK@-A5bookletA4.pdf">A5 booklet</a>.
        Print this onto A4 paper using both sides of the paper, and fold in half
        to make an A5 booklet.
-<p>
-Issue @BUILD@
-<p>
-<table>
+      <p>When changes to this site are made, the issue number is incremented.
+        This is issue @BUILD@.
+    </div>
+
+    <div class="clear"></div>
+
+    <div class="grid_12 dottes-body">
+      <h1>The tunes</h1>
+      <table class="dottes-tune-table">
--- a/dottes.html.tune
+++ b/dottes.html.tune
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Cry Havoc tunes - @TITLE@</title>
+  <link rel="stylesheet" href="../css/reset.css" />
+  <link rel="stylesheet" href="../css/text.css" />
+  <link rel="stylesheet" href="../css/960.css" />
+  <link rel="stylesheet" href="../css/dottes.css" />
+
+  <link href='http://fonts.googleapis.com/css?family=Pirata+One|Oswald'
+        rel='stylesheet' type='text/css'>
+</head>
+<body>
+  <div class="container_12">
+    <a href="/">
+      <div class="grid_12 header-strip banner">
+        <h1>Ye Crie Havock Booke of Dottes</h1>
+      </div>
+    </a>
+
+    <div class="clear"></div>
+
+    <div class="grid_12 dottes-body">
+      <h1>@TITLE@</h1>
+      <img class="dottes-png" src="@TUNE@.png" alt="@TITLE@ dots">
+      <ul class="tune-data-list">
+        <li><a class="dottes-link-tune dottes-pdf"
+               href="@TUNE@.pdf">PDF</a></li>
+        <li><a class="dottes-link-tune dottes-midi"
+               href="@TUNE@.mid">MIDI</a></li>
+        <li><a class="dottes-link-tune dottes-mp3"
+               href="@TUNE@.mp3">MP3</a></li>
+        <li><a class="dottes-link-tune dottes-abc"
+               href="@TUNE@.abc">ABC</a></li>
+      </ul>
+    </div>
+
+  </div>
+</body>
+</html>
--- a/dottes.html.tuneindex
+++ b/dottes.html.tuneindex
@ -0,0 +1,4 @@
+<tr>
+<td><a class="dottes-tune-link" href="@TUNE@.html">@TITLE@</a></td>
+<td><img class="dottes-tune-table-image" src="firstline-@TUNE@.png" alt="@TITLE@ first line"></td>
+</tr>
--- a/makeAll.sh
+++ b/makeAll.sh
@ -13,9 +13,10 @@ makeABooke()
    ./makeBookeA5.sh $1
    ./makeBookeA4.sh $1
    ./makeWebItems.sh $1
-    ./makeWeb.sh $1
+    ./makeWeb.sh $1 $2
 }

 makeABooke $1
+
 ./makeCello.sh $1
-makeABooke $1-Cello
+makeABooke $1-Cello cello
--- a/makeCello.sh
+++ b/makeCello.sh
@ -19,6 +19,9 @@ outdir=$dir/$1-Cello

 mkdir -p $outdir

+# Copy book component items.
+cp $booke/*.txt $outdir
+
 find $booke -name "*.abc" | sort |
    while read filename
    do
--- a/makeWeb.sh
+++ b/makeWeb.sh
@ -4,37 +4,47 @@
 # to be already built.
 #

-if [ $# != 1 ]; then
-    echo "Usage: makeWeb.sh <book dir name>"
+if [ $# -lt 1 -o $# -gt 2 ]; then
+    echo "Usage: makeWeb.sh <book dir name> [<instrument name>]"
    exit 1
 fi

 dir=`pwd`

-booke=$dir/$1
+bookedir=$dir/$1
 webdir=$dir/web/$1
 graphicsdir=$dir/graphics/$1
 output=index.html
+title=$1
+booke=$1

 buildno=`cat buildno.txt`
 subtitle=
 intro=
-if [ -r $booke/subtitle.txt ]; then
-    subtitle=`cat $booke/subtitle.txt`
+if [ -r $bookedir/subtitle.txt ]; then
+    subtitle=`cat $bookedir/subtitle.txt`
 fi
-if [ -r $booke/intro.txt ]; then
-    intro=`cat $booke/intro.txt`
+if [ -r $bookedir/intro.txt ]; then
+    intro=`cat $bookedir/intro.txt`
+fi
+
+if [ -n "$2" ]; then
+    title="${title/-.*$//} ($2)"
+    subtitle="${subtitle} ($2)"
 fi

 mkdir -p $webdir

 sed -e "s/@BUILD@/$buildno/" -e "s/@SUBTITLE@/$subtitle/" \
-    -e "s/@INTRO@/$intro/" -e "s/@BOOK@/$1/" dottes.html.header > $webdir/$output
+    -e "s/@TITLE@/$title/" -e "s/@INTRO@/$intro/" \
+    -e "s/@BOOK@/$booke/" dottes.html.header > $webdir/$output

-cp $1-*.pdf $webdir
+# Copy in the book PDFs. Like the graphics, Midi etc. these are assumed
+# to be already generated.
+cp $-*.pdf $webdir

 # Now, for each tune, make the tune graphic and sound.
-find $booke -name "*.abc" | sort |
+find $bookedir -name "*.abc" | sort |
    while read filename
    do
        title=`$dir/abcfield.py --field T --html $filename`
@ -46,14 +56,14 @@ find $booke -name "*.abc" | sort |
        # And copy the ABC.
        cp $filename $webdir

-        echo "<tr>" >> $webdir/$output
-        echo "<td>${title}</td>" >> $webdir/$output
-        echo "<td><a href=\"${name}.png\">PNG</a></td>" >> $webdir/$output
-        echo "<td><a href=\"${name}.pdf\">PDF</a></td>" >> $webdir/$output
-        echo "<td><a href=\"${name}.mid\">MIDI</a></td>" >> $webdir/$output
-        echo "<td><a href=\"${name}.mp3\">MP3</a></td>" >> $webdir/$output
-        echo "<td><a href=\"${name}.abc\">ABC</a></td>" >> $webdir/$output
-        echo "</tr>" >> $webdir/$output
+        # Generate the tune web page.
+        tunepage=${name}.html
+
+        sed -e "s/@TITLE@/${title}/" \
+            -e "s/@TUNE@/${name}/" dottes.html.tune > $webdir/$tunepage
+
+        sed -e "s/@TITLE@/${title}/" \
+            -e "s/@TUNE@/${name}/" dottes.html.tuneindex >> $webdir/$output
    done

 cat dottes.html.footer >> $webdir/$output
--- a/makeWebItems.sh
+++ b/makeWebItems.sh
@ -25,12 +25,14 @@ find $booke -name "*.abc" | sort |
        name=`basename $filename .abc`
        tmpname=${name}.tmp
        convert -density 96 $graphicsdir/${name}.eps $builddir/${tmpname}.png
+        convert -density 96 $graphicsdir/firstline-${name}.eps $builddir/firstline-${tmpname}.png

        abc2midi $filename -o $builddir/${tmpname}.mid
        timidity -Ow -o $builddir/${tmpname}.wav $builddir/${tmpname}.mid
        lame --quiet $builddir/${tmpname}.wav $builddir/${tmpname}.mp3

        mv $builddir/${tmpname}.png $builddir/${name}.png
+        mv $builddir/firstline-${tmpname}.png $builddir/firstline-${name}.png
        mv $builddir/${tmpname}.mid $builddir/${name}.mid
        mv $builddir/${tmpname}.mp3 $builddir/${name}.mp3
        rm $builddir/${tmpname}.wav
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@ -90,6 +90,17 @@ div.dottes-transpose-tunes
 {
 }

+table.dottes-tune-table
+{
+    padding: 10px;
+    margin: 10px;
+}
+
+table.dottes-tune-table td
+{
+    vertical-align: middle;
+}
+
 ul.tune-type-list
 {
    list-style-type: none;
@ -100,3 +111,14 @@ ul.tune-type-list li
 {
    display: inline;
 }
+
+ul.tune-data-list
+{
+    list-style-type: none;
+    margin: 20px;
+}
+
+ul.tune-data-list li
+{
+    display: inline;
+}