image embedding (for inline style bg images)

diff --git a/clickslide.css b/clickslide.css
index 56313c8747d930ad568eaa8998d49fced5928854..174384b54e3d653f893f2db87b2347a16e2af7e1 100644 (file)
--- a/clickslide.css
+++ b/clickslide.css
@@ -1,6 +1,9 @@
 * {
   box-sizing: border-box;
   margin: 0; padding: 0;
 * {
   box-sizing: border-box;
   margin: 0; padding: 0;

+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;

 }
 
 /*  min-height: 240px */     body { font-size:  9px; }
 }
 
 /*  min-height: 240px */     body { font-size:  9px; }

diff --git a/clickslide.sh b/clickslide.sh
index ddc94c37ef79e44753e54fc71b670f1aef45d0f2..dcb01db6dc4b3264d00cfa3ee5dca6b7d2863c5c 100755 (executable)
--- a/clickslide.sh
+++ b/clickslide.sh
@@ -22,16 +22,29 @@ depth=0 ucdepth=-1
       line="${line#*>}"
       tag="${tag}>"
     fi
       line="${line#*>}"
       tag="${tag}>"
     fi

-  
+
+    ### Image embedding for Inline styles
+    while expr "$tag" : '.*<[^>]*style="[^"]*url("\?[^)]\+\.\(png\|jpg\|jpeg\|gif\|svg\)"\?)'; do
+      pre="${tag%%url(*)*}"
+      post="${tag#*url(*)}"
+      file="${tag#${pre}url(}" file="${file%)$post}"
+      file="${file#"}" file="${file%"}"
+      echo Inlining Image "$file" >&2
+      if [ -r "$file" ]; then
+        tag="${pre}url('data:image/${file##*.};base64,$(base64 <"${file}" |tr -d \\n)')${post}"
+      fi
+    done >/dev/null
+
+    ### Tag Processing

     case $tag in
     case $tag in

-      *\<head\>*|\*\<head\ *\>)
+      *\<head\>*|\*\<head\ *\>)  # Inline styles into head

         printf '%s<meta name="viewport" content="width=device-width">
                 <style type="text/css"><!--\n' "${tag%${tag#*<head*>}}"
         cat "${0%/*}/clickslide.css"
         printf '\n--></style>%s' "${tag#*<head*>}"
         tag='' depth=$((depth + 1))
         ;;
         printf '%s<meta name="viewport" content="width=device-width">
                 <style type="text/css"><!--\n' "${tag%${tag#*<head*>}}"
         cat "${0%/*}/clickslide.css"
         printf '\n--></style>%s' "${tag#*<head*>}"
         tag='' depth=$((depth + 1))
         ;;

-      *\<slide\ *id=\"?*\"*\>*)
+      *\<slide\ *id=\"?*\"*\>*)  # Count slide id, insert "next" button

         prev="$next"
         next="${tag#*<slide }" next="${next#*id=\"}" next="${next%\"*}"
         next="autoslide${idoff}"
         prev="$next"
         next="${tag#*<slide }" next="${next#*id=\"}" next="${next%\"*}"
         next="autoslide${idoff}"


@@ -48,25 +61,25 @@ depth=0 ucdepth=-1
           "${tag%<slide*}" "$next" "$idoff" "$next" "${tag#*<slide}"
         tag='' depth=$((depth + 1))
         ;;
           "${tag%<slide*}" "$next" "$idoff" "$next" "${tag#*<slide}"
         tag='' depth=$((depth + 1))
         ;;

-      *\</slide\>*)
+      *\</slide\>*)  # Insert "previous" button

         printf '%s</div><a class="prevslide" href="#%s">previous</a>%s' \
           "${tag%</slide>*}" "$prev" "${tag#*</slide>}"
         tag='' depth=$((depth - 1))
         ;;
         printf '%s</div><a class="prevslide" href="#%s">previous</a>%s' \
           "${tag%</slide>*}" "$prev" "${tag#*</slide>}"
         tag='' depth=$((depth - 1))
         ;;

-      *\<*class=\"uncover\"*\>*)
-        #printf '%s<li></li>' "$tag"
-        printf '%s' "$tag"
-        tag='' depth=$((depth + 1))
-        ucdepth=$depth
-        ;;
-      *\<body*\>*)
+      *\<body*\>*)  # Insert toplevel link

         printf '%s<a href="#" class="toplevel">overview</a>' "$tag"
         tag='' depth=$((depth + 1))
         ;;
         printf '%s<a href="#" class="toplevel">overview</a>' "$tag"
         tag='' depth=$((depth + 1))
         ;;

-      *\</body*\>*)
+      *\</body*\>*)  # Insert total slide count

         printf '<span class="count">%i</span>%s' "$idoff" "$tag"
         tag='' depth=$((depth - 1))
         ;;
         printf '<span class="count">%i</span>%s' "$idoff" "$tag"
         tag='' depth=$((depth - 1))
         ;;

+      *\<*class=\"uncover\"*\>*)  # Insert checkboxes in "uncover" lists
+        #printf '%s<li></li>' "$tag"
+        printf '%s' "$tag"
+        tag='' depth=$((depth + 1))
+        ucdepth=$depth
+        ;;

       *\</*\>*)
         printf %s "$tag"
         tag='' depth=$((depth - 1))
       *\</*\>*)
         printf %s "$tag"
         tag='' depth=$((depth - 1))

diff --git a/example/demo.short b/example/demo.short
index ae866d48dc2f63179d97b68b67f0708f6a3293d6..5df9a71b9ec801aeb527acb93eff20e7ee0cdfcf 100644 (file)
--- a/example/demo.short
+++ b/example/demo.short
@@ -40,8 +40,8 @@
     ]
   ]
   [slide [h2 Simplifying HTML]
     ]
   ]
   [slide [h2 Simplifying HTML]

-    Maintain the flexibility of plain HTML. Decrease the verbosity of the code. [br]
-    [pre style="display: inline-block; width: 46%;"
+    Maintain the flexibility of plain HTML. Decrease verbosity of the code. [br]
+    [pre style="display: inline-block; width: 46%; background-image: url(exb0_light.jpg);"

 \<html\>
   \<head\>
     \<title\>Demo\</title\>
 \<html\>
   \<head\>
     \<title\>Demo\</title\>


@@ -51,7 +51,7 @@
   \</body\>
 \</html\>
     ]
   \</body\>
 \</html\>
     ]

-    [pre style="display: inline-block; width: 46%;"
+    [pre style="display: inline-block; width: 46%; background-image: url(exb3_light.jpg);"

 \[html
   \[head
     \[title Demo\]
 \[html
   \[head
     \[title Demo\]