From a3daf45085ba5d9c7aaf48dabe2912f6e4a6d43f Mon Sep 17 00:00:00 2001
From: David Botton <david@botton.com>
Date: Tue, 26 Jan 2021 01:29:39 -0500
Subject: [PATCH] Turorial 16

---
 README.md                 |  1 +
 clog-document.lisp        | 16 ++++++++++--
 clog.lisp                 |  1 +
 tutorial/16-tutorial.lisp | 51 +++++++++++++++++++++++++++++++++++++++
 tutorial/README.md        |  1 +
 5 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 tutorial/16-tutorial.lisp

diff --git a/README.md b/README.md
index 3aeb0af..d49a885 100644
--- a/README.md
+++ b/README.md
@@ -141,6 +141,7 @@ Tutorial Summary
 - 13-tutorial/     - Flying Solo - A minimalist CLOG project
 - 14-tutorial.lisp - Local (persistent) and Session client-side storage
 - 15-tutorial.lisp - Multi-media
+- 16-tutorial.lisp - Bootstrap 4, Loading css files and javascript
 
 Demo Summary
 
diff --git a/clog-document.lisp b/clog-document.lisp
index 25d9527..355527d 100644
--- a/clog-document.lisp
+++ b/clog-document.lisp
@@ -155,8 +155,20 @@ clog-document object. (Private)"))
 
 (defmethod load-css ((obj clog-document) css-url)
   (jquery-execute (head-element obj)
-		  (format nil "append('<link rel=\"stylesheet\"
-           href=\"~A\" type=\"text/css\">')" (escape-string css-url))))
+		  (format nil "append('<link rel=\"stylesheet\" href=\"~A\" type=\"text/css\">')"
+			  (escape-string css-url))))
+
+;;;;;;;;;;;;;;;;;
+;; load-script ;;
+;;;;;;;;;;;;;;;;;
+
+(defgeneric load-script (clog-document script-url)
+  (:documentation "Load script from SCRIPT-URL."))
+
+(defmethod load-script ((obj clog-document) script-url)
+  (jquery-execute (head-element obj)
+		  (format nil "append('<script src=\"~A\">')"
+			  (escape-string script-url))))
 
 ;;;;;;;;;
 ;; put ;;
diff --git a/clog.lisp b/clog.lisp
index 3ea49d0..96565dd 100644
--- a/clog.lisp
+++ b/clog.lisp
@@ -643,6 +643,7 @@ embedded in a native template application.)"
   (document-element generic-function)
   (ready-state      generic-function)
   (load-css         generic-function)
+  (load-script      generic-function)
   (put              generic-function)
   (put-line         generic-function)
   (put-br           generic-function)
diff --git a/tutorial/16-tutorial.lisp b/tutorial/16-tutorial.lisp
new file mode 100644
index 0000000..8399e53
--- /dev/null
+++ b/tutorial/16-tutorial.lisp
@@ -0,0 +1,51 @@
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+;; In previous tutorials we attached to an html file using bootstrap. For this tutorial we
+;; are going to create a bootstrap 4.0 page just using CLOG. For the most part CLOG is about
+;; apps but it is possible to do static pages with it. You should also check out a CSS only
+;; alternative to bootsrap - https://www.w3schools.com/w3css/default.asp
+
+(defun on-new-window (body)
+  (load-css (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css")
+  (load-script (html-document body) "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js")
+  (load-script (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js")
+
+  (setf (title (html-document body)) "Hello Boostrap")
+  
+  (let* ((jumbo (create-div body))
+	 (tmp   (create-section jumbo :h1 :content "My First Bootstrap Page"))
+	 (tmp   (create-p jumbo :content "Resize this responsive page to see the effect!"))
+
+	 (container (create-div body))
+	 (row       (create-div container))
+
+	 (col1 (create-div row))
+	 (tmp  (create-section col1 :h3 :content "Column 1"))
+	 (tmp  (create-p col1 :content "Lorem ipsum dolor.."))
+	 
+	 (col2 (create-div row))
+	 (tmp  (create-section col2 :h3 :content "Column 2"))
+	 (tmp  (create-p col2 :content "Lorem ipsum dolor.."))
+
+	 (col3 (create-div row))
+	 (tmp  (create-section col3 :h3 :content "Column 3"))
+	 (tmp  (create-p col3 :content "Lorem ipsum dolor..")))
+    
+    (setf (css-class-name jumbo) "jumbotron text-center")
+    (setf (css-class-name container) "container")
+    (setf (css-class-name row) "row")
+    (setf (css-class-name col1) "col-sm-4")
+    (setf (css-class-name col2) "col-sm-4")
+    (setf (css-class-name col3) "col-sm-4"))
+  
+  (run body))
+
+(defun start-tutorial ()
+  "Start turtorial."
+
+  (initialize #'on-new-window)
+  (open-browser))
diff --git a/tutorial/README.md b/tutorial/README.md
index 44cf241..bf0a6db 100644
--- a/tutorial/README.md
+++ b/tutorial/README.md
@@ -48,3 +48,4 @@ Tutorial Summary
 - 13-tutorial/     - Flying Solo - A minimalist CLOG project
 - 14-tutorial.lisp - Local (persistent) and Session client side storage
 - 15-tutorial.lisp - Multi-media
+- 16-tutorial.lisp - Bootstrap 4, Loading css files and javascript